/* Robochat sign-in, forgot-password and reset-password screens. * * V3 exists because "/" now serves the landing page to every visitor and the landing nav links here: * that seam is on the main path, so the two screens have to read as one product. V2 was a * glassmorphism card on an animated purple/blue/orange gradient in Inter — a different typeface, four * different oranges and no dark mode. Everything below is the landing page's own token set, so the * two files stay in step by sharing values rather than by anyone remembering to update both. * * V2 is left on disk: swap the in login-layout.html back to login-v2.css to revert. * * Direction: logical properties throughout, so RTL comes from dir="rtl" alone. * Themes: bare :root is the complete light palette; dark is redefined twice, once behind * prefers-color-scheme (guarded so an explicit light choice wins) and once behind [data-theme]. * * Bootstrap and Metronic's app.css load before this file and set their own colours on .form-control, * .alert and friends. !important appears only where one of them would otherwise win. */ /* ═══ Tokens — identical values to css/landing/landing.css ════════════════════════════════════ */ :root { --paper: #F6F5F3; --surface: #FFFFFF; --ink: #191714; --ink-soft: #4A443C; --muted: #6E675C; --rule: #E2DED7; --accent: #FD7E14; --accent-ink: #8A3D00; --accent-wash:#FFF3E7; --pos: #1B7F4B; --neg: #B42318; --display: Archivo, "Arial Black", system-ui, sans-serif; --body: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #16130F; --surface: #1E1A16; --ink: #F3EFE9; --ink-soft: #C4BCB0; --muted: #8E8579; --rule: #322C25; --accent: #FF9740; --accent-ink: #FFC796; --accent-wash:#2A1B0D; --pos: #4FBE86; --neg: #FF9A8D; } } :root[data-theme="dark"] { --paper: #16130F; --surface: #1E1A16; --ink: #F3EFE9; --ink-soft: #C4BCB0; --muted: #8E8579; --rule: #322C25; --accent: #FF9740; --accent-ink: #FFC796; --accent-wash:#2A1B0D; --pos: #4FBE86; --neg: #FF9A8D; } /* ═══ Page ════════════════════════════════════════════════════════════════════════════════════ */ /* The layout's carries Metronic's theme-blue class, which paints its own ground. This is the one place the override has to be unconditional. */ body { min-height: 100vh; margin: 0; display: flex; flex-direction: column; background: var(--paper) !important; background-image: none !important; color: var(--ink); font-family: var(--body) !important; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } [dir="rtl"] body { font-family: "IBM Plex Sans Arabic", var(--body) !important; } h1, h2, h3, h4, h5, h6 { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; margin: 0; text-wrap: balance; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: "IBM Plex Sans Arabic", var(--display); letter-spacing: 0; } /* The decorative background layers are gone with V2's gradient — kept as no-op rules so a cached page or a stray markup reference cannot paint anything. */ .lp-bg, .lp-mesh, .lp-spotlight, .lp-float-icon { display: none !important; } /* ═══ Header / main / footer ══════════════════════════════════════════════════════════════════ */ .lp-header { padding: 22px 24px; } .login-brand { display: inline-flex; align-items: center; text-decoration: none; color: inherit; } .brand-logo { width: 34px; height: 34px; object-fit: contain; } .brand-name { display: block; font-family: var(--display); font-weight: 800; font-size: 1.12rem; letter-spacing: -.01em; color: var(--ink); } .brand-subtitle { margin: 0; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .lp-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; } .lp-footer { padding: 20px 24px; text-align: center; } .login-footer-text { font-family: var(--mono); font-size: .72rem; color: var(--muted); } /* ═══ Card ════════════════════════════════════════════════════════════════════════════════════ */ /* 4px, not 20px: the landing's cards, plans and inputs are all near-square, and the radius is the single most recognisable thing carried between the two pages. */ .login-card { max-width: 27rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 36px 32px; } @media (max-width: 480px) { .login-card { padding: 28px 20px; } } .login-title { font-size: 1.45rem; color: var(--ink); } .login-subtitle, .forget-body { font-size: .95rem; color: var(--ink-soft); margin: 0; } .reset-lead { margin-bottom: 20px; } .login-divider { border: none; border-top: 1px solid var(--rule); margin: 24px 0 16px; } .login-tagline { margin: 0; text-align: center; font-size: .84rem; line-height: 1.6; color: var(--muted); max-width: 22rem; margin-inline: auto; } /* The badge above the reset heading. An accent wash rather than a gradient disc. */ .login-icon-badge, .reset-icon-area { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 50%; background: var(--accent-wash); color: var(--accent-ink); font-size: 1.4rem; } /* ═══ Fields ══════════════════════════════════════════════════════════════════════════════════ */ .login-card .form-control { background: var(--paper) !important; border: 1px solid var(--rule) !important; border-radius: 3px !important; color: var(--ink) !important; font-family: var(--body) !important; font-size: .95rem; padding: 1rem .85rem; box-shadow: none !important; } .login-card .form-control::placeholder { color: var(--muted) !important; } .login-card .form-control:focus, .form-floating > .form-control:focus { border-color: var(--accent) !important; outline: 2px solid var(--accent); outline-offset: 1px; } .form-floating > label { color: var(--muted); font-family: var(--body); font-size: .95rem; padding: 1rem .85rem; } /* Bootstrap paints its own chip behind the shrunk label via ::after, hard-coded to the body background. On a card whose fields sit on --paper that chip is the wrong colour, so it has to be re-pointed rather than removed — removing it lets the field's text run under the label. */ .form-floating > label::after { background-color: var(--paper) !important; } /* Colour only. Bootstrap shrinks the label to the top of the field's own box, so it needs no background — adding one punches a notch through the top border on focus. */ .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--accent-ink); background: transparent; } .form-control.input-error { border-color: var(--neg) !important; } .form-control.input-error:focus { border-color: var(--neg) !important; outline-color: var(--neg); } .field-error { display: none; margin-top: 6px; font-size: .8rem; color: var(--neg); } /* Autofill: Chrome paints its own yellow ground, which reads as broken on a dark card. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--ink); -webkit-box-shadow: 0 0 0 1000px var(--paper) inset; caret-color: var(--ink); } .btn-password-toggle { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); z-index: 5; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: none; border-radius: 3px; color: var(--muted); cursor: pointer; } .btn-password-toggle:hover { color: var(--ink); } .login-card .form-check-label { font-size: .88rem; color: var(--ink-soft); } .form-check-input { border-color: var(--rule); background-color: var(--surface); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .form-check-input:focus { border-color: var(--accent); box-shadow: none; } /* ═══ Actions ═════════════════════════════════════════════════════════════════════════════════ */ /* Same shape as the landing's .btn-primary, down to the 1px shadow that deepens on hover. */ .btn-primary-brand { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--body) !important; font-weight: 600; font-size: .95rem; padding: 12px 20px; border: 1px solid transparent; border-radius: 3px; background: var(--accent) !important; color: #201000 !important; box-shadow: 0 1px 0 var(--accent-ink); transition: transform .12s ease, box-shadow .12s ease; } .btn-primary-brand:hover { transform: translateY(-1px); box-shadow: 0 3px 0 var(--accent-ink); } .btn-primary-brand:active { transform: translateY(0); box-shadow: 0 1px 0 var(--accent-ink); } .forgot-link, .back-link { font-size: .86rem; font-weight: 500; color: var(--accent-ink); text-decoration: none; } .forgot-link:hover, .back-link:hover { color: var(--ink); text-decoration: underline; } /* One focus treatment for everything, matching the landing exactly. */ .btn-primary-brand:focus-visible, .forgot-link:focus-visible, .back-link:focus-visible, .login-brand:focus-visible, .btn-password-toggle:focus-visible, .form-check-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ═══ Alerts ══════════════════════════════════════════════════════════════════════════════════ */ .login-card .alert { border-radius: 3px; border: 1px solid var(--rule); font-size: .89rem; padding: 11px 14px; } .login-card .alert-danger { background: var(--accent-wash) !important; border-color: var(--neg) !important; color: var(--neg) !important; } .login-card .alert-success, #forget-success-alert { background: var(--surface) !important; border-color: var(--pos) !important; color: var(--pos) !important; } /* Hidden until login.js sets display:flex inline on a successful request. Kept free of !important so that inline style still wins; see the note in forget.html about why the d-flex utility had to come off the element for this to take effect at all. */ #forget-success-alert { display: none; align-items: center; gap: 8px; } /* ═══ Feature chips (sign-in footer) ══════════════════════════════════════════════════════════ */ .login-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 14px; } .feature-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; color: var(--muted); } .feature-chip i { color: var(--accent-ink); } /* ═══ Toastr ══════════════════════════════════════════════════════════════════════════════════ */ /* The layout carries its own toastr block inline. These win on specificity and pull it onto the token palette so a toast does not arrive in V2's navy. */ #toast-container > div { font-family: var(--body) !important; background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--rule) !important; border-radius: 3px !important; box-shadow: 0 8px 24px rgb(0 0 0 / .12) !important; opacity: 1 !important; } #toast-container > .toast-success { border-inline-start: 3px solid var(--pos) !important; } #toast-container > .toast-error { border-inline-start: 3px solid var(--neg) !important; } #toast-container > .toast-warning, #toast-container > .toast-info { border-inline-start: 3px solid var(--accent) !important; } #toast-container > div .toast-title { color: var(--ink) !important; font-weight: 600 !important; } #toast-container > div .toast-message { color: var(--ink-soft) !important; }