/* ============================================================ REGISTER — same two-panel frame as sign-in, wider form Loaded after login.css, which supplies the panel, field, social and strip styling. Only the differences live here. ============================================================ */ /* the form has two columns, so it needs more of the width than sign-in */ .rg-wrap{ max-width:1440px; } .rg-grid{ grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); } /* ---------- left panel ---------- The brighter border and standing glow both panels carry now live in login.css's own .lg-visual/.lg-form rules — this page's panels carry those classes too, so nothing register-specific is needed here. */ .rg-visual{ min-height:clamp(620px, 78vh, 820px); } .rg-art{ /* the artwork's subject sits low and centred, so anchor it to the bottom and let the copy have the empty upper half */ background:url("../assets/register-hero.jpg") center bottom/cover no-repeat; /* the copy runs almost the full height of this panel, so the art is a backdrop rather than a co-star */ opacity:.7; } .rg-visual::after{ background: /* holds its darkness through the feature list and only opens up in the last fifth, where the laptop and the glowing floor sit */ linear-gradient(180deg, rgba(6,2,4,.96) 0%, rgba(6,2,4,.93) 40%, rgba(6,2,4,.86) 62%, rgba(6,2,4,.6) 80%, rgba(6,2,4,.15) 100%), radial-gradient(ellipse at 18% 12%, rgba(255,26,46,.16), transparent 58%); } /* the copy sits above the laptop rather than beside it here */ @media (min-width:1081px){ .page-register .lv-body{ max-width:100%; } } .page-register .lv-points{ margin-top:22px; gap:15px; } .page-register .lv-points li{ align-items:flex-start; } .page-register .lv-points span{ line-height:1.45; } /* ---------- right panel ---------- */ .rg-form{ padding:24px 26px 22px; } .rg-form .lf-head h2{ font-size:22px; } #regForm{ margin-top:18px; display:flex; flex-direction:column; gap:13px; } /* Rows align because every cell is a grid item in its own row track and the label above each input is exactly one line — "(Optional)" wrapping onto a second line was what pushed the phone field below the email field. */ .rg-grid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 16px; align-items:start; } .rg-grid2 .lf-field{ gap:6px; } .rg-grid2 .lf-field > span:first-child{ font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* named rg-opt, not opt: style.css already uses .opt for the settings-menu rows, and that rule is display:flex with padding — it turned this hint into its own block and pushed the phone field out of line */ .rg-grid2 .lf-field > span:first-child i.rg-opt{ display:inline; color:#6a6a74; font-style:normal; font-size:11px; letter-spacing:0; } .rg-grid2 .lf-input input, .rg-grid2 .lf-input select{ padding:11px 40px 11px 37px; font-size:13px; } /* selects need the same chrome as the inputs, plus their own caret */ .lf-input select{ width:100%; border-radius:10px; cursor:pointer; appearance:none; background:rgba(255,255,255,.03); border:1px solid var(--line-soft); font-family:var(--body); color:var(--text); outline:none; transition:.16s; background-image: linear-gradient(45deg, transparent 50%, #8b8b95 50%), linear-gradient(135deg, #8b8b95 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .lf-input select:focus{ border-color:rgba(255,26,46,.55); background-color:rgba(255,26,46,.05); } .lf-input select option{ background:#120a0d; } /* a chosen value keeps the red border, matching the text inputs */ .lf-input select:valid:not([value=""]){ border-color:rgba(255,255,255,.06); } /* phone: dial code + number share one row */ .rg-phone{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:8px; } .rg-phone select{ width:100%; padding:11px 22px 11px 11px; border-radius:10px; cursor:pointer; appearance:none; background:rgba(255,255,255,.03); border:1px solid var(--line-soft); font-family:var(--body); font-size:12.5px; color:var(--text); outline:none; transition:.16s; background-image: linear-gradient(45deg, transparent 50%, #8b8b95 50%), linear-gradient(135deg, #8b8b95 50%, transparent 50%); background-position: calc(100% - 14px) calc(50% + 1px), calc(100% - 9px) calc(50% + 1px); background-size: 5px 5px, 5px 5px; background-repeat:no-repeat; } .rg-phone select:focus{ border-color:rgba(255,26,46,.55); background-color:rgba(255,26,46,.05); } .rg-phone select option{ background:#120a0d; } /* a disabled city select reads as "waiting on the country above" */ .lf-input select:disabled{ opacity:.55; cursor:not-allowed; } /* The standing glow on plain text inputs lives in login.css's .lf-input input rules now (shared by both auth screens). The controls below are register-only — the themed dropdown and calendar buttons (js/cselect.js, js/cdate.js) and the plain