/*! * email-gate.css — Affiliate Marketing Pro 2026 * Dark theme gate UI — tokens from shared-styles.css * ───────────────────────────────────────────────────────────────── * Load BEFORE shared-styles.css in */ /* ── Overlay ─────────────────────────────────────────────────────── */ #affkit-gate-overlay { position: fixed; inset: 0; /* covers entire viewport */ z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; animation: affkit-fade-in 0.25s ease both; } .affkit-gate-backdrop { position: absolute; inset: 0; background: rgba(5, 5, 10, 0.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* ── Modal card ──────────────────────────────────────────────────── */ .affkit-gate-modal { position: relative; z-index: 1; width: 100%; max-width: 460px; background: #16161f; border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 20px; padding: 40px 40px 32px; box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.08), 0 32px 64px rgba(0, 0, 0, 0.6), 0 0 80px rgba(99, 102, 241, 0.06); animation: affkit-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; } @media (max-width: 480px) { .affkit-gate-modal { padding: 28px 20px 24px; border-radius: 16px; } } /* ── Brand header ────────────────────────────────────────────────── */ .affkit-gate-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; } .affkit-gate-brand-badge { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; } .affkit-gate-brand-text { font-size: 0.78rem; font-weight: 700; color: #94a3b8; letter-spacing: 0.04em; text-transform: uppercase; } /* ── Headline ────────────────────────────────────────────────────── */ .affkit-gate-title { font-size: 1.65rem; font-weight: 800; color: #f8fafc; line-height: 1.2; margin: 0 0 12px; } .affkit-gate-subtitle { font-size: 0.93rem; color: #94a3b8; line-height: 1.65; margin: 0 0 22px; } .affkit-gate-subtitle strong { color: #f8fafc; } /* ── Perks list ──────────────────────────────────────────────────── */ .affkit-gate-perks { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } @media (max-width: 400px) { .affkit-gate-perks { grid-template-columns: 1fr; } } .affkit-gate-perks li { font-size: 0.82rem; color: #94a3b8; display: flex; align-items: flex-start; gap: 7px; line-height: 1.45; } .affkit-gate-check { color: #10b981; font-weight: 800; flex-shrink: 0; margin-top: 1px; } /* ── Honeypot (visually hidden) ──────────────────────────────────── */ #affkit-hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; opacity: 0; pointer-events: none; } /* ── Form ────────────────────────────────────────────────────────── */ .affkit-gate-form { display: flex; flex-direction: column; gap: 10px; } .affkit-gate-field-row { position: relative; } .affkit-gate-input { width: 100%; background: #0a0a0f; border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 10px; padding: 13px 16px; font-size: 0.93rem; color: #f8fafc; outline: none; transition: border-color 0.18s, box-shadow 0.18s; box-sizing: border-box; font-family: inherit; } .affkit-gate-input::placeholder { color: #475569; } .affkit-gate-input:focus { border-color: rgba(99, 102, 241, 0.55); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12); } /* ── Error message ───────────────────────────────────────────────── */ .affkit-gate-error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 8px; padding: 10px 14px; font-size: 0.85rem; color: #fca5a5; line-height: 1.5; } @keyframes affkit-shake-kf { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } .affkit-shake { animation: affkit-shake-kf 0.4s ease both; } /* ── Submit button ───────────────────────────────────────────────── */ .affkit-gate-btn { width: 100%; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: #fff; border: none; border-radius: 12px; padding: 15px 20px; font-size: 1rem; font-weight: 700; cursor: pointer; letter-spacing: 0.01em; transition: opacity 0.18s, transform 0.18s, box-shadow 0.18s; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; box-shadow: 0 4px 20px rgba(99, 102, 241, 0.35); margin-top: 4px; } .affkit-gate-btn:hover:not(:disabled) { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(99, 102, 241, 0.45); } .affkit-gate-btn:active:not(:disabled) { transform: translateY(0); } .affkit-gate-btn:disabled { opacity: 0.6; cursor: not-allowed; } .affkit-gate-btn-green { background: linear-gradient(135deg, #059669 0%, #10b981 100%); box-shadow: 0 4px 20px rgba(16, 185, 129, 0.35); } .affkit-gate-btn-green:hover:not(:disabled) { box-shadow: 0 6px 24px rgba(16, 185, 129, 0.45); } /* ── Spinner ─────────────────────────────────────────────────────── */ .affkit-gate-spinner { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: affkit-spin 0.65s linear infinite; flex-shrink: 0; } @keyframes affkit-spin { to { transform: rotate(360deg); } } /* ── Fine print ──────────────────────────────────────────────────── */ .affkit-gate-fine-print { font-size: 0.75rem; color: #475569; text-align: center; margin: 0; line-height: 1.5; } /* ── Social proof strip ──────────────────────────────────────────── */ .affkit-gate-proof { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(148, 163, 184, 0.08); } .affkit-gate-proof-avatars { display: flex; margin-right: 2px; } .affkit-gate-avatar { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #16161f; font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; color: #fff; margin-left: -8px; } .affkit-gate-avatar:first-child { margin-left: 0; } .affkit-gate-avatar-1 { background: linear-gradient(135deg, #6366f1, #8b5cf6); } .affkit-gate-avatar-2 { background: linear-gradient(135deg, #059669, #10b981); } .affkit-gate-avatar-3 { background: linear-gradient(135deg, #f59e0b, #ef4444); } .affkit-gate-proof-text { font-size: 0.8rem; color: #64748b; line-height: 1.4; } .affkit-gate-proof-text strong { color: #94a3b8; } /* ── Success state ───────────────────────────────────────────────── */ .affkit-success-icon { width: 64px; height: 64px; background: linear-gradient(135deg, #059669, #10b981); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; color: #fff; margin: 0 auto 24px; box-shadow: 0 8px 28px rgba(16, 185, 129, 0.4); animation: affkit-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .affkit-success-email { font-size: 0.88rem; color: #64748b; background: #0a0a0f; border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 8px; padding: 10px 16px; text-align: center; margin: 0 0 20px; word-break: break-all; } /* ── Keyframe animations ─────────────────────────────────────────── */ @keyframes affkit-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes affkit-slide-up { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes affkit-pop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ── Reduced motion ──────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { #affkit-gate-overlay, .affkit-gate-modal, .affkit-success-icon { animation: none; } }