/* ============================================================ Nexthub AI — 复刻 0.1.127 的「左右分屏星空」登录/注册页作用域: 仅 (登录/注册/找回等) 左侧 Hero 由 nexthub-auth.js 注入到层(fixed)，不干扰 Vue ============================================================ */ /* —— 认证页深蓝底 —— */ html.nexthub-auth, html.nexthub-auth body { background: #050e23 !important; } /* ================= 左侧 Hero 面板(桌面端) ================= */ #nx-hero { display: none; } @media (min-width: 1024px) { html.nexthub-auth #nx-hero { display: flex; flex-direction: column; justify-content: center; position: fixed; left: 0; top: 0; width: 50vw; height: 100vh; padding: 0 5rem; box-sizing: border-box; overflow: hidden; z-index: 1; background: radial-gradient(720px 520px at 28% 22%, rgba(14,165,233,.22), transparent 60%), radial-gradient(620px 600px at 72% 82%, rgba(2,132,199,.16), transparent 60%), linear-gradient(160deg, #07173a 0%, #050e23 62%); } /* 把右侧表单推进右半屏 —— 纯 CSS 命中, 不依赖 JS 加类, 避免渲染后再跳动 */ html.nexthub-auth #app .min-h-screen.justify-center, html.nexthub-auth .nx-shell { padding-left: 50vw !important; } } /* 粒子点层 */ #nx-hero .nx-dots { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } #nx-hero .float-dot { position: absolute; bottom: -14px; border-radius: 50%; opacity: 0; animation-name: nxRise; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes nxRise { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateY(-112vh); opacity: 0; } } @media (prefers-reduced-motion: reduce) { #nx-hero .float-dot { animation: none; opacity: .6; } } /* Hero 内容 */ #nx-hero .nx-inner { position: relative; z-index: 2; } #nx-hero .nx-logo { width: 64px; height: 64px; margin-bottom: 1.5rem; filter: drop-shadow(0 0 22px rgba(56,189,248,.55)); } #nx-hero .nx-eyebrow { color: #7dd3fc; font-size: .75rem; font-weight: 600; letter-spacing: .42em; text-transform: uppercase; margin-bottom: 1rem; text-shadow: 0 0 10px rgba(125,211,252,.6); animation: nxFlicker 3.6s linear infinite; } @keyframes nxFlicker { 0%,18%,22%,24%,55%,57%,100% { opacity: 1; text-shadow: 0 0 10px rgba(125,211,252,.6); } 20%,23%,56% { opacity: .35; text-shadow: none; } } #nx-hero .nx-title { font-size: 3rem; line-height: 1.1; font-weight: 700; letter-spacing: .04em; margin: 0 0 1.25rem; } #nx-hero .nx-title .tch { display: inline-block; background: linear-gradient(100deg, #cfe9fb, #7dd3fc 50%, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent; animation: nxJump 1.9s ease-in-out infinite; } @keyframes nxJump { 0%,100% { transform: translateY(0); } 28% { transform: translateY(-12px); } 56% { transform: translateY(0); } } #nx-hero .nx-subtitle { max-width: 32rem; line-height: 2.15; } #nx-hero .nx-sub-line { font-size: 3.3rem; font-weight: 600; letter-spacing: .2em; white-space: nowrap; /* 不换行, 单行展示 */ } #nx-hero .nx-sub-line.en { font-size: 2.1rem; letter-spacing: .14em; margin-top: .75rem; } /* 逐字: 偏暗柔和渐变 + 从左到右波浪跳动 */ #nx-hero .nx-sub-line .sch { display: inline-block; background: linear-gradient(100deg, #3f7aa6, #6fb4dc 50%, #4a93c4); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .85; animation: nxJump 1.6s ease-in-out infinite; } #nx-hero .nx-sub-line.en .sch { opacity: .72; } @keyframes nxShimmer { to { background-position: 220% center; } } @media (prefers-reduced-motion: reduce) { #nx-hero .nx-sub-line .sch { animation: none; } } #nx-hero .nx-foot { margin-top: 3rem; color: rgba(125,211,252,.45); font-size: .7rem; letter-spacing: .28em; } /* ================= 右侧表单卡片(sky-blue 玻璃) ================= */ html.nexthub-auth .card-glass { background: rgba(10, 22, 48, .72) !important; border: 1px solid rgba(56, 189, 248, .22) !important; -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%); box-shadow: 0 24px 70px -20px rgba(0,0,0,.7), 0 0 60px -22px rgba(14,165,233,.5) !important; } /* 标题渐变 → sky-blue */ html.nexthub-auth .text-gradient { background-image: linear-gradient(100deg, #7dd3fc, #38bdf8 45%, #0ea5e9) !important; -webkit-background-clip: text; background-clip: text; color: transparent !important; } /* 文案可读性 */ html.nexthub-auth .input-label { color: #cbe5fb !important; } html.nexthub-auth .input-hint, html.nexthub-auth .text-gray-500, html.nexthub-auth .text-gray-400 { color: #8eb6d6 !important; } html.nexthub-auth .text-gray-900, html.nexthub-auth .text-gray-700 { color: #e6f3ff !important; } /* 输入框 → 暗色 + sky 聚焦 */ html.nexthub-auth .input { background: rgba(8, 19, 43, .65) !important; border: 1px solid rgba(125, 211, 252, .2) !important; color: #e6f3ff !important; } html.nexthub-auth .input::placeholder { color: #5b7fa3 !important; } html.nexthub-auth .input:focus { border-color: #38bdf8 !important; box-shadow: 0 0 0 3px rgba(56, 189, 248, .22) !important; outline: none !important; } /* 主按钮 → 127 同款 sky 渐变 + 辉光 */ html.nexthub-auth .btn-primary { background-image: linear-gradient(100deg, #0ea5e9, #0284c7) !important; border: none !important; box-shadow: 0 10px 26px -8px rgba(14, 165, 233, .6) !important; } html.nexthub-auth .btn-primary:hover { filter: brightness(1.08); } /* 次/第三方按钮 */ html.nexthub-auth .btn-secondary { background: rgba(15, 30, 58, .6) !important; color: #cbe5fb !important; border: 1px solid rgba(125, 211, 252, .24) !important; } html.nexthub-auth .btn-secondary:hover { background: rgba(23, 42, 76, .72) !important; } /* 分割线 / 链接 */ html.nexthub-auth .bg-gray-200 { background: rgba(125, 211, 252, .16) !important; } html.nexthub-auth a { color: #38bdf8; } html.nexthub-auth a:hover { color: #7dd3fc; }