/* ==========================================================================
Boursa Kuwait CMS — Login Page Style Override
Targets the real AdminLTE markup at /login/login.
HOW TO USE:
Add this AFTER the existing stylesheets in , right before :
<-- add this line
Only overrides are included here — nothing is removed from AdminLTE,
Font Awesome, or icheck-bootstrap. Safe to layer on top.
Replace --brand-navy / --brand-navy-dark with Boursa Kuwait's exact
brand hex codes if these placeholders don't match.
========================================================================== */
:root {
--brand-navy: #0c447c;
--brand-navy-dark: #042c53;
--brand-navy-light: #e6f1fb;
--border-color: #dde2e8;
--radius-md: 8px;
--radius-lg: 12px;
}
/* ---- Page background ---------------------------------------------------
Replace the busy news.png photo background with a calm, brand-tinted
surface so the card is the clear focal point. */
body.login-page {
background-image: url('/Assets/Images/boursa-building-banner-darkened.png') !important;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #031b33;
}
/* ---- Login box / card --------------------------------------------------- */
.login-box {
width: 380px;
}
.login-box .card {
border: none;
border-radius: var(--radius-lg);
box-shadow: 0 8px 32px rgba(12, 68, 124, 0.12);
overflow: hidden;
}
.login-card-body {
padding: 32px 32px 24px;
}
/* ---- Logo + heading ------------------------------------------------------- */
.login-logo {
margin-bottom: 4px;
}
.login-logo img {
width: 72px !important;
margin-top: 0 !important;
margin-bottom: 8px;
}
.login-logo h3 {
font-family: 'Tajawal-Medium', sans-serif;
font-size: 19px;
font-weight: 600;
color: var(--brand-navy-dark);
margin: 0 0 20px;
}
/* ---- Input groups (username / password / captcha text) ------------------- */
.login-card-body .input-group {
margin-bottom: 14px !important;
}
.login-card-body .form-control {
height: 44px;
border-color: var(--border-color);
border-radius: var(--radius-md) 0 0 var(--radius-md);
font-size: 14px;
background-color: #fafbfc;
}
.login-card-body .form-control:focus {
border-color: var(--brand-navy);
background-color: #fff;
box-shadow: 0 0 0 3px rgba(12, 68, 124, 0.12) !important;
}
.login-card-body .form-control::placeholder {
color: #9aa1ad;
}
.login-card-body .input-group-text {
background-color: #fafbfc;
border-color: var(--border-color);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
color: #9aa1ad;
width: 42px;
justify-content: center;
}
.login-card-body .form-control:focus ~ .input-group-append .input-group-text {
border-color: var(--brand-navy) !important;
color: var(--brand-navy);
}
/* ---- Captcha image -------------------------------------------------------
The ![]()
currently floats bare. Give it a contained,
bordered surface so it reads as a distinct UI element. */
.login-card-body center {
display: block;
margin: 0 0 14px;
}
.login-card-body center img {
display: inline-block;
padding: 6px 10px;
background: #fafbfc;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
}
/* Remove the stray
spacing AdminLTE/this markup relies on, replaced
by the margins above and below. */
.login-card-body br {
display: none;
}
/* ---- Primary action: Log in button ---------------------------------------- */
.login-card-body .btn-primary {
height: 46px;
background-color: var(--brand-navy);
border-color: var(--brand-navy);
border-radius: var(--radius-md);
font-size: 15px;
font-weight: 600;
margin-top: 4px;
}
.login-card-body .btn-primary:hover,
.login-card-body .btn-primary:focus {
background-color: var(--brand-navy-dark);
border-color: var(--brand-navy-dark);
box-shadow: 0 0 0 3px rgba(12, 68, 124, 0.18);
}
/* ---- Secondary action: Single Sign-On link --------------------------------
Currently a btn-outline-warning (yellow outline) — restyle to a calmer
navy outline so it reads as "secondary", not "alternate/warning". */
.login-card-body .btn-outline-warning {
height: 46px;
display: flex;
align-items: center;
justify-content: center;
color: var(--brand-navy);
border-color: var(--brand-navy);
border-radius: var(--radius-md);
font-size: 14px;
font-weight: 600;
margin-top: 12px;
}
.login-card-body .btn-outline-warning:hover {
background-color: var(--brand-navy-light);
color: var(--brand-navy-dark);
border-color: var(--brand-navy);
}
/* ---- Row spacing between buttons ------------------------------------------- */
.login-card-body .row .col-lg-12 {
margin-bottom: 4px;
}
/* ---- Error label (currently bare red bold text) ---------------------------- */
.login-card-body label[style*="color:red"] {
display: block;
margin-top: 8px;
font-size: 12px;
}
/* ---- Accessibility: visible focus outline for keyboard users --------------- */
.login-card-body a:focus-visible,
.login-card-body button:focus-visible,
.login-card-body input:focus-visible {
outline: 2px solid var(--brand-navy);
outline-offset: 2px;
}
/* ---- Responsive ------------------------------------------------------------- */
@media (max-width: 420px) {
.login-box {
width: 100%;
padding: 0 16px;
}
.login-card-body {
padding: 28px 22px 20px;
}
}