（见 functions.php yusiwarm_login_brand_pane()），然后这里用 flex 把两个同级块排成左右两栏。 */ body.login{ display:flex; height:100vh; overflow:hidden; margin:0; background:var(--color-bg, #FFF8F2); font-family:var(--font-system, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif); } /* ---- 左侧品牌区 ---- */ .pane-left{ flex:1; position:relative; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:64px 72px; box-sizing:border-box; color:#fff; background:linear-gradient(135deg, var(--color-header-bg, #3E2797), var(--color-accent, #E46828)); overflow:hidden; } .pane-left:before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 20% 15%, rgba(255,255,255,.25), transparent 55%); pointer-events:none; } .pane-left:after{ content:""; position:absolute; right:-120px; bottom:-120px; width:420px; height:420px; border-radius:50%; background:rgba(255,255,255,.08); pointer-events:none; } .pane-left .brand-title{ position:relative; font-size:44px; font-weight:800; letter-spacing:-1.5px; margin:0 0 16px; line-height:1.2; } .pane-left .brand-desc{ position:relative; font-size:17px; font-weight:500; opacity:.92; max-width:420px; line-height:1.7; margin:0; } /* ---- 右侧表单区 ---- */ #login{ flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; background:var(--color-surface, #fff) !important; box-shadow:-10px 0 30px rgba(0,0,0,.05); width:auto !important; max-width:none !important; padding:40px !important; margin:0 !important; box-sizing:border-box; overflow-y:auto; } #login > *{ width:100%; max-width:380px; } #login h1{ text-align:center; margin:0 0 28px; } #login h1 a{ background-image:none; display:inline-block; width:auto; height:auto; font-size:22px; font-weight:700; letter-spacing:-.3px; color:var(--color-text, #2E2622) !important; text-indent:0; } #loginform{ background:transparent; border:0; box-shadow:none; padding:0 !important; } #loginform p{ margin-bottom:18px; } #loginform label{ font-size:13px; font-weight:600; color:var(--color-text, #2E2622); } #login input[type="text"], #login input[type="password"], #login input[type="email"]{ width:100%; box-sizing:border-box; background:var(--color-bg, #FFF8F2); border:1px solid var(--color-border, #F0DCC8); border-radius:12px; padding:13px 16px; font-size:15px; box-shadow:0 1px 2px rgba(0,0,0,.02) inset; transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } #login input[type="text"]:focus, #login input[type="password"]:focus, #login input[type="email"]:focus{ border-color:var(--color-accent, #E46828); box-shadow:0 0 0 3px rgba(228,104,40,.15); background:var(--color-surface, #fff); outline:none; } .wp-hide-pw{ background:transparent; } .login .button-primary, #wp-submit{ width:100%; display:block; background:linear-gradient(135deg, var(--color-accent, #E46828), var(--color-accent-hover, #9F2600)) !important; border:0 !important; color:#fff !important; border-radius:12px; font-weight:700; font-size:15px; padding:12px 20px !important; height:auto !important; line-height:1.4 !important; text-shadow:none !important; box-shadow:0 6px 20px rgba(228,104,40,.3); transition:transform .15s ease, box-shadow .15s ease; } .login .button-primary:hover, #wp-submit:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(228,104,40,.38); } .login .button-primary:active, #wp-submit:active{ transform:translateY(0); } .login form .forgetmenot{ font-size:13px; color:var(--color-text-muted, #85786C); } #nav, #backtoblog{ text-align:center; font-size:13px; color:var(--color-text-muted, #85786C); margin-top:14px !important; } #nav a, #backtoblog a{ color:var(--color-accent, #E46828); } #nav a:hover, #backtoblog a:hover{ color:var(--color-accent-hover, #9F2600); text-decoration:underline; } #login_error, .login .message, .login .success{ border-left:0 !important; border-radius:12px; background:rgba(159,38,0,.08) !important; color:var(--color-accent-hover, #9F2600) !important; box-shadow:none !important; padding:14px 16px !important; } .login .success{ background:rgba(0,177,118,.1) !important; color:var(--color-success-hover, #007942) !important; } /* ---- 响应式：窄屏隐藏左侧品牌区，右侧变居中卡片 ---- */ @media (max-width:960px){ .pane-left{ display:none; } body.login{ background:var(--color-bg, #FFF8F2); } #login{ box-shadow:none; background:var(--color-surface, #fff) !important; } #login > *{ max-width:400px; } } @media (max-width:480px){ #login{ padding:28px 20px !important; } #login h1 a{ font-size:19px; } }