/* ============================================================================ LaQuest Payroll — Auth design system. Pixel-matched to design/auth-reference.html, built on the shared tokens in tokens.css (the reference palette IS the token palette: --blue #1e36c9, --blue-hover #2f6bf0, --ink #161d29, --muted, --faint, --line, Inter). Used by login.html (custom chrome around the Catalyst iframe) and by the SPA full-screen Verification Code + Reset Password views. ============================================================================ */ /* Auth pages are PRE-LOGIN: there is no user theme yet, so they ALWAYS render in the light theme. We hard-pin the light token values here (== the reference palette) so a saved dark preference on can't leak in. */ .auth-scope, .authscreen { --canvas: #f4f5f8; --card: #ffffff; --line: #ebedf1; --line-2: #e0e3e9; --ink: #161d29; --muted: #697084; --faint: #9aa1b1; --blue: #1e36c9; --blue-hover: #2f6bf0; --blue-t: #eaf1fe; --green: #10b981; --color-canvas: #f4f5f8; --color-surface: #ffffff; --color-surface-sunken: #f4f5f8; --color-border: #ebedf1; --color-border-strong: #e0e3e9; --color-ink: #161d29; --color-ink-muted: #697084; --color-ink-subtle: #9aa1b1; --color-primary: #1e36c9; --color-primary-hover: #2f6bf0; --auth-ink-2: #3a4150; --auth-line-2: #e0e3e9; --auth-green: #10b981; color-scheme: light; color: var(--auth-ink-2); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; } /* FULL-SCREEN wrapper — fills the viewport (login page + SPA overlays). */ .authscreen { position: fixed; inset: 0; z-index: 200; overflow: auto; background: #f4f5f8; display: block; padding: 0; margin: 0; } /* split layout — edge-to-edge, 100vw x 100vh, NOT a floating card. */ .auth { width: 100%; min-height: 100vh; max-width: none; display: grid; grid-template-columns: 45% 1fr; background: #ffffff; border: none; border-radius: 0; overflow: hidden; box-shadow: none; } /* left visual panel — full-height, edge-to-edge gradient. */ .visual { position: relative; margin: 0; border-radius: 0; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 44px 48px; } .visual svg.bg { position: absolute; inset: 0; width: 100%; height: 100%; } .visual svg { } .brand { position: relative; display: flex; align-items: center; gap: 11px; color: #fff; font-weight: 600; font-size: 15px; letter-spacing: .005em; } .brand .m { width: 34px; height: 34px; border-radius: 11px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .26); display: grid; place-items: center; backdrop-filter: blur(6px); } .brand .m svg { width: 18px; height: 18px; } /* Brand logo lockup (shared shape with the app chrome): the reversed wordmark image is revealed only once it loads (.has-img); otherwise the white text lockup is the fallback. */ .brand .lq-logo { display: inline-flex; align-items: center; } .brand .lq-logo__img { height: 30px; width: auto; display: none; object-fit: contain; } .brand .lq-logo.has-img .lq-logo__img { display: block; } .brand .lq-logo.has-img .lq-logo-text { display: none; } .brand .lq-logo-text { color: #fff; font-weight: 600; font-size: 15px; letter-spacing: .005em; } .vfoot { position: relative; } .vfoot b { display: block; color: #fff; font-size: 27px; font-weight: 600; line-height: 1.24; letter-spacing: -.022em; margin-bottom: 11px; } .vfoot p { font-size: 13.5px; color: rgba(255, 255, 255, .78); line-height: 1.6; max-width: 310px; } .vrule { height: 1px; background: rgba(255, 255, 255, .2); margin: 22px 0 16px; } .chips { display: flex; gap: 7px; flex-wrap: wrap; } .chips span { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .18); padding: 5px 10px; border-radius: 7px; } /* right pane ---------------------------------------------------------- */ .pane { display: flex; align-items: center; justify-content: center; padding: 40px 56px; } .form { width: 100%; max-width: 392px; } .back { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--color-ink-muted); border: 1px solid var(--auth-line-2); margin-bottom: 30px; cursor: pointer; background: var(--color-surface); } .back:hover { background: var(--color-canvas); } .back svg { width: 17px; height: 17px; } .auth h1 { font-size: 33px; font-weight: 700; color: var(--color-ink); letter-spacing: -.03em; line-height: 1.12; } .auth .sub { font-size: 13.5px; color: var(--color-ink-muted); margin-top: 10px; line-height: 1.55; } .auth .sub a, .auth .sub b { color: var(--color-ink); font-weight: 600; } .auth .sub a { text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .rows { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; } .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .f label { display: block; font-size: 12px; font-weight: 600; color: var(--auth-ink-2); margin-bottom: 7px; letter-spacing: .005em; } .inp { position: relative; } .inp input { width: 100%; border: 1px solid var(--auth-line-2); border-radius: 12px; padding: 14px 16px; font-family: inherit; font-size: 14px; color: var(--color-ink); background: var(--color-surface); transition: border-color .15s, box-shadow .15s; } .inp input::placeholder { color: var(--color-ink-subtle); } .inp input:focus, .inp.focus input { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--blue-t); } .inp .eye { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--color-ink-subtle); cursor: pointer; display: flex; background: none; border: none; padding: 0; } .inp .eye svg { width: 17px; height: 17px; } .fp { display: flex; justify-content: flex-end; margin-top: 10px; } .fp a { font-size: 12.5px; color: var(--color-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .auth .btn, .authbtn { width: 100%; padding: 15px; border-radius: 12px; border: none; background: var(--color-primary); color: #fff; font-family: inherit; font-weight: 600; font-size: 14.5px; letter-spacing: .005em; cursor: pointer; margin-top: 24px; box-shadow: 0 10px 22px -10px rgba(30,54,201, .6); transition: background .15s, opacity .15s; } .auth .btn:hover, .authbtn:hover { background: var(--color-primary-hover); } .auth .btn:disabled, .authbtn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; } .terms { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: 12.5px; color: var(--color-ink-muted); line-height: 1.5; cursor: pointer; } .terms .cb { width: 17px; height: 17px; border-radius: 5px; border: 1px solid var(--auth-line-2); position: relative; flex: none; margin-top: 1px; background: var(--color-surface); transition: background .12s, border-color .12s; } .terms.on .cb { background: var(--color-primary); border-color: var(--color-primary); } .terms .cb::after { content: ""; position: absolute; left: 5.5px; top: 2.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg); opacity: 0; transition: opacity .12s; } .terms.on .cb::after { opacity: 1; } .terms a { color: var(--color-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } /* Social sign-in is intentionally NOT offered: Catalyst gates every social provider behind Public Sign-up, which stays OFF next to payroll data. The screens are designed for email/password only — no provider row, no divider. */ .secure { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 30px; font-size: 11.5px; color: var(--color-ink-subtle); } .secure svg { width: 13px; height: 13px; } /* OTP ----------------------------------------------------------------- */ .otp { display: flex; gap: 10px; margin-top: 28px; } .otp input { flex: 1; width: 100%; min-width: 0; height: 62px; border: 1px solid var(--auth-line-2); border-radius: 14px; text-align: center; font-family: inherit; font-size: 23px; font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums; background: var(--color-surface); transition: border-color .15s, box-shadow .15s; } .otp input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--blue-t); } .otp input.filled { color: var(--color-ink); } .resend { margin-top: 15px; font-size: 12.5px; color: var(--color-ink-muted); display: flex; justify-content: space-between; } .resend b { color: var(--color-ink); font-weight: 700; font-variant-numeric: tabular-nums; } .resend a { color: var(--color-ink-subtle); font-weight: 600; cursor: pointer; } .resend a.ready { color: var(--color-primary); } /* password policy checklist ------------------------------------------ */ .policy { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; } .policy div { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-ink-subtle); font-weight: 500; transition: color .15s; } .policy div.ok { color: var(--auth-green); } .policy svg { width: 14px; height: 14px; flex: none; } /* inline validation / error message ---------------------------------- */ .auth-msg { margin-top: 16px; font-size: 12.5px; line-height: 1.5; padding: 11px 14px; border-radius: 10px; } .auth-msg--err { color: var(--color-danger-fg, #b42318); background: var(--red-t, #fdecec); border: 1px solid var(--red-t, #f6c9c9); } .auth-msg--ok { color: var(--auth-green); background: rgba(16, 185, 129, .1); border: 1px solid rgba(16, 185, 129, .25); } .auth-note { margin-top: 14px; font-size: 12px; color: var(--color-ink-muted); line-height: 1.55; display: flex; gap: 8px; align-items: flex-start; } .auth-note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--color-ink-subtle); } /* Catalyst iframe host — the credential fields live here. login.html measures the same-origin Zoho form and fits the iframe to it (no scrollbar, no clip); this generous fixed height is the pre-measure fallback. The iframe body is transparent (see embeddediframe.css) so any slack blends into the pane. */ .catalyst-host { margin-top: 20px; min-height: 300px; } .catalyst-host iframe { width: 100% !important; border: 0 !important; display: block; height: 460px !important; background: transparent !important; } .catalyst-loading { display: flex; align-items: center; justify-content: center; min-height: 300px; color: var(--color-ink-muted); font-size: 13.5px; } /* ===================================================================== */ /* RESPONSIVE — desktop (>=1024) is the untouched base above. */ /* Never let the page scroll sideways or the iframe overflow. */ /* ===================================================================== */ html, body { max-width: 100%; overflow-x: hidden; } .authscreen { overflow-x: hidden; } .auth { min-height: 100vh; min-height: 100dvh; } .catalyst-host iframe { max-width: 100% !important; } /* Tablet 768–1023: keep the split, narrow the panel, tighten spacing. */ @media (min-width: 768px) and (max-width: 1023px) { .auth { grid-template-columns: 38% 1fr; } .visual { padding: 32px 30px; } .vfoot b { font-size: 24px; } .vfoot p { font-size: 13px; } .pane { padding: 36px 40px; } .auth h1 { font-size: 28px; } } /* Mobile <768: STACK. Gradient collapses to a compact full-width top band (brand + short headline only); form full-width below with 24px sides. */ @media (max-width: 767px) { .auth { grid-template-columns: 1fr; } .visual { min-height: auto; justify-content: flex-start; gap: 14px; padding: calc(20px + env(safe-area-inset-top)) max(22px, env(safe-area-inset-left)) 22px max(22px, env(safe-area-inset-right)); } /* drop the long paragraph, divider and chips on mobile */ .visual .vfoot p, .visual .vrule, .visual .chips { display: none !important; } .visual .vfoot b { font-size: 19px; line-height: 1.25; margin-bottom: 0; } .brand { font-size: 14.5px; } .pane { align-items: flex-start; justify-content: center; padding: 26px max(24px, env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); } .form { max-width: none; } .auth h1 { font-size: 26px; } .auth .sub { font-size: 13px; } /* comfortably tappable (>=44px) */ .back { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 22px; } .auth .btn, .authbtn { min-height: 48px; padding: 14px; } .inp input, .otp input { min-height: 48px; } /* OTP: 6 boxes shrink to fit a 360px viewport — no wrap, no overflow */ .otp { gap: 8px; margin-top: 24px; } .otp input { height: 54px; font-size: 20px; border-radius: 11px; } .policy { grid-template-columns: 1fr; } } /* Very narrow phones (<=360px): tighten the OTP gap further. */ @media (max-width: 360px) { .otp { gap: 6px; } .otp input { height: 50px; font-size: 18px; } .pane { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); } }