/* ============================================================================ VYTALGUARD PREMIUM MULTI-TENANT AUTHENTICATION Enterprise Tenant-Aware Login Design System ============================================================================ */ /* ============================================================================ 1. DESIGN TOKENS Tenant JavaScript may override these variables on or . ============================================================================ */ :root{ color-scheme:light; --auth-primary-50:#eff6ff; --auth-primary-100:#dbeafe; --auth-primary-200:#bfdbfe; --auth-primary-300:#93c5fd; --auth-primary-400:#60a5fa; --auth-primary-500:#3b82f6; --auth-primary-600:#2563eb; --auth-primary-700:#1d4ed8; --auth-primary-800:#1e40af; --auth-primary-900:#1e3a8a; --auth-primary-950:#172554; --auth-secondary-50:#eef2ff; --auth-secondary-100:#e0e7ff; --auth-secondary-200:#c7d2fe; --auth-secondary-300:#a5b4fc; --auth-secondary-400:#818cf8; --auth-secondary-500:#6366f1; --auth-secondary-600:#4f46e5; --auth-secondary-700:#4338ca; --auth-secondary-800:#3730a3; --auth-secondary-900:#312e81; --auth-neutral-0:#ffffff; --auth-neutral-25:#fcfdff; --auth-neutral-50:#f8fafc; --auth-neutral-100:#f1f5f9; --auth-neutral-200:#e2e8f0; --auth-neutral-300:#cbd5e1; --auth-neutral-400:#94a3b8; --auth-neutral-500:#64748b; --auth-neutral-600:#475569; --auth-neutral-700:#334155; --auth-neutral-800:#1e293b; --auth-neutral-900:#0f172a; --auth-neutral-950:#020617; --auth-success-50:#ecfdf5; --auth-success-100:#d1fae5; --auth-success-500:#10b981; --auth-success-600:#059669; --auth-success-700:#047857; --auth-warning-50:#fffbeb; --auth-warning-100:#fef3c7; --auth-warning-500:#f59e0b; --auth-warning-600:#d97706; --auth-danger-50:#fef2f2; --auth-danger-100:#fee2e2; --auth-danger-500:#ef4444; --auth-danger-600:#dc2626; --auth-danger-700:#b91c1c; --primary:var(--auth-primary-600); --primary-dark:var(--auth-primary-700); --secondary:var(--auth-secondary-600); --tenant-primary:var(--primary); --tenant-primary-hover:var(--primary-dark); --tenant-secondary:var(--secondary); --tenant-accent:#8b5cf6; --tenant-success:var(--auth-success-600); --tenant-warning:var(--auth-warning-500); --tenant-danger:var(--auth-danger-600); --tenant-login-background: linear-gradient(135deg,#061630 0%,#112b57 52%,#07152d 100%); --tenant-login-position:center center; --tenant-login-size:cover; --tenant-login-overlay-start:rgba(2,6,23,.72); --tenant-login-overlay-middle:rgba(8,20,48,.42); --tenant-login-overlay-end:rgba(15,23,42,.3); --auth-page-bg:#061126; --auth-card-bg:rgba(255,255,255,.84); --auth-card-bg-strong:rgba(255,255,255,.96); --auth-card-border:rgba(255,255,255,.58); --auth-card-highlight:rgba(255,255,255,.78); --auth-card-shadow: 0 30px 72px rgba(2,6,23,.34), 0 12px 30px rgba(37,99,235,.16), 0 3px 10px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.82); --auth-card-shadow-hover: 0 36px 82px rgba(2,6,23,.38), 0 16px 38px rgba(37,99,235,.2), 0 4px 12px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.88); --auth-surface:rgba(255,255,255,.58); --auth-surface-hover:rgba(255,255,255,.76); --auth-surface-strong:#ffffff; --auth-text:var(--auth-neutral-900); --auth-text-secondary:var(--auth-neutral-600); --auth-text-muted:var(--auth-neutral-500); --auth-text-soft:var(--auth-neutral-400); --auth-text-inverse:#ffffff; --auth-border:rgba(100,116,139,.28); --auth-border-strong:rgba(71,85,105,.46); --auth-border-light:rgba(255,255,255,.55); --auth-focus-ring:rgba(37,99,235,.16); --auth-primary-shadow:rgba(37,99,235,.3); --auth-secondary-shadow:rgba(79,70,229,.28); --auth-glow-primary:rgba(37,99,235,.28); --auth-glow-secondary:rgba(99,102,241,.24); --auth-glow-accent:rgba(139,92,246,.2); --auth-font: Inter, Manrope, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --auth-display-font: Manrope, Inter, ui-sans-serif, system-ui, sans-serif; --auth-radius-xs:6px; --auth-radius-sm:10px; --auth-radius-md:14px; --auth-radius-lg:20px; --auth-radius-xl:26px; --auth-radius-card:28px; --auth-radius-pill:999px; --auth-card-width:410px; --auth-card-padding:28px; --auth-input-height:54px; --auth-button-height:50px; --auth-blur:22px; --auth-transition-fast:160ms; --auth-transition-normal:260ms; --auth-transition-slow:520ms; --auth-ease:cubic-bezier(.22,1,.36,1); --auth-ease-standard:cubic-bezier(.4,0,.2,1); --auth-z-background:-2; --auth-z-decoration:-1; --auth-z-content:1; } /* ============================================================================ 2. OPTIONAL TENANT MODES ============================================================================ */ html[data-organization-type="healthcare"]{ --tenant-login-background:url("/assets/images/LoginBackground.png"); } html[data-organization-type="education"]{ --tenant-login-background: radial-gradient(circle at 20% 18%,rgba(14,165,233,.34),transparent 34%), linear-gradient(135deg,#082f49 0%,#164e63 48%,#312e81 100%); } html[data-organization-type="ngo"], html[data-organization-type="religious"]{ --tenant-login-background: radial-gradient(circle at 78% 20%,rgba(45,212,191,.28),transparent 32%), linear-gradient(135deg,#052e2b 0%,#134e4a 50%,#172554 100%); } html[data-organization-type="government"], html[data-organization-type="financial"]{ --tenant-login-background: radial-gradient(circle at 18% 82%,rgba(234,179,8,.18),transparent 30%), linear-gradient(135deg,#172554 0%,#1e3a8a 50%,#292524 100%); } html[data-organization-type="hospitality"], html[data-organization-type="retail"]{ --tenant-login-background: radial-gradient(circle at 80% 22%,rgba(244,114,182,.22),transparent 34%), linear-gradient(135deg,#312e81 0%,#581c87 48%,#0f172a 100%); } html[data-organization-type="company"], html[data-organization-type="manufacturing"], html[data-organization-type="professional_services"]{ --tenant-login-background: radial-gradient(circle at 82% 78%,rgba(59,130,246,.26),transparent 34%), linear-gradient(135deg,#0f172a 0%,#1e3a5f 52%,#111827 100%); } html[data-color-mode="dark"]{ color-scheme:dark; --auth-card-bg:rgba(10,23,40,.86); --auth-card-bg-strong:rgba(14,29,48,.97); --auth-card-border:rgba(148,163,184,.22); --auth-card-highlight:rgba(255,255,255,.12); --auth-card-shadow: 0 42px 110px rgba(0,0,0,.5), 0 20px 46px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.1); --auth-card-shadow-hover: 0 50px 125px rgba(0,0,0,.58), 0 24px 56px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.12); --auth-surface:rgba(15,32,52,.66); --auth-surface-hover:rgba(20,41,65,.82); --auth-surface-strong:#10243a; --auth-text:#f8fafc; --auth-text-secondary:#cbd5e1; --auth-text-muted:#94a3b8; --auth-text-soft:#64748b; --auth-border:rgba(148,163,184,.26); --auth-border-strong:rgba(148,163,184,.44); --auth-border-light:rgba(255,255,255,.12); } html[data-auth-glass="strong"]{ --auth-card-bg:rgba(255,255,255,.72); --auth-blur:38px; } html[data-auth-glass="solid"]{ --auth-card-bg:rgba(255,255,255,.98); --auth-blur:8px; } html[data-auth-shape="square"]{ --auth-radius-card:16px; --auth-radius-lg:12px; --auth-radius-md:9px; --auth-radius-pill:10px; } html[data-auth-shape="soft"]{ --auth-radius-card:22px; --auth-radius-pill:14px; } html[data-auth-density="compact"]{ --auth-card-padding:28px; --auth-input-height:50px; --auth-button-height:46px; } /* ============================================================================ 3. RESET ============================================================================ */ *, *::before, *::after{ box-sizing:border-box; } html{ width:100%; min-width:320px; min-height:100%; margin:0; padding:0; background:var(--auth-page-bg); scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; } body{ width:100%; min-width:320px; min-height:100vh; min-height:100svh; margin:0; padding:0; color:var(--auth-text); font-family:var(--auth-font); font-size:16px; line-height:1.5; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } button, input, select, textarea{ color:inherit; font:inherit; } button{ margin:0; padding:0; cursor:pointer; } input, select, textarea{ width:100%; } img, svg{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } p, h1, h2, h3, h4, h5, h6{ margin:0; } [hidden]{ display:none !important; } ::selection{ background:var(--auth-primary-200); color:var(--auth-primary-950); } /* ============================================================================ 4. PAGE BACKGROUND ============================================================================ */ body.login-bg{ position:relative; isolation:isolate; min-height:100vh; min-height:100svh; overflow-x:hidden; overflow-y:auto; background-color:var(--auth-page-bg); background-image: linear-gradient( 112deg, var(--tenant-login-overlay-start) 0%, var(--tenant-login-overlay-middle) 48%, var(--tenant-login-overlay-end) 100% ), var(--tenant-login-background); background-repeat:no-repeat; background-position:center,var(--tenant-login-position); background-size:cover,var(--tenant-login-size); background-attachment:fixed; } body.login-bg::before{ position:fixed; inset:0; z-index:var(--auth-z-background); background: radial-gradient( circle at 16% 18%, var(--auth-glow-primary) 0, transparent 34% ), radial-gradient( circle at 84% 78%, var(--auth-glow-secondary) 0, transparent 32% ), radial-gradient( circle at 72% 12%, var(--auth-glow-accent) 0, transparent 27% ); content:""; pointer-events:none; animation:auth-ambient-shift 18s ease-in-out infinite alternate; } body.login-bg::after{ position:fixed; inset:0; z-index:var(--auth-z-background); background-image: repeating-radial-gradient( circle at 0 0, rgba(255,255,255,.08) 0, rgba(255,255,255,.08) 1px, transparent 1px, transparent 5px ); background-size:8px 8px; content:""; opacity:.1; pointer-events:none; mix-blend-mode:soft-light; } /* ============================================================================ 5. BOOTSTRAP-SAFE CONTAINERS ============================================================================ */ .container, .container-fluid{ width:100%; max-width:100% !important; min-height:inherit; margin:0; padding:0 !important; } /* ============================================================================ 6. AUTH WRAPPER ============================================================================ */ .auth-wrapper{ position:relative; z-index:0; display:flex; width:100%; min-height:100vh; min-height:100svh; align-items:center; justify-content:center; overflow:hidden; padding: max(38px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(30px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left)); } .auth-wrapper::before, .auth-wrapper::after{ position:absolute; z-index:var(--auth-z-decoration); border:1px solid rgba(255,255,255,.14); border-radius:50%; content:""; pointer-events:none; backdrop-filter:blur(4px); } .auth-wrapper::before{ top:9%; left:7%; width:clamp(150px,18vw,280px); height:clamp(150px,18vw,280px); background: linear-gradient( 145deg, rgba(255,255,255,.1), rgba(255,255,255,.015) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 30px 80px rgba(2,6,23,.15); animation:auth-float-one 12s ease-in-out infinite; } .auth-wrapper::after{ right:7%; bottom:8%; width:clamp(100px,13vw,210px); height:clamp(100px,13vw,210px); background: linear-gradient( 145deg, rgba(99,102,241,.17), rgba(37,99,235,.03) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 28px 70px rgba(2,6,23,.14); animation:auth-float-two 15s ease-in-out infinite; } /* ============================================================================ 7. AUTH FORMS AND SECTIONS ============================================================================ */ .auth-wrapper > form, .auth-wrapper > section, #tokenResetSection{ position:relative; z-index:var(--auth-z-content); width:100%; max-width:var(--auth-card-width); } #tokenResetSection form{ width:100%; } .auth-wrapper > form{ animation:auth-form-enter 720ms var(--auth-ease) both; } .auth-wrapper > form:nth-of-type(2), #tokenResetSection{ animation-delay:50ms; } /* ============================================================================ 8. PREMIUM AUTH CARD ============================================================================ */ .auth-box{ position:relative; isolation:isolate; width:100%; max-width:var(--auth-card-width); overflow:hidden; padding:var(--auth-card-padding); border:1px solid var(--auth-card-border); border-radius:var(--auth-radius-card); background: linear-gradient( 145deg, var(--auth-card-highlight), transparent 34% ), var(--auth-card-bg); box-shadow:var(--auth-card-shadow); backdrop-filter: blur(var(--auth-blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--auth-blur)) saturate(150%); transform:translateZ(0); transition: transform var(--auth-transition-normal) var(--auth-ease), border-color var(--auth-transition-normal) var(--auth-ease-standard), box-shadow var(--auth-transition-normal) var(--auth-ease); } .auth-box:hover{ border-color: color-mix( in srgb, var(--tenant-primary) 24%, var(--auth-card-border) ); box-shadow:var(--auth-card-shadow-hover); transform:translateY(-3px); } .auth-box::before{ position:absolute; top:0; right:0; left:0; z-index:0; height:4px; background: linear-gradient( 90deg, var(--tenant-primary), var(--tenant-secondary) 55%, var(--tenant-accent) ); box-shadow: 0 2px 16px var(--auth-primary-shadow); content:""; } .auth-box::after{ position:absolute; top:-60%; left:-105%; z-index:0; width:62%; height:220%; background: linear-gradient( 100deg, transparent 0%, rgba(255,255,255,.03) 35%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.04) 65%, transparent 100% ); content:""; pointer-events:none; transform:rotate(14deg); animation:auth-card-reflection 9s var(--auth-ease) infinite; } .auth-box > *{ position:relative; z-index:1; } /* ============================================================================ 9. TENANT LOGO ============================================================================ */ .auth-logo{ display:flex; width:max-content; max-width:100%; align-items:center; justify-content:center; margin:0 auto 15px; border-radius:var(--auth-radius-lg); text-decoration:none; -webkit-tap-highlight-color:transparent; } .auth-logo img{ width:auto; max-width:86px; height:auto; max-height:76px; object-fit:contain; filter: drop-shadow(0 10px 16px rgba(15,23,42,.16)); transition: filter var(--auth-transition-normal) var(--auth-ease), transform var(--auth-transition-normal) var(--auth-ease); } .auth-logo:hover img{ filter: drop-shadow(0 14px 22px rgba(15,23,42,.22)); transform:translateY(-2px) scale(1.035); } .auth-logo:focus-visible{ outline:3px solid var(--auth-focus-ring); outline-offset:5px; } /* ============================================================================ 10. TENANT IDENTITY ============================================================================ */ .tenant-login-identity{ display:grid; justify-items:center; gap:3px; margin:-2px 0 18px; text-align:center; } .tenant-login-name{ display:block; max-width:100%; overflow:hidden; color:var(--auth-text); font-family:var(--auth-display-font); font-size:.98rem; font-weight:850; line-height:1.25; letter-spacing:-.022em; text-overflow:ellipsis; white-space:nowrap; } .tenant-login-name::after{ display:inline-flex; width:16px; height:16px; align-items:center; justify-content:center; margin-left:6px; border-radius:50%; background: linear-gradient( 135deg, var(--tenant-primary), var(--tenant-secondary) ); color:#fff; content:"✓"; font-size:.56rem; font-weight:950; vertical-align:2px; box-shadow: 0 4px 10px var(--auth-primary-shadow); } .tenant-login-subtitle{ display:block; max-width:100%; overflow:hidden; color:var(--auth-text-muted); font-size:.73rem; font-weight:650; line-height:1.35; letter-spacing:.035em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; } /* ============================================================================ 11. HEADINGS ============================================================================ */ .auth-title, .auth-box h1, .auth-box h2, .auth-box h3, .auth-box h4, .auth-box h5{ color:var(--auth-text); font-family:var(--auth-display-font); text-align:center; text-wrap:balance; } .auth-title, .auth-box h1{ margin:0 0 9px; font-size:clamp(1.72rem,4vw,2.08rem); font-weight:850; line-height:1.08; letter-spacing:-.045em; } .auth-box h2{ margin:0 0 9px; font-size:clamp(1.55rem,3.5vw,1.9rem); font-weight:830; line-height:1.12; letter-spacing:-.038em; } .auth-box h3, .auth-box h4{ margin:0 0 8px; font-size:1.62rem; font-weight:820; line-height:1.15; letter-spacing:-.035em; } .auth-box h5{ margin:0 0 14px; font-size:1.3rem; font-weight:800; line-height:1.18; letter-spacing:-.025em; } .login-subtitle, .auth-box > .text-muted{ max-width:340px; margin:0 auto 20px; color:var(--auth-text-muted) !important; font-size:.9rem; font-weight:450; line-height:1.58; text-align:center; text-wrap:pretty; } /* ============================================================================ 12. FORM LAYOUT ============================================================================ */ .floating-group{ position:relative; isolation:isolate; width:100%; margin-bottom:17px; } .floating-group::before{ position:absolute; right:0; bottom:0; left:0; z-index:2; height:1px; background:var(--auth-border-strong); content:""; pointer-events:none; } .floating-group::after{ position:absolute; right:50%; bottom:0; left:50%; z-index:3; height:2px; border-radius:var(--auth-radius-pill); background: linear-gradient( 90deg, var(--tenant-primary), var(--tenant-secondary) ); box-shadow: 0 0 14px var(--auth-primary-shadow); content:""; pointer-events:none; transition: right var(--auth-transition-normal) var(--auth-ease), left var(--auth-transition-normal) var(--auth-ease); } .floating-group:focus-within::after{ right:0; left:0; } /* ============================================================================ 13. PREMIUM UNDERLINE INPUTS ============================================================================ */ .floating-group input{ width:100%; height:var(--auth-input-height); margin:0; padding:21px 12px 7px; border:0; border-radius:var(--auth-radius-sm) var(--auth-radius-sm) 0 0; background: linear-gradient( 180deg, color-mix( in srgb, var(--auth-surface) 84%, transparent ), color-mix( in srgb, var(--auth-surface) 48%, transparent ) ); color:var(--auth-text); caret-color:var(--tenant-primary); font-size:.92rem; font-weight:560; line-height:1.2; outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.32); transition: background-color var(--auth-transition-fast) var(--auth-ease-standard), box-shadow var(--auth-transition-fast) var(--auth-ease-standard), color var(--auth-transition-fast) var(--auth-ease-standard); } .floating-group input:hover{ background: linear-gradient( 180deg, color-mix( in srgb, var(--auth-surface-hover) 90%, transparent ), color-mix( in srgb, var(--auth-surface) 56%, transparent ) ); } .floating-group input:focus{ background: linear-gradient( 180deg, color-mix( in srgb, var(--auth-surface-hover) 94%, transparent ), color-mix( in srgb, var(--auth-surface) 62%, transparent ) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.46), 0 -8px 24px rgba(37,99,235,.035); } .floating-group input::placeholder{ color:transparent; } .floating-group input[disabled], .floating-group input:disabled{ cursor:not-allowed; opacity:.58; } .floating-group input[readonly]{ cursor:default; opacity:.8; } .floating-group input[aria-invalid="true"]{ color:var(--auth-danger-700); } .floating-group:has(input[aria-invalid="true"])::after{ right:0; left:0; background:var(--auth-danger-500); box-shadow: 0 0 12px rgba(239,68,68,.25); } /* ============================================================================ 14. FLOATING LABELS ============================================================================ */ .floating-group label{ position:absolute; top:18px; left:12px; z-index:4; max-width:calc(100% - 56px); overflow:hidden; padding:0; color:var(--auth-text-muted); font-size:.87rem; font-weight:560; line-height:1; letter-spacing:-.005em; text-overflow:ellipsis; white-space:nowrap; pointer-events:none; transform-origin:left top; transition: top var(--auth-transition-fast) var(--auth-ease-standard), color var(--auth-transition-fast) var(--auth-ease-standard), font-size var(--auth-transition-fast) var(--auth-ease-standard), font-weight var(--auth-transition-fast) var(--auth-ease-standard), letter-spacing var(--auth-transition-fast) var(--auth-ease-standard), transform var(--auth-transition-fast) var(--auth-ease-standard); } .floating-group input:focus + label, .floating-group input:not(:placeholder-shown) + label, .floating-group input:-webkit-autofill + label{ top:6px; color:var(--tenant-primary); font-size:.68rem; font-weight:780; letter-spacing:.025em; } /* ============================================================================ 15. BROWSER AUTOFILL ============================================================================ */ .floating-group input:-webkit-autofill, .floating-group input:-webkit-autofill:hover, .floating-group input:-webkit-autofill:focus{ -webkit-text-fill-color:var(--auth-text); caret-color:var(--tenant-primary); box-shadow: inset 0 0 0 1000px color-mix( in srgb, var(--auth-surface-strong) 78%, transparent ) !important; transition: background-color 9999s ease-out 0s; } /* ============================================================================ 16. PASSWORD FIELDS ============================================================================ */ .password-group{ position:relative; } .password-group input{ padding-right:50px; } .password-toggle{ position:absolute; top:4px; right:2px; z-index:6; display:flex; width:44px; height:calc(var(--auth-input-height) - 8px); align-items:center; justify-content:center; padding:0; border:0; border-radius:var(--auth-radius-sm); background:transparent; color:var(--auth-text-muted); outline:none; transition: background-color var(--auth-transition-fast) var(--auth-ease-standard), color var(--auth-transition-fast) var(--auth-ease-standard), transform var(--auth-transition-fast) var(--auth-ease); } .password-toggle:hover{ background: color-mix( in srgb, var(--tenant-primary) 8%, transparent ); color:var(--tenant-primary); transform:scale(1.04); } .password-toggle:active{ transform:scale(.95); } .password-toggle:focus-visible{ background: color-mix( in srgb, var(--tenant-primary) 9%, transparent ); color:var(--tenant-primary); outline:3px solid var(--auth-focus-ring); outline-offset:0; } .password-toggle i{ font-size:1.16rem; line-height:1; transition: transform var(--auth-transition-normal) var(--auth-ease); } .password-toggle:hover i{ transform:rotate(-7deg); } /* ============================================================================ 17. LOGIN OPTIONS ============================================================================ */ .login-options{ display:flex; min-width:0; align-items:center; justify-content:space-between; gap:14px; margin:-1px 0 21px; font-size:.84rem; } .login-options a{ flex:0 0 auto; color:var(--tenant-primary); font-size:.82rem; font-weight:740; line-height:1.35; text-decoration:none; transition: color var(--auth-transition-fast) var(--auth-ease-standard), transform var(--auth-transition-fast) var(--auth-ease-standard); } .login-options a:hover{ color:var(--tenant-primary-hover); text-decoration:none; transform:translateY(-1px); } .login-options a:focus-visible{ border-radius:5px; outline:3px solid var(--auth-focus-ring); outline-offset:3px; } /* ============================================================================ 18. PREMIUM CHECKBOX ============================================================================ */ .remember-me{ display:inline-flex; min-width:0; align-items:center; gap:9px; color:var(--auth-text-secondary); cursor:pointer; font-size:.82rem; font-weight:620; line-height:1.35; user-select:none; } .remember-me input{ position:relative; display:grid; width:18px; height:18px; flex:0 0 18px; margin:0; padding:0; appearance:none; -webkit-appearance:none; border:1px solid var(--auth-border-strong); border-radius:6px; background: linear-gradient( 145deg, var(--auth-surface-strong), var(--auth-surface) ); box-shadow: inset 0 1px 1px rgba(15,23,42,.05); cursor:pointer; outline:none; place-items:center; transition: background-color var(--auth-transition-fast) var(--auth-ease-standard), border-color var(--auth-transition-fast) var(--auth-ease-standard), box-shadow var(--auth-transition-fast) var(--auth-ease-standard), transform var(--auth-transition-fast) var(--auth-ease); } .remember-me input::before{ width:9px; height:5px; border-bottom:2px solid #fff; border-left:2px solid #fff; content:""; opacity:0; transform:translateY(-1px) rotate(-45deg) scale(.4); transition: opacity var(--auth-transition-fast) var(--auth-ease-standard), transform var(--auth-transition-normal) var(--auth-ease); } .remember-me input:hover{ border-color:var(--tenant-primary); box-shadow: 0 0 0 4px color-mix( in srgb, var(--tenant-primary) 8%, transparent ); } .remember-me input:checked{ border-color:var(--tenant-primary); background: linear-gradient( 135deg, var(--tenant-primary), var(--tenant-secondary) ); box-shadow: 0 6px 14px var(--auth-primary-shadow), inset 0 1px 0 rgba(255,255,255,.25); } .remember-me input:checked::before{ opacity:1; transform:translateY(-1px) rotate(-45deg) scale(1); } .remember-me input:active{ transform:scale(.9); } .remember-me input:focus-visible{ outline:3px solid var(--auth-focus-ring); outline-offset:3px; } /* ============================================================================ 19. BUTTON FOUNDATION ============================================================================ */ .btn{ position:relative; isolation:isolate; display:inline-flex; min-height:var(--auth-button-height); align-items:center; justify-content:center; gap:9px; overflow:hidden; padding:11px 20px; border:1px solid transparent; border-radius:var(--auth-radius-pill); font-size:.88rem; font-weight:780; line-height:1; letter-spacing:.005em; text-align:center; text-decoration:none; white-space:nowrap; outline:none; transition: background-color var(--auth-transition-fast) var(--auth-ease-standard), border-color var(--auth-transition-fast) var(--auth-ease-standard), box-shadow var(--auth-transition-normal) var(--auth-ease), color var(--auth-transition-fast) var(--auth-ease-standard), transform var(--auth-transition-fast) var(--auth-ease); -webkit-tap-highlight-color:transparent; } .btn::before{ position:absolute; inset:0; z-index:-2; content:""; } .btn::after{ position:absolute; top:-120%; left:-45%; z-index:-1; width:28%; height:340%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.38), transparent ); content:""; pointer-events:none; transform:rotate(22deg); transition: left 720ms var(--auth-ease); } .btn:hover::after{ left:118%; } .btn:hover{ text-decoration:none; transform:translateY(-2px); } .btn:active{ transform:translateY(0) scale(.99); } .btn:focus-visible{ outline:3px solid var(--auth-focus-ring); outline-offset:3px; } .btn i{ flex:0 0 auto; font-size:1.05rem; line-height:1; } .w-100{ width:100% !important; } /* ============================================================================ 20. PRIMARY BUTTON ============================================================================ */ .btn-primary{ border-color: color-mix( in srgb, var(--tenant-primary) 80%, #ffffff ); background: linear-gradient( 135deg, var(--tenant-primary) 0%, var(--tenant-secondary) 62%, color-mix( in srgb, var(--tenant-secondary) 78%, var(--tenant-accent) ) 100% ); color:#fff; box-shadow: 0 15px 32px var(--auth-secondary-shadow), 0 6px 14px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.12); } .btn-primary::before{ background: linear-gradient( 135deg, var(--tenant-primary-hover), color-mix( in srgb, var(--tenant-secondary) 86%, #111827 ) ); opacity:0; transition: opacity var(--auth-transition-normal) var(--auth-ease-standard); } .btn-primary:hover{ border-color: color-mix( in srgb, var(--tenant-primary) 66%, #ffffff ); color:#fff; box-shadow: 0 22px 44px color-mix( in srgb, var(--tenant-secondary) 34%, transparent ), 0 8px 18px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.12); } .btn-primary:hover::before{ opacity:1; } .btn-primary:active{ box-shadow: 0 9px 20px var(--auth-secondary-shadow), inset 0 2px 5px rgba(0,0,0,.12); } .btn-primary:focus-visible{ outline-color: color-mix( in srgb, var(--tenant-primary) 34%, transparent ); } /* ============================================================================ 21. LIGHT BUTTON ============================================================================ */ .btn-light{ border-color:var(--auth-border); background: linear-gradient( 145deg, color-mix( in srgb, var(--auth-surface-strong) 94%, transparent ), color-mix( in srgb, var(--auth-surface) 76%, transparent ) ); color:var(--auth-text-secondary); box-shadow: 0 7px 18px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.55); } .btn-light::before{ background: color-mix( in srgb, var(--tenant-primary) 7%, var(--auth-surface-strong) ); opacity:0; transition: opacity var(--auth-transition-fast) var(--auth-ease-standard); } .btn-light:hover{ border-color: color-mix( in srgb, var(--tenant-primary) 34%, var(--auth-border) ); color:var(--tenant-primary); box-shadow: 0 12px 25px rgba(15,23,42,.11), inset 0 1px 0 rgba(255,255,255,.62); } .btn-light:hover::before{ opacity:1; } /* ============================================================================ 22. BUTTON STATES ============================================================================ */ .btn:disabled, .btn[disabled], .btn[aria-disabled="true"]{ cursor:not-allowed; opacity:.6; pointer-events:none; transform:none; } .btn[aria-busy="true"]{ cursor:progress; pointer-events:none; } .btn[aria-busy="true"] i{ animation:auth-spin 700ms linear infinite; } /* ============================================================================ 23. GLOBAL LINKS ============================================================================ */ .auth-box a:not(.auth-logo):not(.btn){ color:var(--tenant-primary); text-decoration:none; transition: color var(--auth-transition-fast) var(--auth-ease-standard), opacity var(--auth-transition-fast) var(--auth-ease-standard); } .auth-box a:not(.auth-logo):not(.btn):hover{ color:var(--tenant-primary-hover); } /* ============================================================================ 24. ERROR AND STATUS MESSAGES ============================================================================ */ .text-danger, #errorMsg, #resetErrorMsg, #tokenErrorMsg{ display:block; width:100%; min-height:0; margin-top:14px; padding:10px 12px; border:1px solid rgba(239,68,68,.2); border-radius:var(--auth-radius-md); background: linear-gradient( 145deg, rgba(254,226,226,.72), rgba(254,242,242,.5) ); color:var(--auth-danger-700) !important; font-size:.78rem; font-weight:680; line-height:1.45; text-align:center; box-shadow: inset 0 1px 0 rgba(255,255,255,.58); } #errorMsg:empty, #resetErrorMsg:empty, #tokenErrorMsg:empty{ display:none; } html[data-color-mode="dark"] .text-danger, html[data-color-mode="dark"] #errorMsg, html[data-color-mode="dark"] #resetErrorMsg, html[data-color-mode="dark"] #tokenErrorMsg{ border-color:rgba(248,113,113,.24); background:rgba(127,29,29,.22); color:#fecaca !important; } /* ============================================================================ 25. PASSWORD STRENGTH ============================================================================ */ .strength-bar{ position:absolute; right:0; bottom:-10px; left:0; z-index:5; height:4px; overflow:hidden; border-radius:var(--auth-radius-pill); background: color-mix( in srgb, var(--auth-border) 75%, transparent ); box-shadow: inset 0 1px 2px rgba(15,23,42,.08); } .strength-fill{ width:0; height:100%; border-radius:inherit; background: linear-gradient( 90deg, var(--auth-danger-500), var(--auth-warning-500), var(--auth-success-500) ); box-shadow: 0 0 10px currentColor; transition: width 320ms var(--auth-ease), background-color 220ms var(--auth-ease-standard); } /* ============================================================================ 26. SECURITY GRID ============================================================================ */ .auth-security-grid{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:8px; margin-top:22px; padding-top:18px; border-top:1px solid var(--auth-border); } .auth-security-item{ display:grid; min-width:0; justify-items:center; gap:5px; padding:10px 6px; border:1px solid color-mix( in srgb, var(--auth-border) 76%, transparent ); border-radius:var(--auth-radius-md); background: linear-gradient( 145deg, color-mix( in srgb, var(--auth-surface) 82%, transparent ), color-mix( in srgb, var(--auth-surface) 38%, transparent ) ); color:var(--auth-text-muted); text-align:center; box-shadow: inset 0 1px 0 rgba(255,255,255,.38); transition: border-color var(--auth-transition-fast) var(--auth-ease-standard), box-shadow var(--auth-transition-fast) var(--auth-ease-standard), transform var(--auth-transition-fast) var(--auth-ease); } .auth-security-item:hover{ border-color: color-mix( in srgb, var(--tenant-primary) 28%, var(--auth-border) ); box-shadow: 0 8px 18px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.46); transform:translateY(-2px); } .auth-security-item i{ font-size:1.08rem; line-height:1; filter: drop-shadow(0 4px 7px rgba(15,23,42,.1)); } .auth-security-item span{ display:block; max-width:100%; overflow:hidden; color:var(--auth-text-muted); font-size:.64rem; font-weight:720; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; } .text-success{ color:var(--auth-success-600) !important; } .text-primary{ color:var(--tenant-primary) !important; } .text-warning{ color:var(--auth-warning-600) !important; } /* ============================================================================ 27. TENANT ERROR CARD ============================================================================ */ #tenantLoginError{ display:grid; justify-items:center; gap:12px; text-align:center; } #tenantLoginError > i{ display:grid; width:66px; height:66px; border:1px solid rgba(239,68,68,.18); border-radius:22px; background: linear-gradient( 145deg, var(--auth-danger-50), var(--auth-danger-100) ); color:var(--auth-danger-600); font-size:2rem; box-shadow: 0 14px 30px rgba(239,68,68,.14), inset 0 1px 0 rgba(255,255,255,.7); place-items:center; } #tenantLoginError h2{ margin-top:2px; } #tenantLoginError p{ max-width:340px; color:var(--auth-text-muted); font-size:.88rem; line-height:1.55; } /* ============================================================================ 28. FOOTER ============================================================================ */ .login-footer{ position:relative; width:100%; max-width:var(--auth-card-width); margin:17px auto 0; padding:0 10px; color:rgba(255,255,255,.83); font-size:.72rem; font-weight:640; line-height:1.5; letter-spacing:.025em; text-align:center; text-shadow: 0 2px 8px rgba(0,0,0,.38); } .login-footer::before{ display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:#4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.12), 0 0 12px rgba(74,222,128,.45); content:""; vertical-align:1px; } /* ============================================================================ 29. BOOTSTRAP UTILITY COMPATIBILITY ============================================================================ */ .text-center{ text-align:center !important; } .text-muted{ color:var(--auth-text-muted) !important; } .mt-3{ margin-top:1rem !important; } .mb-2{ margin-bottom:.5rem !important; } .mb-3{ margin-bottom:1rem !important; } .mb-4{ margin-bottom:1.5rem !important; } .me-2{ margin-inline-end:.5rem !important; } /* ============================================================================ 30. ACCESSIBILITY ============================================================================ */ :focus-visible{ outline:3px solid var(--auth-focus-ring); outline-offset:3px; } @supports not selector(:focus-visible){ :focus{ outline:3px solid var(--auth-focus-ring); outline-offset:3px; } } /* ============================================================================ 31. TABLET ============================================================================ */ @media (max-width:768px){ :root{ --auth-card-width:390px; --auth-card-padding:27px; --auth-radius-card:24px; --auth-input-height:52px; --auth-button-height:48px; } body.login-bg{ background-attachment:scroll; } .auth-wrapper{ align-items:center; padding: max(22px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); } .auth-wrapper::before{ top:4%; left:-80px; } .auth-wrapper::after{ right:-65px; bottom:3%; } .auth-box:hover{ transform:none; } .auth-logo{ margin-bottom:13px; } .auth-logo img{ max-width:72px; max-height:65px; } .tenant-login-identity{ margin-bottom:16px; } .auth-title, .auth-box h1{ font-size:1.72rem; } .auth-box h2{ font-size:1.52rem; } .login-subtitle, .auth-box > .text-muted{ margin-bottom:22px; font-size:.86rem; } .floating-group{ margin-bottom:20px; } .floating-group input{ font-size:16px; } .floating-group label{ font-size:14px; } .floating-group input:focus + label, .floating-group input:not(:placeholder-shown) + label, .floating-group input:-webkit-autofill + label{ font-size:11px; } .login-options{ margin-bottom:19px; } .btn{ font-size:.86rem; } .login-footer{ margin-top:14px; font-size:.69rem; } } /* ============================================================================ 32. MOBILE ============================================================================ */ @media (max-width:480px){ :root{ --auth-card-width:100%; --auth-card-padding:23px; --auth-radius-card:21px; } .auth-wrapper{ align-items:center; overflow:visible; padding: max(16px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); } .auth-wrapper > form, .auth-wrapper > section, #tokenResetSection{ max-width:100%; } .auth-box{ max-width:100%; border-radius:var(--auth-radius-card); } .auth-box::after{ display:none; } .auth-logo img{ max-width:64px; max-height:58px; } .tenant-login-name{ font-size:.91rem; } .tenant-login-subtitle{ font-size:.66rem; } .auth-title, .auth-box h1{ font-size:1.55rem; } .auth-box h2{ font-size:1.42rem; } .login-subtitle, .auth-box > .text-muted{ font-size:.82rem; line-height:1.52; } .floating-group input{ padding-right:10px; } .password-group input{ padding-right:47px; } .login-options{ align-items:flex-start; gap:12px; } .remember-me, .login-options a{ font-size:.78rem; } .auth-security-grid{ gap:6px; } .auth-security-item{ padding:9px 4px; } .auth-security-item span{ font-size:.59rem; } .btn{ padding-inline:16px; } } /* ============================================================================ 33. EXTRA-SMALL MOBILE ============================================================================ */ @media (max-width:360px){ :root{ --auth-card-padding:19px; } .login-options{ flex-direction:column; gap:11px; } .auth-security-grid{ grid-template-columns:1fr; } .auth-security-item{ display:flex; align-items:center; justify-content:center; gap:8px; } .auth-security-item span{ font-size:.66rem; } } /* ============================================================================ 34. SHORT SCREENS ============================================================================ */ @media (max-height:760px) and (min-width:769px){ :root{ --auth-card-padding:25px; --auth-input-height:50px; --auth-button-height:46px; } .auth-wrapper{ align-items:flex-start; padding-top:24px; padding-bottom:24px; } .auth-logo{ margin-bottom:10px; } .auth-logo img{ max-width:62px; max-height:55px; } .tenant-login-identity{ margin-bottom:12px; } .auth-title, .auth-box h1{ font-size:1.58rem; } .login-subtitle, .auth-box > .text-muted{ margin-bottom:18px; } .floating-group{ margin-bottom:17px; } .auth-security-grid{ margin-top:17px; padding-top:14px; } } /* ============================================================================ 35. LANDSCAPE MOBILE ============================================================================ */ @media (max-height:520px) and (orientation:landscape){ .auth-wrapper{ align-items:flex-start; overflow-y:auto; padding-top:14px; padding-bottom:14px; } .auth-wrapper::before, .auth-wrapper::after{ display:none; } .auth-box{ margin-inline:auto; } } /* ============================================================================ 36. DARK MODE COMPONENT FIXES ============================================================================ */ html[data-color-mode="dark"] .auth-box::after{ opacity:.28; } html[data-color-mode="dark"] .remember-me input{ background: linear-gradient( 145deg, rgba(30,50,72,.96), rgba(15,32,52,.8) ); } html[data-color-mode="dark"] #tenantLoginError > i{ border-color:rgba(248,113,113,.22); background:rgba(127,29,29,.28); color:#fca5a5; } html[data-color-mode="dark"] .auth-security-item{ box-shadow: inset 0 1px 0 rgba(255,255,255,.07); } /* ============================================================================ 37. REDUCED MOTION ============================================================================ */ @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .auth-box, .btn, .auth-logo img, .auth-security-item{ transform:none !important; } } /* ============================================================================ 38. HIGH-CONTRAST SUPPORT ============================================================================ */ @media (prefers-contrast:more){ :root{ --auth-border:rgba(51,65,85,.55); --auth-border-strong:rgba(30,41,59,.78); --auth-card-border:rgba(255,255,255,.82); } .floating-group::before{ height:2px; } .auth-box{ border-width:2px; } .btn{ border-width:2px; } } /* ============================================================================ 39. FORCED COLORS ============================================================================ */ @media (forced-colors:active){ .auth-box, .floating-group input, .btn, .remember-me input, .auth-security-item{ forced-color-adjust:auto; } .auth-box::before, .auth-box::after, body.login-bg::before, body.login-bg::after{ display:none; } .floating-group::after{ background:Highlight; } } /* ============================================================================ 40. ANIMATIONS ============================================================================ */ @keyframes auth-form-enter{ from{ opacity:0; transform:translateY(24px) scale(.975); } to{ opacity:1; transform:translateY(0) scale(1); } } @keyframes auth-card-reflection{ 0%, 58%{ left:-105%; opacity:0; } 64%{ opacity:.78; } 78%{ left:145%; opacity:0; } 100%{ left:145%; opacity:0; } } @keyframes auth-ambient-shift{ 0%{ opacity:.82; transform:scale(1) translate3d(0,0,0); } 100%{ opacity:1; transform:scale(1.08) translate3d(1.5%,-1%,0); } } @keyframes auth-float-one{ 0%, 100%{ transform:translate3d(0,0,0) rotate(0deg); } 50%{ transform:translate3d(16px,-18px,0) rotate(5deg); } } @keyframes auth-float-two{ 0%, 100%{ transform:translate3d(0,0,0) rotate(0deg); } 50%{ transform:translate3d(-18px,14px,0) rotate(-6deg); } } @keyframes auth-spin{ to{ transform:rotate(360deg); } } /* ============================================================================ FINAL VISUAL POLISH ============================================================================ */ :root{ --auth-card-width:450px; } .auth-title, .auth-box h1{ font-size:1.9rem; font-weight:800; letter-spacing:-.035em; } .login-subtitle{ max-width:350px; margin-bottom:25px; font-size:.88rem; line-height:1.55; } .floating-group label{ font-size:.78rem; font-weight:650; } .floating-group input:focus + label, .floating-group input:not(:placeholder-shown) + label, .floating-group input:-webkit-autofill + label{ font-size:.7rem; } .login-options{ gap:22px; } .remember-me{ font-size:.8rem; } .login-options a{ font-size:.79rem; font-weight:650; } .auth-logo img{ max-width:76px; max-height:68px; border-radius:12px; } .login-footer{ margin-top:13px; } body.login-bg::before{ opacity:.7; } .auth-wrapper::before, .auth-wrapper::after{ opacity:.45; } @media(max-width:480px){ :root{ --auth-card-width:100%; } .login-options{ gap:12px; } } /* ========================================================================== LOGIN BOOT STATE ========================================================================== */ html.auth-booting .auth-wrapper { visibility: hidden; opacity: 0; } html.auth-ready .auth-wrapper { visibility: visible; opacity: 1; transition: opacity 180ms ease; } @media (prefers-reduced-motion: reduce) { html.auth-ready .auth-wrapper { transition: none; } } :root { --auth-card-width: 420px; --auth-card-padding: 30px; } .input-icon-group .field-icon { position: absolute; top: 50%; left: 15px; z-index: 5; color: var(--auth-text-muted); font-size: 1.1rem; pointer-events: none; transform: translateY(-50%); } .input-icon-group input { padding-left: 46px; } .input-icon-group label { left: 46px; } .input-icon-group:focus-within .field-icon { color: var(--tenant-primary); } .password-group input { padding-right: 50px; } @media (max-width: 480px) { :root { --auth-card-width: 370px; --auth-card-padding: 22px; } .auth-wrapper { padding: max(24px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); } .auth-wrapper > form, .auth-wrapper > section, #tokenResetSection { max-width: min(100%, var(--auth-card-width)); } }