/* ========================================================================== پنل مدیریت NotifyHub — بدون وابستگی بیرونی هیچ CDN، فونت آنلاین یا کتابخانه‌ای بارگذاری نمی‌شود: سرور ممکن است دسترسی خروجی محدود داشته باشد و پنل باید همیشه بالا بیاید. رنگ‌ها از cfg.Brand خوانده و روی متغیرها ست می‌شوند ⇒ تغییر برند = داده. ========================================================================== */ :root { --primary: #0f766e; --accent: #f59e0b; --bg: #f1f5f9; --surface: #ffffff; --border: #e2e8f0; --text: #0f172a; --muted: #64748b; --danger: #dc2626; --ok: #16a34a; --warn: #d97706; --radius: 12px; } * { box-sizing: border-box; } body { margin: 0; /* Minimal Swiss از typography.csv؛ بدون وب‌فونت — فونت‌های سیستمی که فارسی را درست رندر می‌کنند، به ترتیب کیفیت */ font-family: "Segoe UI", "Vazirmatn", "IRANSans", Tahoma, system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--bg); color: var(--text); font-size: 14px; direction: rtl; } /* ========================================================================== صفحه ورود — بازطراحی بر پایه داده‌های skill «ui-ux-pro-max» پالت : colors.csv #42 «Banking/Traditional Finance» سرمه‌ای اعتماد (#0F172A) + طلایی ممتاز (#A16207) تایپوگرافی: typography.csv #5 «Minimal Swiss» — برای پنل ادمین سازمانی سبک : styles.csv #1 «Minimalism & Swiss Style» ⚠️ چرا Glassmorphism نه: متن روی پس‌زمینه شفاف/متغیر کنتراست تضمین‌شده ندارد و قاعده اولویت ۱ (contrast 4.5:1) را می‌شکند. ⚠️ چرا فونت وب بارگذاری نمی‌شود: قاعده «بدون وابستگی بیرونی» — سرور ممکن است دسترسی خروجی نداشته باشد و صفحه ورود باید همیشه بالا بیاید. ========================================================================== */ :root { /* پالت اختصاصی صفحه ورود — مستقل از رنگ برند تا کنتراست تضمین بماند */ --lg-ink: #0F172A; /* سرمه‌ای عمیق: بوم سمت برند */ --lg-ink-2: #1E293B; --lg-ink-3: #334155; --lg-gold: #C9962B; /* طلایی روشن‌شده برای کنتراست روی سرمه‌ای */ --lg-on-ink: #F8FAFC; --lg-on-ink-2: #94A3B8; } #login { min-height: 100vh; min-height: 100dvh; /* نوار آدرس موبایل نباید چیزی را ببرد */ display: grid; grid-template-columns: 1.05fr .95fr; /* RTL: ستون اول = بوم برند */ background: var(--surface); } /* ----------------------------------------------------------- بوم برند */ .lg-canvas { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 80% 10%, #16233d 0%, transparent 55%), radial-gradient(90% 80% at 10% 90%, #12304a 0%, transparent 50%), linear-gradient(150deg, var(--lg-ink) 0%, var(--lg-ink-2) 100%); color: var(--lg-on-ink); display: flex; flex-direction: column; justify-content: space-between; padding: 3rem 3.2rem; isolation: isolate; } /* شبکه ظریف — ارجاع سوئیسی، بدون تصویر و بدون درخواست شبکه */ .lg-canvas::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 68px 68px; mask-image: radial-gradient(75% 65% at 60% 40%, #000 30%, transparent 100%); } /* هاله طلایی — عمق، بدون کاهش کنتراست متن */ .lg-canvas::after { content: ''; position: absolute; z-index: -1; width: 460px; height: 460px; border-radius: 50%; inset-inline-end: -160px; top: -140px; background: radial-gradient(circle, rgba(201,150,43,.20) 0%, transparent 68%); filter: blur(8px); } .lg-mark { display: flex; align-items: center; gap: .85rem; } .lg-mark svg { width: 42px; height: 42px; flex-shrink: 0; } .lg-mark-t b { display: block; font-size: 1.18rem; letter-spacing: -.01em; } .lg-mark-t span { display: block; font-size: .78rem; color: var(--lg-on-ink-2); margin-top: .15rem; } .lg-hero { max-width: 30ch; } .lg-hero h2 { font-size: clamp(1.55rem, 2.4vw, 2.15rem); line-height: 1.45; margin: 0 0 .9rem; font-weight: 700; letter-spacing: -.015em; } .lg-hero h2 em { font-style: normal; color: var(--lg-gold); } .lg-hero p { color: var(--lg-on-ink-2); font-size: .95rem; line-height: 1.9; margin: 0; } /* سه نکته اعتماد — چرا این محصول */ .lg-points { display: grid; gap: .9rem; margin-top: 2.2rem; } .lg-point { display: flex; align-items: flex-start; gap: .7rem; font-size: .87rem; } .lg-point svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: .15rem; color: var(--lg-gold); } .lg-point span { color: #CBD5E1; line-height: 1.7; } .lg-foot { display: flex; align-items: center; gap: .55rem; font-size: .76rem; color: var(--lg-on-ink-2); } /* نشانگر زنده سلامت سرویس — برای یک پنل عملیاتی واقعاً مفید است */ .lg-dot { width: 8px; height: 8px; border-radius: 50%; background: #64748B; flex-shrink: 0; } .lg-dot.up { background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.18); } .lg-dot.down { background: #EF4444; box-shadow: 0 0 0 3px rgba(239,68,68,.18); } /* ---------------------------------------------------------- سمت فرم */ .lg-form { display: flex; align-items: center; justify-content: center; padding: 2.5rem 2rem; } .lg-form .box { width: 100%; max-width: 384px; background: none; padding: 0; box-shadow: none; border-radius: 0; } .lg-form h1 { margin: 0 0 .35rem; font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); } .lg-form .tag { color: var(--muted); font-size: .88rem; margin-bottom: 2rem; line-height: 1.7; } #loginBtn { width: 100%; margin-top: .4rem; font-size: .95rem; } /* هشدار Caps Lock — خطای رایجی که کاربر خودش نمی‌بیند */ .lg-caps { display: none; align-items: center; gap: .4rem; background: #FEF3C7; color: #92400E; border-radius: 8px; padding: .5rem .7rem; font-size: .78rem; margin-top: .5rem; } .lg-caps.show { display: flex; } .lg-meta { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .74rem; line-height: 1.9; } .lg-meta a { color: var(--primary); } /* ورود نرم — با احترام به prefers-reduced-motion */ @keyframes lgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .lg-form .box > * { animation: lgIn .45s cubic-bezier(.22,.61,.36,1) backwards; } .lg-form .box > *:nth-child(2) { animation-delay: .05s; } .lg-form .box > *:nth-child(3) { animation-delay: .10s; } .lg-form .box > *:nth-child(4) { animation-delay: .15s; } .lg-form .box > *:nth-child(5) { animation-delay: .20s; } @media (prefers-reduced-motion: reduce) { .lg-form .box > * { animation: none; } } /* mobile-first: زیر ۹۰۰px بوم برند به یک نوار جمع می‌شود، فرم اول می‌آید */ @media (max-width: 900px) { #login { grid-template-columns: 1fr; } .lg-canvas { order: 2; padding: 1.6rem 1.4rem; /* بدون hero، فاصله‌گذاری space-between یک حفره بزرگ می‌سازد */ justify-content: flex-start; gap: 1.1rem; } .lg-canvas::after { display: none; } .lg-hero, .lg-points { display: none; } /* progressive-disclosure */ .lg-canvas .lg-foot { margin-top: 1rem; } .lg-form { order: 1; padding: 2.5rem 1.4rem 1.5rem; } } /* ------------------------------------------------------------------ shell */ #app { display: none; } .layout { display: flex; min-height: 100vh; } /* ⚠️ فقط سایدبار پوسته اپ. بوم صفحه ورود هم