/* ========================================= LOST PASSWORD PAGE ========================================= */ .aff-lost__section { position: relative; overflow: hidden; padding: clamp(70px, 8vw, 120px) 0; background: #26427a; } /* ========================================= WRAPPER ========================================= */ .aff-lost__inner { display: flex; flex-direction: column; align-items: center; } /* ========================================= TITLE ========================================= */ .aff-lost__title { font-family: var(--font-ru); font-size: clamp(30px, 3vw, 46px); font-weight: 700; line-height: 1.05; text-transform: uppercase; text-align: center; color: #fff; margin-bottom: 35px; max-width: 800px; } /* ========================================= FORM CONTAINER ========================================= */ #slicewp-affiliate-lost-password-form { width: 100%; max-width: 700px; position: relative; padding: clamp(25px, 3vw, 40px); border-radius: 30px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(35px); -webkit-backdrop-filter: blur(35px); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08); } /* ========================================= DESCRIPTION ========================================= */ #slicewp-affiliate-lost-password-form p { margin: 0 0 28px; color: rgba(255, 255, 255, 0.72); font-size: 15px; line-height: 1.7; font-family: var(--font-rl); } /* ========================================= FIELD WRAPPER ========================================= */ #slicewp-affiliate-lost-password-form .slicewp-field-wrapper { margin-bottom: 22px; } /* ========================================= LABEL ========================================= */ #slicewp-affiliate-lost-password-form .slicewp-field-label-wrapper label { display: block; margin-bottom: 8px; margin-left: 8px; color: rgba(255, 255, 255, 0.6); font-size: 13px; font-weight: 400; font-family: var(--font-rl); } #slicewp-affiliate-lost-password-form .slicewp-field-required-marker { color: #ff5331; } /* ========================================= INPUT ========================================= */ #slicewp-affiliate-lost-password-form input[type="email"] { width: 100%; height: 58px; padding: 0 22px; border-radius: 18px; border: 1px solid transparent; background: #fff; color: #252525; font-size: 14px; font-family: var(--font-rl); transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } /* placeholder */ #slicewp-affiliate-lost-password-form input[type="email"]::placeholder { color: rgba(37, 37, 37, 0.45); } /* focus */ #slicewp-affiliate-lost-password-form input[type="email"]:focus { outline: none; border-color: #ff5331; box-shadow: 0 0 0 4px rgba(255, 83, 49, 0.12), 0 10px 25px rgba(0, 0, 0, 0.08); transform: translateY(-1px); } /* ========================================= BUTTON ========================================= */ #slicewp-affiliate-lost-password-form .slicewp-button-primary { position: relative; width: 100%; height: 58px; border: none; border-radius: 18px; background: linear-gradient(135deg, #ff5331 0%, #ff6a4d 100%); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; font-family: var(--font-rl); cursor: pointer; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; } /* glow */ #slicewp-affiliate-lost-password-form .slicewp-button-primary::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 120deg, transparent 0%, rgba(255, 255, 255, 0.18) 45%, transparent 100% ); transform: translateX(-120%); transition: transform 0.7s ease; } /* hover */ #slicewp-affiliate-lost-password-form .slicewp-button-primary:hover { transform: translateY(-2px); box-shadow: 0 15px 35px rgba(255, 83, 49, 0.28); } #slicewp-affiliate-lost-password-form .slicewp-button-primary:hover::before { transform: translateX(120%); } /* active */ #slicewp-affiliate-lost-password-form .slicewp-button-primary:active { transform: translateY(0); } /* ========================================= NOTICE ========================================= */ #slicewp-affiliate-lost-password-form .slicewp-user-notice { margin-bottom: 20px; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 14px; line-height: 1.6; font-family: var(--font-rl); border: 1px solid rgba(255, 255, 255, 0.08); } /* ========================================= MOBILE ========================================= */ @media (max-width: 768px) { .aff-lost__section { padding: 60px 0; } .aff-lost__title { margin-bottom: 25px; } #slicewp-affiliate-lost-password-form { border-radius: 24px; padding: 22px; } #slicewp-affiliate-lost-password-form p { font-size: 14px; } #slicewp-affiliate-lost-password-form input[type="email"] { height: 54px; } #slicewp-affiliate-lost-password-form .slicewp-button-primary { height: 54px; } } input, textarea { width: 100% !important; padding: 12px 20px !important; height: fit-content !important; min-height: 0px !important; border-radius: 15px !important; border: 1px solid #fff !important; background: #fff !important; color: #252525 !important; font-family: var(--font-rl) !important; font-size: 14px !important; } /* placeholder */ input::placeholder, textarea::placeholder { color: rgba(37, 37, 37, 0.5) !important; } /* focus */ input:focus, textarea:focus { outline: none !important; border-color: #ff5331 !important; } /* disabled — оставляем как ты хотел */ input:disabled { opacity: 0.5 !important; cursor: not-allowed !important; } .slicewp-button-primary { width: 100%; display: block; padding: 14px 35px; border-radius: 25px; font-family: var(--font-rl); font-weight: 700; font-size: 14px; background: #ff5331; border: 2px solid #ff5331; color: #fff; cursor: pointer; transition: all 0.3s ease; height: fit-content !important; min-height: 0px !important; } /* hover */ .slicewp-button-primary:hover { background: transparent; border-color: #fff; color: #fff; } /* success notice */ .aff-lost__inner .slicewp-user-notice.slicewp-updated { width: 100%; max-width: 700px; margin-bottom: 20px; padding: 18px 22px; border-radius: 20px; background: rgba(255,255,255,0.1); backdrop-filter: blur(30px); border: 1px solid rgba(255,255,255,0.1); color: #fff; } .aff-lost__inner .slicewp-user-notice.slicewp-updated p { margin: 0; font-size: 15px; font-weight: 600; font-family: var(--font-rl); } /* description */ .aff-lost__inner > p { width: 100%; max-width: 700px; margin: 0; padding: 24px; border-radius: 20px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); font-size: 14px; line-height: 1.7; font-family: var(--font-rl); }