carries BOTH classes: .login-2026 the shared auth skin from auth/auth.css, reused as-is .forgot-2026 the screen-only rules below Nothing here may match without .forgot-2026 on the page. THEME NOTE updatePublicTheme() only adds/removes .public-light-mode client-side, so after a toggle without a reload can carry both theme classes or neither. Dark is therefore the base and light is keyed off .public-light-mode, never off .public-dark-mode -- same contract as auth.css. ICON NOTE Font Awesome is pinned at 6.0.0 by headPublic.php. Only glyphs that exist in that release are used: fa-key, fa-envelope, fa-circle-info, fa-arrow-right, fa-arrow-left. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Left column This screen has no chip row, so the copy column is capped the way companyLogin/buyerLogin cap theirs, and the numbered steps take the space the chips occupy on the login screen. ---------------------------------------------------------------------- */ .forgot-2026 .l26-title { max-width: 14ch; } .forgot-2026 .l26-lead { max-width: 420px; } .forgot-2026 .fp26-steps { display: flex; flex-direction: column; gap: 14px; max-width: 420px; margin: 44px 0 0; padding: 0; list-style: none; counter-reset: none; } .forgot-2026 .fp26-step { display: flex; align-items: center; gap: 14px; color: var(--l26-chip-text); font-size: 14.5px; line-height: 1.45; } .forgot-2026 .fp26-num { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--l26-primary-line); border-radius: 50%; background: var(--l26-primary-soft); color: var(--l26-primary); font-size: 13px; font-weight: 700; line-height: 1; } /* ------------------------------------------------------------------------- 2. Card head #responseMessages sits above this and is hidden while empty (auth.css), so the head is the first thing with height inside the card. ---------------------------------------------------------------------- */ .forgot-2026 .fp26-head { margin: 0 0 26px; text-align: center; } .forgot-2026 .fp26-icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin: 0 0 16px; border: 1px solid var(--l26-primary-line); border-radius: 16px; background: var(--l26-primary-soft); color: var(--l26-primary); font-size: 20px; } .forgot-2026 .fp26-title { margin: 0; color: var(--l26-title); font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; } .forgot-2026 .fp26-sub { margin: 7px 0 0; color: var(--l26-text); font-size: 13.5px; line-height: 1.5; } /* ------------------------------------------------------------------------- 3. Email field The input keeps .l26-input from the shared skin; only the room for the leading icon is added here. These selectors are (0,2,0) like auth.css's, and win on source order because this sheet is linked after it. ---------------------------------------------------------------------- */ .forgot-2026 .fp26-input { padding-left: 44px; } .forgot-2026 .fp26-field-icon { position: absolute; top: 50%; left: 16px; transform: translateY(-50%); color: var(--l26-placeholder); font-size: 14px; pointer-events: none; transition: color .18s ease; } /* :has() is supported everywhere the rest of this design already relies on it (the 2026 vendor shell uses it for the sidebar backdrop). If it ever fails the icon simply stays grey, which is the resting state anyway. */ .forgot-2026 .fp26-input-wrap:has(.fp26-input:focus) .fp26-field-icon { color: var(--l26-primary); } .forgot-2026 .l26-field { margin-bottom: 0; } /* ------------------------------------------------------------------------- 4. Hint + back link ---------------------------------------------------------------------- */ .forgot-2026 .fp26-hint { display: flex; align-items: flex-start; gap: 9px; margin: 18px 0 0; padding: 11px 14px; border: 1px solid var(--l26-chip-line); border-radius: var(--l26-radius); background: var(--l26-chip); color: var(--l26-muted); font-size: 12.5px; line-height: 1.5; } .forgot-2026 .fp26-hint i { margin-top: 2px; color: var(--l26-primary); font-size: 12.5px; } .forgot-2026 .fp26-back { display: inline-flex; align-items: center; gap: 8px; } .forgot-2026 .fp26-back i { font-size: 11.5px; } /* ========================================================================= Responsive The grid, the card width and the card padding are all handled by auth.css's own breakpoints; only what this screen adds is adjusted here. ========================================================================= */ /* Mobile: form only. auth.css stacks the grid to one column at <=991.98px, which puts the whole intro column -- badge, headline, lead and the three steps -- above the card. On a phone that is a full screen of copy before the first field. From the breakpoint where the two columns stop sitting side by side, the intro is dropped and the card is centred on its own. Nothing that identifies the screen is lost: the card carries its own key badge, "Reset your password" heading and sub-line, and the header logo stays above it. The .fp26-steps rules are kept below the display:none because they still apply if the intro is ever shown again at this width. */ @media (max-width: 991.98px) { .forgot-2026 .l26-intro { display: none; } .forgot-2026 .l26-grid { justify-items: center; align-items: center; min-height: calc(100vh - 190px); padding-top: 0; } .forgot-2026 .l26-panel { justify-content: center; width: 100%; } .forgot-2026 .l26-card { max-width: 460px; } .forgot-2026 .l26-title { max-width: none; } .forgot-2026 .fp26-steps { max-width: none; margin-top: 32px; } } @media (max-width: 575.98px) { .forgot-2026 .fp26-steps { gap: 12px; margin-top: 26px; } .forgot-2026 .fp26-step { font-size: 13.5px; } .forgot-2026 .fp26-icon { width: 48px; height: 48px; font-size: 18px; } .forgot-2026 .fp26-title { font-size: 19px; } }