/* ══════════════════════════════════════════════════════════════════════════ Role login pages — neon glow theme. Used by agent-login.php, lender-login.php, houseowner-login.php and user-login.php. Each page tags its breadcrumb section and its .login-wrap section with "rl-theme rl-" and loads this file after its own inline styles. Everything below is scoped to .rl-theme, so the gold defaults the pages still carry (and the register modals further down them) are untouched. One colour per role, matching the role cards on login.php: agent = cyan lender = purple owner = coral buyer = yellow --rgb drives every border, halo and tint; --hi / --lo are the light and deep ends of the filled pills. --gold-primary is re-pointed at --hi so the page's own "var(--gold-primary)" rules and inc/login_signup_hint.php follow the role colour without being edited. ══════════════════════════════════════════════════════════════════════════ */ .rl-agent { --rgb: 34, 211, 238; --hi: #8af3ff; --lo: #14b8d4; } .rl-lender { --rgb: 167, 139, 250; --hi: #d2b8ff; --lo: #9567ee; } .rl-owner { --rgb: 255, 107, 122; --hi: #ff9aa4; --lo: #f2535f; } .rl-buyer { --rgb: 251, 191, 36; --hi: #ffe27a; --lo: #f5a50f; } .rl-theme { --gold-primary: var(--hi); } /* ── Breadcrumb pills ── */ .rl-theme .breadcrumb li a.bc-link, .rl-theme .btn-back { background: rgba(6, 17, 33, 0.72) !important; color: #eaf1f7 !important; border: 1px solid rgba(255, 255, 255, 0.30) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important; } .rl-theme .breadcrumb li a.bc-link i, .rl-theme .btn-back i { color: #eaf1f7 !important; } .rl-theme .breadcrumb li a.bc-link:hover, .rl-theme .btn-back:hover { background: rgba(var(--rgb), 0.14) !important; border-color: rgba(var(--rgb), 0.8) !important; color: #fff !important; box-shadow: 0 0 16px rgba(var(--rgb), 0.35) !important; } .rl-theme .breadcrumb li i.fa-angle-right { color: rgba(var(--rgb), 0.55); } /* Current page: filled with the role colour */ .rl-theme .breadcrumb li a.bc-link.is-current { background: linear-gradient(180deg, var(--hi) 0%, var(--lo) 100%) !important; color: #06121f !important; border-color: rgba(var(--rgb), 0.9) !important; box-shadow: 0 0 16px rgba(var(--rgb), 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; } .rl-theme .breadcrumb li a.bc-link.is-current:hover { color: #06121f !important; transform: none; } .rl-theme .breadcrumb li a.bc-link.is-current i { color: #06121f !important; } /* ── The card ── */ .rl-theme .login-card { background: radial-gradient(120% 60% at 50% 0%, rgba(var(--rgb), 0.16) 0%, transparent 62%), linear-gradient(165deg, rgba(11, 26, 46, 0.90) 0%, rgba(5, 14, 28, 0.93) 100%) !important; border: 2px solid rgba(var(--rgb), 0.9) !important; box-shadow: 0 0 0 1px rgba(var(--rgb), 0.14), 0 0 18px rgba(var(--rgb), 0.50), 0 0 48px rgba(var(--rgb), 0.22), 0 18px 40px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(var(--rgb), 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important; animation: rlBreathe 5s ease-in-out infinite; } .rl-theme .login-card:hover { border-color: rgba(var(--rgb), 1) !important; animation: none; box-shadow: 0 0 0 1px rgba(var(--rgb), 0.22), 0 0 24px rgba(var(--rgb), 0.65), 0 0 60px rgba(var(--rgb), 0.30), 0 22px 44px rgba(0, 0, 0, 0.55), inset 0 0 36px rgba(var(--rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.09) !important; } .rl-theme .login-card::before { border-color: rgba(var(--rgb), 0.10); } .rl-theme .login-card::after { background: radial-gradient(circle at center, rgba(var(--rgb), 0.07) 0%, transparent 58%); } @keyframes rlBreathe { 0%, 100% { box-shadow: 0 0 0 1px rgba(var(--rgb), 0.14), 0 0 16px rgba(var(--rgb), 0.42), 0 0 40px rgba(var(--rgb), 0.17), 0 18px 40px rgba(0, 0, 0, 0.5), inset 0 0 28px rgba(var(--rgb), 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.07); } 50% { box-shadow: 0 0 0 1px rgba(var(--rgb), 0.2), 0 0 22px rgba(var(--rgb), 0.62), 0 0 56px rgba(var(--rgb), 0.28), 0 18px 40px rgba(0, 0, 0, 0.5), inset 0 0 34px rgba(var(--rgb), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.07); } } /* ── Heading ── */ .rl-theme .login-header h2 { background: linear-gradient(180deg, var(--hi) 0%, rgb(var(--rgb)) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 10px rgba(var(--rgb), 0.45)); line-height: 1.2; } .rl-theme .login-header p { color: rgba(234, 242, 255, 0.78); } /* ── Fields ── */ .rl-theme .form-label { color: #f2f6ff; } .rl-theme .forgot-link { color: var(--hi); font-weight: 600; } .rl-theme .forgot-link:hover { color: #fff; } .rl-theme .custom-input { background: rgba(4, 12, 24, 0.78) !important; color: #fff !important; border: 1.5px solid rgba(var(--rgb), 0.75) !important; border-radius: 12px !important; box-shadow: 0 0 10px rgba(var(--rgb), 0.32), inset 0 0 12px rgba(var(--rgb), 0.08) !important; } .rl-theme .custom-input:hover { border-color: rgba(var(--rgb), 0.95) !important; background: rgba(4, 12, 24, 0.85) !important; } .rl-theme .custom-input:focus { border-color: rgb(var(--rgb)) !important; background: rgba(4, 12, 24, 0.9) !important; box-shadow: 0 0 0 3px rgba(var(--rgb), 0.22), 0 0 20px rgba(var(--rgb), 0.55), inset 0 0 14px rgba(var(--rgb), 0.12) !important; transform: none; } .rl-theme .custom-input::placeholder { color: rgba(190, 206, 230, 0.5) !important; } .rl-theme .custom-input:-webkit-autofill, .rl-theme .custom-input:-webkit-autofill:hover, .rl-theme .custom-input:-webkit-autofill:focus, .rl-theme .custom-input:-webkit-autofill:active { -webkit-text-fill-color: #fff !important; caret-color: #fff !important; -webkit-box-shadow: 0 0 0 1000px rgba(4, 12, 24, 0.95) inset, 0 0 10px rgba(var(--rgb), 0.32) !important; box-shadow: 0 0 0 1000px rgba(4, 12, 24, 0.95) inset, 0 0 10px rgba(var(--rgb), 0.32) !important; -webkit-background-clip: text !important; background-clip: text !important; transition: background-color 600000s 0s, color 600000s 0s !important; } .rl-theme .custom-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px rgba(4, 12, 24, 0.95) inset, 0 0 0 3px rgba(var(--rgb), 0.22), 0 0 20px rgba(var(--rgb), 0.55) !important; box-shadow: 0 0 0 1000px rgba(4, 12, 24, 0.95) inset, 0 0 0 3px rgba(var(--rgb), 0.22), 0 0 20px rgba(var(--rgb), 0.55) !important; } /* Firefox */ .rl-theme .custom-input:-moz-autofill { background-color: rgba(4, 12, 24, 0.95) !important; color: #fff !important; filter: none; } .rl-theme .input-wrapper .toggle-password, .rl-theme .input-wrapper #togglePassword { color: var(--hi) !important; opacity: 0.85; } .rl-theme .toggle-password:hover { opacity: 1; } .rl-theme .helper-text { color: rgba(190, 206, 230, 0.7); } /* ── Sign in pill ── */ .rl-theme .btn-signin { background: linear-gradient(180deg, rgba(var(--rgb), 0.16) 0%, rgba(6, 17, 33, 0.9) 100%) !important; color: var(--hi) !important; border: 1.5px solid rgba(var(--rgb), 0.9) !important; text-shadow: 0 0 10px rgba(var(--rgb), 0.55); box-shadow: 0 0 14px rgba(var(--rgb), 0.45), 0 0 34px rgba(var(--rgb), 0.18), 0 6px 16px rgba(0, 0, 0, 0.4), inset 0 0 16px rgba(var(--rgb), 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important; } .rl-theme .btn-signin:hover, .rl-theme .btn-signin:focus-visible { background: linear-gradient(180deg, var(--hi) 0%, var(--lo) 100%) !important; color: #06121f !important; text-shadow: none; border-color: rgb(var(--rgb)) !important; box-shadow: 0 0 24px rgba(var(--rgb), 0.7), 0 0 54px rgba(var(--rgb), 0.32), 0 8px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; } /* ── "Don't have an account?" ── */ .rl-theme .login-signup-hint { color: rgba(234, 242, 255, 0.72); } .rl-theme .login-signup-hint a { color: var(--hi); text-shadow: 0 0 10px rgba(var(--rgb), 0.4); } .rl-theme .login-signup-hint a:hover, .rl-theme .login-signup-hint a:focus-visible { color: #fff; } @media (prefers-reduced-motion: reduce) { .rl-theme .login-card { animation: none; } }