/* ============================================================================= CanIPhish authentication pages Loaded by Views/Shared/_AuthLayout.cshtml after the Front marketing template (assets/css/theme.min.css, Bootstrap 4.5.3) and after dist/css/modal-platform.css. The template is shared with the marketing, documentation and launchpad layouts, so it is never edited: every rule here is prefixed with .au-body (the class the auth layout puts on ) and out-specifies the template's own .form-control / .btn / .card rules by that one class. Pages: Login, Signup, SignupConfirm, Recover, RecoverConfirm, SSO and the OAuth consent page (Views/McpOAuth/Authorize.cshtml). White-label tenants swap the logo, favicon and company name, so the ground and card stay brand-neutral: a logo slot, the form, nothing else. Pieces: the ground and card (.auth-card), titles (.au-title/.au-sub/.au-note), fields (.form-control incl. select, .au-password with .au-eye, .au-code for one-time codes), buttons (.au-btn--primary/--secondary; .btn on the consent page), the divider, footer links, the strength meter (.au-meter/.au-hint driven by auMeter() in dist/js/auth-platform.js), the custom checkbox, the MFA/SSO modal content and the SSO spinner. ========================================================================== */ .au-body { --au-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --au-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --au-ink: #1f262d; --au-ink-2: #3a4452; --au-ink-3: #5b6573; --au-ink-4: #8b95a5; --au-ground: #f4f6f9; --au-surface: #ffffff; --au-surface-2: #f6f8fb; --au-line: #e3e8ef; --au-line-2: #d3dae4; --au-action: #1f73ca; --au-action-hover: #1a63ad; --au-ring: rgba(31, 115, 202, .18); --au-bad: #b42318; --au-bad-line: #d92d20; --au-bad-bg: #fdecec; --au-good: #1e7a45; --au-good-bg: #e9f6ee; --au-good-line: #c4e6d1; --au-warn: #b8801c; } /* Ground and card ------------------------------------------------------------ */ body.au-body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--au-ground); color: var(--au-ink-2); font-family: var(--au-font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } .au-body .au-main { width: 100%; } .au-body .auth-card { width: 100%; max-width: 420px; margin: 0 auto; } .au-body .auth-card .card { border: 1px solid var(--au-line); border-radius: 16px; background: var(--au-surface); box-shadow: 0 18px 50px -12px rgba(16, 24, 40, .16), 0 1px 2px rgba(16, 24, 40, .05); } .au-body .auth-card .card-body { padding: 28px 28px 24px; } .au-body .au-logo { display: block; text-align: center; margin: 0 0 5px; } .au-body .au-logo img { max-height: 60px; max-width: 180px; width: auto; height: auto; } /* the 180x60 box the old layout used */ /* Headings, copy, notes ------------------------------------------------------ */ .au-body .au-title { margin: 0 0 4px; color: var(--au-ink); font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; text-align: center; text-wrap: balance; } .au-body .au-sub { margin: 0 0 20px; color: var(--au-ink-3); font-size: 13.5px; line-height: 1.5; text-align: center; } .au-body .au-sub b, .au-body .au-sub strong { color: var(--au-ink); font-weight: 600; } .au-body .au-sub--lead { font-size: 15px; color: var(--au-ink-2); margin-bottom: 22px; } /* the one-line opener on sign-in */ .au-body .au-note { margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--au-line); border-radius: 8px; background: var(--au-surface-2); color: var(--au-ink-2); font-size: 13px; line-height: 1.45; } .au-body .au-note--good { border-color: var(--au-good-line); background: var(--au-good-bg); color: var(--au-good); } .au-body .au-note--bad { border-color: #f4c7c3; background: var(--au-bad-bg); color: var(--au-bad); } /* Labels and fields ---------------------------------------------------------- */ .au-body .form-group { margin-bottom: 16px; } .au-body .au-label, .au-body .input-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 6px; color: var(--au-ink-2); font-size: 13px; font-weight: 500; line-height: 1.4; } .au-body .au-label a { color: var(--au-action); font-size: 12.5px; font-weight: 500; text-decoration: none; border: 0; white-space: nowrap; } .au-body .au-label a:hover { text-decoration: underline; } .au-body .form-control { height: 42px; padding: 0 12px; border: 1px solid var(--au-line-2); border-radius: 8px; background: var(--au-surface); box-shadow: none; color: var(--au-ink); font-family: var(--au-font); font-size: 14px; line-height: 1.5; transition: border-color .15s ease, box-shadow .15s ease; } .au-body .form-control::placeholder { color: var(--au-ink-4); opacity: 1; } .au-body .form-control:focus { border-color: var(--au-action); box-shadow: 0 0 0 3px var(--au-ring); outline: none; } .au-body .form-control:disabled, .au-body .form-control[readonly] { background: var(--au-surface-2); color: var(--au-ink-3); } .au-body select.form-control { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 34px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b95a5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; } .au-body .au-hint { margin: 6px 0 0; color: var(--au-ink-4); font-size: 12px; line-height: 1.45; } /* Validation: the same Bootstrap mechanism as before (needs-validation + was-validated), but the message is an inline line under the field rather than the template's floating pink bubble. */ .au-body .invalid-feedback, .au-body .invalid-tooltip { position: static; display: none; margin: 6px 0 0; padding: 0; background: none; border-radius: 0; color: var(--au-bad); font-size: 12.5px; line-height: 1.45; } .au-body .was-validated .form-control:invalid, .au-body .form-control.is-invalid { border-color: var(--au-bad-line); padding-right: 12px; background-image: none; } .au-body .was-validated .form-control:invalid:focus, .au-body .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(217, 45, 32, .15); } .au-body .was-validated .form-control:invalid ~ .invalid-feedback, .au-body .was-validated .form-control:invalid ~ .invalid-tooltip, .au-body .form-control.is-invalid ~ .invalid-feedback, .au-body .was-validated .custom-control-input:invalid ~ .invalid-feedback { display: block; } .au-body .was-validated .form-control:valid, .au-body .form-control.is-valid { border-color: var(--au-line-2); background-image: none; padding-right: 12px; } .au-body .was-validated .form-control:valid:focus { border-color: var(--au-action); box-shadow: 0 0 0 3px var(--au-ring); } /* Password field with a visibility toggle ------------------------------------ */ .au-body .au-password { position: relative; } .au-body .au-password .form-control { padding-right: 44px; } .au-body .au-eye { position: absolute; top: 0; right: 0; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 0 8px 8px 0; background: transparent; color: var(--au-ink-4); cursor: pointer; transition: color .15s ease; } .au-body .au-eye:hover { color: var(--au-ink); } .au-body .au-eye:focus { outline: none; } .au-body .au-eye:focus-visible { box-shadow: inset 0 0 0 2px var(--au-ring); color: var(--au-ink); } .au-body .au-eye svg { width: 18px; height: 18px; } .au-body .au-eye [hidden] { display: none; } /* One-time code field --------------------------------------------------------- */ .au-body .form-control.au-code { height: 48px; font-size: 20px; font-weight: 600; letter-spacing: .32em; text-align: center; font-variant-numeric: tabular-nums; } .au-body .form-control.au-code::placeholder { letter-spacing: .32em; font-weight: 400; color: #c3cad4; } /* Buttons ---------------------------------------------------------------------- */ .au-body .au-btn, .au-body .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; height: 42px; padding: 0 16px; border: 1px solid transparent; border-radius: 8px; font-family: var(--au-font); font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; user-select: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; } .au-body .au-btn { width: 100%; } /* The template gives every svg a negative bottom margin, which drops a flex-centred icon by half of it; the icons here carry no margin at all. */ .au-body .au-btn svg, .au-body .au-eye svg { margin: 0; vertical-align: middle; } .au-body .au-btn svg { width: 16px; height: 16px; flex: 0 0 auto; } .au-body .au-btn--primary, .au-body .btn-primary { background: var(--au-action); border-color: var(--au-action); color: #fff; } .au-body .au-btn--primary:hover, .au-body .btn-primary:hover, .au-body .btn-primary:not(:disabled):not(.disabled):active { background: var(--au-action-hover); border-color: var(--au-action-hover); color: #fff; } .au-body .au-btn--primary:focus-visible, .au-body .btn-primary:focus { outline: none; box-shadow: 0 0 0 3px var(--au-ring); } .au-body .au-btn--secondary, .au-body .btn-outline-primary, .au-body .btn-secondary { background: var(--au-surface); border-color: var(--au-line-2); color: var(--au-ink); } .au-body .au-btn--secondary:hover, .au-body .btn-outline-primary:hover, .au-body .btn-secondary:hover { background: var(--au-surface-2); border-color: #bfc8d4; color: var(--au-ink); } .au-body .au-btn--secondary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--au-ring); } .au-body .au-btn:disabled, .au-body .btn:disabled { opacity: .6; cursor: default; } .au-body .au-btn .fa-spinner { font-size: 14px; } .au-body .transition-3d-hover:hover, .au-body .transition-3d-hover:focus { transform: none; } /* Divider and footer links ----------------------------------------------------- */ .au-body .au-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--au-ink-4); font-size: 12.5px; } .au-body .au-divider::before, .au-body .au-divider::after { content: ""; flex: 1; border-top: 1px solid var(--au-line); } .au-body .au-foot { margin: 18px 0 0; color: var(--au-ink-3); font-size: 13px; text-align: center; } .au-body .au-foot a { color: var(--au-action); font-weight: 500; text-decoration: none; border: 0; } .au-body .au-foot a:hover { text-decoration: underline; } .au-body .au-foot--back { margin-top: 14px; } .au-body .au-foot--back a { color: var(--au-ink-3); font-weight: 500; } .au-body .au-foot--back a:hover { color: var(--au-ink); } /* Password strength meter ----------------------------------------------------- */ .au-body .au-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 8px 0 0; } .au-body .au-meter i { display: block; height: 4px; border-radius: 2px; background: var(--au-line); transition: background-color .15s ease; } .au-body .au-meter--weak i.on { background: var(--au-bad-line); } .au-body .au-meter--fair i.on { background: var(--au-warn); } .au-body .au-meter--good i.on, .au-body .au-meter--strong i.on { background: var(--au-good); } .au-body .au-hint--weak { color: var(--au-bad); } .au-body .au-hint--fair { color: var(--au-warn); } .au-body .au-hint--good, .au-body .au-hint--strong { color: var(--au-good); } /* Checkbox (terms) ------------------------------------------------------------ */ .au-body .custom-control { padding-left: 28px; min-height: 20px; } .au-body .custom-control-label { color: var(--au-ink-2); font-size: 13px; line-height: 1.5; cursor: pointer; } .au-body .custom-control-label a { color: var(--au-action); text-decoration: none; border: 0; font-weight: 500; } .au-body .custom-control-label a:hover { text-decoration: underline; } .au-body .custom-control-label::before { top: 1px; left: -28px; width: 18px; height: 18px; border: 1.5px solid #b8c1cd; border-radius: 5px; background: var(--au-surface); box-shadow: none; } .au-body .custom-control-label::after { top: 1px; left: -28px; width: 18px; height: 18px; background-size: 11px; } .au-body .custom-control-input:checked ~ .custom-control-label::before { background: var(--au-action); border-color: var(--au-action); } .au-body .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px var(--au-ring); } .au-body .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5'/%3E%3C/svg%3E"); } .au-body .was-validated .custom-control-input:invalid ~ .custom-control-label::before { border-color: var(--au-bad-line); } .au-body .was-validated .custom-control-input:invalid ~ .custom-control-label { color: var(--au-ink-2); } /* MFA and SSO modals: chrome comes from modal-platform.css, this is the content */ .au-body .modal-dialog { max-width: 480px; } .au-body .modal-body { padding: 22px 28px; color: var(--au-ink-2); font-size: 14px; } .au-body .modal-body .au-sub { text-align: left; } .au-body .modal-body .form-group:last-child { margin-bottom: 0; } .au-body .au-steps { margin: 0 0 6px; padding-left: 20px; color: var(--au-ink-2); font-size: 13.5px; line-height: 1.5; } .au-body .au-steps li { margin-bottom: 4px; } .au-body .au-steps a { color: var(--au-action); text-decoration: none; } .au-body .au-steps a:hover { text-decoration: underline; } .au-body .au-qr { display: flex; justify-content: center; margin: 14px 0; } .au-body .au-qr img, .au-body .au-qr canvas { border: 1px solid var(--au-line); border-radius: 10px; padding: 8px; background: #fff; } .au-body .au-manual { color: var(--au-ink-3); font-size: 12.5px; } .au-body .au-manual code { display: block; margin-top: 6px; padding: 8px 10px; border-radius: 6px; background: var(--au-surface-2); color: var(--au-ink); font: 500 12.5px var(--au-mono); word-break: break-all; } .au-body .au-inline { display: flex; gap: 10px; align-items: flex-start; } .au-body .au-inline .form-control { flex: 1 1 auto; } .au-body .au-inline .au-btn { width: auto; flex: 0 0 auto; padding: 0 18px; } .au-body .au-inline .au-code { height: 42px; font-size: 17px; } .au-body .te-modal-footer .te-btn-save, .au-body .te-modal-footer .te-btn-close { font-family: var(--au-font); } .au-body .modal-dialog-scrollable .te-modal-footer { flex-shrink: 0; } /* what Bootstrap gives .modal-footer */ .au-body .au-info { margin-left: 4px; color: var(--au-ink-4); font-size: 12px; cursor: help; } .au-body .au-info:hover { color: var(--au-action); } /* Toasts: the platform skin drops the stack 80px to clear the app's fixed topbar (toastr-platform.css). There is no topbar here, so it sits at the top edge. */ .au-body .toast-container.toast-top-right, .au-body .toast-container.toast-top-left, .au-body .toast-container.toast-top-center { top: 16px; } /* SSO landing ------------------------------------------------------------------ */ .au-body .au-status { text-align: center; padding: 8px 0 4px; } .au-body .au-spinner { width: 30px; height: 30px; margin: 0 auto 16px; border: 3px solid var(--au-line); border-top-color: var(--au-action); border-radius: 50%; animation: au-spin .8s linear infinite; } @keyframes au-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .au-body .au-spinner { animation-duration: 2s; } } /* Phones ------------------------------------------------------------------------ */ @media (max-width: 480px) { body.au-body { padding: 12px; align-items: flex-start; } .au-body .auth-card .card { border-radius: 14px; } .au-body .auth-card .card-body { padding: 22px 20px 20px; } .au-body .au-inline { flex-direction: column; } .au-body .au-inline .au-btn { width: 100%; } }