to match the pirate theme. They are scoped inside .pp-reg-popup so they don't affect other forms on the site. ══════════════════════════════════════════════════════════ */ /* Labels */ .pp-reg-popup .ff-el-form-control-label, .pp-reg-popup .ff-el-group label, .pp-reg-popup label { font-family: 'Cinzel', serif !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; color: var(--gold-dk) !important; margin-bottom: 6px !important; display: block !important; } /* Input fields */ .pp-reg-popup .ff-el-form-control, .pp-reg-popup input[type="text"], .pp-reg-popup input[type="email"], .pp-reg-popup input[type="password"], .pp-reg-popup input[type="tel"], .pp-reg-popup select { background: rgba(6,14,28,.85) !important; border: 1px solid rgba(245,197,24,.25) !important; border-radius: 10px !important; padding: 12px 16px !important; font-family: 'Lora', serif !important; font-size: .95rem !important; color: var(--text-lt) !important; width: 100% !important; outline: none !important; transition: border-color .2s, box-shadow .2s !important; box-shadow: none !important; } .pp-reg-popup .ff-el-form-control:focus, .pp-reg-popup input:focus, .pp-reg-popup select:focus { border-color: rgba(245,197,24,.55) !important; box-shadow: 0 0 0 3px rgba(245,197,24,.08) !important; } .pp-reg-popup ::placeholder { color: var(--text-dim) !important; opacity: .6 !important; } /* Field groups */ .pp-reg-popup .ff-el-group { margin-bottom: 16px !important; } /* Submit button */ .pp-reg-popup .ff-btn, .pp-reg-popup button[type="submit"], .pp-reg-popup .ff-btn-submit { width: 100% !important; font-family: 'Pirata One', cursive !important; font-size: 1.15rem !important; letter-spacing: 1px !important; padding: 15px 32px !important; border-radius: 10px !important; border: none !important; cursor: pointer !important; background: linear-gradient(160deg, var(--gold-lt), var(--gold-glow), var(--gold-dk)) !important; color: var(--wood) !important; font-weight: 700 !important; box-shadow: 0 6px 28px rgba(247,200,32,.55), inset 0 1px 0 rgba(255,255,255,.3) !important; text-shadow: 0 1px 2px rgba(255,255,255,.3) !important; transition: transform .18s, box-shadow .18s !important; margin-top: 8px !important; } .pp-reg-popup .ff-btn:hover, .pp-reg-popup button[type="submit"]:hover, .pp-reg-popup .ff-btn-submit:hover { transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 12px 40px rgba(247,200,32,.75) !important; } /* Success message */ .pp-reg-popup .ff-message-success, .pp-reg-popup .ff-success-message { background: rgba(16,185,129,.1) !important; border: 1px solid rgba(16,185,129,.35) !important; border-radius: 12px !important; padding: 20px !important; font-family: 'Pirata One', cursive !important; font-size: 1.1rem !important; color: #6ee7b7 !important; text-align: center !important; } /* Error messages */ .pp-reg-popup .error .text-danger, .pp-reg-popup .ff-el-is-error .error-message, .pp-reg-popup span.error { font-family: 'Cinzel', serif !important; font-size: 9px !important; letter-spacing: .5px !important; color: #ff9999 !important; margin-top: 4px !important; display: block !important; } .pp-reg-popup .ff-el-is-error .ff-el-form-control { border-color: rgba(204,34,34,.6) !important; } /* Remove Fluent Form white backgrounds */ .pp-reg-popup .fluentform, .pp-reg-popup .ff-el-group, .pp-reg-popup .ff-form-wrap { background: transparent !important; } /* Checkbox / terms styling */ .pp-reg-popup .ff-el-form-check-label, .pp-reg-popup .ff-el-form-check input + label { font-family: 'Lora', serif !important; font-size: .85rem !important; color: var(--text-dim) !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; } .pp-reg-popup .ff-el-form-check input + label a { color: var(--gold-dk) !important; text-decoration: none !important; border-bottom: 1px solid rgba(245,197,24,.3) !important; } /* ── FOOTER DISCLAIMER ── */ .pp-reg-footer { padding: 14px 28px 20px; border-top: 1px solid rgba(245,197,24,.1); text-align: center; font-family: 'Lora', serif; font-size: .75rem; color: var(--text-dim); font-style: italic; line-height: 1.55; } .pp-reg-footer a { color: var(--gold-dk); text-decoration: none; border-bottom: 1px solid rgba(245,197,24,.25); } /* ── ANIMATIONS ── */ @keyframes pp-reg-glow { 0%,100% { text-shadow: 0 2px 16px rgba(247,200,32,.5), 2px 2px 0 rgba(0,0,0,.7); } 50% { text-shadow: 0 2px 30px rgba(247,200,32,1), 2px 2px 0 rgba(0,0,0,.7), 0 0 60px rgba(247,200,32,.4); } } @keyframes pp-reg-stars { 0%,100% { opacity: 0; transform: scale(.5); } 50% { opacity: .6; transform: scale(1.3); } } /* ── STAR DECO ── */ .pp-reg-star { position: absolute; width: 3px; height: 3px; background: var(--gold); border-radius: 50%; animation: pp-reg-stars 3s infinite ease-in-out; opacity: 0; pointer-events: none; } /* ── ALREADY MEMBER ROW ── */ .pp-reg-login-row { margin-top: 18px; text-align: center; padding: 14px 20px; background: rgba(245,197,24,.05); border: 1px solid rgba(245,197,24,.15); border-radius: 10px; font-family: 'Cinzel', serif; font-size: 10px; letter-spacing: .5px; color: var(--text-dim); } .pp-reg-login-row a { color: var(--gold-dk); text-decoration: none; font-weight: 700; border-bottom: 1px solid rgba(245,197,24,.3); margin-left: 6px; transition: color .2s; } .pp-reg-login-row a:hover { color: var(--gold); } /* Responsive inside popup */ @media(max-width:480px) { .pp-reg-header { padding: 18px 18px 16px; } .pp-reg-body { padding: 18px 18px 20px; } .pp-reg-perks { flex-wrap: wrap; } .pp-reg-perk { flex: 1 1 45%; } .pp-reg-footer { padding: 12px 18px 16px; } }