261 lines
4.2 KiB
CSS
261 lines
4.2 KiB
CSS
body{
|
|
background: linear-gradient(135deg,#0f172a,#1e293b);
|
|
min-height:100vh;
|
|
}
|
|
|
|
/* BRAND */
|
|
.brand-logo{
|
|
position:absolute;
|
|
left:40px;
|
|
top:40px;
|
|
|
|
display:flex;
|
|
align-items:center;
|
|
gap:12px;
|
|
|
|
opacity:0.9;
|
|
}
|
|
|
|
/* logo icon */
|
|
.brand-logo img{
|
|
height:48px;
|
|
width:auto;
|
|
}
|
|
|
|
/* text */
|
|
.brand-text{
|
|
font-size:28px;
|
|
font-weight:600;
|
|
letter-spacing:1px;
|
|
color:#9bd9e6;
|
|
}
|
|
|
|
/* highlight Q */
|
|
.brand-q{
|
|
color:#19c2c8;
|
|
}
|
|
|
|
/* mobile */
|
|
@media(max-width:768px){
|
|
|
|
.brand-logo{
|
|
position:relative;
|
|
left:auto;
|
|
top:auto;
|
|
justify-content:center;
|
|
margin-bottom:20px;
|
|
}
|
|
|
|
}
|
|
|
|
/* container center */
|
|
.entry-container{
|
|
display:flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
height:100vh;
|
|
}
|
|
|
|
/* card */
|
|
.entry-card{
|
|
background:rgba(255,255,255,0.08);
|
|
backdrop-filter: blur(20px);
|
|
border:1px solid rgba(255,255,255,0.15);
|
|
border-radius:20px;
|
|
padding:50px;
|
|
text-align:center;
|
|
box-shadow:0 20px 60px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
/* title */
|
|
.entry-label{
|
|
color:white;
|
|
margin-bottom:30px;
|
|
}
|
|
|
|
/* input */
|
|
.nopol-input{
|
|
width:320px;
|
|
font-size:32px;
|
|
padding:20px;
|
|
border-radius:12px;
|
|
border:1px solid rgba(255,255,255,0.2);
|
|
background:rgba(255,255,255,0.1);
|
|
color:white;
|
|
text-align:center;
|
|
letter-spacing:4px;
|
|
}
|
|
|
|
/* focus */
|
|
.nopol-input:focus{
|
|
outline:none;
|
|
border-color:#06b6d4;
|
|
box-shadow:0 0 0 3px rgba(6,182,212,0.3);
|
|
}
|
|
|
|
/* submit */
|
|
.btn-submit{
|
|
display:block;
|
|
width:100%;
|
|
margin-top:25px;
|
|
padding:18px;
|
|
font-size:20px;
|
|
border:none;
|
|
border-radius:12px;
|
|
background:linear-gradient(135deg,#06b6d4,#0891b2);
|
|
color:white;
|
|
font-weight:bold;
|
|
}
|
|
|
|
/* hover */
|
|
.btn-submit:hover{
|
|
background:linear-gradient(135deg,#0891b2,#0e7490);
|
|
}
|
|
|
|
/* mobile */
|
|
@media (max-width:576px){
|
|
|
|
#form-input{
|
|
width:90%;
|
|
padding:30px;
|
|
}
|
|
|
|
#form-active{
|
|
width:90%;
|
|
padding:30px;
|
|
}
|
|
|
|
#form-expired{
|
|
width:90%;
|
|
padding:30px;
|
|
}
|
|
|
|
.nopol-input{
|
|
width:100%;
|
|
font-size:26px;
|
|
}
|
|
|
|
}
|
|
|
|
/* STATUS CARD */
|
|
.status-card{
|
|
background: rgba(255,255,255,0.08);
|
|
backdrop-filter: blur(20px);
|
|
border-radius:18px;
|
|
padding:30px;
|
|
text-align:center;
|
|
border:1px solid rgba(255,255,255,0.15);
|
|
box-shadow:0 20px 50px rgba(0,0,0,0.35);
|
|
}
|
|
|
|
/* ACTICE CARD */
|
|
.active-card{
|
|
border-left:6px solid #067411;
|
|
}
|
|
|
|
/* EXPIRED CARD */
|
|
.expired-card{
|
|
border-left:6px solid #f87171;
|
|
}
|
|
|
|
/* HEADER */
|
|
.status-header{
|
|
margin-bottom:20px;
|
|
}
|
|
|
|
/* BADGE */
|
|
.status-badge{
|
|
display:inline-block;
|
|
background:#f87171;
|
|
color:white;
|
|
padding:6px 14px;
|
|
border-radius:20px;
|
|
font-size:12px;
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
/* MEMBER INFO */
|
|
.member-info{
|
|
margin:20px 0;
|
|
}
|
|
|
|
.info-row{
|
|
display:flex;
|
|
justify-content:space-between;
|
|
margin:8px 0;
|
|
}
|
|
|
|
.label{
|
|
opacity:0.7;
|
|
color:white;
|
|
}
|
|
|
|
.value{
|
|
font-weight:bold;
|
|
color:white;
|
|
}
|
|
|
|
/* WARNING TEXT */
|
|
.active-warning{
|
|
background:rgba(113, 248, 158, 0.15);
|
|
border:1px solid rgba(113, 248, 118, 0.3);
|
|
padding:12px;
|
|
border-radius:10px;
|
|
margin-bottom:20px;
|
|
color:#a5fcc3;
|
|
}
|
|
|
|
.status-warning{
|
|
background:rgba(248,113,113,0.15);
|
|
border:1px solid rgba(248,113,113,0.3);
|
|
padding:12px;
|
|
border-radius:10px;
|
|
margin-bottom:20px;
|
|
color:#fca5a5;
|
|
}
|
|
|
|
.text-warning{
|
|
font-weight: bold;
|
|
color: white;
|
|
}
|
|
|
|
/* SELECT STYLE */
|
|
.form-control.form-select{
|
|
background: rgba(255,255,255,0.08);
|
|
backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
color: #fff;
|
|
border-radius: 12px;
|
|
padding: 12px 16px;
|
|
font-size: 15px;
|
|
transition: all .2s ease;
|
|
}
|
|
|
|
/* hover */
|
|
.form-control.form-select:hover{
|
|
border-color: rgba(255,255,255,0.35);
|
|
}
|
|
|
|
/* focus */
|
|
.form-control.form-select:focus{
|
|
border-color: #06b6d4;
|
|
box-shadow: 0 0 0 3px rgba(6,182,212,0.25);
|
|
background: rgba(255,255,255,0.12);
|
|
}
|
|
|
|
/* dropdown arrow */
|
|
.form-select{
|
|
background-position: right 12px center;
|
|
}
|
|
|
|
/* option dropdown */
|
|
.form-select option{
|
|
color:#000;
|
|
}
|
|
|
|
/* BUTTON RENEW */
|
|
.btn-renew{
|
|
background:linear-gradient(135deg,#f87171,#ef4444);
|
|
}
|
|
|