/* ========================================================================== GSCTEMPC — REGISTER PAGE, DESIGN-SYSTEM ADDITIONS register.php loads this ALONGSIDE assets/css/login-enhanced.css, not instead of it -- every color, font, shell, ambient, alert, input, and button rule comes from that shared file so both auth pages look and animate identically. This file only adds the handful of things login.php's markup never needed: a textarea field, a two-column password row, a fix for centering a tall/overflowing form, and slightly taller scroll handling for the extra fields. ========================================================================== */ /* Register has more fields than login, so let the form panel scroll on short viewports instead of the whole page fighting for space -- same idea the original register.php used (max-height + overflow-y). IMPORTANT: this only applies above the 900px breakpoint, where login-enhanced.css keeps .lg-brand and .lg-form-panel side-by-side -- there, capping the form panel to its own internal scroll region while the brand panel stays put makes sense. Below 900px, login-enhanced.css STACKS .lg-brand on top of .lg-form-panel into a single column (see its own @media (max-width: 900px) rule), so the whole thing is meant to scroll as one normal page from there down. Register has enough fields (username, email, phone, address, member type, birthdate/age, gender/civil status, nationality, two passwords) that the stacked column is reliably taller than one mobile screen -- but with max-height:100vh + overflow-y:auto still active, that created a scroll box capped to the viewport height, nested inside a page that was already taller than the viewport. Mobile touch scrolling locked onto the outer page first and never reached that inner scrollbar, so the bottom of the form (Create Account button and beyond) was effectively unreachable. Resetting both properties back to normal below 900px lets the page scroll the standard way instead. */ .lg-form-panel { max-height: 100vh; overflow-y: auto; /* -------------------------------------------------------------- DESKTOP CLIPPING FIX (>900px): login-enhanced.css makes .lg-form-panel a flex box with `align-items: center` to vertically center login's short form. That's fine as long as the content fits -- but combined with this file's `overflow-y: auto` above, a TALL form (register's, once it no longer fits in one viewport) hits a well-known flex bug: centering splits the overflow evenly above AND below the midpoint, but a scrollbar can never scroll to a negative offset, so the top slice of content becomes permanently unreachable. Visually, that stuck slice sits right behind .lg-shell's own rounded top-right corner and drop shadow -- which is what shows up as a dark rounded shape cutting across the Username/Email fields, not a separate decoration bleeding in from elsewhere. login.php never hits this because its form is short enough to never overflow its box. Fix: override `display` back to a normal block box here, so align-items no longer applies at all, and center the inner wrapper the old-fashioned way instead (margin: 0 auto, set on .lg-form-panel__inner--register below). Block layout has no overflow-centering bug in any browser -- content simply flows top to bottom and scrolls normally past the box's height. */ display: block; } @media (max-width: 900px) { .lg-form-panel { max-height: none; overflow-y: visible; } } .lg-form-panel__inner--register { max-width: 400px; /* Replaces the horizontal centering login-enhanced.css was doing via flex `justify-content: center` on the parent -- needed now that .lg-form-panel above is `display: block`, not flex. */ margin: 0 auto; } /* -------------------------- Address textarea -------------------------- */ /* Mirrors the input styling in login-enhanced.css exactly (same padding, border, radius, focus ring) since that file only ever styled input[type="text"] / input[type="password"]. */ .lg-field textarea { width: 100%; padding: 13.5px 15px 13.5px 43px; background: #f7faf7; border: 1.5px solid #e0e8e0; border-radius: var(--radius-input); color: var(--ink); font-size: 0.95rem; font-family: var(--body-font); min-height: 76px; resize: vertical; transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, box-shadow var(--dur-fast) ease; -webkit-appearance: none; appearance: none; } .lg-field textarea::placeholder { color: #b6c2b8; } .lg-field textarea:hover { border-color: #c9dbc9; } .lg-field textarea:focus { border-color: var(--secondary-green); outline: none; background: var(--white); box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.14); } .lg-field textarea:focus ~ .lg-input-icon, .lg-input-shell:focus-within .lg-input-icon { color: var(--secondary-green); } /* Address icon sits at the top of the textarea rather than vertically centered, since the field grows taller than a single input line. */ .lg-input-icon--top { top: 16px; transform: none; } /* ----------------------------- Two-column rows ----------------------------- */ /* Password / Confirm Password, Birthdate / Age, Gender / Civil Status -- side-by-side on wide screens, stacked on narrow ones -- same breakpoint the shell itself stacks at, so the two layout changes read as one continuous adjustment rather than two independent breakpoints fighting each other. */ .lg-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .lg-form-row .lg-field { margin-bottom: 18px; } @media (max-width: 900px) { .lg-form-row { grid-template-columns: 1fr; gap: 0; } } /* A narrower in-between breakpoint (560px) also exists as a safety net inside register.php's own