/* ============================================================ PPCL login — visual redesign only. No HTML/IDs/classes/JS touched anywhere in this file; every rule below targets the existing markup and, where the vendor theme CSS also sets a property, wins on load order (this block is the last stylesheet in ). ============================================================ */ :root{ --ppcl-ink:#1B1B2F; --ppcl-muted:#6B6884; --ppcl-label:#4A4766; --ppcl-line:#E4E1F0; --ppcl-sand:#FAF8F3; --ppcl-page-bg:#EDEAF7; --ppcl-indigo-900:#262A6B; --ppcl-indigo-700:#3C3FA0; --ppcl-indigo-500:#5457C4; --ppcl-coral:#E8834A; } /* ---------- page shell ---------- */ body{ font-family:'Public Sans', sans-serif; } .login-wrapper{ background:var(--ppcl-sand) !important; min-height:100vh; display:flex; align-items:stretch; justify-content:center; padding:0 !important; } .authentication-wrapper.authentication-basic.container-p-y{ padding:0 !important; width:100%; display:flex; justify-content:center; } /* ---------- the card itself (the existing .d-flex row) — now full page, edge to edge ---------- */ .authentication-wrapper > .d-flex{ width:100%; max-width:none; height:auto; min-height:100vh; max-height:none; border-radius:0; overflow:visible; box-shadow:none; background:var(--ppcl-sand); } /* ---------- left: form panel ---------- */ .authentication-inner{ width:46%; min-width:300px; height:auto; max-height:none; overflow-y:visible; display:flex; align-items:center; justify-content:center; background:var(--ppcl-sand); } .authentication-inner .card.rounded-0{ width:100%; max-width:480px; border:0 !important; box-shadow:none !important; background:transparent !important; margin:0 auto; } .authentication-inner .card-body{ padding:24px 16px; display:flex; flex-direction:column; } .authentication-inner img[alt="Logo"]{ border-radius:12px; box-shadow:0 8px 20px -8px rgba(38,42,107,0.45); vertical-align:middle; } .authentication-inner .card.rounded-0{ display:flex; flex-direction:column; } .ppcl-logo-row{ display:flex; align-items:center; gap:12px; margin-bottom:24px; } .ppcl-wordmark { font-family: 'Fraunces', serif; font-weight: 800; font-size: 37px; letter-spacing: .02em; color: var(--ppcl-ink); text-align: center; width: 100%; } .ppcl-prefix-shell{ display:flex; align-items:center; border:1.5px solid var(--ppcl-line); border-radius:14px; background:#fff; padding-left:16px; transition:border-color .15s ease, box-shadow .15s ease; } .ppcl-prefix-shell:focus-within{ border-color:var(--ppcl-indigo-700); box-shadow:0 0 0 4px rgba(60,63,160,0.12); } .ppcl-prefix{ font-size:15px; font-weight:600; color:var(--ppcl-muted); padding-right:10px; border-right:1.5px solid var(--ppcl-line); white-space:nowrap; } .ppcl-prefix-shell .form-control{ border:none !important; box-shadow:none !important; } .ppcl-trust{ display:flex; align-items:center; gap:8px; margin-top:32px; color:#A3A0B8; } .ppcl-trust span{ font-size:12.5px; } #title-head{ font-family:'Fraunces', serif; font-weight:500; font-size:28px; line-height:1.2; color:var(--ppcl-ink); text-align:left !important; margin-bottom:8px !important; } .ppcl-subtext{ margin:0 0 24px 0; font-size:14px; color:var(--ppcl-muted); line-height:1.5; text-align:left; } /* form labels */ .authentication-inner .form-label{ display:block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ppcl-label); margin-bottom:8px; } /* inputs (mobile / OTP / email / password) */ .authentication-inner .form-control.form-validation{ border:1.5px solid var(--ppcl-line); border-radius:14px; padding:12px 16px; font-size:15px; color:var(--ppcl-ink); background:#fff; box-shadow:none; transition:border-color .15s ease, box-shadow .15s ease; } .authentication-inner .form-control.form-validation::placeholder{ color:#A3A0B8; } /*.authentication-inner .form-control.form-validation:focus{*/ /* border-color:var(--ppcl-indigo-700) !important;*/ /* box-shadow:0 0 0 4px rgba(60,63,160,0.12) !important;*/ /*}*/ .authentication-inner .input-group-merge{ border-radius:14px; overflow:hidden; } .authentication-inner .input-group-merge .form-control{ border-radius:14px !important; } #forgot-password{ color:var(--ppcl-indigo-700); font-weight:600; text-decoration:none; } #forgot-password:hover{ color:var(--ppcl-indigo-900); text-decoration:underline; } /* submit button */ .authentication-inner .btn.btn-primary{ background:linear-gradient(135deg, var(--ppcl-indigo-700), var(--ppcl-indigo-900)); border:none; border-radius:14px; padding:12px; font-size:15px; font-weight:700; box-shadow:0 10px 24px -10px rgba(38,42,107,0.55); transition:filter .15s ease, box-shadow .15s ease, transform .15s ease; } .authentication-inner .btn.btn-primary:hover{ filter:brightness(1.06); box-shadow:0 14px 28px -10px rgba(38,42,107,0.55); } .authentication-inner .btn.btn-primary:active{ transform:translateY(1px); } .authentication-inner .btn.btn-primary:focus-visible{ outline:2.5px solid var(--ppcl-indigo-700); outline-offset:2px; } /* divider */ .authentication-inner hr{ border:0; height:1px; background:var(--ppcl-line); opacity:1; margin:20px 0; position:relative; } .authentication-inner hr::after{ content:'OR'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--ppcl-sand); padding:0 10px; font-size:11px; font-weight:700; letter-spacing:.08em; color:#A3A0B8; } /* login-mode toggle link */ #ofcr_login_link{ color:var(--ppcl-indigo-700); font-weight:600; font-size:14px; text-decoration:none; display:inline-flex; align-items:center; } #ofcr_login_link::before{ content:''; display:inline-block; width:15px; height:15px; margin-right:7px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233C3FA0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E"); background-size:contain; background-repeat:no-repeat; } #ofcr_login_link:hover{ color:var(--ppcl-indigo-900); text-decoration:underline; } /* alerts stay Bootstrap-functional, just soften the corners */ .authentication-inner .alert{ border-radius:12px; font-size:13.5px; } /* ---------- right: hero panel — now using your bg-login.jpg photo ---------- */ .logo-left-image{ position:relative; width:150%; align-self:stretch; overflow:hidden; display:flex; align-items:flex-end; min-height:100vh; background-image: linear-gradient(175deg, rgba(20,21,63,0.35) 0%, rgba(24,25,80,0.55) 45%, rgba(16,17,56,0.88) 100%), url("../assets/img/bg-login.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } /* the original photo stays in the DOM (structure preserved) but is no longer shown — bg-login.jpg above replaces it */ .logo-left-image > img{ display:none; } .logo-left-image .text-heading{ position:absolute !important; z-index:1; padding:0 0 8px 0; } .logo-left-image .text-heading p{ color:#fff; margin:0; } .logo-left-image .text-heading p.fs-4{ font-family:'Fraunces', serif; font-weight:500; font-size:30px !important; line-height:1.15; opacity:.92; } .logo-left-image .text-heading p.fs-3{ font-family:'Fraunces', serif; font-weight:600 !important; font-size:38px !important; line-height:1.15; margin-bottom:0 !important; } /* ---------- responsive: stack panels full width, still full page ---------- */ @media (max-width: 900px){ .authentication-wrapper > .d-flex{ flex-direction:column; height:auto; min-height:100vh; } .authentication-inner{ width:100%; order:2; max-height:none; } .logo-left-image{ width:100%; order:1; min-height:280px; } .authentication-inner .card-body{ padding:32px 24px; } } @media (max-width: 480px){ .authentication-inner .card-body{ padding:24px 16px; } }