.auth-section { display: flex; justify-content: center; padding-top: 4.8rem; } .auth-card { width: 100%; max-width: 42rem; background-color: #fff; border-radius: 11px; box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075); padding: 4rem; } .auth-form { display: flex; flex-direction: column; } /* Same root cause as the landing hero buttons: this page's carries neither theme-admin nor theme-client, so it never picks up either theme's `.btn .icon` sizing rule — the plus/key SVGs were rendering at the browser's unstyled default size, ballooning the button regardless of padding. Sized here, plus a smaller/tighter "professional" button treatment generally. */ .auth-form .btn { margin-top: 0.8rem; padding: 1.1rem 2rem; font-size: 1.4rem; } .auth-form .btn .icon { width: 1.6rem; height: 1.6rem; vertical-align: -0.2rem; margin-right: 0.2rem; } /* ---- Login — 50/50 split: photo collage with instruction capsules, sign-in form ---- */ /* Fixed height, not min-height, same reasoning as the landing hero: a fixed one-screen box can't grow taller than the viewport from its own content, so it never forces a page scroll. margin-top cancels main's top padding (global.css) the same way the hero does, so the split sits flush under the header instead of leaving a gap. */ .login-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; height: 100vh; overflow: hidden; margin-top: -3.2rem; margin-left: -3.2rem; margin-right: -3.2rem; width: calc(100% + 6.4rem); } .login-collage { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.6rem; padding: 0.6rem; overflow: hidden; background-color: var(--color-shade-2); } .login-collage-img { width: 100%; height: 100%; object-fit: cover; } .login-collage-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.45) 100%); pointer-events: none; } .login-capsule { position: absolute; z-index: 2; padding: 1rem 1.8rem; border-radius: 100px; font-size: 1.4rem; font-weight: 600; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } .login-capsule--green { background-color: #2f9e44; color: #fff; } .login-capsule--yellow { background-color: #f6d45d; color: #412402; } .login-capsule-1 { top: 8%; left: 6%; } .login-capsule-2 { top: 46%; right: 6%; } .login-capsule-3 { bottom: 8%; left: 10%; } .login-form-panel { display: flex; align-items: center; justify-content: center; padding: 4rem 3.2rem; } .login-form-panel-inner { width: 100%; max-width: 40rem; } @media (max-width: 900px) { .login-split { grid-template-columns: 1fr; height: auto; overflow: visible; min-height: 100vh; } .login-collage { min-height: 30rem; } .login-capsule { font-size: 1.2rem; padding: 0.8rem 1.4rem; } }