File: /var/www/html/video-rental/wp-content/themes/video-rental-old/scss/login.scss
@import 'partials';
.login{
padding: 200px 0px ;
@media($sm-1679){
padding: 180px 0px ;
}
@media($sm-1481){
padding: 160px 0px ;
}
@media($sm-1199){
padding: 140px 0px;
}
@media($sm-991){
padding: 120px 0px;
}
.txt.top-txt{
color: #fff;
font-weight: 600;
font-size: 16px;
line-height: 24.5px;
letter-spacing: 0.3px;
vertical-align: middle;
margin-bottom: 0px;
padding-right: 10px;
// display: flex;
// justify-content: end;
margin-bottom: 15px;
.register-link{
color: #F9B548;
text-decoration: none;
}
@media($sm-1679){
font-size: 14px;
}
@media($sm-1481){
font-size: 12px;
line-height: 22px;
}
@media($sm-767){
font-size: 11px;
line-height: 18px;
width: 100%;
margin-bottom: 15px;
padding-right: 0px;
}
}
.login-wrp{
padding: 0px 70px;
@media($sm-1679){
padding: 0px 50px;
}
@media($sm-1481){
padding: 0px 30px;
}
}
.top-title-sec{
.tile-sec{
color: #FFFFFF;
font-weight: 700;
font-size: 30px;
line-height: 24.5px;
letter-spacing: 0.3px;
vertical-align: middle;
padding-bottom: 24px;
@media($sm-1679){
font-size: 28px;
}
@media($sm-1481){
font-size: 26px;
}
@media($sm-1199){
font-size: 24px;
}
@media($sm-991){
font-size: 22px;
}
@media($sm-767){
font-size: 20px;
}
@media($sm-579){
font-size: 18px;
padding-bottom: 10px;
}
}
.light{
font-weight: 300;
}
.txt{
font-family: Barlow Semi Condensed;
font-weight: 600;
font-size: 16px;
line-height: 24.5px;
letter-spacing: 0.3px;
vertical-align: middle;
color: #fff;
padding-bottom: 30px;
@media($sm-1679){
font-family: 14px;
}
@media($sm-1481){
font-size: 12px;
line-height: 18px;
}
}
}
.payment{
display: flex;
gap: 30px;
padding-bottom: 60px;
@media($sm-1199){
flex-wrap: wrap;
}
.pay-btn{
width: calc(100%/4 - 20px);
background-color: #16120B;
border-radius: 27px;
font-weight: 400;
font-size: 16px;
line-height: 24.5px;
letter-spacing: 0.3px;
vertical-align: middle;
color: #fff;
display: flex;
align-items: center;
text-decoration: none;
height: 55px;
padding: 0px 32px;
justify-content: center;
@media($sm-1679){
font-size: 14px;
height: 48px;
}
@media($sm-1481){
font-size: 12px;
line-height: 16px;
height: 46px;
}
@media($sm-1199){
width: calc(100%/3 - 20px);
}
@media($sm-991){
width: calc(100%/2 - 20px);
}
@media($sm-479){
width: 100%;
}
.img{
width: 15px;
margin-right: 15px;
}
}
}
.login-inner{
.nav-tabs{
border-bottom: 1px solid rgb(255 255 255 / 12%);
li{
margin-right: 100px;
@media($sm-1679){
margin-right: 80px;
}
@media($sm-1481){
margin-right: 60px;
}
@media($sm-1199){
margin-right: 40px;
}
@media($sm-991){
margin-right: 20px;
}
.nav-link{
background-color: transparent;
font-weight: 600;
font-size: 20px;
line-height: 19.5px;
letter-spacing: 0%;
vertical-align: middle;
color: rgb(255 255 255 / 30%);
border: none;
padding: 25px;
@media($sm-1679){
font-size: 18px;
padding: 22px;
}
@media($sm-1481){
font-size: 16px;
padding: 18px;
}
@media($sm-1199){
font-size: 14px;
padding: 16px;
}
@media($sm-991){
font-size: 12px;
}
&.active{
color: #fff;
border-bottom: 1px solid;
}
}
}
}
.login-form{
padding-top: 64px;
@media($sm-1679){
padding-top: 58px;
}
@media($sm-1481){
padding-top: 55px;
}
@media($sm-1199){
padding-top: 50px;
}
@media($sm-991){
padding-top: 40px;
}
.form-grp{
position: relative;
padding-bottom: 40px;
.error-msg{
position: absolute;
color: red;
font-weight: 500;
padding-left: 20px;
width: 100%;
}
.eye-icon{
position: absolute;
right: 32px;
top: 41px;
@media($sm-1481){
top: 37px;
}
img{
filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(2%) hue-rotate(318deg) brightness(113%) contrast(100%);
width: 28px;
height: 20px;
}
}
}
.form-label{
font-weight: 500;
font-size: 15.36px;
line-height: 100%;
letter-spacing: 0%;
color: #fff;
@media($sm-1679){
font-size: 13px;
}
}
.form-control{
border: 0.83px solid #373737;
height: 55px;
display: flex;
align-items: center;
background-color: transparent;
border-radius: 30px;
color: #fff;
font-weight: 500;
font-size: 14.46px;
line-height: 100%;
letter-spacing: 0%;
position: relative;
padding-left: 25px;
&:focus,&:active,&:focus-within{
outline: none;
box-shadow: none;
}
&::placeholder{
color: rgb(255 255 255 / 30%);
}
@media($sm-1679){
height: 50px;
}
@media($sm-1481){
height: 48px;
}
@media($sm-1199){
height: 46px;
}
}
.forgot-password-sec{
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 70px;
padding-top: 20px;
max-width: 65%;
@media($sm-1679){
padding-bottom: 60px;
}
@media($sm-1481){
padding-bottom: 50px;
}
@media($sm-1199){
padding-bottom: 40px;
}
@media($sm-767){
padding-bottom: 40px;
max-width: 100%;
}
.form-check-label{
font-family: Barlow Semi Condensed;
font-weight: 400;
font-size: 15.36px;
line-height: 100%;
letter-spacing: 0%;
color: #fff;
@media($sm-1679){
font-size: 13px;
}
}
.forgot-password{
font-weight: 400;
font-size: 16px;
line-height: 24.5px;
letter-spacing: 0.3px;
text-align: right;
vertical-align: middle;
color: #F9B548;
text-decoration: none;
@media($sm-1679){
font-size: 14px;
}
@media($sm-1481){
font-size: 12px;
}
}
}
.register-sec{
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 70px;
align-items: center;
@media($sm-1679){
padding-top: 50px;
}
@media($sm-1481){
padding-top: 40px;
}
@media($sm-991){
padding-top: 20px;
}
@media($sm-767){
flex-wrap: wrap;
}
.txt{
color: #fff;
font-weight: 600;
font-size: 16px;
line-height: 24.5px;
letter-spacing: 0.3px;
vertical-align: middle;
margin-bottom: 0px;
padding-right: 10px;
.register-link{
color: #F9B548;
text-decoration: none;
}
@media($sm-1679){
font-size: 14px;
}
@media($sm-1481){
font-size: 12px;
line-height: 22px;
}
@media($sm-767){
font-size: 11px;
line-height: 18px;
width: 100%;
margin-bottom: 15px;
padding-right: 0px;
}
}
.btn-group{
display: flex;
align-items: center;
@media($sm-767){
flex-wrap: wrap;
width: 100%;
}
.btn {
border: 1px solid rgba(176, 176, 176, 0.36);
height: 51px;
width: 167px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(153, 153, 153, 0.3);
font-weight: 500;
font-size: 15px;
line-height: 19.5px;
letter-spacing: 0.3px;
text-align: center;
vertical-align: middle;
color: #fff;
border-radius: 30px;
backdrop-filter: blur(33.4px);
margin-right: 25px;
position: relative;
overflow: hidden;
z-index: 1;
transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(120deg, transparent, hsla(0, 0%, 100%, 0.5), transparent);
transform: translateX(-100%);
transition: transform 0.6s ease-in-out;
z-index: 0;
}
&:hover {
transform: translateY(-5px);
// transform: translateY(-3px) scale(1.03);
// box-shadow: 0 8px 18px rgba(255, 255, 255, 0.2);
}
&:hover::before {
transform: translateX(100%);
}
&.login-btn {
background: #f9b548 radial-gradient(circle, rgb(249, 181, 72) 1%, rgb(200, 133, 25) 100%) !important;
margin-right: 0;
&:hover {
box-shadow: 0 10px 25px rgba(249, 181, 72, 0.4);
}
&:hover::before {
transform: translateX(100%);
}
}
@media ($sm-1679) {
font-size: 13px;
height: 48px;
}
@media ($sm-1481) {
height: 46px;
}
@media ($sm-579) {
width: 100%;
margin-bottom: 15px;
margin-right: 0px;
}
}
}
}
}
.custom-checkbox {
.form-check-input {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 18px;
height: 18px;
border: 0.66px solid #373737;
border-radius: 4px;
background-color: transparent;
margin-top: 0.25rem;
margin-right: 0.5rem;
position: relative;
cursor: pointer;
transition: all 0.2s;
background-image: none !important;
&:checked {
background-color: transparent;
border-color: #F9B548;
&::after {
content: "";
position: absolute;
top: 2px;
left: 5px;
width: 4px;
height: 10px;
border: solid #F9B548;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
}
&:focus {
outline: none;
box-shadow: none;
}
}
.form-check-label {
color: #fff;
font-size: 14px;
cursor: pointer;
}
}
}
.form-sec{
margin-bottom: 50px;
}
.custom-phone-wrapper{
.custom-select-code{
width: 100px;
background-color: #000;
border: 0.83px solid rgba(55, 55, 55, 1);
border-radius: 30px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
color: #fff;
&:focus,&:active,&:focus-within{
outline: none;
box-shadow: none;
}
.parsley-required,.parsley-length{
@media($sm-1679){
bottom: -57px;
}
}
}
.custom-phone-input{
border-top-left-radius: 0px !important;
border-bottom-left-radius: 0px !important;
border-left: 0px !important;
}
}
.login-form .form-grp {
padding-bottom: 20px;
position: relative;
}
.signup-form{
&.login-form .form-grp {
padding-bottom: 60px;
position: relative;
@media($sm-1679){
padding-bottom: 40px;
}
@media($sm-1481){
padding-bottom: 30px;
}
@media($sm-991){
padding-bottom: 25px;
}
.parsley-required{
position: absolute;
}
}
}
.toggle-password.eye-icon{
position: absolute;
right: 32px;
top: 41px;
@media($sm-1481){
top: 37px;
}
img{
filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(2%) hue-rotate(318deg) brightness(113%) contrast(100%);
width: 28px;
height: 20px;
}
}
}
body{
background: #000 !important;
}