/* ═══════════════════════════════════════════════ Afrik Login Popup — front-end Colors come from CSS variables printed in . ═══════════════════════════════════════════════ */ /* ── MENU BUTTON ── */ .afrik-login-menu-item > a, a.afrik-lp-menu-btn { background: var(--afrik-lp-btn-bg, #9B1535) !important; color: var(--afrik-lp-btn-text, #fff) !important; border-radius: var(--afrik-lp-btn-radius, 4px) !important; padding: var(--afrik-lp-btn-pad, 8px 20px) !important; text-transform: var(--afrik-lp-btn-case, none); font-weight: 700; letter-spacing: .4px; line-height: 1.2; text-decoration: none !important; display: inline-block; transition: background .2s ease, color .2s ease, transform .12s ease; } .afrik-login-menu-item > a:hover, .afrik-login-menu-item > a:focus, a.afrik-lp-menu-btn:hover, a.afrik-lp-menu-btn:focus { background: var(--afrik-lp-btn-hbg, #7A0E28) !important; color: var(--afrik-lp-btn-htext, #fff) !important; outline: none; } a.afrik-lp-menu-btn:active { transform: translateY(1px); } /* ── OVERLAY ── */ .afrik-lp-overlay { position: fixed; inset: 0; background: rgba(10, 10, 12, .78); z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease; backdrop-filter: var(--afrik-lp-blur, blur(5px)); -webkit-backdrop-filter: var(--afrik-lp-blur, blur(5px)); } .afrik-lp-overlay.afrik-lp-open { opacity: 1; visibility: visible; } body.afrik-lp-locked { overflow: hidden; } /* ── MODAL ── */ .afrik-lp-modal { background: #fff; border-radius: var(--afrik-lp-modal-radius, 14px); box-shadow: 0 32px 80px rgba(0, 0, 0, .32); width: 100%; max-width: 424px; padding: 38px 36px 30px; position: relative; transform: translateY(18px) scale(.985); transition: transform .28s cubic-bezier(.2, .8, .3, 1); max-height: 94vh; overflow-y: auto; box-sizing: border-box; } .afrik-lp-overlay.afrik-lp-open .afrik-lp-modal { transform: none; } .afrik-lp-modal * { box-sizing: border-box; } /* ── CLOSE ── */ .afrik-lp-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: none; background: #f3f4f6; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; color: #666; padding: 0; } .afrik-lp-close:hover { background: #e7e9ed; color: #222; } .afrik-lp-close svg { width: 16px; height: 16px; } /* ── HEADER ── */ .afrik-lp-modal-head { text-align: center; margin-bottom: 26px; } /* The site logo — never cropped, never forced into a circle. */ .afrik-lp-logo { display: flex; align-items: center; justify-content: center; height: var(--afrik-lp-logo-h, 56px); margin: 0 auto 18px; max-width: 100%; } .afrik-lp-logo img { max-height: 100%; max-width: min(240px, 100%); width: auto; height: auto; object-fit: contain; display: block; } .afrik-lp-logo-text { font-size: 19px; font-weight: 800; letter-spacing: -.3px; color: #14161c; line-height: 1.2; text-align: center; } .afrik-lp-modal-head h2 { font-family: Georgia, 'Times New Roman', serif; font-size: 23px; font-weight: 700; color: #14161c; margin: 0 0 6px; padding: 0; line-height: 1.2; } .afrik-lp-modal-head p { font-size: 14px; color: #878d99; margin: 0; line-height: 1.5; } /* ── ERROR ── */ .afrik-lp-error { background: #fff1f3; border: 1px solid #f3c8cf; color: #8a0f2b; border-radius: 8px; padding: 11px 14px; font-size: 13.5px; margin-bottom: 18px; display: none; line-height: 1.45; } .afrik-lp-error.afrik-lp-visible { display: block; } /* ── FIELDS ── */ .afrik-lp-form { display: flex; flex-direction: column; gap: 16px; margin: 0; } .afrik-lp-field { display: flex; flex-direction: column; gap: 6px; } .afrik-lp-field label { font-size: 13px; font-weight: 600; color: #454b57; letter-spacing: .2px; margin: 0; } .afrik-lp-field input[type="text"], .afrik-lp-field input[type="password"], .afrik-lp-field input[type="number"] { width: 100%; padding: 12px 14px; border: 1.5px solid #dfe2e8; border-radius: 9px; font-size: 15px; line-height: 1.3; color: #14161c; transition: border-color .2s, box-shadow .2s, background .2s; background: #fafbfc; margin: 0; } .afrik-lp-field input:focus { outline: none; border-color: var(--afrik-lp-accent, #9B1535); background: #fff; box-shadow: 0 0 0 3px var(--afrik-lp-accent-soft, rgba(155, 21, 53, .1)); } .afrik-lp-field input[type="number"]::-webkit-outer-spin-button, .afrik-lp-field input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .afrik-lp-field input[type="number"] { -moz-appearance: textfield; } /* Password toggle */ .afrik-lp-pw-wrap { position: relative; } .afrik-lp-pw-wrap input { padding-right: 46px; } .afrik-lp-toggle-pw { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #9aa0ac; display: flex; align-items: center; padding: 6px; transition: color .2s; } .afrik-lp-toggle-pw:hover { color: #4b5160; } .afrik-lp-toggle-pw svg { width: 18px; height: 18px; } /* ── BOT CHECK (always 1 + 1) ── */ .afrik-lp-math label { color: #4b5160; font-size: 13px; } .afrik-lp-math label span { font-weight: 800; color: var(--afrik-lp-accent, #9B1535); letter-spacing: .5px; } /* ── REMEMBER / FORGOT ── */ .afrik-lp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .afrik-lp-remember { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #4b5160; cursor: pointer; margin: 0; } .afrik-lp-remember input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--afrik-lp-accent, #9B1535); cursor: pointer; } .afrik-lp-forgot { font-size: 13px; color: var(--afrik-lp-accent, #9B1535); text-decoration: none; } .afrik-lp-forgot:hover { text-decoration: underline; } /* ── SUBMIT ── */ .afrik-lp-submit { width: 100%; padding: 14px; background: var(--afrik-lp-accent, #9B1535); color: #fff; border: none; border-radius: 9px; font-size: 15px; font-weight: 700; letter-spacing: .4px; cursor: pointer; transition: background .2s, transform .12s, box-shadow .2s; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 2px; min-height: 50px; box-shadow: 0 8px 20px -12px var(--afrik-lp-accent, #9B1535); } .afrik-lp-submit:hover:not(:disabled) { background: var(--afrik-lp-accent-dark, #7A0E28); } .afrik-lp-submit:active:not(:disabled) { transform: scale(.985); } .afrik-lp-submit:disabled { opacity: .72; cursor: not-allowed; } .afrik-lp-spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: afrik-lp-spin .7s linear infinite; display: none; } .afrik-lp-submit.afrik-lp-loading .afrik-lp-btn-label { display: none; } .afrik-lp-submit.afrik-lp-loading .afrik-lp-spinner { display: block; } @keyframes afrik-lp-spin { to { transform: rotate(360deg); } } /* ── REGISTER / BACK ── */ .afrik-lp-register { text-align: center; font-size: 13px; color: #878d99; margin: 2px 0 0; } .afrik-lp-register a { color: var(--afrik-lp-accent, #9B1535); font-weight: 600; text-decoration: none; } .afrik-lp-register a:hover { text-decoration: underline; } .afrik-lp-back { text-align: center; margin: 18px 0 0; font-size: 13px; } .afrik-lp-back a { color: #9aa0ac; text-decoration: none; transition: color .2s; } .afrik-lp-back a:hover { color: #3a3f4a; } /* ── RESPONSIVE ── */ @media (max-width: 480px) { .afrik-lp-modal { padding: 32px 22px 24px; } .afrik-lp-modal-head h2 { font-size: 20px; } .afrik-lp-modal-head { margin-bottom: 22px; } } @media (max-height: 620px) { .afrik-lp-modal { padding-top: 46px; } .afrik-lp-logo { display: none; } } @media (prefers-reduced-motion: reduce) { .afrik-lp-overlay, .afrik-lp-modal, .afrik-lp-submit, a.afrik-lp-menu-btn { transition: none; } .afrik-lp-spinner { animation-duration: 1.4s; } }