/* ================================================================ Staff Portal Login — clean card, related to the Clock-in portal look (SCHPAY brand, #20498B palette) but a richer layout. Self-contained (no main-app references). ================================================================ */ *, *::before, *::after { box-sizing: border-box; } /* The main app login layout paints a background image on ; override it with a clean light backdrop like the clock-in portal. */ body { background: linear-gradient(160deg, #eef2f9 0%, #f4f6fb 50%, #e9eef7 100%) !important; margin: 0; padding: 0; min-height: 100vh; font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 14px; line-height: 1.5; color: #344054; } /* ── Card ─────────────────────────────────────────────────────── */ .sp-login { width: 100%; max-width: 880px; margin: 0 auto; } .sp-login-card { display: flex; width: 100%; background: #fff; border: 1px solid #e7ecf5; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 40px rgba(16, 24, 40, .12); } /* ── Left Brand Panel ─────────────────────────────────────────── */ .sp-login-brand { flex: 1 1 44%; padding: 46px 40px; display: flex; flex-direction: column; justify-content: center; color: #fff; background: #2a57cb; } .sp-brand-logo { width: 150px; max-width: 70%; margin-bottom: 22px; } .sp-brand-title { font-size: 26px; font-weight: 700; margin: 0 0 6px; } .sp-brand-sub { font-size: 15px; opacity: .9; margin: 0 0 26px; } .sp-brand-features { list-style: none; margin: 0 0 28px; padding: 0; } .sp-brand-features li { display: flex; align-items: center; gap: 12px; font-size: 14px; padding: 9px 0; opacity: .95; } .sp-brand-features li i { width: 22px; text-align: center; font-size: 15px; opacity: .85; } .sp-brand-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; opacity: .75; border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 18px; } /* ── Right Form Panel ─────────────────────────────────────────── */ .sp-login-form { flex: 1 1 56%; padding: 44px 42px; display: flex; flex-direction: column; justify-content: center; } .sp-login-form h1 { font-size: 24px; font-weight: 700; color: #101828; margin: 0 0 4px; } .sp-login-form .sp-form-sub { font-size: 13px; color: #667085; margin-bottom: 24px; } .sp-form .form-group { margin-bottom: 16px; } .sp-form .form-group label { display: block; font-size: 13px; font-weight: 600; color: #344054; margin-bottom: 6px; } /* ── Icon Input Wrapper ───────────────────────────────────────── */ .sp-input-wrap { display: flex; align-items: center; border: 1px solid #d5dceb; border-radius: 10px; background: #fff; height: 44px; overflow: hidden; transition: border-color .15s, box-shadow .15s; } .sp-input-wrap:focus-within { border-color: #20498B; box-shadow: 0 0 0 3px rgba(32, 73, 139, .12); } .sp-input-wrap .sp-input-icon { flex-shrink: 0; width: 40px; display: flex; align-items: center; justify-content: center; color: #98a2b3; font-size: 15px; } .sp-input-wrap input.form-control { flex: 1; min-width: 0; height: 100%; padding: 0 12px 0 0; font-size: 14px; border: none; outline: none; background: transparent; box-shadow: none; } .sp-input-wrap .sp-input-btn { flex-shrink: 0; width: 40px; height: 100%; border: none; background: none; color: #6b7280; font-size: 15px; cursor: pointer; padding: 0; } .sp-input-wrap .sp-input-btn:hover { color: #344054; } /* ── Captcha ──────────────────────────────────────────────────── */ .sp-captcha .sp-captcha-code { margin-bottom: 8px; } .sp-captcha .sp-captcha-code img { border: 1px solid #d5dceb; border-radius: 8px; height: 44px; cursor: pointer; } .sp-captcha .form-control { width: 100%; height: 44px; padding: 6px 12px; font-size: 14px; border: 1px solid #d5dceb; border-radius: 10px; outline: none; background: #fff; } .sp-captcha .form-control:focus { border-color: #20498B; box-shadow: 0 0 0 3px rgba(32, 73, 139, .12); } /* ── Remember me / Forgot password ────────────────────────────── */ .sp-options { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 18px; font-size: 13px; } .sp-options .sp-remember { display: flex; align-items: center; gap: 6px; font-weight: 500; color: #475467; margin: 0; } .sp-options a { color: #20498B; font-weight: 600; text-decoration: none; } .sp-options a:hover { text-decoration: underline; } /* ── Button ───────────────────────────────────────────────────── */ .sp-btn { width: 100%; height: 46px; padding: 0 16px; font-size: 15px; font-weight: 600; color: #fff !important; background: #20498B !important; border: none; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s; } .sp-btn:hover { background: #1b3a72 !important; } /* ── Footer ───────────────────────────────────────────────────── */ .sp-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid #eef1f6; font-size: 12px; color: #98a2b3; text-align: center; } .sp-foot p { margin: 3px 0; } .sp-foot a { color: #20498B; text-decoration: none; } .sp-foot a:hover { text-decoration: underline; } /* ── Errors ───────────────────────────────────────────────────── */ .text-danger { color: #dc2626; font-size: 12px; margin-top: 4px; display: block; } /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width: 767px) { .wrap .container { height: auto !important; min-height: 100vh; padding: 24px 16px; } .sp-login-card { flex-direction: column; } .sp-login-brand { padding: 30px 26px; } .sp-login-brand .sp-brand-features { display: none; } .sp-login-form { padding: 30px 26px; } }