/* 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 's dropdown popup, scrollbars --
in its dark skin instead of always defaulting to light, regardless of the background/color
this file sets on the closed .form-select box itself (some browsers otherwise keep the open
popup's own list on a white ground no matter what colours the element carries). */
:root:not([data-theme="light"]) { 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"] {
color-scheme: 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 { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; }
.login-brand {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
text-decoration: none;
color: inherit;
}
.brand-subtitle {
margin: 0;
font-family: var(--mono);
font-size: .7rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--muted);
}
/* Lockup: the file, not the inline mark, so "robo" renders in whichever ink the ground actually
needs -- lockup-en.svg's text is literal #191714, unreadable on the dark paper this same rule set
can put underneath it. Same three-case switch as the colour tokens above (bare/prefers/attribute),
not the sidebar's attribute-only version, because this logo also has to follow "system" like the
tokens do. */
.rc-lp-lockup { display: block; height: 32px; width: auto; max-width: 100%; }
.rc-lp-lockup--dark { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .rc-lp-lockup--light { display: none; }
:root:not([data-theme="light"]) .rc-lp-lockup--dark { display: block; }
}
:root[data-theme="dark"] .rc-lp-lockup--light { display: none; }
:root[data-theme="dark"] .rc-lp-lockup--dark { display: block; }
/* Theme toggle: a sliding pill rather than landing.css's single swapped icon, so state reads at a
glance without decoding which glyph means "click for dark". Sun and moon sit fixed at the two
ends; the thumb travels between them and the off-duty glyph dims. Same three-case switch as the
colour tokens (bare/prefers/attribute) drives both the thumb position and the dimming. */
.theme-switch {
position: relative;
display: inline-flex; align-items: center; justify-content: space-between;
flex: none;
width: 52px; height: 28px;
padding: 0 7px;
background: var(--paper);
color: var(--ink-soft);
border: 1px solid var(--rule);
border-radius: 999px;
cursor: pointer;
}
.theme-switch:hover { border-color: var(--ink-soft); }
.theme-switch .ts-icon { position: relative; z-index: 1; display: block; opacity: .45; transition: opacity .2s ease, color .2s ease; }
.theme-switch .ts-sun { opacity: 1; }
.theme-switch .ts-thumb {
position: absolute;
top: 2px; left: 3px;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--rule);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
/* --surface sits one shade above --paper in both palettes, but in the dark palette that gap is
too small to read (#1E1A16 thumb on #16130F track): the switch WAS flipping state correctly --
verified via computed style -- it just could not be seen doing it. --ink-soft is dark theme's
near-white text colour, chosen here purely for the contrast, not for text; the active glyph
flips to --paper so it stays legible sitting on top of that now-light thumb. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .theme-switch .ts-sun { opacity: .45; }
:root:not([data-theme="light"]) .theme-switch .ts-moon { opacity: 1; color: var(--paper); }
:root:not([data-theme="light"]) .theme-switch .ts-thumb {
transform: translateX(24px);
background: var(--ink-soft);
border-color: var(--ink-soft);
}
}
:root[data-theme="dark"] .theme-switch .ts-sun { opacity: .45; }
:root[data-theme="dark"] .theme-switch .ts-moon { opacity: 1; color: var(--paper); }
:root[data-theme="dark"] .theme-switch .ts-thumb {
transform: translateX(24px);
background: var(--ink-soft);
border-color: var(--ink-soft);
}
.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 ══════════════════════════════════════════════════════════════════════════════════ */
/* .form-select (the country/industry dropdowns) is a distinct Bootstrap class from .form-control --
without it listed here it keeps Bootstrap/Metronic's own white background and dark text no matter
what theme the rest of the card is in, since none of the rules below would otherwise touch it.
Deliberately NOT setting `padding` here (unlike .form-control below): Bootstrap's own
`.form-floating > .form-select` rule ships its own asymmetric top/bottom padding tuned to leave
room for the floating label, at the same specificity as this selector -- since this stylesheet
loads after app.css, a flat `padding` here would win the cascade and replace it. That previously
inflated every option's row height in the native dropdown popup itself (recent Chrome reflects a
's own CSS, padding included, onto its popup listbox) -- options rendering "stacked with
space between them" -- not just the closed control's box. */
.login-card .form-control,
.login-card .form-select {
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;
box-shadow: none !important;
}
.login-card .form-control { padding: 1rem .85rem; }
.login-card .form-control::placeholder { color: var(--muted) !important; }
.login-card .form-control:focus,
.login-card .form-select:focus,
.form-floating > .form-control:focus,
.form-floating > .form-select: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. A has no
:placeholder-shown state (it always has a selected value), so Bootstrap always floats a
.form-select's label -- .form-floating > .form-select ~ label, unconditioned -- and this needs to
match that, not the .form-control pair's :focus/:not(:placeholder-shown) condition. */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ 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 ground, which reads as broken on a dark card -- and worse, makes
the text invisible, because -webkit-text-fill-color below is --ink (near-white in dark) while
Chrome's ground stays light.
Scoped to .login-card and marked !important on purpose. The previous version was
`input:-webkit-autofill` (0,1,1) with no !important, so `.login-card .form-control` (0,2,0) and its
`box-shadow: none !important` above cancelled the very inset ground this rule exists to paint. */
.login-card .form-control:-webkit-autofill,
.login-card .form-control:-webkit-autofill:hover,
.login-card .form-control:-webkit-autofill:focus,
.login-card .form-control:autofill {
-webkit-text-fill-color: var(--ink) !important;
-webkit-box-shadow: 0 0 0 1000px var(--paper) inset !important;
box-shadow: 0 0 0 1000px var(--paper) inset !important;
caret-color: var(--ink);
/* Chrome animates the autofill background in; a long transition on a colour it will not repaint
is the usual trick to keep the inset ground from being overwritten. */
transition: background-color 8000s ease-in-out 0s;
}
.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; }
/* ═══ Plan tiles (sign-up) ════════════════════════════════════════════════════════════════════ */
/* Replaces a bare radio list: each plan is a selectable tile (native radio visually hidden, its
label styled as the tile) so the checked state reads as an accent border + wash, matching the
landing page's pricing cards without pulling in their full badge/bullets treatment -- this card
is only 27rem wide. */
.plan-tiles {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.plan-tile { flex: 1 1 calc(50% - 5px); min-width: 9.5rem; }
.plan-tile-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.plan-tile-label {
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 14px;
border: 1px solid var(--rule);
border-radius: 3px;
background: var(--paper);
cursor: pointer;
transition: border-color .12s ease, background .12s ease;
}
.plan-tile-input:checked + .plan-tile-label {
border-color: var(--accent);
background: var(--accent-wash);
}
.plan-tile-input:focus-visible + .plan-tile-label {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.plan-tile-name {
font-family: var(--body);
font-weight: 600;
font-size: .9rem;
color: var(--ink);
}
.plan-tile-input:checked + .plan-tile-label .plan-tile-name { color: var(--accent-ink); }
.plan-tile-price {
font-family: var(--mono);
font-size: .78rem;
color: var(--muted);
}
/* Primary price figure (either the plain USD text, or whichever of USD/local signup.js has swapped
in as primary -- see #js-country-prices in signup.html) reads as the actual number, same
bigger/bolder-than-secondary hierarchy as the public /pricing page's .js-price/.js-price-local,
just scaled down for this tile's small footprint. */
.js-plan-price {
font-family: var(--display);
font-weight: 700;
font-size: 1rem;
color: var(--ink);
}
.plan-tile-input:checked + .plan-tile-label .js-plan-price { color: var(--accent-ink); }
/* Secondary USD/local-currency estimate signup.js swaps in next to the primary price. Kept
visually quieter than the primary figure it sits next to. */
.js-plan-price-local {
margin-inline-start: .25em;
font-size: .78rem;
font-weight: 400;
opacity: .75;
}
/* Mirrors .plan-trial in landing.css, but scoped to this stylesheet's own --mono/--accent-ink
vars -- the landing page's variables aren't in scope on the signup page. */
.plan-tile-trial {
font-family: var(--mono);
font-size: .74rem;
font-weight: 700;
letter-spacing: .02em;
color: var(--accent-ink);
}
#toast-container > div .toast-message { color: var(--ink-soft) !important; }