{"id":4521,"date":"2026-04-03T20:57:16","date_gmt":"2026-04-03T20:57:16","guid":{"rendered":"https:\/\/nubianconnections.com\/?page_id=4521"},"modified":"2026-10-15T10:52:22","modified_gmt":"2026-10-15T10:52:22","slug":"join","status":"publish","type":"page","link":"https:\/\/nubianconnections.com\/en\/join\/","title":{"rendered":"Join"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Join the Private Network | Nubian Connections<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&#038;family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,600&#038;family=Lato:wght@200;300;400;700&#038;display=swap\" rel=\"stylesheet\">\n<style> :where(#ncf-overlay), :where(#ncf-overlay) *, :where(#ncf-overlay) *::before, :where(#ncf-overlay) *::after, :where(.demo-trigger) { margin: 0; padding: 0; box-sizing: border-box; } :root { --cream: #F9F5EE; --cream-2: #F3EDE2; --cream-3: #EBE2D3; --black: #07050300; --ink: #0E0A06; --burgundy: #74131F; --burg-deep: #560E17; --burg-pale: rgba(116,19,31,0.06); --gold: #9C7230; --gold-mid: #B4883C; --gold-bright: #CCA048; --gold-light: #D4AE6A; --gold-pale: rgba(156,114,48,0.10); --gold-line: rgba(156,114,48,0.20); --gold-line-md: rgba(156,114,48,0.38); --gold-line-str: rgba(156,114,48,0.55); --text-main: #0C0806; --text-body: #2A2018; --text-sub: #5C4E3C; --text-muted: #82705A; --border: rgba(14,10,6,0.18); --border-md: rgba(14,10,6,0.28); --border-focus: rgba(156,114,48,0.65); --field-bg: rgba(14,10,6,0.04); --field-focus: rgba(156,114,48,0.06); --shadow-soft: 0 2px 8px rgba(0,0,0,0.04), 0 8px 32px rgba(0,0,0,0.08); } @keyframes grainShift { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-1px, 1px); } 40% { transform: translate(1px, -1px); } 60% { transform: translate(-1px,-1px); } 80% { transform: translate(1px, 1px); } } body { background: #b8af9f; background-image: radial-gradient(ellipse at 30% 40%, rgba(116,19,31,0.12) 0%, transparent 55%), radial-gradient(ellipse at 75% 70%, rgba(156,114,48,0.10) 0%, transparent 50%); font-family: 'Lato', sans-serif; } .demo-trigger { display: block; position: relative; margin: 140px auto !important; padding: 16px 38px !important; background: var(--burgundy); color: var(--cream); font-size: 11px; letter-spacing: 4px; text-transform: uppercase; cursor: pointer; border: none; z-index: 10; font-weight: 700; transition: background 0.3s, letter-spacing 0.3s; } .demo-trigger:hover { background: var(--burg-deep); letter-spacing: 5px; } .overlay { position: fixed; inset: 0; z-index: 100; background: rgba(7,5,3,0.90); backdrop-filter: blur(14px) saturate(0.75); display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity 0.55s ease; } .overlay.open { opacity: 1; pointer-events: all; } .modal { background: var(--cream); width: 100%; max-width: 780px; max-height: 92vh; overflow-y: auto; position: relative; transform: translateY(40px) scale(0.985); transition: transform 0.55s cubic-bezier(.16,.84,.44,1), opacity 0.45s ease; opacity: 0; scrollbar-width: thin; scrollbar-color: rgba(156,114,48,0.25) transparent; box-shadow: 0 0 0 1px rgba(156,114,48,0.12), 0 4px 8px rgba(0,0,0,0.06), 0 16px 48px rgba(0,0,0,0.22), 0 48px 120px rgba(0,0,0,0.32); } .overlay.open .modal { transform: translateY(0) scale(1); opacity: 1; } .modal::-webkit-scrollbar { width: 2px; } .modal::-webkit-scrollbar-thumb { background: rgba(156,114,48,0.25); } .modal-crown { display: flex; flex-direction: column; gap: 0; overflow: hidden; } .crown-line { display: block; width: 100%; } .crown-line:nth-child(1) { height: 1px; background: linear-gradient(90deg, transparent 3%, rgba(156,114,48,0.3) 25%, rgba(156,114,48,0.6) 50%, rgba(156,114,48,0.3) 75%, transparent 97%); } .crown-line:nth-child(2) { height: 4px; background: linear-gradient(90deg, transparent 2%, var(--gold-mid) 18%, var(--gold-bright) 50%, var(--gold-mid) 82%, transparent 98%); } .crown-line:nth-child(3) { height: 1px; background: linear-gradient(90deg, transparent 3%, rgba(156,114,48,0.5) 25%, rgba(202,160,72,0.9) 50%, rgba(156,114,48,0.5) 75%, transparent 97%); } .close-wrap { position: sticky; top: 0; z-index: 20; display: flex; justify-content: flex-end; padding: 18px 42px 0; background: var(--cream); } .close-btn { background: none; border: none; cursor: pointer; font-size: 8px; letter-spacing: 4px; text-transform: uppercase; color: #6A5A48; transition: color 0.25s, letter-spacing 0.25s; display: flex; align-items: center; gap: 9px; font-weight: 700; } .close-btn:hover { color: var(--gold-mid); letter-spacing: 5px; } .modal-inner { padding: 6px 64px 80px; } .modal-header { text-align: center; padding: 36px 0 52px; position: relative; margin-bottom: 0; } .modal-tag { display: inline-flex; align-items: center; gap: 16px; font-size: 7.5px; letter-spacing: 7px; color: var(--burgundy); text-transform: uppercase; margin-bottom: 28px; font-weight: 700; } .modal-tag::before, .modal-tag::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: 0.5; } .modal-title { font-family: 'Playfair Display', serif; font-size: clamp(30px, 3.8vw, 48px); font-weight: 400; color: var(--ink); line-height: 1.15; margin-bottom: 20px; letter-spacing: -0.5px; } .modal-title em { color: var(--gold); font-style: italic; font-weight: 400; } .modal-sub { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-style: italic; font-weight: 400; color: #2A2018; line-height: 1.75; max-width: 460px; margin: 0 auto 0; letter-spacing: 0.2px; } .header-divider { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 0; } .header-divider::before, .header-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--gold-line-md)); } .header-divider::after { background: linear-gradient(to left, transparent, var(--gold-line-md)); } .header-divider-gem { font-size: 8px; color: var(--gold-mid); padding: 0 14px; letter-spacing: 6px; flex-shrink: 0; } .stepper-wrap { padding: 40px 0 44px; position: relative; } .stepper-track { position: absolute; top: 58px; left: 0; right: 0; height: 1px; background: var(--gold-line); z-index: 0; } .stepper-track-fill { position: absolute; top: 58px; left: 0; height: 1px; background: linear-gradient(to right, var(--gold-mid), var(--gold-bright)); z-index: 1; width: 0%; transition: width 0.5s cubic-bezier(.4,0,.2,1); } .stepper { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 2; } .step-dot { display: flex; flex-direction: column; align-items: center; gap: 10px; cursor: pointer; flex: 1; transition: opacity 0.25s; } .step-dot:hover { opacity: 0.8; } .step-circle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-md); display: flex; align-items: center; justify-content: center; background: var(--cream); position: relative; z-index: 2; transition: all 0.4s cubic-bezier(.4,0,.2,1); } .step-num { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; color: #5C4E3C; transition: color 0.3s; } .step-check { display: none; font-size: 13px; color: var(--cream); font-weight: 700; } .step-label { font-size: 7px; letter-spacing: 3px; text-transform: uppercase; color: #6A5A48; font-weight: 700; text-align: center; line-height: 1.4; transition: color 0.3s; white-space: nowrap; } .step-dot.is-active .step-circle { border-color: var(--gold-mid); background: var(--cream); box-shadow: 0 0 0 6px rgba(156,114,48,0.10), 0 0 0 1px var(--gold-line-md); } .step-dot.is-active .step-num { color: var(--gold); } .step-dot.is-active .step-label { color: var(--gold-mid); } .step-dot.is-done .step-circle { border-color: var(--gold); background: linear-gradient(135deg, var(--gold-bright), var(--gold)); box-shadow: 0 2px 12px rgba(156,114,48,0.30); } .step-dot.is-done .step-num { display: none; } .step-dot.is-done .step-check { display: block; } .step-dot.is-done .step-label { color: var(--gold-mid); } .section-eyebrow { display: flex; align-items: center; gap: 14px; font-size: 8px; letter-spacing: 6px; text-transform: uppercase; color: var(--gold-mid); margin-bottom: 32px; margin-top: 0; font-weight: 700; } .section-eyebrow::before { content: '\u25c6'; font-size: 5px; color: var(--gold-bright); flex-shrink: 0; } .section-eyebrow::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, var(--gold-line-md) 0%, transparent 100%); } .step-panel { display: none; } .step-panel.is-active { display: block; animation: revealPanel 0.42s cubic-bezier(.22,.68,0,1.1) forwards; } @keyframes revealPanel { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; } .field-single { margin-bottom: 18px; } .field-label { display: block; font-size: 8.5px; letter-spacing: 4px; text-transform: uppercase; color: var(--text-main); margin-bottom: 10px; font-weight: 700; } .field-sublabel { font-weight: 300; text-transform: none; letter-spacing: 0; margin-left: 6px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13.5px; color: var(--text-muted); } input[type=\"text\"], input[type=\"email\"], input[type=\"tel\"], textarea, select { width: 100%; padding: 15px 20px; background: var(--field-bg); border: none; border-bottom: 1px solid var(--border-md); color: var(--text-main); font-family: 'Lato', sans-serif; font-size: 14.5px; font-weight: 400; outline: none; transition: border-color 0.3s, background 0.3s, box-shadow 0.3s; appearance: none; -webkit-appearance: none; border-radius: 0; letter-spacing: 0.2px; border-top: 1px solid transparent; border-left: 1px solid transparent; border-right: 1px solid transparent; } input:focus, select:focus, textarea:focus { border-color: var(--gold-line-md); border-bottom-color: var(--gold-mid); background: var(--field-focus); box-shadow: 0 3px 0 -1px var(--gold-line), 0 8px 24px rgba(156,114,48,0.05); } input::placeholder, textarea::placeholder { color: #8C7A64; font-size: 13.5px; font-weight: 300; font-family: 'Cormorant Garamond', serif; font-style: italic; } textarea { resize: vertical; min-height: 128px; line-height: 1.75; } select { background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='9' height='5'%3E%3Cpath d='M0 0l4.5 5 4.5-5z' fill='rgba(156,114,48,0.65)'\/%3E%3C\/svg%3E\"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 42px; cursor: pointer; } select option { background: var(--cream); color: var(--text-main); } input.has-error, select.has-error, textarea.has-error { border-bottom-color: rgba(116,19,31,0.6) !important; background: rgba(116,19,31,0.025) !important; } .other-reveal { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.4s ease, opacity 0.35s ease, margin 0.35s ease; } .other-reveal.open { max-height: 80px; opacity: 1; margin-top: 12px; } .radio-group { display: flex; gap: 12px; } .radio-group.col { flex-direction: column; gap: 10px; } .radio-card { flex: 1; padding: 15px 20px; border: 1px solid var(--border); cursor: pointer; display: flex; align-items: center; gap: 14px; transition: border-color 0.28s, background 0.28s; user-select: none; } .radio-card:hover { border-color: var(--gold-line-str); background: var(--gold-pale); } .radio-card input[type=\"radio\"] { display: none; } .radio-card.picked { border-color: var(--gold-mid); background: var(--gold-pale); } .r-ring { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--border-md); display: flex; align-items: center; justify-content: center; transition: border-color 0.22s; } .radio-card.picked .r-ring { border-color: var(--gold); } .r-ring::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); display: none; } .radio-card.picked .r-ring::after { display: block; } .r-text { font-size: 13.5px; color: #2A2018; font-weight: 400; line-height: 1.4; } .radio-card.picked .r-text { color: var(--text-main); font-weight: 700; } .intent-card { padding: 26px 30px; border: 1px solid var(--border); cursor: pointer; display: flex; align-items: flex-start; gap: 20px; transition: border-color 0.28s, background 0.28s, box-shadow 0.28s; margin-bottom: 14px; user-select: none; position: relative; overflow: hidden; } .intent-card::before { content: ''; position: absolute; left: 0; top: 8%; bottom: 8%; width: 0; background: linear-gradient(to bottom, var(--gold-bright), var(--gold)); transition: width 0.35s ease; border-radius: 0 2px 2px 0; } .intent-card:hover { border-color: var(--gold-line-str); background: var(--gold-pale); } .intent-card input[type=\"radio\"] { display: none; } .intent-card.picked { border-color: var(--gold-mid); background: var(--gold-pale); box-shadow: 0 4px 24px rgba(156,114,48,0.08); } .intent-card.picked::before { width: 3px; } .i-ring { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; border: 1.5px solid var(--border-md); display: flex; align-items: center; justify-content: center; transition: border-color 0.22s; } .intent-card.picked .i-ring { border-color: var(--gold); } .i-ring::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); display: none; } .intent-card.picked .i-ring::after { display: block; } .intent-content { flex: 1; } .intent-badge { display: inline-block; font-size: 7px; letter-spacing: 3.5px; text-transform: uppercase; padding: 4px 11px; margin-bottom: 13px; border: 1px solid currentColor; font-weight: 700; } .badge-free { color: var(--text-muted); } .badge-premium { color: var(--gold); } .intent-content h4 { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 500; color: var(--text-main); margin-bottom: 9px; letter-spacing: -0.2px; } .intent-content p { font-size: 13.5px; color: #2A2018; line-height: 1.7; font-weight: 400; } .intent-note { margin-top: 11px !important; font-family: 'Cormorant Garamond', serif !important; font-size: 15.5px !important; font-style: italic !important; color: var(--text-sub) !important; font-weight: 300 !important; } .terms-row { display: flex; align-items: flex-start; gap: 18px; padding: 22px 26px; border: 1px solid var(--border); background: var(--cream-2); margin-top: 32px; cursor: pointer; transition: border-color 0.25s, background 0.25s; } .terms-row:hover { border-color: var(--gold-line-str); background: var(--gold-pale); } .terms-box { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; border: 1.5px solid var(--border-md); display: flex; align-items: center; justify-content: center; transition: all 0.22s; } .terms-box.ticked { border-color: var(--gold); background: rgba(156,114,48,0.12); } .terms-box.ticked::after { content: '\u2713'; font-size: 11px; color: var(--gold); font-weight: 700; } .terms-text { font-size: 13px; color: #2A2018; line-height: 1.8; font-weight: 400; } .terms-text a { color: var(--gold-mid); text-decoration: none; font-weight: 400; border-bottom: 1px solid var(--gold-line); transition: color 0.2s; } .terms-text a:hover { color: var(--gold-bright); } .step-nav { display: flex; gap: 14px; margin-top: 44px; align-items: stretch; } .btn-prev { flex-shrink: 0; padding: 0 28px; background: transparent; border: 1px solid var(--border-md); color: #5C4E3C; font-family: 'Lato', sans-serif; font-size: 8.5px; letter-spacing: 3.5px; text-transform: uppercase; cursor: pointer; font-weight: 700; transition: all 0.25s; display: flex; align-items: center; gap: 10px; min-height: 54px; } .btn-prev:hover { border-color: var(--gold-line-str); color: var(--gold-mid); background: var(--gold-pale); } .btn-next { flex: 1; padding: 0 32px; background: var(--burgundy); color: var(--cream); font-family: 'Lato', sans-serif; font-size: 9px; letter-spacing: 5px; text-transform: uppercase; border: none; cursor: pointer; font-weight: 700; transition: background 0.3s, letter-spacing 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 12px; } .btn-next::after { content: ''; position: absolute; top: 0; left: -100%; bottom: 0; width: 55%; background: linear-gradient(90deg, transparent, rgba(255,220,130,0.12), transparent); transition: left 0.65s ease; } .btn-next:hover { background: var(--burg-deep); letter-spacing: 6.5px; box-shadow: 0 6px 28px rgba(116,19,31,0.28); } .btn-next:hover::after { left: 160%; } .btn-submit { flex: 1; padding: 0 32px; background: var(--burgundy); color: var(--cream); font-family: 'Lato', sans-serif; font-size: 9px; letter-spacing: 5px; text-transform: uppercase; border: none; cursor: pointer; font-weight: 700; transition: background 0.3s, letter-spacing 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; min-height: 54px; } .btn-submit::after { content: ''; position: absolute; top: 0; left: -100%; bottom: 0; width: 55%; background: linear-gradient(90deg, transparent, rgba(255,220,130,0.12), transparent); transition: left 0.65s ease; } .btn-submit:hover { background: var(--burg-deep); letter-spacing: 6.5px; box-shadow: 0 6px 28px rgba(116,19,31,0.28); } .btn-submit:hover::after { left: 160%; } .submit-caption { text-align: center; margin-top: 20px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; font-weight: 300; color: var(--gold-mid); letter-spacing: 1px; } .form-foot { text-align: center; margin-top: 36px; font-size: 8px; letter-spacing: 8px; color: var(--gold-line-str); } .success-view { display: none; position: relative; overflow: hidden; background: var(--ink); min-height: 560px; } .success-view.show { display: flex; flex-direction: column; align-items: center; justify-content: center; animation: successReveal 0.7s cubic-bezier(.16,.84,.44,1) forwards; } @keyframes successReveal { from { opacity: 0; } to { opacity: 1; } } .success-view::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 50%, rgba(116,19,31,0.45) 0%, transparent 55%), radial-gradient(ellipse at 80% 30%, rgba(156,114,48,0.22) 0%, transparent 50%), radial-gradient(ellipse at 55% 85%, rgba(116,19,31,0.20) 0%, transparent 45%); pointer-events: none; } .success-view::after { content: ''; position: absolute; inset: 0; background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='4' stitchTiles='stitch'\/%3E%3CfeColorMatrix type='saturate' values='0'\/%3E%3C\/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.055'\/%3E%3C\/svg%3E\"); pointer-events: none; } .success-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 80px 64px 72px; text-align: center; } .success-diamond { width: 64px; height: 64px; position: relative; margin-bottom: 44px; animation: diamondSpin 1.2s cubic-bezier(.22,.68,0,1.2) forwards; opacity: 0; } @keyframes diamondSpin { 0% { opacity: 0; transform: rotate(-90deg) scale(0.5); } 60% { opacity: 1; transform: rotate(8deg) scale(1.05); } 100% { opacity: 1; transform: rotate(0deg) scale(1); } } .success-diamond svg { width: 64px; height: 64px; } .success-diamond .gem-outer { fill: none; stroke: var(--gold-mid); stroke-width: 1; } .success-diamond .gem-inner { fill: none; stroke: var(--gold-bright); stroke-width: 0.6; opacity: 0.6; } .success-diamond .gem-cross { stroke: rgba(202,160,72,0.35); stroke-width: 0.5; } .success-tag { font-size: 7.5px; letter-spacing: 7px; text-transform: uppercase; color: var(--gold-mid); font-weight: 700; margin-bottom: 28px; display: flex; align-items: center; gap: 14px; animation: fadeUp 0.6s 0.3s ease both; } .success-tag::before, .success-tag::after { content: ''; width: 32px; height: 1px; background: linear-gradient(to right, transparent, var(--gold-line-str)); } .success-tag::after { background: linear-gradient(to left, transparent, var(--gold-line-str)); } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .success-headline { font-family: 'Playfair Display', serif; font-size: clamp(34px, 4.5vw, 54px); font-weight: 400; line-height: 1.12; color: var(--cream); letter-spacing: -0.5px; margin-bottom: 10px; animation: fadeUp 0.6s 0.45s ease both; } .success-headline em { color: var(--gold-bright); font-style: italic; display: block; } .success-rule { width: 1px; height: 52px; margin: 32px auto; background: linear-gradient(to bottom, transparent, var(--gold-mid), transparent); animation: fadeUp 0.6s 0.6s ease both; } .success-body { font-family: 'Cormorant Garamond', serif; font-size: 19px; font-style: italic; font-weight: 400; color: rgba(249,245,238,0.75); line-height: 1.8; max-width: 400px; margin-bottom: 14px; animation: fadeUp 0.6s 0.7s ease both; } .success-note { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(249,245,238,0.35); font-weight: 700; margin-bottom: 52px; animation: fadeUp 0.6s 0.8s ease both; } .success-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; max-width: 320px; animation: fadeUp 0.6s 0.9s ease both; } .success-close { width: 100%; padding: 17px 52px; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); border: none; color: var(--ink); font-family: 'Lato', sans-serif; font-size: 8.5px; letter-spacing: 5px; text-transform: uppercase; cursor: pointer; font-weight: 700; transition: all 0.3s; position: relative; overflow: hidden; } .success-close::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%); transform: translateX(-100%); transition: transform 0.5s ease; } .success-close:hover { letter-spacing: 6px; box-shadow: 0 6px 30px rgba(156,114,48,0.45); } .success-close:hover::after { transform: translateX(100%); } .success-link { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; color: rgba(249,245,238,0.45); background: none; border: none; cursor: pointer; transition: color 0.25s; letter-spacing: 0.3px; } .success-link:hover { color: rgba(249,245,238,0.75); } .success-filigree { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; z-index: 2; font-size: 8px; letter-spacing: 10px; color: rgba(156,114,48,0.35); } .error-banner { background: rgba(116,19,31,0.06); border: 1px solid rgba(116,19,31,0.25); padding: 14px 20px; margin-bottom: 24px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 15px; color: var(--burgundy); display: none; animation: revealPanel 0.3s ease; } .error-banner.show { display: block; } @media (max-width: 620px) { .modal-inner { padding: 4px 26px 60px; } .field-row { grid-template-columns: 1fr; } .radio-group { flex-direction: column; } .step-label { font-size: 6px; letter-spacing: 1.5px; } .step-circle { width: 34px; height: 34px; } .btn-prev { padding: 0 18px; } } .wordmark { font-family:'Playfair Display',serif; font-size:15px; letter-spacing:6px; text-transform:uppercase; color:var(--text-main); text-align:center; } .wordmark span { color:var(--gold); } .wordmark small { display:block; font-family:'Lato',sans-serif; font-size:8px; letter-spacing:5px; color:var(--text-muted); margin-top:6px; } .form-badge { display:inline-block; font-family:'Lato',sans-serif; font-size:9px; font-weight:700; letter-spacing:4px; text-transform:uppercase; padding:8px 16px; margin-bottom:20px; border:1px solid var(--gold-line-md); color:var(--gold); } .form-badge.paid { background:var(--gold-bright); color:#14100C; border-color:var(--gold-bright); } .paid-note { font-family:'Lato',sans-serif; font-size:12.5px; letter-spacing:.3px; color:var(--gold-light); margin-top:14px; } .theme-paid .close-wrap { background:var(--burgundy); } .theme-paid .close-btn { color:rgba(249,245,238,.75); } .theme-paid .modal-crown .crown-line { opacity:.9; } .theme-paid .modal-header { background:var(--burgundy); margin:-6px -64px 40px; padding:30px 64px 44px; } .theme-paid .modal-header .wordmark { color:#F9F5EE; } .theme-paid .modal-header .wordmark span { color:#E2C07A; } .theme-paid .modal-header .wordmark small { color:rgba(249,245,238,.6); } .theme-paid .modal-title { color:#F9F5EE; } .theme-paid .modal-title em { color:#E2C07A; } .theme-paid .modal-sub { color:rgba(249,245,238,.88); } .theme-paid .paid-note { color:#E2C07A; } .theme-paid .header-divider { opacity:.6; } .theme-paid .header-divider-gem { color:#E2C07A; } .theme-paid .form-badge.paid { background:#E2C07A; border-color:#E2C07A; color:#3A0A10; } .theme-paid .intent-card.picked { border-color:var(--burgundy); } .req { color: var(--burgundy); font-weight: 700; } .box-error .field-label { color: var(--burgundy); } input.has-error, select.has-error, textarea.has-error { border: 1px solid rgba(116,19,31,0.75) !important; background: rgba(116,19,31,0.05) !important; } .box-error .radio-card, .box-error .intent-card { border-color: rgba(116,19,31,0.6); } .terms-row.box-error { border-color: rgba(116,19,31,0.75); background: rgba(116,19,31,0.05); } .field-err { margin-top: 8px; font-family: 'Lato', sans-serif; font-size: 12.5px; font-weight: 700; color: var(--burgundy); letter-spacing: .2px; } .field-err::before { content: '! '; } .step-alert { margin: -10px 0 26px; padding: 14px 18px; border-left: 3px solid var(--burgundy); background: rgba(116,19,31,0.06); font-family: 'Lato', sans-serif; font-size: 13.5px; color: var(--burgundy); font-weight: 700; animation: revealPanel .3s ease; } @media (max-width: 620px) { .theme-paid .modal-header { margin:-4px -26px 32px; padding:26px 26px 36px; } } <\/style>\n<\/head>\n<body>\n<button class=\"demo-trigger\" onclick=\"NCF.openForm()\">Join the Private Network<\/button>\n<div class=\"overlay \" id=\"ncf-overlay\" onclick=\"NCF.handleOverlayClick(event)\">\n<div class=\"modal\" id=\"ncf-modal\">\n<div class=\"modal-crown\">\n<span class=\"crown-line\"><\/span>\n<span class=\"crown-line\"><\/span>\n<span class=\"crown-line\"><\/span>\n<\/div>\n<div class=\"close-wrap\">\n<button class=\"close-btn\" onclick=\"NCF.closeForm()\">Close &nbsp; \u2715<\/button>\n<\/div>\n<div class=\"modal-inner\" id=\"ncf-form-view\">\n<div class=\"modal-header\">\n<div style=\"margin-bottom:28px;\">\n<div class=\"wordmark\">Nubian <span>Connections<\/span><small>International<\/small><\/div>\n<\/div>\n<div class=\"form-badge\">Free \u00b7 Private network<\/div>\n<h2 class=\"modal-title\">Join our<br><em>private network.<\/em><\/h2>\n<p class=\"modal-sub\">Free to join. Women and men can join to be considered for a potential introduction when a client\u2019s search appears compatible. Every application is read by a person, not an algorithm.<\/p>\n<div class=\"header-divider\">\n<span class=\"header-divider-gem\">\u25c6 &nbsp; \u25c6 &nbsp; \u25c6<\/span>\n<\/div>\n<\/div>\n<div class=\"stepper-wrap\">\n<div class=\"stepper-track\"><\/div>\n<div class=\"stepper-track-fill\" id=\"ncf-track-fill\"><\/div>\n<div class=\"stepper\" id=\"ncf-stepper\">\n<div class=\"step-dot is-active\" data-step=\"1\" onclick=\"NCF.jumpToStep(1)\">\n<div class=\"step-circle\">\n<span class=\"step-num\">01<\/span>\n<span class=\"step-check\">\u2713<\/span>\n<\/div>\n<div class=\"step-label\">About<br>You<\/div>\n<\/div>\n<div class=\"step-dot\" data-step=\"2\" onclick=\"NCF.jumpToStep(2)\">\n<div class=\"step-circle\">\n<span class=\"step-num\">02<\/span>\n<span class=\"step-check\">\u2713<\/span>\n<\/div>\n<div class=\"step-label\">Your<br>Search<\/div>\n<\/div>\n<div class=\"step-dot\" data-step=\"3\" onclick=\"NCF.jumpToStep(3)\">\n<div class=\"step-circle\">\n<span class=\"step-num\">03<\/span>\n<span class=\"step-check\">\u2713<\/span>\n<\/div>\n<div class=\"step-label\">Your<br>Story<\/div>\n<\/div>\n<\/div>\n<\/div>\n<form id=\"ncf-nc-form\" onsubmit=\"NCF.handleSubmit(event)\" novalidate>\n<input type=\"hidden\" name=\"form_type\" value=\"Private Network (free)\">\n<input type=\"hidden\" name=\"referral\" value=\"\">\n<input type=\"text\" name=\"website\" tabindex=\"-1\" autocomplete=\"off\" style=\"position:absolute;left:-9999px;opacity:0;height:0;width:0\" aria-hidden=\"true\">\n<div class=\"step-panel is-active\" id=\"ncf-step-1\">\n<div class=\"section-eyebrow\">About You<\/div>\n<div class=\"field-row\">\n<div>\n<label class=\"field-label\">First Name<\/label>\n<input type=\"text\" name=\"first_name\" placeholder=\"Your first name\">\n<\/div>\n<div>\n<label class=\"field-label\">Last Name<\/label>\n<input type=\"text\" name=\"last_name\" placeholder=\"Your last name\">\n<\/div>\n<\/div>\n<div class=\"field-row\">\n<div>\n<label class=\"field-label\">Email<\/label>\n<input type=\"email\" name=\"email\" id=\"ncf-email-a\" placeholder=\"your@email.com\">\n<\/div>\n<div>\n<label class=\"field-label\">Confirm Email<\/label>\n<input type=\"email\" name=\"email_confirm\" id=\"ncf-email-b\" placeholder=\"Confirm your email\">\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Phone <span class=\"field-sublabel\">WhatsApp preferred \u2014 required<\/span><\/label>\n<input type=\"tel\" name=\"phone\" id=\"ncf-phone\" placeholder=\"+44 7700 000 000\">\n<\/div>\n<div class=\"field-row\">\n<div>\n<label class=\"field-label\">City<\/label>\n<input type=\"text\" name=\"city\" placeholder=\"Your city\">\n<\/div>\n<div>\n<label class=\"field-label\">Country<\/label>\n<input type=\"text\" name=\"country\" placeholder=\"Your country\">\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">I am\u2026<\/label>\n<div class=\"radio-group\">\n<label class=\"radio-card\" onclick=\"NCF.pickRadio(this,'gender')\">\n<input type=\"radio\" name=\"gender\" value=\"woman\">\n<div class=\"r-ring\"><\/div><span class=\"r-text\">A woman<\/span>\n<\/label>\n<label class=\"radio-card\" onclick=\"NCF.pickRadio(this,'gender')\">\n<input type=\"radio\" name=\"gender\" value=\"man\">\n<div class=\"r-ring\"><\/div><span class=\"r-text\">A man<\/span>\n<\/label>\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Preferred language<\/label>\n<div class=\"radio-group\">\n<label class=\"radio-card\" onclick=\"NCF.pickRadio(this,'language')\">\n<input type=\"radio\" name=\"language\" value=\"English\">\n<div class=\"r-ring\"><\/div><span class=\"r-text\">English<\/span>\n<\/label>\n<label class=\"radio-card\" onclick=\"NCF.pickRadio(this,'language')\">\n<input type=\"radio\" name=\"language\" value=\"French\">\n<div class=\"r-ring\"><\/div><span class=\"r-text\">French<\/span>\n<\/label>\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Date of Birth<\/label>\n<div style=\"display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;\">\n<select name=\"dob_month\">\n<option value=\"\" disabled selected>Month<\/option>\n<option>January<\/option><option>February<\/option><option>March<\/option>\n<option>April<\/option><option>May<\/option><option>June<\/option>\n<option>July<\/option><option>August<\/option><option>September<\/option>\n<option>October<\/option><option>November<\/option><option>December<\/option>\n<\/select>\n<select name=\"dob_day\">\n<option value=\"\" disabled selected>Day<\/option>\n<script>for(let i=1;i<=31;i++) document.write(`<option>${i}<\/option>`);<\/script>\n<\/select>\n<select name=\"dob_year\">\n<option value=\"\" disabled selected>Year<\/option>\n<script>for(let i=new Date().getFullYear()-18;i>=1940;i--) document.write(`<option>${i}<\/option>`);<\/script>\n<\/select>\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Nationality<\/label>\n<input type=\"text\" name=\"nationality\" placeholder=\"e.g. British, French, Nigerian, Cameroonian\u2026\">\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Marital Status<\/label>\n<select name=\"marital_status\">\n<option value=\"\" disabled selected>Select your status<\/option>\n<option value=\"single\">Single \u2014 never married<\/option>\n<option value=\"divorced\">Divorced<\/option>\n<option value=\"widowed\">Widowed<\/option>\n<option value=\"separated\">Separated<\/option>\n<\/select>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Education Level<\/label>\n<select name=\"education\" id=\"ncf-edu-select\" onchange=\"NCF.revealOther('ncf-edu-select','ncf-edu-other')\">\n<option value=\"\" disabled selected>Select your highest level<\/option>\n<option value=\"secondary\">Secondary \/ High School<\/option>\n<option value=\"undergraduate\">Undergraduate degree<\/option>\n<option value=\"postgraduate\">Postgraduate degree<\/option>\n<option value=\"doctorate\">Doctorate \/ PhD<\/option>\n<option value=\"professional\">Professional qualification<\/option>\n<option value=\"other\">Other<\/option>\n<\/select>\n<div class=\"other-reveal\" id=\"ncf-edu-other\">\n<input type=\"text\" name=\"education_other\" placeholder=\"Please specify\u2026\">\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Profession<\/label>\n<input type=\"text\" name=\"profession\" placeholder=\"Your profession or industry\">\n<\/div>\n<div class=\"step-nav\">\n<button type=\"button\" class=\"btn-next\" onclick=\"NCF.goNext(2)\">Continue &nbsp;\u2192<\/button>\n<\/div>\n<\/div>\n<div class=\"step-panel\" id=\"ncf-step-2\">\n<div class=\"section-eyebrow\">Your Search<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Geographic Availability<\/label>\n<select name=\"geography\">\n<option value=\"\" disabled selected>Select your preference<\/option>\n<option value=\"same_city\">Same city only<\/option>\n<option value=\"same_country\">Same country<\/option>\n<option value=\"other_countries\">Open to other countries<\/option>\n<option value=\"international\">Open internationally<\/option>\n<\/select>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Are you looking for something serious?<\/label>\n<div class=\"radio-group col\">\n<label class=\"radio-card\" onclick=\"NCF.pickRadio(this,'serious')\">\n<input type=\"radio\" name=\"serious\" value=\"yes\">\n<div class=\"r-ring\"><\/div>\n<span class=\"r-text\">Yes \u2014 I am ready for a committed relationship<\/span>\n<\/label>\n<label class=\"radio-card\" onclick=\"NCF.pickRadio(this,'serious')\">\n<input type=\"radio\" name=\"serious\" value=\"open\">\n<div class=\"r-ring\"><\/div>\n<span class=\"r-text\">I am open to it, taking my time<\/span>\n<\/label>\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Describe yourself<\/label>\n<textarea name=\"about_self\" placeholder=\"Your personality, your lifestyle, what makes you who you are\u2026\"><\/textarea>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">What matters most to you in a partner?<\/label>\n<textarea name=\"about_partner\" placeholder=\"Values, personality, lifestyle, non-negotiables\u2026\"><\/textarea>\n<\/div>\n<div class=\"step-nav\">\n<button type=\"button\" class=\"btn-prev\" onclick=\"NCF.jumpToStep(1)\">\u2190 Back<\/button>\n<button type=\"button\" class=\"btn-next\" onclick=\"NCF.goNext(3)\">Continue &nbsp;\u2192<\/button>\n<\/div>\n<\/div>\n<div class=\"step-panel\" id=\"ncf-step-3\">\n<div class=\"section-eyebrow\">Your Story<\/div>\n<div class=\"error-banner\" id=\"ncf-error-banner\">\nPlease complete the required fields before submitting.\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">How did you hear about us?<\/label>\n<select name=\"source\" id=\"ncf-src-select\" onchange=\"NCF.revealOther('ncf-src-select','ncf-src-other')\">\n<option value=\"\" disabled selected>Select an option<\/option>\n<option value=\"friend\">Word of mouth \u2014 a friend or member<\/option>\n<option value=\"instagram\">Instagram<\/option>\n<option value=\"google\">Google search<\/option>\n<option value=\"linkedin\">LinkedIn<\/option>\n<option value=\"event\">An event<\/option>\n<option value=\"press\">Press or media<\/option>\n<option value=\"ambassador\">An ambassador or influencer<\/option>\n<option value=\"other\">Other<\/option>\n<\/select>\n<div class=\"other-reveal\" id=\"ncf-src-other\">\n<input type=\"text\" name=\"source_other\" placeholder=\"Please tell us more (e.g. the name of the ambassador)\u2026\">\n<\/div>\n<\/div>\n<div class=\"field-single\">\n<label class=\"field-label\">Why would you like to join our network?<\/label>\n<textarea name=\"why_select\" placeholder=\"What would you like us to know about you? What do you bring to the people you meet?\"><\/textarea>\n<\/div>\n<p class=\"intent-note\" style=\"margin:6px 0 22px;\">Free membership does not include a dedicated search, coaching or guaranteed introductions. If a client\u2019s search appears compatible with your profile, we may contact you to explore your interest.<\/p>\n<div class=\"terms-row\" onclick=\"NCF.toggleTerms()\">\n<div class=\"terms-box\" id=\"ncf-terms-box\"><\/div>\n<div class=\"terms-text\">\nI agree to the <a href=\"https:\/\/nubianconnections.com\/en\/terms-and-conditions\/\" target=\"_blank\" rel=\"noopener\" onclick=\"event.stopPropagation()\">Terms &amp; Conditions<\/a> and the <a href=\"https:\/\/nubianconnections.com\/en\/privacy-policy\/\" target=\"_blank\" rel=\"noopener\" onclick=\"event.stopPropagation()\">Privacy Policy<\/a>. My information will be handled with complete discretion and never shared without my consent.\n<\/div>\n<\/div>\n<div class=\"step-nav\">\n<button type=\"button\" class=\"btn-prev\" onclick=\"NCF.jumpToStep(2)\">\u2190 Back<\/button>\n<button type=\"submit\" class=\"btn-submit\">Join the Private Network<\/button>\n<\/div>\n<p class=\"submit-caption\">\u25c6 &nbsp; Free to join \u00b7 No obligation to purchase a service &nbsp; \u25c6<\/p>\n<div class=\"form-foot\">\u25c6 &nbsp; \u25c6 &nbsp; \u25c6<\/div>\n<\/div>\n<\/form>\n<\/div>\n<div class=\"success-view\" id=\"ncf-success-view\">\n<div class=\"success-inner\">\n<!-- Animated diamond gem -->\n<div class=\"success-diamond\">\n<svg viewBox=\"0 0 64 64\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<!-- Outer diamond -->\n<rect class=\"gem-outer\" x=\"9\" y=\"9\" width=\"46\" height=\"46\" rx=\"1\" transform=\"rotate(45 32 32)\"\/>\n<!-- Inner diamond -->\n<rect class=\"gem-inner\" x=\"16\" y=\"16\" width=\"32\" height=\"32\" rx=\"0.5\" transform=\"rotate(45 32 32)\"\/>\n<!-- Cross lines -->\n<line class=\"gem-cross\" x1=\"32\" y1=\"2\" x2=\"32\" y2=\"62\"\/>\n<line class=\"gem-cross\" x1=\"2\" y1=\"32\" x2=\"62\" y2=\"32\"\/>\n<!-- Diagonal facet lines -->\n<line class=\"gem-cross\" x1=\"12\" y1=\"12\" x2=\"52\" y2=\"52\" opacity=\"0.4\"\/>\n<line class=\"gem-cross\" x1=\"52\" y1=\"12\" x2=\"12\" y2=\"52\" opacity=\"0.4\"\/>\n<!-- Center point -->\n<circle cx=\"32\" cy=\"32\" r=\"2\" fill=\"rgba(202,160,72,0.5)\"\/>\n<\/svg>\n<\/div>\n<div class=\"success-tag\">Nubian Connections<\/div>\n<h2 class=\"success-headline\">Your application<em>has been received.<\/em><\/h2>\n<div class=\"success-rule\"><\/div>\n<p class=\"success-body\">Every application is read personally by our team.<br>If your profile is accepted, we will contact you to complete your member questionnaire.<\/p>\n<p class=\"success-note\">\u25c6 &nbsp; Confidential &nbsp;\u00b7&nbsp; Personal &nbsp;\u00b7&nbsp; Discreet &nbsp; \u25c6<\/p>\n<div class=\"success-actions\">\n<button class=\"success-close\" onclick=\"NCF.closeForm()\">Close this window<\/button>\n<a class=\"success-link\" href=\"https:\/\/nubianconnections.com\/en\/\" style=\"text-decoration:none;display:inline-block;\">Return to Nubian Connections<\/a>\n<\/div>\n<\/div>\n<div class=\"success-filigree\">\u25c6 &nbsp; \u25c6 &nbsp; \u25c6<\/div>\n<\/div>\n<\/div>\n<\/div>\n<!-- Sending: EmailJS (same account as the member questionnaire) -->\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@emailjs\/browser@4.4.1\/dist\/email.min.js\"><\/script>\n<script>(function(){\nconst ROOT = () => document.getElementById('ncf-overlay');\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 SETTINGS \u2014 check these before going live \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nconst EMAILJS_PUBLIC_KEY  = 'mq94-ujfcMRRR1A2u';\nconst EMAILJS_SERVICE_ID  = 'service_54mk4qs';\nconst EMAILJS_TEMPLATE_ID = 'template_gnbpe0o';   \/\/ notification to you: it must display {{message}}\nconst EMAILJS_CONFIRM_TEMPLATE_ID = 'template_upc0p77';   \/\/ automatic confirmation to the applicant (To Email = {{to_email}})\nconst CONFIRM = {\"en\": {\"default\": \"<p style=\\\"margin:0 0 14px;\\\">Thank you for applying to join the Nubian Connections private network. Every application is read personally by our team.<\/p><p style=\\\"margin:0 0 14px;\\\">If your profile is accepted, we will contact you to complete your member questionnaire. Free membership does not include a dedicated search or guaranteed introductions.<\/p><p style=\\\"margin:0 0 14px;\\\">Your information will be handled with care and in complete confidentiality.<\/p>\"}, \"fr\": {\"default\": \"<p style=\\\"margin:0 0 14px;\\\">Merci pour votre candidature au r\u00e9seau priv\u00e9 Nubian Connections. Chaque candidature est lue personnellement par notre \u00e9quipe.<\/p><p style=\\\"margin:0 0 14px;\\\">Si votre profil est accept\u00e9, nous vous contacterons pour compl\u00e9ter votre questionnaire membre. L\u2019adh\u00e9sion gratuite n\u2019inclut pas de recherche d\u00e9di\u00e9e ni de pr\u00e9sentations garanties.<\/p><p style=\\\"margin:0 0 14px;\\\">Vos informations seront trait\u00e9es avec attention et en toute confidentialit\u00e9.<\/p>\"}};   \/\/ confirmation text by language, then by service ('default' otherwise)\nfunction confirmParams(data) {\nconst lg = (data.language === 'French' && CONFIRM.fr) ? 'fr' : 'en';\nconst set = CONFIRM[lg] || {};\nconst txt = set[data.service] || set['default'] || CONFIRM.en['default'];\nreturn lg === 'fr' ? { message_fr: txt } : { message: txt };\n}\nconst BOOKING_URL = '';                            \/\/ e.g. your Calendly link \u2014 leave empty if not used\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nlet current = 1;\nconst STEPS = 3;\nlet termsTicked = false;\nconst fillPct = { 1: '0.0%', 2: '50.0%', 3: '100.0%' };\nfunction openForm() {\ndocument.getElementById('ncf-overlay').classList.add('open');\ndocument.body.style.overflow = 'hidden';\n}\nfunction closeForm() {\ndocument.getElementById('ncf-overlay').classList.remove('open');\ndocument.body.style.overflow = '';\nsetTimeout(resetAll, 500);\n}\nfunction handleOverlayClick(e) {\nif (e.target === document.getElementById('ncf-overlay')) closeForm();\n}\ndocument.addEventListener('keydown', e => { if (e.key === 'Escape') closeForm(); });\nfunction renderStepper(active) {\nfor (let i = 1; i <= STEPS; i++) {\nconst dot = ROOT().querySelector(`.step-dot[data-step=\"${i}\"]`);\ndot.classList.remove('is-active', 'is-done');\nif (i < active) dot.classList.add('is-done');\nif (i === active) dot.classList.add('is-active');\n}\ndocument.getElementById('ncf-track-fill').style.width = fillPct[active];\n}\nlet COLLECT = null;   \/\/ when set, validation only lists the required fields (used to add the * marks)\nfunction fieldBox(el) { return el.closest('.field-single') || el.parentElement; }\nfunction markError(el, box, msg) {\nif (COLLECT) return;\nif (el) el.classList.add('has-error');\nbox.classList.add('box-error');\nif (!box.querySelector(':scope > .field-err')) {\nconst m = document.createElement('div'); m.className = 'field-err'; m.textContent = msg || 'Please complete this field.';\nbox.appendChild(m);\n}\n}\nfunction need(names, ok) {\nnames.forEach(name => {\nconst el = ROOT().querySelector(`[name=\"${name}\"]`);\nif (!el) return;\nif (COLLECT) { COLLECT.push(fieldBox(el)); return; }\nif (!String(el.value).trim()) { markError(el, fieldBox(el)); ok = false; }\n});\nreturn ok;\n}\nfunction needRadio(name, ok) {\nconst any = ROOT().querySelector(`input[name=\"${name}\"]`);\nif (!any) return ok;\nconst box = any.closest('.field-single') || any.closest('.radio-group') || any.parentElement;\nif (COLLECT) { COLLECT.push(box); return ok; }\nif (ROOT().querySelector(`input[name=\"${name}\"]:checked`)) return ok;\nmarkError(null, box, 'Please choose an option.');\nreturn false;\n}\nfunction clearErrors(scope) {\nscope.querySelectorAll('.has-error').forEach(el => el.classList.remove('has-error'));\nscope.querySelectorAll('.box-error').forEach(el => el.classList.remove('box-error'));\nscope.querySelectorAll('.field-err').forEach(el => el.remove());\nscope.querySelectorAll('.step-alert').forEach(el => el.remove());\n}\nfunction validateStep(step) {\nlet ok = true;\nconst panel = document.getElementById(`ncf-step-${step}`);\nclearErrors(panel);\nif (step === 1) {\nok = need(['first_name','last_name','email','email_confirm','phone','city','country','nationality','profession'], ok);\nconst ea = document.getElementById('ncf-email-a'), eb = document.getElementById('ncf-email-b');\nif (ea.value && eb.value && ea.value.trim().toLowerCase() !== eb.value.trim().toLowerCase()) { if (!COLLECT) markError(eb, fieldBox(eb), 'The two email addresses do not match.'); ok = false; }\nok = needRadio('gender', ok);\nok = needRadio('language', ok);\n}\nif (step === 2) {\nok = need(['about_self'], ok);\nok = needRadio('serious', ok);\n}\nif (step === 3) {\nok = need(['source','why_select'], ok);\nif (COLLECT) {} else if (!termsTicked) { const tr = ROOT().querySelector('.terms-row'); tr.classList.add('box-error'); if (!tr.querySelector('.field-err')) { const m = document.createElement('div'); m.className = 'field-err'; m.textContent = 'Please accept the Terms & Conditions and Privacy Policy.'; tr.after(m); } ok = false; }\n}\nif (!COLLECT && !termsTicked && panel.querySelector('.terms-row') && !ok) {}\nif (!ok && !COLLECT) {\nconst n = panel.querySelectorAll('.box-error').length;\nconst alert = document.createElement('div');\nalert.className = 'step-alert';\nalert.textContent = n > 1 ? `Almost there \u2014 ${n} fields need your attention. They are highlighted below.` : 'Almost there \u2014 one field needs your attention. It is highlighted below.';\npanel.insertBefore(alert, panel.querySelector('.section-eyebrow').nextSibling);\nconst first = panel.querySelector('.box-error');\nif (first) {\nfirst.scrollIntoView({ behavior: 'smooth', block: 'center' });\nconst f = first.querySelector('input:not([type=radio]):not([type=hidden]), select, textarea');\nif (f) setTimeout(() => f.focus({ preventScroll: true }), 350);\n}\n}\nreturn ok;\n}\nfunction markRequired() {\nCOLLECT = [];\nfor (let i = 1; i <= STEPS; i++) validateStep(i);\nconst boxes = COLLECT; COLLECT = null;\nboxes.forEach(b => {\nconst lab = b && (b.querySelector(':scope > .field-label') || b.querySelector('.field-label'));\nif (lab && !lab.querySelector('.req')) { const r = document.createElement('span'); r.className = 'req'; r.textContent = ' *'; lab.insertBefore(r, lab.querySelector('.field-sublabel')); }\n});\n}\n\/\/ a field turns back to normal as soon as it is filled in\ndocument.addEventListener('input', e => { const b = e.target.closest && e.target.closest('.box-error'); if (b && String(e.target.value).trim()) { b.classList.remove('box-error'); e.target.classList.remove('has-error'); b.querySelectorAll(':scope > .field-err').forEach(x => x.remove()); } });\ndocument.addEventListener('change', e => { const b = e.target.closest && e.target.closest('.box-error'); if (b && (e.target.value || e.target.checked)) { b.classList.remove('box-error'); e.target.classList.remove('has-error'); b.querySelectorAll(':scope > .field-err').forEach(x => x.remove()); } });\nfunction jumpToStep(n) {\nif (n === current) return;\ndocument.getElementById(`ncf-step-${current}`).classList.remove('is-active');\ncurrent = n;\ndocument.getElementById(`ncf-step-${current}`).classList.add('is-active');\nrenderStepper(current);\ndocument.getElementById('ncf-modal').scrollTop = 0;\n}\nfunction goNext(n) { if (validateStep(current)) jumpToStep(n); }\nfunction pickRadio(el, name) {\nROOT().querySelectorAll(`[onclick=\"NCF.pickRadio(this,'${name}')\"]`).forEach(c => c.classList.remove('picked'));\nel.classList.add('picked');\nel.querySelector('input[type=\"radio\"]').checked = true;\nconst eb = el.closest('.box-error'); if (eb) { eb.classList.remove('box-error'); eb.querySelectorAll(':scope > .field-err').forEach(x => x.remove()); }\n}\nfunction toggleTerms() {\ntermsTicked = !termsTicked;\nconst tr = ROOT().querySelector('.terms-row'); if (tr && termsTicked) { tr.classList.remove('box-error'); const nx = tr.nextElementSibling; if (nx && nx.classList.contains('field-err')) nx.remove(); }\ndocument.getElementById('ncf-terms-box').classList.toggle('ticked', termsTicked);\n}\nfunction revealOther(selId, revId) {\nconst sel = document.getElementById(selId);\ndocument.getElementById(revId).classList.toggle('open', sel.value === 'other' || sel.value === 'ambassador');\n}\n\/* Builds a readable summary of every answer *\/\nfunction collect() {\nconst form = document.getElementById('ncf-nc-form');\nconst data = {};\nnew FormData(form).forEach((v, k) => { if (k !== 'website' && k !== 'email_confirm') data[k] = v; });\nform.querySelectorAll('select').forEach(s => {\nif (s.value && s.selectedOptions[0]) data[s.name] = s.selectedOptions[0].textContent.trim();\n});\nconst lines = Object.entries(data).filter(([k, v]) => String(v).trim()).map(([k, v]) => `${k.replace(\/_\/g, ' ')}: ${v}`);\nreturn { data, message: lines.join('\\n') };\n}\nfunction showSuccess() {\ndocument.getElementById('ncf-form-view').style.display = 'none';\ndocument.getElementById('ncf-success-view').classList.add('show');\ndocument.getElementById('ncf-modal').scrollTop = 0;\nconst b = document.getElementById('booking-btn');\nif (b && BOOKING_URL) { b.href = BOOKING_URL; b.style.display = 'inline-block'; }\n}\nfunction handleSubmit(e) {\ne.preventDefault();\nconst banner = document.getElementById('ncf-error-banner');\nbanner.textContent = 'Please complete the required fields before submitting.';\nif (!validateStep(3)) return;\nbanner.classList.remove('show');\nif (ROOT().querySelector('[name=\"website\"]').value) { showSuccess(); return; }   \/\/ spam trap\nconst { data, message } = collect();\nconst btn = ROOT().querySelector('.btn-submit');\nconst label = btn.textContent;\nbtn.disabled = true; btn.textContent = 'Sending\u2026';\nconst params = Object.assign({}, data, {\nsubject: `New ${data.form_type} \u2014 ${data.first_name || ''} ${data.last_name || ''}`.trim(),\nfrom_name: `${data.first_name || ''} ${data.last_name || ''}`.trim(),\nname: `${data.first_name || ''} ${data.last_name || ''}`.trim(),\nreply_to: data.email, message: message\n});\nemailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, params, { publicKey: EMAILJS_PUBLIC_KEY })\n.then(() => {\nshowSuccess();\nif (EMAILJS_CONFIRM_TEMPLATE_ID && data.email) {\nemailjs.send(EMAILJS_SERVICE_ID, EMAILJS_CONFIRM_TEMPLATE_ID, {\nto_email: data.email, email: data.email, to_name: data.first_name || '', name: data.first_name || '',\nform_type: data.form_type, reply_to: 'love@nubianconnections.com',\n...confirmParams(data)\n}, { publicKey: EMAILJS_PUBLIC_KEY }).catch(() => {});   \/\/ never blocks the applicant\n}\n})\n.catch(() => {\nbanner.textContent = 'Sorry, your request could not be sent. Please try again, or write to love@nubianconnections.com.';\nbanner.classList.add('show');\ndocument.getElementById('ncf-modal').scrollTop = 0;\n})\n.finally(() => { btn.disabled = false; btn.textContent = label; });\n}\nfunction resetAll() {\ndocument.getElementById('ncf-nc-form').reset();\ndocument.getElementById('ncf-form-view').style.display = 'block';\ndocument.getElementById('ncf-success-view').classList.remove('show');\ndocument.getElementById('ncf-error-banner').classList.remove('show');\nROOT().querySelectorAll('.step-panel').forEach(p => p.classList.remove('is-active'));\ndocument.getElementById('ncf-step-1').classList.add('is-active');\nROOT().querySelectorAll('.radio-card, .intent-card').forEach(c => c.classList.remove('picked'));\nROOT().querySelectorAll('.intent-card.default').forEach(c => pickRadio(c, 'service'));\ntermsTicked = false;\ndocument.getElementById('ncf-terms-box').classList.remove('ticked');\nROOT().querySelectorAll('.other-reveal').forEach(r => r.classList.remove('open'));\nROOT().querySelectorAll('.has-error').forEach(el => el.classList.remove('has-error'));\ncurrent = 1;\nrenderStepper(1);\n}\nrenderStepper(1);\nmarkRequired();\n\/\/ ambassador tracking: ?ref=name in the link, remembered for 30 days (also set site-wide by the NC referral snippet)\n(function () {\nlet ref = '';\ntry {\nconst q = new URLSearchParams(location.search).get('ref');\nif (q) { ref = q.trim().toLowerCase().replace(\/[^a-z0-9_-]\/g, '').slice(0, 40); localStorage.setItem('nc_ref', JSON.stringify({ v: ref, t: Date.now() })); }\nelse { const st = JSON.parse(localStorage.getItem('nc_ref') || 'null'); if (st && st.v && Date.now() - st.t < 30 * 864e5) ref = st.v; }\n} catch (e) {}\nconst f = ROOT().querySelector('[name=\"referral\"]'); if (f) { if (ref) f.value = ref; }\n})();\nROOT().querySelectorAll('.intent-card.default').forEach(c => pickRadio(c, 'service'));\nwindow.addEventListener('load', () => setTimeout(openForm, 500));\nwindow.NCF = { openForm, closeForm, handleOverlayClick, jumpToStep, goNext, pickRadio, toggleTerms, revealOther, handleSubmit };\n})();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Join the Private Network | Nubian Connections Join the Private Network Close &nbsp; \u2715 Nubian ConnectionsInternational Free \u00b7 Private network Join ourprivate network. Free to join. Women and men can join to be considered for a potential introduction when a client\u2019s search appears compatible. Every application is read by a person, not an algorithm. \u25c6 &#8230; <a title=\"Join\" class=\"read-more\" href=\"https:\/\/nubianconnections.com\/en\/join\/\" aria-label=\"Read more about Join\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-4521","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/nubianconnections.com\/en\/wp-json\/wp\/v2\/pages\/4521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nubianconnections.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nubianconnections.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nubianconnections.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nubianconnections.com\/en\/wp-json\/wp\/v2\/comments?post=4521"}],"version-history":[{"count":5,"href":"https:\/\/nubianconnections.com\/en\/wp-json\/wp\/v2\/pages\/4521\/revisions"}],"predecessor-version":[{"id":5062,"href":"https:\/\/nubianconnections.com\/en\/wp-json\/wp\/v2\/pages\/4521\/revisions\/5062"}],"wp:attachment":[{"href":"https:\/\/nubianconnections.com\/en\/wp-json\/wp\/v2\/media?parent=4521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}