/* ========================================================= NexChange — Modern Theme v3 (2026) Подключается ПОСЛЕДНЕЙ в , перекрывает style.min.css ========================================================= */ :root { --nx-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --nx-gradient-soft: linear-gradient(135deg, #a78bfa 0%, #f0abfc 100%); --nx-bg: #0b0f1c; --nx-bg-alt: #12162a; --nx-glass: rgba(20, 22, 40, 0.55); --nx-glass-strong: rgba(30, 33, 56, 0.75); --nx-border: rgba(167, 139, 250, 0.18); --nx-border-strong: rgba(167, 139, 250, 0.35); --nx-text: #e8eaf2; --nx-text-muted: rgba(232, 234, 242, 0.6); --nx-text-dim: rgba(232, 234, 242, 0.4); --nx-accent-green: #43e97b; --nx-purple: #a78bfa; --nx-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); } /* ===================== BASE ===================== */ body { background: radial-gradient(1200px 800px at 85% -10%, rgba(167, 139, 250, 0.18), transparent 60%), radial-gradient(900px 700px at -10% 30%, rgba(102, 126, 234, 0.14), transparent 60%), linear-gradient(180deg, #0b0f1c 0%, #0a0d18 100%) !important; background-attachment: fixed !important; color: var(--nx-text) !important; font-family: 'Inter', system-ui, -apple-system, sans-serif !important; } .wrapper { background: transparent !important; } .main { background: transparent !important; } /* ===================== HEADER ===================== */ .header { background: rgba(11, 15, 28, 0.65) !important; backdrop-filter: blur(18px) saturate(140%) !important; -webkit-backdrop-filter: blur(18px) saturate(140%) !important; border-bottom: 1px solid var(--nx-border) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important; padding: 16px 0 !important; transition: all 0.3s ease; } .header__logo, .header__logo-hide { font-size: 1.5rem !important; font-weight: 800 !important; background: var(--nx-gradient-soft) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; text-decoration: none !important; letter-spacing: -0.02em; } .header__nav .header__list { display: flex; gap: 8px; } .header__link { color: var(--nx-text-muted) !important; font-weight: 500 !important; font-size: 14px !important; padding: 8px 14px; border-radius: 10px; transition: all 0.2s ease; position: relative; } .header__link:hover { color: var(--nx-text) !important; background: rgba(167, 139, 250, 0.08); } /* --- Language switcher --- */ .header__lang { position: relative; cursor: pointer; } .header__lang-lang { position: relative; } .header__lang-wrapper { display: flex !important; align-items: center; gap: 8px; padding: 8px 14px !important; border-radius: 12px !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid var(--nx-border) !important; color: var(--nx-text) !important; text-decoration: none !important; font-weight: 600; font-size: 13px; transition: all 0.2s ease; } .header__lang-wrapper:hover { background: rgba(167, 139, 250, 0.12) !important; border-color: var(--nx-border-strong) !important; } .header__lang-wrapper img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } .header__lang-text { text-transform: uppercase; letter-spacing: 0.05em; font-size: 12px; font-weight: 700; } .header__lang-dropdown { position: absolute !important; top: calc(100% + 8px); right: 0; min-width: 160px; background: var(--nx-glass-strong) !important; backdrop-filter: blur(20px); border: 1px solid var(--nx-border) !important; border-radius: 14px !important; padding: 6px !important; display: none !important; flex-direction: column; gap: 2px; z-index: 1000; box-shadow: var(--nx-shadow); } .header__lang-lang.open .header__lang-dropdown, .header__lang:hover .header__lang-dropdown { display: flex !important; } .header__lang-dropdown .header__lang-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--nx-text) !important; text-decoration: none !important; font-size: 13px; font-weight: 600; transition: background 0.2s ease; cursor: pointer; } .header__lang-dropdown .header__lang-item:hover { background: rgba(167, 139, 250, 0.12); } .header__lang-dropdown .header__lang-item img { width: 22px; height: 22px; border-radius: 50%; } .header__lang-arrow { width: 12px; height: 12px; margin-left: 4px; opacity: 0.6; transition: transform 0.2s ease; } .header__lang-lang.open .header__lang-arrow { transform: rotate(180deg); } /* --- Header CTA --- */ .header__btn { background: var(--nx-gradient) !important; border: none !important; border-radius: 12px !important; padding: 11px 22px !important; color: #fff !important; font-weight: 600 !important; font-size: 14px !important; text-decoration: none !important; transition: all 0.25s ease !important; box-shadow: 0 4px 14px rgba(102, 126, 234, 0.35) !important; display: inline-flex; align-items: center; gap: 8px; } .header__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(102, 126, 234, 0.5) !important; } .header__btn::after { content: "→"; transition: transform 0.2s ease; } .header__btn:hover::after { transform: translateX(3px); } .header__wrapper { display: flex; align-items: center; gap: 14px; } .header__burger span { background: var(--nx-text) !important; } /* ===================== HERO ===================== */ .hero { padding: 140px 0 80px !important; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 400px at 30% 20%, rgba(167, 139, 250, 0.2), transparent 60%), radial-gradient(500px 400px at 70% 80%, rgba(79, 172, 254, 0.15), transparent 60%); pointer-events: none; } .hero__container { position: relative; z-index: 1; } .hero__title { font-size: clamp(1.8rem, 3.5vw, 3.2rem) !important; line-height: 1.25 !important; font-weight: 800 !important; letter-spacing: -0.02em; margin-bottom: 24px !important; color: rgba(245, 240, 255, 0.94) !important; background: none !important; -webkit-text-fill-color: rgba(245, 240, 255, 0.94) !important; background-clip: initial !important; -webkit-background-clip: initial !important; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35); } .hero__title span, .hero__title strong { background: linear-gradient(135deg, #c4b5fd 0%, #f0abfc 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; font-weight: 800 !important; } .hero__subtitle { font-size: clamp(1rem, 1.5vw, 1.2rem) !important; color: var(--nx-text-muted) !important; max-width: 800px; margin: 0 auto 40px !important; line-height: 1.6 !important; } .hero__btn { background: var(--nx-gradient) !important; border: none !important; border-radius: 14px !important; padding: 16px 36px !important; color: #fff !important; font-weight: 700 !important; font-size: 16px !important; text-decoration: none !important; box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4) !important; transition: all 0.3s ease !important; display: inline-flex; align-items: center; gap: 10px; } .hero__btn:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(102, 126, 234, 0.55) !important; } .hero__text { color: var(--nx-text-dim) !important; font-size: 0.95rem; margin: 20px 0; } /* ===================== EXCHANGE FORM ===================== */ .exchange { padding: 60px 0 80px !important; } .exchange__text { color: var(--nx-purple) !important; font-size: 0.85rem !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.2em; text-align: center; margin-bottom: 14px !important; } .exchange__title { font-size: clamp(1.6rem, 3vw, 2.4rem) !important; font-weight: 800 !important; text-align: center; margin-bottom: 48px !important; background: var(--nx-gradient-soft) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; letter-spacing: -0.02em; } .exchange__wrapper { display: grid !important; grid-template-columns: 1fr 1fr 1.2fr !important; gap: 20px !important; align-items: start !important; } .exchange__block { background: var(--nx-glass) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; border: 1px solid var(--nx-border) !important; border-radius: 20px !important; padding: 24px !important; box-shadow: var(--nx-shadow); width: auto !important; margin: 0 !important; } .exchange__block-title { color: var(--nx-text-muted) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 18px !important; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .exchange__block-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; gap: 10px !important; max-height: 620px; overflow-y: auto; padding-right: 8px; } .exchange__block-list::-webkit-scrollbar { width: 4px; } .exchange__block-list::-webkit-scrollbar-thumb { background: rgba(167, 139, 250, 0.4); border-radius: 4px; } .exchange__block-list::-webkit-scrollbar-track { background: transparent; } .exchange__block-item { position: relative; padding: 10px 8px 8px !important; border-radius: 14px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important; cursor: pointer; transition: all 0.2s ease !important; display: flex !important; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 96px; width: 100% !important; margin: 0 !important; gap: 4px; } .exchange__block-item::after { content: attr(data-ticker); display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--nx-text-muted); text-transform: uppercase; line-height: 1; margin-top: 2px; } .exchange__block-item:hover { background: rgba(167, 139, 250, 0.1) !important; border-color: var(--nx-border-strong) !important; transform: translateY(-2px); } .exchange__block-item_active { background: linear-gradient(135deg, rgba(167, 139, 250, 0.25), rgba(240, 171, 252, 0.12)) !important; border-color: var(--nx-purple) !important; box-shadow: 0 6px 20px rgba(167, 139, 250, 0.3) !important; } .exchange__block-item img { width: 64px !important; height: 64px !important; object-fit: contain !important; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45)); } /* Network sub-label: gradient pill ONLY for known crypto networks. */ .exchange__block-item[data-network] { padding-bottom: 6px !important; min-height: 108px; gap: 2px; } /* Crypto networks: branded gradient pill (USDT-TRC20/ERC20/BEP20, BSC, MATIC, AVAX, SOL, ARB, OP) */ .exchange__block-item[data-network="TRC20"]::before, .exchange__block-item[data-network="ERC20"]::before, .exchange__block-item[data-network="BEP20"]::before, .exchange__block-item[data-network="BSC"]::before, .exchange__block-item[data-network="MATIC"]::before, .exchange__block-item[data-network="AVAX"]::before, .exchange__block-item[data-network="SOL"]::before, .exchange__block-item[data-network="ARB"]::before, .exchange__block-item[data-network="OP"]::before { content: attr(data-network); order: 99; background: var(--nx-gradient); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 6px; letter-spacing: 0.06em; line-height: 1.1; box-shadow: 0 2px 6px rgba(102, 126, 234, 0.35); margin-top: 2px; } /* Anything else (BANK, etc.) — plain gray subtitle, matches normal ticker label */ .exchange__block-item[data-network]:not([data-network="TRC20"]):not([data-network="ERC20"]):not([data-network="BEP20"]):not([data-network="BSC"]):not([data-network="MATIC"]):not([data-network="AVAX"]):not([data-network="SOL"]):not([data-network="ARB"]):not([data-network="OP"])::before { content: attr(data-network); order: 99; color: rgba(245, 240, 255, 0.55); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; line-height: 1.1; margin-top: 2px; background: transparent; padding: 0; } /* Exchange form */ .exchange__block_small { padding: 28px !important; } .exchange__block-wrapper { margin-bottom: 16px; } .exchange__block-text { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.12em; color: var(--nx-text-muted) !important; margin-bottom: 8px !important; } .exchange__block-header { font-size: 14px !important; font-weight: 600 !important; color: var(--nx-text) !important; margin-bottom: 6px !important; } .exchange__block-input { width: 100% !important; background: rgba(0, 0, 0, 0.3) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 12px !important; padding: 14px 16px !important; color: var(--nx-text) !important; font-size: 15px !important; font-weight: 500 !important; transition: all 0.2s ease !important; font-family: inherit !important; } .exchange__block-input:focus { outline: none !important; border-color: var(--nx-purple) !important; background: rgba(0, 0, 0, 0.4) !important; box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15) !important; } .exchange__block-input::placeholder { color: var(--nx-text-dim) !important; } .exchange__block-captcha { display: flex; align-items: center; gap: 8px; } .exchange__block-captcha .exchange__block-input { flex: 1; text-align: center; } .exchange__block-sign { font-weight: 800; color: var(--nx-purple); font-size: 20px; } .exchange__block-btn { width: 100% !important; background: var(--nx-gradient) !important; color: #fff !important; border: none !important; border-radius: 14px !important; padding: 16px !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.02em; cursor: pointer !important; margin-top: 10px !important; transition: all 0.25s ease !important; box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35) !important; } .exchange__block-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(102, 126, 234, 0.5) !important; } .exchange__block-btn:active { transform: translateY(0); } /* ===================== HOW-EXCHANGE ===================== */ .how-exchange { padding: 80px 0 !important; } .how-exchange__block { background: var(--nx-glass) !important; backdrop-filter: blur(14px) !important; border: 1px solid var(--nx-border) !important; border-radius: 20px !important; transition: all 0.3s ease !important; position: relative; overflow: hidden; } .how-exchange__block::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(167, 139, 250, 0.1), transparent 50%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .how-exchange__block:hover { border-color: var(--nx-border-strong) !important; transform: translateY(-6px); box-shadow: 0 20px 40px rgba(167, 139, 250, 0.15); } .how-exchange__block:hover::before { opacity: 1; } .how-exchange__block-number { background: var(--nx-gradient) !important; box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4); } /* ===================== FAQ ===================== */ .faq { padding: 80px 0 !important; } .faq__title { font-size: clamp(1.6rem, 3vw, 2.4rem) !important; font-weight: 800 !important; text-align: center; margin-bottom: 12px !important; background: var(--nx-gradient-soft) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; letter-spacing: -0.02em; } .faq__subtitle { color: var(--nx-text-muted) !important; text-align: center; margin-bottom: 40px !important; font-size: 15px; } .faq__list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .faq__item { background: var(--nx-glass) !important; backdrop-filter: blur(10px); border: 1px solid var(--nx-border) !important; border-radius: 16px !important; overflow: hidden; transition: all 0.25s ease; } .faq__item:hover { border-color: var(--nx-border-strong) !important; } .faq__question { padding: 20px 24px !important; display: flex !important; justify-content: space-between !important; align-items: center; cursor: pointer; font-weight: 600 !important; font-size: 15px !important; color: var(--nx-text) !important; transition: color 0.2s ease; } .faq__question:hover { color: var(--nx-purple) !important; } .faq__icon { width: 28px; height: 28px; border-radius: 50%; background: rgba(167, 139, 250, 0.15); display: flex !important; align-items: center; justify-content: center; color: var(--nx-purple) !important; font-size: 16px !important; font-weight: 700; flex-shrink: 0; margin-left: 16px; transition: all 0.25s ease; } .faq__item.active .faq__icon, .faq__item.open .faq__icon { transform: rotate(45deg); background: var(--nx-gradient); color: #fff !important; } .faq__answer { padding: 0 24px 20px !important; color: var(--nx-text-muted) !important; font-size: 14px !important; line-height: 1.7 !important; white-space: pre-line; } /* ===================== SUPPORT ===================== */ .support { padding: 80px 0 !important; } .support__container { max-width: 720px; margin: 0 auto; text-align: center; background: var(--nx-glass) !important; border: 1px solid var(--nx-border); border-radius: 24px; padding: 48px 32px !important; box-shadow: var(--nx-shadow); } .support__title { font-size: clamp(1.4rem, 2.5vw, 2rem) !important; font-weight: 800 !important; margin-bottom: 12px !important; color: var(--nx-text) !important; } .support__text { color: var(--nx-text-muted) !important; margin-bottom: 24px !important; font-size: 15px; } .support__btn { display: inline-flex !important; align-items: center; gap: 12px; background: var(--nx-gradient) !important; color: #fff !important; padding: 16px 48px !important; border-radius: 14px !important; font-weight: 700 !important; font-size: 0.95rem !important; text-decoration: none !important; transition: all 0.25s ease; box-shadow: 0 8px 24px rgba(102, 126, 234, 0.35); white-space: nowrap; cursor: pointer; } .support__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(102, 126, 234, 0.5); } .support__btn img, .support__btn svg { width: 22px; height: 22px; flex-shrink: 0; } /* ===================== FOOTER ===================== */ .footer { background: rgba(11, 15, 28, 0.85) !important; backdrop-filter: blur(14px); border-top: 1px solid var(--nx-border) !important; padding: 40px 0 !important; margin-top: 0 !important; } .footer__container { display: flex !important; justify-content: space-between !important; align-items: center; flex-wrap: wrap; gap: 20px; } .footer__text { color: var(--nx-text-dim) !important; font-size: 13px; } .footer__link { width: 44px; height: 44px; border-radius: 12px; background: rgba(167, 139, 250, 0.12); border: 1px solid var(--nx-border); display: flex !important; align-items: center; justify-content: center; transition: all 0.25s ease; } .footer__link:hover { background: var(--nx-gradient); transform: translateY(-2px); } .footer__link img { width: 20px; height: 20px; } /* ===================== MOBILE ===================== */ @media (max-width: 1100px) { .exchange__wrapper { grid-template-columns: 1fr 1fr !important; } .exchange__block_small { grid-column: 1 / -1; } } @media (max-width: 768px) { .header { padding: 12px 0 !important; } .header__nav { display: none !important; } .header__burger-content .header__nav { display: block !important; } .hero { padding: 120px 0 60px !important; } .hero__title { font-size: 1.8rem !important; } .hero__subtitle { font-size: 0.95rem !important; } .exchange { padding: 40px 0 60px !important; } .exchange__wrapper { grid-template-columns: 1fr !important; gap: 14px !important; } .exchange__block { padding: 18px !important; } .exchange__block-list { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)) !important; max-height: 360px; } .exchange__block-item { min-height: 90px; padding: 12px 8px !important; } .exchange__block-item img { width: 44px !important; height: 44px !important; } .exchange__block_small { padding: 20px !important; } .how-exchange { padding: 60px 0 !important; } .faq { padding: 60px 0 !important; } .faq__question { padding: 16px 20px !important; font-size: 14px !important; } .faq__answer { padding: 0 20px 16px !important; font-size: 13px !important; } .support { padding: 60px 0 !important; } .support__container { padding: 32px 20px !important; } .footer__container { flex-direction: column; text-align: center; } .header__lang-dropdown { right: 0; left: auto; } } @media (max-width: 480px) { .header__btn { padding: 9px 14px !important; font-size: 12px !important; } .header__lang-wrapper { padding: 7px 10px !important; } } /* ===================== UTILITIES / TWEAKS ===================== */ .title { color: var(--nx-text) !important; } .subtitle { color: var(--nx-text-muted) !important; } input, textarea, select { font-family: 'Inter', sans-serif !important; } ::selection { background: rgba(167, 139, 250, 0.4); color: #fff; } /* Preloader */ .preloader { background: var(--nx-bg) !important; } .preloader__circle { border-color: var(--nx-purple) transparent transparent !important; } /* Rate widget */ .exchange-rate-widget { background: linear-gradient(135deg, rgba(167, 139, 250, 0.12), rgba(240, 171, 252, 0.04)) !important; border: 1px solid var(--nx-border) !important; border-radius: 14px !important; padding: 14px !important; margin-bottom: 18px !important; } .rate-widget-pair { color: var(--nx-text-muted) !important; font-size: 11px !important; letter-spacing: 0.1em; text-transform: uppercase; } .rate-widget-value { color: var(--nx-text) !important; font-weight: 700 !important; font-size: 15px !important; margin-top: 4px; } .rate-widget-margin { color: var(--nx-accent-green) !important; font-size: 12px !important; margin-top: 4px; } /* Burger content */ .header__burger-content { background: var(--nx-glass-strong) !important; backdrop-filter: blur(20px); border-left: 1px solid var(--nx-border); } /* Центрирование подзаголовка шагов на ПК и мобильных */ .steps__subtitle, .steps .section-subtitle, .steps div[class*="subtitle"], .steps p { text-align: center !important; margin-left: auto !important; margin-right: auto !important; display: block !important; width: 100% !important; } /* Финальное центрирование подзаголовка */ .how-exchange__title, h3.how-exchange__title { text-align: center !important; display: block !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; } /* Адаптив заголовка шагов под мобильные экраны */ @media (max-width: 768px) { .how-exchange__title, h3.how-exchange__title, [class*="how-exchange__title"] { font-size: 1.6rem !important; line-height: 1.3 !important; white-space: normal !important; word-wrap: break-word !important; text-align: center !important; width: 100% !important; padding: 0 10px !important; box-sizing: border-box !important; } }