/* =========================================================================== s2t-auth.css — S2T auth-modal surfaces (UI-05 Stage 2, Frega-parity refit). Owns: the four auth-modal fragments (Login, Register, Forgot, Change PW), their modal shell cohesion, and the SweetAlert2 member dialogs. Linked in-fragment (each fragment ) so it travels with the shared fragment to every brand; also linked once in the S2T master for the master-level SweetAlert2 dialogs. Loaded AFTER the legacy CSS so it wins. Visual language matches the Frega reference (frega.co.uk) — top labels + leading input icons, centred logo mark + heading, pill CTAs, live password requirements checklist — rendered in S2T green (S2T logo masked to brand green). Frega tokens = literal values (S2T has no token file). Never edits the forbidden files (main.css / styles.css / global.css). ========================================================================= */ :root { --s2t-brand: #4A8A68; --s2t-brand-strong: #136242; --s2t-brand-deep: #044D31; --s2t-brand-light: #86AF99; --s2t-brand-subtle: #F6F8F7; --s2t-surface: #FFFFFF; --s2t-field-border: #CFE0D6; /* pale green input border (Frega look) */ --s2t-muted: #7E8F86; --s2t-danger-soft: #b0413e; /* muted validation red — NOT the reserved destructive #b3261e */ --s2t-radius-btn: 50px; --s2t-radius-sm: 8px; --s2t-shadow-2: 0 2px 8px rgba(0,0,0,0.10); --s2t-font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* Auth modal frame — now a SweetAlert2 popup (was #rsModal .modal-content). Inner .s2t-auth rules below are unchanged. The openers (loginForm, loginReg, forgotPw, changePw) all pass a title string to appModal(), so Swal renders its chrome .swal2-title. We deliberately hide it for auth modals because each fragment renders its own .s2t-auth-title heading; showing both would double the heading. Generic/non-auth modals keep their Swal title intact. */ .swal2-popup:has(.s2t-auth) { width: 470px !important; max-width: 94vw; border: 0; border-radius: 14px; box-shadow: var(--s2t-shadow-2); overflow: hidden; padding: 0; } .swal2-popup:has(.s2t-auth) .swal2-html-container { margin: 0; padding: 0; } .swal2-popup:has(.s2t-auth) .swal2-title { display: none !important; } .swal2-popup:has(.s2t-auth) .swal2-close { color: var(--s2t-brand-strong); opacity: .7; } .swal2-popup:has(.s2t-auth) .swal2-close:hover { opacity: 1; } /* ---- Auth fragment shell -------------------------------------------------- */ /* text-align:left is DELIBERATE and load-bearing (found during UI-21). SweetAlert2's own .swal2-html-container sets text-align:center, and since the auth fragments became Swal popups (the BS3->BS5 shim) every label in them inherited it — so this file's stated "top labels + leading input icons" Frega language was rendering with CENTRED labels. Top labels are left- aligned; centred ones are the legacy tell this file exists to remove. Proof it was never intended: .s2t-auth-head / .s2t-forgot / .s2t-foot each RE-DECLARE text-align:center below — re-declarations that are only needed if the body is not centred. They keep working; only the fields change. */ .s2t-auth { font-family: var(--s2t-font); color: #243029; font-size: 16px; padding: 4px 14px 8px; max-width: 430px; margin: 0 auto; text-align: left; } /* Logo mark + heading (Frega-style centred head). All rules below are scoped under .s2t-auth so nothing can leak onto the page body (the file is linked in the master). */ .s2t-auth .s2t-auth-head { text-align: center; margin: 6px 0 20px; } /* Frega lockup (UI-21). Frega LEADS: this fragment is shared by every brand, and RSCID1 is cross-domain SSO, so the identity you sign in with is Frega — the destination app is named in .s2t-auth-title instead. The mark is a real background-image, NOT a mask: MASTER reserves the logo gradient (#227C4C → #12452A) for the logo, and a mask would flatten it to one flat green. Replaces the old .s2t-auth-logo, which hardcoded s2tLogo.png and so showed "Something2Trade" when signing in to Rooms, the hub or KP. */ .s2t-auth .s2t-auth-brand { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 10px; } .s2t-auth .s2t-auth-mark { width: 34px; height: 34px; flex: none; /* frega-logo.png is 120x120 (1:1) */ background: url('/img/frega-logo.png') center / contain no-repeat; } .s2t-auth .s2t-auth-wordmark { font-weight: 800; font-size: 1.6em; line-height: 1; letter-spacing: .01em; color: var(--s2t-brand-deep); } /* The app name. Secondary to the Frega lockup above it — it says WHERE you are signing in, it is not the identity. (Was 1.55em/800: that competed with the wordmark and read as two headings.) */ .s2t-auth .s2t-auth-title { font-weight: 700; color: var(--s2t-brand-strong); font-size: 1.15em; line-height: 1.25; margin: 0; } .s2t-auth .s2t-auth-sub { color: var(--s2t-muted); font-size: .9em; margin: 8px auto 0; max-width: 320px; } /* ---- Field: top label + leading icon -------------------------------------- */ .s2t-auth .s2t-field { margin-bottom: 16px; } .s2t-auth .s2t-label { display: block; font-weight: 700; color: var(--s2t-brand-deep); font-size: .85em; margin: 0 0 6px 2px; } .s2t-auth .s2t-input { position: relative; display: flex; align-items: center; } .s2t-auth .s2t-input-ic { position: absolute; left: 14px; color: var(--s2t-brand); font-size: 1em; pointer-events: none; } .s2t-auth .s2t-control { width: 100%; box-sizing: border-box; border: 1.5px solid var(--s2t-field-border); border-radius: var(--s2t-radius-sm); background: var(--s2t-surface); font-family: var(--s2t-font); padding: 12px 14px 12px 42px; font-size: .95em; color: #243029; } .s2t-auth .s2t-control::placeholder { color: #9DB0A6; } .s2t-auth .s2t-control:focus { border-color: var(--s2t-brand); box-shadow: 0 0 0 3px rgba(74,138,104,0.18); outline: none; } /* Register field-border restore. main.css (forbidden shared file) ships `#regFormCont input { border:0 !important }` from the legacy register form; its id + !important beats `.s2t-auth .s2t-control`, wiping the modern 1.5px border so empty fields (Email, Confirm Password) render invisible on every brand. Re-assert the designed border at >= id specificity here. Matches the Frega reference (bordered fields). */ #regFormCont .s2t-control { border: 1.5px solid var(--s2t-field-border) !important; } #regFormCont .s2t-control:focus { border-color: var(--s2t-brand) !important; } /* Password field: leading lock + trailing eye toggle */ .s2t-auth .s2t-pw .s2t-control { padding-right: 44px; } .s2t-auth .s2t-pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: transparent; color: var(--s2t-brand-strong); cursor: pointer; z-index: 5; border-radius: var(--s2t-radius-sm); } .s2t-auth .s2t-pw-toggle:hover { background: var(--s2t-brand-subtle); } .s2t-auth .s2t-pw-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(74,138,104,0.25); } /* pws.js still drives metReq() but its inline strength text is replaced by the checklist */ .s2t-auth .pwStrengthTxt, .s2t-auth #PasswordStrengthBorder, .s2t-auth #PasswordStrengthBar { display: none !important; } /* ---- Live password-requirements checklist (matches pws.xml policy) -------- */ .s2t-auth .s2t-pwreq { list-style: none; margin: -4px 0 16px; padding: 0; } .s2t-auth .s2t-pwreq li { display: flex; align-items: center; gap: 8px; font-size: .82em; color: #8A9991; margin: 4px 0; transition: color .15s ease; } .s2t-auth .s2t-pwreq li i { font-size: 1em; width: 16px; text-align: center; color: #C2CFC8; } .s2t-auth .s2t-pwreq li.is-met { color: var(--s2t-brand-strong); } .s2t-auth .s2t-pwreq li.is-met i { color: var(--s2t-brand); } /* ---- Primary pill CTA + secondary link ------------------------------------ */ .s2t-auth .btn-s2t { display: block; width: 100%; background: var(--s2t-brand); color: #fff; font-family: var(--s2t-font); font-weight: 700; border: 0; padding: 13px 30px; border-radius: var(--s2t-radius-btn); line-height: 1.2; font-size: 1em; cursor: pointer; transition: background .15s ease; margin-top: 4px; } .s2t-auth .btn-s2t:hover, .s2t-auth .btn-s2t:focus { background: var(--s2t-brand-strong); color: #fff; } .s2t-auth .btn-s2t:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(74,138,104,0.30); } .s2t-auth .btn-s2t[disabled] { opacity: .6; cursor: default; } .s2t-auth .s2t-link { color: var(--s2t-brand-deep); font-weight: 700; cursor: pointer; text-decoration: none; } .s2t-auth .s2t-link:hover { color: var(--s2t-brand); text-decoration: underline; } /* Forgot-password / Remember-me row */ .s2t-auth .s2t-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 2px 16px; } .s2t-auth .s2t-forgot { text-align: center; margin: 2px 0 14px; } .s2t-auth .s2t-remember { display: inline-flex; align-items: center; gap: 8px; color: #4A5A52; font-weight: 600; } .s2t-auth .s2t-remember input { width: 16px; height: 16px; accent-color: var(--s2t-brand); } /* Footer (alt-action prompt, T&C) */ .s2t-auth .s2t-foot { text-align: center; margin-top: 18px; } .s2t-auth .s2t-foot .s2t-alt { font-size: .95em; } .s2t-auth .s2t-foot .s2t-tnc { font-size: .8em; color: var(--s2t-muted); margin-top: 12px; } .s2t-auth .s2t-foot .footLink { color: var(--s2t-brand-strong); cursor: pointer; text-decoration: underline; } /* OR divider (Forgot-password dual path) */ .s2t-auth .s2t-or { display: flex; align-items: center; gap: 12px; color: #93A29A; font-weight: 700; margin: 14px 2px; } .s2t-auth .s2t-or::before, .s2t-auth .s2t-or::after { content: ""; flex: 1 1 auto; height: 1px; background: #E1E8E4; } /* Inline #msg / error blocks — Frega palette (success green, muted red; NOT reserved destructive red) */ .s2t-auth #msg { background: #FDECEC; color: var(--s2t-danger-soft); border: 1px solid #F4C9C7; padding: 8px 12px; border-radius: var(--s2t-radius-sm); font-weight: 700; margin-top: 6px; text-align: center; } .s2t-auth #loginError, .s2t-auth .ErrorDispArea { color: var(--s2t-danger-soft); font-weight: 700; margin-top: 8px; } .s2t-auth #loginError .alert-danger { background: #FDECEC; border-color: #F4C9C7; color: var(--s2t-danger-soft); border-radius: var(--s2t-radius-sm); } .s2t-auth #errPassword { font-weight: 700; } /* Hide the legacy callback-debug readout (functional var preserved in script) */ .s2t-auth #callbackDisp { display: none; } /* ---- SweetAlert2 member dialogs (Number&Pin, Activation, forgot-pw results) ---- The Task-4a shim fires every BootstrapDialog.show() with customClass.popup = 'bd-shim-popup'. Skin those to Frega green. Loaded on the master (link below) so these apply at master level, not just inside a fragment. -------------------- */ .swal2-popup.bd-shim-popup { font-family: var(--s2t-font); border-radius: 14px; box-shadow: var(--s2t-shadow-2); } .swal2-popup.bd-shim-popup .swal2-title { color: var(--s2t-brand-deep); font-weight: 800; } .swal2-popup.bd-shim-popup .swal2-html-container { color: #243029; } .swal2-popup.bd-shim-popup .bd-shim-btn.btn-primary, .swal2-popup.bd-shim-popup .bd-shim-btn.btn-default { background: var(--s2t-brand); color: #fff; border: 0; border-radius: var(--s2t-radius-btn); font-family: var(--s2t-font); font-weight: 700; padding: 8px 22px; } .swal2-popup.bd-shim-popup .bd-shim-btn.btn-primary:hover, .swal2-popup.bd-shim-popup .bd-shim-btn.btn-default:hover { background: var(--s2t-brand-strong); } .swal2-popup.bd-shim-popup .bd-shim-btn-bar { border-top-color: var(--s2t-brand-subtle); } /* Keep SweetAlert2's own success/warning/error icon tints intact (do not override) */ /* ---- "Part of the Frega family" endorsement — RETIRED by UI-21 ------------- This footer said "Part of the Frega family" under a small Frega mark, while the HEAD wore the S2T logo. UI-21 inverted that: the Frega lockup now LEADS the head (.s2t-auth-brand) and the app is named in the title, so restating the endorsement in the footer is redundant — the same mark twice in one 470px modal. Removed rather than kept: the head states it louder. (Its reasoning survives above: the mark is used as an image, never masked.) */