/**
* SeAT Custom Login Page — Dark Anthracite + Teal + Neon Magenta
* custom-layout-mini.css — applied only to the sign-in page
*/
@media all {
html, body {
height: auto;
}
/* ── Background ──────────────────────────────────────────────── */
.login-page,
.register-body {
background-color: #141618;
background-image:
radial-gradient(ellipse at 20% 50%, rgba(240, 180, 41, 0.07) 0%, transparent 60%),
radial-gradient(ellipse at 80% 20%, rgba(139, 47, 216, 0.05) 0%, transparent 50%),
repeating-linear-gradient(
0deg,
transparent,
transparent 40px,
rgba(255,255,255,0.015) 40px,
rgba(255,255,255,0.015) 41px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 40px,
rgba(255,255,255,0.015) 40px,
rgba(255,255,255,0.015) 41px
);
color: #e8edf2;
}
/* ── Login Box ───────────────────────────────────────────────── */
.login-box,
.register-box {
width: 380px;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(26, 29, 31, 0.92);
border: 1px solid rgba(240, 180, 41, 0.25);
border-radius: 12px;
box-shadow:
0 0 0 1px rgba(240, 180, 41, 0.1),
0 8px 40px rgba(0,0,0,0.6),
0 0 60px rgba(240, 180, 41, 0.05);
backdrop-filter: blur(12px);
}
/* ── Default SeAT SVG logo ───────────────────────────────────────
SeAT renders 
directly —
it's a real ![]()
, not an empty container, so ::before on it won't
reliably render. Hide it and paint our own logo on its wrapper.
Client-side only — doesn't touch public/web/, so it's safe from
the vendor-publish rebuild on container boot. */
img.login-logo {
display: none !important;
}
.text-center.mb-4 {
position: relative;
}
.text-center.mb-4::before {
content: '';
display: block;
width: 128px;
height: 128px;
margin: 0 auto 20px;
background-image: url(/logo.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
border: 2px solid rgba(240, 180, 41, 0.4);
box-shadow: 0 0 20px rgba(240, 180, 41, 0.2);
}
/* ── Logo / Title ────────────────────────────────────────────── */
.login-logo,
.register-logo {
font-size: 35px;
text-align: center;
margin-top: 50px;
margin-bottom: 25px;
font-weight: 300;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #f0b429;
}
.login-logo a,
.register-logo a {
color: #f0b429 !important;
text-decoration: none !important;
}
/* Circular logo mark — background-image (not content:url) so it scales
cleanly via background-size and never falls back to broken-image alt text */
.login-logo::before,
.register-logo::before {
content: '';
display: block;
width: 128px;
height: 128px;
margin: 0 auto 40px;
background-image: url(/logo.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
border: 2px solid rgba(240, 180, 41, 0.4);
box-shadow: 0 0 20px rgba(240, 180, 41, 0.2);
}
/* Accent line under logo */
.login-logo::after {
content: '';
display: block;
width: 40px;
height: 2px;
background: linear-gradient(90deg, #f0b429, #8b2fd8);
margin: 12px auto 0;
border-radius: 2px;
}
/* ── Login Box Body ──────────────────────────────────────────── */
.login-box-body,
.register-box-body {
background: transparent;
padding: 24px 28px 28px;
border-top: 1px solid rgba(255,255,255,0.05);
color: #e8edf2;
border-radius: 0 0 12px 12px;
}
/* ── Form Labels ─────────────────────────────────────────────── */
.login-box-body label,
.login-box-body .control-label {
color: #8a9baa;
font-size: 0.8em;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 4px;
}
/* ── Inputs ──────────────────────────────────────────────────── */
.login-box-body .form-control,
.login-box-body input[type="text"],
.login-box-body input[type="email"],
.login-box-body input[type="password"] {
background-color: rgba(0,0,0,0.35) !important;
border: 1px solid rgba(240, 180, 41, 0.2) !important;
border-radius: 6px !important;
color: #e8edf2 !important;
height: 40px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.login-box-body .form-control:focus,
.login-box-body input:focus {
border-color: #f0b429 !important;
box-shadow: 0 0 0 2px rgba(240, 180, 41, 0.15) !important;
outline: none !important;
background-color: rgba(0,0,0,0.5) !important;
}
.login-box-body .form-control::placeholder {
color: #556070 !important;
}
/* Input icons */
.login-box-body .input-group-addon,
.login-box-body .input-group-text {
background-color: rgba(240, 180, 41, 0.1) !important;
border: 1px solid rgba(240, 180, 41, 0.2) !important;
color: #f0b429 !important;
border-radius: 6px 0 0 6px !important;
}
/* ── Login Button ────────────────────────────────────────────── */
.login-box-body .btn-primary {
background: linear-gradient(135deg, #c9891a, #f0b429) !important;
border: none !important;
border-radius: 6px !important;
color: #fff !important;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: 0.85em;
height: 40px;
transition: all 0.25s ease;
box-shadow: 0 2px 12px rgba(240, 180, 41, 0.25);
}
.login-box-body .btn-primary:hover {
background: linear-gradient(135deg, #f0b429, #f7cc6b) !important;
box-shadow: 0 4px 20px rgba(240, 180, 41, 0.4) !important;
transform: translateY(-1px);
}
/* ── Links ───────────────────────────────────────────────────── */
.login-box-body a {
color: #f0b429 !important;
transition: color 0.15s ease;
}
.login-box-body a:hover {
color: #8b2fd8 !important;
text-decoration: none !important;
}
/* ── EVE SSO Button ──────────────────────────────────────────── */
.login-box-body .btn-eve,
.login-box-body [class*="eve"] {
background-color: #1a1d1f !important;
border: 1px solid rgba(240, 180, 41, 0.3) !important;
border-radius: 6px !important;
transition: all 0.2s ease;
}
.login-box-body .btn-eve:hover {
border-color: #8b2fd8 !important;
box-shadow: 0 0 12px rgba(139, 47, 216, 0.2) !important;
}
/* ── Divider ─────────────────────────────────────────────────── */
.login-box-body hr {
border-color: rgba(255,255,255,0.06) !important;
margin: 16px 0;
}
/* ── Checkbox ────────────────────────────────────────────────── */
.login-box-body .checkbox label {
color: #8a9baa !important;
font-size: 0.85em;
text-transform: none;
letter-spacing: normal;
}
}