/* FASTexa — صفحات الدخول: خلفية bg + فورم زجاجي على اليمين */ body.fx-guest-body.fx-login-hero { min-height: 100vh; margin: 0; padding: 0; color: #f5f5f5; background-color: #0a0a0a; background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.35) 48%, rgba(0, 0, 0, 0.72) 100%), var(--fx-login-bg, url('/img/bg.jpeg')); background-size: cover; background-position: left center; background-repeat: no-repeat; background-attachment: fixed; display: block; } .fx-login-stage { min-height: 100vh; width: 100%; display: grid; grid-template-columns: 1fr 1fr; /* نصفان هندسيان: شعار يسار / فورم يمين */ align-items: stretch; padding: 0; box-sizing: border-box; direction: ltr; } .fx-login-stage__spacer { min-width: 0; } .fx-guest-wrap.fx-login-glass { width: 100%; max-width: none; margin: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; /* منتصف النصف الأيمن */ padding: clamp(1.25rem, 4vw, 3rem); box-sizing: border-box; direction: inherit; } .fx-guest-wrap.fx-login-glass > .fx-login-glass-panel, .fx-guest-wrap.fx-login-glass > .fx-login-lang { width: 100%; max-width: 420px; } .fx-guest-wrap.fx-login-glass.fx-login-glass--wide > .fx-login-glass-panel, .fx-guest-wrap.fx-login-glass.fx-login-glass--wide > .fx-login-lang { max-width: 640px; } html[dir="rtl"] .fx-guest-wrap.fx-login-glass { direction: rtl; } html[dir="ltr"] .fx-guest-wrap.fx-login-glass { direction: ltr; } .fx-login-glass-panel { background: rgba(22, 22, 24, 0.55); border: 1px solid rgba(212, 158, 53, 0.35); border-radius: 1.25rem; padding: 1.75rem 1.5rem 1.5rem; backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 18px 48px rgba(0, 0, 0, 0.45), 0 0 32px rgba(212, 158, 53, 0.12); color: #f5f5f5; color-scheme: dark; } .fx-login-glass-panel .fx-login-title { color: #fff; font-weight: 800; font-size: 1.2rem; text-align: center; margin: 0 0 0.35rem; } .fx-login-glass-panel .fx-login-sub { color: rgba(220, 220, 220, 0.72); font-size: 0.82rem; text-align: center; margin: 0 0 1.25rem; } .fx-login-glass-panel label, .fx-login-glass-panel .form-label { color: rgba(220, 220, 220, 0.88) !important; font-weight: 600; font-size: 0.9rem; } .fx-login-glass-panel .form-control, .fx-login-glass-panel .form-select { background: rgba(12, 12, 14, 0.72) !important; color: #fff !important; border: 1px solid rgba(212, 158, 53, 0.55) !important; border-radius: 0.75rem !important; box-shadow: 0 0 12px rgba(212, 158, 53, 0.18); } .fx-login-glass-panel .form-control:focus, .fx-login-glass-panel .form-select:focus { border-color: #e0b04a !important; box-shadow: 0 0 0 0.2rem rgba(212, 158, 53, 0.25), 0 0 18px rgba(212, 158, 53, 0.35); background: rgba(8, 8, 10, 0.85) !important; color: #fff !important; } .fx-login-glass-panel .form-control::placeholder { color: rgba(180, 180, 180, 0.55) !important; } .fx-login-glass-panel .form-control:-webkit-autofill, .fx-login-glass-panel .form-control:-webkit-autofill:hover, .fx-login-glass-panel .form-control:-webkit-autofill:focus { -webkit-text-fill-color: #fff !important; caret-color: #fff; box-shadow: 0 0 0 1000px rgba(12, 12, 14, 0.95) inset !important; -webkit-box-shadow: 0 0 0 1000px rgba(12, 12, 14, 0.95) inset !important; transition: background-color 99999s ease-out; } .fx-login-glass-panel .form-text, .fx-login-glass-panel .text-muted, .fx-login-glass-panel .small.text-muted { color: rgba(180, 180, 180, 0.7) !important; } .fx-login-glass-panel .btn-fx-login { background: linear-gradient(180deg, #4a4a4e 0%, #2a2a2e 45%, #1a1a1c 100%); color: #fff !important; font-weight: 800; border: 1px solid rgba(212, 158, 53, 0.85); border-radius: 0.8rem; padding: 0.7rem 1rem; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 0 22px rgba(212, 158, 53, 0.45), 0 8px 20px rgba(0, 0, 0, 0.4); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; } .fx-login-glass-panel .btn-fx-login:hover, .fx-login-glass-panel .btn-fx-login:focus { color: #fff !important; filter: brightness(1.08); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 0 28px rgba(224, 176, 74, 0.65), 0 10px 24px rgba(0, 0, 0, 0.45); } .fx-login-glass-panel a { color: #e0b04a; text-decoration: none; } .fx-login-glass-panel a:hover { color: #f0c86a; text-decoration: underline; } .fx-login-glass-panel .alert { border-radius: 0.75rem; border: 0; font-size: 0.9rem; } .fx-login-lang { display: flex; justify-content: center; gap: 0.35rem; margin-bottom: 0.85rem; } .fx-login-lang .btn { border-radius: 999px; min-width: 2.4rem; font-weight: 700; font-size: 0.75rem; border-color: rgba(212, 158, 53, 0.45); color: #e8e8e8; background: rgba(0, 0, 0, 0.25); } .fx-login-lang .btn.active, .fx-login-lang .btn:hover { background: rgba(212, 158, 53, 0.25); border-color: #e0b04a; color: #fff; } .fx-login-forgot { text-align: end; margin-top: -0.35rem; margin-bottom: 1rem; } @media (max-width: 900px) { body.fx-guest-body.fx-login-hero { background-position: 20% center; background-attachment: scroll; } .fx-login-stage { grid-template-columns: 1fr; padding: 1.25rem; } .fx-login-stage__spacer { display: none; } .fx-guest-wrap.fx-login-glass { min-height: auto; padding: 0; } .fx-guest-wrap.fx-login-glass > .fx-login-glass-panel, .fx-guest-wrap.fx-login-glass > .fx-login-lang { max-width: 440px; } } /* لا ت overlapping مع ثيم الزجاج العام على صفحات الدخول */ html[data-fx-shell="glass"] body.fx-guest-body.fx-login-hero { background-color: #0a0a0a !important; background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.35) 48%, rgba(0, 0, 0, 0.72) 100%), var(--fx-login-bg, url('/img/bg.jpeg')) !important; background-size: cover !important; background-position: left center !important; background-repeat: no-repeat !important; background-attachment: fixed !important; } html[data-fx-shell="windows7"] body.fx-guest-body.fx-login-hero .fx-login-glass-panel { border-radius: 0.5rem; }