/* * ALFA HR SaaS — auth pages stylesheet (login / register / forgot / reset / * 2FA / verify-email), 2026-08-16 redesign to match the rebuilt landing page. * Loads AFTER alfa-landing.css and relies on its :root tokens and .al-btn* * components (the auth carries both `alfa-landing` and `al-auth`). * Self-contained on purpose: the 630KB admin theme CSS is NOT loaded here. * Direction-safe via logical properties — one file serves RTL and LTR. * * Scope discipline: everything is namespaced under .al-auth. The Bootstrap * class names styled below (.form-control, .form-check, .alert, .row ...) * are only the ones the seven auth views actually use. */ .al-auth { display: flex; flex-direction: column; min-height: 100vh; } /* ===== Header ===== */ .al-auth-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 28px; } .al-auth-logo { display: inline-flex; align-items: center; background: #ffffff; border-radius: 14px; padding: 8px 16px; box-shadow: var(--shadow); } .al-auth-logo img { max-height: 44px; width: auto; display: block; } .al-auth-header-links { display: flex; align-items: center; gap: 18px; list-style: none; margin: 0; padding: 0; font-size: 14px; font-weight: 600; } .al-auth-header-links a { color: var(--text); transition: color var(--t); } .al-auth-header-links a:hover { color: var(--gold-2); } .al-auth-back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; font-weight: 700; } .al-auth-back:hover { color: var(--gold-2); } /* language dropdown (Bootstrap dropdown JS drives .show) */ .al-auth .drp-language { position: relative; list-style: none; } .al-auth .drp-language > a { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: 14px; font-weight: 700; padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: rgba(255, 255, 255, .03); } .al-auth .drp-language > a::after { content: "\25BE"; font-size: 10px; opacity: .7; } .al-auth .dropdown-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 170px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 8px; display: none; z-index: 50; } .al-auth .dropdown-menu.show { display: block; } .al-auth .dropdown-item { display: block; padding: 9px 14px; border-radius: 10px; color: var(--text); font-size: 14px; transition: background var(--t), color var(--t); } .al-auth .dropdown-item:hover { background: rgba(255, 255, 255, .06); color: var(--ink); } .al-auth .dropdown-item.active { background: var(--grad-gold); color: var(--navy); font-weight: 800; } /* ===== Main split card ===== */ .al-auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 28px 24px 48px; position: relative; } .al-auth-main::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 40% at 15% 8%, rgba(59, 134, 214, .12) 0%, transparent 60%), radial-gradient(40% 35% at 90% 90%, rgba(247, 148, 29, .08) 0%, transparent 60%); pointer-events: none; } .al-auth-card { position: relative; z-index: 1; display: grid; grid-template-columns: .95fr 1.05fr; width: min(1060px, 100%); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; } /* brand side panel */ .al-auth-brand { background: linear-gradient(155deg, var(--navy) 0%, #00306a 55%, #004a9a 100%); padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; gap: 26px; position: relative; overflow: hidden; } .al-auth-brand::before { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); opacity: .3; top: -140px; inset-inline-end: -90px; } .al-auth-brand > * { position: relative; z-index: 1; } /* ALFASoft Solutions parent-brand mark (2026-08-16, user request) — sits above the headline with a light float + glow-pulse. Originally gated behind prefers-reduced-motion, but the user reported the animation never showed in real Chrome/Edge (only in Playwright) — root-caused the same way as the landing page's marquee/counters: Windows "Animation effects" is OFF on this machine (confirmed via SPI_GETCLIENTAREAANIMATION), so real browsers report reduce and Playwright doesn't. Same owner call as the landing page (see alfa-landing.js/css): this is decorative brand motion, not essential UI feedback, so the gate is removed — do not reintroduce without checking with the user first. */ .al-auth-parent-logo { display: block; width: 168px; height: auto; margin-bottom: 4px; filter: drop-shadow(0 10px 26px rgba(255, 193, 7, .28)); animation: al-auth-logo-float 5s ease-in-out infinite; } @keyframes al-auth-logo-float { 0%, 100% { transform: translateY(0); filter: drop-shadow(0 10px 26px rgba(255, 193, 7, .28)); } 50% { transform: translateY(-7px); filter: drop-shadow(0 16px 34px rgba(255, 193, 7, .42)); } } .al-auth-brand h2 { color: #fff; font-size: clamp(22px, 2.4vw, 30px); font-weight: 900; line-height: 1.35; } .al-auth-brand h2 em { font-style: normal; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; } .al-auth-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .al-auth-points li { display: flex; align-items: flex-start; gap: 10px; color: rgba(255, 255, 255, .82); font-size: 14.5px; } .al-auth-points li .tick { width: 20px; height: 20px; border-radius: 50%; background: var(--grad-gold); color: var(--navy); display: grid; place-items: center; font-size: 11px; font-weight: 900; flex-shrink: 0; margin-top: 2px; } .al-auth-trust { font-size: 12.5px; color: rgba(255, 255, 255, .55); border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 18px; } /* form side */ .al-auth-card .card-body { padding: 48px 44px; } .al-auth h2, .al-auth h4 { color: var(--ink); } .al-auth .card-body > div > h2, .al-auth .card-body h2 { font-size: 24px; font-weight: 900; margin: 0 0 6px; } .al-auth-sub { color: var(--muted); font-size: 14px; margin: 0 0 26px; } .al-auth .custom-login-form { max-width: none; } /* ===== Form primitives (Bootstrap names the views already use) ===== */ .al-auth .form-group { margin-bottom: 0; } .al-auth .form-label, .al-auth label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px; } .al-auth .form-control { width: 100%; background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 12px; color: var(--ink); font-family: var(--font); font-size: 14.5px; padding: 12px 14px; transition: border-color var(--t), box-shadow var(--t); } .al-auth .form-control::placeholder { color: var(--muted); opacity: .8; } .al-auth .form-control:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(255, 193, 7, .15); } .al-auth .form-control.is-invalid { border-color: #ef6b6b; } /* Email addresses are always latin: on RTL pages keep the VISUAL right alignment but type in natural LTR character order (standard Arabic-UX compromise — cursor/caret behave correctly while the field still sits flush with the RTL layout) */ html[dir="rtl"] .al-auth input[type="email"] { direction: ltr; text-align: right; } /* Chrome/WebKit autofill forces a light background that breaks the dark fields — the inset-shadow trick is the only reliable override */ .al-auth input:-webkit-autofill, .al-auth input:-webkit-autofill:hover, .al-auth input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--bg-2) inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); transition: background-color 9999s ease-in-out 0s; } .al-auth select.form-control { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(14px) 55%, calc(14px + 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat; } html[dir="ltr"] .al-auth select.form-control { background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; } .al-auth .input-group { display: flex; align-items: stretch; } .al-auth .input-group .form-control { flex: 1; border-start-end-radius: 0; border-end-end-radius: 0; } .al-auth .input-group .btn { border: 1px solid var(--border-strong); border-inline-start: 0; background: var(--bg-2); color: var(--muted); border-start-end-radius: 12px; border-end-end-radius: 12px; border-start-start-radius: 0; border-end-start-radius: 0; padding: 0 16px; cursor: pointer; font-size: 16px; transition: color var(--t); } .al-auth .input-group .btn:hover { color: var(--gold-2); } .al-auth .form-check { display: flex; align-items: center; gap: 8px; } .al-auth .form-check-input { appearance: none; width: 18px; height: 18px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--bg-2); cursor: pointer; flex-shrink: 0; display: grid; place-items: center; transition: background var(--t), border-color var(--t); margin: 0; } .al-auth .form-check-input:checked { background: var(--grad-gold); border-color: transparent; } .al-auth .form-check-input:checked::after { content: "\2713"; font-size: 11px; font-weight: 900; color: var(--navy); } .al-auth .form-check-label { margin: 0; font-weight: 600; color: var(--text); cursor: pointer; } /* buttons: map the views' .btn-primary onto the landing gold CTA */ .al-auth .btn { font-family: var(--font); cursor: pointer; } .al-auth .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 999px; font-weight: 800; font-size: 15px; border: none; color: var(--navy); background: var(--grad-gold); box-shadow: var(--shadow-gold); transition: transform var(--t), box-shadow var(--t); } .al-auth .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 54px rgba(247, 148, 29, .42); } .al-auth .btn-link { background: none; border: none; color: var(--gold-2); font-weight: 700; font-size: 14px; cursor: pointer; } .al-auth .btn-link:hover { text-decoration: underline; } .al-auth a { color: var(--gold-2); font-weight: 700; } .al-auth a:hover { color: var(--gold); } .al-auth .form-check-label { color: var(--text); } /* alerts */ .al-auth .alert { border-radius: 12px; padding: 12px 16px; font-size: 13.5px; font-weight: 600; margin-bottom: 18px; border: 1px solid transparent; } .al-auth .alert-warning { background: rgba(255, 193, 7, .1); color: var(--gold-2); border-color: rgba(255, 193, 7, .3); } .al-auth .alert-primary, .al-auth .alert-success { background: rgba(23, 178, 106, .12); color: #4bd598; border-color: rgba(23, 178, 106, .3); } .al-auth .text-danger, .al-auth .error { color: #ef8f8f; } .al-auth .text-muted { color: var(--muted); } .al-auth small { font-size: 12.5px; } /* minimal grid + utilities the auth views actually use */ .al-auth .row { display: flex; flex-wrap: wrap; margin-inline: -8px; } .al-auth .row > [class*="col"] { padding-inline: 8px; flex: 1 0 100%; max-width: 100%; } @media (min-width: 768px) { .al-auth .row > .col-md-6 { flex: 0 0 50%; max-width: 50%; } } .al-auth .d-grid { display: grid; } .al-auth .d-flex { display: flex; } .al-auth .d-block { display: block; } .al-auth .d-inline-block { display: inline-block; } .al-auth .flex-wrap { flex-wrap: wrap; } .al-auth .align-items-center { align-items: center; } .al-auth .justify-content-between { justify-content: space-between; } .al-auth .justify-content-center { justify-content: center; } .al-auth .text-center { text-align: center; } .al-auth .mx-auto { margin-inline: auto; } .al-auth .w-50 { width: 50%; } .al-auth .mb-1 { margin-bottom: 4px; } .al-auth .mb-2 { margin-bottom: 8px; } .al-auth .mb-3 { margin-bottom: 16px; } .al-auth .mb-4 { margin-bottom: 24px; } .al-auth .mt-2 { margin-top: 8px; } .al-auth .mt-3 { margin-top: 16px; } .al-auth .my-4 { margin-block: 24px; } .al-auth .px-5 { padding-inline: 32px; } /* ===== Footer ===== */ .al-auth-footer { text-align: center; padding: 20px 24px 26px; color: var(--muted); font-size: 13px; } /* ===== Toasts (show_toastr / Bootstrap toast JS) ===== */ .al-auth .toast { display: none; max-width: 360px; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); } .al-auth .toast.show, .al-auth .toast.showing { display: block; } .al-auth .toast .d-flex { display: flex; align-items: center; } .al-auth .toast-body { padding: 14px 16px; font-size: 14px; flex: 1; } .al-auth .toast.bg-success, .al-auth .toast.text-bg-success { background: #17b26a; color: #fff; } .al-auth .toast.bg-danger, .al-auth .toast.text-bg-danger { background: #d64545; color: #fff; } .al-auth .btn-close { background: none; border: none; color: inherit; opacity: .8; font-size: 16px; padding: 8px 12px; cursor: pointer; } .al-auth .btn-close::before { content: "\2715"; } .al-auth .position-fixed { position: fixed; } .al-auth .top-0 { top: 0; } .al-auth .end-0 { inset-inline-end: 0; } .al-auth .p-3 { padding: 16px; } /* ===== select2 dark skin (register's country picker) ===== */ .al-auth .select2-container--default .select2-selection--single { background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 12px; height: 46px; display: flex; align-items: center; padding: 0 14px; } .al-auth .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink); line-height: 46px; padding: 0; } .al-auth .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; } .al-auth .select2-dropdown { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; color: var(--ink); } .al-auth .select2-container--default .select2-search--dropdown .select2-search__field { background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: 8px; color: var(--ink); } .al-auth .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--primary); } .al-auth .select2-results__option { font-size: 14px; } /* Country flag + name (2026-08-16, user report + screenshot): alfa-landing.css's global `img { display: block }` reset made the flag stack ABOVE the country name instead of sitting beside it, since the wrapping built in register.blade.php's formatCountry() wasn't a flex container — display:block is fine on a flex ITEM, so making the wrapper flex fixes both the closed selector and every dropdown row without touching the global reset. */ .al-auth .al-country-opt { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; } .al-auth .al-country-opt img { flex: none; width: 20px; height: auto; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); } .al-auth .al-country-opt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .al-auth .select2-selection__rendered .al-country-opt { line-height: normal; vertical-align: middle; } /* "Default Language" picker (2026-08-16, user report + screenshot): resources/views/partials/language-flag-picker.blade.php is a shared hand-rolled widget whose light-mode-white styling is the default, overridden only by `body.theme-dark` (the ADMIN theme's dark-mode class, from its own embedded