/* ============================================================================ MGIOT — sign-in screen. Loaded LAST so it wins over the fifty inherited .login-* rules spread across style.css, mgiot-design.css, mgiot-pro.css, mgiot-v2.css and the dark sheet. Everything here is namespaced `lg-` except the three legacy hooks the app still writes to: #loginUser, #loginPass, #loginError. Colour comes from the logo itself — #1E458C for the mark, #479EDD for its arc — not from --mg-brand (#45699C), which is the console's muted chrome. On the one screen where the mark is the subject, the mark's own colours belong. The field behind the panel is a graticule anchored on the company's real location in 10th of Ramadan City. It is a map grid, not decoration: the brighter line is that latitude, and it is labelled. ========================================================================== */ :root{ --lg-deep:#08192F; /* the mark's blue driven down to a field colour */ --lg-mark:#1E458C; /* logo, exact */ --lg-signal:#479EDD; /* logo arc, exact */ --lg-paper:#FFFFFF; --lg-ink:#0B1A33; --lg-mute:#8AA0C0; --lg-line:rgba(71,158,221,.13); --lg-line-strong:rgba(71,158,221,.34); --lg-panel:rgba(255,255,255,.055); --lg-panel-edge:rgba(140,180,225,.20); --lg-input:rgba(4,14,30,.42); --lg-danger:#FF8FA3; } /* Honour the language switch. `L.setLang` sets dir on , but mgiot-pro.css declares `html,body{direction:rtl}`, and a stylesheet rule beats the dir attribute's presentational hint — so English never actually flipped. Scoped to this screen; the rest of the app is a separate problem. */ html[dir="ltr"] .login-page.active{ direction:ltr; } html[dir="rtl"] .login-page.active{ direction:rtl; } /* ── The field ──────────────────────────────────────────────────────────── */ .login-page.active{ display:flex!important; min-height:100vh; min-height:100dvh; align-items:center; justify-content:center; padding:24px; position:relative; overflow:hidden; background:var(--lg-deep)!important; font-family:'Cairo','Inter',system-ui,sans-serif!important; } /* Depth: one warm-blue glow behind where the mark sits, so the panel reads as lit from the brand rather than floating on flat navy. */ .login-page.active::before{ content:''; position:absolute; inset:-20% -10% auto -10%; height:78%; background: radial-gradient(58% 62% at 50% 8%, rgba(71,158,221,.22), transparent 70%), radial-gradient(42% 48% at 50% 0%, rgba(30,69,140,.55), transparent 72%); pointer-events:none; } /* The graticule. Two line sets at 72px, plus the anchored latitude. */ .lg-field{ position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(to right,var(--lg-line) 1px,transparent 1px), linear-gradient(to bottom,var(--lg-line) 1px,transparent 1px); background-size:72px 72px; -webkit-mask-image:radial-gradient(90% 78% at 50% 42%,#000 32%,transparent 88%); mask-image:radial-gradient(90% 78% at 50% 42%,#000 32%,transparent 88%); } .lg-lat{ position:absolute; left:0; right:0; top:50%; border-top:1px solid var(--lg-line-strong); pointer-events:none; } .lg-lat span{ position:absolute; top:-10px; inset-inline-start:34px; display:flex; align-items:center; gap:9px; font-family:'Inter',system-ui,sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.15em; font-variant-numeric:tabular-nums; color:rgba(138,160,192,.78); background:var(--lg-deep); padding:0 12px; direction:ltr; white-space:nowrap; } /* A tick where the label meets the line, so it reads as a measurement off the graticule rather than a caption that happens to sit there. */ .lg-lat span::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--lg-signal); box-shadow:0 0 9px rgba(71,158,221,.9); } /* ── Layout ─────────────────────────────────────────────────────────────── */ .lg-shell{ position:relative; z-index:2; width:100%; max-width:404px; display:flex; flex-direction:column; gap:26px; } /* ── Mark and title ─────────────────────────────────────────────────────── */ .lg-head{ text-align:center; } .lg-mark{ width:78px; height:78px; object-fit:contain; display:block; margin:0 auto 18px; /* The logo is drawn for white. On navy it needs its own light behind it. */ filter:drop-shadow(0 0 26px rgba(71,158,221,.42)); } .lg-title{ margin:0; font-size:25px; font-weight:800; line-height:1.35; color:#F2F7FD; letter-spacing:-.01em; } .lg-sub{ margin:9px 0 0; font-size:13px; font-weight:500; line-height:1.7; color:var(--lg-mute); } /* ── Panel ──────────────────────────────────────────────────────────────── */ .lg-panel{ background:var(--lg-panel); border:1px solid var(--lg-panel-edge); border-radius:18px; padding:26px 24px 24px; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 24px 60px -22px rgba(2,10,24,.85); } .lg-row{ margin-bottom:16px; } .lg-label{ display:block; margin-bottom:8px; font-size:12.5px; font-weight:600; color:#C6D6EA; letter-spacing:.01em; } /* The three legacy ids the app writes to. Reset hard — the inherited sheets set padding, border, font and background on bare `input`. */ .lg-panel #loginUser, .lg-panel #loginPass{ width:100%; box-sizing:border-box; height:50px; padding:0 15px; margin:0; font-family:'Inter',system-ui,sans-serif!important; font-size:15px; font-weight:500; letter-spacing:.01em; color:#F2F7FD!important; background:var(--lg-input)!important; border:1px solid rgba(140,180,225,.22)!important; border-radius:11px!important; outline:none; transition:border-color .16s ease, box-shadow .16s ease, background .16s ease; } .lg-panel #loginPass{ padding-right:48px; } .lg-panel #loginUser::placeholder, .lg-panel #loginPass::placeholder{ color:rgba(138,160,192,.55); font-weight:400; } .lg-panel #loginUser:focus, .lg-panel #loginPass:focus{ border-color:var(--lg-signal)!important; background:rgba(4,14,30,.62)!important; box-shadow:0 0 0 3.5px rgba(71,158,221,.19); } .lg-panel #loginUser:-webkit-autofill, .lg-panel #loginPass:-webkit-autofill{ -webkit-text-fill-color:#F2F7FD; -webkit-box-shadow:0 0 0 60px #0C2039 inset; caret-color:#F2F7FD; } /* Password reveal */ .lg-pass{ position:relative; } .lg-panel .lg-eye{ /* `right`, not `inset-inline-end`: the field itself is dir="ltr" because a password is a sequence, so its text always starts at the left. An inline-end button lands on top of the first characters when the page is Arabic. The paint properties carry !important because mgiot-pro.css sets `button{background:#fff!important;border:1px solid...}` on every button in the app. */ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:38px; height:38px; padding:0; display:flex; align-items:center; justify-content:center; background:transparent!important; border:0!important; border-radius:9px; cursor:pointer; box-shadow:none!important; color:var(--lg-mute); font-size:16px; line-height:1; transition:color .15s ease, background .15s ease; } .lg-panel .lg-eye:hover{ color:#DCE8F6; background:rgba(140,180,225,.14)!important; } .lg-panel .lg-eye:focus-visible{ outline:2px solid var(--lg-signal); outline-offset:2px; } /* One icon, two states: the slash is drawn only while the password is visible, so the control always shows what pressing it will do next. */ .lg-eye-slash{ opacity:0; transition:opacity .15s ease; } .lg-panel .lg-eye[aria-pressed="true"] .lg-eye-slash{ opacity:1; } @media (prefers-reduced-motion:reduce){ .lg-eye-slash{ transition:none; } } /* ── Submit ─────────────────────────────────────────────────────────────── */ .lg-panel .lg-submit{ width:100%; height:50px; margin-top:4px; display:flex; align-items:center; justify-content:center; gap:9px; font-family:'Cairo','Inter',sans-serif!important; font-size:15px; font-weight:700; letter-spacing:.01em; color:#fff!important; background:linear-gradient(180deg,#2C5DAE,var(--lg-mark))!important; border:1px solid rgba(71,158,221,.42)!important; border-radius:11px!important; cursor:pointer; box-shadow:0 10px 24px -10px rgba(30,69,140,.9); transition:transform .12s ease, box-shadow .18s ease, filter .18s ease; } .lg-panel .lg-submit:hover{ filter:brightness(1.09); box-shadow:0 14px 30px -10px rgba(30,69,140,1); } .lg-panel .lg-submit:active{ transform:translateY(1px); } .lg-panel .lg-submit:focus-visible{ outline:2px solid var(--lg-signal); outline-offset:3px; } .lg-panel .lg-submit[data-busy="1"]{ pointer-events:none; filter:saturate(.75) brightness(.92); } .lg-panel .lg-submit[data-busy="1"] .lg-submit-text{ opacity:.6; } .lg-spin{ display:none; width:16px; height:16px; flex:0 0 16px; border:2px solid rgba(255,255,255,.32); border-top-color:#fff; border-radius:50%; animation:lg-spin .7s linear infinite; } .lg-submit[data-busy="1"] .lg-spin{ display:block; } @keyframes lg-spin{ to{ transform:rotate(360deg); } } /* ── Error ──────────────────────────────────────────────────────────────── */ /* Reserves nothing when empty, so the panel does not jump; slides in when set. */ .lg-panel #loginError{ /* Empty by default and collapsed to nothing, so the panel does not reserve a gap it usually has no use for. Sized by its content when it has any — an earlier max-height animation pinned every message to the height of the longest one. */ /* style.css gives .login-error a pink panel and border, which on this dark card reads as a filled alert box rather than a line of text. Stripped back to type plus a marker. */ margin:0!important; padding:0; height:0; overflow:hidden; background:transparent!important; border:0!important; font-size:12.5px; font-weight:600; line-height:1.65; color:var(--lg-danger)!important; text-align:start; } .lg-panel #loginError:not(:empty){ /* Block, not flex. The app writes the message straight into this element as a bare text node, and inside a flex container that becomes an anonymous item that shrinks to its longest word — one short sentence was wrapping onto four lines. As inline content beside an inline marker it just flows. */ height:auto; padding-top:14px; animation:lg-err .2s ease both; } .lg-panel #loginError:not(:empty)::before{ content:'!'; display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; margin-inline-end:8px; vertical-align:-3px; font-family:'Inter',sans-serif; font-size:11px; font-weight:800; color:#3A0812; background:var(--lg-danger); border-radius:50%; } @keyframes lg-err{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:none; } } /* ── Language ───────────────────────────────────────────────────────────── */ /* Was two buttons that both read as selected. One control, one active state. */ .lg-lang{ position:absolute; top:20px; inset-inline-end:20px; z-index:3; display:flex; padding:3px; gap:2px; background:rgba(255,255,255,.055); border:1px solid var(--lg-panel-edge); border-radius:999px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } .lg-lang button, .login-page .lg-lang button{ padding:6px 15px; border:0; border-radius:999px; cursor:pointer; font-family:'Cairo','Inter',sans-serif!important; font-size:12px; font-weight:700; line-height:1.4; color:var(--lg-mute)!important; background:transparent!important; border:0!important; box-shadow:none!important; transition:color .15s ease, background .15s ease; } .lg-lang button:hover{ color:#DCE8F6!important; } .lg-lang button[aria-pressed="true"]{ color:#fff!important; background:var(--lg-mark)!important; box-shadow:0 2px 8px -2px rgba(30,69,140,.9); } .lg-lang button:focus-visible{ outline:2px solid var(--lg-signal); outline-offset:2px; } /* An instrument strip under the panel was cut: it repeated the location the coordinate label already carries, and two quiet technical captions on one screen is one too many. */ /* ── Entrance ───────────────────────────────────────────────────────────── */ .login-page.active .lg-head{ animation:lg-rise .5s cubic-bezier(.2,.7,.3,1) both; } .login-page.active .lg-panel{ animation:lg-rise .5s cubic-bezier(.2,.7,.3,1) .07s both; } @keyframes lg-rise{ from{ opacity:0; transform:translateY(11px); } to{ opacity:1; transform:none; } } /* ── Light theme ────────────────────────────────────────────────────────── */ /* The console has a light mode; the door should follow it rather than flashing navy at someone whose whole session is light. Same structure, inverted field. */ html:not([data-theme="dark"]) .login-page.active{ --lg-mute:#5F7A9C; background:#EDF2F8!important; } html:not([data-theme="dark"]) .lg-field{ background-image: linear-gradient(to right,rgba(30,69,140,.055) 1px,transparent 1px), linear-gradient(to bottom,rgba(30,69,140,.055) 1px,transparent 1px); } html:not([data-theme="dark"]) .login-page.active::before{ background: radial-gradient(58% 62% at 50% 8%, rgba(71,158,221,.20), transparent 70%), radial-gradient(44% 50% at 50% 0%, rgba(30,69,140,.12), transparent 74%); } html:not([data-theme="dark"]) .lg-lat{ border-top-color:rgba(30,69,140,.22); } html:not([data-theme="dark"]) .lg-lat span{ background:#EDF2F8; color:#6B85A8; } html:not([data-theme="dark"]) .lg-title{ color:#0B1A33; } html:not([data-theme="dark"]) .lg-sub{ color:#5A748F; } html:not([data-theme="dark"]) .lg-panel{ background:rgba(255,255,255,.86); border-color:rgba(30,69,140,.13); box-shadow:0 22px 54px -24px rgba(11,26,51,.34); } html:not([data-theme="dark"]) .lg-label{ color:#33465F; } html:not([data-theme="dark"]) .lg-panel #loginUser, html:not([data-theme="dark"]) .lg-panel #loginPass{ color:#0B1A33!important; background:#F6F9FC!important; border-color:rgba(30,69,140,.18)!important; } html:not([data-theme="dark"]) .lg-panel #loginUser:focus, html:not([data-theme="dark"]) .lg-panel #loginPass:focus{ background:#fff!important; border-color:var(--lg-mark)!important; box-shadow:0 0 0 3.5px rgba(30,69,140,.14); } html:not([data-theme="dark"]) .lg-panel #loginUser:-webkit-autofill, html:not([data-theme="dark"]) .lg-panel #loginPass:-webkit-autofill{ -webkit-text-fill-color:#0B1A33; -webkit-box-shadow:0 0 0 60px #F6F9FC inset; } html:not([data-theme="dark"]) .lg-panel #loginError{ color:#B3261E!important; } html:not([data-theme="dark"]) .lg-panel #loginError:not(:empty)::before{ background:#B3261E; color:#fff; } html:not([data-theme="dark"]) .lg-lang{ background:rgba(255,255,255,.8); border-color:rgba(30,69,140,.13); } html:not([data-theme="dark"]) .lg-lang button, .login-page .lg-lang button{ color:#5F7A9C!important; } html:not([data-theme="dark"]) .lg-lang button:hover{ color:#1E458C!important; } html:not([data-theme="dark"]) .lg-panel .lg-eye:hover{ color:#1E458C; background:rgba(30,69,140,.09)!important; } /* ── Small screens ──────────────────────────────────────────────────────── */ @media (max-width:480px){ .login-page.active{ padding:18px; align-items:flex-start; padding-top:88px; } .lg-shell{ gap:22px; } .lg-mark{ width:64px; height:64px; margin-bottom:14px; } .lg-title{ font-size:21px; } .lg-panel{ padding:22px 18px 20px; border-radius:16px; } .lg-lang{ top:16px; inset-inline-end:16px; } .lg-lat{ display:none; } /* the label collides with the panel at this width */ } @media (max-height:640px){ .login-page.active{ align-items:flex-start; padding-top:32px; } .lg-mark{ width:58px; height:58px; margin-bottom:12px; } .lg-shell{ gap:18px; } } /* ── Reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ .login-page.active .lg-head, .login-page.active .lg-panel{ animation:none; } .lg-spin{ animation-duration:1.6s; } .lg-panel #loginUser,.lg-panel #loginPass,.lg-panel .lg-submit, .lg-lang button,.lg-eye,.lg-panel #loginError{ transition:none; } }