/* ========================================================================== Aditya Plymart — pre-login (guest) pages Brand palette sampled from build/img/logo.png: deep forest green #00261D • gold #EAAD34 Used by: signin-3, register-3, forgot-password, reset-password, 2fa-challenge ========================================================================== */ :root { --ap-green-900: #00261D; --ap-green-800: #00382B; --ap-green-700: #064C3B; --ap-green-600: #0A6650; --ap-green-500: #12866A; --ap-gold-600: #B8801A; --ap-gold-500: #C99A22; --ap-gold: #EAAD34; --ap-gold-300: #F5C95C; --ap-gold-100: #FBEBC8; --ap-cream: #FBF7EF; --ap-ink: #12241F; --ap-muted: #6B7B76; --ap-line: #E4E0D6; } /* ---------- shell ---------------------------------------------------- */ body.account-page { background: var(--ap-cream); /* the layout leaves stray whitespace text nodes directly in ; without this they render an extra line box and force a scrollbar on a full-height page */ line-height: 0; } .ap-auth { display: flex; line-height: 1.5; min-height: 100vh; background: var(--ap-cream); font-feature-settings: "kern" 1; } /* ---------- left: branded panel --------------------------------------- */ .ap-auth__brand { position: relative; align-self: stretch; flex: 0 0 46%; max-width: 46%; padding: 3rem 3.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; color: #fff; background: radial-gradient(120% 90% at 12% 8%, var(--ap-green-700) 0%, transparent 55%), linear-gradient(160deg, var(--ap-green-800) 0%, var(--ap-green-900) 60%, #001913 100%); } /* soft gold glows + hairline grid, no external images */ .ap-auth__brand::before { content: ""; position: absolute; top: -18%; right: -22%; width: 30rem; height: 30rem; border-radius: 50%; background: radial-gradient(circle, rgba(234, 173, 52, .20) 0%, rgba(234, 173, 52, 0) 68%); pointer-events: none; } .ap-auth__brand::after { content: ""; position: absolute; bottom: -25%; left: -18%; width: 26rem; height: 26rem; border-radius: 50%; background: radial-gradient(circle, rgba(18, 134, 106, .28) 0%, rgba(18, 134, 106, 0) 70%); pointer-events: none; } .ap-auth__brand > * { position: relative; z-index: 1; } .ap-auth__brand-logo { margin-bottom: 2.5rem; } .ap-auth__brand-logo img { height: clamp(150px, 19vw, 260px); width: auto; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .45)); } .ap-auth__brand-body { width: 100%; } .ap-auth__eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1rem; padding: .35rem .85rem; border-radius: 999px; border: 1px solid rgba(234, 173, 52, .35); background: rgba(234, 173, 52, .10); color: var(--ap-gold-300); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .ap-auth__brand-title { margin: 0 0 1rem; font-size: clamp(2rem, 2.9vw, 2.9rem); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; color: #fff; } .ap-auth__brand-title span { color: var(--ap-gold); } .ap-auth__brand-text { margin: 0 auto; max-width: 30rem; font-size: 1.02rem; line-height: 1.7; color: rgba(255, 255, 255, .72); } .ap-auth__brand-foot { position: absolute; left: 0; right: 0; bottom: 2.25rem; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); } /* ---------- right: form column ---------------------------------------- */ .ap-auth__main { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; } .ap-auth__mobile-logo { display: none; margin-bottom: 1.5rem; text-align: center; } .ap-auth__mobile-logo img { height: 118px; width: auto; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .35)); } .ap-auth__card { width: 100%; max-width: 27rem; padding: 2.75rem 2.5rem; border: 1px solid var(--ap-line); border-radius: 1.15rem; background: #fff; box-shadow: 0 24px 60px -30px rgba(0, 38, 29, .45); } .ap-auth__card--wide { max-width: 30rem; } .ap-auth__heading { margin-bottom: 1.85rem; } .ap-auth__heading h1 { margin: 0 0 .45rem; font-size: 1.6rem; font-weight: 700; color: var(--ap-green-900); } .ap-auth__heading p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--ap-muted); } .ap-auth__badge { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1.1rem; border-radius: .85rem; font-size: 1.35rem; color: var(--ap-green-900); background: linear-gradient(135deg, var(--ap-gold-300), var(--ap-gold)); box-shadow: 0 8px 20px -10px rgba(234, 173, 52, .9); } /* ---------- form controls --------------------------------------------- */ .ap-auth .form-label { margin-bottom: .45rem; font-size: .84rem; font-weight: 600; color: var(--ap-green-900); } .ap-auth .form-control { height: auto; padding: .7rem .95rem; border: 1px solid var(--ap-line); border-radius: .6rem; background: #fff; font-size: .95rem; color: var(--ap-ink); box-shadow: none; transition: border-color .18s ease, box-shadow .18s ease; } .ap-auth .form-control::placeholder { color: #A8B2AF; } .ap-auth .form-control:focus, .ap-auth .form-control:focus-visible { border-color: var(--ap-gold); box-shadow: 0 0 0 .2rem rgba(234, 173, 52, .18); } /* keep the browser autofill tint on-brand instead of yellow */ .ap-auth .form-control:-webkit-autofill, .ap-auth .form-control:-webkit-autofill:hover, .ap-auth .form-control:-webkit-autofill:focus { -webkit-text-fill-color: var(--ap-ink); -webkit-box-shadow: 0 0 0 60rem #fff inset; box-shadow: 0 0 0 60rem #fff inset; caret-color: var(--ap-ink); } .ap-auth .input-group .form-control { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .ap-auth .input-group-text { padding: .7rem .95rem; border: 1px solid var(--ap-line); border-left: 0; border-radius: 0 .6rem .6rem 0; background: #fff; color: var(--ap-green-600); } .ap-auth .input-group:focus-within .form-control, .ap-auth .input-group:focus-within .input-group-text { border-color: var(--ap-gold); } .ap-auth .pass-group { position: relative; } .ap-auth .pass-group .form-control { padding-right: 2.85rem; } .ap-auth .toggle-password, .ap-auth .toggle-passwords, .ap-auth .toggle-passworda { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); cursor: pointer; font-size: 1.05rem; color: var(--ap-muted); transition: color .18s ease; } .ap-auth .toggle-password:hover, .ap-auth .toggle-passwords:hover, .ap-auth .toggle-passworda:hover { color: var(--ap-green-600); } /* remember-me checkbox */ .ap-auth .ap-check { display: inline-flex; align-items: center; gap: .55rem; margin: 0; font-size: .88rem; color: var(--ap-muted); cursor: pointer; } .ap-auth .ap-check input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--ap-green-600); cursor: pointer; } .ap-auth__link { font-size: .88rem; font-weight: 600; color: var(--ap-gold-600); text-decoration: none; transition: color .18s ease; } .ap-auth__link:hover, .ap-auth__link:focus { color: var(--ap-green-700); text-decoration: underline; } /* ---------- buttons --------------------------------------------------- */ .ap-auth .ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: .8rem 1.25rem; border: 0; border-radius: .6rem; font-size: .97rem; font-weight: 600; letter-spacing: .01em; color: var(--ap-green-900); background: linear-gradient(135deg, var(--ap-gold-300) 0%, var(--ap-gold) 55%, var(--ap-gold-500) 100%); box-shadow: 0 12px 24px -14px rgba(201, 154, 34, .95); transition: transform .15s ease, box-shadow .18s ease, filter .18s ease; } .ap-auth .ap-btn:hover, .ap-auth .ap-btn:focus { color: var(--ap-green-900); filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 16px 28px -14px rgba(201, 154, 34, 1); } .ap-auth .ap-btn:active { transform: translateY(0); } .ap-auth .ap-btn:focus-visible { outline: 2px solid var(--ap-green-700); outline-offset: 2px; } .ap-auth .ap-btn--ghost { color: var(--ap-green-800); background: transparent; border: 1px solid var(--ap-line); box-shadow: none; } .ap-auth .ap-btn--ghost:hover { color: var(--ap-green-900); border-color: var(--ap-green-600); background: rgba(10, 102, 80, .05); filter: none; } /* ---------- alerts & footer ------------------------------------------- */ .ap-auth .alert { padding: .75rem 1rem; border: 0; border-left: 3px solid transparent; border-radius: .5rem; font-size: .87rem; } .ap-auth .alert-danger { border-left-color: #C0392B; background: #FDECEA; color: #8E2B20; } .ap-auth .alert-success { border-left-color: var(--ap-green-600); background: #E9F5F0; color: var(--ap-green-800); } .ap-auth .alert ul { margin: 0; padding-left: 1.1rem; } .ap-auth__foot { margin-top: 1.75rem; text-align: center; font-size: .86rem; color: var(--ap-muted); } .ap-auth__note { margin-top: 1.5rem; padding: .85rem 1rem; border-radius: .6rem; background: var(--ap-cream); border: 1px solid var(--ap-line); font-size: .78rem; line-height: 1.6; color: var(--ap-muted); } .ap-auth__copyright { margin-top: 2rem; font-size: .8rem; color: #9AA5A1; text-align: center; } /* OTP / code input */ .ap-auth .ap-code-input { padding: .85rem 1rem; font-size: 1.5rem; font-weight: 700; text-align: center; letter-spacing: .45rem; text-indent: .45rem; color: var(--ap-green-900); } /* ---------- responsive ------------------------------------------------ */ @media (max-width: 1199.98px) { .ap-auth__brand { flex-basis: 42%; max-width: 42%; padding: 2.5rem 2.25rem; } .ap-auth__brand-title { font-size: 2rem; } } @media (max-width: 991.98px) { .ap-auth { display: block; } .ap-auth__brand { display: none; } .ap-auth__main { min-height: 100vh; padding: 2.5rem 1.25rem; /* fixed-height brand band so the split always lands just above the card */ background: linear-gradient(180deg, var(--ap-green-800) 0, var(--ap-green-900) 182px, var(--ap-cream) 182px, var(--ap-cream) 100%); } .ap-auth__mobile-logo { display: block; } .ap-auth__copyright { color: var(--ap-muted); } } @media (max-width: 575.98px) { .ap-auth__card { padding: 2rem 1.5rem; border-radius: .9rem; } .ap-auth__heading h1 { font-size: 1.4rem; } }