/* Sliding Login/Register switcher — shared by Login.cshtml and Register.cshtml. Both modes exist in the DOM at once; only which one is visible changes. Each panel has a FIXED physical anchor for its whole lifetime, so nothing is ever re-mirrored mid-flight: LTR login -> blue RIGHT / form LEFT register -> blue LEFT / form RIGHT RTL mirrored (login -> blue LEFT / form RIGHT, register -> blue RIGHT / form LEFT) Switching slides the colour panels one way and the form panels the other, which reads as the blue sweeping across while the content travels against it. NOTE: dir="rtl" is set on (see _LayoutAccount.cshtml), so every RTL rule below must be a DESCENDANT selector ([dir="rtl"] .auth-switch), never [dir="rtl"].auth-switch — the latter requires both on one element and silently matches nothing, which made Arabic render with the English layout. */ .auth-switch { position: relative; width: 100vw; height: 100vh; overflow: hidden; } .auth-card { position: relative; width: 100%; height: 100%; } .auth-color, .auth-form { position: absolute; top: 0; height: 100%; transition: transform .5s cubic-bezier(.65,0,.35,1), width .5s cubic-bezier(.65,0,.35,1), opacity .4s ease; /* Hidden by default — the [data-active] rules below are the only thing that reveals a panel, so a selector mismatch fails safe (nothing shows) rather than stacking both. */ opacity: 0; z-index: 1; pointer-events: none; } .auth-color { width: 70%; } .auth-form { width: 30%; } /* Register needs materially more room than Login: nine fields in two columns, and Arabic labels/placeholders get clipped mid-word in a 30% column. Widen the white side for this mode only. Declared here (not per page) so the panel is identical whether it is reached from /Account/login or /Account/register. */ .auth-switch[data-active="register"] .auth-color { width: 58%; } .auth-switch[data-active="register"] .auth-form { width: 42%; } .auth-form--register .login-right { align-items: flex-start; padding: 58px 34px 36px; } .auth-form--register .reg-grid { gap: 0 20px; } .auth-form--register .login-field { margin-bottom: 18px; } .auth-form--register .login-field label { font-size: 13px; margin-bottom: 7px; } .auth-form--register .login-input { font-size: 14px; border-radius: var(--qs-radius-lg); padding: 14px var(--qs-space-7) 14px 18px; } [dir="ltr"] .auth-form--register .login-input { padding: 14px 18px 14px var(--qs-space-7); } .auth-form--register .login-input-wrap .l-icon { font-size: 16px; } /* Neutralize the old flex sizing on .login-left/.login-right — the .auth-color/.auth-form wrapper (not a flex parent) now owns size and position. min-width must stay 0 or the child grows past its absolutely-positioned wrapper and forces a page scrollbar. */ .auth-color .login-left, .auth-form .login-right { flex: none; width: 100%; height: 100%; min-width: 0; /* The old side-by-side layout put white flush against blue, so a box-shadow made sense. Here the form panel meets a curved edge — that shadow reads as a stray line. */ box-shadow: none !important; } /* ---- Anchors + curved seam. Blue anchored left curves on its right edge and vice versa. ---- */ .auth-color--login { right: 0; clip-path: url(#authCurveRight); } .auth-color--register { left: 0; clip-path: url(#authCurveLeft); } .auth-form--login { left: 0; } .auth-form--register { right: 0; } [dir="rtl"] .auth-color--login { right: auto; left: 0; clip-path: url(#authCurveLeft); } [dir="rtl"] .auth-color--register { left: auto; right: 0; clip-path: url(#authCurveRight); } [dir="rtl"] .auth-form--login { left: auto; right: 0; } [dir="rtl"] .auth-form--register { right: auto; left: 0; } /* ---- Active panel ---- */ .auth-switch[data-active="login"] .auth-color--login, .auth-switch[data-active="login"] .auth-form--login, .auth-switch[data-active="register"] .auth-color--register, .auth-switch[data-active="register"] .auth-form--register { transform: translateX(0); opacity: 1; z-index: 2; pointer-events: auto; /* must be restored explicitly — the base rule kills it */ } /* ---- Inactive panel: parked off-anchor in the direction it travels ---- */ .auth-switch[data-active="login"] .auth-color--register, .auth-switch[data-active="login"] .auth-form--register, .auth-switch[data-active="register"] .auth-color--login, .auth-switch[data-active="register"] .auth-form--login { opacity: 0; z-index: 1; pointer-events: none; } /* LTR: blue travels right->left across the switch, forms travel left->right */ .auth-switch[data-active="login"] .auth-color--register { transform: translateX(90px); } .auth-switch[data-active="login"] .auth-form--register { transform: translateX(-90px); } .auth-switch[data-active="register"] .auth-color--login { transform: translateX(-90px); } .auth-switch[data-active="register"] .auth-form--login { transform: translateX(90px); } /* RTL: same motion, mirrored */ [dir="rtl"] .auth-switch[data-active="login"] .auth-color--register { transform: translateX(-90px); } [dir="rtl"] .auth-switch[data-active="login"] .auth-form--register { transform: translateX(90px); } [dir="rtl"] .auth-switch[data-active="register"] .auth-color--login { transform: translateX(90px); } [dir="rtl"] .auth-switch[data-active="register"] .auth-form--login { transform: translateX(-90px); } /* ---- Login must fit the viewport with NO scrollbar. Adding the brand lockup pushed the content just past 100vh, which is what produced the scroll track down the seam. Tighten the vertical rhythm here (login only) rather than letting it scroll. Register keeps its scroll — that form genuinely cannot fit. ---- */ .auth-form--login .login-right { overflow-y: hidden; padding: 30px 38px; } .auth-form--login .auth-brand { margin-bottom: 14px; } .auth-form--login .login-right__header { margin-bottom: 20px; } .auth-form--login .login-field { margin-bottom: var(--qs-space-4); } .auth-form--login .login-forgot { margin-bottom: 18px; } .auth-form--login .login-register { margin-top: var(--qs-space-4); } /* .auth-brand (the lockup that now lives in the white form panel) is defined once in auth-shell.css, which every Account screen links — see that file. */ /* Blue panel no longer holds the logo, so centre its message and pin the copyright. */ .auth-color .login-left__inner { justify-content: center; } .auth-color .login-left__footer { position: absolute; bottom: 32px; left: 0; right: 0; text-align: center; } /* ---- Language pill + theme toggle ride the BLUE panel, opposite the brand lockup, so they never land on top of the (tall) register form. Both are position:fixed and live outside .auth-switch, so the mode is mirrored onto by auth-switch.js. ---- */ html[data-auth-mode="login"] .login-lang { right: 72px; left: auto; } html[data-auth-mode="login"] .qs-theme-toggle--floating { right: 16px; left: auto; } html[data-auth-mode="register"] .login-lang { left: 72px; right: auto; } html[data-auth-mode="register"] .qs-theme-toggle--floating { left: 16px; right: auto; } html[dir="rtl"][data-auth-mode="login"] .login-lang { left: 72px; right: auto; } html[dir="rtl"][data-auth-mode="login"] .qs-theme-toggle--floating { left: 16px; right: auto; } html[dir="rtl"][data-auth-mode="register"] .login-lang { right: 72px; left: auto; } html[dir="rtl"][data-auth-mode="register"] .qs-theme-toggle--floating { right: 16px; left: auto; } @media (max-width: 768px) { .auth-color { display: none; } .auth-form { width: 100%; left: 0; right: 0; } [dir="rtl"] .auth-form--login, [dir="rtl"] .auth-form--register { left: 0; right: 0; } } @media (prefers-reduced-motion: reduce) { .auth-color, .auth-form { transition: none !important; } }