/* ===== Sitonia Consulting — Client Login / paywall ===== */ /* Paste into Appearance → Customize → Additional CSS. Replaces the old "MemberPress paywall / login — Sitonia brand" block. Brand tokens green #2d6a4f line #ddd8ce deep green #1a3d2b ink #1a1a1a / #4a4a4a gold #c8952a cream #fbf9f5 Selectors cover BOTH login form plugins, so the page looks the same whichever one renders the form: .mepr-* MemberPress #loginform Members plugin / core wp_login_form() */ /* ---------- Layout shell ---------- */ .sc-login, .mp_wrapper { max-width: 440px; margin: 7vh auto; padding: 0 20px; font-family: Georgia, "Times New Roman", serif; color: #1a1a1a; } /* Hide MemberPress's default excerpt above the form */ .mp_wrapper .mepr-unauthorized-excerpt { display: none; } /* ---------- Header ---------- */ .sc-head { text-align: center; margin-bottom: 22px; } .sc-logo { width: 58px; height: 58px; border-radius: 14px; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(150deg, #2d6a4f, #1a3d2b); color: #fff; font-family: Georgia, serif; font-weight: 700; font-size: 23px; letter-spacing: .5px; margin-bottom: 16px; box-shadow: 0 6px 18px rgba(26, 61, 43, .30); border: 1px solid rgba(200, 149, 42, .55); } .sc-eyebrow { display: block; font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #c8952a; margin-bottom: 8px; } .sc-head h2 { margin: 0 0 10px; font-family: Georgia, serif; font-size: 24px; font-weight: 700; color: #1a3d2b; } .sc-rule { width: 46px; height: 3px; background: #c8952a; border-radius: 2px; margin: 0 auto; } /* ---------- Intro message ---------- */ .sc-msg { margin: 16px 0 0; text-align: center; } .sc-msg p { margin: 0 auto 8px; font-size: 15px; color: #4a4a4a; max-width: 40ch; line-height: 1.6; } .sc-msg a { color: #2d6a4f; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(45, 106, 79, .35); } .sc-msg a.sc-trial { color: #c8952a; border-bottom-color: rgba(200, 149, 42, .45); } .sc-msg a:hover { border-bottom-color: currentColor; } /* ---------- Login card ---------- */ .sc-card, .mepr-login-form-wrap { background: #fff; border: 1px solid #ddd8ce; border-top: 3px solid #2d6a4f; border-radius: 12px; padding: 26px 24px; margin-top: 24px; box-shadow: 0 12px 30px rgba(26, 61, 43, .10); } /* ---------- Make the form fill the card ---------- The Members plugin and the theme both like to constrain the login form to a narrow left-aligned column. Force the wrapper full width so the fields line up with the card, not with a 320px hangover. */ .sc-card form, .sc-card #loginform, .sc-card .members-login-form, .sc-card .mepr-form { width: 100% !important; max-width: 100% !important; min-width: 0; margin: 0 auto; box-sizing: border-box; } .sc-card p, .sc-card .login-username, .sc-card .login-password, .sc-card .login-remember, .sc-card .login-submit { width: 100%; max-width: 100%; box-sizing: border-box; } /* ---------- Form rows ---------- */ .mepr-form .mp-form-row, .sc-card .login-username, .sc-card .login-password, .sc-card .login-remember { margin-bottom: 16px; } .sc-card .login-submit { margin-bottom: 0; } /* Field labels */ .mepr-form .mp-form-label label, .sc-card .login-username label, .sc-card .login-password label { display: block; font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 11px; font-weight: 700; color: #2d6a4f; text-transform: uppercase; letter-spacing: .7px; margin-bottom: 6px; } /* Inputs */ /* The Members plugin prints its own