/* TicketBAI WS — login Light theme by default; add class="theme-dark" to for the dark variant. */ :root { --accent: #1B4FD8; --accent-hover: #143CA8; --bg: #FCFCFD; --panel: #0B0C10; --panel-border: #1A1D24; --panel-card: #0E1015; --panel-card-border: #1F232B; --text: #14161B; --text-muted: #5A6070; --text-faint: #9096A3; --label: #4A5160; --field-bg: #ffffff; --field-border: #D8DBE3; --field-text: #14161B; --placeholder: #B4B9C4; --hairline: #E7E9EF; --toggle-hover-bg: #F1F2F6; --toggle-hover-fg: #14161B; --lang-bg: #ffffff; --lang-border: #E7E9EF; --lang-active-bg: #14161B; --lang-active-fg: #ffffff; --link: #1B4FD8; --link-hover: #143CA8; --logo-filter: hue-rotate(22deg) saturate(1.35); --focus-ring: rgba(27, 79, 216, 0.12); --focus-border: #1B4FD8; --alert-bg: #FDEDEC; --alert-border: #EDA39C; --alert-icon: #C0261A; --alert-title: #A81F14; --alert-ring: rgba(192, 38, 26, 0.14); } .theme-dark { --bg: #08090C; --panel: #16181E; --panel-border: #24272F; --panel-card: #101217; --panel-card-border: #2A2E37; --text: #F7F8FA; --text-muted: #9AA1B0; --text-faint: #565D6C; --label: #C2C8D4; --field-bg: #0E1015; --field-border: #262B35; --field-text: #F7F8FA; --placeholder: #565D6C; --hairline: #1A1D24; --toggle-hover-bg: #1A1D24; --toggle-hover-fg: #F7F8FA; --lang-bg: transparent; --lang-border: #1F232B; --lang-active-bg: #1F232B; --lang-active-fg: #F5F6F8; --link: #7B9BF0; --link-hover: #A8BEF7; --logo-filter: invert(1) hue-rotate(180deg) hue-rotate(22deg) saturate(1.3); --focus-ring: rgba(47, 99, 232, 0.22); --focus-border: #2F63E8; --alert-bg: rgba(237, 120, 110, 0.10); --alert-border: rgba(237, 120, 110, 0.38); --alert-icon: #EF8A80; --alert-title: #F0A39B; --alert-ring: rgba(237, 120, 110, 0.22); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Space Grotesk', system-ui, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); } ::selection { background: color-mix(in oklab, var(--accent) 30%, white); } .theme-dark ::selection { background: var(--accent); color: #fff; } .mono { font-family: 'IBM Plex Mono', monospace; } /* ---------- shell ---------- */ .login { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; } .login__form-col { display: flex; flex-direction: column; padding: 32px 40px 40px; } .login__topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .login__logo { display: block; } .login__logo img { height: 27px; width: auto; display: block; filter: var(--logo-filter); } .login__topbar-right { display: flex; align-items: center; gap: 18px; } .lang { display: flex; gap: 2px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--text-faint); background: var(--lang-bg); border: 1px solid var(--lang-border); border-radius: 7px; padding: 3px; } .lang button { font: inherit; color: inherit; background: none; border: none; padding: 2px 7px; border-radius: 5px; cursor: pointer; } .lang button[aria-current='true'] { background: var(--lang-active-bg); color: var(--lang-active-fg); } .login__back { font-size: 14.5px; color: var(--text-muted); } .login__back:hover { color: var(--text); } .login__center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 0; } .login__card { width: 100%; max-width: 396px; } .login__title { font-size: 34px; font-weight: 600; letter-spacing: -0.032em; line-height: 1.1; margin: 0 0 10px; } .login__lede { font-size: 15.5px; line-height: 1.55; color: var(--text-muted); margin: 0 0 34px; } /* ---------- form ---------- */ .form { display: grid; gap: 18px; } .field { display: grid; gap: 8px; } .field__label { font-size: 13.5px; font-weight: 500; color: var(--label); } .field__labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .field__labelrow a { font-size: 13px; } .field input { width: 100%; padding: 12px 14px; font-family: inherit; font-size: 15px; color: var(--field-text); background: var(--field-bg); border: 1px solid var(--field-border); border-radius: 9px; transition: box-shadow 0.15s, border-color 0.15s; } .field input::placeholder { color: var(--placeholder); } .field input:focus { outline: none; border-color: var(--focus-border); box-shadow: 0 0 0 3px var(--focus-ring); } .field--password { position: relative; display: flex; align-items: center; } .field--password input { padding-right: 74px; } .pw-toggle { position: absolute; right: 6px; border: none; background: transparent; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.04em; color: #7A8191; cursor: pointer; padding: 6px 8px; border-radius: 6px; } .pw-toggle:hover { color: var(--toggle-hover-fg); background: var(--toggle-hover-bg); } .alert { display: flex; gap: 11px; align-items: start; border: 1px solid var(--alert-border); background: var(--alert-bg); border-radius: 10px; padding: 13px 15px; margin-bottom: 20px; } .alert[hidden] { display: none; } .alert__icon { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--alert-icon); line-height: 1.45; flex-shrink: 0; } .alert__title { font-size: 14.5px; font-weight: 500; color: var(--alert-title); line-height: 1.4; } .alert__body { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; margin-top: 3px; } .field input[aria-invalid='true'] { border-color: var(--alert-border); } .field input[aria-invalid='true']:focus { border-color: var(--alert-icon); box-shadow: 0 0 0 3px var(--alert-ring); } .btn { width: 100%; padding: 13px; font-family: inherit; font-size: 15.5px; font-weight: 500; color: #fff; background: var(--accent); border: none; border-radius: 9px; cursor: pointer; transition: background 0.15s; margin-top: 6px; } .btn:hover { background: var(--accent-hover); } .login__note { font-size: 14.5px; color: var(--text-muted); margin: 30px 0 0; line-height: 1.55; padding-top: 26px; border-top: 1px solid var(--hairline); } .login__legal { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--text-faint); } .login__legal a { color: var(--text-faint); } .login__legal a:hover { color: var(--text-muted); } /* ---------- aside ---------- */ .aside { background: var(--panel); padding: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; } .theme-dark .aside { border-left: 1px solid var(--panel-border); } .status { display: flex; align-items: center; gap: 9px; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: #9AA1B0; letter-spacing: 0.04em; } .status__dot { width: 6px; height: 6px; border-radius: 50%; background: #4CC38A; animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } .aside__title { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 14px; color: #F7F8FA; max-width: 20em; text-wrap: balance; } .aside__lede { font-size: 15.5px; line-height: 1.65; color: #9AA1B0; margin: 0 0 32px; max-width: 30em; } .snippet { border: 1px solid var(--panel-card-border); border-radius: 12px; overflow: hidden; background: var(--panel-card); max-width: 460px; } .snippet__bar { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--panel-card-border); } .snippet__url { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: #9AA1B0; } .snippet pre { margin: 0; padding: 16px 18px; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; line-height: 1.7; color: #C9CEDA; overflow-x: auto; } .tok-key { color: #F07178; } .tok-str { color: #A9DC76; } .tok-lit { color: #C792EA; } .verb { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; border-radius: 5px; padding: 2px 7px; } .verb--post { color: #5FD3A0; background: rgba(76, 195, 138, 0.10); border: 1px solid rgba(76, 195, 138, 0.38); } .badges { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; } .badges span { background: #fff; border-radius: 8px; padding: 0 13px; height: 44px; display: flex; align-items: center; } .badges img { max-height: 28px; max-width: 116px; width: auto; display: block; } .badges img.is-wordmark { max-height: 22px; } /* ---------- responsive ---------- */ @media (max-width: 900px) { .login { grid-template-columns: 1fr; min-height: 0; } .login__form-col { padding: 22px 20px 30px; } .login__center { padding: 30px 0 34px; } .login__title { font-size: 28px; } .aside { padding: 34px 20px; gap: 28px; } .theme-dark .aside { border-left: none; border-top: 1px solid var(--panel-border); } .aside__title { font-size: 23px; } .snippet { display: none; } .login__legal { gap: 14px; } } @media (max-width: 420px) { .login__form-col { padding: 20px 16px 26px; } .aside { padding: 30px 16px; } }