2 lines
5.4 KiB
CSS
2 lines
5.4 KiB
CSS
.ModalSignIn-Master{width:100%;height:100vh;background-color:#00000086;display:flex;align-items:center;justify-content:center;position:fixed;left:0;top:0;right:0;bottom:0;z-index:1001;font-family:NeueMontreal;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);animation:fadeIn .3s ease}.ModalSignIn-Master.closing{animation:fadeOut .5s ease}.ModalSignIn-Master .signInMain{width:50vw;background:#fff;border-radius:12px;font-family:NeueMontreal;padding:2rem;box-shadow:0 8px 20px #00000026;display:flex;flex-direction:column;gap:3rem;animation:slideInRight .5s ease}@media (max-width: 768px){.ModalSignIn-Master .signInMain{width:90vw;padding:1rem}}.closing .ModalSignIn-Master .signInMain{animation:slideOutLeft .5s ease}.ModalSignIn-Master .signInMain .ModalSignInheader{display:flex;font-family:NeueMontreal;justify-content:space-between;align-items:flex-start}.ModalSignIn-Master .signInMain .ModalSignInheader .MSLeft{display:flex;font-family:NeueMontreal;flex-direction:column}.ModalSignIn-Master .signInMain .ModalSignInheader .MSLeft img{width:70px;height:auto;padding-bottom:1rem}.ModalSignIn-Master .signInMain .ModalSignInheader .MSLeft div{font-size:2.5vw;font-family:NeueMontreal;font-weight:500;color:#000}@media (max-width: 768px){.ModalSignIn-Master .signInMain .ModalSignInheader .MSLeft div{font-size:6vw}}.ModalSignIn-Master .signInMain .ModalSignInheader .MSLeft p{font-family:NeueMontreal;font-size:.85rem;color:#555;margin:0}.ModalSignIn-Master .signInMain .ModalSignInheader .MSRight{font-size:1.2rem;font-family:NeueMontreal;color:#fff;padding:8px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.ModalSignIn-Master .signInMain .ModalSignInheader .MSRight .icon-container{position:relative;background-color:#000;height:35px;width:35px;border-radius:50px;margin-left:2rem;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:transform .4s cubic-bezier(.25,.46,.45,.94)}.ModalSignIn-Master .signInMain .ModalSignInheader .MSRight:hover .icon-container{transform:scale(.9)}.ModalSignIn-Master .signInMain .ModalSignInheader .MSRight .icon-main,.ModalSignIn-Master .signInMain .ModalSignInheader .MSRight .icon-hover{position:absolute;color:#fff;font-size:16px;transition:transform .4s cubic-bezier(.25,.46,.45,.94)}.ModalSignIn-Master .signInMain .ModalSignInheader .MSRight .icon-main{transform:translate(0)}.ModalSignIn-Master .signInMain .ModalSignInheader .MSRight .icon-hover{transform:translate(-35px)}.ModalSignIn-Master .signInMain .ModalSignInheader .MSRight:hover .icon-main{transform:translate(35px)}.ModalSignIn-Master .signInMain .ModalSignInheader .MSRight:hover .icon-hover{transform:translate(0)}.ModalSignIn-Master .signInMain .inputOfSignIN-Main{display:flex;flex-direction:column;font-family:NeueMontreal;gap:1.2rem}.ModalSignIn-Master .signInMain .inputOfSignIN-Main .inputsPMS{display:flex;font-family:NeueMontreal;flex-direction:column;gap:.3rem}.ModalSignIn-Master .signInMain .inputOfSignIN-Main .inputsPMS label{font-size:.9rem;font-family:NeueMontreal;font-weight:400;color:#1e1e1e}.ModalSignIn-Master .signInMain .inputOfSignIN-Main .inputsPMS label:after{content:" *";color:red}.ModalSignIn-Master .signInMain .inputOfSignIN-Main .inputsPMS input{border:none;border-bottom:1px solid #ccc;padding:.6rem 0;font-family:NeueMontreal;font-size:1rem;outline:none;transition:border-color .2s ease}.ModalSignIn-Master .signInMain .inputOfSignIN-Main .inputsPMS input:focus{border-color:#000}.ModalSignIn-Master .signInMain .tryAnother{font-size:.9rem;color:#444;display:flex;font-family:NeueMontreal;align-items:center;gap:.4rem;cursor:pointer}.ModalSignIn-Master .signInMain .tryAnother svg{font-size:1rem}.ModalSignIn-Master .ModalSignInBTN{margin-top:1rem;display:flex;font-family:NeueMontreal;flex-direction:column;align-items:center;gap:.6rem}.ModalSignIn-Master .ModalSignInBTN button{width:90%;padding:8px;font-family:NeueMontreal;border:none;border-radius:50px;background:#000;color:#fff;font-size:1rem;font-weight:400;display:flex;justify-content:space-between;align-items:center;gap:.6rem;cursor:pointer;transition:all .2s ease}.ModalSignIn-Master .ModalSignInBTN button .icon-container{position:relative;background-color:#fff;height:35px;width:35px;border-radius:50px;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:transform .4s cubic-bezier(.25,.46,.45,.94)}.ModalSignIn-Master .ModalSignInBTN button:hover .icon-container{transform:scale(.9)}.ModalSignIn-Master .ModalSignInBTN button .icon-main,.ModalSignIn-Master .ModalSignInBTN button .icon-hover{position:absolute;color:#000;font-size:16px;transition:transform .4s cubic-bezier(.25,.46,.45,.94)}.ModalSignIn-Master .ModalSignInBTN button .icon-main{transform:translate(0)}.ModalSignIn-Master .ModalSignInBTN button .icon-hover{transform:translate(-35px,35px)}.ModalSignIn-Master .ModalSignInBTN button:hover .icon-main{transform:translate(35px,-35px)}.ModalSignIn-Master .ModalSignInBTN button:hover .icon-hover{transform:translate(0)}.ModalSignIn-Master .ModalSignInBTN p{font-size:.75rem;color:#666;margin:0;font-family:NeueMontreal}.ModalSignIn-Master .tryanotherModal{color:#000}.ModalSignIn-Master .newUserMessage{width:100%;text-align:center;color:#000;font-size:14px;padding:1rem 0 2rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideInRight{0%{opacity:0}to{opacity:1}}@keyframes slideOutLeft{0%{opacity:1}to{opacity:0}}
|