/* ═══════════════════════════════════════════════ SSAM — Login page ─────────────────────────────────────────────── All colors go through CSS custom properties from base.css so the page adapts to light / dark mode + the user's manual theme toggle. The branded green gradient (page background + header) keeps brand tokens — those are always dark green regardless of theme; only the surrounding card + text colors shift. */ html, body { height: 100%; } body { background: linear-gradient(135deg, var(--gd) 0%, var(--g) 50%, var(--gd) 100%); display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; } /* Background pattern */ body::before { content: ''; position: fixed; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(184,147,42,.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(184,147,42,.06) 0%, transparent 50%); pointer-events: none; } .login-card { background: var(--sf); border-radius: 20px; width: 100%; max-width: 420px; overflow: hidden; box-shadow: 0 25px 60px rgba(0,0,0,.35); } /* Header — keeps the brand green gradient in both light + dark modes */ .lc-header { background: linear-gradient(135deg, var(--gd), var(--g)); padding: 2.5rem 2rem; text-align: center; } .lc-logo { width: 110px; height: 110px; border-radius: 50%; background: #fff; /* always white — frames the SSAM logo */ border: 3px solid rgba(184,147,42,.5); margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.2); } .lc-logo img { width: 90%; height: 90%; object-fit: contain; } .lc-title { font-size: 1.1rem; font-weight: 800; color: #fff; margin-bottom: .3rem; } .lc-sub { font-size: .75rem; color: rgba(255,255,255,.5); } /* Form */ .lc-body { padding: 2rem; } .lc-welcome { font-size: .82rem; color: var(--tl); text-align: center; margin-bottom: 1.5rem; line-height: 1.6; } .fg { margin-bottom: 1rem; } .fg label { display: block; font-size: .75rem; font-weight: 700; color: var(--tx); margin-bottom: .35rem; } .fg-icon-wrap { position: relative; } .fg-icon { position: absolute; right: .85rem; top: 50%; transform: translateY(-50%); font-size: .95rem; pointer-events: none; } .fg input { width: 100%; border: 1.5px solid var(--bd); border-radius: 10px; padding: .65rem 2.4rem .65rem .85rem; font-size: .9rem; font-family: 'Almarai', sans-serif; /* `direction: rtl` was making the Arabic placeholders right-align correctly but breaking the caret position when users typed LTR content (emails, passwords, NIDs, PINs — basically every value this form takes). With direction:rtl + LTR content, the browser anchors the LTR run at the logical start (right edge of the input) but places the caret at the LOGICAL END of the LTR run, which is visually on the LEFT side. Users saw a cursor on the left of their typed text and were confused. `unicode-bidi: plaintext` solves both: - Empty input → inherits RTL from , so Arabic placeholders still right-align as before. - First strong-directional character typed determines the effective direction: LTR for email/password/etc., RTL for Arabic content. Caret behavior follows naturally. Reported during prod testing of the Phase 3 signup flow. */ unicode-bidi: plaintext; text-align: start; outline: none; transition: all .2s; background: var(--bg); color: var(--tx); } .fg input::placeholder { color: var(--tm); } .fg input:focus { border-color: var(--g); background: var(--sf); box-shadow: 0 0 0 3px rgba(26,92,46,.15); } /* Password fields have TWO icons — the .fg-icon lock on the right (already covered by padding-right: 2.4rem above) AND the .pw-toggle eye on the left at `left: .85rem`. The default left padding of .85rem only just barely starts AT the eye toggle — typed text overlaps the emoji. Previously hidden by direction:rtl right- aligning the content; surfaced when we switched to unicode-bidi: plaintext and LTR content started rendering left-aligned. We can't target this with `input[type="password"]` because the .pw-toggle button TOGGLES the input's type between "password" and "text" — clicking the 🙈 eye to reveal the password swaps type to "text", the attribute selector stops matching, padding reverts, and the just-revealed plaintext overlaps the eye again. `:has()` lets us match the structural relationship instead ("any input inside a wrap that ALSO contains a .pw-toggle button") which doesn't care about the input's type. Supported in Chrome 105+, Safari 15.4+, Firefox 121+ — all our target browsers. */ .fg-icon-wrap:has(.pw-toggle) input { padding-left: 2.4rem; } .pw-toggle { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: .9rem; color: var(--tm); padding: .15rem; } .pw-toggle:hover { color: var(--g); } .login-btn { width: 100%; background: linear-gradient(135deg, var(--g), var(--gm)); color: #fff; border: none; border-radius: 10px; padding: .8rem; font-size: .95rem; font-weight: 800; font-family: 'Almarai', sans-serif; cursor: pointer; transition: all .2s; margin-top: .5rem; display: flex; align-items: center; justify-content: center; gap: .5rem; } .login-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(26,92,46,.35); } .login-btn:active { transform: translateY(0); } .login-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; } .error-msg { background: var(--dnb); border: 1.5px solid rgba(220,38,38,.2); border-radius: 8px; padding: .65rem .85rem; font-size: .8rem; color: var(--dn); text-align: center; margin-top: .85rem; display: none; } .error-msg.show { display: block; } /* Footer */ .lc-footer { padding: 1rem 2rem 1.5rem; text-align: center; } .lc-footer-txt { font-size: .68rem; color: var(--tm); } /* Back-to-home escape hatch. Without it, a user who lands on /login.html and decides not to sign in can't get back to the public page short of typing the URL or hitting browser back (which doesn't always work, e.g. when /login.html is the first page they opened). */ .lc-back { display: inline-block; font-size: .72rem; font-weight: 700; color: var(--g); text-decoration: none; padding: .35rem .8rem; margin-bottom: .65rem; border-radius: 50px; border: 1.5px solid transparent; transition: all .15s; } .lc-back:hover { background: var(--gl); border-color: rgba(26, 92, 46, .2); } .lc-version { display: inline-block; background: var(--bg); color: var(--tl); font-size: .65rem; font-weight: 700; padding: .18rem .5rem; border-radius: 50px; margin-top: .3rem; } /* Spinner */ .spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Shake animation */ @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } .shake { animation: shake .4s ease; } /* ──────────────────────────────────────────────────────────────────── Secondary links below the login button ──────────────────────────────────────────────────────────────────── Was inline in login.html; moved out so the strict CSP (style-src 'self') doesn't drop the rule. */ .activate-link, .forgot-link { margin-top: 1.25rem; text-align: center; font-size: .78rem; color: var(--tm); } .forgot-link { margin-top: .85rem; } .activate-link a, .forgot-link a { color: var(--g); font-weight: 700; text-decoration: none; cursor: pointer; } .activate-link a:hover, .forgot-link a:hover { text-decoration: underline; } /* Gold accent in dark mode — var(--g) goes invisible on the dark panel. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) .activate-link a, :root:not([data-theme="light"]):not([data-theme="dark"]) .forgot-link a, :root:not([data-theme="light"]):not([data-theme="dark"]) .reset-back a { color: #c9a032; } } :root[data-theme="dark"] .activate-link a, :root[data-theme="dark"] .forgot-link a, :root[data-theme="dark"] .reset-back a { color: #c9a032; } /* ── Reset-request pane toggle ────────────────────────────────────── */ .lc-body[data-mode="reset"] .login-pane { display: none; } .lc-body:not([data-mode="reset"]) .reset-pane { display: none; } .reset-intro { text-align: center; color: var(--tm); font-size: .85rem; margin: 0 0 1rem; line-height: 1.7; } .reset-back { margin-top: 1rem; text-align: center; font-size: .8rem; } .reset-back a { color: var(--g); font-weight: 700; text-decoration: none; cursor: pointer; } .reset-back a:hover { text-decoration: underline; } /* ── Language toggle ────────────────────────────────────────────────── Sits at the top of the login card. Two pill buttons; the active one gets a brand-green fill. Mirrors the .sb-theme-row pattern from the admin / member / head sidebars, scaled down for the login card. */ .lang-toggle { display: flex; /* Pills inherit document direction — order tracks sidebar/UI side: * AR (RTL) → العربية / English; EN (LTR) → English / العربية. */ gap: .3rem; justify-content: center; margin: 0 0 1rem; padding: 0 .25rem; } .lang-btn { font-family: inherit; font-size: .72rem; font-weight: 700; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--bd); background: var(--bg-soft); color: var(--tm); cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .lang-btn:hover { color: var(--g); border-color: var(--g); } .lang-btn.active { background: var(--g); color: #fff; border-color: var(--g); } /* ── signup.html mode-toggle link ──────────────────────────────────── The "have a PIN instead of a link?" / "have an email link instead?" toggle below the submit button. Was previously defined in an inline