/* ========================================================= LOGIN PAGE WRAPPER ========================================================= */ .ss-login-page{ position:relative; min-height:100vh; padding:80px 20px 100px; overflow:hidden; background: radial-gradient( circle at top, rgba(255,92,122,.12), transparent 28% ), #070b14; color:#ffffff; } /* ========================================================= OPTIONAL CINEMATIC OVERLAY ========================================================= */ .ss-login-page::before{ content:""; position:absolute; inset:0; background: linear-gradient( to bottom, rgba(0,0,0,.45), rgba(0,0,0,.72) ); pointer-events:none; z-index:0; } /* ========================================================= CONTENT LAYER ========================================================= */ .ss-login-page > *{ position:relative; z-index:2; } /* ========================================================= HERO ========================================================= */ .ss-pmpro-hero{ text-align:center; margin-bottom:60px; } /* ========================================================= TITLE ========================================================= */ .ss-pmpro-title{ margin:0 0 20px; font-size: clamp(3rem, 6vw, 5.5rem); font-weight:900; line-height:.95; letter-spacing:-0.06em; color:#ffffff; text-shadow: 0 0 14px rgba(255,92,122,.22), 0 0 42px rgba(170,77,132,.14); } /* ========================================================= SUBTITLE ========================================================= */ .ss-pmpro-subtitle{ max-width:700px; margin:0 auto; font-size:1.1rem; line-height:1.8; color:rgba(255,255,255,.72); } /* ========================================================= CONTAINER ========================================================= */ .ss-pmpro-container{ max-width:760px; margin:0 auto; } /* ========================================================= LOGIN CARD ========================================================= */ .ss-pmpro-card{ background: linear-gradient( 180deg, rgba(10,10,22,.96), rgba(5,5,16,.98) ); border: 1px solid rgba(217,70,239,.12); border-radius:34px; padding:54px; box-shadow: 0 20px 60px rgba(0,0,0,.42); backdrop-filter:blur(10px); } /* ========================================================= REMOVE DEFAULT PMPRO CARD ========================================================= */ .ss-login-page .pmpro_card{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; margin:0 !important; } /* ========================================================= HIDE DEFAULT LOGIN TITLE ========================================================= */ .ss-login-page .pmpro_login_wrap h2{ display:none; } /* ========================================================= FORM FIELDS ========================================================= */ .ss-login-page input[type="text"], .ss-login-page input[type="password"], .ss-login-page input[type="email"]{ width:100%; min-height:64px; padding:0 24px; border-radius:20px; border: 1px solid rgba(180,93,187,.18); background: linear-gradient( 135deg, rgba(20,20,40,.96), rgba(10,10,25,.98) ); color:#ffffff; font-size:1rem; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } /* ========================================================= INPUT FOCUS ========================================================= */ .ss-login-page input:focus{ outline:none; border-color:#d26cff; box-shadow: 0 0 0 4px rgba(193,92,255,.10), 0 0 24px rgba(193,92,255,.16); } /* ========================================================= LABELS ========================================================= */ .ss-login-page label{ display:block; margin-bottom:12px; color:rgba(255,255,255,.92); font-weight:700; font-size:1rem; } /* ========================================================= PLACEHOLDER ========================================================= */ .ss-login-page input::placeholder{ color:rgba(255,255,255,.38); } /* ========================================================= SHOW PASSWORD ========================================================= */ .ss-login-page .pmpro_show_password{ color:#ff4fd8; font-weight:600; } /* ========================================================= REMEMBER ME ========================================================= */ .ss-login-page input[type="checkbox"]{ width:18px; height:18px; accent-color:#c026d3; } /* ========================================================= BUTTON ========================================================= */ .ss-login-page .pmpro_btn, .ss-login-page input[type="submit"]{ width:100%; min-height:64px; border:none; border-radius:999px; background: linear-gradient( 180deg, #d946ef, #7e1b8f ); color:#ffffff; font-size:1.1rem; font-weight:800; letter-spacing:-.02em; box-shadow: 0 14px 34px rgba(217,70,239,.28); transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; } /* ========================================================= BUTTON HOVER ========================================================= */ .ss-login-page .pmpro_btn:hover, .ss-login-page input[type="submit"]:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow: 0 20px 42px rgba(217,70,239,.34); } /* ========================================================= LINKS ========================================================= */ .ss-login-page a{ color:#ff4fd8; text-decoration:none; transition:all .25s ease; } .ss-login-page a:hover{ color:#ffffff; text-shadow: 0 0 12px rgba(255,79,216,.22); } /* ========================================================= FORM SPACING ========================================================= */ .ss-login-page .pmpro_form_field{ margin-bottom:28px; } /* ========================================================= LOGIN INPUT TEXT FIX ========================================================= */ .ss-login-page input[type="text"], .ss-login-page input[type="password"], .ss-login-page input[type="email"]{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; caret-color:#ffffff; font-size:1rem; font-weight:500; } /* ========================================================= AUTOFILL FIX ========================================================= */ .ss-login-page input:-webkit-autofill, .ss-login-page input:-webkit-autofill:hover, .ss-login-page input:-webkit-autofill:focus, .ss-login-page input:-webkit-autofill:active{ -webkit-text-fill-color:#ffffff !important; transition: background-color 9999s ease-in-out 0s; box-shadow: 0 0 0px 1000px rgba(16,16,34,1) inset !important; border: 1px solid rgba(180,93,187,.18) !important; } /* ========================================================= LOGIN INPUT STYLE MATCH PROFILE PAGE ========================================================= */ .ss-login-page input[type="text"], .ss-login-page input[type="password"], .ss-login-page input[type="email"]{ width:100%; min-height:64px; padding:0 24px; border-radius:20px; border: 1px solid rgba(180,93,187,.18); background: linear-gradient( 135deg, rgba(20,20,40,.96), rgba(10,10,25,.98) ) !important; box-shadow:none !important; transition: border-color .25s ease, box-shadow .25s ease; } /* ========================================================= FOCUS MATCH PROFILE PAGE ========================================================= */ .ss-login-page input[type="text"]:focus, .ss-login-page input[type="password"]:focus, .ss-login-page input[type="email"]:focus{ outline:none; border-color:#d26cff !important; background: linear-gradient( 135deg, rgba(24,24,50,.98), rgba(12,12,28,1) ) !important; box-shadow: 0 0 0 4px rgba(193,92,255,.10), 0 0 24px rgba(193,92,255,.16) !important; } /* ========================================================= PLACEHOLDER ========================================================= */ .ss-login-page input::placeholder{ color:rgba(255,255,255,.38); } /* ========================================================= SHOW PASSWORD ========================================================= */ .ss-login-page .pmpro_show_password{ color:#ff4fd8; font-weight:700; transition:all .25s ease; } .ss-login-page .pmpro_show_password:hover{ color:#ffffff; } /* ========================================================= REMEMBER ME ========================================================= */ .ss-login-page .login-remember label{ display:flex; align-items:center; gap:12px; color:#ffffff; } /* ========================================================= SHOW PASSWORD BUTTON ========================================================= */ .ss-login-page .pmpro_form_field-password-toggle button.pmpro_btn.pmpro_btn-plain{ display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:10px; min-height:48px; padding:0 22px !important; border-radius:999px !important; border: 1px solid rgba(210,108,255,.28) !important; background: linear-gradient( 180deg, #d94dff 0%, #8a0fa3 100% ) !important; color:#ffffff !important; font-size:.95rem !important; font-weight:700 !important; text-decoration:none !important; box-shadow: 0 10px 24px rgba(217,77,255,.22) !important; transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; cursor:pointer; } /* ========================================================= ICON + TEXT ========================================================= */ .ss-login-page .pmpro_form_field-password-toggle button.pmpro_btn.pmpro_btn-plain span, .ss-login-page .pmpro_form_field-password-toggle button.pmpro_btn.pmpro_btn-plain svg{ color:#ffffff !important; fill:#ffffff !important; } /* ========================================================= HOVER ========================================================= */ .ss-login-page .pmpro_form_field-password-toggle button.pmpro_btn.pmpro_btn-plain:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow: 0 14px 34px rgba(217,77,255,.32) !important; } /* ========================================================= MOBILE ========================================================= */ @media (max-width:768px){ .ss-login-page{ padding:50px 16px 80px; } .ss-pmpro-card{ padding:34px 24px; } .ss-pmpro-title{ font-size:3.4rem; } .ss-pmpro-subtitle{ font-size:1rem; } }