/* assets/css/login_style.css */ body.login-page { /* Add class="login-page" to tag in index.php if you want to scope these styles */ background-color: #eef1f4; /* A slightly softer background */ display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; font-family: 'Poppins', sans-serif; /* Example: Using a Google Font */ } .login-container { width: 100%; max-width: 420px; /* Slightly wider */ padding: 20px; } .login-card { border: none; border-radius: 10px; /* More rounded corners */ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); overflow: hidden; /* To ensure child elements respect border-radius */ } .login-card .card-header { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); /* Gradient background */ color: white; text-align: center; padding: 25px 20px; /* More padding */ border-bottom: none; /* Remove default border if any */ } .login-card .card-header .app-logo { max-width: 80px; /* Adjust as needed */ margin-bottom: 15px; filter: brightness(0) invert(1); /* If logo is dark, make it white */ } .login-card .card-header h3 { margin-bottom: 5px; font-weight: 600; /* Bolder */ font-size: 1.75rem; } .login-card .card-header p { margin-bottom: 0; font-size: 0.9rem; opacity: 0.9; } .login-card .card-body { padding: 30px; /* More padding in body */ } .login-card .form-control { border-radius: 5px; /* Rounded form controls */ padding: 10px 15px; height: auto; /* Adjust if needed */ border: 1px solid #ced4da; } .login-card .form-control:focus { border-color: #007bff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .login-card .input-group-text { border-radius: 5px 0 0 5px; /* Match form control rounding */ background-color: #f8f9fa; border-right: none; /* Seamless look with input */ } .login-card .input-group .form-control { border-left: none; /* Seamless look with input-group-text */ border-radius: 0 5px 5px 0; } .login-card .input-group .btn { /* For password toggle */ border-radius: 0 5px 5px 0; } .login-card .btn-primary { background-color: #007bff; border-color: #007bff; padding: 10px 15px; font-weight: 500; border-radius: 5px; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; } .login-card .btn-primary:hover { background-color: #0056b3; border-color: #0056b3; } .login-card .form-check-label { font-size: 0.9rem; } .login-card hr { margin-top: 25px; margin-bottom: 25px; } .login-card .card-footer { background-color: #f8f9fa; border-top: 1px solid #e9ecef; padding: 15px; font-size: 0.85rem; } .login-card .text-decoration-none small { color: #007bff; transition: color 0.2s ease-in-out; } .login-card .text-decoration-none small:hover { color: #0056b3; } /* Override Bootstrap alert styles slightly for login page if needed */ .login-card .alert { border-radius: 5px; font-size: 0.9rem; padding: 10px 15px; }