/* 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; }

Welcome back