:root { --color-primary: #00c26f; --color-primary-hover: #00a85e; --color-primary-light: #6fe3ae; --color-dark: #1B1B1E; --color-dark-bg: #1B1B1E; --color-text: rgba(255, 255, 255, 0.92); --color-text-secondary: rgba(255, 255, 255, 0.56); --color-text-light: rgba(255, 255, 255, 0.8); --color-border: rgba(255, 255, 255, 0.08); --color-bg: #1B1B1E; --color-bg-light: #232326; --color-bg-warm: #232326; --color-success: #22c55e; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.06); --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.1); --transition: 0.2s ease; --max-width: 1200px; } /* Global load-time kill-switch. starts with the .preload class already in the raw HTML (see every page's tag), so this rule is in force before a single byte of layout happens. Whatever CSS transition or animation exists anywhere on the site — current or added later — it is forced off until the page has fully loaded (images included) and settled for a frame. js/page-end-fix.js removes the class on window 'load' (double rAF + a hard timeout fallback). This closes the "jerks on refresh" complaint at the root instead of chasing it rule by rule. */ html.preload, html.preload *, html.preload *::before, html.preload *::after { transition: none !important; animation-play-state: paused !important; scroll-behavior: auto !important; } @property --spin { syntax: ''; inherits: true; initial-value: 0deg; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; overflow-x: clip; /* see body rule below — hidden here breaks position: sticky the same way */ background: var(--color-dark); } body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--color-text); background: var(--color-bg); line-height: 1.5; /* clip, not hidden: overflow-x: hidden forces the browser to compute overflow-y as auto too (CSS Overflow spec), which turns body into its own scroll container and breaks position: sticky on .header — it stops tracking the real viewport and scrolls away with the page. clip blocks the horizontal scroll the same way without touching the vertical axis. */ overflow-x: clip; max-width: 100%; } /* Hidden for the brief window while js/i18n.js swaps hardcoded-Russian text to the visitor's saved language — no transition, so revealing it is an instant snap, not another animation. See js/i18n.js for the JS side. */ html.i18n-pending body { visibility: hidden; } body[data-page="index"] { background: #1B1B1E; } a { text-decoration: none; color: inherit; transition: color var(--transition); } ul, ol { list-style: none; } img { max-width: 100%; height: auto; display: block; } button { border: none; background: none; cursor: pointer; font-family: inherit; } input, textarea { font-family: inherit; border: none; outline: none; box-shadow: none; -webkit-appearance: none; appearance: none; background: transparent; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } /* ============ HEADER (flat minimal) ============ */ .header { position: sticky; top: 0; z-index: 100; background: #1e1e21; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .header::after { display: none; } .header__row { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 14px 0; } .header__logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; transition: opacity 0.2s ease; } .header__logo:hover { opacity: 0.85; } .header__logo-name { font-family: 'DM Sans', sans-serif; font-size: 17px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: #fff; } .header__cluster { display: flex; align-items: center; gap: 32px; margin-left: auto; } .header__nav { display: flex; align-items: center; gap: 32px; } .header__nav-link { padding: 0; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.42); white-space: nowrap; text-decoration: none; transition: color 0.18s ease; } .header__nav-link:hover { color: rgba(255, 255, 255, 0.88); } .header__nav-link.active { color: #fff; } /* Оригинальный логотип Telegram слева от «Поддержка». Через ::before, а не в разметке: i18n.js переписывает textContent ссылки и стёр бы иконку. */ .header__nav-link--support { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, 0.42); } .header__nav-link--support::before { content: ''; flex-shrink: 0; width: 1.15em; height: 1.15em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='.667' x2='.417' y1='.167' y2='.75'%3E%3Cstop offset='0' stop-color='%2337aee2'/%3E%3Cstop offset='1' stop-color='%231e96c8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='120' cy='120' r='120' fill='url(%23g)'/%3E%3Cpath fill='%23fff' d='M81.229 128.772l14.237 39.406s1.78 3.687 3.686 3.687 30.255-29.492 30.255-29.492l31.525-60.89L81.737 118.6z'/%3E%3Cpath fill='%23d2e5f1' d='M100.106 138.878l-2.733 29.046s-1.144 8.9 7.754 0 17.415-15.763 17.415-15.763'/%3E%3Cpath fill='%23fff' d='M81.486 130.178L52.2 120.636s-3.5-1.42-2.373-4.64c.232-.664.7-1.229 2.1-2.2 6.489-4.523 120.106-45.36 120.106-45.36s3.208-1.081 5.1-.362a2.766 2.766 0 0 1 1.885 2.055 9.357 9.357 0 0 1 .254 2.585c-.009.752-.1 1.449-.169 2.542-.692 11.165-21.4 94.493-21.4 94.493s-1.239 4.876-5.678 5.043a8.13 8.13 0 0 1-5.925-2.292c-8.711-7.493-38.819-27.727-45.472-32.177a1.27 1.27 0 0 1-.546-.9c-.093-.469.417-1.05.417-1.05s52.426-46.6 53.821-51.492c.108-.379-.3-.566-.848-.4-3.482 1.281-63.844 39.4-70.506 43.607a3.21 3.21 0 0 1-1.48.09z'/%3E%3C/svg%3E") center / contain no-repeat; } .header__nav-link--support:hover { color: rgba(255, 255, 255, 0.88); } .header__divider { display: none; } .header__lang { position: relative; flex-shrink: 0; } /* Language — plain RU/EN text (no buttons, no track) */ .lang-switch { display: inline-flex; align-items: baseline; font-size: 15px; font-weight: 500; letter-spacing: 0.03em; line-height: 1; user-select: none; } .lang-switch__sep { padding: 0 8px; color: rgba(255, 255, 255, 0.18); pointer-events: none; } .lang-switch__item { padding: 0; border: none; background: none; color: rgba(255, 255, 255, 0.35); font: inherit; line-height: inherit; letter-spacing: inherit; cursor: pointer; transition: color 0.18s ease; -webkit-tap-highlight-color: transparent; appearance: none; } .lang-switch__item:hover:not(.is-active) { color: rgba(255, 255, 255, 0.65); } .lang-switch__item.is-active { color: #fff; } .lang-switch__item:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.35); outline-offset: 3px; border-radius: 1px; } @media (min-width: 769px) { .header__row { padding: 20px 0; gap: 40px; } .header__logo { gap: 12px; } .header__logo-name { font-size: 20px; } .header__cluster { gap: 36px; } .header__nav { gap: 36px; } .header__nav-link { font-size: 16px; } .lang-switch { font-size: 16px; } .lang-switch__sep { padding: 0 9px; } } .header__burger { display: none; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 0; color: rgba(255, 255, 255, 0.85); flex-shrink: 0; border: none; background: transparent; transition: color 0.2s ease, opacity 0.2s ease; } .header__burger:hover { color: #fff; opacity: 0.9; } .header__burger svg { width: 24px; height: 24px; } .mobile-menu__lang { display: none; } /* ============ HEADER QUICK NAV (index — text links, below header) ============ */ .header-quicknav { margin: 0; padding: 0; background: none; border: none; } .header-quicknav__inner { display: flex; align-items: center; flex-wrap: wrap; gap: 0; padding: 10px 0 14px; } .header-quicknav__link { display: inline; padding: 0; border: none; background: none; border-radius: 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: rgba(255, 255, 255, 0.68); text-decoration: none; white-space: nowrap; transition: color 0.18s ease; } .header-quicknav__link:not(:last-child)::after { content: '/'; margin: 0 14px; color: rgba(255, 255, 255, 0.28); pointer-events: none; font-weight: 300; } .header-quicknav__link:hover { color: #fff; } @media (min-width: 769px) { .header-quicknav__inner { padding: 12px 0 16px; } .header-quicknav__link { font-size: 14px; } .header-quicknav__link:not(:last-child)::after { margin: 0 18px; } } @media (max-width: 768px) { .header-quicknav { display: none; } } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; transition: all var(--transition); white-space: nowrap; } .btn--ghost { color: var(--color-text-secondary); background: transparent; } .btn--ghost:hover { color: var(--color-text); background: var(--color-bg-light); } .btn--ghost-header { color: rgba(255, 255, 255, 0.7); } .btn--ghost-header:hover { color: #fff; background: rgba(255, 255, 255, 0.06); } .btn--primary { color: #fff; background: var(--color-primary); } .btn--primary:hover { background: var(--color-primary-hover); } .btn--telegram { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: #2AABEE; color: #fff; border-radius: 12px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; white-space: nowrap; } .btn--telegram:hover { background: #229ED9; transform: translateY(-1px); } .btn--telegram__icon { width: 18px; height: 18px; filter: brightness(0) invert(1); flex-shrink: 0; } .btn--accent { color: var(--color-text); background: var(--color-bg-light); border: 1px solid var(--color-border); } .btn--accent:hover { background: #2c2c30; } .btn--small { padding: 8px 16px; font-size: 13px; } /* ============ HERO (dark zone) ============ */ .hero { position: relative; min-height: 0; padding: 0; background: var(--color-bg-light); overflow: hidden; display: block; } .hero > .container { width: 100%; } .hero::after { display: none; } .hero__aurora { display: none; } .hero__aurora-orb { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.3; will-change: transform; } .hero__aurora-orb--1 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(0, 194, 111, 0.6), transparent 70%); top: -100px; right: 10%; animation: heroOrb1 15s ease-in-out infinite alternate; } .hero__aurora-orb--2 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(0, 152, 224, 0.5), transparent 70%); bottom: -80px; left: 5%; animation: heroOrb2 18s ease-in-out infinite alternate; } .hero__aurora-orb--3 { width: 250px; height: 250px; background: radial-gradient(circle, rgba(0, 152, 224, 0.3), transparent 70%); top: 30%; left: 40%; animation: heroOrb3 20s ease-in-out infinite alternate; } .hero__aurora-orb--4 { width: 200px; height: 200px; background: radial-gradient(circle, rgba(34, 211, 238, 0.25), transparent 70%); top: 10%; left: 15%; animation: heroOrb4 12s ease-in-out infinite alternate; } @keyframes heroOrb1 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-40px, 50px) scale(1.1); } } @keyframes heroOrb2 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(50px, -40px) scale(1.15); } } @keyframes heroOrb3 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-30px, -30px) scale(0.85); } } @keyframes heroOrb4 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(20px, 30px) scale(1.2); } } .hero__content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 480px); gap: clamp(28px, 3.5vw, 48px); align-items: start; position: relative; z-index: 2; } .crypto-strip--hero { grid-column: 1 / -1; margin: 0 0 8px; border-radius: 14px; border-bottom: none; } .hero__info { order: 1; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%; position: relative; z-index: 1; } .hero__title-block { margin-bottom: 18px; } .hero__promo { display: block; margin: 0 0 22px; font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.65); } .hero__usp { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; } .hero__usp-item { display: flex; align-items: center; gap: 10px; } .hero__usp-icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; color: var(--color-primary); } .hero__usp-icon svg { width: 100%; height: 100%; } .hero__usp-text { font-size: 15px; font-weight: 600; color: #fff; } .trust-badges { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 18px; } .trust-card { display: flex; flex-direction: row; align-items: center; text-align: left; gap: 16px; padding: 18px 28px; border-radius: 14px; background: var(--color-bg-light); border: 1px solid rgba(255, 255, 255, 0.04); min-width: 240px; } .trust-card__body { display: flex; flex-direction: column; gap: 6px; } .trust-card__logo { display: block; width: auto; object-fit: contain; } .trust-card__logo--trustpilot { height: 26px; flex-shrink: 0; } .trust-card__logo--cryptoradar { height: 22px; flex-shrink: 0; } .trust-card__rating { display: flex; align-items: baseline; gap: 5px; } .trust-card__score { font-family: 'DM Sans', sans-serif; font-size: 24px; font-weight: 800; color: #fff; } .trust-card__of5 { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.4); } .trust-card__count { font-size: 13px; font-weight: 500; color: var(--color-primary-light); } .trust-card__stars { position: relative; display: inline-block; font-size: 17px; letter-spacing: 2px; line-height: 1; } .trust-card__stars-bg { color: rgba(255, 255, 255, 0.15); } .trust-card__stars-fg { position: absolute; inset: 0; width: var(--rating, 100%); overflow: hidden; white-space: nowrap; color: #ffb800; } .hero__features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 36px; margin: 0; padding: 0; list-style: none; width: 100%; max-width: none; } .hero__feature { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 500; color: rgba(255, 255, 255, 0.82); } .hero__feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; color: #c8ccff; background: linear-gradient(135deg, rgba(0, 194, 111, 0.28), rgba(0, 152, 224, 0.2)); border: 1px solid rgba(147, 158, 235, 0.32); } .hero__feature-icon svg { width: 15px; height: 15px; } .hero__title-block h1, .exchange-card__heading h2 { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; } .hero__info .hero__title-line--main { display: inline-flex; flex-wrap: nowrap; align-items: baseline; gap: 0.28em; white-space: nowrap; font-size: clamp(36px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -0.035em; background: none; -webkit-text-fill-color: #fff; color: #fff; animation: none; } .hero__info .hero__title-line--main > span { font-weight: 800; color: var(--color-primary-light); background: none; -webkit-text-fill-color: currentColor; filter: none; animation: none; } .hero__info .hero__title-line--sub { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: rgba(255, 255, 255, 0.45); } .hero__info .hero__title-line--sub span { color: inherit; background: none; -webkit-text-fill-color: currentColor; filter: none; animation: none; } .hero__title-line { display: block; } /* "Криптообмен" product line: shares .hero__title-line--main's big/bold look (that rule sets display:inline-flex, meant for one line's own word+accent children) — force it block-level here so it actually starts its own row instead of sitting inline next to the tagline below it. */ .hero__info .hero__title-line--product { display: flex; width: fit-content; margin-left: -28px; padding: 10px 28px; border-radius: 24px; background: var(--color-primary); } /* Only makes sense alongside the full desktop ChangeNOW-style hero (everything else in that redesign — the 500px exchange card, 94px fields, etc. — is gated at the same 1200px breakpoint). Below that, including the 769-1199px range that isn't "mobile" by js/i18n.js's own 768px check, this line stays hidden and the single-line title runs the show. !important because several other breakpoint rules further down this file also set display on .hero__title-line--main (which this line shares), at higher specificity (.hero__info .hero__title-line--main) — without it those silently un-hide this line again. */ @media (min-width: 769px) and (max-width: 1199px) { .hero__title-line--product { display: none !important; } } .hero__title-line--main { font-family: 'DM Sans', sans-serif; font-size: 46px; font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; background: linear-gradient( 110deg, #ffffff 0%, #ffffff 42%, rgba(220, 224, 255, 0.55) 50%, #ffffff 58%, #ffffff 100% ); background-size: 240% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: heroTitleShine 7s ease-in-out infinite; } .hero__title-line--sub { font-family: 'DM Sans', sans-serif; font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.52); } .hero__title-line--sub span { font-weight: 600; background: linear-gradient( 110deg, #6fe3ae 0%, #0098e0 28%, #00c26f 52%, #0098e0 76%, #6fe3ae 100% ); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: heroGradientFlow 6.5s linear infinite; } .exchange-card__heading .hero__title-line--main { font-size: 22px; animation: none; -webkit-text-fill-color: #fff; color: #fff; background: none; } .exchange-card__heading .hero__title-line--sub { font-size: 15px; } .exchange-card__heading .hero__title-line--sub span { color: var(--color-primary-light); background: none; -webkit-text-fill-color: currentColor; filter: none; animation: none; } @keyframes heroTitleShine { 0%, 100% { background-position: 130% center; } 50% { background-position: -30% center; } } @keyframes heroGradientFlow { to { background-position: 220% center; } } .hero__stats { display: flex; margin-top: auto; padding-top: 8px; } .hero__stat { display: flex; flex-direction: column; padding: 0 28px; border-right: 1px solid rgba(255, 255, 255, 0.1); } .hero__stat:first-child { padding-left: 0; } .hero__stat:last-child { border-right: none; } .hero__stat-num { font-family: 'DM Sans', sans-serif; font-size: 32px; font-weight: 700; color: #fff; line-height: 1.2; } .hero__stat-label { font-size: 13px; color: rgba(255, 255, 255, 0.35); margin-top: 2px; } /* ---- Partners marquee (ribbon-style, like a straight TextLoop) ---- */ .partners__track { width: 100%; overflow: hidden; background: var(--color-primary); padding: 12px 0; border-radius: 0 0 120px 120px; } .partners__list { display: flex; width: max-content; animation: partnersScroll 40s linear infinite; } .partners__track:hover .partners__list { animation-play-state: paused; } .partners__group { display: flex; align-items: center; flex-shrink: 0; padding: 18px 0; } .partners__item { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; padding: 0 24px; transition: opacity 0.2s ease; } .partners__item:hover { opacity: 0.8; } .partners__logo { display: flex; align-items: center; justify-content: center; height: 28px; flex-shrink: 0; } .partners__logo img { display: block; height: 100%; width: auto; object-fit: contain; } .partners__sep { flex-shrink: 0; font-size: 16px; color: rgba(255, 255, 255, 0.55); } @keyframes partnersScroll { from { transform: translateX(-50%); } to { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .partners__list { animation: none; } } /* Desktop: unified horizontal shell on index (header, quicknav, hero) */ @media (min-width: 769px) { body[data-page="index"] { --index-shell-max: var(--max-width); --index-shell-pad: 24px; } body[data-page="index"] .container { width: 100%; max-width: var(--index-shell-max); margin-inline: auto; padding-inline: var(--index-shell-pad); box-sizing: border-box; } } @media (min-width: 1100px) { body[data-page="index"] { --index-shell-pad: 32px; } } @media (min-width: 1280px) { body[data-page="index"] { --index-shell-max: 1280px; --index-shell-pad: 40px; } } /* Desktop: Paybis-style hero — info left, exchange card right */ @media (min-width: 769px) { .hero { padding: 20px 0 64px; } .hero__content { grid-template-columns: minmax(0, 1fr) clamp(380px, 36vw, 480px); gap: clamp(32px, 4vw, 56px); align-items: stretch; } .hero__title-block { margin-bottom: 0; width: 100%; } .hero__info { padding-top: 0; /* Stretched to the exchange card's height (align-items:stretch above). Exactly 3 children now (title-block, .hero__usp, .trust-badges) — space-between puts an equal gap above and below .hero__usp, so it sits dead-center between the tagline and the trust badges. */ justify-content: space-between; align-self: stretch; width: 100%; max-width: 100%; overflow: visible; min-height: 0; } .hero__info .hero__title-line--main { display: block; max-width: 100%; white-space: normal; text-wrap: balance; font-family: 'DM Sans', sans-serif; font-size: clamp(28px, 2.6vw, 44px); font-weight: 800; line-height: 1.18; letter-spacing: -0.03em; background: linear-gradient( 110deg, #ffffff 0%, #ffffff 36%, rgba(210, 214, 255, 0.92) 46%, #ffffff 56%, rgba(232, 234, 255, 0.95) 68%, #ffffff 100% ); background-size: 260% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: heroTitleShine 8s ease-in-out infinite; } .hero__info .hero__title-line--main > .hero__title-word { color: #fff; -webkit-text-fill-color: #fff; background: none; animation: none; } .hero__info .hero__title-line--main > .hero__title-accent { font-weight: 800; background: none; -webkit-text-fill-color: var(--color-primary); color: var(--color-primary); animation: none; } .hero__promo { font-size: 16px; margin-bottom: 24px; line-height: 1.4; max-width: 100%; } .hero__features { gap: 16px clamp(20px, 3vw, 40px); max-width: 100%; width: 100%; margin-bottom: 0; } .hero__feature { font-size: clamp(16px, 1.35vw, 19px); gap: 14px; line-height: 1.35; min-width: 0; } .hero__feature-icon { width: 28px; height: 28px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); border: none; } .hero__feature-icon svg { width: 16px; height: 16px; } .exchange-card-wrapper { position: relative; top: auto; max-width: 100%; width: 100%; justify-self: stretch; align-self: stretch; z-index: 2; } body[data-page="index"] .get-started { padding-top: 88px; } .exchange-card__content { padding: 28px 32px; } .exchange-field { margin-bottom: 14px; } .exchange-field__label { font-size: 13px; margin-bottom: 6px; } .exchange-field__row { padding: 14px 16px; border-radius: 14px; } .exchange-field__input { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; } .exchange-field__currency { padding: 8px 12px; gap: 8px; } .exchange-field__currency-code { font-size: 16px; } .exchange-field__currency-name { font-size: 14px; } .exchange-swap { margin: 4px 0; } .exchange-swap__btn { width: 36px; height: 36px; } .exchange-swap__btn svg { width: 20px; height: 20px; } .exchange-card__submit { padding: 16px; font-size: 17px; margin-top: 6px; margin-bottom: 12px; border-radius: 14px; } .exchange-card__meta { margin-top: 12px; } .exchange-card__rate-line { font-size: 14px; } } @media (min-width: 1100px) { .hero { padding: 24px 0 72px; } .hero__content { grid-template-columns: minmax(0, 1fr) clamp(420px, 34vw, 500px); gap: clamp(40px, 4.5vw, 64px); } .hero__info .hero__title-line--main { font-size: clamp(32px, 2.8vw, 48px); } .hero__promo { font-size: 17px; margin-bottom: 26px; } .hero__features { gap: 18px clamp(24px, 3.5vw, 48px); } .hero__feature { font-size: clamp(17px, 1.25vw, 20px); } .hero__feature-icon { width: 30px; height: 30px; } .hero__feature-icon svg { width: 17px; height: 17px; } .exchange-card__content { padding: 32px 36px; } .exchange-field__row { padding: 15px 18px; } .exchange-card__submit { padding: 17px; font-size: 18px; } } @media (min-width: 1440px) { .hero__content { grid-template-columns: minmax(0, 1fr) 520px; gap: 64px; } .hero__info .hero__title-line--main { font-size: clamp(36px, 2.6vw, 52px); } } /* Desktop-only typographic polish for the right-hand info column */ @media (min-width: 769px) { .hero__stats { gap: 4px; } .hero__stat { position: relative; padding: 0 30px; border-right: none; } .hero__stat:first-child { padding-left: 0; } .hero__stat + .hero__stat::before { content: ''; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: linear-gradient( 180deg, transparent, rgba(255, 255, 255, 0.16) 35%, rgba(255, 255, 255, 0.16) 65%, transparent ); } .hero__stat-num { font-size: 34px; letter-spacing: -0.01em; background: linear-gradient(135deg, #ffffff 0%, #c4c8f0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .hero__stat-label { margin-top: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.38); } } /* Hero content shows immediately — no entrance animation (was causing a visible jerk/flash on every page load/refresh, since it replayed every time). */ @media (min-width: 769px) and (prefers-reduced-motion: reduce) { html.js .hero__title-block h1, html.js .hero__title-block p, html.js .hero__flow, html.js .hero__stat { opacity: 1; animation: none; transform: none; filter: none; } } /* ============ EXCHANGE CARD — SPOTLIGHT WRAPPER ============ */ .exchange-card { position: relative; border-radius: 28px; overflow: hidden; } /* ============ EXCHANGE CARD — PREMIUM (internals unchanged) ============ */ .exchange-card__body { position: relative; background: #1e1e21; border-radius: 26.5px; border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; z-index: 1; } .exchange-card--highlight { animation: exchangeCardHighlight 1.4s ease; } @keyframes exchangeCardHighlight { 0%, 100% { box-shadow: none; } 35% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); } } .exchange-card__orb { display: none; } .exchange-card__orb--1 { width: 220px; height: 220px; background: radial-gradient(circle, rgba(0, 194, 111, 0.8), transparent 70%); top: -60px; right: -40px; animation: orbDrift1 8s ease-in-out infinite alternate; } .exchange-card__orb--2 { width: 180px; height: 180px; background: radial-gradient(circle, rgba(0, 152, 224, 0.7), transparent 70%); bottom: -50px; left: -30px; animation: orbDrift2 10s ease-in-out infinite alternate; } .exchange-card__orb--3 { width: 140px; height: 140px; background: radial-gradient(circle, rgba(0, 152, 224, 0.5), transparent 70%); top: 40%; left: 50%; animation: orbDrift3 12s ease-in-out infinite alternate; } @keyframes orbDrift1 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-30px, 40px) scale(1.15); } } @keyframes orbDrift2 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(40px, -30px) scale(1.1); } } @keyframes orbDrift3 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-25px, -20px) scale(0.9); } } .exchange-card__noise { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.04; pointer-events: none; z-index: 1; mix-blend-mode: soft-light; } .exchange-card__particles { display: none; } .exchange-card__particles span { position: absolute; display: block; bottom: -5%; opacity: 0; background: rgba(255, 255, 255, 0.4); border-radius: 50%; animation: particleRise linear infinite backwards; } .exchange-card__particles span:nth-child(1) { left: 8%; width: 2px; height: 2px; animation-duration: 9s; animation-delay: 0s; } .exchange-card__particles span:nth-child(2) { left: 18%; width: 3px; height: 3px; animation-duration: 11s; animation-delay: 1.5s; } .exchange-card__particles span:nth-child(3) { left: 28%; width: 1.5px; height: 1.5px; animation-duration: 8s; animation-delay: 3s; } .exchange-card__particles span:nth-child(4) { left: 38%; width: 2px; height: 2px; animation-duration: 13s; animation-delay: 0.5s; } .exchange-card__particles span:nth-child(5) { left: 48%; width: 2.5px; height: 2.5px; animation-duration: 10s; animation-delay: 2s; } .exchange-card__particles span:nth-child(6) { left: 58%; width: 1.5px; height: 1.5px; animation-duration: 12s; animation-delay: 4s; } .exchange-card__particles span:nth-child(7) { left: 68%; width: 2px; height: 2px; animation-duration: 9s; animation-delay: 1s; } .exchange-card__particles span:nth-child(8) { left: 78%; width: 3px; height: 3px; animation-duration: 11s; animation-delay: 3.5s; } .exchange-card__particles span:nth-child(9) { left: 85%; width: 1.5px; height: 1.5px; animation-duration: 14s; animation-delay: 2.5s; } .exchange-card__particles span:nth-child(10) { left: 92%; width: 2px; height: 2px; animation-duration: 8s; animation-delay: 0.8s; } .exchange-card__particles span:nth-child(11) { left: 15%; width: 2px; height: 2px; animation-duration: 10s; animation-delay: 5s; } .exchange-card__particles span:nth-child(12) { left: 55%; width: 1.5px; height: 1.5px; animation-duration: 13s; animation-delay: 6s; } @keyframes particleRise { 0% { bottom: -5%; opacity: 0; transform: translateX(0); } 5% { opacity: 0.6; } 50% { transform: translateX(15px); } 95% { opacity: 0.6; } 100% { bottom: 105%; opacity: 0; transform: translateX(-10px); } } .exchange-card__content { position: relative; z-index: 4; padding: 28px 32px; } .exchange-card-wrapper { order: 2; justify-self: stretch; width: 100%; min-width: 0; max-width: none; } .exchange-card__heading { text-align: center; margin-bottom: 20px; } .exchange-card__heading h2 { font-family: 'DM Sans', sans-serif; font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -0.01em; margin: 0 0 6px; line-height: 1.2; } .exchange-card__heading h2 span { color: var(--color-primary-light); } .exchange-card__heading--mobile { display: none; } .exchange-card__heading p { font-size: 14px; color: rgba(255, 255, 255, 0.4); font-weight: 400; } /* Wears the same chrome as the amount fields under it — 0.06 fill, 0.08 hairline, soft radius — so the switch reads as part of the card instead of a pill dropped on top. The two labels sit in equal columns and the green fill slides between them rather than blinking on and off. */ .exchange-mode-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-self: flex-start; padding: 4px; margin-bottom: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; isolation: isolate; transition: border-color 0.3s ease, background 0.3s ease; } .exchange-mode-switch:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); } /* The travelling thumb. Width is one column exactly, so translateX(100%) parks it on the second one. */ .exchange-mode-switch::before { content: ''; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 8px; background: var(--color-primary); transition: transform 0.32s cubic-bezier(0.34, 0.11, 0.18, 1); } .exchange-mode-switch:has(.exchange-mode-switch__btn:nth-child(2).is-active)::before { transform: translateX(100%); } .exchange-mode-switch__btn { padding: 10px 16px; border: none; border-radius: 8px; background: none; color: rgba(255, 255, 255, 0.55); font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: 0.01em; cursor: pointer; transition: color 0.22s ease; -webkit-tap-highlight-color: transparent; } .exchange-mode-switch__btn:hover:not(.is-active) { color: rgba(255, 255, 255, 0.9); } /* Weight stays at 600 in both states on purpose: the columns are sized by their text, so bolding the active one would nudge the whole control's width on every toggle. The thumb and the dark label carry the state instead. */ .exchange-mode-switch__btn.is-active { color: #08130c; } .exchange-mode-switch__btn:focus-visible { outline: 2px solid rgba(0, 194, 111, 0.55); outline-offset: 2px; } /* No :has() means no sliding thumb — fall back to filling the active button directly, so the state is still readable. */ @supports not selector(:has(*)) { .exchange-mode-switch::before { display: none; } .exchange-mode-switch__btn.is-active { background: var(--color-primary); } } @media (prefers-reduced-motion: reduce) { .exchange-mode-switch::before { transition: none; } } .exchange-field { margin-bottom: 12px; } .exchange-field__label { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.45); margin-bottom: 5px; letter-spacing: 0.02em; } .exchange-field__row { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; background: rgba(255, 255, 255, 0.06); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .exchange-field__row:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); } .exchange-field__row:focus-within { background: rgba(255, 255, 255, 0.09); border-color: rgba(0, 194, 111, 0.5); } .exchange-field__input { flex: 1; min-width: 0; padding: 0; margin: 0; border: 0; font-size: 18px; font-weight: 600; line-height: 1.25; background: transparent; color: #fff; caret-color: #fff; -webkit-appearance: none; appearance: none; } .exchange-field__input::placeholder { color: rgba(255, 255, 255, 0.2); } .exchange-field__currency { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 10px; border-radius: 10px; transition: background 0.2s ease; position: relative; z-index: 2; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; } .exchange-field__currency:hover { background: rgba(255, 255, 255, 0.08); } .exchange-field__currency-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; } .exchange-field__currency-code { font-weight: 700; font-size: 15px; color: #fff; } .exchange-field__currency-name { font-size: 13px; color: rgba(255, 255, 255, 0.45); } .exchange-field__chevron { width: 16px; height: 16px; color: rgba(255, 255, 255, 0.4); } .exchange-field__error { margin: 6px 0 0; min-height: 16px; font-size: 12px; color: #ff6b6b; } .exchange-field__hint { margin: 6px 0 0; font-size: 11.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.45); } .exchange-field__hint--error { color: #ff6b6b; } .exchange-card__promo { margin-bottom: 16px; } .exchange-card__promo input { width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); font-size: 16px; line-height: 1.25; background: rgba(255, 255, 255, 0.06); color: #fff; caret-color: #fff; -webkit-appearance: none; appearance: none; transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease; } .exchange-card__promo input::placeholder { color: rgba(255, 255, 255, 0.25); } .exchange-card__promo input:focus { border-color: rgba(0, 194, 111, 0.4); background: rgba(255, 255, 255, 0.06); } .exchange-card__submit { position: relative; width: 100%; padding: 13px; background: var(--color-primary); color: #fff; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; border: none; margin-bottom: 10px; overflow: hidden; transition: all 0.3s ease; letter-spacing: 0.01em; } .exchange-card__submit:hover { transform: translateY(-1px); } .exchange-card__submit:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; } .exchange-card__submit::after { content: ''; position: absolute; top: 0; left: -50%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent); animation: shimmerSweep 3s ease-in-out infinite; pointer-events: none; } @keyframes shimmerSweep { 0% { left: -50%; } 100% { left: 150%; } } .exchange-card__meta { display: flex; flex-direction: column; align-items: center; gap: 7px; margin-top: 14px; padding: 0; text-align: center; } .exchange-card__hint { margin: 0; display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: 0 8px; font-size: 12px; line-height: 1.4; } .exchange-card__hint-label { font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); } .exchange-card__hint-amount { font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; background: linear-gradient(90deg, #ffffff 0%, var(--color-primary-light) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .exchange-card__hint-fee { position: relative; font-size: 10.5px; font-weight: 500; color: rgba(255, 255, 255, 0.34); padding-left: 9px; } .exchange-card__hint-fee::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); } .exchange-card__rate-line { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.92); line-height: 1.45; } .exchange-card__rate-line--error { color: #ff6b6b; text-shadow: none; } .exchange-card__rate-line--error::before { content: ''; flex-shrink: 0; width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2 1.8 21h20.4L12 3.2z' fill='%23f5a623'/%3E%3Crect x='11' y='9' width='2' height='6.2' rx='1' fill='%231e1e21'/%3E%3Crect x='11' y='16.6' width='2' height='2' rx='1' fill='%231e1e21'/%3E%3C/svg%3E") center / contain no-repeat; } .exchange-card__rate-line:empty { display: none; } .exchange-card__fee-line { display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.45); line-height: 1.4; } .exchange-card__fee-line:empty { display: none; } .exchange-card__fees { display: flex; align-items: center; gap: 4px; cursor: pointer; transition: color 0.2s ease; } .exchange-card__fees:hover { color: rgba(255, 255, 255, 0.6); } .exchange-card__fees img { filter: invert(1); opacity: 0.4; } /* ============ EXCHANGE — SWAP BUTTON ============ */ .exchange-swap { display: flex; align-items: center; justify-content: center; margin: 2px 0; position: relative; z-index: 5; } .exchange-swap__btn { width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; color: rgba(255, 255, 255, 0.35); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .exchange-swap__btn::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 194, 111, 0.25), transparent 70%); opacity: 0; transform: scale(0.5); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .exchange-swap__btn:hover { color: #fff; transform: scale(1.15); } .exchange-swap__btn:hover::before { opacity: 1; transform: scale(1.8); } .exchange-swap__btn:active { transform: scale(0.9); } .exchange-swap__btn.swapping { animation: swapFlip 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .exchange-swap__btn.swapping::before { animation: swapPulse 0.4s ease-out; } @keyframes swapFlip { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(90deg) scale(1.3); } 100% { transform: rotate(180deg) scale(1); } } @keyframes swapFlipFlat { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(90deg) scale(1.15); } 100% { transform: rotate(180deg) scale(1); } } @keyframes swapPulse { 0% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(2.5); } 100% { opacity: 0; transform: scale(3); } } /* ============ EXCHANGE — NETWORK BADGE ============ */ .exchange-field__currency-network { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.03em; background: rgba(255, 255, 255, 0.1); } /* Per-network colors, shared by the field badge and the currency-picker list. */ .exchange-field__currency-network[data-network="TRC20"], .currency-item__network[data-network="TRC20"] { background: #e0433a; color: #fff; } .exchange-field__currency-network[data-network="ERC20"], .currency-item__network[data-network="ERC20"] { background: #627eea; color: #fff; } .exchange-field__currency-network[data-network="BEP20"], .currency-item__network[data-network="BEP20"] { background: #f0b90b; color: #fff; } .exchange-field__currency-network[data-network="SOL"], .currency-item__network[data-network="SOL"] { background: #9945ff; color: #fff; } .exchange-field__currency-network[data-network="TON"], .currency-item__network[data-network="TON"] { background: #0098ea; color: #fff; } .exchange-field__currency-icon { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } /* Coins with a network badge have a 2-line text stack (code + network). Centering the icon against the whole stack sits it noticeably below "USDT" — pin it to the code line instead so icon and code line up. */ .exchange-field__currency--has-network .exchange-field__currency-icon { align-self: flex-start; margin-top: 2px; } /* ============ CURRENCY SELECTION MODAL (inside card) ============ */ .currency-modal { position: absolute; inset: 0; z-index: 1; background: transparent; border-radius: inherit; display: flex; align-items: center; justify-content: center; padding: 28px 20px; min-height: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s; } .currency-modal.open { z-index: 12; opacity: 1; visibility: visible; pointer-events: auto; } .currency-modal__panel { display: flex; flex-direction: column; width: 100%; max-width: 400px; /* Explicit height (not just max-height) so .currency-modal__list's flex: 1 1 0 has something definite to grow into — without it the panel shrinks to fit its header/search/tabs and the list collapses to ~0. */ height: 520px; max-height: 100%; min-height: 0; background: #1e1e21; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; overflow: hidden; transform: scale(0.96) translateY(6px); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .currency-modal.open .currency-modal__panel { transform: scale(1) translateY(0); } body.currency-modal-open { overflow: hidden; } body.currency-modal-open .hero { overflow: visible; } body.currency-modal-open .exchange-card { overflow: visible; z-index: 30; } @media (max-width: 768px) { body.currency-modal-open { touch-action: none; } body.currency-modal-open .hero { overflow: hidden; } body.currency-modal-open .currency-modal, body.currency-modal-open .currency-modal__list { touch-action: pan-y; } } .currency-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 0; flex-shrink: 0; } .currency-modal__title { font-size: 18px; font-weight: 700; color: #fff; } .currency-modal__close { width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; } .currency-modal__close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .currency-modal__search-wrap { position: relative; padding: 14px 20px; flex-shrink: 0; } .currency-modal__search-icon { position: absolute; left: 34px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.3); pointer-events: none; } .currency-modal__search { width: 100%; padding: 12px 14px 12px 38px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.06); color: #fff; font-size: 16px; line-height: 1.25; caret-color: #fff; -webkit-appearance: none; appearance: none; transition: border-color 0.2s ease, background 0.2s ease; } .currency-modal__search::placeholder { color: rgba(255, 255, 255, 0.3); } .currency-modal__search:focus { border-color: rgba(0, 194, 111, 0.5); background: rgba(255, 255, 255, 0.07); outline: none; } .currency-modal__list { flex: 1 1 0; height: 0; min-height: 0; overflow-x: hidden; overflow-y: scroll; padding: 10px 20px 12px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.1) transparent; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; } .currency-modal__list::-webkit-scrollbar { width: 4px; } .currency-modal__list::-webkit-scrollbar-track { background: transparent; } .currency-modal__list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; } /* ============ CURRENCY ITEM ============ */ .currency-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: none; background: transparent; border-radius: 14px; cursor: pointer; transition: background 0.2s ease; text-align: left; touch-action: pan-y; -webkit-tap-highlight-color: transparent; user-select: none; } .currency-item:hover { background: rgba(255, 255, 255, 0.06); } .currency-item--active { background: rgba(0, 194, 111, 0.12); } .currency-item--active:hover { background: rgba(0, 194, 111, 0.18); } .currency-item__icon { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .currency-item__info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .currency-item__symbol { font-size: 15px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 6px; } .currency-item__network { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.03em; background: rgba(255, 255, 255, 0.1); } .currency-item__name { font-size: 13px; color: rgba(255, 255, 255, 0.4); } .currency-item__check { width: 20px; height: 20px; color: var(--color-primary-light); flex-shrink: 0; } .currency-item__flag { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; flex-shrink: 0; } .currency-item__flag--img { border-radius: 50%; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.08); } .exchange-field__currency-icon--flag { border-radius: 50%; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.08); } .currency-item__bank { font-size: 13px; color: rgba(255, 255, 255, 0.4); } /* ============ SECTION HEADER (light default) ============ */ .section-header { text-align: center; margin-bottom: 48px; } .section-header__title { font-family: 'DM Sans', sans-serif; font-size: 32px; font-weight: 700; margin-bottom: 12px; color: var(--color-text); } .section-header__subtitle { font-size: 16px; color: var(--color-text-secondary); } /* ============ GET STARTED (light) ============ */ .get-started { position: relative; padding: 72px 0 96px; background: var(--color-bg); overflow: hidden; } .get-started__glow { display: none; } .get-started__header { position: relative; z-index: 1; text-align: center; margin-bottom: 64px; } /* ---- Fold-in title reveal on scroll (section h2's marked [data-fold-text]) ---- */ .fold-text-segment { display: inline-block; line-height: inherit; perspective: 600px; } .fold-text-piece { position: relative; display: inline-block; line-height: inherit; transform-origin: 50% 0%; transform: rotateX(-92deg); opacity: 0; transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease; will-change: transform, opacity; } .fold-text-piece::after { content: ''; position: absolute; inset: -0.08em -0.02em; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 45%, transparent 100%); opacity: 1; mix-blend-mode: multiply; transition: opacity 0.4s ease; } .fold-text--revealed .fold-text-piece { transform: rotateX(0deg); opacity: 1; } .fold-text--revealed .fold-text-piece::after { opacity: 0; } @media (prefers-reduced-motion: reduce) { .fold-text-piece { transform: none; opacity: 1; transition: none; } .fold-text-piece::after { display: none; } } .get-started__title { font-family: 'DM Sans', sans-serif; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); margin-bottom: 12px; } .get-started__lead { font-size: 16px; line-height: 1.65; color: var(--color-text-secondary); max-width: 480px; margin: 0 auto; } .flow { position: relative; z-index: 1; } /* Ascending staircase, not cards: each step is a bar that grows taller toward completion (step 4 tallest) — the height itself carries the "progress toward finishing the exchange" meaning. */ .flow__steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 28px; height: 320px; padding-top: 8px; margin: 8px 0 24px; } .flow-step { display: flex; flex-direction: column; height: 100%; justify-content: flex-end; } .flow-step__title { font-family: 'DM Sans', sans-serif; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; color: var(--color-text); margin: 0 0 14px; } .flow-step__bar { display: flex; align-items: center; justify-content: center; width: 100%; height: var(--h, 40%); border-radius: 16px 16px 6px 6px; background: linear-gradient(180deg, rgba(0, 194, 111, 0.95) 0%, rgba(0, 194, 111, 0.35) 100%); margin-bottom: 16px; transition: filter 0.2s ease; } .flow-step:hover .flow-step__bar { filter: brightness(1.15); } .flow-step__num { font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #08130c; } .flow-step__text { font-size: 13px; line-height: 1.5; color: var(--color-text-secondary); margin: 0; } @media (max-width: 900px) { .flow__steps { grid-template-columns: repeat(2, 1fr); height: auto; row-gap: 40px; } .flow-step { height: 200px; } } /* ============ NUMBERS (rampnetwork.com/swap-crypto layout) ============ */ .ramp-numbers { padding: 96px 0 64px; background: var(--color-bg); } .ramp-numbers__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 32px; } .ramp-numbers__item { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .ramp-numbers__num { font-family: 'DM Sans', sans-serif; font-size: clamp(40px, 5.5vw, 72px); font-weight: 700; letter-spacing: -0.02em; line-height: 0.9; color: #fff; } .ramp-numbers__lbl { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--color-text-secondary); max-width: 220px; } /* ============ COMMUNITY CARD (rampnetwork.com/swap-crypto layout) ============ */ .ramp-customers { padding: 0 0 64px; background: var(--color-bg); } .ramp-customers__card { position: relative; overflow: hidden; border-radius: 40px; background: var(--color-bg-light); border: 1px solid var(--color-border); padding: 56px 32px; } .ramp-customers__inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 32px; max-width: 640px; } .ramp-customers__title { font-family: 'DM Sans', sans-serif; font-size: clamp(28px, 4.2vw, 48px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: #fff; margin: 0; } .ramp-customers__cta { display: flex; flex-direction: column; gap: 24px; } .ramp-customers__badges { display: flex; flex-wrap: wrap; gap: 20px; } .ramp-customers__badge { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.8); } .ramp-customers__badge-icon { height: 18px; width: auto; } .ramp-customers__soon { margin: 0; max-width: 420px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.55); } .ramp-customers__buttons { display: flex; flex-wrap: wrap; gap: 14px; } .ramp-customers__btn { display: inline-flex; align-items: center; justify-content: center; padding: 15px 30px; border-radius: 62px; font-size: 15px; font-weight: 600; text-decoration: none; transition: transform 0.2s ease; } .ramp-customers__btn:hover { transform: translateY(-2px); } .ramp-customers__btn--primary { background: var(--color-primary); color: #08130c; box-shadow: 2px 2px rgba(0, 0, 0, 0.35); } .ramp-customers__btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.18); } .ramp-customers__btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 8px; flex-shrink: 0; } .ramp-customers__btn-icon svg, .ramp-customers__btn-icon img { width: 100%; height: 100%; } /* No real app yet — shown as a disabled "coming soon" preview, not a working link */ .ramp-customers__btn--disabled { cursor: default; pointer-events: none; user-select: none; filter: blur(0.6px); opacity: 0.55; } .ramp-customers__btn--disabled:hover { transform: none; } .ramp-customers__ilu { position: absolute; z-index: 0; pointer-events: none; opacity: 0.9; } .ramp-customers__ilu--top { top: -40px; right: 60px; width: 200px; } .ramp-customers__ilu--bottom { bottom: -30px; right: 200px; width: 160px; display: none; } @media (min-width: 900px) { .ramp-customers__ilu--bottom { display: block; } } /* ============ POPULAR PAIRS ============ */ .pairs { position: relative; padding: 0 0 96px; background: var(--color-bg); } .pairs__header { text-align: center; margin-bottom: 40px; } .pairs__title { font-family: 'DM Sans', sans-serif; font-size: clamp(32px, 4vw, 48px); font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); } .pairs__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .pairs__col-title { font-size: 18px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: 20px; text-align: center; } .pairs__list { display: flex; flex-direction: column; } .pairs__row { display: flex; align-items: center; gap: 16px; padding: 20px 4px; text-decoration: none; transform: scale(1); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } .pairs__row:hover { transform: scale(1.06); position: relative; z-index: 1; } .pairs__num { display: none; } .pairs__pair { flex: 1; display: flex; align-items: center; justify-content: center; gap: 16px; min-width: 0; } .pairs__coin { display: flex; align-items: center; gap: 10px; min-width: 0; } .pairs__coin-ic { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .pairs__coin-sym { font-size: 18px; font-weight: 700; color: #fff; white-space: nowrap; } .pairs__coin-name { display: none; font-size: 13px; font-weight: 500; color: var(--color-text-secondary); white-space: nowrap; } @media (min-width: 640px) { .pairs__coin-name { display: inline; } } .pairs__arrow { flex-shrink: 0; color: rgba(255, 255, 255, 0.3); font-size: 18px; } .pairs__chevron { flex-shrink: 0; color: rgba(255, 255, 255, 0.3); } .get-started__footer { text-align: center; } .get-started__footer-text { font-size: 15px; color: var(--color-text-secondary); margin-bottom: 20px; max-width: 520px; margin-left: auto; margin-right: auto; } /* ============ SENTIMENT (light) ============ */ /* ============ CRYPTO STRIP (ticker + marquee) ============ */ .crypto-strip { background: none; padding: 10px 0; overflow: hidden; } /* --- Live Ticker --- */ .crypto-ticker { position: relative; margin-bottom: 0; } .crypto-ticker::before, .crypto-ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .crypto-ticker::before { left: 0; background: linear-gradient(to right, #1B1B1E, transparent); } .crypto-ticker::after { right: 0; background: linear-gradient(to left, #1B1B1E, transparent); } .crypto-ticker__track { display: flex; width: max-content; animation: tickerScroll 35s linear infinite; } .crypto-ticker__slide { display: flex; gap: 40px; padding-right: 40px; flex-shrink: 0; } @keyframes tickerScroll { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } } .ticker-coin { display: flex; align-items: center; gap: 8px; white-space: nowrap; cursor: default; } .ticker-coin__icon { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; } .ticker-coin__symbol { font-size: 14px; font-weight: 700; line-height: 1; color: #fff; } .ticker-coin__price { display: inline-block; min-width: 84px; text-align: right; font-size: 14px; font-weight: 500; line-height: 1; color: rgba(255, 255, 255, 0.7); } .ticker-coin__change { display: inline-block; min-width: 52px; font-size: 13px; font-weight: 600; line-height: 1; padding: 0; } .ticker-coin__change--up { color: #22c55e; } .ticker-coin__change--down { color: #ef4444; } /* --- Chain Marquee --- */ .chain-marquee { position: relative; } .chain-marquee::before, .chain-marquee::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .chain-marquee::before { left: 0; background: linear-gradient(to right, #1e1e21, transparent); } .chain-marquee::after { right: 0; background: linear-gradient(to left, #1e1e21, transparent); } .chain-marquee__track { display: flex; width: max-content; animation: marqueeScroll 28s linear infinite reverse; } .chain-marquee__slide { display: flex; gap: 48px; padding-right: 48px; flex-shrink: 0; } @media (min-width: 769px) { .chain-marquee__slide { gap: 40px; padding-right: 40px; } } @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .chain-logo { display: flex; align-items: center; gap: 8px; opacity: 0.5; transition: opacity 0.3s ease; cursor: default; } .chain-logo:hover { opacity: 1; } .chain-logo img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .chain-logo span { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.5); white-space: nowrap; } /* ============ STATS — 3D stage (no blocks) ============ */ .stats { padding: 0; background: var(--color-dark-bg); color: #fff; overflow: hidden; } .stats-stage { position: relative; padding: 80px 0 100px; --sx: 50%; --sy: 50%; --rx: 0deg; --ry: 0deg; } .stats-stage__aurora { display: none; } .stats-stage__orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35; will-change: transform; } .stats-stage__orb--1 { width: 360px; height: 360px; background: radial-gradient(circle, rgba(0, 194, 111, 0.7), transparent 70%); top: -80px; left: 15%; animation: statsOrbDrift1 14s ease-in-out infinite alternate; } .stats-stage__orb--2 { width: 280px; height: 280px; background: radial-gradient(circle, rgba(0, 152, 224, 0.55), transparent 70%); bottom: -60px; right: 10%; animation: statsOrbDrift2 18s ease-in-out infinite alternate; } .stats-stage__orb--3 { width: 200px; height: 200px; background: radial-gradient(circle, rgba(34, 211, 238, 0.35), transparent 70%); top: 40%; left: 50%; animation: statsOrbDrift3 16s ease-in-out infinite alternate; } @keyframes statsOrbDrift1 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(30px, 40px) scale(1.1); } } @keyframes statsOrbDrift2 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-40px, -30px) scale(1.08); } } @keyframes statsOrbDrift3 { 0% { transform: translate(-50%, 0) scale(1); } 100% { transform: translate(-50%, -25px) scale(0.92); } } .stats-stage__grid-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.35; background: linear-gradient(rgba(0, 194, 111, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 194, 111, 0.08) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 70% 60% at var(--sx) var(--sy), #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at var(--sx) var(--sy), #000 0%, transparent 75%); } .stats-stage__inner { position: relative; z-index: 1; } .stats-stage__header { text-align: center; margin-bottom: 48px; } .stats-stage__title { font-family: 'DM Sans', sans-serif; font-size: 32px; font-weight: 700; color: #fff; margin-bottom: 12px; letter-spacing: -0.02em; } .stats-stage__subtitle, .stats-stage__lead { font-size: 17px; line-height: 1.65; color: rgba(255, 255, 255, 0.42); max-width: 480px; margin: 0 auto; font-weight: 400; } .stats-stage__lead em { font-style: normal; font-weight: 600; color: transparent; background: linear-gradient(135deg, #6fe3ae, #0098e0); -webkit-background-clip: text; background-clip: text; } /* ── Bento grid ── */ .stats-bento-viewport { width: 100%; } .stats-bento { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: repeat(2, minmax(200px, 1fr)); gap: 14px; min-height: 460px; } .stats-bento__card { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; border-radius: 22px; overflow: hidden; min-height: 240px; opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease; transition-delay: calc(0.06s + var(--i) * 0.1s); } .stats-bento__card:hover { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35); } .stats-bento__card--hero:hover { box-shadow: 0 20px 56px rgba(0, 0, 0, 0.35); } .stats-bento__card--hero { grid-row: 1 / 3; grid-column: 1; min-height: 100%; } .stats-bento__tilt { position: relative; height: 100%; min-height: inherit; } .stats-bento__card:not(.stats-bento__card--hero) { background: #14141e; border: 1px solid rgba(255, 255, 255, 0.06); } .stats-bento__card--hero .stats-bento__tilt { background: linear-gradient(145deg, #3d2060 0%, #6b2d8a 38%, #0098e0 68%, #c026d3 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 22px; overflow: hidden; } .stats-bento__card:not(.stats-bento__card--hero) .stats-bento__tilt { overflow: hidden; } /* Digital/crypto ambient FX on small bento cards */ .stats-bento__fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .stats-bento__fx::before { content: ''; position: absolute; inset: -40%; background: radial-gradient(circle at 30% 40%, rgba(0, 194, 111, 0.14) 0%, transparent 42%), radial-gradient(circle at 75% 65%, rgba(0, 152, 224, 0.1) 0%, transparent 40%), radial-gradient(circle at 55% 15%, rgba(34, 211, 238, 0.06) 0%, transparent 35%); animation: statsBentoAurora 14s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -2.8s); } .stats-bento__fx i { position: absolute; display: block; width: 2px; height: 2px; border-radius: 50%; background: rgba(200, 210, 255, 0.75); opacity: 0; animation: statsBentoParticle 7s ease-in-out infinite; } .stats-bento__fx i:nth-child(1) { left: 12%; top: 18%; animation-delay: 0s; } .stats-bento__fx i:nth-child(2) { left: 78%; top: 22%; animation-delay: -1.2s; width: 3px; height: 3px; } .stats-bento__fx i:nth-child(3) { left: 45%; top: 12%; animation-delay: -2.5s; } .stats-bento__fx i:nth-child(4) { left: 88%; top: 55%; animation-delay: -0.8s; } .stats-bento__fx i:nth-child(5) { left: 22%; top: 48%; animation-delay: -3.8s; width: 1.5px; height: 1.5px; } .stats-bento__fx i:nth-child(6) { left: 62%; top: 38%; animation-delay: -5s; } @keyframes statsBentoAurora { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(6%, -5%) scale(1.06); } } @keyframes statsBentoParticle { 0%, 100% { opacity: 0; transform: translateY(0); } 20% { opacity: 0.85; } 50% { opacity: 0.5; transform: translateY(-10px); } 80% { opacity: 0; } } .stats-bento__spot { position: absolute; inset: 0; background: radial-gradient(circle 180px at var(--mx) var(--my), rgba(255, 255, 255, 0.1), transparent 65%); pointer-events: none; z-index: 3; opacity: 0; transition: opacity 0.35s ease; } .stats-bento__card:hover .stats-bento__spot { opacity: 1; } .stats-bento__hero-glow { position: absolute; inset: 0; background: radial-gradient(circle at 75% 25%, rgba(255, 255, 255, 0.18) 0%, transparent 45%), radial-gradient(circle at 20% 80%, rgba(0, 194, 111, 0.35) 0%, transparent 50%); pointer-events: none; } .stats-bento__hero-visual { position: absolute; top: 12%; right: 8%; width: 52%; height: 55%; pointer-events: none; } .stats-bento__wallet-ring { position: absolute; inset: 10% 5%; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; animation: bentoRingSpin 18s linear infinite; } .stats-bento__wallet-core { position: absolute; top: 50%; left: 50%; width: 56%; height: 56%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(0, 152, 224, 0.25) 50%, transparent 72%); filter: blur(2px); animation: bentoCorePulse 4s ease-in-out infinite; } .stats-bento__hero-coin { position: absolute; border-radius: 50%; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35)); } .stats-bento__hero-coin--1 { top: 8%; right: 18%; animation: bentoCoinFloat 5s ease-in-out infinite; } .stats-bento__hero-coin--2 { top: 38%; right: 4%; animation: bentoCoinFloat 6s ease-in-out infinite -1.5s; } .stats-bento__hero-coin--3 { bottom: 12%; right: 28%; animation: bentoCoinFloat 5.5s ease-in-out infinite -3s; } .stats-bento__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 6px; } .stats-bento__icon { position: absolute; top: 28px; left: 26px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85); } .stats-bento__icon svg { width: 30px; height: 30px; position: relative; z-index: 1; } .stats-bento__icon-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.07); pointer-events: none; } .stats-bento__icon-ring--1 { inset: -18px; } .stats-bento__icon-ring--2 { inset: -36px; border-color: rgba(255, 255, 255, 0.04); } /* Fill layout: icon centered in the free space above, body pinned to the bottom via margin-top:auto — used on the numeric bento cards so they never look empty regardless of exact card height. */ .stats-bento__tilt--fill { display: flex; flex-direction: column; align-items: center; padding-top: 30px; } .stats-bento__tilt--fill .stats-bento__body { position: static; width: 100%; margin-top: auto; } .stats-bento__tilt--fill .stats-bento__icon { position: relative; top: auto; left: auto; width: 96px; height: 96px; border-radius: 26px; margin-bottom: 8px; } .stats-bento__tilt--fill .stats-bento__icon svg { width: 40px; height: 40px; } .stats-bento__num { font-family: 'DM Sans', sans-serif; font-size: clamp(36px, 4vw, 52px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: #fff; } .stats-bento__num--xl { font-size: clamp(52px, 6vw, 80px); } .stats-bento__num--hero-title { font-size: clamp(28px, 3.8vw, 38px); line-height: 1.15; letter-spacing: -0.02em; } .stats-bento__num--text { font-size: clamp(36px, 5vw, 52px); letter-spacing: -0.02em; } .stats-bento__num--wide { font-size: clamp(32px, 4.5vw, 48px); letter-spacing: -0.02em; } .stats-bento__num--line { font-size: clamp(24px, 2.9vw, 34px); letter-spacing: -0.03em; white-space: nowrap; } .stats-bento__num--symbol { font-size: clamp(44px, 5vw, 64px); font-weight: 600; } .stats-bento__card--hero .stats-bento__lbl { color: rgba(255, 255, 255, 0.72); max-width: 280px; font-size: 15px; line-height: 1.45; } .stats-bento__lbl { font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, 0.42); } /* Floating visuals — coins */ .stats-bento__floats { position: absolute; inset: 0; pointer-events: none; } /* Coin mosaic — all unique assets from exchange modal */ .stats-bento__coin-mosaic { position: absolute; top: 12px; left: 16px; right: 16px; z-index: 1; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px 6px; justify-items: center; align-content: start; } .stats-bento__coin-mosaic img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35)); transition: transform 0.2s ease; } .stats-bento__card:hover .stats-bento__coin-mosaic img { transform: scale(1.06); } /* Network row — all chains in one line */ .stats-bento__net-row { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 1; display: flex; justify-content: center; align-items: center; gap: clamp(8px, 2.5vw, 14px); } .stats-bento__net-row img { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35)); transition: transform 0.2s ease; } .stats-bento__card:hover .stats-bento__net-row img { transform: scale(1.06); } /* Orbit graphic */ .stats-bento__orbit { position: absolute; top: 8%; left: 50%; width: 78%; transform: translateX(-50%); opacity: 0.85; animation: bentoOrbitDrift 8s ease-in-out infinite alternate; } @keyframes bentoCoinFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes bentoRingSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes bentoCorePulse { 0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } } @keyframes bentoOrbitDrift { 0% { transform: translateX(-50%) rotate(-3deg); } 100% { transform: translateX(-50%) rotate(3deg); } } .stats-stage--visible .stats-bento__card { opacity: 1; transform: translateY(0) scale(1); } @media (prefers-reduced-motion: reduce) { .stats-stage__orb, .stats-bento__hero-coin, .stats-bento__orbit, .stats-bento__wallet-ring, .stats-bento__wallet-core, .stats-bento__fx::before, .stats-bento__fx::after, .stats-bento__fx i { animation: none; } .stats-bento__tilt { transition: none; } .stats-bento__card { opacity: 1; transform: none; transition: none; } html.js .rates-charts__wrap:not(.rates-charts--visible) .rates-book { opacity: 1; transform: none; } .rates-book__track { transition: none; } .wallets__stage--visible .wallets__showcase, .wallets__showcase { opacity: 1; transform: none; transition: none; } .wallets__tilt { will-change: auto; } .faq-mesh, .faq-sparkles i { animation: none; } .faq-stage--visible .faq-desk, .faq-desk { opacity: 1; transform: none; transition: none; } } /* ============ FEATURES (light) ============ */ .features { padding: 80px 0; background: var(--color-bg-warm); } .features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .feature-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px 28px; transition: all 0.3s ease; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); } .feature-card:hover { box-shadow: var(--shadow-elevated); transform: translateY(-3px); border-color: rgba(0, 194, 111, 0.2); } .feature-card__icon { width: 48px; height: 48px; margin-bottom: 20px; } .feature-card__title { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--color-text); } .feature-card__text { font-size: 14px; color: var(--color-text-secondary); line-height: 1.6; } /* ============ RATES CHARTS — book carousel ============ */ .rates-charts { background: var(--color-bg); } .rates-charts__wrap { padding: 64px 0 72px; } .rates-charts--period-loading .rates-book { opacity: 0.55; transition: opacity 0.15s ease; pointer-events: none; } .rates-charts__period-btn:disabled { opacity: 0.55; cursor: wait; } .rates-charts__head { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; } .rates-charts__head-text { text-align: center; } .rates-charts__title { font-family: 'DM Sans', sans-serif; font-size: clamp(24px, 3vw, 30px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--color-text); } .rates-charts__period { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(0, 194, 111, 0.08); } .rates-charts__period-btn { border: none; background: transparent; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); padding: 7px 14px; border-radius: 999px; cursor: pointer; transition: color 0.2s ease, background 0.2s ease; } .rates-charts__period-btn.is-active { background: #fff; color: var(--color-primary); } .rates-carousel { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-rows: auto auto; gap: 8px 8px; max-width: 820px; margin: 0 auto; } .rates-book { grid-column: 2; grid-row: 1; min-width: 0; outline: none; touch-action: pan-y; } .rates-book__foot { display: contents; } .rates-book__nav--prev { grid-column: 1; grid-row: 1; align-self: center; justify-self: center; } .rates-book__nav--next { grid-column: 3; grid-row: 1; align-self: center; justify-self: center; } .rates-book__dots { grid-column: 1 / -1; grid-row: 2; justify-self: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 420px; margin-top: 12px; } .rates-book__viewport { overflow: hidden; min-width: 0; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; contain: layout style paint; } .rates-book__track { display: flex; width: 100%; transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1); } .rates-book__track--instant, .rates-book__track--dragging { transition: none !important; } .rates-book__track--dragging { cursor: grabbing; } .rates-slide { flex: 0 0 100%; min-width: 100%; padding: 0 4px; box-sizing: border-box; transform: translateZ(0); backface-visibility: hidden; } .rates-slide__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .rates-slide__coin { display: flex; align-items: center; gap: 12px; min-width: 0; } .rates-slide__icon { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .rates-slide__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .rates-slide__sym { font-family: 'DM Sans', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--color-text); } .rates-slide__name { font-size: 13px; line-height: 1.3; color: var(--color-text-secondary); } .rates-slide__quote { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 8px 10px; flex-shrink: 0; } .rates-slide__val { font-family: 'DM Sans', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); font-variant-numeric: tabular-nums; } .rates-slide__chg { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; } .rates-slide__chg--up { color: #16a34a; } .rates-slide__chg--down { color: #dc2626; } .rates-slide__chart { position: relative; height: clamp(160px, 26vw, 208px); border-radius: 14px; background: linear-gradient(168deg, #13151f 0%, #0c0e16 52%, #10121c 100%); border: 1px solid rgba(255, 255, 255, 0.06); overflow: hidden; } .rates-slide__svg { display: block; width: 100%; height: 100%; } .rates-chart__grid { stroke: rgba(255, 255, 255, 0.07); stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; stroke-width: 1; } .rates-chart__axis { fill: rgba(255, 255, 255, 0.34); font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 400; font-variant-numeric: tabular-nums; } .rates-chart__line { vector-effect: non-scaling-stroke; } .rates-chart__dot { vector-effect: non-scaling-stroke; } .rates-book__nav { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none; border-radius: 50%; background: transparent; color: var(--color-text-secondary); cursor: pointer; transition: color 0.2s ease, background 0.2s ease, opacity 0.2s ease; } .rates-book__nav:hover:not(:disabled) { color: var(--color-primary); background: rgba(0, 194, 111, 0.08); } .rates-book__nav:disabled { opacity: 0.25; cursor: default; } .rates-book__dot { width: 6px; height: 6px; padding: 0; border: none; border-radius: 50%; background: rgba(0, 194, 111, 0.2); cursor: pointer; transition: transform 0.2s ease, background 0.2s ease; } .rates-book__dot.is-active { background: var(--color-primary); transform: scale(1.35); } .rates-slide--skel .rates-slide__skel { display: block; background: linear-gradient(90deg, rgba(0, 194, 111, 0.07) 0%, rgba(0, 194, 111, 0.13) 50%, rgba(0, 194, 111, 0.07) 100%); background-size: 200% 100%; animation: ratesSkel 1.4s ease-in-out infinite; border-radius: 6px; height: 16px; width: 100px; } .rates-slide__skel--sm { width: 64px; height: 12px; margin-top: 6px; } .rates-slide__skel--icon { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; } .rates-slide__skel--chart { width: 100%; height: 100%; min-height: 140px; border-radius: 8px; } @keyframes ratesSkel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .rates-charts__error { padding: 32px 0; text-align: center; font-size: 14px; color: var(--color-text-secondary); } /* ============ WALLETS — 3D ring ============ */ .wallets { background: var(--color-bg); } .wallets__stage { position: relative; padding: 72px 0 88px; overflow: hidden; } .wallets__plane { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 55% at 50% 38%, rgba(0, 194, 111, 0.04) 0%, transparent 68%); } .wallets__inner { position: relative; z-index: 1; } .wallets__header { text-align: center; margin-bottom: 40px; } .wallets__title { font-family: 'DM Sans', sans-serif; font-size: clamp(26px, 3.2vw, 32px); font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); margin-bottom: 10px; } .wallets__lead { font-size: 15px; line-height: 1.6; color: var(--color-text-secondary); max-width: 440px; margin: 0 auto; } .wallets__showcase { max-width: 640px; margin: 0 auto; opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); touch-action: pan-y; } .wallets__stage--visible .wallets__showcase { opacity: 1; transform: none; } html:not(.js) .wallets__showcase { opacity: 1; transform: none; } .wallets__scene { position: relative; height: clamp(200px, 32vw, 260px); perspective: 960px; perspective-origin: 50% 46%; } .wallets__tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(10deg) rotateY(0deg); will-change: transform; } .wallets__ring { --spin: 0deg; --radius: 200px; --step: 60deg; position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: translate(-50%, -54%) rotateY(var(--spin)); } .wallet-ring__item { position: absolute; top: 0; left: 0; width: 76px; height: 76px; margin: -38px 0 0 -38px; transform-style: preserve-3d; transform: rotateY(calc(var(--i) * var(--step))) translateZ(var(--radius)); text-decoration: none; -webkit-tap-highlight-color: transparent; } .wallet-ring__face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 20px; background: linear-gradient(160deg, #2a2a2e 0%, #1c1c1f 100%); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06); transform: rotateY(calc((var(--i) * -1 * var(--step)) - var(--spin))); transition: opacity 0.35s ease, filter 0.35s ease, box-shadow 0.3s ease; backface-visibility: hidden; } .wallet-ring__face img { width: 38px; height: 38px; object-fit: contain; } .wallet-ring__item:not(.is-active) .wallet-ring__face { opacity: 0.42; filter: grayscale(0.55) brightness(0.96); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); } .wallet-ring__item.is-active .wallet-ring__face { opacity: 1; filter: none; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1); transform: rotateY(calc((var(--i) * -1 * var(--step)) - var(--spin))) translateZ(24px) scale(1.05); } .wallets__shadow { position: absolute; left: 50%; bottom: 8%; width: min(320px, 60%); height: 28px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(0, 0, 0, 0.4) 0%, transparent 72%); pointer-events: none; filter: blur(4px); } .wallets__info { text-align: center; margin-top: 8px; min-height: 96px; } .wallets__info-name { font-family: 'DM Sans', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: #fff; transition: opacity 0.25s ease; } .wallets__info-desc { margin-top: 6px; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.5); max-width: 420px; margin-left: auto; margin-right: auto; transition: opacity 0.25s ease; } .wallets__info.is-changing .wallets__info-name, .wallets__info.is-changing .wallets__info-desc { opacity: 0.35; } .wallets__info-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.65); border-bottom: 1px solid rgba(255, 255, 255, 0.22); padding-bottom: 1px; transition: color 0.2s ease, border-color 0.2s ease; } .wallets__info-link:hover { color: #fff; border-color: rgba(255, 255, 255, 0.45); } .wallets__controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; } .wallets__ctrl { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.6); cursor: pointer; transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease; } .wallets__ctrl:hover { color: #fff; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); } .wallets__ticks { display: flex; align-items: center; gap: 8px; } .wallets__tick { width: 6px; height: 6px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.18); cursor: pointer; transition: transform 0.2s ease, background 0.2s ease; } .wallets__tick.is-active { background: #fff; transform: scale(1.35); } /* ============ FAQ (rampnetwork.com/swap-crypto faq_wrapper layout) ============ */ .faq { background: var(--color-bg); padding: 0 0 96px; } .faq__wrapper { display: flex; flex-direction: column; gap: 32px; padding-top: 40px; } .faq__title-wrapper { display: flex; flex-direction: column; gap: 12px; } .faq__title { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: clamp(32px, 4.6vw, 58px); line-height: 0.85; letter-spacing: -0.02em; text-transform: uppercase; color: var(--color-text-primary); margin: 0; } .faq__subtitle { font-size: 19px; line-height: 1.4; color: var(--color-text-secondary); } .faq__items { display: flex; flex-direction: column; } .faq__item { border-bottom: 1px solid var(--color-border); } .faq__item:first-child { border-top: 1px solid var(--color-border); } .faq__header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; } .faq__question { flex: 1; margin: 0; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--color-text-primary); } .faq__icon { position: relative; width: 24px; height: 24px; min-width: 24px; } .faq__icon-v, .faq__icon-h { position: absolute; background: var(--color-primary); transition: transform 0.2s ease; } .faq__icon-v { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); } .faq__icon-h { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); } .faq__item[data-faq-status="active"] .faq__icon-v { transform: translateX(-50%) rotate(90deg); opacity: 0; } .faq__bottom { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.3s ease; } .faq__item[data-faq-status="active"] .faq__bottom { grid-template-rows: 1fr; } .faq__wrap { overflow: hidden; } .faq__body { padding-bottom: 24px; font-size: 15px; line-height: 1.6; color: var(--color-text-secondary); max-width: 640px; } @media (min-width: 900px) { .faq__wrapper { display: grid; grid-template-columns: 0.5fr 1fr; gap: 28px; padding-top: 64px; } .faq__title-wrapper { padding-top: 8px; } } /* ============ FOOTER (card, staggered-fade aurora background) ============ */ .footer { background: var(--color-dark); color: var(--color-text-light); padding: 32px 0 40px; } .footer__card { position: relative; overflow: hidden; border-radius: 32px; background: var(--color-bg-light); border: 1px solid var(--color-border); padding: 96px 32px 32px; } .footer__card-brand { position: absolute; top: 32px; left: 32px; z-index: 1; font-family: 'DM Sans', sans-serif; font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; background: none; -webkit-text-fill-color: var(--color-primary-light); color: var(--color-primary-light); pointer-events: none; user-select: none; } @media (max-width: 768px) { .footer__card { padding-top: 40px; } .footer__card-brand { position: static; display: block; font-size: 28px; margin-bottom: 24px; text-align: center; } } .footer__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 28px; align-items: start; margin-bottom: 48px; } .footer__grid > .footer__group { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; } .footer__grid > .footer__group:nth-child(1) { transition-delay: 0ms; } .footer__grid > .footer__group:nth-child(2) { transition-delay: 90ms; } .footer__grid > .footer__group:nth-child(3) { transition-delay: 180ms; } .footer__grid > .footer__group:nth-child(4) { transition-delay: 270ms; } .footer__grid.is-revealed > .footer__group { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .footer__grid > .footer__group { opacity: 1; transform: none; transition: none; } } .footer__company, .footer__legal { position: relative; z-index: 1; } .footer__group { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } .footer__group-title { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 14px; letter-spacing: -0.02em; } .footer__group-links { display: flex; flex-direction: column; gap: 2px; width: 100%; } .footer__group-links--pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 2px; } .footer__link { display: block; padding: 5px 0; font-size: 14px; letter-spacing: -0.01em; line-height: 1.45; color: rgba(255, 255, 255, 0.62); transition: color var(--transition); } .footer__link--pair { font-size: 13px; white-space: nowrap; } @media (max-width: 1100px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } .footer__group--pairs { grid-column: 1 / -1; } .footer__group-links--pairs { max-width: 420px; } } .footer__link:hover { color: #fff; } .footer__apps { display: flex; gap: 16px; margin-bottom: 48px; } .footer__app-badge { height: 40px; border-radius: var(--radius-sm); transition: opacity var(--transition); } .footer__app-badge:hover { opacity: 0.8; } .footer__company { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 32px; margin-bottom: 32px; } .footer__offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; margin-bottom: 24px; } .footer__office-title { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 8px; } .footer__office-info { font-size: 13px; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.5); line-height: 1.5; } .footer__socials { display: flex; gap: 16px; margin-bottom: 32px; } .footer__social { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.6); font-size: 13px; letter-spacing: -0.01em; transition: color var(--transition); } .footer__social:hover { color: #fff; } .footer__social-icon { width: 24px; height: 24px; opacity: 0.6; } .footer__legal { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 24px; } .footer__copyright { font-size: 13px; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.5); margin-bottom: 12px; } .footer__disclaimer { font-size: 12px; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.38); line-height: 1.6; max-width: 800px; margin-bottom: 0; } /* Legacy support-chat (removed) — strip phantom bottom space */ html.support-chat-open, body.support-chat-open { position: static !important; top: auto !important; width: auto !important; height: auto !important; padding-bottom: 0 !important; margin-bottom: 0 !important; overflow-x: hidden !important; overflow-y: visible !important; } .support-chat, [data-support-chat], [data-support-widget] { display: none !important; height: 0 !important; max-height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; } /* ============ BACK TO TOP (light context) ============ */ .back-to-top { position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: var(--color-bg); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); border: 1px solid var(--color-border); color: var(--color-text); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; z-index: 90; } .back-to-top.visible { opacity: 1; transform: translateY(0); } .back-to-top:hover { box-shadow: var(--shadow-elevated); border-color: var(--color-primary); color: var(--color-primary); } /* ============ LEGAL PAGES ============ */ .legal-page { position: relative; padding: 48px 0 72px; background: var(--color-bg); min-height: calc(100vh - 72px); overflow: hidden; } .legal-page__mesh { display: none; } .legal-page__inner { position: relative; z-index: 1; } .legal-page__back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; font-size: 13px; font-weight: 500; color: var(--color-text-secondary); text-decoration: none; transition: color 0.2s ease; } .legal-page__back:hover { color: var(--color-primary); } .legal-page__title { font-family: 'DM Sans', sans-serif; font-size: clamp(28px, 4vw, 36px); font-weight: 700; letter-spacing: -0.03em; color: var(--color-text); margin-bottom: 28px; } .legal-page__content { font-size: 15px; line-height: 1.75; color: var(--color-text-secondary); } .legal-page__loading { color: var(--color-text-secondary); opacity: 0.7; } .legal-page__content h2 { font-family: 'DM Sans', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text); margin: 28px 0 10px; } .legal-page__content h2:first-child { margin-top: 0; } .legal-page__content h3 { font-size: 16px; font-weight: 600; color: var(--color-text); margin: 20px 0 8px; } .legal-page__content p { margin: 0 0 14px; } .legal-page__content ul, .legal-page__content ol { margin: 0 0 14px; padding-left: 22px; } .legal-page__content li { margin-bottom: 6px; } .legal-page__content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; } .legal-page__content blockquote { margin: 16px 0; padding: 12px 16px; border-left: 3px solid rgba(0, 194, 111, 0.35); background: rgba(0, 194, 111, 0.05); border-radius: 0 10px 10px 0; color: var(--color-text); } .legal-page__content strong { color: var(--color-text); font-weight: 600; } /* ============ RESPONSIVE ============ */ @media (max-width: 1024px) { .hero__content { grid-template-columns: 1fr; gap: 32px; } .hero__title-block h1 { font-size: 36px; } .flow__steps { grid-template-columns: 1fr; gap: 36px; } .pairs__cols { grid-template-columns: 1fr; gap: 28px; } .flow-step__title, .flow-step__text { text-align: left; max-width: none; margin: 0; } .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; } .footer__group--pairs { grid-column: 1 / -1; } .footer__group-links--pairs { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); } .features__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .container { padding: 0 16px; } /* Хедер на телефоне: фон как у сайта в целом (--color-bg, #1B1B1E), без линии снизу. Не --color-bg-light (#232326, фон только hero-блока) — тот совпадает лишь на главной, а на /order, /terms и статьях под хедером сразу общий фон сайта, и хедер снова читался отдельной серой полосой. */ .header { background: var(--color-bg); border-bottom: none; } .header__row { padding: 16px 0; gap: 16px; min-height: 56px; } .header__logo { gap: 12px; } .header__nav { gap: 0; } .header__nav-link:not(.header__nav-link--support) { display: none; } .header__nav-link--support { font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.72); } .header__cluster { gap: 20px; } .lang-switch { font-size: 16px; font-weight: 600; } .lang-switch__sep { padding: 0 7px; } .header__cluster .header__lang { display: block; } .mobile-menu__lang { display: none; } .header__burger { display: none; } .header__logo-name { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; } /* Crypto strip — compact */ .crypto-strip { padding: 8px 0; } .crypto-ticker { margin-bottom: 8px; } .crypto-ticker::before, .crypto-ticker::after { width: 40px; } .crypto-ticker__slide { gap: 24px; padding-right: 24px; } .ticker-coin__icon { width: 20px; height: 20px; } .ticker-coin__symbol { font-size: 12px; } .ticker-coin__price { font-size: 12px; } .ticker-coin__change { font-size: 11px; padding: 0; } .chain-marquee::before, .chain-marquee::after { width: 40px; } .chain-marquee__slide { gap: 28px; padding-right: 28px; } .chain-logo img { width: 18px; height: 18px; } .chain-logo span { font-size: 11px; } /* Первый экран = хедер (56px) + герой + лента партнёров (52px): лента всегда видна снизу, статистика под ней не выглядывает. Контент героя центрируется по вертикали, так что лишнее место делится поровну сверху/снизу, а не висит пустотой под карточкой. svh — видимая высота с учётом адресной строки браузера. */ .hero { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - 108px); min-height: calc(100svh - 108px); padding: 12px 0 16px; overflow: visible; box-sizing: border-box; } .hero::after { display: none; } /* Тоньше на мобиле: было 88px (track 12 + group 18 + лого 28 + group 18 + track 12) */ .partners__track { padding: 6px 0; border-radius: 0; } .partners__group { padding: 8px 0; } .partners__logo { height: 20px; } .hero > .container { display: block; width: 100%; padding-bottom: 0; } .hero__content { display: flex; flex-direction: column; gap: 14px; } /* Paybis mobile: title → promo → form → features */ .hero__info { display: contents; } /* Порядок на телефоне: заголовок → USP-список → карточка обмена → trust-бейджи (Trustpilot / Cryptoradar) двумя карточками в один ряд. */ .hero__usp { order: 2; align-self: center; width: fit-content; max-width: 100%; gap: 8px; margin: 0 auto 2px; } .hero__usp-icon { width: 18px; height: 18px; } .hero__usp-text { font-size: 14px; } .trust-badges { order: 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; } .trust-card { flex-direction: column; justify-content: center; gap: 6px; min-width: 0; padding: 12px 10px; text-align: center; } .trust-card__body { align-items: center; gap: 4px; } .trust-card__logo--trustpilot { height: 20px; } .trust-card__logo--cryptoradar { height: 17px; } .trust-card__rating { flex-wrap: wrap; justify-content: center; gap: 0 4px; } .trust-card__score { font-size: 18px; } .trust-card__of5 { font-size: 12px; } .trust-card__count { font-size: 11px; } .trust-card__stars { font-size: 14px; letter-spacing: 1px; } .hero__title-block { display: block; order: 1; width: 100%; margin-bottom: 2px; padding: 0; text-align: center; } .hero__title-block h1 { display: block; width: 100%; margin: 0; line-height: 1.05; letter-spacing: -0.04em; overflow: visible; text-align: center; } /* Как на ПК: зелёная плашка «Криптообмен» + белое «Анонимно & быстро» с зелёным акцентом — только размер уменьшен под ширину телефона. */ .hero__info .hero__title-line--main { display: block; width: 100%; max-width: 100%; white-space: normal; overflow: visible; text-align: center; font-family: 'DM Sans', sans-serif; font-size: clamp(28px, 8.6vw, 40px); font-weight: 700; line-height: 1.09; letter-spacing: -0.02em; background: none; -webkit-text-fill-color: #fff; color: #fff; animation: none; } .hero__info .hero__title-line--main > span { display: inline; font-weight: 700; white-space: nowrap; } .hero__info .hero__title-line--main > .hero__title-word { color: #fff; -webkit-text-fill-color: #fff; } .hero__info .hero__title-line--main > .hero__title-accent { color: var(--color-primary); -webkit-text-fill-color: var(--color-primary); } .hero__info .hero__title-line--product { display: block; width: fit-content; margin: 0 auto 8px; padding: 6px 18px; border-radius: 16px; background: var(--color-primary); } .hero__promo { display: block; order: 2; align-self: center; width: fit-content; max-width: 100%; margin: 0 0 4px; font-size: 13px; font-weight: 500; line-height: 1.35; text-align: center; } .hero__features { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 12px clamp(16px, 5vw, 28px); order: 4; width: fit-content; max-width: 100%; margin: 10px auto 0; padding: 6px 0 0; align-self: center; list-style: none; } .hero__feature { font-size: clamp(12px, 3.4vw, 14px); font-weight: 600; gap: 9px; justify-content: flex-start; align-items: flex-start; line-height: 1.35; min-width: 0; color: rgba(255, 255, 255, 0.9); letter-spacing: -0.01em; } .hero__feature-icon { width: 22px; height: 22px; margin-top: 0; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #34d399 0%, #22c55e 100%); border: none; flex-shrink: 0; } .hero__feature-icon svg { width: 13px; height: 13px; } .hero__stats { display: none !important; } .hero__flow { display: none; } .exchange-card-wrapper { order: 3; min-width: 0; width: 100%; max-width: none; position: static; } .exchange-card__heading--mobile { display: none; } .hero__aurora-orb { filter: blur(50px); opacity: 0.15; } .exchange-card__heading--mobile h2 { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: baseline; gap: 0.28em; font-family: 'DM Sans', sans-serif; font-size: clamp(20px, 5.2vw, 26px); font-weight: 700; color: #fff; line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 8px; white-space: nowrap; } .exchange-card__heading--mobile h2 span { color: var(--color-primary-light); background: none; -webkit-text-fill-color: currentColor; flex-shrink: 0; } .exchange-card__heading--mobile p { font-size: clamp(14px, 3.6vw, 16px); color: rgba(255, 255, 255, 0.48); line-height: 1.4; } /* Без зелёного свечения вокруг карточки на телефоне. */ .exchange-card { border-radius: 20px; box-shadow: none; } .exchange-card__body { border-radius: 18px; } .exchange-card__content { padding: 12px 14px; } .exchange-card__orb { filter: blur(40px); opacity: 0.25; } .exchange-field { margin-bottom: 7px; } /* "Вы получаете" and the swap button between the two amount fields already read as separated — the wallet field right after "Вы получаете" only had the flat 7px margin-bottom from .exchange-field above, no swap button to read as a gap, so it looked glued to the field above it. */ .exchange-field--wallet { margin-top: 10px; } .exchange-field__label { font-size: 11.5px; margin-bottom: 3px; } .exchange-field__row { padding: 8px 10px; border-radius: 11px; gap: 6px; } .exchange-field__input { flex: 1; width: auto; min-width: 0; font-size: 16px; line-height: 1.2; } .exchange-field__error { min-height: 14px; margin-top: 4px; } /* Кнопка смены направления — как на ПК: квадрат со скруглением, рамка, зелёная иконка, наезжает на поля; без свечения и увеличения. */ /* Сдвиг вниз на 6px ставит кнопку ровно посередине между полями (между ними ещё подпись «Вы получаете») — заходит на оба поля одинаково. */ .exchange-swap { height: 8px; margin: 0; transform: translateY(6px); } .exchange-swap__btn { width: 48px; height: 48px; border-radius: 15px; border: 1px solid var(--color-border); background: var(--color-bg-light); color: var(--color-primary); } .exchange-swap__btn svg { width: 22px; height: 22px; } .exchange-swap__btn:hover { border-color: var(--color-primary); color: var(--color-primary); transform: none; } .exchange-swap__btn::before { display: none; } .exchange-swap__btn:active { transform: none; } .exchange-swap__btn.swapping { animation: swapFlipFlat 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .exchange-field__currency { flex-shrink: 0; padding: 4px 8px; gap: 4px; } .exchange-field__currency-name { display: none; } .exchange-field__currency-code { font-size: 13px; } .exchange-card__submit { padding: 12px; font-size: 15px; margin-top: 8px; margin-bottom: 6px; border-radius: 11px; } .exchange-card__meta { gap: 2px; margin-top: 8px; } .exchange-card__hint { font-size: 10px; } .exchange-card__hint-fee { font-size: 9px; } .exchange-card__rate-line { font-size: 12.5px; } .currency-modal__header { padding: 16px 16px 0; } .currency-modal__search-wrap { padding: 12px 16px; } .currency-item { padding: 10px; } /* Sections */ .section-header { margin-bottom: 28px; } .section-header__title { font-size: 22px; line-height: 1.2; } .section-header__subtitle { font-size: 14px; line-height: 1.5; } .get-started { margin-top: 0; padding: 44px 0 56px; border-radius: 0; position: relative; z-index: 2; box-shadow: none; } .get-started__glow { top: 0; height: 280px; } .get-started__header { margin-bottom: 40px; } .get-started__title { font-size: 24px; } .get-started__lead { font-size: 14px; } .flow-step__title { font-size: 16px; } .flow-step__text { font-size: 13px; } .stats-stage { padding: 40px 0 48px; } .stats-stage__header { margin-bottom: 24px; } .stats-stage__title { font-size: clamp(20px, 5.5vw, 26px); } .stats-stage__lead { font-size: clamp(13px, 3.6vw, 15px); max-width: 100%; padding: 0; line-height: 1.55; } /* Mobile bento — hero full width + 2×2 stats grid */ .stats-bento-viewport { height: auto; overflow: visible; } .stats-bento { position: static; width: 100%; min-height: 0; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 10px; transform: none; } .stats-bento__card { border-radius: 16px; min-height: 0; } .stats-bento__card--hero { grid-column: 1 / -1; grid-row: auto; min-height: 210px; } .stats-bento__card:not(.stats-bento__card--hero) { min-height: 156px; } .stats-bento__card--hero .stats-bento__tilt { border-radius: 16px; } .stats-bento__body { padding: 16px 18px 18px; gap: 5px; } .stats-bento__card--hero .stats-bento__body { max-width: 58%; padding: 20px 18px 22px; } .stats-bento__num { font-size: 30px; } .stats-bento__num--hero-title { font-size: 22px; line-height: 1.15; } .stats-bento__num--text { font-size: 30px; } .stats-bento__num--wide { font-size: 28px; } .stats-bento__num--line { font-size: 26px; } .stats-bento__lbl { font-size: 12px; line-height: 1.4; } .stats-bento__card--hero .stats-bento__lbl { font-size: 13px; max-width: 100%; line-height: 1.45; } .stats-bento__hero-visual { top: 50%; right: 4%; left: auto; width: 46%; height: 78%; transform: translateY(-50%); } .stats-bento__hero-coin { width: auto; height: auto; } .stats-bento__hero-coin--1 { width: 40px; } .stats-bento__hero-coin--2 { width: 32px; } .stats-bento__hero-coin--3 { width: 28px; } .stats-bento__coin-mosaic { top: 10px; left: 10px; right: 10px; grid-template-columns: repeat(7, 1fr); gap: 5px 4px; } .stats-bento__coin-mosaic img { width: 22px; height: 22px; } .stats-bento__spot { background: radial-gradient(circle 120px at var(--mx) var(--my), rgba(255, 255, 255, 0.1), transparent 65%); } .features { padding: 48px 0; } .features__grid { grid-template-columns: 1fr; gap: 10px; } .feature-card { padding: 20px 18px; } .feature-card__icon { width: 36px; height: 36px; margin-bottom: 12px; } .feature-card__title { font-size: 15px; } .feature-card__text { font-size: 13px; } .rates-charts__wrap { padding: 32px 0 40px; } .rates-charts__head { flex-direction: column; gap: 14px; margin-bottom: 18px; } .rates-charts__head-text { width: 100%; } .rates-charts__title { font-size: clamp(16px, 4vw, 20px); line-height: 1.25; letter-spacing: -0.025em; } .rates-charts__period { position: static; transform: none; } .rates-charts__period-btn { padding: 5px 10px; font-size: 11px; } .rates-carousel { display: block; max-width: 100%; } .rates-book { grid-column: auto; grid-row: auto; } .rates-book__foot { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 10px; margin-top: 16px; } .rates-book__nav { position: static; flex-shrink: 0; width: 34px; height: 34px; background: #fff; border: 1px solid rgba(0, 194, 111, 0.1); color: var(--color-primary); } .rates-book__nav svg { width: 18px; height: 18px; } .rates-book__nav--prev, .rates-book__nav--next { grid-column: auto; grid-row: auto; justify-self: center; } .rates-book__nav:disabled { opacity: 0.35; pointer-events: none; } .rates-book__dots { grid-column: auto; grid-row: auto; display: flex; flex-wrap: nowrap; min-width: 0; max-width: none; margin-top: 0; padding: 2px 4px; justify-content: center; justify-self: center; gap: 5px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .rates-book__dots::-webkit-scrollbar { display: none; } .rates-book__dot { flex-shrink: 0; width: 5px; height: 5px; } .rates-slide { padding: 0; } .rates-slide__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .rates-slide__coin { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 0; } .rates-slide__icon { width: 36px; height: 36px; } .rates-slide__sym { font-size: 17px; line-height: 1.15; } .rates-slide__name { font-size: 12px; line-height: 1.25; } .rates-slide__quote { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 4px 6px; flex-shrink: 1; min-width: 0; margin-left: auto; text-align: right; } .rates-slide__val { font-size: clamp(15px, 4.2vw, 18px); line-height: 1.15; } .rates-slide__chg { font-size: 13px; } .rates-slide__chart { height: 172px; margin: 0; border-radius: 12px; } .faq-stage { padding: 44px 0 52px; } .legal-page { padding: 32px 0 48px; } .legal-page__title { font-size: 24px; margin-bottom: 20px; } .faq-stage__title { font-size: 24px; } .faq-desk { margin-top: 20px; } .faq-desk__body { padding: 22px 18px 8px; min-height: 240px; } .faq-desk__q { font-size: 16px; } .faq-desk__a { font-size: 14px; } .faq-desk__tab { padding: 10px 12px 9px; font-size: 11px; } .wallets__stage { padding: 48px 0 56px; } .wallets__header { margin-bottom: 28px; } .wallets__title { font-size: 24px; } .wallets__lead { font-size: 14px; } .wallets__scene { height: 190px; } .wallets__ring { --radius: 130px; } .wallet-ring__item { width: 64px; height: 64px; margin: -32px 0 0 -32px; } .wallet-ring__face { border-radius: 16px; } .wallet-ring__face img { width: 32px; height: 32px; } .wallets__info { min-height: 88px; margin-top: 4px; } .wallets__info-name { font-size: 16px; } .wallets__info-desc { font-size: 13px; } .wallets__controls { margin-top: 20px; gap: 12px; } .footer { padding: 40px 0 max(12px, env(safe-area-inset-bottom, 0px)); } .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; margin-bottom: 32px; } .footer__group--pairs { grid-column: 1 / -1; } .footer__group-links--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__offices { grid-template-columns: 1fr; gap: 16px; } .footer__company { padding-top: 24px; margin-bottom: 20px; } .footer__legal { padding-top: 20px; padding-bottom: 0; margin-bottom: 0; } .back-to-top { bottom: max(16px, env(safe-area-inset-bottom)); right: 16px; width: 40px; height: 40px; } .mobile-menu { padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); } html { overscroll-behavior: none; } body { overscroll-behavior: none; } body[data-page="index"] { background: var(--color-dark); overscroll-behavior: none; } } @media (max-width: 480px) { .container { padding: 0 12px; } .hero { padding-top: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } .exchange-card__heading--mobile h2 { font-size: clamp(18px, 4.8vw, 24px); } .exchange-card__content { padding: 12px; } .footer__grid { grid-template-columns: 1fr; gap: 24px; } .footer__group--pairs { grid-column: auto; } .footer__group-links--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 380px) { .exchange-field__currency-code { font-size: 12px; } .ticker-coin__price { display: none; } .stats-bento__card:not(.stats-bento__card--hero) { min-height: 148px; } .stats-bento__coin-mosaic img { width: 20px; height: 20px; } .stats-bento__num { font-size: 26px; } .stats-bento__num--hero-title { font-size: 20px; } } /* ============ MOBILE MENU (flat) ============ */ .mobile-menu { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(27, 27, 30, 0.96); padding: 20px 20px 28px; flex-direction: column; overflow-y: auto; } .mobile-menu.open { display: flex; } .mobile-menu__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; padding: 0 0 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .mobile-menu__close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.7); border: none; background: transparent; } .mobile-menu__close:hover { color: #fff; } .mobile-menu__links { display: flex; flex-direction: column; gap: 0; } .mobile-menu__link { display: block; padding: 14px 0; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.65); border-bottom: 1px solid rgba(255, 255, 255, 0.06); transition: color 0.2s ease; } .mobile-menu__link:hover { color: #fff; } .mobile-menu__link.active { color: #fff; font-weight: 500; } .mobile-menu__footer { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 12px; } .mobile-menu__footer .btn { width: 100%; justify-content: center; } .mobile-menu__footer .btn--ghost { color: rgba(255, 255, 255, 0.7); } .mobile-menu__footer .btn--ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.06); } /* Pause decorative CSS animations when zone is off-screen or tab hidden */ [data-anim-zone].anim-paused, [data-anim-zone].anim-paused *, html.anim-tab-hidden [data-anim-zone], html.anim-tab-hidden [data-anim-zone] * { animation-play-state: paused !important; } /* ============================================================ DESKTOP ≥1200px — header + hero geometry matched to changenow.io (values pulled from their production CSS, not eyeballed). Only this breakpoint changes — mobile/tablet layout below is untouched. Account-only elements from the reference (Personal/Business switch, Log In, account icon, Create-account CTA, Trustpilot) are intentionally not reproduced — this site has no account system. ============================================================ */ @media (min-width: 1200px) { /* ---- Header ---- */ .header { background: #1B1B1E; border-bottom: none; } .header__row { height: 96px; padding: 0; } .header__logo { gap: 16px; } .header__cluster { gap: 32px; } .header__nav { gap: 48px; } .header__nav-link, .header__nav-link--support { font-size: 22px; font-weight: 400; color: #fff; opacity: 0.7; } .header__nav-link:hover, .header__nav-link--support:hover, .header__nav-link.active { opacity: 1; color: #fff; } .header__logo-name { font-size: 32px; } .lang-switch { font-size: 20px; } .lang-switch__sep { padding: 0 11px; } body[data-page="index"] { --index-shell-max: 1560px; --index-shell-pad: 24px; } /* ---- Hero: fills most of the screen below the sticky 96px header, minus the 102px partners ribbon (44px padding + 34px logo + 24px bottom pad) and a 56px gap — strictly less than #get-started's own 72px top padding, so only its empty padding peeks in on load, never its title. ---- */ .hero { min-height: calc(100vh - 254px); display: flex; align-items: center; padding: 0; margin: 0 40px; border-radius: 64px 64px 0 0; } /* Same 40px inset as .hero directly above it, so the green ribbon lines up flush with the hero card's edges instead of overhanging past them. */ .partners { margin: 0 40px; } .hero__content { grid-template-columns: minmax(0, 1fr) 540px; gap: 48px; align-items: stretch; width: 100%; } .crypto-strip--hero { margin-bottom: 16px; } .hero__features { display: none; } .hero__info { padding-top: 0; } .hero__title-block { margin-bottom: 0; } .hero__info .hero__title-line--main { display: block; max-width: none; white-space: normal; text-wrap: balance; font-family: 'DM Sans', sans-serif; font-size: 88px; line-height: 1.09; font-weight: 700; letter-spacing: -0.02em; background: none; -webkit-text-fill-color: #fff; color: #fff; animation: none; } .hero__info .hero__title-line--main > .hero__title-word { color: #fff; -webkit-text-fill-color: #fff; background: none; animation: none; } .hero__info .hero__title-line--main > .hero__title-accent { color: var(--color-primary); -webkit-text-fill-color: var(--color-primary); background: none; animation: none; } .hero__info .hero__title-line--main > span { color: var(--color-primary-light); -webkit-text-fill-color: var(--color-primary-light); background: none; animation: none; } .hero__promo { display: block; width: fit-content; margin: 24px 0 0; padding: 0; background: none; box-shadow: none; color: #fff; font-size: 26px; font-weight: 500; line-height: 1.35; } .hero__usp { gap: 14px; } .hero__usp-icon { width: 26px; height: 26px; } .hero__usp-text { font-size: 17px; } .trust-card { gap: 18px; padding: 20px 30px; } .trust-card__logo--trustpilot { height: 30px; } .trust-card__logo--cryptoradar { height: 25px; } .trust-card__score { font-size: 27px; } .trust-card__of5 { font-size: 15px; } .trust-card__count { font-size: 14px; } .trust-card__stars { font-size: 19px; } .partners__group { padding: 22px 0; } .partners__item { padding: 0 30px; } .partners__logo { height: 34px; } .partners__sep { font-size: 18px; } /* ---- Exchange card ---- */ .exchange-card-wrapper { width: 540px; max-width: 540px; justify-self: end; } .exchange-card, .exchange-card__body { border-radius: 32px; } .exchange-card__body { background: rgba(42, 42, 46, 0.75); border: 1px solid rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .exchange-card__content { padding: 38px; display: flex; flex-direction: column; gap: 10px; } .exchange-card__tab { display: flex; padding: 4px; margin-bottom: 8px; background: rgba(44, 44, 46, 0.7); border-radius: 24px; } .exchange-card__tab span { display: inline-flex; align-items: center; justify-content: center; flex: 1; height: 44px; border-radius: 22px; background-image: linear-gradient(#1b1b1e, #1b1b1e), linear-gradient(135deg, #0098e0 0%, #00c26f 100%); background-origin: border-box; background-clip: padding-box, border-box; border: 1px solid transparent; font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 600; color: #fff; } .exchange-field { margin-bottom: 0; } .exchange-field__label { font-size: 14px; font-weight: 400; color: #90909f; margin-bottom: 8px; } .exchange-field__row { height: 88px; padding: 0 18px; border-radius: 16px; background: rgba(30, 30, 33, 0.6); border: 1px solid rgba(255, 255, 255, 0.06); } /* Amount fields: label floats inside the box (top-left) instead of sitting above it, matching the reference — input/currency sink to the bottom of the box to leave room for it. */ .exchange-field--amount { position: relative; } .exchange-field--amount .exchange-field__label { position: absolute; top: 14px; left: 16px; margin: 0; z-index: 1; pointer-events: none; } .exchange-field--amount .exchange-field__row { align-items: flex-end; padding-bottom: 14px; } .exchange-field__row:hover, .exchange-field__row:focus-within { background: rgba(30, 30, 33, 0.8); border-color: rgba(0, 194, 111, 0.45); box-shadow: none; } /* Wallet address is a single line of text, not a big number — the 94px amount-field height just leaves it looking oversized. Label floats inside the box here too, same idea as the amount fields, just tuned for the shorter box height. */ .exchange-field--wallet { position: relative; /* .exchange-card__content's flex gap (8px) already applies here; the amount fields look further apart only because .exchange-swap (8px tall) sits between them too — add the difference so the gap above the wallet field reads the same as the gap between them. */ margin-top: 16px; } .exchange-field--wallet .exchange-field__label { position: absolute; top: 10px; left: 16px; margin: 0; font-size: 11px; z-index: 1; pointer-events: none; } .exchange-field--wallet .exchange-field__row { height: 70px; padding: 0 18px; align-items: flex-end; padding-bottom: 13px; } .exchange-field--wallet .exchange-field__input { font-size: 20px; font-weight: 500; line-height: 1.3; } .exchange-field__input { font-size: 26px; font-weight: 400; line-height: 30px; } .exchange-field__currency { padding: 8px 10px; } .exchange-field__currency-code { font-size: 26px; line-height: 30px; } .exchange-field__currency-name { display: none; } .exchange-swap { height: 8px; margin: 0; display: flex; align-items: center; justify-content: center; position: relative; z-index: 5; } .exchange-swap__btn { width: 56px; height: 56px; border-radius: 17px; border: 1px solid var(--color-border); background: var(--color-bg-light); color: var(--color-primary); } .exchange-swap__btn svg { width: 24px; height: 24px; } .exchange-swap__btn:hover { border-color: var(--color-primary); background: var(--color-bg-light); transform: none; filter: none; } .exchange-swap__btn::before { display: none; } .exchange-swap__btn:active { transform: none; } /* Base .swapping uses swapFlip, whose 50% frame adds a drop-shadow — swap in a shadow-free version of the same animation here. */ .exchange-swap__btn.swapping { animation: swapFlipFlat 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .exchange-card__submit { min-height: 64px; padding: 16px 24px; margin: 10px 0 0; border-radius: 48px; border: none; background: var(--color-primary); font-family: 'DM Sans', sans-serif; font-size: 21px; font-weight: 600; } .exchange-card__submit:hover { transform: none; box-shadow: none; background: var(--color-primary); } .exchange-card__submit::after { display: none; } .exchange-card__meta { flex-direction: column; justify-content: center; text-align: center; margin-top: 8px; } .exchange-card__rate-line { font-size: 16px; font-weight: 400; color: #fff; text-shadow: none; } }