/** * Auth Pages — Landing-page aesthetic * Applies to login and 2FA pages via * * Mirrors the duty.blue landing page: * - Dark slate-900 (#0f172a) background * - Animated indigo + cyan gradient blobs * - Glassmorphism card (backdrop-filter blur) * - Brand indigo/cyan gradient button */ /* ── Page background ──────────────────────────────────────── */ body.auth-page { background-color: #0f172a !important; color: #f1f5f9; min-height: 100vh; position: relative; overflow-x: hidden; } /* Animated gradient blobs — CSS-only, no extra elements needed */ body.auth-page::before, body.auth-page::after { content: ''; position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; } body.auth-page::before { width: 650px; height: 650px; top: -220px; left: -180px; background: radial-gradient(circle, rgba(79, 70, 229, 0.45), transparent 65%); animation: auth-blob 14s ease-in-out infinite alternate; } body.auth-page::after { width: 550px; height: 550px; bottom: -180px; right: -160px; background: radial-gradient(circle, rgba(6, 182, 212, 0.38), transparent 65%); animation: auth-blob 11s ease-in-out 4s infinite alternate-reverse; } @keyframes auth-blob { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(50px, 35px) scale(1.18); } } /* ── Navbar: dark glass, seamlessly blends in ─────────────── */ body.auth-page .navbar { background-color: rgba(15, 23, 42, 0.80) !important; -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; box-shadow: none !important; } /* ── Wrapper + main-content: vertically centred ───────────── */ body.auth-page .wrapper { min-height: calc(100vh - var(--topnav-height, 56px)); display: flex; align-items: center; justify-content: center; background: transparent !important; } body.auth-page .main-content { background-color: transparent !important; display: flex; /* Column so flash alerts stack above the card instead of beside it */ flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; position: relative; z-index: 1; /* Remove the left offset used when sidebar is hidden */ margin-left: 0 !important; /* layout.css forces min-height:100vh, but the wrapper starts below the fixed navbar — 100vh pushes the flex-centred card below true centre and adds a scrollbar */ min-height: calc(100vh - var(--topnav-height, 56px)); } /* Remove Bootstrap container max-width constraint inside auth pages */ body.auth-page .container { max-width: 100% !important; } /* ── Glassmorphism card ───────────────────────────────────── */ body.auth-page .card { background: rgba(30, 41, 59, 0.65) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important; -webkit-backdrop-filter: blur(24px) !important; backdrop-filter: blur(24px) !important; border-radius: 1.25rem !important; box-shadow: 0 8px 48px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important; color: #f1f5f9; max-width: 440px; width: 100%; /* Centre within the Bootstrap column, which is wider than the card */ margin-inline: auto; } body.auth-page .card .card-body { padding: 2.25rem !important; } /* ── Typography inside the card ──────────────────────────── */ body.auth-page .card h1, body.auth-page .card h2, body.auth-page .card h3, body.auth-page .card h4, body.auth-page .card h5 { color: #f1f5f9 !important; font-family: 'Poppins', system-ui, sans-serif; } body.auth-page .card .text-muted { color: #94a3b8 !important; } body.auth-page .card .form-label { color: #cbd5e1; font-weight: 500; font-size: 0.9rem; } /* ── Inputs and input groups ─────────────────────────────── */ body.auth-page .card .form-control { background-color: rgba(15, 23, 42, 0.55) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #f1f5f9 !important; border-radius: 0.625rem; } body.auth-page .card .form-control:focus { background-color: rgba(15, 23, 42, 0.75) !important; border-color: #4f46e5 !important; box-shadow: 0 0 0 0.25rem rgba(79, 70, 229, 0.28) !important; color: #f1f5f9 !important; } body.auth-page .card .form-control::placeholder { color: #64748b; } body.auth-page .card .input-group-text { background-color: rgba(15, 23, 42, 0.55) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #94a3b8 !important; } /* Password toggle */ body.auth-page .card .btn-outline-secondary { background-color: rgba(15, 23, 42, 0.55) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: #94a3b8 !important; } body.auth-page .card .btn-outline-secondary:hover { background-color: rgba(79, 70, 229, 0.15) !important; color: #c7d2fe !important; border-color: rgba(79, 70, 229, 0.4) !important; } /* ── Primary action button — brand gradient ──────────────── */ body.auth-page .card .btn-primary { background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%) !important; border: none !important; color: #ffffff !important; font-weight: 600; border-radius: 0.75rem; padding: 0.7rem 1.5rem; box-shadow: 0 4px 20px rgba(79, 70, 229, 0.38); transition: all 0.25s ease; } body.auth-page .card .btn-primary:hover, body.auth-page .card .btn-primary:focus { background: linear-gradient(135deg, #4338ca 0%, #0891b2 100%) !important; transform: translateY(-1px); box-shadow: 0 6px 28px rgba(79, 70, 229, 0.55) !important; } body.auth-page .card .btn-primary:active { transform: translateY(0); } /* ── Links ───────────────────────────────────────────────── */ body.auth-page .card a:not(.btn) { color: #818cf8; } body.auth-page .card a:not(.btn):hover { color: #a5b4fc; text-decoration: underline; } /* ── Divider ─────────────────────────────────────────────── */ body.auth-page .card hr { border-color: rgba(255, 255, 255, 0.09); } /* ── Checkbox ────────────────────────────────────────────── */ body.auth-page .card .form-check-label { color: #cbd5e1; font-size: 0.9rem; } body.auth-page .card .form-check-input:checked { background-color: #4f46e5; border-color: #4f46e5; } /* ── Alerts inside the card ──────────────────────────────── */ body.auth-page .card .alert-danger { background-color: rgba(220, 53, 69, 0.15) !important; border-color: rgba(220, 53, 69, 0.38) !important; color: #fca5a5 !important; } /* ── 2FA icon circle ─────────────────────────────────────── */ body.auth-page .card .bg-primary.bg-opacity-10 { background-color: rgba(79, 70, 229, 0.18) !important; } body.auth-page .card .text-primary { color: #818cf8 !important; } /* ── Cancel / btn-link ───────────────────────────────────── */ body.auth-page .card .btn-link { color: #64748b; } body.auth-page .card .btn-link:hover { color: #94a3b8; } /* ── Flash message alerts (above card, in .main-content) ──── */ body.auth-page .main-content > .alert { width: 100%; max-width: 440px; } body.auth-page .alert-danger.alert-dismissible { background-color: rgba(220, 53, 69, 0.18) !important; border-color: rgba(220, 53, 69, 0.40) !important; color: #fca5a5 !important; } body.auth-page .alert-success.alert-dismissible { background-color: rgba(25, 135, 84, 0.18) !important; border-color: rgba(25, 135, 84, 0.40) !important; color: #86efac !important; } body.auth-page .alert-info.alert-dismissible { background-color: rgba(6, 182, 212, 0.15) !important; border-color: rgba(6, 182, 212, 0.40) !important; color: #67e8f9 !important; } .alert-danger .btn-close, .alert-success .btn-close, .alert-info .btn-close { filter: invert(1); } /* ── Hide footer on auth pages ───────────────────────────── */ body.auth-page footer { display: none; }