* { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: grid; place-items: center; overflow: hidden; color: #abaab8; background: #f0f7ff; font: 14px/1.5 Poppins, sans-serif; } a { color: #4672ff; } button, input { font: inherit; } button { cursor: pointer; }
.auth-card { display: flex; width: 660px; height: 410px; background: #fff; box-shadow: 0 12px 80px rgba(95,98,255,.08); } .auth-nav { position: relative; display: flex; flex-direction: column; width: 148px; } .auth-logo { display: grid; place-items: center; gap: 4px; height: 34%; color: #4672ff; font-size: 11px; font-weight: 700; } .auth-logo svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; } .auth-logo span { color: #2646ad; } .auth-tab { flex: 1; display: grid; place-items: center; gap: 6px; align-content: center; color: #747b92; text-decoration: none; transition: .3s; } .auth-tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; } .auth-tab.active { color: #2646ad; } .auth-tab:hover { color: #2646ad; } .active-bar { position: absolute; left: 0; top: 33.33%; width: 5px; height: 33.33%; background: #4672ff; transition: .4s ease-in-out; }
.auth-hero { position: relative; flex: 0 0 300px; overflow: hidden; margin: -25px 0; color: #f9f9f9; background: #4672ff; } .hero-panel { position: absolute; inset: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(40px); transition: .5s ease-in-out; } .hero-panel.active { opacity: 1; transform: translateY(0); } .hero-panel h2,.hero-panel h3 { margin: 0; padding-left: 24px; font-weight: 400; text-align: left; } .hero-panel h2 { font-size: 1.3rem; } .hero-panel h3 { opacity: .75; font-size: 13px; } .hero-art { margin-top: 18px; text-align: center; } .hero-art svg { width: 220px; fill: rgba(255,255,255,.1); stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.auth-form-shell { position: relative; width: 400px; height: 100%; overflow: hidden; padding: 24px; } .auth-forms { position: absolute; left: 0; top: 0; width: 100%; transition: .5s ease-in-out; } .auth-form { height: 410px; padding: 24px; display: flex; flex-direction: column; justify-content: center; gap: 7px; } .auth-form p { margin: 0 0 4px; font-size: 12px; } .auth-form label { color: #747b92; font-size: 13px; } .control { position: relative; } .control input { width: 100%; height: 40px; padding: 0 40px 0 12px; border: 1px solid #dad8e7; border-radius: 6px; background: transparent; color: #2646ad; } .control input:focus { outline-color: #4672ff; } .control svg { position: absolute; top: 50%; right: 12px; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: #747b92; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; pointer-events: none; } .auth-form > button { height: 40px; margin-top: 12px; padding: 10px 20px; border: 0; border-radius: 6px; color: #f9f9f9; letter-spacing: 1px; background: #2646ad; } .form-error { min-height: 20px; margin: 4px 0 8px; padding: 10px 12px; border: 1px solid rgba(200, 73, 73, 0.25); border-radius: 8px; background: rgba(200, 73, 73, 0.06); color: #a73b3b; font-size: 12px; line-height: 1.4; display: none; } .form-error.visible { display: block; } .form-footer { opacity: .75; } @media(max-width:700px) { body { overflow:auto; padding:18px; } .auth-card { width: min(660px,100%); height: auto; min-height: 620px; } .auth-nav { width: 86px; } .auth-hero { display:none; } .auth-form-shell { width: calc(100% - 86px); } .auth-form { height: 620px; padding: 18px; } }