/* AscendEX-inspired theme — light default, optional dark (data-theme on ) */ :root { /* Approximate fixed header block (site-header + padding); used for first-viewport column layout */ --site-header-estimate: 4.25rem; /* Brand accent (Bitget-like teal) */ --asc-purple: #2dd4bf; --asc-purple-light: #99f6e4; --asc-purple-hover: #14b8a6; --bg: #ffffff; --panel: #ffffff; --text: #111111; --muted: #8e8e8e; --muted-2: #6b7280; --placeholder: #a3a3a3; --accent: var(--asc-purple); --accent-2: #22c55e; --danger: #ef4444; --border: #e8e8e8; --border-input: #e0e0e0; --radius: 8px; /* AscendEX login reference: pill-shaped inputs & buttons */ --radius-pill: 9999px; --shadow: 0 8px 32px rgba(17, 24, 39, 0.06); --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } @media (max-width: 899px) { :root { --site-header-estimate: 3.65rem; } } [data-theme="dark"] { --bg: #0f1117; --panel: #161922; --text: #f4f4f5; --muted: #a1a1aa; --muted-2: #d4d4d8; --placeholder: #71717a; --border: #27272f; --border-input: #3f3f46; --shadow: 0 12px 40px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; } /* Sticky footer: main grows, footer sits at bottom when content is short */ body.site-body { display: flex; flex-direction: column; min-height: 100vh; } body.body-scroll-lock { overflow: hidden; } body.site-body > .site-header { flex-shrink: 0; } body.site-body main.container { flex: 1 0 auto; } /** * Index + SEO enabled: first column = header + this wrapper fills remaining viewport height * so main + footer sit in the first screen; `.index-seo-section` follows (scroll to read). */ .page-viewport-fill { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; /* At least one “screen” under the header so the login footer pins to the bottom edge */ min-height: calc(100vh - var(--site-header-estimate)); min-height: calc(100dvh - var(--site-header-estimate)); } .page-viewport-fill > main.container { flex: 1 1 auto; min-height: 0; } .page-viewport-fill > .site-footer { flex-shrink: 0; margin-top: auto; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ——— Header ——— */ .site-header { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem clamp(1rem, 4vw, 2rem); border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; z-index: 50; } .brand-mark { display: inline-flex; align-items: center; text-decoration: none; color: #00f0ff; line-height: 1; } .brand-mark__text { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.03em; text-transform: lowercase; } .nav { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-inline-start: auto; align-items: center; } @media (min-width: 768px) { .nav { gap: 0.5rem; } } .nav a { color: var(--muted-2); text-decoration: none; padding: 0.4rem 0.75rem; border-radius: 999px; border: 1px solid transparent; font-size: 0.9rem; font-weight: 500; } .nav a:hover { color: var(--text); border-color: var(--border); } .nav a.active { color: var(--asc-purple); background: color-mix(in srgb, var(--asc-purple) 12%, transparent); border-color: color-mix(in srgb, var(--asc-purple) 25%, transparent); } .site-header__tools { display: flex; align-items: center; gap: 0.65rem; margin-inline-start: auto; } .site-header--auth .site-header__tools { margin-inline-start: auto; } /* Reference header: globe + English + chevron */ .header-lang-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.7rem 0.45rem 0.65rem; font-size: 0.875rem; font-weight: 500; color: var(--text); background: var(--panel); border: 1px solid var(--border-input); border-radius: var(--radius); user-select: none; } button.header-lang-pill { font: inherit; text-align: inherit; cursor: pointer; margin: 0; } button.header-lang-pill:hover { border-color: color-mix(in srgb, var(--asc-purple) 35%, var(--border-input)); color: var(--text); } button.header-lang-pill:focus-visible { outline: 2px solid var(--asc-purple); outline-offset: 2px; } .header-lang-pill__globe { flex-shrink: 0; width: 24px; height: 24px; color: currentColor; } .header-lang-pill__chev { color: var(--muted); flex-shrink: 0; margin-inline-start: 0.1rem; } /* Auth header: icon-only language trigger (Bitget) */ .header-lang-pill--icon-only, .site-header--auth .header-lang-pill { gap: 0; padding: 0; border: none; background: transparent; border-radius: 0; color: #ffffff; min-width: 24px; min-height: 24px; } button.header-lang-pill--icon-only:hover, .site-header--auth button.header-lang-pill:hover { border: none; background: transparent; color: rgba(255, 255, 255, 0.82); } .header-lang-pill--icon-only .header-lang-pill__globe, .site-header--auth .header-lang-pill__globe { color: #ffffff; } .site-lang-dialog { padding: 0; border: none; background: transparent; max-width: calc(100vw - 2rem); width: min(28rem, 100%); } .site-lang-dialog::backdrop { background: color-mix(in srgb, #0f0f12 55%, transparent); } .site-lang-dialog__panel { background: var(--panel); border: 1px solid var(--border-input); border-radius: 14px; box-shadow: 0 18px 48px color-mix(in srgb, #000 28%, transparent); overflow: hidden; } .site-lang-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1rem 0.75rem; border-bottom: 1px solid var(--border-input); } .site-lang-dialog__title { margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--text); } .site-lang-dialog__close { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; } .site-lang-dialog__close:hover { background: color-mix(in srgb, var(--asc-purple) 10%, transparent); color: var(--asc-purple); } .site-lang-dialog__close:focus-visible { outline: 2px solid var(--asc-purple); outline-offset: 2px; } .site-lang-dialog__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; padding: 0.85rem; } .site-lang-option { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; padding: 0.55rem 0.65rem; border-radius: 10px; border: 1px solid transparent; text-decoration: none; color: var(--text); font-size: 0.875rem; font-weight: 500; line-height: 1.25; transition: background 0.12s, border-color 0.12s, color 0.12s; } .site-lang-option:hover { background: color-mix(in srgb, var(--asc-purple) 8%, var(--panel)); border-color: color-mix(in srgb, var(--asc-purple) 18%, transparent); } .site-lang-option:focus-visible { outline: 2px solid var(--asc-purple); outline-offset: 2px; } .site-lang-option.is-active { background: color-mix(in srgb, var(--asc-purple) 14%, var(--panel)); border-color: color-mix(in srgb, var(--asc-purple) 45%, var(--border-input)); color: var(--asc-purple); } .site-lang-option__label { min-width: 0; text-align: start; } .site-lang-option__check { flex-shrink: 0; display: inline-flex; color: var(--asc-purple); } .lang-select-wrap { position: relative; } .lang-select { appearance: none; font-family: inherit; font-size: 0.875rem; font-weight: 500; padding: 0.45rem 2rem 0.45rem 0.75rem; border-radius: 8px; border: 1px solid var(--border-input); background: var(--panel); color: var(--text); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e8e8e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.6rem center; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border-input); background: var(--panel); color: var(--text); cursor: pointer; transition: background 0.15s, border-color 0.15s; } .theme-toggle:hover { border-color: var(--asc-purple); color: var(--asc-purple); } .theme-toggle__sun[hidden], .theme-toggle__moon[hidden] { display: none !important; } /* Legacy lang links (if any partial still outputs them) */ .lang-switch { font-size: 0.85rem; color: var(--muted); white-space: nowrap; } .lang-switch a { color: var(--muted); text-decoration: none; } .lang-switch a.active { color: var(--asc-purple); font-weight: 600; } /* ——— Main / container ——— */ .container { max-width: 720px; margin: 2rem auto; padding: 0 1.25rem 3rem; } .login-main-wrap { max-width: 1160px; width: 100%; margin: 0 auto; padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1.25rem, 5vw, 3rem) 2rem; flex: 1; display: flex; align-items: center; justify-content: center; } .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); } .card h1 { margin: 0 0 0.5rem; font-size: 1.35rem; } .lead { margin: 0 0 1.25rem; color: var(--muted); line-height: 1.7; } /* ——— Login layout ——— */ .login-page { width: 100%; } .login-layout--single { display: flex; justify-content: center; } body.site-body--auth-shell .login-layout--single { min-height: unset; align-items: center; justify-content: center; padding-top: 0; width: 100%; } .login-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; width: 100%; } /* Desktop: hero left → card right (same order in light and dark theme) */ @media (min-width: 900px) { .login-layout { grid-template-columns: minmax(280px, 1.25fr) minmax(340px, 420px); grid-template-areas: "hero card"; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .login-hero { grid-area: hero; justify-self: center; width: 100%; max-width: 480px; text-align: center; } .login-hero-art { margin-inline: auto; max-width: 440px; } .login-card { grid-area: card; margin-inline: 0; max-width: 400px; width: 100%; justify-self: start; } } .login-hero { text-align: center; } .login-hero-art { max-width: 456px; margin: 0 auto; } .login-hero-svg { width: 100%; height: auto; max-height: 220px; } .login-hero-img { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; } .login-hero-img--trading { width: min(100%, 456px); height: auto; max-width: 456px; aspect-ratio: 456 / 286; margin-inline: auto; object-fit: contain; } .login-hero-img--theme-dark { display: none; } html[data-theme="dark"] .login-hero-img--theme-light { display: none; } html[data-theme="dark"] .login-hero-img--theme-dark { display: block; } @media (min-width: 900px) { .login-hero-img { margin-inline: auto; max-width: min(100%, 456px); } .login-hero-img--trading { max-width: min(100%, 456px); } } .login-hero-tagline { margin: 1.25rem 0 0; font-size: clamp(1.25rem, 2.8vw, 1.625rem); font-weight: 700; color: var(--text); letter-spacing: -0.025em; line-height: 1.25; text-align: center; } @media (min-width: 900px) { .login-hero-tagline { text-align: center; margin-top: 1.5rem; width: 100%; } } .login-card { border-radius: 12px; padding: 0; width: 100%; max-width: 400px; margin-inline: auto; } /* Bitget-like auth card (dark, centered, compact) */ .login-card--auth-shell { background: transparent; border: none; box-shadow: none; padding: 0; max-width: 400px; } .login-head { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 0.35rem; padding-right: 2.5rem; /* space for aux icon */ } .login-aux-btn { display: inline-flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; padding: 0; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.14); background: transparent; color: rgba(255, 255, 255, 0.65); cursor: pointer; } .login-aux-btn:hover { color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.22); } .login-subtitle { margin: 0 0 1rem; text-align: center; color: rgba(255, 255, 255, 0.5); font-size: 0.75rem; line-height: 1.4; } body.site-body--auth-shell main.container.login-main-wrap { margin-top: 0; margin-bottom: 0; justify-content: flex-start !important; align-items: center !important; } body.site-body--auth-shell { background: #000000; --auth-form-width: 400px; --auth-control-height: 48px; } body.site-body--auth-shell .site-header { background: #000000; border-bottom-color: transparent; } .login-cta { margin: 0 0 1.1rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.65); text-align: left; } .login-cta__link { color: #14b8a6; text-decoration: none; font-weight: 600; } .login-cta__link:hover { text-decoration: underline; text-underline-offset: 3px; } body.site-body--auth-shell .login-head { justify-content: flex-start; padding-right: 0; margin-bottom: 0.5rem; } body.site-body--auth-shell .login-tabs { border-bottom: 1px solid rgba(255, 255, 255, 0.12); gap: 1.85rem; margin-bottom: 1.1rem; } body.site-body--auth-shell .login-tab { color: rgba(255, 255, 255, 0.55); font-weight: 600; text-align: left; padding: 0.65rem 0 0.75rem; } body.site-body--auth-shell .login-tab.is-active { color: rgba(255, 255, 255, 0.92); border-bottom-color: rgba(255, 255, 255, 0.92); } body.site-body--auth-shell .login-title { margin: 0; text-align: left; font-size: 2.1rem; line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; } body.site-body--auth-shell .form-grid label { color: rgba(255, 255, 255, 0.55); font-size: 0.72rem; margin-bottom: 0.35rem; } body.site-body--auth-shell .form-grid > div { margin-bottom: 0.7rem; } body.site-body--auth-shell input[type="text"]:not(.auth-input):not(.verify-modal-digit):not(.verify-modal-fund-input), body.site-body--auth-shell input[type="number"]:not(.auth-input):not(.verify-modal-digit), body.site-body--auth-shell input[type="tel"]:not(.auth-input), body.site-body--auth-shell input[type="email"]:not(.auth-input), body.site-body--auth-shell input[type="password"]:not(.auth-input) { width: 100%; max-width: var(--auth-form-width, 400px); height: var(--auth-control-height, 40px); min-height: var(--auth-control-height, 40px); max-height: var(--auth-control-height, 40px); box-sizing: border-box; background: rgba(255, 255, 255, 0.02); border-color: rgba(255, 255, 255, 0.2); color: #f4f4f5; border-radius: 8px; padding: 0 12px; font-size: 0.875rem; line-height: 1.2; } body.site-body--auth-shell input::placeholder { color: rgba(255, 255, 255, 0.35); } body.site-body--auth-shell input:focus { outline: none; border-color: rgba(255, 255, 255, 0.45); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08); } body.site-body--auth-shell .btn-row { margin-top: 0.25rem; } body.site-body--auth-shell button[type="submit"] { width: 100%; max-width: var(--auth-form-width, 400px); height: var(--auth-control-height, 40px); min-height: var(--auth-control-height, 40px); max-height: var(--auth-control-height, 40px); box-sizing: border-box; border-radius: 8px; background: #ffffff; color: #111111; font-weight: 600; font-size: 0.875rem; line-height: 1; padding: 0 16px; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; } body.site-body--auth-shell button[type="submit"]:disabled { opacity: 0.65; } body.site-body--auth-shell button[type="submit"][data-submit-btn] .btn-spinner { border-color: rgba(17, 17, 17, 0.25); border-top-color: rgba(17, 17, 17, 0.85); } .login-social-icons { display: flex; align-items: center; justify-content: center; gap: 0.75rem; } .login-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 48px; padding: 0; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: rgba(255, 255, 255, 0.9); cursor: not-allowed; } .login-social-wide { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; height: 48px; min-width: 210px; padding: 0 1rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: rgba(255, 255, 255, 0.9); cursor: not-allowed; font: inherit; } .login-social-wide__label { font-size: 0.95rem; font-weight: 500; } .login-social-icon svg { display: block; } .login-social-wide__fox { display: block; width: 22px; height: auto; flex-shrink: 0; } body.site-body--auth-shell .login-social-sep::before, body.site-body--auth-shell .login-social-sep::after { background: rgba(255, 255, 255, 0.12); } body.site-body--auth-shell .site-footer--login-ref { background: #000000; } body.site-body--auth-shell .footer-auth-bar__line, body.site-body--auth-shell .footer-auth-bar__link { color: rgba(255, 255, 255, 0.45); } body.site-body--auth-shell .footer-auth-bar__pipe, body.site-body--auth-shell .footer-auth-bar__dot { color: rgba(255, 255, 255, 0.35); } body.site-body--auth-shell .footer-auth-bar__link:hover { color: rgba(255, 255, 255, 0.72); } /* Flat panel like AscendEX reference (no card chrome) */ .login-card--reference { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0.25rem 0 0; } .login-title { font-size: 32px; line-height: 2.5rem; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 1.35rem; } .login-form-grid { gap: 0; } .login-tabs { display: flex; flex-wrap: nowrap; gap: 2rem; border-bottom: 1px solid var(--border); margin-bottom: 1.35rem; } .login-tab { flex: 1 1 0; min-width: 0; padding: 0.65rem 0 0.75rem; font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.2; color: #6b7280; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color 0.15s, border-color 0.15s; white-space: nowrap; text-align: center; } .login-tab:hover { color: #374151; } .login-tab.is-active { color: var(--asc-purple); border-bottom-color: var(--asc-purple); } .login-field-block { margin-bottom: 1.05rem; } .login-input::placeholder { color: var(--placeholder); } .login-input { width: 100%; padding: 0.8125rem 1rem; min-height: 48px; border-radius: var(--radius-pill); border: 1px solid var(--border-input); background: var(--bg); color: var(--text); font-family: inherit; font-size: 0.9375rem; transition: border-color 0.15s, box-shadow 0.15s; } .login-input:focus { outline: none; border-color: var(--asc-purple); box-shadow: 0 0 0 3px color-mix(in srgb, var(--asc-purple) 22%, transparent); } /* Phone tab: pill — country select + divider + number (single border) */ .login-phone-pill { display: flex; align-items: stretch; width: 100%; min-height: 48px; border-radius: var(--radius-pill); border: 1px solid var(--border-input); background: var(--bg); overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; } .login-phone-pill:focus-within { border-color: var(--asc-purple); box-shadow: 0 0 0 3px color-mix(in srgb, var(--asc-purple) 22%, transparent); } /* `[hidden]` must win over `.login-phone-pill { display: flex }` (email tab vs phone tab) */ .login-phone-pill[hidden], .login-identity-email-wrap[hidden] { display: none !important; } .login-phone-pill__cc { position: relative; display: flex; align-items: center; flex-shrink: 0; padding-inline-start: 0.85rem; } .login-phone-pill__cc--picker { padding-inline: 0.5rem 0.35rem 0.5rem 0.65rem; z-index: 2; } .login-phone-pill__cc--picker.is-open { z-index: 2; } .login-phone-pill:has(.login-phone-pill__cc--picker.is-open) { overflow: visible; } .login-phone-pill__trigger { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0.35rem 0.1rem; border: none; background: transparent; font-family: inherit; font-size: 0.9375rem; font-weight: 500; color: var(--text); cursor: pointer; min-height: 2.75rem; } .login-phone-pill__trigger-label { min-width: 2.65rem; text-align: start; } .login-phone-pill__cc--picker .login-phone-pill__chev { position: static; transform: none; display: flex; color: var(--muted-2); pointer-events: none; } /* Country dial: dimmed backdrop (panel is portaled to body in JS) */ .login-country-dropdown-backdrop { position: fixed; inset: 0; z-index: 3995; background: rgba(15, 23, 42, 0.45); border: none; margin: 0; padding: 0; } .login-country-dropdown-backdrop[hidden] { display: none !important; } [data-theme="dark"] .login-country-dropdown-backdrop { background: rgba(0, 0, 0, 0.55); } /* Country dial dropdown (fixed — portaled to body; avoids pill overflow clipping) */ .login-country-dropdown { position: fixed; left: var(--country-dial-left, 8px); top: var(--country-dial-top, 0); width: var(--country-dial-width, min(100vw - 16px, 380px)); max-height: var(--country-dial-max-height, min(70vh, 22rem)); z-index: 4000; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border-input); border-radius: 16px; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06); overflow: hidden; } /* Mobile: bottom sheet instead of tiny dropdown inside the phone pill */ .login-country-dropdown.login-country-dropdown--sheet { left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important; width: 100% !important; max-width: none; max-height: min(88dvh, 32rem); border-radius: 16px 16px 0 0; border-bottom: none; padding-bottom: env(safe-area-inset-bottom, 0); box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.18); } .login-country-dropdown--sheet .login-country-dropdown__list { max-height: min(62dvh, 20rem); } .login-country-dropdown--sheet .login-country-dropdown__search-input { font-size: 1rem; } [data-theme="dark"] .login-country-dropdown { background: var(--panel); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.25); } .login-country-dropdown[hidden] { display: none !important; } .login-country-dropdown__search { padding: 0.75rem 0.85rem 0.65rem; border-bottom: 1px solid var(--border); flex-shrink: 0; } .login-country-dropdown__search-pill { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--asc-purple); background: var(--panel); transition: box-shadow 0.15s, border-color 0.15s; } .login-country-dropdown__search-pill:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--asc-purple) 22%, transparent); } .login-country-dropdown__search-icon { flex-shrink: 0; color: var(--muted); } .login-country-dropdown__search-input { flex: 1; min-width: 0; border: none; background: transparent; font-family: inherit; font-size: 0.9rem; font-weight: 500; color: var(--text); outline: none; } .login-country-dropdown__search-input::placeholder { color: var(--placeholder); } .login-country-dropdown__list { list-style: none; margin: 0; padding: 0.35rem 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; max-height: min(56vh, 17rem); } .login-country-dropdown .dropdown-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--text); cursor: pointer; transition: background 0.12s; } /* JS filter: must override display:flex (same issue as [hidden] vs flex) */ .login-country-dropdown .dropdown-item.dropdown-item--filtered-out { display: none !important; } .login-country-dropdown .dropdown-item:hover, .login-country-dropdown .dropdown-item:focus { background: color-mix(in srgb, var(--asc-purple) 8%, transparent); } .login-country-dropdown .dropdown-item--selected { background: color-mix(in srgb, var(--asc-purple) 12%, transparent); } .login-country-dropdown .item-left { flex: 1; min-width: 0; text-align: start; font-weight: 700; } .login-country-dropdown .item-left span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .login-country-dropdown .item-right { flex-shrink: 0; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); } .scrollbar-custom { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; } .scrollbar-custom::-webkit-scrollbar { width: 6px; } .scrollbar-custom::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 50%, transparent); border-radius: 999px; } .login-phone-pill__divider { width: 1px; align-self: stretch; flex-shrink: 0; margin: 0.65rem 0; background: var(--border-input); } .login-phone-pill__number-slot { flex: 1; min-width: 0; display: flex; align-items: stretch; } .login-phone-pill__number-slot .login-input--identity, .login-input.login-input--phone-slot { flex: 1; width: 100%; min-height: 48px; margin: 0; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding-inline: 0.65rem 1rem; } .login-phone-pill .login-input--identity:focus, .login-input.login-input--phone-slot:focus { outline: none; box-shadow: none !important; } .login-password-wrap { position: relative; display: flex; align-items: center; } .login-input--pass { padding-inline-end: 3rem; } .login-pass-toggle { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: none; border-radius: var(--radius-pill); background: transparent; color: #bcbabe; cursor: pointer; } /* Stack both SVGs in the same spot — locked 20×20px rendered box (some browsers ignore non-!important on SVG). */ button.login-pass-toggle > svg.login-pass-toggle__icon { position: absolute; left: 50%; top: 50%; box-sizing: border-box; width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important; inline-size: 20px !important; block-size: 20px !important; transform: translate(-50%, -50%); pointer-events: none; flex-shrink: 0; } .login-pass-toggle:hover { color: #a39ea5; } /* Masked (default): slash eye only — toggled via `.login-pass-toggle--revealed` from JS */ .login-pass-toggle:not(.login-pass-toggle--revealed) .login-pass-toggle__icon--eye { display: none !important; } .login-pass-toggle:not(.login-pass-toggle--revealed) .login-pass-toggle__icon--eye-off { display: block !important; } .login-pass-toggle.login-pass-toggle--revealed .login-pass-toggle__icon--eye-off { display: none !important; } .login-pass-toggle.login-pass-toggle--revealed .login-pass-toggle__icon--eye { display: block !important; } .login-forgot-wrap { text-align: end; margin: 0.15rem 0 1.35rem; } .login-link { color: var(--asc-purple); text-decoration: none; font-size: 0.875rem; font-weight: 500; } .login-link:hover { text-decoration: underline; } .login-submit-row { margin-top: 0.25rem; } .login-submit-btn { width: 100%; justify-content: center; padding: 0.9rem 1.25rem !important; border-radius: var(--radius-pill) !important; background: var(--asc-purple) !important; color: #fff !important; font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; border: none !important; min-width: 100% !important; min-height: 48px; } body.site-body--auth-shell .login-submit-btn, body.site-body--auth-shell button.login-submit-btn[type="submit"] { background: #ffffff !important; color: #000000 !important; border-radius: 8px !important; width: 100%; max-width: var(--auth-form-width, 400px) !important; height: var(--auth-control-height, 40px) !important; min-height: var(--auth-control-height, 40px) !important; max-height: var(--auth-control-height, 40px) !important; min-width: 0 !important; padding: 0 16px !important; box-shadow: none !important; font-size: 0.875rem; } body.site-body--auth-shell .login-submit-btn:hover:not(:disabled), body.site-body--auth-shell button.login-submit-btn[type="submit"]:hover:not(:disabled) { background: #f2f2f2 !important; color: #000000 !important; } .login-submit-btn:hover:not(:disabled) { background: var(--asc-purple-hover) !important; } .login-social { margin-top: 1.5rem; } .login-social-sep { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; font-size: 0.8rem; color: var(--muted); } .login-social-sep::before, .login-social-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); } .login-social-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .login-social-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.65rem 0.75rem; min-height: 48px; font-family: inherit; font-size: 0.875rem; font-weight: 500; border-radius: var(--radius-pill); border: 1px solid var(--border-input); background: var(--panel); color: var(--text); cursor: not-allowed; opacity: 1; } .login-signup { text-align: center; margin: 1.5rem 0 0; font-size: 0.875rem; color: var(--muted-2); line-height: 1.5; } .login-signup .login-link { font-weight: 600; } /* AscendEX verification routes: stacked labels + 6 digit boxes */ .verify-field-group { margin-bottom: 1.25rem; } .verify-field-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--text); margin-bottom: 0.5rem; } .verify-send-row { display: flex; justify-content: flex-end; max-width: 22rem; margin-top: 0.35rem; } button.verify-send-link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: none; } button.verify-send-link:disabled { cursor: default; opacity: 0.65; } .verify-code6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.45rem; width: 100%; max-width: 22rem; direction: ltr; } .verify-digit { width: 100%; box-sizing: border-box; aspect-ratio: 1; min-height: 48px; text-align: center; font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; border: 1px solid var(--border-input); border-radius: 10px; background: var(--panel); color: var(--text); padding: 0; } .verify-digit:focus { outline: none; border-color: var(--asc-purple); box-shadow: 0 0 0 3px color-mix(in srgb, var(--asc-purple) 22%, transparent); } .verify-submit-row { margin-top: 0.5rem; } .verify-unavailable-wrap { text-align: center; margin: 1rem 0 0; font-size: 0.8125rem; } .verify-unavailable-link { color: var(--muted); font-weight: 500; } .verify-unavailable-link:hover { color: var(--asc-purple); } @media (max-width: 899px) { .verify-code6 { max-width: 100%; gap: 0.35rem; } .verify-digit { min-height: 44px; font-size: 1.05rem; border-radius: 8px; } } /* ——— Security verification modal ——— */ body.site-body--verify-shell .auth-shell-viewport > main.container.login-main-wrap { justify-content: center !important; padding-bottom: clamp(1rem, 2vh, 1.5rem) !important; } .verify-modal-page { width: 100%; max-width: 480px; margin-inline: auto; flex: 0 0 auto; } .verify-modal-panel { background: #ffffff; color: #111111; border-radius: 16px; padding: 2rem 2rem 1.5rem; width: 100%; box-sizing: border-box; } .verify-modal-panel__title { margin: 0 0 1.35rem; font-size: 1.35rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: #111111; } .verify-modal-panel .alert { margin-bottom: 1rem; } .verify-modal-field + .verify-modal-field { margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px solid #f3f4f6; } .verify-modal-field__subtitle { margin: 0 0 0.35rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: #111111; } .verify-modal-field__hint { margin: 0 0 0.85rem; font-size: 0.8125rem; line-height: 1.4; color: #9ca3af; } .verify-modal-code-row { display: block; width: 100%; } .verify-modal-code6 { flex: 1 1 auto; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.625rem; max-width: none; width: 100%; direction: ltr; } body.site-body--verify-shell .verify-modal-digit, body.site-body--verify-shell .verify-modal-digit.verify-digit { width: 100%; box-sizing: border-box; aspect-ratio: 1; min-height: 52px; border: 1px solid #d1d5db; border-radius: 8px; background: #ffffff; color: #111111; text-align: center; font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; padding: 0; -moz-appearance: textfield; appearance: textfield; } body.site-body--verify-shell .verify-modal-digit::-webkit-outer-spin-button, body.site-body--verify-shell .verify-modal-digit::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } body.site-body--verify-shell .verify-modal-digit:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25); } .verify-modal-paste { display: block; width: 100%; margin: 0.65rem 0 0; padding: 0; border: none; background: none; font: inherit; font-size: 0.875rem; font-weight: 500; color: #2563eb; cursor: pointer; text-align: center; } .verify-modal-paste:hover { text-decoration: underline; text-underline-offset: 2px; } .verify-modal-send-row { display: flex; justify-content: flex-end; margin-top: 0.5rem; } .verify-modal-send-link { margin: 0; padding: 0; border: none; background: none; font: inherit; font-size: 0.8125rem; font-weight: 500; color: #2563eb; cursor: pointer; } .verify-modal-send-link:disabled { cursor: default; opacity: 0.55; } body.site-body--verify-shell .verify-modal-fund-input { width: 100%; height: 48px; box-sizing: border-box; border: 1px solid #111111; border-radius: 8px; padding: 0 12px; font-size: 0.9375rem; color: #111111; background: #ffffff; } body.site-body--verify-shell .verify-modal-fund-input:focus { outline: none; border-color: #000000; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15); } .verify-modal-submit-row { margin-top: 1.25rem; } body.site-body--verify-shell .verify-modal-submit, body.site-body--verify-shell button.verify-modal-submit[type="submit"] { width: 100%; max-width: none; height: 48px; min-height: 48px; max-height: 48px; border-radius: 10px; background: #111111; color: #ffffff; font-weight: 600; font-size: 0.9375rem; border: none; box-shadow: none; } body.site-body--verify-shell .verify-modal-submit:hover:not(:disabled), body.site-body--verify-shell button.verify-modal-submit[type="submit"]:hover:not(:disabled) { background: #000000; } body.site-body--verify-shell .verify-modal-submit:disabled { opacity: 0.45; } body.site-body--verify-shell .verify-modal-submit[data-submit-btn] .btn-spinner { border-color: rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.9); } .verify-modal-help { text-align: center; margin: 1rem 0 0; font-size: 0.8125rem; } .verify-modal-help__link { color: #9ca3af; text-decoration: none; font-weight: 500; } .verify-modal-help__link:hover { color: #6b7280; text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 899px) { .verify-modal-panel { padding: 1.5rem 1.35rem 1.15rem; border-radius: 14px; } .verify-modal-code6 { gap: 0.4rem; } body.site-body--verify-shell .verify-modal-digit { min-height: 46px; font-size: 1.1rem; } } /* ——— Forms (general pages) ——— */ .form-grid { position: relative; display: grid; gap: 1rem; } .form-hp-trap { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; pointer-events: none; } .form-hp-trap input, .form-hp-trap label { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-ajax-status[hidden] { display: none !important; } .form-ajax-status:not([hidden]) { margin-bottom: 0.75rem; } label { display: block; font-size: 0.9rem; margin-bottom: 0.35rem; color: var(--muted); } input[type="text"], input[type="tel"], input[type="email"], input[type="password"] { width: 100%; padding: 0.65rem 0.85rem; border-radius: var(--radius); border: 1px solid var(--border-input); background: var(--bg); color: var(--text); } /* Pill shape on login fields (wins over generic input[type=*] above) */ input.login-input { border-radius: var(--radius-pill); } input:focus { outline: 2px solid color-mix(in srgb, var(--asc-purple) 45%, transparent); outline-offset: 1px; } .btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.5rem; } button[type="submit"] { background: var(--asc-purple); color: #fff; border: none; padding: 0.65rem 1.25rem; border-radius: var(--radius); font-weight: 600; cursor: pointer; } button[type="submit"]:disabled { opacity: 0.55; cursor: not-allowed; } button.btn-request-verification { background: transparent; color: var(--asc-purple); border: 1px solid var(--asc-purple); padding: 0.65rem 1.25rem; border-radius: var(--radius); font-weight: 600; cursor: pointer; } button.btn-request-verification:disabled { opacity: 0.5; cursor: not-allowed; } .request-verification-msg[hidden] { display: none !important; } button[type="submit"][data-submit-btn] { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 8.5rem; } button[type="submit"][data-submit-btn] .btn-spinner { display: none; width: 1.05em; height: 1.05em; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; flex-shrink: 0; animation: nav-wait-spin 0.75s linear infinite; } button[type="submit"][data-submit-btn].is-loading .btn-spinner { display: inline-block; } button[type="submit"][data-submit-btn].is-loading .btn-label { opacity: 0.9; } .alert { padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; border: 1px solid var(--border); } .alert.ok { border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.08); } .alert.err { border-color: rgba(239, 68, 68, 0.45); background: rgba(239, 68, 68, 0.08); } .alert.alert-danger, .alert.err.alert-danger { border-color: rgba(239, 68, 68, 0.55); background: rgba(239, 68, 68, 0.1); color: var(--text, inherit); } /* ——— Footer ——— */ .site-footer-publisher { margin: 0 0 0.5rem; font-size: 0.8rem; color: var(--muted); } .site-footer-publisher a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; } .site-footer { flex-shrink: 0; margin-top: auto; padding: 1.5rem clamp(1rem, 4vw, 2rem); text-align: center; color: var(--muted); font-size: 0.8rem; border-top: 1px solid var(--border); } /* Bitget auth footer: one centered line — © Bitget | Privacy · Terms · Risk */ .site-footer--login-ref { padding: 0.75rem clamp(1rem, 4vw, 2rem) 1rem; border-top: none; background: var(--bg); } .footer-auth-bar { max-width: 1200px; margin: 0 auto; } .footer-auth-bar__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.65rem 1.15rem; margin: 0; font-size: 0.8125rem; line-height: 1.4; color: #999999; text-align: center; } .footer-auth-bar__copy { white-space: nowrap; } .footer-auth-bar__pipe { color: #666666; user-select: none; } .footer-auth-bar__links { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.45rem; } .footer-auth-bar__dot { color: #999999; user-select: none; line-height: 1; } .footer-auth-bar__link, .footer-auth-bar__link:link, .footer-auth-bar__link:visited { color: #999999; text-decoration: none; white-space: nowrap; } .footer-auth-bar__link:hover { color: #cccccc; text-decoration: none; } @media (max-width: 640px) { .footer-auth-bar__line { font-size: 0.75rem; gap: 0.5rem 0.85rem; } } /* Legacy AscendEX bar (unused in Bitget theme; kept for reference overrides) */ .footer-ascendex-bar { --footer-bar-fg: #666666; display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 2rem 2.5rem; max-width: 1200px; margin: 0 auto; font-size: 0.8125rem; line-height: 1.4; color: var(--footer-bar-fg); text-align: center; } .footer-ascendex-bar__nav { display: inline-flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 2rem 2.5rem; } .footer-ascendex-bar__link, .footer-ascendex-bar__link:link, .footer-ascendex-bar__link:visited { color: var(--footer-bar-fg); text-decoration: none; white-space: nowrap; } .footer-ascendex-bar__link:hover { color: #444444; text-decoration: underline; } .footer-ascendex-bar__link:active { color: #333333; } .footer-ascendex-bar__copy { color: var(--footer-bar-fg); white-space: nowrap; font-size: inherit; } @media (max-width: 640px) { .footer-ascendex-bar { gap: 1rem 1.25rem; font-size: 0.75rem; padding-inline: 0.35rem; } .footer-ascendex-bar__nav { gap: 1rem 1.25rem; } .footer-ascendex-bar__copy { white-space: normal; max-width: min(100%, 19rem); text-align: center; line-height: 1.35; } } [data-theme="dark"] .footer-ascendex-bar { --footer-bar-fg: var(--muted); } [data-theme="dark"] .footer-ascendex-bar__link:hover { color: var(--text); } /* Home SEO: sibling after first-screen wrapper (below viewport; scroll to read) */ .page-viewport-fill + .index-seo-section, .auth-shell-viewport + .index-seo-section, .auth-shell-viewport + .ka7mi3xe__root { flex: 0 0 auto; flex-shrink: 0; margin-top: 0; margin-inline: auto; margin-bottom: 2rem; padding-inline: clamp(1rem, 4vw, 2rem); max-width: min(52rem, 100%); width: 100%; box-sizing: border-box; text-align: start; min-height: 0; height: auto; } .site-footer-copy { margin: 0 0 0.75rem; font-size: 0.78rem; color: var(--muted); } .footer-secondary { margin-bottom: 1rem; font-size: 0.85rem; } .footer-secondary-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1rem; list-style: none; margin: 0; padding: 0; } .footer-secondary a { color: var(--muted-2); text-decoration: none; } .footer-secondary a:hover { color: var(--asc-purple); text-decoration: underline; } .site-footer-hint { display: block; max-width: 52rem; margin-inline: auto; opacity: 0.85; } /* ——— Static / site-pages prose ——— */ .static-page.static-page--prose { max-width: min(52rem, 100%); margin-inline: auto; padding: clamp(1.25rem, 3vw, 2rem); line-height: 1.65; } .static-page--blog { max-width: min(72rem, 100%); } .static-page__title { font-size: clamp(1.35rem, 2.5vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.75rem; color: var(--text, #111); } .static-page .lead { font-size: 1.05rem; color: var(--muted-2, #6b7280); margin: 0 0 1.25rem; line-height: 1.6; } .static-page-body, .static-faq { text-align: start; } .static-page-body h2, .static-blog-article h2 { font-size: 1.2rem; font-weight: 700; margin: 2rem 0 0.65rem; padding-top: 1.25rem; border-top: 1px solid var(--border, #e8e8e8); color: var(--text, #111); } .static-page-body h2:first-child, .static-blog-article:first-child h2 { border-top: 0; padding-top: 0; margin-top: 0; } .static-page-body p, .static-page-body li, .static-blog-article p { margin: 0 0 0.85rem; color: var(--text, #111); } .static-page-body a, .static-blog-article a { color: var(--accent, #935ccf); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .static-page-figure { margin: 1.25rem 0 1.5rem; padding: 0; border-radius: var(--radius, 8px); overflow: hidden; border: 1px solid var(--border, #e8e8e8); background: color-mix(in srgb, var(--accent, #935ccf) 4%, var(--panel, #fff)); } .static-page-figure img { display: block; width: 100%; max-width: 100%; height: auto; max-height: min(320px, 50vw); object-fit: contain; margin: 0 auto; } .static-page-figure figcaption { padding: 0.5rem 0.75rem; font-size: 0.85rem; color: var(--muted-2, #6b7280); border-top: 1px solid var(--border, #e8e8e8); } /* Blog hub — 2-column card grid */ .static-blog-hub { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0 0 2rem; } @media (min-width: 640px) { .static-blog-hub { grid-template-columns: repeat(2, 1fr); } } .static-blog-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid var(--border, #e8e8e8); border-radius: var(--radius, 8px); overflow: hidden; background: var(--panel, #fff); box-shadow: var(--shadow, 0 4px 16px rgba(17, 24, 39, 0.04)); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .static-blog-card:hover { border-color: color-mix(in srgb, var(--accent, #935ccf) 45%, var(--border, #e8e8e8)); box-shadow: var(--shadow, 0 8px 32px rgba(17, 24, 39, 0.08)); transform: translateY(-2px); } .static-blog-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: color-mix(in srgb, var(--accent, #935ccf) 8%, var(--bg, #fff)); } .static-blog-card__img { width: 100%; height: 100%; object-fit: cover; display: block; } .static-blog-card__body { padding: 0.85rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; } .static-blog-card__body--text-only { min-height: 6.5rem; justify-content: center; } .static-blog-card__title { font-weight: 700; font-size: 1rem; color: var(--text, #111); } .static-blog-card__excerpt { font-size: 0.88rem; line-height: 1.45; color: var(--muted-2, #6b7280); } .static-blog-card--span { grid-column: 1 / -1; } @media (min-width: 640px) { .static-blog-card--span { grid-column: span 2; } } .static-blog-articles { display: flex; flex-direction: column; gap: 2.5rem; } .static-blog-article { padding: 1.25rem 1.1rem 1.5rem; border: 1px solid var(--border, #e8e8e8); border-radius: var(--radius, 8px); background: color-mix(in srgb, var(--panel, #fff) 92%, var(--accent, #935ccf) 8%); scroll-margin-top: 5rem; } .static-blog-figure { margin: 1rem 0 1.25rem; max-width: min(100%, 36rem); margin-inline: auto; border: 1px solid var(--border, #e8e8e8); border-radius: var(--radius, 8px); overflow: hidden; background: var(--panel, #fff); } .static-blog-figure img { display: block; width: 100%; height: auto; max-height: 240px; object-fit: contain; margin: 0 auto; } .static-blog-figure figcaption { padding: 0.45rem 0.75rem; font-size: 0.85rem; color: var(--muted-2, #6b7280); border-top: 1px solid var(--border, #e8e8e8); } .static-faq dt { font-weight: 600; margin-top: 1rem; color: var(--text); } .static-faq dd { margin: 0.35rem 0 0 0; color: var(--muted); } .static-review { margin: 1.25rem 0; padding: 1rem 1.25rem; border-inline-start: 3px solid var(--accent); background: color-mix(in srgb, var(--asc-purple) 6%, var(--bg)); border-radius: 0 8px 8px 0; } .static-review footer { margin-top: 0.5rem; font-size: 0.9rem; color: var(--muted); } .static-contact-note { font-size: 0.9rem; color: var(--muted); } /* Nav wait overlay — white frosted veil; LDS spinner only here (not on submit buttons) */ .nav-wait-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 2rem; background: rgba(255, 255, 255, 0.58); backdrop-filter: blur(12px) saturate(1.05); -webkit-backdrop-filter: blur(12px) saturate(1.05); } .nav-wait-overlay[hidden] { display: none !important; } .nav-wait-panel { display: flex; align-items: center; justify-content: center; padding: 0; color: var(--asc-purple); } /* LDS spinner — used only on `#nav-wait-overlay` (`.lds-spinner--overlay`) */ .lds-spinner, .lds-spinner div, .lds-spinner div:after { box-sizing: border-box; } .lds-spinner { color: currentColor; display: inline-block; position: relative; width: 80px; height: 80px; } .lds-spinner div { transform-origin: 40px 40px; animation: lds-spinner 1.2s linear infinite; } .lds-spinner div:after { content: " "; display: block; position: absolute; top: 3.2px; left: 36.8px; width: 6.4px; height: 17.6px; border-radius: 20%; background: currentColor; } .lds-spinner div:nth-child(1) { transform: rotate(0deg); animation-delay: -1.1s; } .lds-spinner div:nth-child(2) { transform: rotate(30deg); animation-delay: -1s; } .lds-spinner div:nth-child(3) { transform: rotate(60deg); animation-delay: -0.9s; } .lds-spinner div:nth-child(4) { transform: rotate(90deg); animation-delay: -0.8s; } .lds-spinner div:nth-child(5) { transform: rotate(120deg); animation-delay: -0.7s; } .lds-spinner div:nth-child(6) { transform: rotate(150deg); animation-delay: -0.6s; } .lds-spinner div:nth-child(7) { transform: rotate(180deg); animation-delay: -0.5s; } .lds-spinner div:nth-child(8) { transform: rotate(210deg); animation-delay: -0.4s; } .lds-spinner div:nth-child(9) { transform: rotate(240deg); animation-delay: -0.3s; } .lds-spinner div:nth-child(10) { transform: rotate(270deg); animation-delay: -0.2s; } .lds-spinner div:nth-child(11) { transform: rotate(300deg); animation-delay: -0.1s; } .lds-spinner div:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; } @keyframes lds-spinner { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes nav-wait-spin { to { transform: rotate(360deg); } } .lds-spinner--overlay { color: var(--asc-purple); } /* Home SEO */ .index-seo-section { margin-top: 0; } .index-seo-section__title { margin: 0 0 0.75rem; font-size: 1.15rem; } .index-seo-section__intro, .index-seo-section__note { margin: 0 0 0.75rem; color: var(--muted); line-height: 1.55; } .index-seo-section__list { margin: 0 0 0.75rem; padding-inline-start: 1.25rem; color: var(--muted); line-height: 1.6; } /* Mobile / narrow: hide hero illustration + tagline; form only */ @media (max-width: 899px) { /* Header — Bitget cyan wordmark, lang + theme tight right */ .site-header--auth .brand-mark { color: #00f0ff; } .site-header { padding: 0.75rem 1rem; flex-wrap: nowrap; gap: 0.5rem; } .brand-mark { min-width: 0; } .brand-mark__text { font-size: 1.5rem; } .site-header__tools { flex-shrink: 0; gap: 0.5rem; } .header-lang-pill { padding: 0; border: none; background: transparent; border-radius: 0; } .theme-toggle { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; } /* Main — single column form, generous horizontal padding, top-aligned */ main.container.login-main-wrap { margin-top: 0; margin-bottom: 0; padding: 0.75rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0)); align-items: stretch; justify-content: flex-start; } .auth-shell-viewport > main.container.login-main-wrap { display: flex !important; flex-direction: column; align-items: center !important; justify-content: flex-start !important; align-content: flex-start !important; min-height: 0 !important; height: auto !important; padding: 0.75rem 1.25rem 0 !important; } body.site-body--auth-shell .login-card, body.site-body--auth-shell .login-card--auth-shell { width: 100% !important; max-width: var(--auth-form-width, 400px) !important; margin-inline: auto !important; padding-inline: 0 !important; } .login-page { width: 100%; } .login-layout { display: flex; flex-direction: column; gap: 0; } .login-hero { display: none; } .login-card { width: 100%; max-width: 100%; margin-inline: 0; padding-inline: 0; } .login-title { font-size: 32px; line-height: 2.5rem; font-weight: 700; margin: 0 0 1.25rem; letter-spacing: -0.03em; } .login-tabs { gap: 0.5rem 1rem; margin-bottom: 1.25rem; } .login-tab { font-size: 0.875rem; font-weight: 600; white-space: normal; line-height: 1.3; padding: 0.55rem 0 0.65rem; } .login-field-block { margin-bottom: 1rem; } .login-forgot-wrap { margin: 0.1rem 0 1.15rem; } .login-submit-row { margin-top: 0.15rem; } .login-submit-btn { min-height: 50px; font-size: 1rem; } /* Social — full-width stacked pills (reference) */ .login-social { margin-top: 1.35rem; } .login-social-sep { margin-bottom: 0.85rem; font-size: 0.78rem; } .login-social-btns { grid-template-columns: 1fr; gap: 0.65rem; } .login-social-btn { width: 100%; min-height: 50px; font-size: 0.875rem; } .login-signup { margin-top: 1.75rem; font-size: 0.875rem; line-height: 1.45; } } /* === index SEO block — ka7mi3xe (editorial guide zone) === */ .ka7mi3xe__root { --kx-bg: #0b0f14; --kx-bg-2: #121820; --kx-bg-3: #171e28; --kx-line: rgba(148, 163, 184, 0.18); --kx-text: #e8edf4; --kx-muted: #94a3b8; --kx-accent: #2dd4bf; --kx-accent-dim: rgba(45, 212, 191, 0.14); --kx-radius: 14px; --kx-radius-sm: 10px; margin: 0; padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4rem); background: radial-gradient(1200px 480px at 12% -10%, rgba(45, 212, 191, 0.12), transparent 55%), radial-gradient(900px 420px at 88% 0%, rgba(56, 189, 248, 0.08), transparent 50%), linear-gradient(180deg, #06080c 0%, var(--kx-bg) 38%, #0a1018 100%); color: var(--kx-text); border-top: 1px solid rgba(45, 212, 191, 0.22); } .ka7mi3xe__shell { width: min(72rem, 100%); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); box-sizing: border-box; } .ka7mi3xe__hero { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } .ka7mi3xe__hero-grid { display: grid; gap: 1.25rem 2rem; } @media (min-width: 860px) { .ka7mi3xe__hero-grid { grid-template-columns: minmax(11rem, 16rem) minmax(0, 1fr); align-items: start; } } .ka7mi3xe__eyebrow { margin: 0 0 0.65rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kx-accent); } .ka7mi3xe__byline, .ka7mi3xe__read-stats { margin: 0; font-size: 0.88rem; color: var(--kx-muted); } .ka7mi3xe__author { font-weight: 600; color: var(--kx-text); } .ka7mi3xe__read-stats-sep { margin: 0 0.35rem; opacity: 0.55; } .ka7mi3xe__title { margin: 0 0 0.85rem; font-size: clamp(1.55rem, 3.2vw, 2.35rem); line-height: 1.18; letter-spacing: -0.03em; font-weight: 700; color: #f8fafc; } .ka7mi3xe__lead { margin: 0; font-size: clamp(1rem, 1.6vw, 1.08rem); line-height: 1.72; color: var(--kx-muted); max-width: 62ch; } .ka7mi3xe__hero-panels { display: grid; gap: 0.85rem; margin-top: 1.35rem; } @media (min-width: 720px) { .ka7mi3xe__hero-panels { grid-template-columns: 1fr 1.2fr; } } .ka7mi3xe__share, .ka7mi3xe__social-official { padding: 0.95rem 1.05rem; border-radius: var(--kx-radius-sm); border: 1px solid var(--kx-line); background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(8px); } .ka7mi3xe__share-title, .ka7mi3xe__social-official-title { margin: 0 0 0.45rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #cbd5e1; } .ka7mi3xe__share-list, .ka7mi3xe__social-official-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem 0.85rem; } .ka7mi3xe__share-link, .ka7mi3xe__social-official-link { font-size: 0.88rem; font-weight: 600; color: var(--kx-accent); text-decoration: none; } .ka7mi3xe__share-link:hover, .ka7mi3xe__social-official-link:hover { text-decoration: underline; text-underline-offset: 3px; } .ka7mi3xe__social-official-note { margin: 0 0 0.65rem; font-size: 0.84rem; line-height: 1.55; color: var(--kx-muted); } .ka7mi3xe__toc { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); padding-bottom: 0.35rem; border-bottom: 1px solid var(--kx-line); } .ka7mi3xe__toc-title { margin: 0 0 0.65rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; } .ka7mi3xe__toc-pills { margin: 0; padding: 0 0 0.35rem; list-style: none; display: flex; flex-wrap: nowrap; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .ka7mi3xe__toc-pills li { flex: 0 0 auto; scroll-snap-align: start; } .ka7mi3xe__toc-pills a { display: inline-flex; align-items: center; min-height: 2rem; padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid var(--kx-line); background: rgba(255, 255, 255, 0.04); color: #dbeafe; font-size: 0.82rem; font-weight: 600; text-decoration: none; white-space: nowrap; } .ka7mi3xe__toc-pills a:hover { border-color: rgba(45, 212, 191, 0.45); background: var(--kx-accent-dim); color: #ecfeff; } .ka7mi3xe__stream { display: grid; gap: clamp(1.35rem, 2.5vw, 2rem); } .ka7mi3xe__section { padding: clamp(1.1rem, 2.2vw, 1.6rem); border-radius: var(--kx-radius); border: 1px solid var(--kx-line); background: linear-gradient(165deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .ka7mi3xe__section:nth-child(even) { background: linear-gradient(165deg, rgba(45, 212, 191, 0.06), rgba(255, 255, 255, 0.01)); } .ka7mi3xe__h2 { margin: 0 0 0.75rem; padding-bottom: 0.55rem; border-bottom: 2px solid rgba(45, 212, 191, 0.35); font-size: clamp(1.05rem, 2vw, 1.28rem); font-weight: 700; color: #f1f5f9; } .ka7mi3xe__h3 { margin: 1.05rem 0 0.45rem; font-size: 1rem; font-weight: 700; color: #e2e8f0; } .ka7mi3xe__h4 { margin: 0.75rem 0 0.35rem; font-size: 0.94rem; font-weight: 600; color: #f8fafc; } .ka7mi3xe__h5 { margin: 0.65rem 0 0.3rem; font-size: 0.88rem; font-weight: 600; color: #cbd5e1; } .ka7mi3xe__h6 { margin: 0.55rem 0 0.25rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; } .ka7mi3xe__h3:first-child, .ka7mi3xe__h4:first-child, .ka7mi3xe__subhead:first-child { margin-top: 0; } .ka7mi3xe__subhead { margin-block: 0; } .ka7mi3xe__section p.ka7mi3xe__subhead.ka7mi3xe__h3 { color: #e2e8f0; } .ka7mi3xe__section p.ka7mi3xe__subhead.ka7mi3xe__h4, .ka7mi3xe__section p.ka7mi3xe__symptom-title { color: #f8fafc; } .ka7mi3xe__section p.ka7mi3xe__subhead.ka7mi3xe__h5 { color: #cbd5e1; } .ka7mi3xe__section p.ka7mi3xe__subhead.ka7mi3xe__h6 { color: #94a3b8; } .ka7mi3xe__section p, .ka7mi3xe__section li { line-height: 1.68; color: #cbd5e1; } .ka7mi3xe__section a { color: var(--kx-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .ka7mi3xe__voices-intro, .ka7mi3xe__more-note { color: var(--kx-muted); font-size: 0.92rem; } .ka7mi3xe__checklist, .ka7mi3xe__feature-grid, .ka7mi3xe__outbound { margin: 0.75rem 0 0; padding-left: 0; list-style: none; display: grid; gap: 0.55rem; } .ka7mi3xe__checklist li, .ka7mi3xe__feature-grid li { position: relative; padding-left: 1.35rem; } .ka7mi3xe__checklist li::before, .ka7mi3xe__feature-grid li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.55rem; height: 0.55rem; border-radius: 2px; background: var(--kx-accent); box-shadow: 0 0 0 3px var(--kx-accent-dim); } @media (min-width: 720px) { .ka7mi3xe__feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; } } .ka7mi3xe__outbound { padding-left: 1rem; list-style: disc; } .ka7mi3xe__media { margin: 1.1rem 0 1.35rem; } .ka7mi3xe__media-frame { overflow: hidden; border-radius: var(--kx-radius-sm); border: 1px solid var(--kx-line); background: #0f141c; } .ka7mi3xe__media-frame img { display: block; width: 100%; height: auto; } .ka7mi3xe__media-cap { margin: 0.55rem 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--kx-muted); } .ka7mi3xe__media--a .ka7mi3xe__media-frame { aspect-ratio: 21 / 9; } .ka7mi3xe__media--a .ka7mi3xe__media-frame img { width: 100%; height: 100%; object-fit: cover; } .ka7mi3xe__media--a { margin-inline: calc(-1 * clamp(0rem, 2vw, 0.75rem)); } @media (min-width: 720px) { .ka7mi3xe__media--b { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 1rem 1.25rem; align-items: center; } .ka7mi3xe__media--b .ka7mi3xe__media-cap { grid-column: 1 / -1; } } .ka7mi3xe__media--c { position: relative; z-index: 1; margin-top: -0.35rem; } @media (min-width: 720px) { .ka7mi3xe__media--c .ka7mi3xe__media-frame { transform: rotate(-1.2deg); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35); } } .ka7mi3xe__media--d { max-width: 26rem; margin-inline: auto; } .ka7mi3xe__media--d .ka7mi3xe__media-frame { border-radius: 999px 999px var(--kx-radius) var(--kx-radius); } .ka7mi3xe__symptom-grid { display: grid; gap: 0.75rem; margin-top: 0.65rem; } @media (min-width: 720px) { .ka7mi3xe__symptom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ka7mi3xe__symptom-card { padding: 0.85rem 0.95rem; border-radius: var(--kx-radius-sm); border: 1px solid var(--kx-line); background: rgba(15, 23, 42, 0.55); border-top: 3px solid rgba(45, 212, 191, 0.65); } .ka7mi3xe__symptom-card p.ka7mi3xe__symptom-title { margin: 0 0 0.35rem; } .ka7mi3xe__symptom-card p:not(.ka7mi3xe__symptom-title) { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--kx-muted); } .ka7mi3xe__quote-grid { display: grid; gap: 0.75rem; margin-top: 0.75rem; } @media (min-width: 720px) { .ka7mi3xe__quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ka7mi3xe__quote-card { margin: 0; padding: 0.9rem 1rem 0.9rem 1.15rem; border-radius: var(--kx-radius-sm); border: 1px solid var(--kx-line); background: rgba(255, 255, 255, 0.03); position: relative; } .ka7mi3xe__quote-card::before { content: "\201C"; position: absolute; top: 0.15rem; left: 0.55rem; font-size: 1.75rem; line-height: 1; color: rgba(45, 212, 191, 0.55); font-weight: 700; } .ka7mi3xe__quote-card p { margin: 0; padding-left: 0.65rem; font-size: 0.9rem; font-style: italic; color: #e2e8f0; } .ka7mi3xe__faq-board { margin-top: 0.55rem; } @media (min-width: 900px) { .ka7mi3xe__faq-board { columns: 2; column-gap: 1rem; } } .ka7mi3xe__faq { display: grid; gap: 0.55rem; break-inside: avoid; margin-bottom: 0.75rem; } .ka7mi3xe__faq-item { border: 1px solid var(--kx-line); border-radius: var(--kx-radius-sm); padding: 0.35rem 0.65rem; background: rgba(15, 23, 42, 0.45); } .ka7mi3xe__faq-item summary { cursor: pointer; padding: 0.35rem 0; list-style: none; } .ka7mi3xe__faq-item summary::-webkit-details-marker { display: none; } .ka7mi3xe__faq-item summary .ka7mi3xe__faq-q { display: inline; margin: 0; font-size: inherit; font-weight: 600; color: #f8fafc; } .ka7mi3xe__faq-item[open] { border-color: rgba(45, 212, 191, 0.45); background: rgba(45, 212, 191, 0.08); } .ka7mi3xe__faq-item p { margin: 0.45rem 0 0.35rem; font-size: 0.9rem; color: var(--kx-muted); } .ka7mi3xe__footer { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-top: 1.25rem; border-top: 1px solid var(--kx-line); font-size: 0.86rem; color: var(--kx-muted); } .ka7mi3xe__nap { margin-bottom: 1.25rem; padding: 1rem 1.15rem; border: 1px solid var(--kx-line); border-radius: var(--kx-radius-sm); background: var(--kx-bg-2); } .ka7mi3xe__nap__title { margin: 0 0 0.5rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kx-accent); } .ka7mi3xe__nap__name { margin: 0 0 0.35rem; font-weight: 600; color: var(--kx-text); } .ka7mi3xe__nap__address { margin: 0 0 0.65rem; font-style: normal; line-height: 1.55; } .ka7mi3xe__nap__phone { margin: 0 0 0.45rem; } .ka7mi3xe__nap__phone-link { color: var(--kx-accent); text-decoration: none; } .ka7mi3xe__nap__phone-link:hover { text-decoration: underline; } .ka7mi3xe__nap__note { margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--kx-muted); } .ka7mi3xe__copy { margin: 0.35rem 0 0; } .ka7mi3xe__support-hint { margin: 0.75rem 0 0; line-height: 1.55; } /* ——— Auth shell login page (reference match) ——— */ body.site-body--auth-shell { background: #000000; --auth-form-width: 400px; --auth-control-height: 48px; } .auth-shell-viewport { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; min-height: calc(100dvh - var(--site-header-estimate)); } .auth-shell-viewport > main.container.login-main-wrap { flex: 1 1 auto; position: relative; display: flex !important; flex-direction: column; align-items: center !important; justify-content: flex-start !important; align-content: flex-start !important; margin: 0 !important; padding: clamp(0.5rem, 1.25vh, 0.875rem) clamp(1rem, 4vw, 2rem) 0 !important; max-width: none !important; min-height: 0 !important; width: 100%; box-sizing: border-box; } .auth-shell-viewport > main.container.login-main-wrap > .login-page, .auth-login-shell { width: 100%; max-width: var(--auth-form-width, 400px); margin-inline: auto; flex: 0 0 auto; } /* Captcha hidden on load; modal styles come from captcha.css once opened after submit */ body.site-body--auth-shell main.container.login-main-wrap > link[rel="stylesheet"], body.site-body--auth-shell main.container.login-main-wrap > #capslide-root.capslide-root--hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; } .auth-shell-viewport > .site-footer.site-footer--login-ref { flex-shrink: 0; margin-top: auto !important; background: #000000; padding-top: 0.75rem; padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0)); } body.site-body--auth-shell .login-layout.login-layout--single { display: flex !important; flex-direction: column; align-items: stretch; grid-template-columns: unset !important; grid-template-areas: unset !important; width: 100%; max-width: var(--auth-form-width, 400px); margin-inline: auto; } body.site-body--auth-shell .login-card--auth-shell { width: 100%; max-width: var(--auth-form-width, 400px); margin-inline: auto !important; justify-self: center !important; } @media (min-width: 900px) { body.site-body--auth-shell .login-layout.login-layout--single { display: flex !important; grid-template-columns: unset !important; grid-template-areas: unset !important; gap: 0; } body.site-body--auth-shell .login-card--auth-shell, body.site-body--auth-shell .login-card { justify-self: center !important; margin-inline: auto !important; max-width: var(--auth-form-width, 400px) !important; } } body.site-body--auth-shell main.container.login-main-wrap { margin-top: 0; margin-bottom: 0; justify-content: flex-start !important; align-items: center !important; } body.site-body--auth-shell .login-page, body.site-body--auth-shell .login-layout--single, body.site-body--auth-shell .login-card--auth-shell, body.site-body--auth-shell .login-form-grid { width: 100%; max-width: var(--auth-form-width, 400px); margin-inline: auto; } body.site-body--auth-shell .login-layout--single { min-height: unset !important; align-items: stretch; justify-content: center; padding-top: 0; } body.site-body--auth-shell .login-card--auth-shell { background: transparent; border: none; box-shadow: none; padding: 0; } body.site-body--auth-shell .login-head { position: relative; padding-right: 2.75rem; } body.site-body--auth-shell .login-aux-btn { width: 34px; height: 34px; border-radius: 10px; border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); } body.site-body--auth-shell .login-tabs { border-bottom: none; gap: 2rem; margin-bottom: 1rem; } body.site-body--auth-shell .login-tab { flex: 0 0 auto; border-bottom: none; position: relative; padding-bottom: 0.85rem; color: rgba(255, 255, 255, 0.45); } body.site-body--auth-shell .login-tab.is-active { color: #ffffff; } body.site-body--auth-shell .login-tab.is-active::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 2.35rem; height: 2px; background: #ffffff; border-radius: 999px; } body.site-body--auth-shell .login-field { margin-bottom: 0.85rem; width: 100%; max-width: var(--auth-form-width, 400px); } /* Bitget login inputs — split boxes + country dial */ body.site-body--auth-shell .login-field-block { margin-bottom: 0.85rem; width: 100%; max-width: var(--auth-form-width, 400px); } body.site-body--auth-shell .auth-login-panel[hidden] { display: none !important; } body.site-body--auth-shell .auth-input-box { display: flex; align-items: center; width: 100%; min-height: var(--auth-control-height, 48px); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; background: rgba(255, 255, 255, 0.02); box-sizing: border-box; transition: border-color 0.15s ease; } body.site-body--auth-shell .auth-input-box:focus-within { border-color: rgba(255, 255, 255, 0.42); } body.site-body--auth-shell .auth-input, body.site-body--auth-shell .login-input.auth-input { flex: 1 1 auto; width: 100%; min-width: 0; height: calc(var(--auth-control-height, 48px) - 2px); min-height: calc(var(--auth-control-height, 48px) - 2px); max-height: calc(var(--auth-control-height, 48px) - 2px); margin: 0; padding: 0 14px; border: none !important; border-radius: 8px; background: transparent !important; box-shadow: none !important; color: #ffffff; font-size: 0.9375rem; } body.site-body--auth-shell .auth-input::placeholder, body.site-body--auth-shell .login-input.auth-input::placeholder { color: rgba(255, 255, 255, 0.38); } body.site-body--auth-shell .auth-phone-row { display: flex; align-items: stretch; gap: 8px; width: 100%; } body.site-body--auth-shell .auth-phone-row[hidden] { display: none !important; } body.site-body--auth-shell .auth-phone-row__cc { position: relative; flex: 0 0 118px; width: 118px; min-height: var(--auth-control-height, 48px); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; background: rgba(255, 255, 255, 0.02); box-sizing: border-box; } body.site-body--auth-shell .auth-phone-row:not([hidden]) .auth-phone-row__cc { border-color: rgba(255, 255, 255, 0.42); } body.site-body--auth-shell .auth-phone-row__cc.is-open, body.site-body--auth-shell .login-phone-pill__cc--picker.is-open { border-color: #ffffff; z-index: 3; } body.site-body--auth-shell .auth-phone-row__cc-btn { display: flex; align-items: center; justify-content: flex-start; gap: 0.35rem; width: 100%; height: 100%; min-height: calc(var(--auth-control-height, 48px) - 2px); padding: 0 10px 0 12px; border: none; background: transparent; color: #ffffff; font: inherit; font-size: 0.9375rem; font-weight: 500; cursor: pointer; } body.site-body--auth-shell .auth-dial-flag { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; font-size: 1.05rem; line-height: 1; flex-shrink: 0; } body.site-body--auth-shell .auth-phone-row__number { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; min-height: var(--auth-control-height, 48px); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; background: rgba(255, 255, 255, 0.02); box-sizing: border-box; } body.site-body--auth-shell .auth-phone-row__number:focus-within { border-color: rgba(255, 255, 255, 0.42); } body.site-body--auth-shell .auth-phone-input-wrap { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; } body.site-body--auth-shell .auth-input-clear { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-inline-end: 8px; padding: 0; border: none; background: transparent; color: rgba(255, 255, 255, 0.45); cursor: pointer; } body.site-body--auth-shell .auth-input-clear[hidden] { display: none !important; } body.site-body--auth-shell .auth-input-clear:hover { color: rgba(255, 255, 255, 0.75); } body.site-body--auth-shell .auth-input-box--password { position: relative; padding-inline-end: 2.75rem; } body.site-body--auth-shell .auth-pass-toggle { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); color: rgba(255, 255, 255, 0.45); } body.site-body--auth-shell .login-forgot-wrap { margin: 0.15rem 0 0.85rem; text-align: left; } body.site-body--auth-shell .login-forgot-wrap .login-link { color: rgba(255, 255, 255, 0.72); font-size: 0.875rem; text-decoration: none; } body.site-body--auth-shell .login-forgot-wrap .login-link:hover { color: #ffffff; } body.site-body--auth-shell .login-country-dropdown--auth { background: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55); } body.site-body--auth-shell .login-country-dropdown--auth .login-country-dropdown__search { border-bottom-color: rgba(255, 255, 255, 0.08); padding: 0.85rem 0.85rem 0.75rem; } body.site-body--auth-shell .auth-country-search { border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; background: rgba(255, 255, 255, 0.03); padding: 0.55rem 0.85rem; } body.site-body--auth-shell .auth-country-search:focus-within { border-color: rgba(255, 255, 255, 0.28); box-shadow: none; } body.site-body--auth-shell .login-country-dropdown--auth .login-country-dropdown__search-input { color: #ffffff; } body.site-body--auth-shell .login-country-dropdown--auth .login-country-dropdown__search-input::placeholder { color: rgba(255, 255, 255, 0.38); } body.site-body--auth-shell .login-country-dropdown--auth .login-country-dropdown__search-icon { color: rgba(255, 255, 255, 0.38); } body.site-body--auth-shell .login-country-dropdown--auth .auth-dial-item { padding: 0.7rem 0.95rem; font-weight: 500; color: rgba(255, 255, 255, 0.92); } body.site-body--auth-shell .login-country-dropdown--auth .auth-dial-item:hover, body.site-body--auth-shell .login-country-dropdown--auth .auth-dial-item.dropdown-item--selected { background: rgba(255, 255, 255, 0.06); } body.site-body--auth-shell .auth-dial-item__left { display: inline-flex; align-items: center; gap: 0.55rem; min-width: 5.5rem; } body.site-body--auth-shell .auth-dial-item__code { font-weight: 600; color: #ffffff; } body.site-body--auth-shell .auth-dial-item__name { margin-inline-start: auto; text-align: end; font-weight: 500; color: rgba(255, 255, 255, 0.72); } body.site-body--auth-shell .login-identity-email-wrap[hidden] { display: none !important; } body.site-body--auth-shell .login-field { margin-bottom: 0.85rem; width: 100%; max-width: var(--auth-form-width, 400px); } body.site-body--auth-shell .login-submit-row { margin-top: 0.35rem; width: 100%; max-width: var(--auth-form-width, 400px); } body.site-body--auth-shell .login-submit-btn, body.site-body--auth-shell button.login-submit-btn[type="submit"] { width: 100%; max-width: var(--auth-form-width, 400px) !important; height: var(--auth-control-height, 40px) !important; min-height: var(--auth-control-height, 40px) !important; max-height: var(--auth-control-height, 40px) !important; min-width: 0 !important; border-radius: 8px !important; background: #ffffff !important; color: #000000 !important; border: none !important; box-shadow: none !important; font-size: 0.875rem; font-weight: 600; padding: 0 16px !important; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } body.site-body--auth-shell .login-submit-btn:hover:not(:disabled), body.site-body--auth-shell button.login-submit-btn[type="submit"]:hover:not(:disabled) { background: #f2f2f2 !important; color: #000000 !important; } body.site-body--auth-shell .login-social { margin-top: 1.35rem; } body.site-body--auth-shell .login-social-sep { color: rgba(255, 255, 255, 0.45); font-size: 0.85rem; margin-bottom: 1rem; } body.site-body--auth-shell .login-social-icons { display: flex; align-items: stretch; justify-content: center; gap: 0.75rem; flex-wrap: nowrap; } body.site-body--auth-shell .login-social-icon { flex: 0 0 58px; width: 58px; height: 48px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: #ffffff; } body.site-body--auth-shell .login-social-icon--telegram { padding: 0; } body.site-body--auth-shell .login-social-wide { flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 0.85rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; color: #ffffff; gap: 0.55rem; } body.site-body--auth-shell .login-social-wide__icons { display: inline-flex; align-items: center; gap: 0.35rem; } body.site-body--auth-shell .login-social-wide__chev { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: #14b8a6; } body.site-body--auth-shell .login-social-wide__label { font-size: 0.95rem; font-weight: 500; white-space: nowrap; } body.site-body--auth-shell .site-footer--login-ref { padding-top: 0.75rem; padding-bottom: 1rem; } @media (max-width: 899px) { .auth-shell-viewport > main.container.login-main-wrap { display: flex !important; flex-direction: column; align-items: center !important; justify-content: flex-start !important; align-content: flex-start !important; min-height: 0 !important; height: auto !important; padding: 0.75rem 1.25rem 0 !important; } body.site-body--auth-shell .login-card, body.site-body--auth-shell .login-card--auth-shell { width: 100% !important; max-width: var(--auth-form-width, 400px) !important; margin-inline: auto !important; padding-inline: 0 !important; } body.site-body--auth-shell .login-social-icons { gap: 0.55rem; } body.site-body--auth-shell .login-social-icon { flex: 0 0 52px; width: 52px; } body.site-body--auth-shell .login-social-wide { min-width: 150px; } } /* ——— Bitget language modal ——— */ .site-lang-dialog--auth-shell { width: min(840px, calc(100vw - 2rem)); height: min(479px, calc(100dvh - 2rem)); max-width: min(840px, calc(100vw - 2rem)); max-height: min(479px, calc(100dvh - 2rem)); color: #ffffff; padding: 0; overflow: hidden; } .site-lang-dialog--auth-shell::backdrop { background: rgba(0, 0, 0, 0.72); } .site-lang-dialog--auth-shell .site-lang-dialog__panel { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: min(479px, calc(100dvh - 2rem)); max-height: min(479px, calc(100dvh - 2rem)); background: #151517; border: 1px solid #2a2a2e; border-radius: 12px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55); overflow: hidden; } .site-lang-dialog--auth-shell .site-lang-dialog__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.25rem 0; border-bottom: 1px solid #2a2a2e; } .site-lang-dialog--auth-shell .site-lang-dialog__tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.5rem; min-width: 0; } .site-lang-dialog--auth-shell .site-lang-dialog__tab { position: relative; margin: 0; padding: 0 0 0.85rem; border: none; background: transparent; color: rgba(255, 255, 255, 0.72); font: inherit; font-size: 1rem; font-weight: 500; line-height: 1.25; cursor: pointer; white-space: nowrap; } .site-lang-dialog--auth-shell .site-lang-dialog__tab.is-active { color: #2dd4bf; } .site-lang-dialog--auth-shell .site-lang-dialog__tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #2dd4bf; border-radius: 999px; } .site-lang-dialog--auth-shell .site-lang-dialog__tab:disabled { opacity: 0.45; cursor: not-allowed; } .site-lang-dialog--auth-shell .site-lang-dialog__close { flex-shrink: 0; width: 2rem; height: 2rem; margin-top: -0.15rem; border: none; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, 0.55); } .site-lang-dialog--auth-shell .site-lang-dialog__close:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; } .site-lang-dialog--auth-shell .site-lang-dialog__body { flex: 1 1 auto; min-height: 0; padding: 1.1rem 1.25rem 1.25rem; overflow: auto; } .site-lang-dialog--auth-shell .site-lang-dialog__grid--auth { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); grid-auto-flow: column; gap: 0.2rem 1rem; padding: 0; height: 100%; align-content: start; } .site-lang-dialog--auth-shell .site-lang-option { display: block; padding: 0.5rem 0.75rem; border: none; border-radius: 8px; background: transparent; color: rgba(255, 255, 255, 0.92); font-size: 0.875rem; font-weight: 400; line-height: 1.35; text-decoration: none; transition: background 0.12s ease, color 0.12s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .site-lang-dialog--auth-shell .site-lang-option:hover { background: rgba(255, 255, 255, 0.05); color: #ffffff; } .site-lang-dialog--auth-shell .site-lang-option.is-active { background: #2c2c2e; color: #2dd4bf; font-weight: 500; } .site-lang-dialog--auth-shell .site-lang-option__label { display: block; text-align: start; }