/* HT Equilibra — Mnzil brand typeface */ @font-face{font-family:'HT Equilibra';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ht-equilibra-regular.woff2') format('woff2');} @font-face{font-family:'HT Equilibra';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ht-equilibra-medium.woff2') format('woff2');} @font-face{font-family:'HT Equilibra';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ht-equilibra-semibold.woff2') format('woff2');} @font-face{font-family:'HT Equilibra';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ht-equilibra-semibold.woff2') format('woff2');} @font-face{font-family:'HT Equilibra';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/ht-equilibra-black.woff2') format('woff2');} @font-face{font-family:'HT Equilibra';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/ht-equilibra-black.woff2') format('woff2');} * { margin: 0; padding: 0; box-sizing: border-box; } .mnzil-auth{ --primary-blue: #3043E3; --primary-blue-dark: #2233C9; --primary-blue-deep: #1E2A8E; --manzil-orange: #FF7A00; --bg-light: #F9FAFB; --text-dark: #1F2937; --text-light: #6B7280; --border-color: #E5E7EB; } .mnzil-auth{ font-family: 'HT Equilibra', 'Tajawal', sans-serif; /* v12.34: body is now a plain block. The .auth-shell grid handles centering on desktop. The indigo bg is kept as a fallback so that on mobile (when the canvas hides) the form floats over the brand colour just like before. */ background: radial-gradient(ellipse 80% 60% at 88% 8%, rgba(255, 122, 0, 0.18) 0%, transparent 55%), radial-gradient(ellipse 70% 60% at 10% 92%, rgba(59, 130, 246, 0.22) 0%, transparent 55%), linear-gradient(135deg, #1E2A8E 0%, #2233C9 45%, #3043E3 100%); background-attachment: fixed; min-height: 100vh; margin: 0; padding: 0; position: relative; overflow-x: hidden; color: var(--text-dark); } .mnzil-auth [lang="en"] body{ font-family: 'HT Equilibra', 'Inter', sans-serif; } /* ============================================================ AUTH SHELL — Mnzil Aurora (v12.35) ---------------------------------------------------------- Distinctive from generic SaaS split-templates: • ASYMMETRIC 42/58 ratio (form-biased, more breathing room — most templates do boring 50/50) • CURVED divider between canvas & form (no straight line! achieved with border-radius on the form's inside edge + small negative margin overlap so they hug) • MINIMAL canvas — no billboard tagline; just brand emblem + geometric pattern + live Hijri/Gregorian date widget. Form gets the spotlight. • Subtle AURORA animation on canvas (slow 18s hue shift) • FLOATING elevated form card on desktop (premium feel) • Form has a TIME-AWARE Arabic greeting injected by JS: صباح الخير / مساء الخير / مساء النور Mobile ≤980px: canvas hides completely, mobile layout is untouched and IDENTICAL to before. ============================================================ */ .mnzil-auth .auth-shell{ display: grid; grid-template-columns: 42% 58%; min-height: 100vh; min-height: 100dvh; position: relative; z-index: 1; } /* ============================================================ BRAND CANVAS (one side, takes 42%) ============================================================ */ .mnzil-auth .auth-canvas{ position: relative; padding: 48px 52px; display: flex; flex-direction: column; justify-content: space-between; color: #ffffff; background: /* warm orange glow top-corner (Mnzil brand accent) */ radial-gradient(circle 480px at 100% 0%, rgba(255, 122, 0, 0.30) 0%, transparent 60%), /* cool blue glow bottom-corner (depth) */ radial-gradient(circle 620px at 0% 100%, rgba(96, 165, 250, 0.20) 0%, transparent 60%), /* base aurora gradient */ linear-gradient(155deg, #161E72 0%, #1B237E 28%, #1E2A8E 55%, #2233C9 85%, #3043E3 100%); overflow: hidden; isolation: isolate; /* aurora — very subtle hue shift, 18s loop */ animation: aurora-shift 18s ease-in-out infinite alternate; } @keyframes aurora-shift { 0%{ filter: hue-rotate(0deg) saturate(1); } 100%{ filter: hue-rotate(8deg) saturate(1.08); } } @media (prefers-reduced-motion: reduce) { .mnzil-auth .auth-canvas{ animation: none; } } /* Geometric pattern overlay — 8-pointed star (Islamic geometric motif, faded), sits behind everything */ .mnzil-auth .auth-canvas::before{ content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"), radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0); background-size: 320px 320px, 28px 28px; background-position: center, 0 0; background-repeat: no-repeat, repeat; opacity: 0.55; pointer-events: none; z-index: 0; } /* Floating M emblem — soft & oversized, decorative only */ .mnzil-auth .auth-canvas::after{ content: 'M'; position: absolute; font-family: 'HT Equilibra', 'Inter', serif; font-weight: 900; font-size: clamp(280px, 30vw, 460px); line-height: 1; color: rgba(255, 255, 255, 0.04); bottom: -10%; inset-inline-start: -8%; letter-spacing: -0.05em; pointer-events: none; user-select: none; z-index: 0; } /* ---- Top row: emblem + small HR badge ---- */ .mnzil-auth .auth-canvas-top{ display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; } .mnzil-auth .auth-canvas-logo{ display: inline-flex; align-items: center; height: 40px; } .mnzil-auth .auth-canvas-logo img{ height: 100%; width: auto; display: block; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.18)); } .mnzil-auth .auth-canvas-pill{ display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.92); padding: 7px 14px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .mnzil-auth .auth-canvas-pill .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--manzil-orange); box-shadow: 0 0 12px rgba(255, 122, 0, 0.8); animation: pulse-dot 2.4s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100%{ opacity: 1; box-shadow: 0 0 12px rgba(255, 122, 0, 0.8); } 50%{ opacity: 0.55; box-shadow: 0 0 4px rgba(255, 122, 0, 0.4); } } .mnzil-auth [lang="ar"] .auth-canvas-pill{ text-transform: none; letter-spacing: 0; font-size: 12px; } /* ---- Middle: small decorative quote, NOT a billboard ---- */ .mnzil-auth .auth-canvas-quote{ position: relative; z-index: 1; max-width: 360px; color: rgba(255, 255, 255, 0.88); padding-block: 24px; } .mnzil-auth .auth-canvas-quote .qmark{ display: block; font-family: 'HT Equilibra', serif; font-size: 64px; line-height: 0.6; color: var(--manzil-orange); opacity: 0.85; margin-bottom: 8px; font-weight: 700; } .mnzil-auth .auth-canvas-quote-text{ font-size: 19px; line-height: 1.55; font-weight: 500; margin: 0 0 16px; letter-spacing: -0.005em; } .mnzil-auth [lang="ar"] .auth-canvas-quote-text{ font-size: 21px; line-height: 1.75; font-weight: 500; } .mnzil-auth .auth-canvas-quote-attribution{ font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.04em; text-transform: uppercase; } .mnzil-auth [lang="ar"] .auth-canvas-quote-attribution{ text-transform: none; letter-spacing: 0; font-size: 13px; } /* ---- Bottom: live Hijri + Gregorian date widget ---- */ .mnzil-auth .auth-canvas-footer{ position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .mnzil-auth .auth-date{ display: inline-flex; flex-direction: column; gap: 2px; font-size: 12px; color: rgba(255, 255, 255, 0.65); font-variant-numeric: tabular-nums; } .mnzil-auth .auth-date-primary{ color: rgba(255, 255, 255, 0.92); font-weight: 600; font-size: 13px; letter-spacing: 0.01em; } .mnzil-auth .auth-canvas-meta{ font-size: 11px; color: rgba(255, 255, 255, 0.42); letter-spacing: 0.02em; text-align: end; } /* ============================================================ FORM PANEL (the other 58%) ---------------------------------------------------------- The CURVED divider is implemented here: the form panel has a large border-radius on its inside edge and uses a small negative margin to overlap the canvas — creating an elegant arc you don't get from a straight vertical line. ============================================================ */ .mnzil-auth .auth-panel{ background: linear-gradient(180deg, #FAFBFD 0%, #ffffff 60%); display: flex; align-items: center; justify-content: center; padding: 40px 36px; position: relative; z-index: 2; /* CURVED inside edge — the killer differentiator */ border-start-start-radius: 56px; border-end-start-radius: 56px; margin-inline-start: -28px; box-shadow: -28px 0 60px -28px rgba(15, 23, 80, 0.18); } /* ============ Top-right controls (lang toggle) ============ */ .mnzil-auth .top-controls{ position: fixed; top: 18px; display: flex; gap: 8px; z-index: 20; } /* Logical inset so it sits top-END (right in LTR, left in RTL) reliably — the old `.mnzil-auth [dir=…]` descendant selectors never matched because dir lives on / (ancestors), so the toggle had no horizontal position and fell to the top-LEFT corner. */ .mnzil-auth .top-controls{ inset-inline-end: 18px; } .mnzil-auth .control-btn{ width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); border: 1px solid rgba(15, 23, 80, 0.08); color: var(--primary-blue); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(15, 23, 80, 0.08); } .mnzil-auth .control-btn:hover{ background: #ffffff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15, 23, 80, 0.14); } /* ============ Login card — Desktop ============ Floating elevated card on desktop (different from Afterparty which has the form flush with the white panel). On mobile the card behavior is restored below. */ .mnzil-auth .login-container{ background: #ffffff; border-radius: 22px; box-shadow: 0 24px 48px -16px rgba(15, 23, 80, 0.14), 0 8px 20px -8px rgba(15, 23, 80, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9); border: 1px solid rgba(15, 23, 80, 0.04); max-width: 420px; width: 100%; padding: 36px 36px 30px; position: relative; } /* Subtle orange "M" accent in card corner (brand signature) */ .mnzil-auth .login-container::before{ content: ''; position: absolute; top: -1px; inset-inline-start: 32px; width: 40px; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--manzil-orange), #FFB266); } /* Logo Section (inside the form) */ .mnzil-auth .logo-section{ text-align: center; margin-bottom: 22px; } .mnzil-auth .logo-icon{ /* Hidden on desktop — the canvas already shows the brand. Visible again on mobile (canvas hidden = needs brand). */ display: none; } .mnzil-auth .logo-icon img{ width: auto; height: 100%; max-width: 100%; object-fit: contain; display: block; } .mnzil-auth .welcome-text{ font-size: 15px; color: var(--text-light); font-weight: 400; line-height: 1.5; margin: 0; } /* Desktop-only time-aware greeting */ .mnzil-auth .form-greeting{ display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--manzil-orange); background: rgba(255, 122, 0, 0.08); padding: 5px 12px; border-radius: 999px; margin-bottom: 14px; letter-spacing: 0.01em; } .mnzil-auth .form-greeting .icon{ font-size: 13px; } .mnzil-auth .form-heading{ font-family: 'HT Equilibra', inherit; font-size: 26px; font-weight: 700; color: var(--text-dark); margin: 0 0 6px; letter-spacing: -0.01em; line-height: 1.2; } .mnzil-auth .form-subheading{ font-size: 13px; color: var(--text-light); margin: 0 0 24px; line-height: 1.5; } /* Form Styles */ .mnzil-auth .form-group{ margin-bottom: 16px; } .mnzil-auth .form-label{ display: block; margin-bottom: 7px; color: var(--text-dark); font-weight: 600; font-size: 13px; } .mnzil-auth .form-control{ width: 100%; padding: 12px 14px; border: 1px solid var(--border-color); border-radius: 10px; font-size: 14px; font-family: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; background: #ffffff; } .mnzil-auth .form-control:hover{ border-color: #c5cad3; } .mnzil-auth .form-control:focus{ outline: none; border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(48, 67, 227, 0.14); } .mnzil-auth .password-wrapper{ position: relative; } .mnzil-auth .password-toggle{ position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-light); cursor: pointer; font-size: 16px; padding: 4px 8px; transition: color 0.15s ease; } /* Logical inset/padding so the eye sits INSIDE the field at the end edge (right in LTR, left in RTL). The old `[dir=…]` descendant rules never matched (dir is on /), so the eye had no position and spilled outside the field (computed right:-34px). */ .mnzil-auth .password-toggle{ inset-inline-end: 12px; } .mnzil-auth .password-toggle:hover{ color: var(--primary-blue); } .mnzil-auth .password-wrapper .form-control{ padding-inline-end: 44px; } .mnzil-auth .btn-login{ width: 100%; padding: 13px; background: var(--manzil-orange); color: white; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.18s ease; margin-top: 8px; box-shadow: 0 4px 14px rgba(255, 122, 0, 0.30); font-family: inherit; } .mnzil-auth .btn-login:hover{ background: #e66e00; box-shadow: 0 6px 20px rgba(255, 122, 0, 0.42); transform: translateY(-1px); } .mnzil-auth .btn-login:disabled{ opacity: 0.6; cursor: not-allowed; transform: none; } .mnzil-auth .forgot-password-wrapper{ text-align: center; margin-top: 14px; } .mnzil-auth .forgot-password{ font-size: 13px; color: var(--text-light); text-decoration: none; transition: color 0.15s ease; font-weight: 500; } .mnzil-auth .forgot-password:hover{ color: var(--primary-blue); text-decoration: underline; } .mnzil-auth .login-footer{ text-align: center; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border-color); color: var(--text-light); font-size: 11px; } /* ============================================================ MOBILE — ≤980px : hide canvas, restore floating card ------------------------------------------------------------ CRITICAL: mobile layout is IDENTICAL to the working version. Below 980px, canvas hides, form panel becomes transparent, card gets its full 4-layer shadow + the in-form logo back. No greeting pill, no desktop heading. ============================================================ */ @media (max-width: 980px) { .mnzil-auth .auth-shell{ grid-template-columns: 1fr; min-height: 100vh; min-height: 100dvh; } .mnzil-auth .auth-canvas{ display: none !important; } .mnzil-auth .auth-panel{ background: transparent; padding: 20px; min-height: 100vh; min-height: 100dvh; /* undo desktop curve + overlap */ border-radius: 0 !important; margin: 0 !important; box-shadow: none !important; } /* Hide desktop-only chrome */ .form-greeting, .form-heading, .mnzil-auth .form-subheading{ display: none; } /* Show the in-form logo again */ .mnzil-auth .logo-icon{ display: inline-flex; width: auto; max-width: 150px; height: 44px; margin: 0 auto 14px; align-items: center; justify-content: center; } /* Restore the floating white card with full mobile shadow */ .mnzil-auth .login-container{ background: #ffffff; border-radius: 20px; box-shadow: 0 32px 64px -16px rgba(15, 23, 80, 0.35), 0 16px 32px -12px rgba(15, 23, 80, 0.18), 0 2px 4px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9); padding: 36px 26px 30px; max-width: 400px; border: none; } .mnzil-auth .login-container::before{ display: none; } } @media (max-width: 480px) { .mnzil-auth .login-container{ padding: 32px 22px 26px; border-radius: 18px; max-width: 100%; } .mnzil-auth .logo-icon{ max-width: 120px; height: 36px; } .mnzil-auth .welcome-text{ font-size: 13px; } } /* Big screens — give canvas more breathing room */ @media (min-width: 1400px) { .mnzil-auth .auth-shell{ grid-template-columns: 38% 62%; } .mnzil-auth .auth-canvas{ padding: 60px 72px; } .mnzil-auth .auth-panel{ padding: 50px; } } /* Added in the Next.js port: inline error message (old page used a JS toast). */ .mnzil-auth .login-error{ background: #fdecea; color: #b3261e; border: 1px solid #f5c6c0; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 0.9rem; } /* ── "Sign in with Google" — divider + button (RTL-aware, native to the page) ── */ .mnzil-auth .auth-divider{ display: flex; align-items: center; text-align: center; margin: 18px 0; color: var(--text-light); font-size: 13px; } .mnzil-auth .auth-divider::before, .mnzil-auth .auth-divider::after{ content: ""; flex: 1; height: 1px; background: var(--border-color); } .mnzil-auth .auth-divider span{ padding: 0 12px; } .mnzil-auth .btn-google{ width: 100%; padding: 12px; display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: var(--text-dark); border: 1px solid var(--border-color); border-radius: 12px; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; transition: all 0.18s ease; } .mnzil-auth .btn-google:hover{ background: #F9FAFB; border-color: #D1D5DB; box-shadow: 0 2px 8px rgba(15, 23, 80, 0.08); } .mnzil-auth .btn-google-icon{ display: inline-flex; align-items: center; justify-content: center; } /* ============================================================ Shared styling for the forgot-password / reset-password pages. Ported from the legacy forgot-password.html + reset-password.html single-card layout, scoped under .mnzil-auth so it can sit alongside login.css without leaking globally. Colours and fonts mirror the login page (HT Equilibra brand typeface, Mnzil indigo + orange accent) for visual parity. ============================================================ */ @font-face{font-family:'HT Equilibra';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ht-equilibra-regular.woff2') format('woff2');} @font-face{font-family:'HT Equilibra';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ht-equilibra-medium.woff2') format('woff2');} @font-face{font-family:'HT Equilibra';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ht-equilibra-semibold.woff2') format('woff2');} @font-face{font-family:'HT Equilibra';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ht-equilibra-semibold.woff2') format('woff2');} @font-face{font-family:'HT Equilibra';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/ht-equilibra-black.woff2') format('woff2');} .mnzil-auth.reset-page{ --indigo:#3043E3; --indigo-700:#2233C9; --violet:#2233C9; --orange:#FF7A00; --ink:#101828; --ink-2:#475467; --muted:#98a2b3; --line:#eceef2; --card:#ffffff; --ring:rgba(37, 99, 235, .16); --ok:#16a34a; --err:#dc2626; --font-ar:'HT Equilibra','Tajawal','Segoe UI',Tahoma,Arial,sans-serif; --font-en:'HT Equilibra','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; font-family:var(--font-ar); color:var(--ink); min-height:100vh; min-height:100dvh; background:#EFF6FF; background: radial-gradient(900px 480px at 12% -8%, #EFF6FF 0%, rgba(239, 246, 255, 0) 60%), radial-gradient(820px 460px at 110% 10%, #ffe9d6 0%, rgba(255,233,214,0) 55%), linear-gradient(135deg,#EFF6FF 0%, #EFF6FF 48%, #EFF6FF 100%); display:flex; align-items:center; justify-content:center; padding:28px 16px; -webkit-font-smoothing:antialiased; } [lang="en"] .mnzil-auth.reset-page, .mnzil-auth.reset-page[lang="en"]{ font-family:var(--font-en); } .mnzil-auth.reset-page .reset-wrap{ width:100%; max-width:468px; } .mnzil-auth.reset-page .reset-topbar{ display:flex; align-items:center; justify-content:space-between; padding:0 6px 16px; } .mnzil-auth.reset-page .reset-brand{ display:inline-flex; align-items:center; height:40px; } .mnzil-auth.reset-page .reset-brand img{ height:100%; width:auto; max-width:140px; object-fit:contain; display:block; } .mnzil-auth.reset-page .reset-card{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:0 1px 2px rgba(16,24,40,.04),0 18px 48px rgba(16,24,40,.10); overflow:hidden; } .mnzil-auth.reset-page .reset-accent{ height:4px; background:linear-gradient(90deg,var(--indigo) 0%,var(--violet) 52%,var(--orange) 100%); } .mnzil-auth.reset-page .reset-pad{ padding:34px 36px 34px; } .mnzil-auth.reset-page .reset-icon-wrap{ width:54px; height:54px; border-radius:15px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,rgba(37, 99, 235, .12),rgba(30, 64, 175, .12)); color:var(--indigo); font-size:22px; margin-bottom:18px; } .mnzil-auth.reset-page .reset-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--indigo); margin-bottom:10px; } [lang="ar"] .mnzil-auth.reset-page .reset-eyebrow{ text-transform:none; letter-spacing:0; } .mnzil-auth.reset-page .reset-h1{ font-size:25px; line-height:1.3; font-weight:800; margin:0 0 10px; } .mnzil-auth.reset-page .reset-sub{ font-size:15px; line-height:1.7; color:var(--ink-2); margin:0 0 22px; } .mnzil-auth.reset-page .reset-sub b{ color:var(--ink); } .mnzil-auth.reset-page .reset-sub-muted{ font-size:13.5px; color:var(--muted); } .mnzil-auth.reset-page .reset-label{ display:block; font-size:13.5px; font-weight:700; color:#344054; margin:0 0 8px; } .mnzil-auth.reset-page .reset-field{ position:relative; margin-bottom:18px; } .mnzil-auth.reset-page .reset-field input{ width:100%; font:inherit; font-size:15px; color:var(--ink); background:#f9fafb; border:1px solid #e6e8ee; border-radius:12px; padding:13px 44px 13px 14px; transition:.16s; } [dir="ltr"] .mnzil-auth.reset-page .reset-field input{ padding:13px 14px 13px 44px; } .mnzil-auth.reset-page .reset-field input:focus{ outline:none; border-color:var(--indigo); background:#fff; box-shadow:0 0 0 4px var(--ring); } .mnzil-auth.reset-page .reset-field .reset-ic{ position:absolute; top:50%; transform:translateY(-50%); inset-inline-end:14px; color:var(--muted); font-size:15px; pointer-events:none; } [dir="ltr"] .mnzil-auth.reset-page .reset-field .reset-ic{ inset-inline-end:auto; inset-inline-start:14px; } .mnzil-auth.reset-page .reset-field .reset-toggle{ position:absolute; top:50%; transform:translateY(-50%); inset-inline-end:12px; background:none; border:none; color:var(--muted); cursor:pointer; font-size:15px; padding:4px; } .mnzil-auth.reset-page .reset-field .reset-toggle:hover{ color:var(--indigo); } .mnzil-auth.reset-page .reset-meter{ height:6px; border-radius:999px; background:#eef0f4; overflow:hidden; margin:-6px 0 6px; } .mnzil-auth.reset-page .reset-meter > i{ display:block; height:100%; width:0; border-radius:999px; transition:width .25s ease, background .25s ease; } .mnzil-auth.reset-page .reset-hint{ font-size:12.5px; color:var(--muted); min-height:16px; margin:0 0 6px; } .mnzil-auth.reset-page .reset-hint-bad{ color:var(--err); } .mnzil-auth.reset-page .reset-hint-good{ color:var(--ok); } .mnzil-auth.reset-page .reset-btn{ width:100%; border:none; cursor:pointer; font:inherit; font-weight:700; font-size:15.5px; color:#fff; padding:14px 18px; border-radius:12px; background:linear-gradient(90deg,var(--indigo),var(--violet)); box-shadow:0 8px 20px rgba(37, 99, 235, .28); transition:.18s; margin-top:4px; display:block; text-align:center; text-decoration:none; } .mnzil-auth.reset-page .reset-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(37, 99, 235, .34); } .mnzil-auth.reset-page .reset-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:none; } .mnzil-auth.reset-page .reset-foot{ margin-top:18px; text-align:center; font-size:13.5px; color:var(--muted); } .mnzil-auth.reset-page .reset-foot a{ color:var(--indigo); font-weight:700; text-decoration:none; } .mnzil-auth.reset-page .reset-foot a:hover{ text-decoration:underline; } .mnzil-auth.reset-page .reset-state{ animation:reset-rise .35s ease; } @keyframes reset-rise{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} } .mnzil-auth.reset-page .reset-center{ text-align:center; } .mnzil-auth.reset-page .reset-badge{ width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:28px; color:#fff; } .mnzil-auth.reset-page .reset-badge-ok{ background:linear-gradient(135deg,#60A5FA,#3B82F6); box-shadow:0 10px 24px rgba(96, 165, 250,.32); } .mnzil-auth.reset-page .reset-badge-success{ background:linear-gradient(135deg,#22c55e,#16a34a); box-shadow:0 10px 24px rgba(22,163,74,.32); } .mnzil-auth.reset-page .reset-badge-err{ background:linear-gradient(135deg,#f87171,#dc2626); box-shadow:0 10px 24px rgba(220,38,38,.30); } .mnzil-auth.reset-page .reset-who{ display:inline-flex; align-items:center; gap:8px; background:#f4f3ff; border:1px solid #EFF6FF; color:var(--indigo-700); font-size:13px; font-weight:700; padding:7px 13px; border-radius:999px; margin-bottom:18px; } .mnzil-auth.reset-page .reset-pagefoot{ margin-top:20px; text-align:center; font-size:12px; color:var(--muted); } @media (max-width:520px){ .mnzil-auth.reset-page .reset-pad{ padding:28px 22px 30px; } .mnzil-auth.reset-page .reset-h1{ font-size:22px; } }

Forgot your password?