/* ======================================================================= TOP A Platform — R3 renderer theme. Ported verbatim from the approved R3 visual baseline (TOPA-Task020-R3-Demo/styles.css, sha256 3a9dcc48…d2b2) with exactly two removals, both of them prototype-only furniture: * .flag — the "visual prototype / sample copy" banner * .sw* rules — the local demo chat widget, which sent nothing anywhere Nothing else is altered. RTL and LTR share one sheet through html[dir=...] and logical properties, as R3 wrote it. ======================================================================= */ /* ========================================================================= TOP A PLATFORM — Task020 · V05 (consolidated refinement, built on V04) Neutral polished black · deliberate TOP A green · optional gold. Light comes from a source and spreads into black; it connects sections. Original SVG/CSS illustrations + one icon family. System fonts only. ========================================================================= */ :root { /* TASK054: the shared design tokens (css/topa-ds.css) — one surface family, one accent, one type pair for every page */ --bg: var(--t-bg); --s1: var(--t-s1); --s2: var(--t-s2); --s3: var(--t-s3); --line: var(--t-line); --line-2: var(--t-line-2); /* Brand */ --green: var(--t-green); /* CTA, accents, light source */ --green-d: #1E7A4C; /* deep light only */ --gold: #C9A24B; /* optional — used in TOPA SYSTEM only */ --ink: var(--t-ink); --mute: var(--t-mute); --mute-2: var(--t-mute-2); --font-ar: var(--t-sans); --font-en: var(--t-sans); --font-display: var(--t-display); --hero: clamp(2.6rem, 6.6vw, 5.6rem); --h2: clamp(1.9rem, 3.6vw, 3.1rem); --h3: clamp(1.08rem, 1.4vw, 1.25rem); --lead: clamp(1.02rem, 1.2vw, 1.15rem); --sm: 0.86rem; --xs: 0.78rem; --r: var(--t-r-xl); --r-m: var(--t-r-l); --r-s: var(--t-r); --maxw: var(--t-wrap); --ease: cubic-bezier(0.19, 1, 0.22, 1); --soft: cubic-bezier(0.4, 0, 0.2, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ar); font-size: 16px; line-height: 1.8; -webkit-font-smoothing: antialiased; overflow-x: hidden; } html[dir="ltr"] body { font-family: var(--font-en); line-height: 1.65; } html[dir="rtl"] body { letter-spacing: 0 !important; } html[dir="rtl"] .hero__title, html[dir="rtl"] .h2 { word-spacing: 0.05em; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } h1, h2, h3, h4, p, ul { margin: 0; } ul { padding: 0; list-style: none; } :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } /* Icon family: 24-grid line icons, 1.6 stroke, currentColor */ .ic { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* ---- Type helpers ------------------------------------------------------- */ .h2 { font-family: var(--font-display); font-size: var(--h2); line-height: 1.18; font-weight: 600; max-width: 22ch; letter-spacing: -0.005em; text-wrap: balance; } .h2 > .l { display: block; } .em { color: var(--green); } .lead { color: var(--mute); font-size: var(--lead); max-width: 56ch; margin-top: 1.1rem; } .kicker { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.42rem 0.9rem; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255,255,255,0.03); font-size: var(--sm); color: var(--ink); margin-bottom: 1.25rem; } .kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); } .center { text-align: center; } .center .h2, .center .lead { margin-inline: auto; } .center .kicker { justify-content: center; } /* ---- Buttons ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; font: inherit; font-family: var(--t-sans); font-size: 0.95rem; font-weight: 600; line-height: 1; min-height: 48px; padding: 0.9rem 1.5rem; border-radius: var(--t-r); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform var(--t-t1) var(--t-e-std), box-shadow var(--t-t2) var(--t-e-std), border-color var(--t-t1), color var(--t-t1), background var(--t-t1); } .btn:active { transform: scale(0.985); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--green); } .btn--green { background: var(--green); color: var(--t-green-ink); border-color: var(--green); } .btn--green:hover { background: var(--t-green-3); border-color: var(--t-green-3); } .btn--line { background: transparent; color: var(--ink); border-color: var(--t-line-3); } .btn--line:hover { border-color: var(--ink); background: var(--s2); } .btn--block { width: 100%; } /* ---- Light system -------------------------------------------------------- .beam : a narrow source bar with a soft cone spreading downward (FTMO-type stage light) .field : a broad blurred light field fading into black beneath the hero */ .beam { position: absolute; inset-inline: 0; top: 0; height: 100%; pointer-events: none; z-index: 0; } .beam::before { content: ""; position: absolute; top: 0; left: 50%; width: 220px; height: 3px; transform: translateX(-50%); background: var(--green); border-radius: 3px; box-shadow: 0 0 18px 2px rgba(61,220,111,0.8), 0 0 60px 8px rgba(61,220,111,0.35); } .beam::after { content: ""; position: absolute; top: 0; left: 50%; width: min(1300px, 130%); height: 520px; transform: translateX(-50%); background: radial-gradient(ellipse 34% 100% at 50% 0%, rgba(61,220,111,0.34), rgba(30,122,76,0.12) 45%, transparent 76%); filter: blur(28px); } .field { position: absolute; inset-inline: 0; pointer-events: none; z-index: 0; } .field::before { content: ""; position: absolute; left: 50%; top: 0; width: 150vw; max-width: 2100px; height: 100%; transform: translateX(-50%); background: radial-gradient(ellipse 58% 64% at 50% 0%, rgba(61,220,111,0.44), rgba(30,122,76,0.20) 36%, rgba(0,0,0,0) 72%); filter: blur(40px); } .field::after { content: ""; position: absolute; left: 50%; top: -40px; width: 60vw; max-width: 820px; height: 260px; transform: translateX(-50%); background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(61,220,111,0.42), transparent 70%); filter: blur(30px); } /* ========================================================================= Hero — centered composition, spotlight from the top, anchor panel below ========================================================================= */ .hero { position: relative; overflow: hidden; padding-top: clamp(3.5rem, 8vw, 6.5rem); } .hero__spot { position: absolute; inset-inline: 0; top: -10%; height: 70%; pointer-events: none; background: radial-gradient(ellipse 46% 60% at 50% 0%, rgba(61,220,111,0.24), rgba(30,122,76,0.08) 45%, transparent 75%); } .hero__inner { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; } .hero__title { font-family: var(--font-display); font-size: clamp(2.3rem, 5.6vw, 4.8rem); line-height: 1.14; font-weight: 600; max-width: 26ch; letter-spacing: -0.005em; text-wrap: balance; } html[dir="ltr"] .hero__title { max-width: 30ch; font-size: clamp(2.3rem, 5.4vw, 4.6rem); letter-spacing: -0.01em; } .hero__title .line { display: block; overflow: hidden; padding: 0 0.12em 0.06em; } .hero__title .line-in { display: block; } .hero__title .line-in > span + span { margin-inline-start: 0.28em; } .hero__title .glow { color: var(--green); text-shadow: 0 0 36px rgba(61,220,111,0.28); } .hero__lead { color: var(--mute); font-size: var(--lead); max-width: 52ch; margin-top: 1.25rem; } .hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 1.9rem; } .hero__note { margin-top: 1.1rem; font-size: var(--sm); color: var(--mute-2); display: inline-flex; align-items: center; gap: 0.5rem; } .hero__note .ic { width: 16px; height: 16px; color: var(--green); } /* Anchor: one wide panel straddling the hero boundary, lit from behind */ .anchor { position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(3rem, 6vw, 5rem); } .anchor .field { top: -120px; height: 620px; } .panel { position: relative; z-index: 1; border-radius: var(--r); border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--s2), var(--s1)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 40px 90px -50px rgba(0,0,0,0.95); overflow: hidden; } .anchor__panel { display: grid; gap: 0; } .anchor__copy { padding: clamp(1.6rem, 3.5vw, 3rem); display: flex; flex-direction: column; justify-content: center; } .anchor__title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.22; font-weight: 800; } .anchor__text { color: var(--mute); margin-top: 0.8rem; max-width: 40ch; } .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; border-radius: 12px; background: rgba(0,0,0,0.5); border: 1px solid var(--line); margin-top: 1.4rem; } .seg__opt { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 0.95rem; border-radius: 8px; border: 1px solid transparent; cursor: pointer; transition: background 200ms, border-color 200ms; } .seg__opt .ic { flex: none; color: var(--green); } .seg__opt b { display: block; font-size: 0.98rem; line-height: 1.25; } .seg__opt small { display: block; color: var(--mute); font-size: var(--xs); line-height: 1.4; } .seg__opt.is-on { background: var(--s3); border-color: var(--line-2); } .seg__opt:hover { background: var(--s3); } .anchor__cta { margin-top: 1.4rem; display: flex; gap: 0.7rem; flex-wrap: wrap; } .anchor__media { position: relative; min-height: 340px; background: radial-gradient(70% 70% at 50% 60%, rgba(61,220,111,0.22), transparent 62%), var(--s1); display: grid; place-items: center; padding: 2rem; border-inline-start: 1px solid var(--line); } html[dir="ltr"] .anchor__media { border-inline-start: 0; border-inline-end: 1px solid var(--line); } /* Channel mock — an original UI illustration of the private channel */ .chan { width: min(340px, 100%); border-radius: 18px; background: #0A0B0C; border: 1px solid var(--line-2); box-shadow: 0 30px 70px -30px rgba(0,0,0,0.9), 0 0 60px -20px rgba(61,220,111,0.35); overflow: hidden; } .chan__head { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); background: var(--s1); } .chan__head img { height: 11px; width: auto; } /* per brief: 50% of previous rendered size (was 22px) */ .chan__head b { font-size: 0.82rem; } .chan__head small { display: block; color: var(--mute-2); font-size: 0.68rem; line-height: 1.2; } .chan__badge { margin-inline-start: auto; font-size: 0.64rem; color: var(--green); border: 1px solid rgba(61,220,111,0.4); border-radius: 999px; padding: 0.15rem 0.5rem; } .chan__body { padding: 0.9rem 1rem 1rem; display: grid; gap: 0.6rem; } .msg { display: grid; grid-template-columns: auto 1fr; gap: 0.65rem; align-items: start; padding: 0.7rem 0.75rem; border-radius: 12px; background: var(--s2); border: 1px solid var(--line); } .msg .ic { width: 18px; height: 18px; color: var(--green); margin-top: 0.15rem; } .msg b { display: block; font-size: 0.8rem; line-height: 1.3; } .msg .bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.10); margin-top: 0.45rem; } .msg .bar.s { width: 62%; } .msg .bar.m { width: 84%; } .msg__chart { grid-column: 1 / -1; height: 54px; } .msg__chart svg { width: 100%; height: 100%; } .chan__foot { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; border-top: 1px solid var(--line); color: var(--mute-2); font-size: 0.7rem; } .chan__foot .ic { width: 15px; height: 15px; } /* ========================================================================= Facts row ========================================================================= */ .facts { padding-block: 1.6rem; } .facts__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem clamp(1.5rem, 4vw, 3rem); border-block: 1px solid var(--line); padding-block: 1.1rem; } .fact { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--sm); color: var(--mute); } .fact .ic { width: 18px; height: 18px; color: var(--green); } .fact b { color: var(--ink); font-weight: 700; } /* ========================================================================= Sections ========================================================================= */ .sec { position: relative; padding-block: clamp(4rem, 8vw, 7rem); overflow: hidden; } .sec--alt { background: var(--s1); border-block: 1px solid var(--line); } .sec--beam { padding-top: clamp(5.5rem, 10vw, 8.5rem); } .sec--beam .beam { z-index: 0; } .sec > .wrap { position: relative; z-index: 1; } /* Media panel with overlay (benefits) */ .media { position: relative; margin-top: 2.25rem; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-2); min-height: clamp(320px, 38vw, 470px); background: var(--s1); } .media__ill { position: absolute; inset: 0; } .media__ill svg { width: 100%; height: 100%; } .media__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.82)); } .media__copy { position: absolute; inset-block-end: clamp(1.4rem, 3vw, 2.4rem); inset-inline-start: clamp(1.4rem, 3vw, 2.4rem); max-width: 34ch; } .media__copy h3 { font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.22; font-weight: 800; } .media__copy p { color: var(--mute); margin-top: 0.4rem; } .status { position: absolute; inset-block-start: clamp(1.2rem, 3vw, 2.2rem); inset-inline-end: clamp(1.2rem, 3vw, 2.2rem); width: min(300px, 70%); border-radius: 14px; background: rgba(13,14,15,0.86); backdrop-filter: blur(10px); border: 1px solid var(--line-2); padding: 1rem 1.1rem; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.9); } .status__head { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--mute); } .status__head img { height: 18px; width: auto; } .status__rows { margin-top: 0.7rem; display: grid; gap: 0.45rem; } .status__row { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; } .status__row .on { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--green); font-size: 0.78rem; } .status__row .on .ic { width: 14px; height: 14px; } .tiles { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1rem; } .tile { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; padding: 1.2rem 1.25rem; border-radius: var(--r-m); background: var(--s1); border: 1px solid var(--line); transition: border-color 220ms, transform 300ms var(--ease); } .tile:hover { border-color: var(--line-2); transform: translateY(-2px); } .tile .ic { color: var(--green); margin-top: 0.15rem; } .tile b { display: block; font-size: 1.02rem; } .tile p { color: var(--mute); font-size: 0.92rem; margin-top: 0.2rem; } /* Split section (channel) */ .split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-top: 2.5rem; } .split .h2 { font-size: clamp(1.75rem, 3vw, 2.6rem); max-width: 24ch; } .steps { display: grid; gap: 0; margin-top: 1.5rem; position: relative; } .steps::before { content: ""; position: absolute; inset-block: 22px; inset-inline-start: 21px; width: 1px; background: linear-gradient(180deg, var(--green), rgba(61,220,111,0.12)); } .step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 0.9rem; padding-block: 0.9rem; } .step__n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid rgba(61,220,111,0.45); color: var(--green); font-family: var(--font-en); font-weight: 800; font-size: 0.95rem; position: relative; z-index: 1; } .step b { display: block; font-size: 1.05rem; } .step p { color: var(--mute); font-size: 0.94rem; margin-top: 0.15rem; max-width: 46ch; } .note { display: flex; gap: 0.7rem; align-items: flex-start; margin-top: 1.4rem; padding: 0.9rem 1.1rem; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--s1); color: var(--mute); font-size: 0.88rem; } .note .ic { width: 18px; height: 18px; color: var(--green); flex: none; margin-top: 0.15rem; } .split__ill { position: relative; } .ill-frame { position: relative; border-radius: var(--r); background: linear-gradient(180deg, var(--s2), var(--s1)); border: 1px solid var(--line-2); padding: clamp(1.25rem, 3vw, 2.5rem); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); } .ill-frame::after { content: ""; position: absolute; inset: auto 10% -30px; height: 70px; background: radial-gradient(60% 100% at 50% 0%, rgba(61,220,111,0.35), transparent 70%); filter: blur(18px); pointer-events: none; } /* Course section (START TOPA) */ .course { display: grid; gap: 1.25rem; margin-top: 2.25rem; } .course > * { min-width: 0; } .video { width: 100%; } .video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-2); background: var(--s1); } .video__ill { position: absolute; inset: 0; } .video__ill svg { width: 100%; height: 100%; } .video__shade { position: absolute; inset: 0; background: radial-gradient(70% 70% at 50% 50%, transparent 45%, rgba(0,0,0,0.7)); } .video__play { position: absolute; inset: 0; margin: auto; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #04120A; box-shadow: 0 0 0 10px rgba(61,220,111,0.14), 0 20px 50px -20px rgba(61,220,111,0.8); transition: transform 300ms var(--ease); } .video:hover .video__play { transform: scale(1.06); } .video__play .ic { width: 28px; height: 28px; stroke: none; fill: currentColor; } html[dir="rtl"] .video__play .ic { transform: scaleX(-1); } .video__tag { position: absolute; inset-block-end: 0.9rem; inset-inline-start: 0.9rem; font-size: var(--xs); color: var(--mute); background: rgba(0,0,0,0.65); border: 1px solid var(--line); padding: 0.35rem 0.65rem; border-radius: 6px; max-width: 70%; line-height: 1.5; } .video__glow { position: absolute; inset-inline: 8%; bottom: -34px; height: 80px; background: radial-gradient(60% 100% at 50% 0%, rgba(61,220,111,0.42), transparent 70%); filter: blur(20px); pointer-events: none; } .outline { border-radius: var(--r); border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--s2), var(--s1)); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); } .outline__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; } .outline__head b { font-size: 1.15rem; } .outline__head span { color: var(--green); font-size: var(--sm); } .lessons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 1.1rem; } .lesson { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 0.8rem; border-radius: 10px; background: var(--s1); border: 1px solid var(--line); font-size: 0.88rem; } .lesson .n { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: rgba(61,220,111,0.12); color: var(--green); font-family: var(--font-en); font-weight: 800; font-size: 0.85rem; flex: none; } .outline__foot { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.1rem; color: var(--mute); font-size: var(--sm); } .outline__foot .ic { color: var(--green); width: 18px; height: 18px; } .outline__cta { margin-top: 1.2rem; } /* System section (gold moment) */ .system { display: grid; gap: 0; margin-top: 2.25rem; border-radius: var(--r); overflow: hidden; border: 1px solid rgba(201,162,75,0.28); background: linear-gradient(180deg, var(--s2), var(--s1)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); } .system__copy { padding: clamp(1.6rem, 3.5vw, 3rem); } .system__copy .kicker i { background: var(--gold); box-shadow: 0 0 10px var(--gold); } .pillars { display: grid; gap: 0; margin-top: 1.5rem; border-top: 1px solid rgba(201,162,75,0.2); } .pillar { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; padding-block: 1.1rem; border-bottom: 1px solid var(--line); } .pillar .ic { color: var(--gold); margin-top: 0.15rem; } .pillar b { display: block; font-size: 1.05rem; } .pillar p { color: var(--mute); font-size: 0.92rem; margin-top: 0.15rem; max-width: 44ch; } .system__ill { position: relative; background: radial-gradient(60% 60% at 50% 50%, rgba(201,162,75,0.10), transparent 70%), var(--s1); border-inline-start: 1px solid rgba(201,162,75,0.2); display: grid; place-items: center; padding: clamp(1.5rem, 3vw, 2.5rem); } html[dir="ltr"] .system__ill { border-inline-start: 0; border-inline-end: 1px solid rgba(201,162,75,0.2); } .system__ill svg { width: 100%; max-width: 460px; height: auto; } /* Closing (beam-lit) */ .close__cta { display: flex; justify-content: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.9rem; } .close__micro { margin-top: 1rem; color: var(--mute-2); font-size: var(--sm); } /* FAQ */ .faq { max-width: 74ch; margin-top: 2rem; } .qa { border-top: 1px solid var(--line); } .qa:last-of-type { border-bottom: 1px solid var(--line); } .qa summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; cursor: pointer; list-style: none; font-size: 1.04rem; font-weight: 700; } .qa summary::-webkit-details-marker { display: none; } .qa summary:hover { color: var(--green); } .qa summary .ic { width: 20px; height: 20px; flex: none; color: var(--mute); transition: transform 300ms var(--ease), color 160ms; } .qa[open] summary .ic { transform: rotate(45deg); color: var(--green); } .qa p { color: var(--mute); padding-bottom: 1.25rem; max-width: 62ch; } .faq__aside { margin-top: 1.5rem; color: var(--mute); font-size: 0.94rem; } .faq__aside a { color: var(--green); border-bottom: 1px solid rgba(61,220,111,0.4); } /* ========================================================================= Motion — one coordinated entrance; a few reveals; reduced-motion honoured ========================================================================= */ :where(html.js) .hero .kicker, :where(html.js) .hero__lead, :where(html.js) .hero__cta, :where(html.js) .hero__note { opacity: 0; transform: translateY(14px); transition: opacity 480ms var(--ease), transform 480ms var(--ease); } :where(html.js) .hero__title .line-in { transform: translateY(112%); transition: transform 700ms var(--ease); } :where(html.js) .anchor { opacity: 0; transform: translateY(28px); transition: opacity 1000ms var(--ease), transform 1100ms var(--ease); } :where(html.js) .anchor .field { opacity: 0; transition: opacity 1600ms var(--soft); } :where(html.js) .hero__spot { opacity: 0; transition: opacity 1400ms var(--soft); } .is-lit .hero__spot { opacity: 1; } .is-lit .hero .kicker { opacity: 1; transform: none; transition-delay: 40ms; } .is-lit .hero__title .line:nth-child(1) .line-in { transform: none; transition-delay: 120ms; } .is-lit .hero__title .line:nth-child(2) .line-in { transform: none; transition-delay: 240ms; } .is-lit .hero__title .line:nth-child(3) .line-in { transform: none; transition-delay: 360ms; } .is-lit .hero__lead { opacity: 1; transform: none; transition-delay: 560ms; } .is-lit .hero__cta { opacity: 1; transform: none; transition-delay: 660ms; } .is-lit .hero__note { opacity: 1; transform: none; transition-delay: 760ms; } .is-lit .anchor { opacity: 1; transform: none; transition-delay: 640ms; } .is-lit .anchor .field { opacity: 1; transition-delay: 700ms; } :where(html.js) .rise { opacity: 0; transform: translateY(14px); transition: opacity 420ms var(--ease), transform 420ms var(--ease); } .rise.in { opacity: 1; transform: none; } :where(html.js) .beam { opacity: 0; transition: opacity 1200ms var(--soft); } .beam.in { opacity: 1; } :where(html.js) .chan .msg__chart path { stroke-dasharray: 400; stroke-dashoffset: 400; } .is-lit .chan .msg__chart path { animation: draw 1600ms var(--ease) 900ms forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } /* ========================================================================= Responsive ========================================================================= */ @media (min-width: 720px) { .tiles { grid-template-columns: repeat(3, 1fr); } .course { grid-template-columns: 1.15fr 0.85fr; align-items: start; } } @media (min-width: 900px) { .anchor__panel { grid-template-columns: 1.05fr 0.95fr; } .split { grid-template-columns: 0.95fr 1.05fr; } .system { grid-template-columns: 1fr 0.9fr; } .hero__title .line { white-space: nowrap; } } @media (max-width: 719.98px) { .lessons { grid-template-columns: repeat(2, 1fr); } .status { position: relative; inset: auto; width: 100%; margin: 1rem; width: calc(100% - 2rem); } .media { min-height: 0; } .media__copy { position: relative; inset: auto; padding: 0 1.25rem 1.4rem; max-width: none; } .media__ill { position: relative; height: 200px; } .media__shade { display: none; } .anchor__media { min-height: 0; padding: 1.5rem; } .seg { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; } .hero .kicker, .hero__lead, .hero__cta, .hero__note, .anchor, .anchor .field, .hero__spot, .rise, .beam { opacity: 1 !important; transform: none !important; } .hero__title .line-in { transform: none !important; } .chan .msg__chart path { stroke-dashoffset: 0 !important; } } /* ========================================================================= V05 additions ========================================================================= */ /* Soft section edges instead of hard lines */ .sec--alt { border-block: 0; position: relative; } .sec--alt::before, .sec--alt::after { content: ""; position: absolute; inset-inline: 0; height: 90px; pointer-events: none; z-index: 0; } .sec--alt::before { top: 0; background: linear-gradient(180deg, var(--bg), transparent); } .sec--alt::after { bottom: 0; background: linear-gradient(0deg, var(--bg), transparent); } /* Staggered reveals */ :where(html.js) .stagger > * { opacity: 0; transform: translateY(14px); transition: opacity 420ms var(--ease), transform 420ms var(--ease); } .stagger.in > * { opacity: 1; transform: none; } .stagger.in > *:nth-child(1) { transition-delay: 40ms; } .stagger.in > *:nth-child(2) { transition-delay: 140ms; } .stagger.in > *:nth-child(3) { transition-delay: 240ms; } .stagger.in > *:nth-child(4) { transition-delay: 340ms; } .stagger.in > *:nth-child(5) { transition-delay: 440ms; } .stagger.in > *:nth-child(6) { transition-delay: 540ms; } /* Mask reveals for media */ :where(html.js) .mask { clip-path: inset(0 0 100% 0 round var(--r)); opacity: 0; transition: clip-path 1100ms var(--ease), opacity 700ms var(--soft); } .mask.in { clip-path: inset(0 0 0 0 round var(--r)); opacity: 1; } :where(html.js) .mask-x { clip-path: inset(0 100% 0 0 round var(--r)); opacity: 0; transition: clip-path 1100ms var(--ease), opacity 700ms var(--soft); } :where(html[dir="rtl"].js) .mask-x { clip-path: inset(0 0 0 100% round var(--r)); } .mask-x.in { clip-path: inset(0 0 0 0 round var(--r)) !important; opacity: 1; } /* Market illustration: line draws once when in view */ :where(html.js) .media.in #mk-line, :where(html.js) .video.in #mk-line { animation: mk-draw 1800ms var(--ease) 300ms forwards; } #mk-line { stroke-dasharray: 1600; stroke-dashoffset: 1600; } html:not(.js) #mk-line { stroke-dashoffset: 0; } @keyframes mk-draw { to { stroke-dashoffset: 0; } } /* ---- START TOPA — one composition, muted blue-grey series accent ---- */ :root { --rb: #8CA3BB; --rb-2: #5E7591; --rb-deep: #141A21; --rb-line: rgba(140,163,187,0.28); --rb-glow: rgba(140,163,187,0.22); } .series { position: relative; margin-top: 1.75rem; border-radius: var(--r); overflow: hidden; border: 1px solid var(--rb-line); background: linear-gradient(180deg, #171D24, var(--rb-deep) 60%, #0F1317); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 40px 90px -50px rgba(0,0,0,0.95); display: grid; } .series__media { position: relative; } .series .video { border: 0; border-radius: 0; aspect-ratio: 16 / 9; background: var(--rb-deep); } .series .video__play { background: var(--rb); color: #0B1118; box-shadow: 0 0 0 10px rgba(140,163,187,0.14), 0 20px 50px -20px rgba(140,163,187,0.7); } .series .video__glow { background: radial-gradient(60% 100% at 50% 0%, var(--rb-glow), transparent 70%); } .series .video__ill { filter: hue-rotate(78deg) saturate(0.42) brightness(1.05); } /* series accent: the shared market illustration reads blue-grey here */ .series__copy { padding: clamp(1.4rem, 3vw, 2.2rem); display: flex; flex-direction: column; gap: 0.9rem; border-inline-start: 1px solid var(--rb-line); } html[dir="ltr"] .series__copy { border-inline-start: 0; border-inline-end: 1px solid var(--rb-line); } .series__tag { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; font-size: var(--xs); color: var(--rb); border: 1px solid var(--rb-line); border-radius: 999px; padding: 0.3rem 0.7rem; } .series__tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--rb); } .series__title { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.25; } .series__text { color: var(--mute); font-size: 0.95rem; max-width: 42ch; } .series__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: var(--sm); color: var(--mute); padding-top: 0.9rem; border-top: 1px solid var(--rb-line); } .series__row b { color: var(--ink); } .eps { display: flex; gap: 0.4rem; flex-wrap: wrap; } .ep { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-family: var(--font-en); font-weight: 800; font-size: 0.82rem; background: rgba(140,163,187,0.12); color: var(--rb); border: 1px solid var(--rb-line); } .ep--free { background: var(--rb); color: #0B1118; } .series__cta { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.2rem; } .btn--rb { background: var(--rb); color: #0B1118; box-shadow: 0 10px 30px -14px rgba(140,163,187,0.6); } .btn--rb:hover { box-shadow: 0 16px 36px -14px rgba(140,163,187,0.8); } .btn--rb-line { background: transparent; color: var(--rb); border-color: var(--rb-line); } .btn--rb-line:hover { border-color: var(--rb); } .series__note { font-size: var(--xs); color: var(--mute-2); } /* ---- TOPA SYSTEM — progressive assembly ---- */ .system__ill { overflow: hidden; } .asm { width: 100%; max-width: 480px; height: auto; } :where(html.js) .asm .a-node { opacity: 0; transform: translateY(-10px); transition: opacity 520ms var(--ease), transform 520ms var(--ease); } :where(html.js) .asm .a-link { stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 900ms var(--ease); } :where(html.js) .asm .a-core { opacity: 0; transform: scale(0.6); transform-origin: 260px 262px; transition: opacity 700ms var(--ease), transform 900ms var(--ease); } :where(html.js) .asm .a-ring { opacity: 0; transform: scale(0.85); transform-origin: 260px 262px; transition: opacity 700ms var(--ease), transform 900ms var(--ease); } :where(html.js) .asm .a-pill { opacity: 0; transform: translateY(8px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); } .asm.in .a-node { opacity: 1; transform: none; } .asm.in .a-node:nth-of-type(1) { transition-delay: 0ms; } .asm.in .a-node:nth-of-type(2) { transition-delay: 120ms; } .asm.in .a-node:nth-of-type(3) { transition-delay: 240ms; } .asm.in .a-node:nth-of-type(4) { transition-delay: 360ms; } .asm.in .a-node:nth-of-type(5) { transition-delay: 480ms; } .asm.in .a-link { stroke-dashoffset: 0; transition-delay: 650ms; } .asm.in .a-core { opacity: 1; transform: none; transition-delay: 1350ms; } .asm.in .a-ring { opacity: 1; transform: none; transition-delay: 1650ms; } .asm.in .a-pill { opacity: 1; transform: none; } .asm.in .a-pill:nth-of-type(1) { transition-delay: 1900ms; } .asm.in .a-pill:nth-of-type(2) { transition-delay: 2050ms; } .system__refund { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.4rem; padding: 0.9rem 1.1rem; border-radius: var(--r-s); border: 1px solid rgba(201,162,75,0.3); background: rgba(201,162,75,0.05); } .system__refund b { font-family: var(--font-en); font-size: 1.5rem; font-weight: 800; color: var(--gold); line-height: 1; } .system__refund span { color: var(--mute); font-size: 0.9rem; } .chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.9rem; } .chip { font-family: var(--font-en); font-size: 0.78rem; font-weight: 700; color: var(--ink); border: 1px solid var(--line-2); border-radius: 999px; padding: 0.32rem 0.7rem; background: rgba(255,255,255,0.03); } /* ---- Smart support widget (demo) ---- */ /* ---- Landing page (TOP A System) ---- */ .lp-hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 8vw, 6rem) clamp(3rem, 6vw, 5rem); } .lp-hero__inner { position: relative; display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .lp-hero .hero__title { text-align: start; max-width: 22ch; font-size: clamp(2rem, 4.2vw, 3.6rem); } .lp-hero .hero__title .line { white-space: normal !important; } .lp-hero__inner > * { min-width: 0; } html[dir="ltr"] .lp-hero .hero__title { max-width: 26ch; font-size: clamp(1.9rem, 3.9vw, 3.4rem); } .lp-hero .hero__lead { text-align: start; margin-inline: 0; } .lp-hero .hero__cta { justify-content: flex-start; } .lp-hero .kicker i { background: var(--gold); box-shadow: 0 0 10px var(--gold); } .lp-hero__ill { position: relative; border-radius: var(--r); border: 1px solid rgba(201,162,75,0.28); background: radial-gradient(60% 60% at 50% 45%, rgba(201,162,75,0.10), transparent 70%), linear-gradient(180deg, var(--s2), var(--s1)); padding: clamp(1.25rem, 3vw, 2.25rem); display: grid; place-items: center; } .lp-field { position: absolute; inset-inline: 0; bottom: -60px; height: 420px; } .reframe { display: grid; gap: 1.25rem; margin-top: 2rem; } .reframe__card { padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--r-m); background: var(--s1); border: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; } .reframe__card .ic { color: var(--green); margin-top: 0.15rem; } .reframe__card b { display: block; font-size: 1.08rem; } .reframe__card p { color: var(--mute); font-size: 0.94rem; margin-top: 0.25rem; } .reframe__card--lead { background: linear-gradient(180deg, var(--s2), var(--s1)); border-color: var(--line-2); } .incl { display: grid; gap: 0; margin-top: 2rem; border-top: 1px solid var(--line); } .incl__row { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; padding: 1.15rem 0; border-bottom: 1px solid var(--line); } .incl__row .ic { color: var(--green); margin-top: 0.2rem; } .incl__row b { display: block; font-size: 1.04rem; } .incl__row p { color: var(--mute); font-size: 0.93rem; margin-top: 0.15rem; max-width: 60ch; } .refund { display: grid; gap: 1.25rem; align-items: center; margin-top: 2rem; padding: clamp(1.4rem, 3vw, 2.2rem); border-radius: var(--r); border: 1px solid rgba(201,162,75,0.3); background: radial-gradient(70% 100% at 0% 50%, rgba(201,162,75,0.10), transparent 60%), var(--s1); } html[dir="rtl"] .refund { background: radial-gradient(70% 100% at 100% 50%, rgba(201,162,75,0.10), transparent 60%), var(--s1); } .refund__fig { font-family: var(--font-en); font-size: clamp(3rem, 7vw, 5rem); font-weight: 800; color: var(--gold); line-height: 1; } .refund__text b { display: block; font-size: 1.15rem; } .refund__text p { color: var(--mute); margin-top: 0.4rem; max-width: 56ch; } .lead-form { margin-top: 2rem; max-width: 520px; padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--r); border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--s2), var(--s1)); } .lead-form label { display: block; font-size: var(--sm); color: var(--mute); margin-bottom: 0.35rem; } .lead-form .lf-field { margin-bottom: 0.9rem; } .lead-form input { width: 100%; font: inherit; color: var(--ink); background: var(--s1); border: 1px solid var(--line-2); border-radius: var(--t-r); padding: 0.7rem 0.85rem; min-height: 48px; transition: border-color var(--t-t1), box-shadow var(--t-t2); } .lead-form input:focus { border-color: var(--green); outline: 0; box-shadow: 0 0 0 3px var(--t-green-soft); } .lead-form__note { font-size: var(--xs); color: var(--mute-2); margin-top: 0.8rem; } @media (min-width: 900px) { .lp-hero__inner { grid-template-columns: 1.05fr 0.95fr; } .reframe { grid-template-columns: 1fr 1fr; } .refund { grid-template-columns: auto 1fr; gap: 2rem; } } @media (prefers-reduced-motion: reduce) { .stagger > *, .mask, .mask-x, .sw__hi, .sw__panel, .asm .a-node, .asm .a-core, .asm .a-ring, .asm .a-pill { opacity: 1 !important; transform: none !important; clip-path: none !important; } .asm .a-link { stroke-dashoffset: 0 !important; } #mk-line { stroke-dashoffset: 0 !important; } } /* ========================================================================= R1 — revision pass on the approved V05 (Task020-R1) ========================================================================= */ /* ---- 1) Arabic premium polish: calmer scale, more air, quieter chrome ---- */ :root { --hero: clamp(2.3rem, 5.4vw, 4.6rem); } .hero__title { line-height: 1.2; max-width: 24ch; } .hero__lead { max-width: 44ch; margin-top: 1.5rem; line-height: 1.95; } .hero__cta { margin-top: 2.1rem; gap: 0.9rem; } .hero__note { margin-top: 1.3rem; } html[dir="rtl"] body { line-height: 1.9; } html[dir="rtl"] .hero__title, html[dir="rtl"] .h2 { word-spacing: 0.08em; } .h2 { line-height: 1.24; } .lead { margin-top: 1.25rem; line-height: 1.9; } .sec { padding-block: clamp(4.5rem, 9vw, 7.5rem); } .kicker { padding: 0.34rem 0.8rem; font-size: 0.8rem; border-color: var(--line); background: transparent; color: var(--mute); margin-bottom: 1.4rem; } .kicker i { width: 5px; height: 5px; box-shadow: 0 0 8px var(--green); } .btn { padding: 0.95rem 1.5rem; } .btn--line { background: transparent; } .facts { padding-block: 1.4rem 1.2rem; } .facts__row { border-block: 0; position: relative; gap: 0.5rem clamp(1.25rem, 4vw, 3rem); padding-block: 0.7rem; } .facts__row::before, .facts__row::after { content: ""; position: absolute; inset-inline: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); } .facts__row::before { top: 0; } .facts__row::after { bottom: 0; } .fact { font-size: 0.82rem; } .fact .ic { width: 16px; height: 16px; } .tile { background: linear-gradient(180deg, var(--s2), var(--s1)); } /* ---- 2) + 8) logos ---- */ .logo img { height: 24px; } .logo--sm img { height: 20px; } .foot .logo img { height: 28px; } @media (max-width: 719.98px) { .logo img { height: 20px; } } /* ---- 3) "شو هدفك": segmented toggle, CTA pairs, alive line, two mocks ---- */ .seg { position: relative; isolation: isolate; } .seg__ind { position: absolute; top: 6px; bottom: 6px; inset-inline-start: 6px; width: calc(50% - 9px); border-radius: 8px; background: var(--s3); border: 1px solid var(--line-2); z-index: 0; transition: inset-inline-start 420ms var(--ease); pointer-events: none; } .seg[data-on="learn"] .seg__ind { inset-inline-start: calc(50% + 3px); } .seg__opt { position: relative; z-index: 1; background: transparent !important; border-color: transparent !important; font: inherit; text-align: start; color: inherit; width: 100%; } button.seg__opt { appearance: none; } .seg__opt .ic { transition: transform 300ms var(--ease), color 200ms; } .seg__opt.is-on .ic { transform: scale(1.08); } .seg__opt:not(.is-on) { opacity: 0.72; } .seg__opt:not(.is-on):hover { opacity: 1; } .seg__opt:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; border-radius: 8px; } .anchor__cta[hidden] { display: none; } .anchor__cta { transition: opacity 260ms var(--ease); } .anchor__media { display: grid; } .anchor__media > .mock { grid-area: 1 / 1; transition: opacity 420ms var(--ease), transform 520ms var(--ease); } .anchor__media > .mock:not(.is-on) { opacity: 0; transform: translateY(10px) scale(0.985); pointer-events: none; } .chan { position: relative; } .chan__head img { display: none; } .chan__head .chan__ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(61,220,111,0.12); color: var(--green); flex: none; } .chan__head .chan__ic .ic { width: 15px; height: 15px; } .msg__chart { position: relative; } .msg__chart .dot { position: absolute; top: 0; left: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(61,220,111,0.2), 0 0 14px rgba(61,220,111,0.8); opacity: 0; } @supports (offset-path: path("M0 0 L1 1")) { .live .msg__chart .dot { opacity: 1; offset-path: path("M0 44 L30 40 L55 46 L85 26 L115 32 L150 18 L185 26 L220 12 L255 20 L285 8 L300 12"); animation: ride 7s cubic-bezier(0.4, 0, 0.2, 1) infinite; } } @keyframes ride { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } } .live .msg__chart svg path { animation: line-glow 4s ease-in-out infinite; } @keyframes line-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(61,220,111,0)); } 50% { filter: drop-shadow(0 0 5px rgba(61,220,111,0.7)); } } .msg__kv { grid-column: 1 / -1; display: grid; gap: 0.35rem; margin-top: 0.2rem; } .msg__kv span { display: flex; justify-content: space-between; align-items: center; font-size: 0.74rem; color: var(--mute); padding: 0.3rem 0.5rem; border-radius: 7px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); } .msg__kv b { color: var(--ink); font-family: var(--font-en); font-weight: 700; } /* lessons mock (second state) */ .lmock { width: min(340px, 100%); border-radius: 18px; background: #0A0B0C; border: 1px solid var(--line-2); box-shadow: 0 30px 70px -30px rgba(0,0,0,0.9), 0 0 60px -20px rgba(61,220,111,0.35); overflow: hidden; } .lmock__head { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); background: var(--s1); } .lmock__head b { font-size: 0.82rem; } .lmock__head small { display: block; color: var(--mute-2); font-size: 0.68rem; line-height: 1.2; } .lmock__body { padding: 0.8rem 1rem 1rem; display: grid; gap: 0.45rem; } .lrow { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: var(--s2); border: 1px solid var(--line); font-size: 0.8rem; } .lrow .n { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: rgba(61,220,111,0.12); color: var(--green); font-family: var(--font-en); font-weight: 800; font-size: 0.78rem; flex: none; } .lrow.is-free { border-color: rgba(61,220,111,0.4); } .lrow.is-free .n { background: var(--green); color: #04120A; } .lrow .st { margin-inline-start: auto; font-size: 0.68rem; color: var(--mute-2); } .lrow.is-free .st { color: var(--green); } .lmock__foot { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; border-top: 1px solid var(--line); color: var(--mute-2); font-size: 0.7rem; } .lmock__foot .ic { width: 15px; height: 15px; } /* ---- 4) account section: living chart ---- */ .mk { width: 100%; height: 100%; display: block; } .mk .c rect, .mk .c line { transform-box: fill-box; transform-origin: 50% 100%; } @keyframes breathe-c { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.07); } } @keyframes cursor-move { 0%, 100% { transform: translateX(0); opacity: .0; } 10% { opacity: .55; } 90% { opacity: .55; } } .status__head img { display: none; } .status__head .status__ic { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: rgba(61,220,111,0.12); color: var(--green); } .status__head .status__ic .ic { width: 14px; height: 14px; } /* ---- 5) channel: three richer blocks ---- */ .blocks { display: grid; gap: 0.8rem; margin-top: 1.6rem; } .block { position: relative; padding: 1.1rem 1.2rem 1.15rem; border-radius: 14px; background: linear-gradient(180deg, var(--s2), var(--s1)); border: 1px solid var(--line); overflow: hidden; transition: transform 380ms var(--ease), border-color 240ms; } .block::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(61,220,111,0.55), transparent); opacity: 0; transition: opacity 300ms; } .block:hover { transform: translateY(-2px); border-color: rgba(61,220,111,0.3); } .block:hover::before { opacity: 1; } .block__head { display: flex; align-items: center; gap: 0.75rem; } .block__ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(61,220,111,0.1); color: var(--green); border: 1px solid rgba(61,220,111,0.22); flex: none; transition: box-shadow 300ms; } .block:hover .block__ic { box-shadow: 0 0 22px -6px rgba(61,220,111,0.7); } .block__head b { font-size: 1.04rem; } .block__num { margin-inline-start: auto; font-family: var(--font-en); font-size: 0.72rem; font-weight: 700; color: var(--mute-2); letter-spacing: 0.08em; } .block p { color: var(--mute); font-size: 0.93rem; margin-top: 0.55rem; max-width: 48ch; } .block__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; } .block__tags li { font-size: 0.74rem; color: var(--ink); background: rgba(255,255,255,0.035); border: 1px solid var(--line); border-radius: 999px; padding: 0.24rem 0.6rem; } .block__tags li b { font-family: var(--font-en); font-weight: 700; color: var(--green); } .split .note { margin-top: 1.2rem; } /* ---- 6) START TOPA: green direction, simpler, video-slot concept ---- */ .series--green { border-color: rgba(61,220,111,0.24); background: radial-gradient(70% 90% at 100% 0%, rgba(61,220,111,0.10), transparent 60%), linear-gradient(180deg, var(--s2), var(--s1)); } html[dir="ltr"] .series--green { background: radial-gradient(70% 90% at 0% 0%, rgba(61,220,111,0.10), transparent 60%), linear-gradient(180deg, var(--s2), var(--s1)); } .series--green .series__copy { border-color: var(--line); gap: 0.75rem; padding: clamp(1.3rem, 2.8vw, 2rem); } .series--green .series__tag { color: var(--green); border-color: rgba(61,220,111,0.3); } .series--green .series__tag i { background: var(--green); } .series--green .series__row { border-color: var(--line); } .series--green .ep { background: rgba(61,220,111,0.1); color: var(--green); border-color: rgba(61,220,111,0.25); } .series--green .ep--free { background: var(--green); color: #04120A; } .series__text { max-width: 40ch; } .vslot { position: relative; aspect-ratio: 16 / 9; background: #070808; } .vslot__frame { position: absolute; inset: 12px; border-radius: 12px; border: 1px dashed rgba(61,220,111,0.32); background: radial-gradient(70% 70% at 50% 50%, rgba(61,220,111,0.08), transparent 70%); display: grid; place-items: center; overflow: hidden; } .vslot__grid { position: absolute; inset: 0; opacity: 0.35; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 100% 12.5%, 8.33% 100%; } .vslot__center { position: relative; display: grid; place-items: center; gap: 0.75rem; text-align: center; } .vslot__play { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #04120A; box-shadow: 0 0 0 10px rgba(61,220,111,0.12), 0 20px 50px -20px rgba(61,220,111,0.8); transition: transform 300ms var(--ease), box-shadow 300ms; } .vslot__play .ic { width: 26px; height: 26px; stroke: none; fill: currentColor; } html[dir="rtl"] .vslot__play .ic { transform: scaleX(-1); } .vslot:hover .vslot__play { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(61,220,111,0.14), 0 20px 50px -20px rgba(61,220,111,0.9); } .vslot__label { font-size: 0.86rem; color: var(--ink); } .vslot__hint { position: absolute; inset-block-end: 0.75rem; inset-inline-start: 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--mute-2); } .vslot__hint .ic { width: 14px; height: 14px; } .vslot__corner { position: absolute; inset-block-start: 0.75rem; inset-inline-end: 0.85rem; font-size: 0.7rem; color: var(--green); border: 1px solid rgba(61,220,111,0.3); border-radius: 999px; padding: 0.2rem 0.55rem; } .series__cta { margin-top: 0.1rem; } /* ---- 7) TOPA SYSTEM: sharper assembly, aligned lower items ---- */ .system__ill { display: grid; place-items: center; gap: 1rem; align-content: center; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.25rem); } .asm { max-width: 440px; } :where(html.js) .asm .a-node { transform: translateY(-14px); } .asm.in .a-node { transform: none; } .asm .a-core circle { transform-box: fill-box; transform-origin: center; } :where(html.js) .asm .a-pulse { opacity: 0; transform: scale(0.6); transform-box: fill-box; transform-origin: center; } .asm.in .a-pulse { animation: core-pulse 1600ms var(--ease) 1500ms forwards; } @keyframes core-pulse { 0% { opacity: 0.7; transform: scale(0.6); } 100% { opacity: 0; transform: scale(1.9); } } .asm .a-orbit { transform-box: fill-box; transform-origin: center; opacity: 0; transition: opacity 800ms var(--ease) 2000ms; } .asm.in .a-orbit { opacity: 1; } .live .asm.in .a-orbit { animation: orbit 40s linear infinite; } @keyframes orbit { to { transform: rotate(360deg); } } .asm-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; width: 100%; max-width: 440px; } .asm-pill { display: flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.7rem 0.9rem; border-radius: 999px; background: var(--s2); border: 1px solid rgba(201,162,75,0.35); font-size: 0.86rem; font-weight: 700; white-space: nowrap; } .asm-pill .ic { width: 16px; height: 16px; color: var(--gold); } :where(html.js) .asm-pills .asm-pill { opacity: 0; transform: translateY(10px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); } .asm-pills.in .asm-pill { opacity: 1; transform: none; } .asm-pills.in .asm-pill:nth-child(1) { transition-delay: 1900ms; } .asm-pills.in .asm-pill:nth-child(2) { transition-delay: 2050ms; } .pillars { margin-top: 1.4rem; } .pillar { grid-template-columns: 28px 1fr; gap: 0.8rem; padding-block: 1rem; align-items: start; } .pillar .ic { margin-top: 0.2rem; width: 22px; height: 22px; } .pillar p { max-width: 46ch; } .chips { margin-top: 1.1rem; gap: 0.4rem; } .chip { padding: 0.3rem 0.7rem; } .system__refund { margin-top: 1.2rem; align-items: center; } .system__refund b { min-width: 3.2ch; text-align: center; } /* ---- 9) support assistant: trading-style icon, premium panel ---- */ @keyframes typing { 0%, 100% { opacity: 0.25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } } @media (max-width: 899.98px) { .asm-pills { max-width: 100%; } } @media (max-width: 719.98px) { .seg__ind { display: none; } .seg__opt.is-on { background: var(--s3) !important; border-color: var(--line-2) !important; } .asm-pills { grid-template-columns: 1fr 1fr; } } @media (prefers-reduced-motion: reduce) { .mk .c, .mk .c rect, .mk .ln, .mk .fl, .asm .a-pulse, .asm .a-orbit, .asm-pills .asm-pill, .anchor__media > .mock { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } .mk .ln { stroke-dashoffset: 0 !important; } .anchor__media > .mock:not(.is-on) { opacity: 0 !important; } .msg__chart .dot, .sw__typing i { animation: none !important; } .msg__chart .dot { opacity: 0 !important; } } @media (min-width: 900px) { .series--green { grid-template-columns: 1.15fr 0.85fr; align-items: stretch; } .series--green .series__media { display: grid; } .series--green .vslot { aspect-ratio: auto; min-height: 100%; } } .msg__kv b, .block__tags li b { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* ============================================================ R2 — Task020-R2: centered FAQ · feather-blue TOPA SYSTEM · animated trade scenario · richer market candles. Built on approved R1; motion is transform/opacity only. ============================================================ */ :root { --blue: #8FB3D0; /* feather blue — TOPA SYSTEM section accent only */ --blue-2: #C4D9E8; /* headings / high-contrast blue ink */ --blue-d: #16202B; /* dark slate-blue surface */ --blue-d2: #1F2D3C; --blue-ln: rgba(143,179,208,0.26); } /* ---- 1) FAQ — centred composition, carded rows ---- */ .faq-sec .faq__head { text-align: center; } .faq-sec .faq__head .h2 { margin-inline: auto; } .faq-sec .faq__head .h2 .l { display: block; } .faq { max-width: 50rem; margin-inline: auto; margin-top: clamp(1.8rem, 4vw, 2.6rem); } .qa { border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, var(--s2), var(--s1)); margin-bottom: 0.7rem; overflow: hidden; transition: border-color 260ms var(--ease), background 260ms var(--ease), transform 320ms var(--ease); } .qa:last-of-type { border-bottom: 1px solid var(--line); } .qa::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 2px; background: var(--green); opacity: 0; transition: opacity 260ms; } .qa { position: relative; } .qa:hover { border-color: rgba(61,220,111,0.28); } .qa[open] { border-color: rgba(61,220,111,0.34); background: linear-gradient(180deg, rgba(61,220,111,0.045), var(--s1)); } .qa[open]::before { opacity: 1; } .qa summary { padding: 1.15rem clamp(1rem, 2.4vw, 1.5rem); font-size: clamp(1rem, 1.4vw, 1.1rem); } .qa summary:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; border-radius: 12px; } .qa summary .ic { width: 26px; height: 26px; padding: 4px; border-radius: 50%; box-sizing: content-box; border: 1px solid var(--line-2); background: rgba(255,255,255,0.03); } .qa[open] summary .ic { border-color: rgba(61,220,111,0.45); background: rgba(61,220,111,0.1); } .qa__body { padding-inline: clamp(1rem, 2.4vw, 1.5rem); } .qa p { padding-bottom: 1.15rem; max-width: 58ch; line-height: 1.75; } .faq__aside { text-align: center; margin-top: 1.6rem; } @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } .qa::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size 320ms var(--ease), opacity 260ms var(--ease), content-visibility 320ms allow-discrete; } .qa[open]::details-content { block-size: auto; opacity: 1; } } /* ---- 2) TOPA SYSTEM — muted feather-blue / dark slate direction ---- */ .system { border-color: var(--blue-ln); background: linear-gradient(180deg, var(--blue-d2), var(--blue-d)); } .system__ill { background: radial-gradient(60% 60% at 50% 46%, rgba(143,179,208,0.13), transparent 72%), var(--blue-d); border-inline-start-color: var(--blue-ln); } html[dir="ltr"] .system__ill { border-inline-end-color: var(--blue-ln); } .system .lead { color: #D6E2EC; } .pillars { border-top-color: var(--blue-ln); } .pillar { border-bottom-color: rgba(143,179,208,0.14); grid-template-columns: 26px 1fr; align-items: start; } .pillar .ic { color: var(--blue); width: 20px; height: 20px; margin-top: 0.25rem; } .pillar p { color: #9FB3C2; } .chip { border-color: var(--blue-ln); background: rgba(143,179,208,0.07); color: var(--blue-2); } .system__refund { border-color: rgba(201,162,75,0.34); background: rgba(201,162,75,0.06); } .system__refund span { color: #A8BAC7; } .system__copy .kicker span { color: var(--blue-2); } /* lower elements on one rhythm */ .system__copy .pillars { margin-top: 1.6rem; } .system__copy .chips { margin-top: 1.2rem; } .system__copy .system__refund { margin-top: 1.2rem; } .system__copy > div:last-child { margin-top: 1.3rem !important; } .system__ill { grid-template-rows: 1fr auto; align-content: center; gap: 1.1rem; } .asm-pills { width: 100%; max-width: 460px; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .asm-pill { justify-content: center; border-color: var(--blue-ln); background: rgba(143,179,208,0.08); color: var(--blue-2); } .asm-pill .ic { color: var(--blue); } /* assembly motion refinement */ .asm .a-node rect { fill: #16212C; stroke: rgba(143,179,208,0.24); } .asm .a-core circle { fill: #0E1720; } :where(html.js) .asm .a-flow { opacity: 0; } .asm.in .a-flow { opacity: 1; transition: opacity 500ms var(--ease) 1500ms; } .live .asm .a-flow path { animation: a-flow 3.4s linear infinite; } .asm .a-flow path:nth-of-type(2) { animation-delay: -0.7s; } .asm .a-flow path:nth-of-type(3) { animation-delay: -1.4s; } .asm .a-flow path:nth-of-type(4) { animation-delay: -2.1s; } .asm .a-flow path:nth-of-type(5) { animation-delay: -2.8s; } @keyframes a-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -140; } } /* ---- 3) Private channel — animated trade scenario ---- */ .ill-frame--trade { padding: clamp(0.9rem, 2vw, 1.2rem); } .ill-frame--trade::after { background: radial-gradient(60% 100% at 50% 0%, rgba(61,220,111,0.28), transparent 70%); } .trade { display: grid; gap: 0.85rem; } .trade__head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .trade__badge { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ink); border: 1px solid var(--line-2); background: rgba(255,255,255,0.05); border-radius: 999px; padding: 0.26rem 0.66rem; } .trade__sym { display: inline-flex; align-items: baseline; gap: 0.45rem; } .trade__sym b { font-size: 1rem; color: var(--green); } .trade__sym small { font-family: var(--font-en); font-size: 0.74rem; color: var(--mute-2); letter-spacing: 0.06em; } .trade__rr { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; color: var(--mute); } .trade__rr b { font-family: var(--font-en); color: var(--ink); font-weight: 800; } .trade__plot { position: relative; border-radius: 12px; overflow: hidden; background: #0B0C0D; border: 1px solid var(--line); } .tv { display: block; width: 100%; height: auto; } .t-tag { position: absolute; inset-inline-end: 8px; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; font-size: 0.68rem; line-height: 1; padding: 0.3rem 0.5rem; border-radius: 7px; background: rgba(8,9,10,0.82); border: 1px solid var(--line-2); backdrop-filter: blur(3px); } .t-tag i { font-style: normal; color: var(--mute); } .t-tag b { font-family: var(--font-en); font-weight: 800; direction: ltr; unicode-bidi: isolate; } .t-tag--t1, .t-tag--t2 { border-color: rgba(61,220,111,0.4); } .t-tag--t1 b, .t-tag--t2 b { color: var(--green); } .t-tag--t1 i, .t-tag--t2 i { color: #CFEFDB; } .t-tag--sl { border-color: rgba(217,115,108,0.45); } .t-tag--sl b { color: #E79891; } .t-tag--en b { color: var(--ink); } .trade__pts { display: grid; gap: 0.4rem; } .trade__pts li { position: relative; padding-inline-start: 1.15rem; color: var(--mute); font-size: 0.88rem; line-height: 1.6; } .trade__pts li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px -1px rgba(61,220,111,0.9); } .trade__legal { color: var(--mute-2); font-size: 0.76rem; line-height: 1.6; border-top: 1px solid var(--line); padding-top: 0.7rem; } /* trade motion — sequence runs once the panel is revealed */ :where(html.js) .trade .t-zone, :where(html.js) .trade .t-band, :where(html.js) .trade .t-lvl, :where(html.js) .trade .t-mk, :where(html.js) .trade .t-tag, :where(html.js) .trade .trade__pts li { opacity: 0; } :where(html.js) .trade .t-lvl { transform: translateX(-10px); } :where(html.js) .trade .t-cs .c { opacity: 0; } :where(html.js) .trade .t-cs .c rect, :where(html.js) .trade .t-cs .c line { transform: scaleY(0.05); } :where(html.js) .trade .t-mk { transform: scale(0.6); transform-box: fill-box; transform-origin: 50% 50%; } :where(html.js) .trade .t-path { stroke-dasharray: 900; stroke-dashoffset: 900; } .trade .t-cs .c rect, .trade .t-cs .c line { transform-box: fill-box; transform-origin: 50% 100%; } @keyframes t-fade { to { opacity: 1; } } @keyframes t-line { to { opacity: 1; transform: none; } } @keyframes t-grow { to { transform: none; } } @keyframes t-pop { to { opacity: 1; transform: scale(1); } } @keyframes t-tag { from { opacity: 0; transform: translateY(-50%) translateX(6px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } } @keyframes t-draw { to { stroke-dashoffset: 0; } } @keyframes t-halo { 0% { transform: scale(1); opacity: 0.65; } 70%, 100% { transform: scale(2.1); opacity: 0; } } .trade .t-halo { transform-box: fill-box; transform-origin: 50% 50%; } /* ---- 4) Account — richer progressive market candles ---- */ .mk .c rect, .mk .c line { transform-box: fill-box; transform-origin: 50% 100%; } /* the working candle keeps moving; everything else rests */ @keyframes mk-body { 0%, 100% { transform: scaleY(1); } 38% { transform: scaleY(1.1); } 66% { transform: scaleY(0.94); } } @keyframes mk-wick { 0%, 100% { transform: scaleY(1); } 30% { transform: scaleY(1.08); } 70% { transform: scaleY(0.97); } } @keyframes mk-px { 0%, 100% { transform: translateY(0); } 38% { transform: translateY(-5px); } 66% { transform: translateY(3px); } } /* ---- 5) bounded polish ---- */ .qa summary:hover .ic { color: var(--green); } .trade__plot:hover .t-tag { border-color: var(--line-2); } a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } @media (max-width: 640px) { .t-tag { font-size: 0.62rem; padding: 0.24rem 0.4rem; gap: 0.28rem; } .trade__rr { margin-inline-start: 0; } .asm-pills { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .trade .t-zone, .trade .t-band, .trade .t-lvl, .trade .t-mk, .trade .t-tag, .trade .t-cs .c, .trade .t-cs .c rect, .trade .t-cs .c line, .trade .t-path, .trade .trade__pts li, .trade .t-halo, .mk .c, .mk .c rect, .mk .c line, .mk .ln, .mk .fl, .mk .mk__px, .asm .a-flow, .qa::details-content { opacity: 1 !important; animation: none !important; transition: none !important; } .trade .t-lvl, .trade .t-cs .c, .trade .t-cs .c rect, .trade .t-cs .c line, .mk .c, .mk .c rect, .mk .c line, .mk .mk__px { transform: none !important; } .trade .t-mk { transform: scale(1) !important; } .trade .t-tag { transform: translateY(-50%) !important; } .trade .t-path, .mk .ln { stroke-dashoffset: 0 !important; } .trade .t-halo { opacity: 0.45 !important; } .asm .a-flow path { animation: none !important; } } /* price tags ride the chart's latest-price edge (charts stay LTR in both languages) */ .t-tag { inset-inline-end: auto; right: 8px; } .mk .mk__glow { transform-box: fill-box; transform-origin: 50% 50%; } @keyframes mk-glow { 0%, 100% { transform: scale(1); opacity: .45; } 50% { transform: scale(1.5); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .mk .mk__glow { animation: none !important; transform: none !important; } } /* landing page: the same feather-blue TOPA SYSTEM panel as the homepage section */ .lp-hero__ill { border-color: var(--blue-ln); background: radial-gradient(60% 60% at 50% 45%, rgba(143,179,208,0.13), transparent 72%), linear-gradient(180deg, var(--blue-d2), var(--blue-d)); gap: 1.1rem; align-content: center; } .lp-hero .kicker i { background: var(--blue); box-shadow: 0 0 10px rgba(143,179,208,0.75); } .lp-hero__ill .asm-pills { max-width: 420px; } /* ============================================================ R2 v1.1 — colour direction corrected: slate-blue moves to START TOPA · TOPA SYSTEM back to black/green · gold reserved for the 50% refund badge · services discovery. ============================================================ */ /* TOPA SYSTEM — black + premium green (overrides the earlier blue pass) */ .system { border-color: rgba(61,220,111,0.22); background: linear-gradient(180deg, var(--s2), var(--s1)); } .system__ill { background: radial-gradient(60% 60% at 50% 48%, rgba(61,220,111,0.10), transparent 72%), var(--s1); border-inline-start-color: rgba(61,220,111,0.18); } html[dir="ltr"] .system__ill { border-inline-end-color: rgba(61,220,111,0.18); } .system .lead { color: var(--mute); } .pillars { border-top-color: rgba(61,220,111,0.18); } .pillar { border-bottom-color: var(--line); } .pillar .ic { color: var(--green); } .pillar p { color: var(--mute); } .chip { border-color: var(--line-2); background: rgba(255,255,255,0.03); color: var(--ink); } .system__copy .kicker span { color: var(--ink); } .asm .a-node rect { fill: #101416; stroke: rgba(255,255,255,0.16); } .asm .a-core circle { fill: #0B0F0C; } .asm-pill { border-color: rgba(61,220,111,0.22); background: rgba(61,220,111,0.07); color: var(--ink); } .asm-pill .ic { color: var(--green); } .lp-hero__ill { border-color: rgba(61,220,111,0.22); background: radial-gradient(60% 60% at 50% 45%, rgba(61,220,111,0.10), transparent 72%), linear-gradient(180deg, var(--s2), var(--s1)); } .lp-hero .kicker i { background: var(--green); box-shadow: 0 0 10px var(--green); } /* the one gold element — approved 50% refund guarantee */ .refund-badge { display: grid; grid-template-columns: auto 1fr; gap: 0.95rem; align-items: center; padding: 0.95rem 1.1rem; border-radius: 14px; border: 1px solid rgba(201,162,75,0.38); background: linear-gradient(135deg, rgba(201,162,75,0.12), rgba(201,162,75,0.03) 60%); box-shadow: inset 0 1px 0 rgba(201,162,75,0.18); } .refund-badge__mark { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 12px; border: 1px solid rgba(201,162,75,0.45); background: rgba(201,162,75,0.1); } .refund-badge__mark b { font-family: var(--font-en); font-size: 1.18rem; font-weight: 800; color: var(--gold); line-height: 1; } .refund-badge__body { display: grid; gap: 0.18rem; } .refund-badge__title { color: var(--gold); font-size: 1rem; } .refund-badge__body span { color: var(--mute); font-size: 0.86rem; line-height: 1.55; } /* START TOPA — controlled dark slate-blue, premium and educational */ .series--green { border-color: var(--blue-ln); background: linear-gradient(180deg, var(--blue-d2), var(--blue-d)); } .series--green .series__tag { border-color: var(--blue-ln); background: rgba(143,179,208,0.1); color: var(--blue-2); } .series--green .series__tag i { background: var(--blue); box-shadow: 0 0 10px rgba(143,179,208,0.8); } .series--green .series__text { color: #A9BECD; } .series--green .series__row b { color: var(--blue-2); } .series--green .ep { border-color: var(--blue-ln); background: rgba(143,179,208,0.08); color: var(--blue-2); } .series--green .ep--free { border-color: rgba(143,179,208,0.55); background: rgba(143,179,208,0.2); color: #EAF2F8; } .series--green .series__note { color: #8AA0B0; } .series--green .series__media { background: rgba(10,15,20,0.5); } .series--green .vslot__frame { border-color: rgba(143,179,208,0.34); background: rgba(12,18,25,0.72); } .series--green .vslot__play { border-color: rgba(143,179,208,0.5); background: rgba(143,179,208,0.14); color: var(--blue-2); } .series--green .vslot__label, .series--green .vslot__corner { color: var(--blue-2); } .series--green .vslot__hint { color: #8AA0B0; } .series--green .vslot__hint .ic { color: var(--blue); } #start .kicker i { background: var(--blue); box-shadow: 0 0 10px rgba(143,179,208,0.8); } #start .h2 .em { color: var(--blue-2); } /* ---- services discovery ---- */ .sec--tight { padding-block: clamp(2.6rem, 5vw, 4rem); } .h2--sm { font-size: clamp(1.5rem, 2.6vw, 2.1rem); } .svc__head { margin-bottom: 1.4rem; } .svcs { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } .svc { position: relative; display: grid; gap: 0.45rem; padding: 1.15rem 1.2rem 1.2rem; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--s2), var(--s1)); transition: transform 380ms var(--ease), border-color 240ms, background 240ms; } .svc::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(61,220,111,0.55), transparent); opacity: 0; transition: opacity 300ms; } .svc:hover, .svc:focus-visible { transform: translateY(-3px); border-color: rgba(61,220,111,0.3); } .svc:hover::before, .svc:focus-visible::before { opacity: 1; } .svc__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(61,220,111,0.1); color: var(--green); border: 1px solid rgba(61,220,111,0.22); transition: box-shadow 320ms; } .svc:hover .svc__ic { box-shadow: 0 0 22px -6px rgba(61,220,111,0.7); } .svc__name { font-size: 1.02rem; font-weight: 700; color: var(--ink); } .svc__meta { font-size: 0.78rem; color: var(--mute-2); line-height: 1.5; } .svc__go { position: absolute; inset-block-start: 1.3rem; inset-inline-end: 1.2rem; width: 18px; height: 2px; background: var(--mute-2); border-radius: 2px; transition: background 260ms, transform 320ms var(--ease); } html[dir="rtl"] .svc__go { transform: scaleX(-1); } .svc:hover .svc__go { background: var(--green); transform: translateX(3px); } html[dir="rtl"] .svc:hover .svc__go { transform: scaleX(-1) translateX(3px); } .svc__foot { margin-top: 1.3rem; display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; } .svc__note { color: var(--mute-2); font-size: 0.76rem; max-width: 46ch; } @media (prefers-reduced-motion: reduce) { .svc, .svc__go, .svc__ic { transition: none !important; } } /* --- account market: sequential candle formation, looping --- */ .mk .c .b, .mk .c .w { transform-box: fill-box; transform-origin: 50% 100%; } :where(html.js) .mk .c .w { transform: scaleY(0.06); } :where(html.js) .mk .c .b { transform: scaleY(0.04); } :where(html.js) .mk .c { opacity: 0; } :where(html.js) .mk .ln { stroke-dasharray: 2400; stroke-dashoffset: 2400; } :where(html.js) .mk .fl { opacity: 0; } :where(html.js) .mk .mk__px { opacity: 0; } .mk .c { transition: opacity 240ms var(--ease); } .mk .c .w { transition: transform 300ms var(--ease); } .mk .c .b { transition: transform 520ms cubic-bezier(.2,.85,.3,1) 150ms; } .media[data-stage="2"] .mk .c:nth-of-type(1), .media[data-stage="3"] .mk .c:nth-of-type(1) { transition-delay: 0ms; } .media[data-stage="2"] .mk .c:nth-of-type(1) .w, .media[data-stage="3"] .mk .c:nth-of-type(1) .w { transition-delay: 0ms; } .media[data-stage="2"] .mk .c:nth-of-type(1) .b, .media[data-stage="3"] .mk .c:nth-of-type(1) .b { transition-delay: 150ms; } .media[data-stage="2"] .mk .c:nth-of-type(2), .media[data-stage="3"] .mk .c:nth-of-type(2) { transition-delay: 340ms; } .media[data-stage="2"] .mk .c:nth-of-type(2) .w, .media[data-stage="3"] .mk .c:nth-of-type(2) .w { transition-delay: 340ms; } .media[data-stage="2"] .mk .c:nth-of-type(2) .b, .media[data-stage="3"] .mk .c:nth-of-type(2) .b { transition-delay: 490ms; } .media[data-stage="2"] .mk .c:nth-of-type(3), .media[data-stage="3"] .mk .c:nth-of-type(3) { transition-delay: 680ms; } .media[data-stage="2"] .mk .c:nth-of-type(3) .w, .media[data-stage="3"] .mk .c:nth-of-type(3) .w { transition-delay: 680ms; } .media[data-stage="2"] .mk .c:nth-of-type(3) .b, .media[data-stage="3"] .mk .c:nth-of-type(3) .b { transition-delay: 830ms; } .media[data-stage="2"] .mk .c:nth-of-type(4), .media[data-stage="3"] .mk .c:nth-of-type(4) { transition-delay: 1020ms; } .media[data-stage="2"] .mk .c:nth-of-type(4) .w, .media[data-stage="3"] .mk .c:nth-of-type(4) .w { transition-delay: 1020ms; } .media[data-stage="2"] .mk .c:nth-of-type(4) .b, .media[data-stage="3"] .mk .c:nth-of-type(4) .b { transition-delay: 1170ms; } .media[data-stage="2"] .mk .c:nth-of-type(5), .media[data-stage="3"] .mk .c:nth-of-type(5) { transition-delay: 1360ms; } .media[data-stage="2"] .mk .c:nth-of-type(5) .w, .media[data-stage="3"] .mk .c:nth-of-type(5) .w { transition-delay: 1360ms; } .media[data-stage="2"] .mk .c:nth-of-type(5) .b, .media[data-stage="3"] .mk .c:nth-of-type(5) .b { transition-delay: 1510ms; } .media[data-stage="2"] .mk .c:nth-of-type(6), .media[data-stage="3"] .mk .c:nth-of-type(6) { transition-delay: 1700ms; } .media[data-stage="2"] .mk .c:nth-of-type(6) .w, .media[data-stage="3"] .mk .c:nth-of-type(6) .w { transition-delay: 1700ms; } .media[data-stage="2"] .mk .c:nth-of-type(6) .b, .media[data-stage="3"] .mk .c:nth-of-type(6) .b { transition-delay: 1850ms; } .media[data-stage="2"] .mk .c:nth-of-type(7), .media[data-stage="3"] .mk .c:nth-of-type(7) { transition-delay: 2040ms; } .media[data-stage="2"] .mk .c:nth-of-type(7) .w, .media[data-stage="3"] .mk .c:nth-of-type(7) .w { transition-delay: 2040ms; } .media[data-stage="2"] .mk .c:nth-of-type(7) .b, .media[data-stage="3"] .mk .c:nth-of-type(7) .b { transition-delay: 2190ms; } .media[data-stage="2"] .mk .c:nth-of-type(8), .media[data-stage="3"] .mk .c:nth-of-type(8) { transition-delay: 2380ms; } .media[data-stage="2"] .mk .c:nth-of-type(8) .w, .media[data-stage="3"] .mk .c:nth-of-type(8) .w { transition-delay: 2380ms; } .media[data-stage="2"] .mk .c:nth-of-type(8) .b, .media[data-stage="3"] .mk .c:nth-of-type(8) .b { transition-delay: 2530ms; } .media[data-stage="2"] .mk .c:nth-of-type(9), .media[data-stage="3"] .mk .c:nth-of-type(9) { transition-delay: 2720ms; } .media[data-stage="2"] .mk .c:nth-of-type(9) .w, .media[data-stage="3"] .mk .c:nth-of-type(9) .w { transition-delay: 2720ms; } .media[data-stage="2"] .mk .c:nth-of-type(9) .b, .media[data-stage="3"] .mk .c:nth-of-type(9) .b { transition-delay: 2870ms; } .media[data-stage="2"] .mk .c:nth-of-type(10), .media[data-stage="3"] .mk .c:nth-of-type(10) { transition-delay: 3060ms; } .media[data-stage="2"] .mk .c:nth-of-type(10) .w, .media[data-stage="3"] .mk .c:nth-of-type(10) .w { transition-delay: 3060ms; } .media[data-stage="2"] .mk .c:nth-of-type(10) .b, .media[data-stage="3"] .mk .c:nth-of-type(10) .b { transition-delay: 3210ms; } .media[data-stage="2"] .mk .c:nth-of-type(11), .media[data-stage="3"] .mk .c:nth-of-type(11) { transition-delay: 3400ms; } .media[data-stage="2"] .mk .c:nth-of-type(11) .w, .media[data-stage="3"] .mk .c:nth-of-type(11) .w { transition-delay: 3400ms; } .media[data-stage="2"] .mk .c:nth-of-type(11) .b, .media[data-stage="3"] .mk .c:nth-of-type(11) .b { transition-delay: 3550ms; } .media[data-stage="2"] .mk .c:nth-of-type(12), .media[data-stage="3"] .mk .c:nth-of-type(12) { transition-delay: 3740ms; } .media[data-stage="2"] .mk .c:nth-of-type(12) .w, .media[data-stage="3"] .mk .c:nth-of-type(12) .w { transition-delay: 3740ms; } .media[data-stage="2"] .mk .c:nth-of-type(12) .b, .media[data-stage="3"] .mk .c:nth-of-type(12) .b { transition-delay: 3890ms; } .media[data-stage="2"] .mk .c:nth-of-type(13), .media[data-stage="3"] .mk .c:nth-of-type(13) { transition-delay: 4080ms; } .media[data-stage="2"] .mk .c:nth-of-type(13) .w, .media[data-stage="3"] .mk .c:nth-of-type(13) .w { transition-delay: 4080ms; } .media[data-stage="2"] .mk .c:nth-of-type(13) .b, .media[data-stage="3"] .mk .c:nth-of-type(13) .b { transition-delay: 4230ms; } .media[data-stage="2"] .mk .c:nth-of-type(14), .media[data-stage="3"] .mk .c:nth-of-type(14) { transition-delay: 4420ms; } .media[data-stage="2"] .mk .c:nth-of-type(14) .w, .media[data-stage="3"] .mk .c:nth-of-type(14) .w { transition-delay: 4420ms; } .media[data-stage="2"] .mk .c:nth-of-type(14) .b, .media[data-stage="3"] .mk .c:nth-of-type(14) .b { transition-delay: 4570ms; } .media[data-stage="2"] .mk .c, .media[data-stage="3"] .mk .c { opacity: 1; } .media[data-stage="2"] .mk .c .w, .media[data-stage="3"] .mk .c .w, .media[data-stage="2"] .mk .c .b, .media[data-stage="3"] .mk .c .b { transform: none; } .media[data-stage="2"] .mk .ln, .media[data-stage="3"] .mk .ln { animation: mk-draw 5090ms linear forwards; } .media[data-stage="2"] .mk .fl, .media[data-stage="3"] .mk .fl { opacity: 1; transition: opacity 900ms var(--ease) 2799ms; } .media[data-stage="2"] .mk .mk__px, .media[data-stage="3"] .mk .mk__px { opacity: 1; transition: opacity 500ms var(--ease) 200ms; } @keyframes mk-price { 0.0% { transform: translate(-1040px, 248px); } 7.69% { transform: translate(-960px, 228px); } 15.38% { transform: translate(-880px, 240px); } 23.08% { transform: translate(-800px, 206px); } 30.77% { transform: translate(-720px, 218px); } 38.46% { transform: translate(-640px, 176px); } 46.15% { transform: translate(-560px, 188px); } 53.85% { transform: translate(-480px, 144px); } 61.54% { transform: translate(-400px, 162px); } 69.23% { transform: translate(-320px, 112px); } 76.92% { transform: translate(-240px, 126px); } 84.62% { transform: translate(-160px, 82px); } 92.31% { transform: translate(-80px, 54px); } 100.0% { transform: translate(0px, 0px); } } .media[data-stage="2"] .mk .mk__px, .media[data-stage="3"] .mk .mk__px { animation: mk-price 5090ms cubic-bezier(.4,0,.2,1) forwards; } .media[data-stage="3"] .mk .c.last .b { animation: mk-body 5.2s ease-in-out 5090ms infinite; } .media[data-stage="3"] .mk .c.last .w { animation: mk-wick 5.2s ease-in-out 5090ms infinite; } .media[data-stage="3"] .mk .mk__glow { animation: mk-glow 5.2s ease-in-out 5090ms infinite; } .media[data-stage="4"] .mk { opacity: 0; transition: opacity 620ms var(--ease); } .media[data-stage="0"] .mk { opacity: 1; } .media[data-stage="0"] .mk .c, .media[data-stage="0"] .mk .c .w, .media[data-stage="0"] .mk .c .b, .media[data-stage="0"] .mk .fl, .media[data-stage="0"] .mk .mk__px { transition: none !important; animation: none !important; } .mk .c.last .b, .mk .c.last .w { filter: drop-shadow(0 0 6px rgba(61,220,111,.45)); } .mk .ln { filter: drop-shadow(0 0 5px rgba(61,220,111,.3)); } /* --- channel: trade story, stage driven --- */ .trade .t-cs .b, .trade .t-cs .w { transform-box: fill-box; transform-origin: 50% 100%; } :where(html.js) .trade .t-zone, :where(html.js) .trade .t-band, :where(html.js) .trade .t-lvl, :where(html.js) .trade .t-mk, :where(html.js) .trade .t-tag, :where(html.js) .trade .t-cs .c, :where(html.js) .trade .trade__pts li, :where(html.js) .trade .t-done { opacity: 0; } :where(html.js) .trade .t-lvl { transform: translateX(-10px); } :where(html.js) .trade .t-cs .c .b, :where(html.js) .trade .t-cs .c .w { transform: scaleY(0.05); } :where(html.js) .trade .t-mk { transform: scale(0.5); transform-box: fill-box; transform-origin: 50% 50%; } :where(html.js) .trade .t-path { stroke-dasharray: 480; stroke-dashoffset: 480; } .trade .t-zone, .trade .t-band, .trade .t-lvl, .trade .t-mk, .trade .t-cs .c, .trade .trade__pts li, .trade .t-done { transition: opacity 480ms var(--ease), transform 480ms var(--ease); } .trade .t-cs .c .w { transition: transform 280ms var(--ease); } .trade .t-cs .c .b { transition: transform 420ms cubic-bezier(.2,.85,.3,1) 120ms; } .trade .t-path { transition: stroke-dashoffset 900ms cubic-bezier(.3,.7,.3,1); } .trade .t-tag { transition: opacity 420ms var(--ease), transform 420ms var(--ease), border-color 320ms, background 320ms; } .trade:is([data-stage="1"],[data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-zone, .trade:is([data-stage="1"],[data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-band, .trade:is([data-stage="1"],[data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-lvl, .trade:is([data-stage="1"],[data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-tag { opacity: 1; transform: none; } .trade[data-stage="1"] .t-lvl--en { transition-delay: 60ms; } .trade[data-stage="1"] .t-lvl--sl { transition-delay: 180ms; } .trade[data-stage="1"] .t-lvl--t1 { transition-delay: 300ms; } .trade[data-stage="1"] .t-lvl--t2 { transition-delay: 420ms; } .trade:is([data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(1) { opacity: 1; transition-delay: 0ms; } .trade:is([data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(1) .w { transform: none; transition-delay: 0ms; } .trade:is([data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(1) .b { transform: none; transition-delay: 120ms; } .trade:is([data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(2) { opacity: 1; transition-delay: 150ms; } .trade:is([data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(2) .w { transform: none; transition-delay: 150ms; } .trade:is([data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(2) .b { transform: none; transition-delay: 270ms; } .trade:is([data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(3) { opacity: 1; transition-delay: 300ms; } .trade:is([data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(3) .w { transform: none; transition-delay: 300ms; } .trade:is([data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(3) .b { transform: none; transition-delay: 420ms; } .trade:is([data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(4) { opacity: 1; transition-delay: 450ms; } .trade:is([data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(4) .w { transform: none; transition-delay: 450ms; } .trade:is([data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(4) .b { transform: none; transition-delay: 570ms; } .trade:is([data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(5) { opacity: 1; transition-delay: 600ms; } .trade:is([data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(5) .w { transform: none; transition-delay: 600ms; } .trade:is([data-stage="2"],[data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(5) .b { transform: none; transition-delay: 720ms; } .trade:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(6) { opacity: 1; transition-delay: 0ms; } .trade:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(6) .w { transform: none; transition-delay: 0ms; } .trade:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(6) .b { transform: none; transition-delay: 120ms; } .trade:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(7) { opacity: 1; transition-delay: 0ms; } .trade:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(7) .w { transform: none; transition-delay: 0ms; } .trade:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(7) .b { transform: none; transition-delay: 120ms; } .trade:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(8) { opacity: 1; transition-delay: 150ms; } .trade:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(8) .w { transform: none; transition-delay: 150ms; } .trade:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(8) .b { transform: none; transition-delay: 270ms; } .trade:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(9) { opacity: 1; transition-delay: 300ms; } .trade:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(9) .w { transform: none; transition-delay: 300ms; } .trade:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(9) .b { transform: none; transition-delay: 420ms; } .trade:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(10) { opacity: 1; transition-delay: 450ms; } .trade:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(10) .w { transform: none; transition-delay: 450ms; } .trade:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(10) .b { transform: none; transition-delay: 570ms; } .trade:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(11) { opacity: 1; transition-delay: 600ms; } .trade:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(11) .w { transform: none; transition-delay: 600ms; } .trade:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(11) .b { transform: none; transition-delay: 720ms; } .trade:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(12) { opacity: 1; transition-delay: 750ms; } .trade:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(12) .w { transform: none; transition-delay: 750ms; } .trade:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(12) .b { transform: none; transition-delay: 870ms; } .trade:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(13) { opacity: 1; transition-delay: 900ms; } .trade:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(13) .w { transform: none; transition-delay: 900ms; } .trade:is([data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(13) .b { transform: none; transition-delay: 1020ms; } .trade:is([data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(14) { opacity: 1; transition-delay: 0ms; } .trade:is([data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(14) .w { transform: none; transition-delay: 0ms; } .trade:is([data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(14) .b { transform: none; transition-delay: 120ms; } .trade:is([data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(15) { opacity: 1; transition-delay: 0ms; } .trade:is([data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(15) .w { transform: none; transition-delay: 0ms; } .trade:is([data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(15) .b { transform: none; transition-delay: 120ms; } .trade:is([data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(16) { opacity: 1; transition-delay: 0ms; } .trade:is([data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(16) .w { transform: none; transition-delay: 0ms; } .trade:is([data-stage="7"],[data-stage="8"]) .t-cs .c:nth-of-type(16) .b { transform: none; transition-delay: 120ms; } .trade[data-stage="2"] .t-path { stroke-dashoffset: 374; } .trade[data-stage="3"] .t-path { stroke-dashoffset: 339; } .trade[data-stage="4"] .t-path { stroke-dashoffset: 125; } .trade[data-stage="5"] .t-path { stroke-dashoffset: 93; } .trade[data-stage="6"] .t-path { stroke-dashoffset: 51; } .trade[data-stage="7"] .t-path { stroke-dashoffset: 0; } .trade[data-stage="8"] .t-path { stroke-dashoffset: 0; } .trade:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-mk--en { opacity: 1; transform: scale(1); transition-delay: 260ms; } .trade:is([data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-mk--t1 { opacity: 1; transform: scale(1); transition-delay: 260ms; } .trade:is([data-stage="7"],[data-stage="8"]) .t-mk--t2 { opacity: 1; transform: scale(1); transition-delay: 260ms; } .trade:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-tag--en { border-color: rgba(245,245,244,.42); background: rgba(20,22,24,.94); } .trade:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-tag--en .t-hit { max-width: 9rem; opacity: 1; margin-inline-end: .35rem; } .trade:is([data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-tag--t1 .t-hit { max-width: 9rem; opacity: 1; margin-inline-end: .35rem; } .trade:is([data-stage="7"],[data-stage="8"]) .t-tag--t2 .t-hit { max-width: 9rem; opacity: 1; margin-inline-end: .35rem; } .trade:is([data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-tag--t1 { background: rgba(61,220,111,.17); border-color: rgba(61,220,111,.7); } .trade:is([data-stage="7"],[data-stage="8"]) .t-tag--t2 { background: rgba(61,220,111,.17); border-color: rgba(61,220,111,.7); } .trade:is([data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .t-mk--t1 .t-halo { animation: t-halo 2.6s ease-out infinite; } .trade:is([data-stage="7"],[data-stage="8"]) .t-mk--t2 .t-halo { animation: t-halo 2.6s ease-out infinite; } .trade:is([data-stage="3"],[data-stage="4"],[data-stage="5"],[data-stage="6"],[data-stage="7"],[data-stage="8"]) .trade__pts li { opacity: 1; } .trade[data-stage="3"] .trade__pts li:nth-child(2) { transition-delay: 140ms; } .trade[data-stage="3"] .trade__pts li:nth-child(3) { transition-delay: 280ms; } .trade[data-stage="8"] .t-done { opacity: 1; } .trade[data-stage="8"] .tv { filter: saturate(.94) brightness(.97); transition: filter 700ms var(--ease); } .trade[data-stage="0"] .t-zone, .trade[data-stage="0"] .t-band, .trade[data-stage="0"] .t-lvl, .trade[data-stage="0"] .t-mk, .trade[data-stage="0"] .t-tag, .trade[data-stage="0"] .t-cs .c, .trade[data-stage="0"] .t-cs .c .b, .trade[data-stage="0"] .t-cs .c .w, .trade[data-stage="0"] .t-path, .trade[data-stage="0"] .t-hit, .trade[data-stage="0"] .trade__pts li, .trade[data-stage="0"] .t-done { transition: none !important; animation: none !important; } .t-hit { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; text-decoration: none; font-family: var(--font-en); font-weight: 800; font-size: .68rem; color: var(--green); direction: ltr; unicode-bidi: isolate; display: inline-block; vertical-align: middle; transition: max-width 420ms var(--ease), opacity 320ms var(--ease), margin 420ms var(--ease); } .t-tag--en .t-hit { color: var(--ink); font-family: inherit; font-weight: 700; direction: inherit; } .t-ok { color: var(--green); } .t-done { position: absolute; inset-inline-start: 10px; top: 10px; display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; font-weight: 700; color: #CFEFDB; padding: .3rem .6rem; border-radius: 999px; background: rgba(8,9,10,.86); border: 1px solid rgba(61,220,111,.45); backdrop-filter: blur(3px); } @media (prefers-reduced-motion: reduce) { .trade .t-zone, .trade .t-band, .trade .t-lvl, .trade .t-mk, .trade .t-tag, .trade .t-cs .c, .trade .t-cs .c .b, .trade .t-cs .c .w, .trade .t-path, .trade .trade__pts li, .mk .c, .mk .c .b, .mk .c .w, .mk .ln, .mk .fl, .mk .mk__px, .mk .mk__glow { opacity: 1 !important; animation: none !important; transition: none !important; } .trade .t-lvl, .trade .t-cs .c .b, .trade .t-cs .c .w, .mk .c .b, .mk .c .w, .mk .mk__px { transform: none !important; } .trade .t-mk { transform: scale(1) !important; } .trade .t-path, .mk .ln { stroke-dashoffset: 0 !important; } .trade .t-done { opacity: 1 !important; } .t-hit { max-width: 9rem !important; opacity: 1 !important; } .trade .tv, .mk { filter: none !important; } } .series--green .vslot__play { box-shadow: 0 0 0 10px rgba(143,179,208,0.12), 0 20px 50px -20px rgba(143,179,208,0.65); } .series--green .vslot:hover .vslot__play { box-shadow: 0 0 0 14px rgba(143,179,208,0.16), 0 20px 50px -20px rgba(143,179,208,0.8); } .t-done { inset-inline-start: auto; left: 10px; } /* service card: a real chevron rather than a bar */ .svc__go { width: 9px; height: 9px; background: none; border-radius: 0; border-top: 2px solid var(--mute-2); border-inline-end: 2px solid var(--mute-2); transform: rotate(45deg); inset-block-start: 1.45rem; } html[dir="rtl"] .svc__go { transform: rotate(45deg); } .svc:hover .svc__go, .svc:focus-visible .svc__go { border-color: var(--green); transform: rotate(45deg) translate(2px, -2px); } html[dir="rtl"] .svc:hover .svc__go, html[dir="rtl"] .svc:focus-visible .svc__go { transform: rotate(45deg) translate(2px, -2px); } /* ============================================================ R3 — Task020-R3: lighter copy · XAU/ABD illustrative model · compact mobile benefit rail · scroll-triggered mobile motion. ============================================================ */ /* trade head: instrument + model note */ .trade__model { font-size: 0.68rem; color: var(--mute-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.5rem; white-space: nowrap; } .trade__spacer { flex: 1 1 0; min-width: 0; } .trade__rr { margin-inline-start: 0; } /* channel: three compact labels instead of explanatory blocks */ .pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; } .pills li { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.86rem; font-weight: 600; color: var(--ink); padding: 0.52rem 0.9rem; border-radius: 999px; border: 1px solid var(--line-2); background: linear-gradient(180deg, var(--s2), var(--s1)); transition: border-color 240ms, transform 320ms var(--ease); } .pills li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--green); box-shadow: 0 0 10px -1px rgba(61,220,111,0.9); } .pills li:hover { border-color: rgba(61,220,111,0.34); transform: translateY(-2px); } .legal-line { margin-top: 1.2rem; color: var(--mute-2); font-size: 0.78rem; line-height: 1.6; } .legal-line a { color: var(--mute); border-bottom: 1px solid var(--line-2); } .legal-line a:hover { color: var(--green); border-bottom-color: rgba(61,220,111,0.5); } /* TOPA SYSTEM: one strong line + one supporting sentence */ .sys-lead { font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 800; line-height: 1.3; color: var(--ink); text-wrap: balance; } .sys-sub { margin-top: 0.5rem; color: var(--mute); font-size: 0.95rem; line-height: 1.6; } .pillar p { font-size: 0.88rem; max-width: 38ch; } /* ---- mobile benefit rail (desktop untouched) ---- */ @media (max-width: 760px) { .facts { padding-block: 1rem 0.6rem; } .facts__row { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 0; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-block: 0.85rem; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); } .facts__row::-webkit-scrollbar { display: none; } .facts__row::before, .facts__row::after { inset-inline: 0; } .fact { scroll-snap-align: start; flex: none; align-items: flex-start; gap: 0.45rem; padding-inline: 0.75rem; border-inline-end: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.45rem; row-gap: 0.1rem; max-width: 15rem; } .fact .ic { grid-row: 1 / span 2; align-self: center; } .fact b { font-size: 0.84rem; line-height: 1.25; white-space: nowrap; } .fact > span:last-of-type { font-size: 0.72rem; color: var(--mute-2); line-height: 1.3; } .fact--key { position: relative; } .fact--key b { color: var(--green); } .fact--key::after { content: ""; position: absolute; inset-block-start: -0.85rem; inset-inline: 0.4rem; height: 2px; background: linear-gradient(90deg, transparent, var(--green), transparent); border-radius: 2px; opacity: 0.8; } .fact--go { display: inline-flex; align-items: center; gap: 0.4rem; border-inline-end: 0; color: var(--green); font-size: 0.8rem; font-weight: 700; white-space: nowrap; padding-inline-end: 0.2rem; } .fact--go i { width: 7px; height: 7px; border-top: 2px solid currentColor; border-inline-end: 2px solid currentColor; transform: rotate(45deg); flex: none; } html[dir="rtl"] .fact--go i { transform: rotate(-135deg); } /* account benefits become the same compact rail */ .tiles { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-top: 1.1rem; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); } .tiles::-webkit-scrollbar { display: none; } .tile { scroll-snap-align: start; flex: none; width: 14rem; background: none; border: 0; border-inline-end: 1px solid var(--line); border-radius: 0; padding: 0.2rem 1rem; align-content: start; } .tile:last-child { border-inline-end: 0; } .tile:hover { transform: none; } .tile b { font-size: 0.92rem; } .tile p { font-size: 0.8rem; color: var(--mute-2); margin-top: 0.15rem; } .tile .ic { width: 18px; height: 18px; } } .fact--go { display: none; } @media (max-width: 760px) { .fact--go { display: inline-flex; } } /* ======================================================================= Platform additions to the R3 sheet. R3 was a static prototype: every link led somewhere or nowhere, there was no editor preview, and its one form sent nothing. These five small blocks cover what a real site needs and R3 had no occasion to style. Nothing above this line is modified. ======================================================================= */ /* A control whose destination the owner has not set yet. Visible, legible, and plainly not clickable — better than a link that goes nowhere. */ .is-pending { opacity: .55; cursor: not-allowed; text-decoration: none; } a.is-pending, span.is-pending { pointer-events: none; } .btn.is-pending { filter: grayscale(.6); } .svc.is-pending .svc__go { opacity: .4; } /* Section-level button rows that R3 wrote as inline styles. */ .sec__cta, .split__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; } /* The editor's preview banner. */ .preview-bar { position: sticky; top: 0; z-index: 80; background: var(--gold); color: #000; font-size: var(--xs); font-weight: 700; text-align: center; padding: .5rem 1rem; } /* The real form, wearing R3's panel. */ .lead-form .topa-form__row { margin-bottom: .9rem; } .lead-form .topa-form__label { display: block; font-size: var(--sm); color: var(--mute); margin-bottom: .35rem; } .lead-form .topa-form__req { color: var(--green); margin-inline-start: .2rem; } .lead-form .topa-form__input { width: 100%; font: inherit; color: var(--ink); background: #000; border: 1px solid var(--line-2); border-radius: 10px; padding: .7rem .85rem; } .lead-form .topa-form__input:focus { border-color: var(--green); outline: 0; } .lead-form .topa-form__choice { display: flex; align-items: flex-start; gap: .55rem; color: var(--ink); font-size: var(--sm); } .lead-form .topa-form__choices { display: grid; gap: .4rem; } .lead-form .topa-form__help { font-size: var(--xs); color: var(--mute-2); margin-top: .3rem; } .lead-form .topa-form__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .lead-form .topa-form__errors { border: 1px solid #b4453f; background: rgba(180,69,63,.12); border-radius: 10px; padding: .7rem .9rem; margin-bottom: 1rem; font-size: var(--sm); } .lead-form .topa-form__errors ul { margin: 0; padding-inline-start: 1.1rem; } .lead-form .topa-form__ok { border: 1px solid var(--green-d); background: rgba(61,220,111,.10); border-radius: 10px; padding: .9rem 1rem; color: var(--ink); } .lead-form .btn--primary { margin-top: .4rem; background: var(--green); color: #04150b; border: 0; border-radius: 12px; padding: .78rem 1.35rem; font: inherit; font-weight: 700; cursor: pointer; } /* Page body text placed outside a section, so a plain page still reads well. */ .rich { color: var(--ink); } .rich a { color: var(--green); } /* The route panel is its own block here, not a child of the hero as in R3, so it carries the hero's clipping itself. Without this the panel's 150vw glow runs past the viewport and a narrow screen gains a horizontal scrollbar. */ .sec--anchor { position: relative; overflow: hidden; }