/* Start custom CSS for html, class: .elementor-element-4dd18a8 *//* =========================================================
CHICAIM LOGIN PAGE
ELEMENTOR VERSION
========================================================= */
.chicaim-login-page {
--ch-bg: #050713;
--ch-bg2: #080b1d;
--ch-card: rgba(17, 20, 43, .88);
--ch-border: rgba(255,255,255,.09);
--ch-text: #f7f8ff;
--ch-muted: #9ca4c2;
--ch-purple: #8b35ff;
--ch-magenta: #e500d4;
--ch-pink: #ff45bd;
position: relative;
overflow: hidden;
width: 100%;
min-height: 760px;
padding: 90px 30px 70px;
background:
radial-gradient(
circle at 12% 35%,
rgba(120,30,255,.16),
transparent 30%
),
radial-gradient(
circle at 88% 38%,
rgba(230,0,210,.14),
transparent 30%
),
linear-gradient(
135deg,
#040611 0%,
#070b1d 55%,
#0a0619 100%
);
color: var(--ch-text);
}
/* =========================================================
GRID
========================================================= */
.chicaim-login-grid {
position: absolute;
inset: 0;
opacity: .22;
background-image:
linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
);
background-size: 70px 70px;
mask-image:
linear-gradient(
to bottom,
black,
transparent 92%
);
pointer-events: none;
}
/* =========================================================
GLOWS
========================================================= */
.chicaim-login-glow {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
}
.chicaim-glow-left {
width: 430px;
height: 430px;
left: -230px;
top: 130px;
background: rgba(126,39,255,.16);
}
.chicaim-glow-right {
width: 500px;
height: 500px;
right: -260px;
top: 80px;
background: rgba(230,0,210,.13);
}
/* =========================================================
MAIN CONTAINER
========================================================= */
.chicaim-login-container {
position: relative;
z-index: 3;
width: min(1180px, 100%);
margin: auto;
display: grid;
grid-template-columns:
minmax(0, 1fr)
470px;
gap: 90px;
align-items: center;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.chicaim-login-content {
max-width: 620px;
}
.chicaim-login-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 9px 15px;
border:
1px solid
rgba(180,90,255,.25);
border-radius: 999px;
background:
rgba(140,50,255,.07);
color: #c291ff;
font-size: 11px;
font-weight: 800;
letter-spacing: 1px;
}
.chicaim-login-eyebrow span {
width: 7px;
height: 7px;
border-radius: 50%;
background: #c73cff;
box-shadow:
0 0 15px #c73cff;
}
.chicaim-login-content h1 {
margin: 28px 0 20px;
font-size:
clamp(52px, 6vw, 82px);
line-height: .95;
letter-spacing: -4px;
font-weight: 850;
color: #ffffff;
}
.chicaim-login-content h1 strong {
background:
linear-gradient(
100deg,
#ffb800 0%,
#ff56a9 45%,
#9a49ff 100%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.chicaim-login-description {
max-width: 560px;
margin: 0;
color: #aeb5d0;
font-size: 17px;
line-height: 1.8;
}
/* =========================================================
FEATURES
========================================================= */
.chicaim-login-features {
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 36px;
}
.chicaim-feature {
display: flex;
align-items: center;
gap: 15px;
}
.chicaim-feature-icon {
width: 44px;
height: 44px;
flex: 0 0 44px;
display: grid;
place-items: center;
border:
1px solid
rgba(255,255,255,.08);
border-radius: 13px;
background:
linear-gradient(
145deg,
rgba(139,61,255,.17),
rgba(255,0,195,.06)
);
color: #d58bff;
font-size: 18px;
}
.chicaim-feature h4 {
margin: 0 0 3px;
color: #ffffff;
font-size: 14px;
font-weight: 700;
}
.chicaim-feature p {
margin: 0;
color: #747c9c;
font-size: 12px;
}
/* =========================================================
LOGIN CARD
========================================================= */
.chicaim-login-card {
position: relative;
z-index: 4;
padding: 34px;
border:
1px solid
rgba(255,255,255,.11);
border-radius: 25px;
background:
linear-gradient(
145deg,
rgba(24,27,57,.94),
rgba(9,11,29,.96)
);
box-shadow:
0 35px 90px rgba(0,0,0,.50),
inset 0 1px 0 rgba(255,255,255,.05);
backdrop-filter: blur(25px);
}
/* =========================================================
CARD HEADER
========================================================= */
.chicaim-card-header {
display: flex;
align-items: center;
gap: 14px;
}
.chicaim-hub-icon {
width: 50px;
height: 50px;
display: grid;
place-items: center;
border-radius: 14px;
background:
linear-gradient(
135deg,
#8d2dff,
#e600c9
);
color: white;
font-size: 20px;
box-shadow:
0 12px 30px
rgba(206,0,227,.25);
}
.chicaim-card-header span {
display: block;
margin-bottom: 4px;
color: #a77bda;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.2px;
}
.chicaim-card-header h2 {
margin: 0;
color: #ffffff;
font-size: 29px;
line-height: 1;
letter-spacing: -1px;
}
.chicaim-card-description {
margin: 11px 0 26px;
color: #8088a7;
font-size: 13px;
line-height: 1.6;
}
/* =========================================================
FORM
========================================================= */
.chicaim-login-form {
display: flex;
flex-direction: column;
gap: 9px;
}
.chicaim-login-form > label {
margin-top: 8px;
color: #d9dced;
font-size: 12px;
font-weight: 700;
}
.chicaim-input {
position: relative;
display: flex;
align-items: center;
}
.chicaim-input > span {
position: absolute;
left: 15px;
color: #9553dd;
font-size: 18px;
z-index: 2;
}
.chicaim-input input {
width: 100%;
height: 53px;
padding:
0 50px 0 43px;
border:
1px solid
rgba(255,255,255,.08) !important;
border-radius: 13px !important;
outline: none !important;
background:
rgba(3,5,17,.75) !important;
color: #ffffff !important;
font-size: 13px;
box-shadow: none !important;
transition: .2s ease;
}
.chicaim-input input::placeholder {
color: #565d7b;
}
.chicaim-input input:focus {
border-color:
rgba(182,57,255,.75) !important;
box-shadow:
0 0 0 4px
rgba(163,44,255,.08) !important;
}
.chicaim-show-password {
position: absolute;
right: 12px;
border: 0 !important;
background: transparent !important;
color: #a65cff !important;
cursor: pointer;
font-size: 11px;
font-weight: 700;
padding: 5px !important;
}
/* =========================================================
OPTIONS
========================================================= */
.chicaim-login-options {
display: flex;
justify-content: space-between;
align-items: center;
margin:
8px 0 13px;
font-size: 11px;
}
.chicaim-login-options label {
display: flex;
align-items: center;
gap: 7px;
color: #7f86a3;
cursor: pointer;
}
.chicaim-login-options input {
accent-color: #a32fff;
}
.chicaim-login-options a {
color: #bb6dff;
font-weight: 700;
}
/* =========================================================
BUTTON
========================================================= */
.chicaim-login-button {
width: 100%;
height: 54px;
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
border: 0 !important;
border-radius: 14px !important;
background:
linear-gradient(
105deg,
#8a25ff,
#be23e9 50%,
#ed0ac3
) !important;
color: #ffffff !important;
cursor: pointer;
font-size: 14px;
font-weight: 800;
box-shadow:
0 15px 35px
rgba(191,0,230,.23);
transition: .2s ease;
}
.chicaim-login-button:hover {
transform: translateY(-2px);
box-shadow:
0 19px 42px
rgba(191,0,230,.35);
}
.chicaim-login-button strong {
font-size: 18px;
transition: transform .2s ease;
}
.chicaim-login-button:hover strong {
transform: translateX(4px);
}
/* =========================================================
DIVIDER
========================================================= */
.chicaim-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 25px 0 18px;
}
.chicaim-divider span {
flex: 1;
height: 1px;
background:
rgba(255,255,255,.08);
}
.chicaim-divider em {
color: #565d79;
font-size: 9px;
font-style: normal;
font-weight: 800;
}
/* =========================================================
REGISTER
========================================================= */
.chicaim-register {
text-align: center;
}
.chicaim-register p {
margin: 0;
color: #727a99;
font-size: 11px;
}
.chicaim-register a {
display: block;
margin-top: 4px;
color: #c064ff;
font-size: 12px;
font-weight: 800;
}
/* =========================================================
SECURITY
========================================================= */
.chicaim-security {
display: flex;
justify-content: center;
align-items: center;
gap: 7px;
margin-top: 22px;
padding-top: 18px;
border-top:
1px solid
rgba(255,255,255,.06);
}
.chicaim-security p {
margin: 0;
color: #5f6784;
font-size: 9px;
text-align: center;
}
/* =========================================================
TRUST STRIP
========================================================= */
.chicaim-login-trust {
position: relative;
z-index: 3;
width: min(980px, 100%);
margin: 70px auto 0;
padding: 20px 25px;
display: grid;
grid-template-columns:
repeat(4, 1fr);
border:
1px solid
rgba(255,255,255,.07);
border-radius: 18px;
background:
rgba(255,255,255,.025);
}
.chicaim-login-trust > div {
padding:
5px 20px;
border-right:
1px solid
rgba(255,255,255,.07);
}
.chicaim-login-trust > div:last-child {
border-right: 0;
}
.chicaim-login-trust strong,
.chicaim-login-trust span {
display: block;
}
.chicaim-login-trust strong {
margin-bottom: 5px;
color: #c574ff;
font-size: 10px;
letter-spacing: 1px;
}
.chicaim-login-trust span {
color: #777f9b;
font-size: 10px;
}
/* =========================================================
ELEMENTOR FIXES
========================================================= */
/* Remove Elementor default spacing */
.chicaim-login-page,
.chicaim-login-page * {
box-sizing: border-box;
}
/* Prevent Elementor theme from changing headings */
.chicaim-login-page h1,
.chicaim-login-page h2,
.chicaim-login-page h4,
.chicaim-login-page p {
margin-block-start: 0;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1000px) {
.chicaim-login-container {
grid-template-columns:
minmax(0, 1fr)
420px;
gap: 45px;
}
.chicaim-login-content h1 {
font-size: 58px;
letter-spacing: -3px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 800px) {
.chicaim-login-page {
padding:
65px 20px
55px;
}
.chicaim-login-container {
grid-template-columns: 1fr;
max-width: 600px;
gap: 55px;
}
.chicaim-login-content {
text-align: center;
margin: auto;
}
.chicaim-login-eyebrow {
justify-content: center;
}
.chicaim-login-description {
margin-left: auto;
margin-right: auto;
}
.chicaim-login-features {
text-align: left;
max-width: 430px;
margin-left: auto;
margin-right: auto;
}
.chicaim-login-trust {
grid-template-columns:
repeat(2, 1fr);
margin-top: 55px;
}
.chicaim-login-trust > div:nth-child(2) {
border-right: 0;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 550px) {
.chicaim-login-page {
padding:
45px 14px
45px;
}
.chicaim-login-content h1 {
font-size: 46px;
letter-spacing: -2.5px;
}
.chicaim-login-description {
font-size: 14px;
}
.chicaim-login-card {
padding: 24px 18px;
border-radius: 20px;
}
.chicaim-login-trust {
grid-template-columns: 1fr;
padding: 15px;
}
.chicaim-login-trust > div {
border-right: 0;
border-bottom:
1px solid
rgba(255,255,255,.06);
padding: 14px 8px;
}
.chicaim-login-trust > div:last-child {
border-bottom: 0;
}
}/* End custom CSS */