/* ========================================================================== SSO Login Page — configurable theme styles -------------------------------------------------------------------------- Every visual aspect of the login page is driven by CSS custom properties (--lt-*) plus a few data attributes on : body[data-layout] : centered | split-left | split-right body[data-icons] : on | off (input field icons) Values are set at runtime by /js/login-theme-engine.js from the theme registry in /js/login-themes.js. Nothing in this file is agency-specific. ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Typography */ --lt-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Page background (any CSS background shorthand value) */ --lt-page-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Text that sits directly on the page background */ --lt-page-text: #ffffff; --lt-link: #ffffff; /* Brand / theme colors */ --lt-primary: #667eea; --lt-on-primary: #ffffff; --lt-btn-bg: var(--lt-primary); --lt-btn-hover-shadow: 0 5px 15px rgba(0, 0, 0, 0.25); --lt-focus-ring: rgba(102, 126, 234, 0.25); --lt-brand-text: #667eea; /* Card (the box around the form). Transparent card = form floats directly on the background, as in the agency mockups. */ --lt-card-bg: transparent; --lt-card-shadow: none; --lt-card-padding: 0; --lt-card-radius: 12px; --lt-card-max-width: 400px; --lt-card-text: #ffffff; /* Inputs */ --lt-input-bg: rgba(255, 255, 255, 0.75); --lt-input-text: #2c3e50; --lt-input-placeholder: #7b8794; --lt-input-border: rgba(255, 255, 255, 0.45); --lt-input-radius: 8px; /* Logo */ --lt-logo-max-height: 150px; --lt-logo-max-width: 320px; /* Optional side panel image (split layouts) */ --lt-panel-image: none; --lt-panel-bg: #1f34c0; } html, body { min-height: 100vh; } /* The hidden attribute must always win over display rules below */ [hidden] { display: none !important; } body { font-family: var(--lt-font-family); background: var(--lt-page-bg); background-attachment: fixed; color: var(--lt-page-text); } /* -------------------------------------------------------------------------- Page scaffolding / layout modes -------------------------------------------------------------------------- */ .lt-page { min-height: 100vh; display: flex; } .lt-panel { display: none; background: var(--lt-panel-bg); background-image: var(--lt-panel-image); background-size: cover; background-position: center; } .lt-main { flex: 1; min-height: 100vh; display: flex; flex-direction: column; padding: 0 20px; } /* Split layouts: image panel beside the form column */ body[data-layout="split-left"] .lt-page, body[data-layout="split-right"] .lt-page { display: grid; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); } body[data-layout="split-right"] .lt-page { grid-template-columns: minmax(0, 1fr) minmax(0, 44%); } body[data-layout="split-left"] .lt-panel, body[data-layout="split-right"] .lt-panel { display: block; } body[data-layout="split-right"] .lt-panel { order: 2; } /* -------------------------------------------------------------------------- Top bar (sign-up prompt, top-right in the mockups) -------------------------------------------------------------------------- */ .lt-topbar { display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 26px 34px 0 34px; min-height: 76px; } .lt-topbar-text { font-size: 16px; color: var(--lt-page-text); opacity: 0.92; } .lt-btn-signup { display: inline-block; background: var(--lt-btn-bg); color: var(--lt-on-primary); text-decoration: none; font-size: 15px; font-weight: 600; padding: 11px 24px; border-radius: 8px; transition: box-shadow 0.2s, transform 0.2s; } .lt-btn-signup:hover { box-shadow: var(--lt-btn-hover-shadow); transform: translateY(-1px); } /* -------------------------------------------------------------------------- Centered content + card -------------------------------------------------------------------------- */ .lt-content { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 0; } .lt-card { width: 100%; max-width: var(--lt-card-max-width); background: var(--lt-card-bg); box-shadow: var(--lt-card-shadow); border-radius: var(--lt-card-radius); padding: var(--lt-card-padding); color: var(--lt-card-text); } /* Brand block (logo or agency name) */ .lt-brand { text-align: center; margin-bottom: 34px; } .lt-logo { max-height: var(--lt-logo-max-height); max-width: var(--lt-logo-max-width); width: auto; height: auto; } .lt-brand-name { color: var(--lt-brand-text); font-size: 28px; font-weight: 600; } .lt-welcome { margin-top: 8px; font-size: 14px; opacity: 0.9; } /* -------------------------------------------------------------------------- Form -------------------------------------------------------------------------- */ .form-group { margin-bottom: 16px; } .form-group label { display: block; color: var(--lt-card-text); font-weight: 500; margin-bottom: 8px; font-size: 14px; } /* Accessible but invisible labels when the theme hides them */ .lt-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .input-wrapper { position: relative; display: flex; align-items: center; } .input-icon { position: absolute; left: 15px; color: #999; font-size: 18px; pointer-events: none; } body[data-icons="off"] .input-icon { display: none; } .form-group input { width: 100%; padding: 15px 16px 15px 45px; border: 1px solid var(--lt-input-border); border-radius: var(--lt-input-radius); font-size: 15px; font-family: inherit; color: var(--lt-input-text); background: var(--lt-input-bg); transition: border-color 0.3s, box-shadow 0.3s; } body[data-icons="off"] .form-group input { padding-left: 16px; } .form-group input::placeholder { color: var(--lt-input-placeholder); } .form-group input:focus { outline: none; border-color: var(--lt-primary); box-shadow: 0 0 0 3px var(--lt-focus-ring); } .password-toggle { position: absolute; right: 15px; cursor: pointer; color: #999; font-size: 16px; user-select: none; } .password-toggle:hover { color: var(--lt-primary); } .hidden { display: none !important; } /* Primary buttons (Sign in / Verify) */ .btn-login { width: 100%; padding: 15px; background: var(--lt-btn-bg); color: var(--lt-on-primary); border: none; border-radius: var(--lt-input-radius); font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .btn-login:hover { transform: translateY(-2px); box-shadow: var(--lt-btn-hover-shadow); } .btn-login:disabled { background: #ccc; cursor: not-allowed; transform: none; box-shadow: none; } /* Forgot password link (below the sign-in button in the mockups) */ .forgot-password { text-align: right; margin-top: 14px; } .forgot-password a { color: var(--lt-link); text-decoration: underline; font-size: 15px; } /* Divider + secondary "Continue with Account" action (MEB mockup) */ .lt-divider { border: none; border-top: 1px solid rgba(255, 255, 255, 0.45); margin: 26px 0; } .lt-btn-secondary { display: block; width: 100%; padding: 15px; background: var(--lt-btn-bg); color: var(--lt-on-primary); text-align: center; text-decoration: none; border-radius: var(--lt-input-radius); font-size: 16px; font-weight: 600; transition: transform 0.2s, box-shadow 0.2s; } .lt-btn-secondary:hover { transform: translateY(-2px); box-shadow: var(--lt-btn-hover-shadow); } /* Inline sign-up prompt (shown below the form instead of the top bar when the theme sets signup.position = "below-form") */ .lt-signup-inline { margin-top: 22px; text-align: center; font-size: 14px; color: var(--lt-card-text); } .lt-signup-inline a { color: var(--lt-primary); text-decoration: none; font-weight: 600; } .lt-signup-inline a:hover { text-decoration: underline; } /* OAuth client info (index.html: " — Please sign in to continue") */ .lt-client-info { text-align: center; margin-bottom: 24px; color: var(--lt-card-text); } .lt-client-info h3 { font-size: 22px; font-weight: 600; margin-bottom: 4px; } .lt-client-info p { font-size: 14px; opacity: 0.9; } /* Logged-in user info box (index.html, no-OAuth-params state) */ .user-info { background: rgba(255, 255, 255, 0.92); border-radius: 8px; padding: 20px; margin-bottom: 20px; color: #333; } .user-info h3 { color: #1976D2; margin-bottom: 15px; } .user-info p { margin: 8px 0; } .user-info strong { color: #1565C0; } .user-info .btn-dashboard { display: inline-block; width: 100%; padding: 12px; background: var(--lt-btn-bg); color: var(--lt-on-primary); text-align: center; border-radius: 6px; text-decoration: none; font-weight: 600; margin-top: 15px; } .btn-logout { width: 100%; padding: 12px; background: #f44336; color: white; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer; margin-top: 10px; transition: background 0.3s; } .btn-logout:hover { background: #d32f2f; } .session-expiry { background: #fff9e6; border: 1px solid #ffc107; border-radius: 6px; padding: 10px; margin-top: 15px; font-size: 13px; color: #856404; text-align: center; } .session-expiry.warning { background: #ffebee; border-color: #f44336; color: #c62828; } /* -------------------------------------------------------------------------- Messages / OTP / loading (kept from the original page, theme-aware colors) -------------------------------------------------------------------------- */ .error-message { background: #fee; color: #c33; border: 1px solid #c33; padding: 12px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; display: none; } .error-message.show { display: block; } .otp-container { text-align: center; } .otp-info { background: #e8f5e9; border: 1px solid #4caf50; border-radius: 6px; padding: 15px; margin-bottom: 20px; color: #2e7d32; font-size: 14px; text-align: left; } .otp-info strong { color: #1b5e20; } .otp-input-group { margin: 20px 0; } .otp-input { font-size: 24px; letter-spacing: 10px; text-align: center; max-width: 280px; margin: 0 auto; font-family: 'Courier New', monospace; font-weight: bold; } .otp-actions { margin-top: 15px; text-align: center; } .btn-resend { background: transparent; color: var(--lt-card-text); border: 2px solid currentColor; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; font-family: inherit; transition: all 0.3s; margin-top: 10px; display: inline-block; } .btn-resend:hover:not(:disabled) { background: var(--lt-btn-bg); border-color: transparent; color: var(--lt-on-primary); } .btn-resend:disabled { opacity: 0.5; cursor: not-allowed; } .btn-back { background: transparent; color: var(--lt-card-text); opacity: 0.85; border: none; padding: 10px; cursor: pointer; font-size: 14px; font-family: inherit; text-decoration: underline; margin-top: 10px; display: inline-block; } .btn-back:hover { opacity: 1; } .loading { display: none; text-align: center; margin-top: 15px; color: var(--lt-card-text); opacity: 0.85; font-size: 14px; } .loading.show { display: block; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .lt-footer { text-align: center; padding: 26px 20px 34px 20px; font-size: 15px; color: var(--lt-page-text); } .lt-footer a { color: var(--lt-footer-link, var(--lt-page-text)); text-decoration: underline; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 900px) { body[data-layout="split-left"] .lt-page, body[data-layout="split-right"] .lt-page { display: flex; } body[data-layout="split-left"] .lt-panel, body[data-layout="split-right"] .lt-panel { display: none; } } @media (max-width: 640px) { .lt-topbar { padding: 18px 20px 0 20px; min-height: 60px; } .lt-topbar-text { font-size: 14px; } .lt-btn-signup { padding: 9px 18px; font-size: 14px; } .lt-brand { margin-bottom: 26px; } :root { --lt-logo-max-height: 110px; --lt-logo-max-width: 240px; } .lt-footer { font-size: 13px; padding-bottom: 24px; } }