/*
* auth.css — the unified sign-in chrome for the Axis Meridi suite (v1).
*
* One design across the Vantage operator login, every client-portal login,
* and (ported to React) AxisCommand: a looping steel/blue motion field
* (12s seamless Remotion render) under an org-accent tint, with a single
* glass card on top. White-labeling happens ONLY through --org-accent and
* the logo slot — the video stays neutral by design.
*
* Markup contract (see views/login.ejs for the reference implementation):
*
*
* …
*
*
*/
.auth-page {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 20px;
box-sizing: border-box;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 300;
color: #111827;
background: #F3F6F9; /* matches the loop's field while media loads */
-webkit-font-smoothing: antialiased;
}
.auth-page *, .auth-page *::before, .auth-page *::after { box-sizing: border-box; }
/* ── The motion field ────────────────────────────────────────────── */
.auth-scene {
position: fixed;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.auth-bg, .auth-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Org accent wash — multiply keeps the field light while taking the hue */
.auth-tint {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 120% 90% at 78% 18%, var(--org-accent, #0D1B2A) 0%, transparent 62%);
opacity: 0.10;
mix-blend-mode: multiply;
}
/* Reduced motion: freeze to the poster (video hidden, poster painted by bg) */
@media (prefers-reduced-motion: reduce) {
.auth-bg, .auth-canvas { display: none; }
.auth-scene {
background: url('/assets/motion/vantage-auth-poster.jpg') center / cover no-repeat;
}
}
/* ── The card ────────────────────────────────────────────────────── */
.auth-logo {
position: relative;
z-index: 1;
margin-bottom: 22px;
display: flex;
align-items: center;
justify-content: center;
}
.auth-logo img { max-height: 44px; max-width: 200px; display: block; }
.auth-logo .auth-logo-text {
font-size: 17px;
font-weight: 400;
letter-spacing: 0.04em;
color: var(--org-accent, #0D1B2A);
}
.auth-card {
position: relative;
z-index: 1;
width: 100%;
max-width: 400px;
padding: 40px 36px 32px;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(18px) saturate(1.5);
-webkit-backdrop-filter: blur(18px) saturate(1.5);
border: 1px solid rgba(17, 17, 17, 0.08);
box-shadow: 0 24px 64px -32px rgba(13, 27, 42, 0.25);
}
.auth-eyebrow {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: #5C6B7A;
text-align: center;
margin: 0 0 12px;
}
.auth-title {
font-size: 22px;
font-weight: 300;
letter-spacing: -0.01em;
line-height: 1.25;
text-align: center;
color: #111827;
margin: 0 0 6px;
}
.auth-sub {
font-size: 13px;
font-weight: 300;
line-height: 1.55;
text-align: center;
color: #5C6B7A;
margin: 0 0 24px;
}
/* Primary CTA — org-accent solid, uppercase, press feedback */
.auth-btn {
display: block;
width: 100%;
padding: 14px;
background: var(--org-accent, #0D1B2A);
color: #fff;
border: 0;
font-family: inherit;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: opacity 150ms cubic-bezier(0.25, 1, 0.5, 1),
transform 150ms cubic-bezier(0.25, 1, 0.5, 1);
}
.auth-btn:hover { opacity: 0.92; }
.auth-btn:active { transform: scale(0.98); }
.auth-btn:focus-visible { outline: 2px solid #185FA5; outline-offset: 2px; }
.auth-btn-ghost {
background: transparent;
color: var(--org-accent, #0D1B2A);
border: 1px solid var(--org-accent, #0D1B2A);
}
.auth-btn-ghost:hover { opacity: 0.8; }
.auth-note {
font-size: 12px;
font-weight: 300;
color: #6B7280;
text-align: center;
line-height: 1.5;
margin: 10px 0 0;
}
/* Inputs */
.auth-field { margin: 0 0 14px; }
.auth-label {
display: block;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #5C6B7A;
margin-bottom: 6px;
}
.auth-input {
width: 100%;
padding: 12px 14px;
font-family: inherit;
font-size: 14px;
font-weight: 300;
color: #111827;
background: rgba(255, 255, 255, 0.85);
border: 1px solid #D4DAE0;
border-radius: 0;
}
.auth-input:focus {
outline: none;
border-color: var(--org-accent, #0D1B2A);
box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.12);
}
/* Alerts */
.auth-alert {
padding: 10px 14px;
font-size: 13px;
margin: 0 0 16px;
border-left: 3px solid;
}
.auth-alert-error { background: #FEF2F2; border-color: #DC4040; color: #991B1B; }
.auth-alert-info { background: #F0FAF3; border-color: #16A34A; color: #15803D; }
/* Divider + secondary flows */
.auth-hr {
border: 0;
border-top: 1px solid rgba(17, 17, 17, 0.08);
margin: 22px 0 18px;
}
.auth-alt summary {
font-size: 12px;
color: #6B7280;
text-align: center;
cursor: pointer;
list-style: none;
padding: 4px 0;
}
.auth-alt summary::-webkit-details-marker { display: none; }
.auth-alt summary:hover { color: #111827; }
.auth-alt[open] summary { margin-bottom: 14px; }
/* Footer strip below the card */
.auth-foot {
position: relative;
z-index: 1;
margin-top: 22px;
font-size: 11px;
font-weight: 300;
color: #9CA3AF;
text-align: center;
}
.auth-foot a { color: #9CA3AF; text-decoration: none; }
.auth-foot a:hover { color: #5C6B7A; }
/* Card entrance (mirrors motion.css .rise-in for standalone pages) */
@keyframes auth-rise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.auth-card.rise-in, .auth-logo.rise-in {
animation: auth-rise 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.auth-foot.rise-in { animation: auth-rise 400ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both; }
@media (prefers-reduced-motion: reduce) {
.auth-card.rise-in, .auth-logo.rise-in, .auth-foot.rise-in { animation: none; }
}