/* ============================================================ login-mobile-fix.css Mobile responsiveness improvements for login.php Add AFTER auth.css in the of login.php ============================================================ */ /* ---------------------------------------------------------- 1. PAGE LAYOUT — constrain and center the whole login flow ---------------------------------------------------------- */ .login-page { min-height: 100vh; background: linear-gradient(160deg, #f2f7f3 0%, #eaf1eb 100%); overflow-x: hidden; } .login-page .auth-layout { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 76px); /* 76px = approx nav height */ width: 100%; max-width: 100%; padding: clamp(1.5rem, 4vh, 3rem) 1rem; box-sizing: border-box; gap: 0; } /* ---------------------------------------------------------- 2. HERO / HEADER — replace the large empty green block with a clean centered brandmark + headline ---------------------------------------------------------- */ .login-page .login-page__hero { width: min(480px, 100%); text-align: center; margin-bottom: 1.1rem; } .login-page .auth-card__header { text-align: center; margin-bottom: 0; } .login-page .auth-card__header h1 { font-size: clamp(1.55rem, 4vw, 2rem); font-weight: 800; color: #0f1f14; letter-spacing: -0.025em; margin: 0 0 0.3rem; line-height: 1.2; } .login-page .auth-card__header p { font-size: 0.92rem; color: #6d7d8f; margin: 0; font-weight: 500; } /* ---------------------------------------------------------- 3. AUTH CARD — proper card styling with shadow/border ---------------------------------------------------------- */ .login-page .auth-card--login { width: min(480px, 100%); background: #ffffff; border: 1px solid #e2e8f0; border-radius: 20px; padding: clamp(1.3rem, 3vw, 1.8rem) clamp(1.2rem, 3vw, 1.75rem); box-shadow: 0 4px 6px rgba(15, 23, 42, 0.04), 0 16px 32px rgba(15, 23, 42, 0.08); box-sizing: border-box; } /* ---------------------------------------------------------- 4. FORM FIELDS — proper spacing, sizing, iOS zoom fix ---------------------------------------------------------- */ .login-page .auth-form { display: grid; gap: 1rem; } .login-page .field-group { display: grid; gap: 0.4rem; } .login-page .field-group span, .login-page .field-group label { font-size: 0.875rem; font-weight: 600; color: #1e2a37; } .login-page .field-group input { width: 100%; min-height: 46px; padding: 0.68rem 0.85rem; border: 1.5px solid #dce3ec; border-radius: 11px; background: #f9fbfd; font-size: 16px; /* critical: prevents iOS auto-zoom on focus */ color: #1e2a37; outline: none; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; box-sizing: border-box; -webkit-appearance: none; /* removes iOS inner shadow */ } .login-page .field-group input:focus { border-color: #21693A; background: #ffffff; box-shadow: 0 0 0 3px rgba(33, 105, 58, 0.14); } .login-page .field-group input::placeholder { color: #a0acbd; font-size: 0.9rem; } /* Password wrap */ .login-page .password-input-wrap { position: relative; } .login-page .password-input-wrap input { padding-right: 3rem; } .login-page .password-toggle { position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; border: 0; background: transparent; color: #8394a8; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; font-size: 1.1rem; } .login-page .password-toggle:hover { color: #2d3f55; } /* Forgot password link */ .login-page .login-page__forgot-link { display: flex; justify-content: flex-end; margin-top: 0.3rem; font-size: 0.84rem; font-weight: 600; color: #21693A; text-decoration: none; } .login-page .login-page__forgot-link:hover { text-decoration: underline; } /* ---------------------------------------------------------- 5. SUBMIT BUTTON — full-width, proper height, green ---------------------------------------------------------- */ .login-page .auth-form__submit { width: 100%; min-height: 48px; border-radius: 12px; background: #21693A; border: 1px solid #21693A; color: #ffffff; font-size: 0.98rem; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; transition: background 0.18s ease, transform 0.12s ease; margin-top: 0.2rem; -webkit-appearance: none; } .login-page .auth-form__submit:hover { background: #184f2b; border-color: #184f2b; } .login-page .auth-form__submit:active { transform: scale(0.985); } /* ---------------------------------------------------------- 6. META / REGISTER LINK — below the card ---------------------------------------------------------- */ .login-page .login-page__meta-outside { width: min(480px, 100%); margin-top: 1rem; text-align: center; padding: 0.9rem 1rem; border: 1px solid #e2ead4; border-radius: 14px; background: rgba(255, 255, 255, 0.7); } .login-page .login-page__meta-outside p { margin: 0 0 0.3rem; font-size: 0.88rem; color: #6d7d8f; font-weight: 500; } .login-page .login-page__meta-outside a { display: inline-block; font-size: 0.93rem; font-weight: 700; color: #21693A; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color 0.18s ease; padding-bottom: 1px; } .login-page .login-page__meta-outside a:hover { border-bottom-color: #21693A; } /* ---------------------------------------------------------- 7. MOBILE BREAKPOINT — fine-tune for small phones ---------------------------------------------------------- */ @media (max-width: 480px) { .login-page .auth-layout { padding: 1.25rem 0.75rem 2rem; justify-content: flex-start; padding-top: clamp(1.5rem, 5vh, 2.5rem); } .login-page .login-page__hero { margin-bottom: 0.85rem; } .login-page .auth-card__header h1 { font-size: 1.45rem; } .login-page .auth-card__header p { font-size: 0.88rem; } .login-page .auth-card--login { border-radius: 16px; padding: 1.15rem 1.1rem 1.25rem; /* On very small screens, soften the card border so it feels more like a sheet than a floating card */ box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 8px 20px rgba(15, 23, 42, 0.07); } .login-page .field-group input { min-height: 48px; /* larger tap target on phone */ } .login-page .auth-form__submit { min-height: 50px; font-size: 1rem; border-radius: 13px; } .login-page .login-page__meta-outside { border-radius: 12px; padding: 0.8rem 0.9rem; } } /* ---------------------------------------------------------- 8. VERY SMALL PHONES (SE, Moto G) — ≤360px ---------------------------------------------------------- */ @media (max-width: 360px) { .login-page .auth-card--login { padding: 1rem 0.9rem 1.1rem; } .login-page .auth-card__header h1 { font-size: 1.3rem; } } /* ---------------------------------------------------------- 9. SAFE AREA — iPhone notch / dynamic island padding ---------------------------------------------------------- */ @supports (padding-top: env(safe-area-inset-top)) { .login-page .auth-layout { padding-bottom: max(2rem, env(safe-area-inset-bottom)); } }