/* ========================================================================== Hire Solution - Authentication pages (Login / Register) Split screen: database driven visual panel + form panel ========================================================================== */ /* -------------------------------------------------------------------------- Split shell The public header is fixed. --auth-header-h is its measured height (see js/auth-header-offset.js); the fallback matches the theme before the script runs. MainLayout also pads .public-page-content, but only when carries .public-layout - which is set from JS and therefore never applies to the statically rendered Login page. Neutralise it and drive the offset from the single variable so there is no gap on either page. -------------------------------------------------------------------------- */ :root { --auth-header-h: 90px; } .page-content:has(> .auth-split) { padding-top: 0 !important; } .auth-split { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 54%); min-height: calc(100vh - var(--auth-header-h)); min-height: calc(100dvh - var(--auth-header-h)); margin-top: var(--auth-header-h); background: #ffffff; } /* No slideshow image stored for this page: drop the visual column rather than leave an empty transparent panel beside the form. */ .auth-split:not(:has(.auth-visual)) { grid-template-columns: minmax(0, 1fr); } .auth-split:not(:has(.auth-visual)) .auth-split-visual { display: none; } .auth-split *, .auth-split *::before, .auth-split *::after { box-sizing: border-box; } .auth-split-visual { position: relative; min-height: 100%; } .auth-split-form { display: flex; align-items: center; justify-content: center; padding: 3rem 2.5rem; background: #ffffff; } .auth-form-shell { width: 100%; max-width: 27.5rem; } /* -------------------------------------------------------------------------- Visual (left) panel - image only, fully transparent when none is stored -------------------------------------------------------------------------- */ .auth-visual { position: relative; display: block; width: 100%; height: 100%; min-height: 100%; overflow: hidden; background: transparent; } .auth-visual-image { width: 100%; height: 100%; min-height: 100%; display: block; object-fit: cover; object-position: center; background: transparent; } /* -------------------------------------------------------------------------- Form panel -------------------------------------------------------------------------- */ .auth-form-head { margin-bottom: 1.9rem; } .auth-form-title { margin: 0 0 .4rem; font-size: clamp(1.7rem, 2.2vw, 2.05rem); font-weight: 800; letter-spacing: -.025em; color: #0f172a; } .auth-form-sub { margin: 0; color: #64748b; font-size: .97rem; } .auth-form { display: grid; gap: 1.15rem; } .auth-fieldset { display: grid; gap: 1.15rem; border: 0; margin: 0; padding: 0; min-width: 0; } .auth-field { display: grid; gap: .45rem; min-width: 0; } .auth-label { font-size: .83rem; font-weight: 700; color: #334155; letter-spacing: .01em; } .auth-label-optional { font-weight: 500; color: #94a3b8; } .auth-control { position: relative; display: block; } .auth-control-icon { position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); color: #94a3b8; font-size: .95rem; pointer-events: none; line-height: 1; } .auth-input { width: 100%; height: 3.1rem; padding: 0 1rem; border: 1px solid #dbe3ef; border-radius: .85rem; background: #f8fafc; color: #0f172a; font-size: .95rem; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } .auth-input.has-icon { padding-left: 2.75rem; } .auth-input.has-action { padding-right: 3rem; } .auth-input::placeholder { color: #9aa7b8; } .auth-input:focus { outline: none; background: #ffffff; border-color: #1967d2; box-shadow: 0 0 0 4px rgba(25,103,210,.14); } .auth-select { width: 100%; height: 3.1rem; padding: 0 2.5rem 0 1rem; border: 1px solid #dbe3ef; border-radius: .85rem; background-color: #f8fafc; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.41 0 6 4.59 10.59 0 12 1.41 6 7.41 0 1.41z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; color: #0f172a; font-size: .95rem; appearance: none; -webkit-appearance: none; -moz-appearance: none; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } .auth-select:focus { outline: none; background-color: #ffffff; border-color: #1967d2; box-shadow: 0 0 0 4px rgba(25,103,210,.14); } .auth-reveal { position: absolute; top: 50%; right: .55rem; transform: translateY(-50%); width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: .6rem; background: transparent; color: #64748b; cursor: pointer; transition: background .2s ease, color .2s ease; } .auth-reveal:hover { background: #eef2f7; color: #1967d2; } .auth-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; } .auth-row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .auth-check { display: inline-flex; align-items: center; gap: .55rem; margin: 0; cursor: pointer; user-select: none; } .auth-check-input { position: absolute; opacity: 0; width: 1.15rem; height: 1.15rem; margin: 0; cursor: pointer; } .auth-check-box { width: 1.15rem; height: 1.15rem; flex: 0 0 1.15rem; border: 1.5px solid #cbd5e1; border-radius: .35rem; background: #ffffff; display: inline-block; position: relative; transition: background .18s ease, border-color .18s ease; } .auth-check-input:checked + .auth-check-box { background: #1967d2; border-color: #1967d2; } .auth-check-input:checked + .auth-check-box::after { content: ""; position: absolute; left: .33rem; top: .12rem; width: .34rem; height: .6rem; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .auth-check-input:focus-visible + .auth-check-box { box-shadow: 0 0 0 3px rgba(25,103,210,.2); } .auth-check-block { display: flex; align-items: flex-start; gap: .6rem; } .auth-check-block .auth-check-box { margin-top: .12rem; } .auth-check-text { font-size: .88rem; color: #475569; line-height: 1.5; } .auth-check-text a { color: #1967d2; font-weight: 600; text-decoration: none; } .auth-check-text a:hover { text-decoration: underline; } .auth-link { font-size: .88rem; font-weight: 600; color: #1967d2; text-decoration: none; } .auth-link:hover { text-decoration: underline; } .auth-submit { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; height: 3.15rem; border: 0; border-radius: .85rem; background: linear-gradient(135deg, #1967d2 0%, #2f80ed 100%); color: #ffffff; font-size: .98rem; font-weight: 700; letter-spacing: .01em; cursor: pointer; box-shadow: 0 12px 26px rgba(25,103,210,.28); transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; } .auth-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(25,103,210,.34); } .auth-submit:disabled { opacity: .72; cursor: progress; } .auth-spinner { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #ffffff; display: inline-block; animation: auth-spin .7s linear infinite; } .auth-spinner-lg { width: 1.6rem; height: 1.6rem; border-width: 3px; border-color: rgba(25,103,210,.25); border-top-color: #1967d2; } @keyframes auth-spin { to { transform: rotate(360deg); } } .auth-alert { position: relative; border-radius: .85rem; padding: .85rem 1rem; font-size: .88rem; line-height: 1.6; } .auth-alert ul { margin: .35rem 0 0; padding-left: 1.1rem; } .auth-alert-close { position: absolute; top: .5rem; right: .6rem; width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: .5rem; background: transparent; color: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer; opacity: .6; transition: opacity .2s ease, background .2s ease; } .auth-alert-close:hover { opacity: 1; background: rgba(15, 23, 42, .06); } .auth-alert-error { background: #fef2f2; border: 1px solid #fecaca; color: #b42318; } .auth-alert-warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; } .auth-alert-warning i { margin-right: .4rem; } .auth-error { font-size: .8rem; color: #dc2626; } .auth-switch { margin: 1.75rem 0 0; text-align: center; font-size: .92rem; color: #64748b; } .auth-switch a { color: #1967d2; font-weight: 700; text-decoration: none; } .auth-switch a:hover { text-decoration: underline; } /* Password strength meter */ .auth-strength { display: grid; gap: .4rem; } .auth-strength-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .78rem; color: #64748b; } .auth-strength-value { font-weight: 700; } .auth-strength-value.is-weak { color: #dc2626; } .auth-strength-value.is-fair { color: #d97706; } .auth-strength-value.is-good { color: #0284c7; } .auth-strength-value.is-strong { color: #059669; } .auth-strength-track { height: 6px; border-radius: 999px; background: #e8edf5; overflow: hidden; } .auth-strength-bar { height: 100%; border-radius: 999px; transition: width .28s ease, background .28s ease; } .auth-strength-bar.is-weak { background: #dc2626; } .auth-strength-bar.is-fair { background: #f59e0b; } .auth-strength-bar.is-good { background: #0ea5e9; } .auth-strength-bar.is-strong { background: #059669; } /* Busy overlay */ .auth-busy { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.35); backdrop-filter: blur(3px); } .auth-busy-card { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.6rem 2rem; border-radius: 1rem; background: #ffffff; box-shadow: 0 24px 60px rgba(15,23,42,.25); color: #0f172a; font-size: .95rem; } .auth-busy-note { color: #64748b; font-size: .82rem; } /* Bootstrap alert + Blazor validation overrides inside the auth shell */ .auth-form-shell .alert, .auth-form-shell .validation-errors { border-radius: .85rem; font-size: .88rem; margin-bottom: 1.15rem; } .auth-form-shell .validation-errors { color: #b42318; } .auth-form-shell .validation-errors ul { margin: 0; padding-left: 1.1rem; } .auth-form-shell .auth-alert:empty, .auth-form-shell .validation-errors:empty, .auth-form-shell .validation-errors:has(ul:empty) { display: none; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 1199.98px) { .auth-split { grid-template-columns: minmax(0, 42%) minmax(0, 58%); } } @media (max-width: 991.98px) { .auth-split { grid-template-columns: 1fr; min-height: 0; align-content: start; } .auth-split-visual { min-height: 0; } .auth-visual, .auth-visual-image { height: 15rem; min-height: 15rem; } .auth-split-form { align-items: flex-start; padding: 2rem 1.25rem 2.75rem; background: #ffffff; } /* Only overlap the image when one is actually rendered. */ .auth-split:has(.auth-visual) .auth-split-form { border-radius: 1.5rem 1.5rem 0 0; margin-top: -1.25rem; position: relative; z-index: 2; } .auth-form-shell { max-width: 34rem; margin: 0 auto; } .auth-form-head { margin-bottom: 1.5rem; } } @media (max-width: 575.98px) { .auth-split-form { padding: 1.75rem 1.1rem 2.5rem; } .auth-form-title { font-size: 1.5rem; } .auth-grid-2 { grid-template-columns: minmax(0, 1fr); gap: 1.15rem; } .auth-row-between { gap: .6rem; } .auth-visual, .auth-visual-image { height: 11rem; min-height: 11rem; } }