/* css/tonegrid-login-layouts.css * ───────────────────────────────────────────────────────────────────────── * Tenant-selectable layouts for the auth pages (login, signup, forgot/reset * password, OTP), driven by the data-lp-* * attributes includes/login-page-layout.php puts on (so the admin live * preview can switch them client-side). * * classic the original split screen: carousel panel + form panel. * data-lp-position="left" puts the form on the left. * centered no carousel. The form sits in a single centred column on the * app background, in the same surface card the app uses * (dark tokens from tonegrid-saas.css: --tg-surface #131316, * --tg-line rgba(255,255,255,.07)). Same fields, fonts and brand * colour as the classic page; nothing else changes. * * Every rule is scoped under html[data-lp-*]. A page rendered with the * defaults (classic / right) is identical to the original page. */ /* ── Shared bits ─────────────────────────────────────────────────────── */ .lp-brand { display: none; margin-bottom: 28px; } .lp-brand img { display: block; max-height: 40px; max-width: 180px; width: auto; height: auto; object-fit: contain; } .lp-brand--center img { margin-inline: auto; } .lp-footer { margin-top: 28px; font-size: .8rem; line-height: 1.5; color: rgba(255, 255, 255, .55); overflow-wrap: anywhere; } .lp-footer[hidden] { display: none; } /* ── Classic split: form on the left ─────────────────────────────────── */ html[data-lp-layout="classic"][data-lp-position="left"] .login-container { flex-direction: row-reverse; } html[data-lp-layout="classic"][data-lp-position="left"] .login-logo-panel { border-radius: 0 32px 32px 0; } /* ═════════════════════════════════════════════════════════════════════ Centered: no carousel, one column, app surface card ═════════════════════════════════════════════════════════════════════ */ html[data-lp-layout="centered"] .login-logo-panel { display: none !important; } html[data-lp-layout="centered"] .login-container { flex-direction: column; align-items: center; justify-content: center; height: auto; min-height: 100vh; min-height: 100dvh; padding: 48px 24px; overflow: visible; box-sizing: border-box; } html[data-lp-layout="centered"] .login-form-panel { flex: none; display: block; width: 100%; max-width: 460px; padding: 0; overflow: visible; } html[data-lp-layout="centered"] .form-wrapper { max-width: none; max-height: none; padding: 40px; background: #131316; border: 1px solid rgba(255, 255, 255, .07); border-top: 1.5px solid rgba(255, 255, 255, .12); border-radius: 14px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 10px 40px rgba(0, 0, 0, .18), 0 1px 0 rgba(255, 255, 255, .05) inset; box-sizing: border-box; } html[data-lp-layout="centered"][data-lp-logo="on"] .lp-brand { display: block; } html[data-lp-layout="centered"] .form-wrapper h1 { font-size: 2.25rem; line-height: 1.15; } html[data-lp-layout="centered"] .form-wrapper p.sub { font-size: 1.05rem; line-height: 1.5; margin-bottom: 28px; } /* Inputs sit one step above the card surface (#18181d = --tg-surface-2). */ html[data-lp-layout="centered"] .form-wrapper .form-group input { background: #18181d; } html[data-lp-layout="centered"] .form-wrapper .form-group input:-webkit-autofill, html[data-lp-layout="centered"] .form-wrapper .form-group input:-webkit-autofill:hover, html[data-lp-layout="centered"] .form-wrapper .form-group input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #18181d inset !important; box-shadow: 0 0 0 1000px #18181d inset !important; } @media (max-width: 768px) { html[data-lp-layout="centered"] .login-container { padding: 24px 16px; } } @media (max-width: 480px) { /* Phones: drop the card chrome and let the form use the full width. */ html[data-lp-layout="centered"] .form-wrapper { padding: 8px 4px; background: transparent; border: 0; box-shadow: none; } }