@import url("../landing-tokens.css"); /* ============================================================ Workspace login screen — light business theme (LinkedIn-style). Loaded LAST in so it overrides shared/styles/apollo. EVERY rule is scoped under #authContainer. It does NOT touch #mainContent, the working UI, auth.js logic, or any other page. Visibility of #authContainer is controlled by auth.js inline style — this file never sets `display` on it. position:fixed/inset:0 is intentional: #authContainer sits inside `.main-content { margin-left: var(--sidebar-width); padding: 24px }` (shared.css:125 / apollo.css:1099). Fixed escapes that wrapper so the white stage is truly full-bleed; `relative` would leave a sidebar-width gap on the left. ============================================================ */ /* ---- full-bleed white stage ---- */ #authContainer{ background:var(--li-white); min-height:100vh; min-height:100svh; min-height:100dvh; flex-direction:column; align-items:center; justify-content:center; position:fixed; inset:0; overflow:hidden; padding:24px; color:var(--li-ink); font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } /* ---- wordmark + thin blue rule, top-center ---- */ #authContainer .auth-wordmark{ position:absolute; top:36px; left:50%; transform:translateX(-50%); display:inline-flex; flex-direction:column; align-items:center; min-height:44px; padding:0 8px; color:var(--li-ink); font-family:inherit; font-size:1.6rem; font-weight:700; letter-spacing:-0.01em; text-decoration:none; white-space:nowrap; z-index:2; } #authContainer .auth-wordmark::after{ content:""; display:block; width:200px; max-width:60vw; height:1.5px; margin-top:12px; /* fades to transparent at both ends — echoes the landing horizon line */ background:linear-gradient(to right, transparent 0%, var(--li-blue) 50%, transparent 100%); } #authContainer .auth-wordmark:hover{color:var(--li-blue);} #authContainer .auth-wordmark:focus-visible{ outline:3px solid var(--li-blue); outline-offset:4px; border-radius:6px; } /* ---- white card, thin grey border, soft neutral shadow ---- */ #authContainer .auth-box{ position:relative; z-index:1; width:100%; max-width:360px; margin:0; /* container padding supplies the side gutters (no clip on mobile) */ padding:32px; text-align:left; background:var(--li-white); border:1px solid var(--li-border); border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.08); } #authContainer .auth-box h1{ margin:0 0 6px; color:var(--li-ink); font-family:inherit; font-size:1.6rem; font-weight:600; letter-spacing:-0.01em; text-align:left; } #authContainer .auth-box p{ margin:0 0 24px; color:var(--li-gray); font-family:inherit; font-size:.9rem; text-align:left; } /* ---- field labels ---- */ #authContainer .field-label{ display:block; margin:16px 0 6px; color:var(--li-ink); font-family:inherit; font-size:.8rem; font-weight:500; } /* ---- text / password inputs ---- */ #authContainer .auth-box input[type="text"], #authContainer .auth-box input[type="password"]{ width:100%; margin:0; padding:12px 14px; min-height:48px; color:var(--li-ink); background:var(--li-white); border:1px solid var(--li-border); border-radius:6px; font-family:inherit; font-size:1rem; transition:border-color .15s ease, box-shadow .15s ease; outline:none; } #authContainer .auth-box input[type="text"]::placeholder, #authContainer .auth-box input[type="password"]::placeholder{ color:var(--li-gray); } #authContainer .auth-box input[type="text"]:hover, #authContainer .auth-box input[type="password"]:hover{ border-color:var(--li-gray); } #authContainer .auth-box input[type="text"]:focus, #authContainer .auth-box input[type="password"]:focus, #authContainer .auth-box input[type="text"]:focus-visible, #authContainer .auth-box input[type="password"]:focus-visible{ border-color:var(--li-blue); box-shadow:0 0 0 2px rgba(10,102,194,.20); } /* ---- password wrapper + eye toggle ---- */ #authContainer .pw-wrap{position:relative;} #authContainer .pw-wrap input[type="text"], #authContainer .pw-wrap input[type="password"]{ padding-right:52px; /* clear space for the eye button */ } #authContainer .pw-toggle{ position:absolute; top:50%; right:6px; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; min-width:44px; margin:0; padding:0; background:transparent; border:none; border-radius:6px; color:var(--li-gray); cursor:pointer; } #authContainer .pw-toggle:hover{color:var(--li-ink);} #authContainer .pw-toggle:focus-visible{ outline:3px solid var(--li-blue); outline-offset:2px; } #authContainer .pw-toggle svg{width:20px;height:20px;display:block;} #authContainer .pw-toggle .icon-eye-off{display:none;} #authContainer .pw-toggle[aria-pressed="true"] .icon-eye{display:none;} #authContainer .pw-toggle[aria-pressed="true"] .icon-eye-off{display:block;} /* ---- keep-signed-in row (decorative: auth.js does not read it) ---- */ #authContainer .remember{ display:flex; align-items:center; gap:8px; margin:18px 0 4px; color:var(--li-ink); font-family:inherit; font-size:.9rem; cursor:pointer; user-select:none; } #authContainer .remember input[type="checkbox"]{ width:18px; height:18px; min-height:18px; margin:0; padding:0; background:transparent; border:0; accent-color:var(--li-blue); cursor:pointer; flex:0 0 auto; } #authContainer .remember input[type="checkbox"]:focus-visible{ outline:3px solid var(--li-blue); outline-offset:2px; } /* ---- submit ---- */ #authContainer #loginForm button[type="submit"]{ width:100%; margin-top:8px; padding:0 24px; min-height:48px; color:var(--li-white); background:var(--li-blue); border:none; border-radius:999px; font-family:inherit; font-size:1rem; font-weight:600; cursor:pointer; transition:background .15s ease; } #authContainer #loginForm button[type="submit"]:hover{ background:var(--li-blue-dark); } #authContainer #loginForm button[type="submit"]:active{ background:var(--li-blue-dark); } #authContainer #loginForm button[type="submit"]:focus-visible{ outline:3px solid var(--li-blue); outline-offset:3px; } /* ---- error (replaces inherited side-stripe with full hairline) ---- */ #authContainer #authError{ margin-top:14px; padding:10px 12px; color:#9b2c2c; /* unified with the Log out button (dashboard-theme.css #currentCompany button); ~7.5:1 on white */ background:rgba(155,44,44,.06); border:1px solid rgba(155,44,44,.30); border-left:1px solid rgba(155,44,44,.30); border-radius:6px; font-family:inherit; font-size:.85rem; } /* ---- reduced motion ---- */ @media (prefers-reduced-motion: reduce){ #authContainer .auth-box{animation:none;} #authContainer #loginForm button[type="submit"]{transition:none;} } /* ---- narrow screens ---- */ @media (max-width:480px){ #authContainer{padding:16px;} #authContainer .auth-box{padding:24px 20px;} #authContainer .auth-wordmark{top:24px;font-size:1.4rem;} #authContainer .auth-wordmark::after{width:160px;} }