/* Login Page Styles */ :root { /* DEFAULT (Navy) - tetap sebagai fallback */ --login-bg-start: #0B0C33; --login-bg-end: #1E3A8A; --login-header-bg: linear-gradient(135deg, #0B0C33 0%, #1E3A8A 100%); --login-header-text: #ffffff; --primary-color: #2F6FED; --secondary-color: #7C3AED; } /* Variants: set via class pada */ body.login-page.theme-navy { --login-bg-start: #0B0C33; --login-bg-end: #1E3A8A; --login-header-bg: linear-gradient(135deg, #0B0C33, #1E3A8A); --login-header-text: #ffffff; --primary-color: #2F6FED; --secondary-color: #7C3AED; } /* Teal Fresh */ body.login-page.theme-teal { --login-bg-start: #0D9488; /* teal gelap */ --login-bg-end: #0F766E; /* teal lebih gelap */ --login-header-bg: linear-gradient(135deg, #0D9488, #06B6D4); /* teal -> cyan */ --login-header-text: #ffffff; --primary-color: #0EA5A3; /* teal */ --secondary-color: #06B6D4;/* cyan */ } /* Neutral Warm */ body.login-page.theme-neutral { --login-bg-start: #EDE0D4; /* krem lembut */ --login-bg-end: #B08968; /* coklat muda */ --login-header-bg: linear-gradient(135deg, #8B5E34, #D4A373); /* warm brown -> amber */ --login-header-text: #ffffff; --primary-color: #B08968; /* warm brown */ --secondary-color: #D4A373;/* amber warm */ } /* Background global login tetap memanfaatkan variabel di atas */ body.login-page { min-height: 100vh; display: flex; align-items: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Background yang lebih proporsional dan fokus */ background: radial-gradient(1200px 600px at 80% 10%, rgba(255,255,255,0.06), transparent 60%), radial-gradient(800px 400px at 10% 80%, rgba(255,255,255,0.05), transparent 60%), linear-gradient(135deg, var(--login-bg-start) 0%, var(--login-bg-end) 100%); } .login-card { position: relative; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(14px) saturate(110%); border-radius: 16px; /* sedikit lebih ringkas */ box-shadow: 0 12px 28px rgba(10, 20, 60, 0.22); border: 1px solid rgba(255, 255, 255, 0.25); max-width: 420px; /* beri ruang lebih agar teks tidak mepet */ margin: 0 auto; overflow: hidden; } .login-card::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(135deg, rgba(102,126,234,.5), rgba(118,75,162,.5)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .login-header { background: var(--login-header-bg); color: var(--login-header-text); border-radius: 16px 16px 0 0; padding: 1.5rem 1.25rem 1rem; /* ringkas agar proporsional */ text-align: center; } .login-logo { max-height: 60px; max-width: 200px; object-fit: contain; filter: brightness(0) invert(1); } /* Branding yang lebih elegan */ .brand-logo { filter: drop-shadow(0 4px 10px rgba(0,0,0,.15)); } .login-brand-title { font-weight: 800; font-size: 1.4rem; letter-spacing: .2px; } .login-brand-subtitle { opacity: .9; font-size: .925rem; } .login-card .card-body { padding: 1.5rem !important; } .form-control { border-radius: 12px; border: 2px solid #e9ecef; padding: 12px 14px; transition: all 0.25s ease; box-shadow: none; } .form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.18rem rgba(102, 126, 234, 0.22); } .btn-login { background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); border: none; border-radius: 12px; padding: 12px; font-weight: 700; letter-spacing: .3px; transition: transform .15s ease, box-shadow .25s ease; width: 100%; box-shadow: 0 6px 18px rgba(47, 111, 237, 0.28); } .btn-login:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(102, 126, 234, 0.38); } /* Input group + toggle password lebih menyatu */ .input-group-text { background: #f8f9fa; border: 2px solid #e9ecef; border-right: none; border-radius: 12px 0 0 12px; } .input-group .form-control { border-left: none; border-radius: 0 12px 12px 0; } .password-toggle { cursor: pointer; padding: 0 14px; background: #f8f9fa; border: 2px solid #e9ecef; border-left: none; border-radius: 0 12px 12px 0; color: #6c757d; display: inline-flex; align-items: center; } .password-toggle:hover { color: #4b5563; } /* Footer halus */ .login-card .card-footer { background: transparent; border-top: 1px dashed rgba(0,0,0,.08); } /* Responsive Design */ @media (max-width: 576px) { .login-card { margin: 1rem; max-width: none; } .login-header { padding: 1.25rem 1rem .75rem; } .login-card .card-body { padding: 1rem !important; } } /* Animations: card in + fade up */ @keyframes cardIn { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes borderFade { from { opacity: 0; } to { opacity: 1; } } /* initial states (tanpa JS: tetap terlihat, namun dengan JS akan lebih halus) */ body.login-page .login-card { opacity: 0; transform: translateY(6px) scale(0.985); } body.login-page.loaded .login-card { animation: cardIn .55s ease-out both; } body.login-page .animate-fadeup { opacity: 0; transform: translateY(8px); } body.login-page.loaded .animate-fadeup { animation: fadeUp .6s ease-out forwards; } /* urutan delay untuk efek stagger */ .delay-1 { animation-delay: .05s; } .delay-2 { animation-delay: .12s; } .delay-3 { animation-delay: .20s; } .delay-4 { animation-delay: .28s; } .delay-5 { animation-delay: .36s; } .delay-6 { animation-delay: .44s; } /* haluskan kemunculan border gradient pseudo-element */ body.login-page.loaded .login-card::before { animation: borderFade .8s ease-out both .25s; }