/* ============================================================ Auth pages (login, forgot-password, reset-password) Gradient background + glassmorphism card & input styling. Palet warna brand: indigo (#3949AB) -> dark indigo (#1E2761) ============================================================ */ :root { --brand-primary: #3949AB; --brand-primary-light: #5C6BC0; --brand-dark: #1E2761; --brand-accent: #00BFA5; --glass-bg: rgba(255, 255, 255, 0.14); --glass-border: rgba(255, 255, 255, 0.28); --glass-input-bg: rgba(255, 255, 255, 0.16); --glass-input-border: rgba(255, 255, 255, 0.35); } html, body { height: 100%; } body.auth-body { margin: 0; min-height: 100vh; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; /* Gambar background - lihat APP_LOGIN_BG di application/config/constants.php kalau mau GANTI GAMBARNYA: cukup timpa file di assets/custom/img/login-bg.svg dengan gambar lain (SVG/PNG/JPG apa saja), atau ubah baris di bawah ini ke path gambar barumu. */ background-image: url('../img/login-bg.svg'); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: var(--brand-dark); /* fallback kalau gambar gagal load */ position: relative; overflow-x: hidden; display: flex; align-items: center; justify-content: center; padding: 24px 16px; } /* Background DIPASANG JUGA di (bukan cuma ) - jaga-jaga kalau tinggi konten body ternyata dihitung browser lebih pendek dari viewport (pernah kejadian di uji headless-browser, muncul celah putih di bawah). */ html { background-image: url('../img/login-bg.svg'); background-size: cover; background-position: center; background-color: #1E2761; } .auth-wrapper { position: relative; z-index: 1; width: 100%; max-width: 420px; } /* Bar dua logo di ATAS kartu kaca - logo pemilik aplikasi (kiri, hardcode) & logo client (kanan, muncul setelah login pertama sukses, lihat auth.js) */ .dual-logo-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 10px 4px; min-height: 40px; background: rgba(255,255,255,0.7); border-radius:10px; position:absolute; right:10px; top:-35px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } .dual-logo-bar .owner-logo img { max-height: 30px; width: auto; display: block; } .dual-logo-bar .client-logo-slot { display: flex; align-items: center; justify-content: flex-end; } .dual-logo-bar .client-logo-slot img { max-height: 40px; max-width: auto; width: auto; display: block; border-radius: 6px; padding: 3px 8px; } .dual-logo-bar .client-logo-placeholder { font-size: 0.68rem; color: rgba(255,255,255,0.45); font-style: italic; } .glass-card { background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 18px; padding: 2.25rem 2rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); color: #ffffff; } .auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 1.5rem; } .auth-brand .icon-badge { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; font-size: 18px; } .auth-brand .brand-text { font-weight: 700; font-size: 1.05rem; letter-spacing: 0.2px; padding: 10px; background: rgba(25,50,100,0.7); border-radius:10px; position:absolute; left:10px; top:-20px; min-height: 40px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); display: none; } .glass-card h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.35rem; } .glass-card p.subtitle { font-size: 0.875rem; color: rgba(255,255,255,0.75); margin-bottom: 1.5rem; } .glass-card label { font-size: 0.8rem; font-weight: 600; color: rgba(255,255,255,0.9); margin-bottom: 0.4rem; } .input-icon-wrap { position: relative; } .input-icon-wrap > .fa, .input-icon-wrap > .fas { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.6); font-size: 0.9rem; pointer-events: none; } .glass-input { background: var(--glass-input-bg) !important; border: 1px solid var(--glass-input-border) !important; color: #ffffff !important; border-radius: 10px !important; padding: 0.65rem 1rem 0.65rem 2.5rem !important; height: auto !important; backdrop-filter: blur(6px); transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; } .glass-input::placeholder { color: rgba(255,255,255,0.55); } .glass-input:focus { background: rgba(255,255,255,0.24) !important; border-color: rgba(255,255,255,0.6) !important; box-shadow: 0 0 0 3px rgba(255,255,255,0.12) !important; color: #ffffff !important; } .glass-input.is-invalid { border-color: #ff8a80 !important; } .toggle-password { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255,255,255,0.65); cursor: pointer; padding: 4px 6px; } .toggle-password:hover { color: #ffffff; } .btn-glass-primary { background: linear-gradient(135deg, #00BFA5, #00A896); border: none; color: #ffffff; font-weight: 600; padding: 0.7rem 1rem; border-radius: 10px; transition: filter .15s ease, transform .1s ease; } .btn-glass-primary:hover { filter: brightness(1.08); color: #fff; } .btn-glass-primary:active { transform: scale(0.99); } .btn-glass-primary:disabled { opacity: 0.7; } .auth-link { color: rgba(255,255,255,0.85); font-size: 0.825rem; text-decoration: underline; } .auth-link:hover { color: #ffffff; } .auth-alert { border: none; border-radius: 10px; font-size: 0.85rem; padding: 0.75rem 1rem; } .auth-alert.alert-danger { background: rgba(255, 82, 82, 0.22); color: #ffdada; } .auth-alert.alert-success { background: rgba(0, 191, 165, 0.22); color: #d7fff7; } .auth-footer-note { text-align: center; color: rgba(255,255,255,0.55); font-size: 0.75rem; margin-top: 1.5rem; } /* indikator kekuatan password (halaman reset password) */ .pw-strength { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.2); margin-top: 8px; overflow: hidden; } .pw-strength-bar { height: 100%; width: 0%; transition: width .2s ease, background-color .2s ease; } .pw-strength-label { font-size: 0.72rem; color: rgba(255,255,255,0.65); margin-top: 4px; display: block; } /* Responsif: layar kecil */ @media (max-width: 420px) { .glass-card { padding: 1.75rem 1.25rem; border-radius: 14px; } .glass-card h1 { font-size: 1.3rem; } }