/* VENACTA sign-in theme. Dark by default (the platform's own palette), light when the system prefers it or when the person chose light in the app: the app's choice arrives through the cookie venacta.theme.v1 and js/venacta-theme.js stamps data-theme on before the first paint. */ :root { color-scheme: dark; --kc-bg: #050812; --kc-card: #080d19; --kc-raised: #111b2e; --kc-hover: #1d3044; --kc-line: #2b3b50; --kc-line-strong: #3c4a60; --kc-text: #f3f7fb; --kc-text-2: #c4cfdd; --kc-text-muted: #a9b7c9; --kc-signal: #29f7e0; --kc-signal-hover: #6fffea; --kc-on-signal: #050812; --kc-danger: #ff6f7f; --kc-danger-text: #ff8794; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --kc-bg: #f4f6fa; --kc-card: #ffffff; --kc-raised: #eef2f8; --kc-hover: #dfe7f3; --kc-line: #d3dbe7; --kc-line-strong: #b9c5d6; --kc-text: #0f1726; --kc-text-2: #33415a; --kc-text-muted: #5c6b82; --kc-signal: #0b8f86; --kc-signal-hover: #087a72; --kc-on-signal: #ffffff; --kc-danger: #c62f3c; --kc-danger-text: #b3262f; } } :root[data-theme="light"] { color-scheme: light; --kc-bg: #f4f6fa; --kc-card: #ffffff; --kc-raised: #eef2f8; --kc-hover: #dfe7f3; --kc-line: #d3dbe7; --kc-line-strong: #b9c5d6; --kc-text: #0f1726; --kc-text-2: #33415a; --kc-text-muted: #5c6b82; --kc-signal: #0b8f86; --kc-signal-hover: #087a72; --kc-on-signal: #ffffff; --kc-danger: #c62f3c; --kc-danger-text: #b3262f; } html, body.login-pf { min-height: 100%; background: var(--kc-bg); color: var(--kc-text); } body, .login-pf, .login-pf-page { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; } .login-pf-page { padding: clamp(24px, 5vh, 60px) 18px; } #kc-header { margin-bottom: 24px; color: var(--kc-text); } #kc-header-wrapper { padding: 0; font-size: 18px; letter-spacing: 0.18em; font-weight: 650; } .login-pf-page .card-pf { width: 100%; max-width: 520px; margin: 0 auto; padding: clamp(20px, 4vw, 36px); background: var(--kc-card); border: 1px solid var(--kc-line); border-top: 2px solid var(--kc-signal); box-shadow: none; color: var(--kc-text); } .login-pf-page .login-pf-header { margin-bottom: 28px; } #kc-page-title { margin: 0; text-align: start; font-size: clamp(24px, 4vw, 30px); font-weight: 650; line-height: 1.25; } #kc-locale { position: static; width: auto; margin-block: 0 20px; text-align: end; } #kc-locale-dropdown { position: relative; display: inline-block; } #kc-locale ul { background: var(--kc-raised); border: 1px solid var(--kc-line); } #kc-locale ul li a:hover { background: var(--kc-hover); color: var(--kc-signal); } #kc-locale a { color: var(--kc-text-2); } a { color: var(--kc-signal); } a:hover { color: var(--kc-signal-hover); } .form-group { margin-bottom: 20px; } label, .control-label, .pf-c-form__label-text { font-size: 14px; font-weight: 500; color: var(--kc-text-2); } .form-control, .pf-c-form-control { min-height: 48px; padding: 12px; background: var(--kc-bg); border: 1px solid var(--kc-line-strong); border-radius: 4px; color: var(--kc-text); font-size: 16px; box-shadow: none; } .form-control:focus, .pf-c-form-control:focus { border-color: var(--kc-signal); outline: 2px solid var(--kc-signal); outline-offset: 2px; } .pf-c-input-group { align-items: stretch; } .pf-c-button.pf-m-control, .input-group-addon { min-width: 48px; background: var(--kc-raised); color: var(--kc-text-2); border-color: var(--kc-line-strong); } .btn-primary { min-height: 48px; border: 1px solid var(--kc-signal); border-radius: 4px; background: var(--kc-signal); color: var(--kc-on-signal); font-size: 16px; font-weight: 650; box-shadow: none; } .btn-primary:hover, .btn-primary:focus { background: var(--kc-signal-hover); border-color: var(--kc-signal-hover); color: var(--kc-on-signal); } #kc-form-buttons { margin-top: 24px; } #kc-info { margin: 24px 0 0; } #kc-info-wrapper { padding: 20px 0 0; border-top: 1px solid var(--kc-line); background: transparent; font-size: 14px; } #kc-registration { font-size: 14px; } #kc-registration span { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .alert { border: 1px solid var(--kc-line-strong); padding: 14px; background: var(--kc-raised); color: var(--kc-text); } .alert-error, .alert-danger, .pf-m-error { border-color: var(--kc-danger); } #input-error, .pf-c-form__helper-text.pf-m-error { color: var(--kc-danger-text); } #kc-attempted-username { color: var(--kc-text); overflow-wrap: anywhere; } #kc-username { background: var(--kc-raised); } #kc-content, #kc-content-wrapper { min-width: 0; } a:focus-visible, button:focus-visible, input[type="submit"]:focus-visible { outline: 2px solid var(--kc-signal); outline-offset: 3px; } @media (max-width: 480px) { .login-pf-page { padding: 24px 14px; } #kc-header { margin-bottom: 20px; } .login-pf-page .card-pf { padding: 22px 18px; } #kc-locale { top: auto; right: auto; } } .login-pf body { background: var(--kc-bg); } .pf-c-button.pf-m-primary { min-height: 48px; border: 1px solid var(--kc-signal); border-radius: 4px; background: var(--kc-signal); color: var(--kc-on-signal); font-size: 16px; font-weight: 650; } .pf-c-button.pf-m-primary:hover { background: var(--kc-signal-hover); color: var(--kc-on-signal); } .login-pf-page .login-pf-header { display: flex; flex-direction: column; gap: 16px; } #kc-locale { order: -1; margin: 0; } #kc-page-title { order: 0; } .login-pf-header .subtitle { color: var(--kc-text-muted); font-size: 13px; margin: 0; } #kc-locale button { color: var(--kc-text-2); font-size: 14px; } .required { color: var(--kc-danger-text); } .pf-c-form-control[aria-invalid="true"] { background-image: none; border-color: var(--kc-danger-text); } .login-pf:lang(ar) body { direction: rtl; text-align: right; } input[type="email"], #username { direction: ltr; text-align: start; } #kc-header-wrapper { color: var(--kc-text); } #kc-registration { color: var(--kc-text-muted); }