* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
}
body {
font-family:
Arial,
"Segoe UI",
sans-serif;
}
/* =========================================================
CJ LOGIN
========================================================= */
.cj-login-page {
min-height: 100vh;
background:
#0b1d35;
color: #111827;
overflow-x: hidden;
}
/* =========================================================
MAIN
========================================================= */
.cj-login-shell {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 35px 20px 25px;
}
/* =========================================================
CARD
========================================================= */
.cj-login-card {
width: 100%;
max-width: 440px;
background: #ffffff;
border-radius: 20px;
padding: 42px 30px 38px;
border-top: 5px solid #d6af24;
box-shadow:
0 20px 55px
rgba(0, 0, 0, .25);
position: relative;
}
/* =========================================================
LOGO
========================================================= */
.cj-logo-wrap {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.cj-logo {
width: 88px;
height: 88px;
object-fit: contain;
border-radius: 50%;
filter:
drop-shadow(
0 7px 9px
rgba(0,0,0,.20)
);
}
/* =========================================================
COMPANY
========================================================= */
.cj-company {
text-align: center;
margin-bottom: 31px;
}
.cj-company h1 {
margin: 0;
color: #071a33;
font-size: 23px;
font-weight: 800;
letter-spacing: -.3px;
}
.cj-tagline {
margin-top: 6px;
color: #526174;
font-size: 10px;
letter-spacing: 2px;
font-weight: 500;
}
/* =========================================================
ERROR
========================================================= */
.cj-error {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 17px;
padding: 10px 12px;
border-radius: 8px;
background: #fff1f2;
border: 1px solid #fecdd3;
color: #9f1239;
font-size: 12px;
}
.cj-error-icon {
width: 22px;
height: 22px;
flex: 0 0 22px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #dc2626;
color: #fff;
font-weight: bold;
}
/* =========================================================
FORM
========================================================= */
.cj-login-form {
width: 100%;
}
.cj-field {
margin-bottom: 21px;
}
.cj-field label {
display: block;
margin-bottom: 8px;
color: #111827;
font-size: 13px;
font-weight: 600;
}
.cj-input-wrap {
position: relative;
width: 100%;
}
.cj-input-icon {
position: absolute;
left: 14px;
top: 50%;
transform:
translateY(-50%);
color: #5b6470;
font-size: 17px;
z-index: 2;
}
.cj-input-wrap input {
width: 100%;
height: 51px;
padding:
0 43px 0 48px;
border: 1px solid #cfd5dc;
border-radius: 10px;
background: #f9fafb;
color: #111827;
font-size: 14px;
outline: none;
transition:
.2s;
}
.cj-input-wrap input::placeholder {
color: #8a929c;
}
.cj-input-wrap input:focus {
background: #fff;
border-color: #d6af24;
box-shadow:
0 0 0 3px
rgba(214,175,36,.12);
}
/* =========================================================
PASSWORD BUTTON
========================================================= */
.cj-password-toggle {
position: absolute;
right: 7px;
top: 50%;
transform:
translateY(-50%);
width: 34px;
height: 34px;
border: 0;
background: transparent;
color: #5c6570;
font-size: 15px;
padding: 0;
}
/* =========================================================
LOGIN BUTTON
========================================================= */
.cj-login-button {
width: 100%;
height: 50px;
margin-top: 2px;
border: 1px solid #d6af24;
border-radius: 10px;
background: #0b1d35;
color: #e4bd29;
font-size: 14px;
font-weight: 700;
letter-spacing: .1px;
box-shadow:
0 5px 12px
rgba(0,0,0,.12);
transition:
background .2s,
color .2s,
transform .2s;
}
.cj-login-button:hover {
background: #102b4d;
color: #f0ca39;
transform:
translateY(-1px);
}
.cj-login-button:disabled {
opacity: .7;
cursor: wait;
transform: none;
}
/* =========================================================
REGISTER
========================================================= */
.cj-register {
text-align: center;
margin-top: 20px;
color: #111827;
font-size: 13px;
}
.cj-register a {
color: #0b1d35;
font-weight: 700;
text-decoration: none;
}
.cj-register a:hover {
color: #c49d16;
text-decoration: underline;
}
/* =========================================================
FOOTER
========================================================= */
.cj-footer {
margin-top: 18px;
text-align: center;
color: rgba(255,255,255,.65);
font-size: 10px;
line-height: 1.6;
}
.cj-footer span {
margin: 0 5px;
color: #d6af24;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 600px) {
.cj-login-shell {
min-height: 100vh;
padding:
18px 12px 15px;
}
.cj-login-card {
max-width: 430px;
padding:
34px 24px 30px;
border-radius: 18px;
border-top-width: 4px;
}
.cj-logo {
width: 78px;
height: 78px;
}
.cj-company h1 {
font-size: 21px;
}
.cj-tagline {
font-size: 8px;
letter-spacing: 1.7px;
}
.cj-company {
margin-bottom: 27px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 480px) {
.cj-login-shell {
justify-content: center;
padding:
12px 10px;
}
.cj-login-card {
width: 100%;
padding:
30px 20px 28px;
border-radius: 17px;
}
.cj-logo-wrap {
margin-bottom: 16px;
}
.cj-logo {
width: 72px;
height: 72px;
}
.cj-company h1 {
font-size: 19px;
line-height: 1.25;
}
.cj-tagline {
margin-top: 5px;
font-size: 7.5px;
letter-spacing: 1.5px;
}
.cj-company {
margin-bottom: 24px;
}
.cj-field {
margin-bottom: 17px;
}
.cj-field label {
font-size: 12px;
margin-bottom: 7px;
}
.cj-input-wrap input {
height: 49px;
font-size: 14px;
border-radius: 9px;
}
.cj-login-button {
height: 49px;
border-radius: 9px;
font-size: 14px;
}
.cj-register {
margin-top: 17px;
font-size: 12px;
}
.cj-footer {
font-size: 8px;
margin-top: 10px;
}
}
/* =========================================================
SMALL PHONE
========================================================= */
@media (max-width: 360px) {
.cj-login-shell {
padding:
8px 7px;
}
.cj-login-card {
padding:
25px 16px 23px;
border-radius: 15px;
}
.cj-logo {
width: 65px;
height: 65px;
}
.cj-company h1 {
font-size: 17px;
}
.cj-tagline {
font-size: 6.5px;
letter-spacing: 1.2px;
}
.cj-input-wrap input {
height: 47px;
}
.cj-login-button {
height: 47px;
}
}