Find Your Fragrance

<div id="korbaj-quiz-root">
<style>
/* ---------- Fonts ---------- */
#korbaj-quiz-root .kq-wrap,
#korbaj-quiz-root .kq-wrap * {
box-sizing: border-box;
}
#korbaj-quiz-root {
--kq-black: #212121;
--kq-navy: #06355b;
--kq-navy-dark: #042642;
--kq-gold: #ab8c52;
--kq-gold-light: #cfa44f;
--kq-cream: #fcfbf9;
--kq-cream-2: #f5f2ec;
--kq-line: #e7e0d1;
--kq-muted: #6b6b6b;
--kq-heading: "Poppins", "Helvetica Neue", Arial, sans-serif;
--kq-body: "Syne", "Helvetica Neue", Arial, sans-serif;
font-family: var(--kq-body);
color: var(--kq-black);
-webkit-font-smoothing: antialiased;
/* Flex-centering — bulletproof against any theme parent */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
clear: both !important;
padding: 0 !important;
box-sizing: border-box !important;
}

/* ---------- Layout ---------- */
#korbaj-quiz-root .kq-wrap {
max-width: 860px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 56px 20px 80px;
background:
radial-gradient(ellipse 600px 300px at 50% 0%, rgba(6, 53, 91, 0.85), transparent 70%),
radial-gradient(ellipse 400px 200px at 80% 10%, rgba(171, 140, 82, 0.18), transparent 60%),
var(--kq-cream);
border-radius: 28px;
text-align: left;
float: none !important;
display: block !important;
box-sizing: border-box !important;
}
#korbaj-quiz-root .kq-inner {
background: #fff;
border: 1px solid rgba(231, 224, 209, 0.6);
padding: 44px 32px;
position: relative;
overflow: hidden;
border-radius: 24px;
box-shadow:
0 1px 2px rgba(6, 53, 91, 0.04),
0 10px 30px rgba(6, 53, 91, 0.08),
0 30px 80px rgba(6, 53, 91, 0.12);
}
#korbaj-quiz-root .kq-inner::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent 0%, var(--kq-gold) 50%, transparent 100%);
border-radius: 24px 24px 0 0;
}
#korbaj-quiz-root .kq-logo {
display: block;
margin: 0 auto 22px;
width: auto;
height: 56px;
max-width: 220px;
object-fit: contain;
}
#korbaj-quiz-root .kq-header-center {
text-align: center;
}
#korbaj-quiz-root .kq-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--kq-heading);
font-weight: 500;
font-size: 10.5px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--kq-gold);
border: 1.5px solid rgba(171, 140, 82, 0.35);
background: rgba(171, 140, 82, 0.08);
padding: 7px 16px;
border-radius: 100px;
margin-bottom: 20px;
backdrop-filter: blur(8px);
}
#korbaj-quiz-root .kq-badge::before {
content: "";
width: 6px; height: 6px;
background: var(--kq-gold);
border-radius: 50%;
box-shadow: 0 0 10px var(--kq-gold);
}
#korbaj-quiz-root .kq-badge--navy {
color: var(--kq-navy);
border-color: var(--kq-navy);
background: rgba(6, 53, 91, 0.06);
}
#korbaj-quiz-root h2.kq-title {
font-family: var(--kq-heading);
font-weight: 600;
font-size: 30px;
line-height: 1.2;
margin: 0 0 12px;
color: var(--kq-navy);
letter-spacing: -0.3px;
}
#korbaj-quiz-root p.kq-sub {
font-family: var(--kq-body);
color: var(--kq-muted);
font-size: 15px;
line-height: 1.6;
margin: 0 auto 32px;
max-width: 540px;
}

/* ---------- Progress ---------- */
#korbaj-quiz-root .kq-progress {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 28px;
}
#korbaj-quiz-root .kq-dot {
flex: 1;
height: 4px;
background: var(--kq-line);
position: relative;
border-radius: 100px;
overflow: hidden;
transition: all 0.4s ease;
}
#korbaj-quiz-root .kq-dot.done {
background: linear-gradient(90deg, var(--kq-gold), var(--kq-gold-light));
box-shadow: 0 0 12px rgba(171, 140, 82, 0.35);
}
#korbaj-quiz-root .kq-step-label {
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--kq-muted);
margin-left: 4px;
white-space: nowrap;
}

/* ---------- Question ---------- */
#korbaj-quiz-root .kq-question {
display: none;
animation: kqFade 0.4s ease both;
}
#korbaj-quiz-root .kq-question.active { display: block; }
@keyframes kqFade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
#korbaj-quiz-root .kq-q-title {
font-family: var(--kq-heading);
font-weight: 600;
font-size: 22px;
line-height: 1.3;
margin: 0 0 8px;
color: var(--kq-navy);
letter-spacing: -0.2px;
}
#korbaj-quiz-root .kq-q-desc {
font-size: 14px;
color: var(--kq-muted);
margin: 0 0 22px;
line-height: 1.55;
}
#korbaj-quiz-root .kq-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
#korbaj-quiz-root .kq-option {
border: 1.5px solid rgba(231, 224, 209, 0.8);
background: var(--kq-cream);
padding: 20px 18px;
cursor: pointer;
border-radius: 18px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-align: left;
font-family: var(--kq-body);
color: var(--kq-black);
display: flex;
flex-direction: column;
gap: 6px;
min-height: 96px;
position: relative;
}
#korbaj-quiz-root .kq-option:hover,
#korbaj-quiz-root .kq-option:focus-visible {
border-color: var(--kq-gold);
background: #fff;
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(171, 140, 82, 0.18), 0 4px 8px rgba(6, 53, 91, 0.06);
outline: none;
}
#korbaj-quiz-root .kq-option.selected {
border-color: var(--kq-gold);
background: #fff;
box-shadow: 0 0 0 2px var(--kq-gold) inset, 0 10px 24px rgba(171, 140, 82, 0.22);
}
#korbaj-quiz-root .kq-option.selected::after {
content: "✓";
position: absolute;
top: 14px; right: 14px;
width: 22px; height: 22px;
background: var(--kq-gold);
color: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px;
font-weight: 600;
}
#korbaj-quiz-root .kq-opt-label {
font-family: var(--kq-heading);
font-weight: 600;
font-size: 15px;
letter-spacing: -0.1px;
color: var(--kq-navy);
}
#korbaj-quiz-root .kq-opt-desc {
font-size: 12.5px;
color: var(--kq-muted);
line-height: 1.5;
}

/* ---------- Nav ---------- */
#korbaj-quiz-root .kq-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 28px;
gap: 12px;
}
#korbaj-quiz-root .kq-btn,
#korbaj-quiz-root a.kq-btn,
#korbaj-quiz-root button.kq-btn {
font-family: var(--kq-heading) !important;
font-weight: 500 !important;
font-size: 13px !important;
letter-spacing: 1.8px !important;
text-transform: uppercase !important;
padding: 15px 34px !important;
border-radius: 100px !important;
cursor: pointer !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
border: 1.5px solid var(--kq-navy) !important;
background: var(--kq-navy) !important;
background-color: var(--kq-navy) !important;
color: #ffffff !important;
text-decoration: none !important;
display: inline-block !important;
box-shadow: 0 6px 16px rgba(6, 53, 91, 0.22) !important;
line-height: 1.2 !important;
text-align: center !important;
}
#korbaj-quiz-root .kq-btn:hover,
#korbaj-quiz-root a.kq-btn:hover,
#korbaj-quiz-root button.kq-btn:hover {
background: var(--kq-gold) !important;
background-color: var(--kq-gold) !important;
border-color: var(--kq-gold) !important;
color: #ffffff !important;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(171, 140, 82, 0.35) !important;
text-decoration: none !important;
}
#korbaj-quiz-root .kq-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
#korbaj-quiz-root .kq-btn-ghost {
background: transparent;
color: var(--kq-muted);
border: 1.5px solid var(--kq-line);
box-shadow: none;
}
#korbaj-quiz-root .kq-btn-ghost:hover {
border-color: var(--kq-navy);
background: transparent;
color: var(--kq-navy);
box-shadow: 0 4px 12px rgba(6, 53, 91, 0.08);
}

/* ---------- Email capture ---------- */
#korbaj-quiz-root .kq-email {
display: none;
text-align: center;
padding: 8px 4px 4px;
}
#korbaj-quiz-root .kq-email.active { display: block; animation: kqFade 0.4s ease both; }
#korbaj-quiz-root .kq-email h3 {
font-family: var(--kq-heading);
font-weight: 500;
font-size: 24px;
margin: 10px 0 8px;
}
#korbaj-quiz-root .kq-email p {
font-size: 14px;
color: var(--kq-muted);
margin: 0 auto 22px;
max-width: 440px;
line-height: 1.6;
}
#korbaj-quiz-root .kq-email-form {
display: flex;
gap: 8px;
max-width: 460px;
margin: 0 auto;
flex-wrap: wrap;
justify-content: center;
}
#korbaj-quiz-root .kq-email input[type="email"] {
flex: 1 1 220px !important;
padding: 15px 22px !important;
border: 1.5px solid var(--kq-line) !important;
background: var(--kq-cream) !important;
background-color: var(--kq-cream) !important;
font-family: var(--kq-body) !important;
font-size: 14px !important;
color: var(--kq-black) !important;
border-radius: 100px !important;
outline: none !important;
transition: all 0.25s ease !important;
/* Force sane sizing — defeat theme CSS that stretches the input */
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
line-height: 1.2 !important;
box-sizing: border-box !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
margin: 0 !important;
display: block !important;
}
#korbaj-quiz-root .kq-email input[type="email"]:focus {
border-color: var(--kq-gold) !important;
background: #fff !important;
background-color: #fff !important;
box-shadow: 0 0 0 4px rgba(171, 140, 82, 0.12) !important;
}
#korbaj-quiz-root .kq-consent {
font-size: 11.5px;
color: var(--kq-muted);
margin-top: 14px;
line-height: 1.5;
}
#korbaj-quiz-root .kq-error {
color: #b00020;
font-size: 12.5px;
margin-top: 10px;
min-height: 16px;
}

/* ---------- Result ---------- */
#korbaj-quiz-root .kq-result {
display: none;
text-align: center;
animation: kqFade 0.45s ease both;
}
#korbaj-quiz-root .kq-result.active { display: block; }
#korbaj-quiz-root .kq-result-eyebrow {
font-size: 11px;
letter-spacing: 4px;
color: var(--kq-gold);
text-transform: uppercase;
margin-bottom: 8px;
font-family: var(--kq-body);
}
#korbaj-quiz-root .kq-result-name {
font-family: var(--kq-heading);
font-weight: 500;
font-size: 34px;
letter-spacing: 2px;
text-transform: uppercase;
margin: 4px 0 6px;
color: var(--kq-navy);
}
#korbaj-quiz-root .kq-result-tag {
font-family: var(--kq-body);
font-size: 13px;
letter-spacing: 3px;
color: var(--kq-gold);
text-transform: uppercase;
margin-bottom: 20px;
}
#korbaj-quiz-root .kq-result-img {
width: 280px;
height: 320px;
margin: 0 auto 28px;
background:
radial-gradient(ellipse at 50% 0%, rgba(207, 164, 79, 0.22), transparent 60%),
radial-gradient(ellipse at 50% 120%, rgba(171, 140, 82, 0.28), transparent 55%),
linear-gradient(160deg, var(--kq-navy) 0%, var(--kq-navy-dark) 100%);
border-radius: 32px;
padding: 22px;
box-shadow:
0 2px 4px rgba(6, 53, 91, 0.12),
0 24px 60px rgba(6, 53, 91, 0.32),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
position: relative;
box-sizing: border-box;
}
#korbaj-quiz-root .kq-result-img-inner {
width: 100%;
height: 100%;
background:
radial-gradient(circle at 50% 35%, #ffffff 0%, #f5f2ec 100%);
border-radius: 22px;
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
overflow: hidden;
box-shadow:
inset 0 1px 2px rgba(6, 53, 91, 0.08),
inset 0 -20px 40px rgba(171, 140, 82, 0.06);
box-sizing: border-box;
position: relative;
}
#korbaj-quiz-root .kq-result-img-inner::after {
content: "";
position: absolute;
bottom: 18px; left: 22px; right: 22px;
height: 12px;
background: radial-gradient(ellipse at center, rgba(6, 53, 91, 0.18), transparent 70%);
border-radius: 50%;
filter: blur(4px);
pointer-events: none;
}
#korbaj-quiz-root .kq-result-img img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
position: relative;
z-index: 1;
mix-blend-mode: multiply;
}
#korbaj-quiz-root .kq-result-desc {
font-size: 14.5px;
line-height: 1.7;
color: #444;
max-width: 520px;
margin: 0 auto 18px;
}
#korbaj-quiz-root .kq-notes {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin: 0 auto 26px;
max-width: 520px;
}
#korbaj-quiz-root .kq-chip {
font-size: 10.5px;
letter-spacing: 2px;
text-transform: uppercase;
padding: 8px 16px;
border-radius: 100px;
background: #fff;
border: 1.5px solid var(--kq-line);
color: var(--kq-navy);
font-weight: 500;
font-family: var(--kq-heading);
transition: all 0.2s ease;
}
#korbaj-quiz-root .kq-chip:hover {
border-color: var(--kq-gold);
color: var(--kq-gold);
}
#korbaj-quiz-root .kq-cta-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-bottom: 8px;
position: relative;
z-index: 10;
pointer-events: auto;
}
#korbaj-quiz-root .kq-cta-row a,
#korbaj-quiz-root .kq-cta-row button {
pointer-events: auto !important;
cursor: pointer !important;
}
#korbaj-quiz-root .kq-cta-primary,
#korbaj-quiz-root a.kq-cta-primary {
background: var(--kq-navy) !important;
background-color: var(--kq-navy) !important;
border-color: var(--kq-navy) !important;
color: #ffffff !important;
text-decoration: none !important;
pointer-events: auto !important;
cursor: pointer !important;
position: relative !important;
z-index: 5 !important;
}
#korbaj-quiz-root .kq-cta-primary:hover,
#korbaj-quiz-root a.kq-cta-primary:hover {
background: var(--kq-gold) !important;
background-color: var(--kq-gold) !important;
border-color: var(--kq-gold) !important;
color: #ffffff !important;
text-decoration: none !important;
}
#korbaj-quiz-root .kq-cta-primary .kq-btn-label,
#korbaj-quiz-root a.kq-cta-primary .kq-btn-label {
color: #ffffff !important;
pointer-events: none !important;
}
#korbaj-quiz-root .kq-cta-primary:hover .kq-btn-label,
#korbaj-quiz-root a.kq-cta-primary:hover .kq-btn-label {
color: #ffffff !important;
}
#korbaj-quiz-root .kq-retake,
#korbaj-quiz-root button.kq-retake {
background: transparent !important;
background-color: transparent !important;
color: var(--kq-navy) !important;
border: 1.5px solid var(--kq-navy) !important;
box-shadow: none !important;
}
#korbaj-quiz-root .kq-retake:hover,
#korbaj-quiz-root button.kq-retake:hover {
background: var(--kq-navy) !important;
background-color: var(--kq-navy) !important;
color: #ffffff !important;
}
#korbaj-quiz-root .kq-retake:hover .kq-btn-label,
#korbaj-quiz-root button.kq-retake:hover .kq-btn-label {
color: #ffffff !important;
}

/* ---------- Theme override guard (Broadcast/Dawn/etc.) ---------- */
/* Kill every method a theme might use to underline or recolor <a> tags */
#korbaj-quiz-root a,
#korbaj-quiz-root a:link,
#korbaj-quiz-root a:visited,
#korbaj-quiz-root a:hover,
#korbaj-quiz-root a:active,
#korbaj-quiz-root a.kq-btn,
#korbaj-quiz-root a.kq-cta-primary,
#korbaj-quiz-root a.kq-btn:link,
#korbaj-quiz-root a.kq-btn:visited,
#korbaj-quiz-root a.kq-btn:hover,
#korbaj-quiz-root a.kq-btn:active {
text-decoration: none !important;
text-decoration-line: none !important;
text-decoration-color: transparent !important;
border-bottom: 0 !important;
background-image: none !important;
box-shadow: 0 6px 16px rgba(6, 53, 91, 0.22) !important;
}
#korbaj-quiz-root a.kq-cta-primary,
#korbaj-quiz-root a.kq-cta-primary:link,
#korbaj-quiz-root a.kq-cta-primary:visited {
background: var(--kq-navy) !important;
background-color: var(--kq-navy) !important;
background-image: none !important;
color: #ffffff !important;
}
#korbaj-quiz-root a.kq-cta-primary:hover {
background: var(--kq-gold) !important;
background-color: var(--kq-gold) !important;
color: #ffffff !important;
}
#korbaj-quiz-root .kq-btn-label {
color: #ffffff !important;
text-decoration: none !important;
font-family: var(--kq-heading) !important;
font-weight: 500 !important;
letter-spacing: 1.8px !important;
display: inline-block !important;
position: relative !important;
z-index: 2 !important;
}
/* Defeat ::before/::after decoration tricks some themes apply */
#korbaj-quiz-root a.kq-btn::before,
#korbaj-quiz-root a.kq-btn::after {
display: none !important;
content: none !important;
}
/* ---------- NUCLEAR: Force Shop button text WHITE (beats any theme) ---------- */
html body #korbaj-quiz-root a#kq-result-cta,
html body #korbaj-quiz-root a#kq-result-cta:link,
html body #korbaj-quiz-root a#kq-result-cta:visited,
html body #korbaj-quiz-root a#kq-result-cta:hover,
html body #korbaj-quiz-root a#kq-result-cta:active,
html body #korbaj-quiz-root a#kq-result-cta span,
html body #korbaj-quiz-root a#kq-result-cta .kq-btn-label,
html body #korbaj-quiz-root a#kq-result-cta *,
html body #korbaj-quiz-root .kq-cta-row a#kq-result-cta,
html body #korbaj-quiz-root .kq-cta-row a#kq-result-cta span {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
text-fill-color: #ffffff !important;
}
#korbaj-quiz-root * { box-sizing: border-box; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
#korbaj-quiz-root .kq-wrap { padding: 28px 14px 56px; border-radius: 20px; }
#korbaj-quiz-root .kq-inner { padding: 28px 20px; border-radius: 20px; }
#korbaj-quiz-root h2.kq-title { font-size: 22px; }
#korbaj-quiz-root .kq-q-title { font-size: 18px; }
#korbaj-quiz-root .kq-options { grid-template-columns: 1fr; }
#korbaj-quiz-root .kq-option { min-height: auto; padding: 18px; border-radius: 16px; }
#korbaj-quiz-root .kq-result-name { font-size: 26px; letter-spacing: 1.5px; }
#korbaj-quiz-root .kq-result-img { width: 220px; height: 260px; border-radius: 26px; padding: 16px; }
#korbaj-quiz-root .kq-result-img-inner { border-radius: 18px; padding: 14px; }
#korbaj-quiz-root .kq-btn { padding: 13px 24px; font-size: 12px; letter-spacing: 1.5px; }
#korbaj-quiz-root .kq-step-label { display: none; }
#korbaj-quiz-root .kq-email-form {
flex-direction: column !important;
gap: 14px !important;
}
#korbaj-quiz-root .kq-email input[type="email"] {
width: 100% !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
padding: 14px 20px !important;
font-size: 15px !important;
border-radius: 100px !important;
}
#korbaj-quiz-root .kq-email-form .kq-btn {
width: 100% !important;
height: 52px !important;
padding: 14px 20px !important;
}
#korbaj-quiz-root .kq-logo { height: 44px; margin-bottom: 18px; }
}
</style>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Syne:wght@400;500;600&display=swap" rel="stylesheet">

<div id="kq-header" class="kq-header-center">
<img class="kq-logo" src="https://korbajparfum.com/cdn/shop/files/tempImage2DCQ2a_1.png?height=158&v=1757625371&width=500" alt="Korbaj Parfums">
<span class="kq-badge">Find Your Signature</span>
<h2 class="kq-title">Discover Your Korbaj Extrait de Parfum</h2>
<p class="kq-sub">Answer four quick questions and we'll match you with the Korbaj fragrance crafted to inspire and evoke <em>your</em> emotions.</p>
</div>

<div class="kq-progress" id="kq-progress" aria-hidden="true">
<div class="kq-dot" data-step="1"></div>
<div class="kq-dot" data-step="2"></div>
<div class="kq-dot" data-step="3"></div>
<div class="kq-dot" data-step="4"></div>
<span class="kq-step-label" id="kq-step-label">Step 1 of 4</span>
</div>

<div class="kq-question active" data-step="1">
<h3 class="kq-q-title">Which scent family speaks to you?</h3>
<p class="kq-q-desc">Pick the note profile that feels most like <em>you</em>.</p>
<div class="kq-options" data-q="notes">
<button class="kq-option" data-val="fresh" type="button">
<span class="kq-opt-label">Fresh & Citrusy</span>
<span class="kq-opt-desc">Bergamot, mandarin, green notes — bright and clean.</span>
</button>
<button class="kq-option" data-val="sweet" type="button">
<span class="kq-opt-label">Sweet & Gourmand</span>
<span class="kq-opt-desc">Caramel, vanilla, praline — warm and edible.</span>
</button>
<button class="kq-option" data-val="woody" type="button">
<span class="kq-opt-label">Warm & Woody</span>
<span class="kq-opt-desc">Oud, sandalwood, cedar — deep and grounding.</span>
</button>
<button class="kq-option" data-val="floral" type="button">
<span class="kq-opt-label">Floral & Romantic</span>
<span class="kq-opt-desc">Rose, jasmine, magnolia — soft and seductive.</span>
</button>
</div>
</div>

<div class="kq-question" data-step="2">
<h3 class="kq-q-title">How bold do you want your sillage?</h3>
<p class="kq-q-desc">Choose the intensity that matches your personality.</p>
<div class="kq-options" data-q="intensity">
<button class="kq-option" data-val="subtle" type="button">
<span class="kq-opt-label">Subtle & Soft</span>
<span class="kq-opt-desc">A whisper close to the skin.</span>
</button>
<button class="kq-option" data-val="balanced" type="button">
<span class="kq-opt-label">Balanced & Elegant</span>
<span class="kq-opt-desc">Noticeable yet refined.</span>
</button>
<button class="kq-option" data-val="bold" type="button">
<span class="kq-opt-label">Bold & Statement</span>
<span class="kq-opt-desc">Turns heads when you enter a room.</span>
</button>
<button class="kq-option" data-val="intense" type="button">
<span class="kq-opt-label">Intense & Lasting</span>
<span class="kq-opt-desc">Unforgettable, all night long.</span>
</button>
</div>
</div>

<div class="kq-question" data-step="3">
<h3 class="kq-q-title">Which season are you shopping for?</h3>
<p class="kq-q-desc">Your fragrance should move with the weather.</p>
<div class="kq-options" data-q="season">
<button class="kq-option" data-val="spring" type="button">
<span class="kq-opt-label">Spring / Summer</span>
<span class="kq-opt-desc">Airy, bright, and weather-friendly.</span>
</button>
<button class="kq-option" data-val="fall" type="button">
<span class="kq-opt-label">Fall / Winter</span>
<span class="kq-opt-desc">Cozy, warm, wrap-you-up scents.</span>
</button>
<button class="kq-option" data-val="allyear" type="button">
<span class="kq-opt-label">All Year Round</span>
<span class="kq-opt-desc">A signature that works every day.</span>
</button>
<button class="kq-option" data-val="evening" type="button">
<span class="kq-opt-label">Evenings Only</span>
<span class="kq-opt-desc">Reserved for after-dark moments.</span>
</button>
</div>
</div>

<div class="kq-question" data-step="4">
<h3 class="kq-q-title">What occasion is this for?</h3>
<p class="kq-q-desc">We'll match the fragrance to the moment.</p>
<div class="kq-options" data-q="occasion">
<button class="kq-option" data-val="daily" type="button">
<span class="kq-opt-label">Daily & Office</span>
<span class="kq-opt-desc">Polished, clean, professional.</span>
</button>
<button class="kq-option" data-val="date" type="button">
<span class="kq-opt-label">Date Night</span>
<span class="kq-opt-desc">Romantic, intimate, magnetic.</span>
</button>
<button class="kq-option" data-val="power" type="button">
<span class="kq-opt-label">Power Moments</span>
<span class="kq-opt-desc">Confident, commanding, unforgettable.</span>
</button>
<button class="kq-option" data-val="luxury" type="button">
<span class="kq-opt-label">Luxury & Events</span>
<span class="kq-opt-desc">Black tie, weddings, celebrations.</span>
</button>
</div>
</div>

<div class="kq-nav" id="kq-nav">
<button class="kq-btn kq-btn-ghost" id="kq-back" type="button" disabled>Back</button>
<button class="kq-btn" id="kq-next" type="button" disabled>Next</button>
</div>

<div class="kq-email" id="kq-email">
<span class="kq-badge">Almost There</span>
<h3>Where should we send your match?</h3>
<p>Pop in your email and we'll reveal your Korbaj fragrance — plus a welcome offer on your first bottle.</p>
<form class="kq-email-form" id="kq-email-form" novalidate>
<input type="email" id="kq-email-input" placeholder="your@email.com" required autocomplete="email">
<button type="submit" class="kq-btn kq-cta-primary">Reveal My Match</button>
</form>
<div class="kq-error" id="kq-email-error" role="alert"></div>
<p class="kq-consent">By submitting, you agree to receive fragrance emails from Korbaj Parfum. Unsubscribe anytime.</p>
</div>

<div class="kq-result" id="kq-result">
<div class="kq-result-eyebrow">Your Korbaj Match</div>
<div class="kq-result-img" id="kq-result-img">
<div class="kq-result-img-inner" id="kq-result-img-inner">
<img id="kq-result-img-el" alt="" />
</div>
</div>
<h2 class="kq-result-name" id="kq-result-name">—</h2>
<div class="kq-result-tag" id="kq-result-tag">Extrait de Parfum 100ml</div>
<p class="kq-result-desc" id="kq-result-desc"></p>
<div class="kq-notes" id="kq-result-notes"></div>
<div class="kq-cta-row" style="position:relative;z-index:10;">
<a class="kq-btn kq-cta-primary" id="kq-result-cta" href="https://korbajparfum.com/" target="_self" rel="noopener"
style="background:#06355b !important;background-color:#06355b !important;background-image:none !important;color:#ffffff !important;text-decoration:none !important;text-decoration-line:none !important;border-bottom:0 !important;border-color:#06355b !important;pointer-events:auto !important;cursor:pointer !important;display:inline-block !important;position:relative !important;z-index:11 !important;">
<span class="kq-btn-label" style="color:#ffffff !important;text-decoration:none !important;pointer-events:none !important;font-weight:600 !important;">Shop This Fragrance</span>
</a>
<button class="kq-btn kq-retake" type="button" id="kq-retake" style="position:relative;z-index:11;">
<span class="kq-btn-label" style="color:#06355b !important;pointer-events:none !important;">Retake Quiz</span>
</button>
</div>
</div>

</div>
</div>

// ---------- Fragrance data ----------
// Each fragrance has a score map for every answer value.
// Higher = better fit. We sum all four answers and pick the top.
var FRAGRANCES = {
"emir": {
name: "EMIR",
url: "https://korbajparfum.com/products/emir",
tagline: "Powerful · Confident · Refined",
img: "https://cdn.shopify.com/s/files/1/0833/0572/6252/files/2_43dd7f5b-112c-4b2e-a29f-779c60371f45.png?v=1746086927",
desc: "A modern luxury opening with a harmonious fusion of fresh and fruity notes, Emir evokes pure sophistication and quiet power — built for the man or woman who leads the room.",
chips: ["Fresh", "Fruity", "Sophisticated", "Confident"]
},
"musky-signature": {
name: "MUSKY SIGNATURE",
url: "https://korbajparfum.com/products/musky-signature",
tagline: "Soft · Clean · Timeless",
img: "https://cdn.shopify.com/s/files/1/0833/0572/6252/files/3_14c7b3d3-511d-4129-bda9-073b9670e208.png?v=1746086929",
desc: "An energizing luxury fragrance with zesty citrus, ripe berries and tropical nuances. A clean, timeless signature that elevates every ordinary day.",
chips: ["Citrus", "Berries", "Tropical", "Clean"]
},
"mystique": {
name: "MYSTIQUE",
url: "https://korbajparfum.com/products/mystique",
tagline: "Opulent · Refined · Sophisticated",
img: "https://cdn.shopify.com/s/files/1/0833/0572/6252/files/4_77bdc2fb-01bf-4808-977b-a55a11b1fe99.png?v=1746086933",
desc: "An opulent composition crafted to evoke refined elegance and unparalleled sophistication. A sensorial masterpiece that unfolds like a timeless story of allure.",
chips: ["Warm", "Opulent", "Woody", "Elegant"]
},
"toxic-desire": {
name: "TOXIC DESIRE",
url: "https://korbajparfum.com/products/toxic-desire",
tagline: "Bold · Addictive · Daring",
img: "https://cdn.shopify.com/s/files/1/0833/0572/6252/files/1_37c74008-14af-4eb7-b96c-81b311244291.png?v=1746086931",
desc: "A warm, addictive gourmand-woody built on cognac oil, caramel, cinnamon, praline and vanilla. The perfect evening scent for Fall and Winter — irresistibly daring.",
chips: ["Gourmand", "Cognac", "Vanilla", "Bold"]
},
"rose-sands": {
name: "ROSE SANDS",
url: "https://korbajparfum.com/products/rose-sands",
tagline: "Sweet · Velvety · Sensual",
img: "https://cdn.shopify.com/s/files/1/0833/0572/6252/files/1_f85e8bb1-f51e-42ce-91fc-28fe038cf9d6.png?v=1746086921",
desc: "A captivating gourmand that opens with caramel and milk, warms with honey and tonka bean, and rests on a bed of vanilla and white musk. Pure velvet on skin.",
chips: ["Caramel", "Honey", "Vanilla", "Gourmand"]
},
"jade-royale": {
name: "JADE ROYALE",
url: "https://korbajparfum.com/products/jade-royale",
tagline: "Fresh · Vibrant · Refined",
img: "https://cdn.shopify.com/s/files/1/0833/0572/6252/files/3_81847a38-9099-4cdd-9397-26a3620f0a07.png?v=1746086919",
desc: "Zesty citrus and ginger burst open into a heart of magnolia, violet, cashmere wood and tonka, grounded in ambergris, patchouli and vetiver. Crisp, elegant, alive.",
chips: ["Citrus", "Ginger", "Floral", "Vetiver"]
},
"scarlet-amber": {
name: "SCARLET AMBER",
url: "https://korbajparfum.com/products/scarlet-amber",
tagline: "Warm · Seductive · Captivating",
img: "https://cdn.shopify.com/s/files/1/0833/0572/6252/files/2_62015e14-c820-4cf2-a0f2-8119d0677917.png?v=1746086918",
desc: "Mandarin, green notes and eucalyptus dance into a bouquet of jasmine and rose, finishing on ambergris, caramel and tonka — a sweet, warm, seductive trail.",
chips: ["Rose", "Jasmine", "Amber", "Seductive"]
},
"oud-for-you": {
name: "OUD FOR YOU",
url: "https://korbajparfum.com/products/oud-for-you",
tagline: "Deep · Smoky · Luxurious",
img: "https://cdn.shopify.com/s/files/1/0833/0572/6252/files/4_810004d8-c197-441e-b5b1-da29f363ccd3.png?v=1746086916",
desc: "Cedarwood and tonka open into a smooth heart of sandalwood and cashmere wood, anchored by oud, ambergris, vanilla and musk. Deeply luxurious, unmistakably Arabian.",
chips: ["Oud", "Sandalwood", "Smoky", "Luxurious"]
}
};

// ---------- Scoring table ----------
// rows = fragrance handle, columns = answer value
var SCORES = {
"emir": { fresh:3, sweet:0, woody:1, floral:1, subtle:1, balanced:3, bold:2, intense:1, spring:2, fall:1, allyear:3, evening:2, daily:3, date:1, power:3, luxury:2 },
"musky-signature": { fresh:3, sweet:1, woody:0, floral:1, subtle:3, balanced:2, bold:1, intense:0, spring:3, fall:0, allyear:3, evening:1, daily:3, date:1, power:1, luxury:1 },
"mystique": { fresh:0, sweet:1, woody:2, floral:1, subtle:0, balanced:3, bold:3, intense:2, spring:0, fall:2, allyear:2, evening:3, daily:1, date:2, power:3, luxury:3 },
"toxic-desire": { fresh:0, sweet:3, woody:2, floral:0, subtle:0, balanced:1, bold:3, intense:3, spring:0, fall:3, allyear:1, evening:3, daily:0, date:3, power:2, luxury:2 },
"rose-sands": { fresh:0, sweet:3, woody:0, floral:2, subtle:1, balanced:2, bold:2, intense:2, spring:1, fall:3, allyear:2, evening:2, daily:1, date:3, power:1, luxury:2 },
"jade-royale": { fresh:3, sweet:0, woody:1, floral:2, subtle:2, balanced:3, bold:1, intense:0, spring:3, fall:0, allyear:2, evening:1, daily:3, date:2, power:1, luxury:2 },
"scarlet-amber": { fresh:1, sweet:2, woody:1, floral:3, subtle:0, balanced:2, bold:3, intense:2, spring:1, fall:2, allyear:2, evening:3, daily:1, date:3, power:2, luxury:3 },
"oud-for-you": { fresh:0, sweet:1, woody:3, floral:0, subtle:0, balanced:1, bold:3, intense:3, spring:0, fall:3, allyear:1, evening:3, daily:0, date:2, power:3, luxury:3 }
};

// ---------- State ----------
var currentStep = 1;
var totalSteps = 4;
var answers = { notes: null, intensity: null, season: null, occasion: null };

// ---------- Elements ----------
var root = document.getElementById('korbaj-quiz-root');
var header = root.querySelector('#kq-header');
var progress = root.querySelector('#kq-progress');
var stepLabel = root.querySelector('#kq-step-label');
var nav = root.querySelector('#kq-nav');
var btnBack = root.querySelector('#kq-back');
var btnNext = root.querySelector('#kq-next');
var emailBlock = root.querySelector('#kq-email');
var emailForm = root.querySelector('#kq-email-form');
var emailInput = root.querySelector('#kq-email-input');
var emailError = root.querySelector('#kq-email-error');
var resultBlock = root.querySelector('#kq-result');
var retakeBtn = root.querySelector('#kq-retake');

// ---------- Option click handling ----------
root.querySelectorAll('.kq-options').forEach(function(group) {
var q = group.getAttribute('data-q');
group.querySelectorAll('.kq-option').forEach(function(btn) {
btn.addEventListener('click', function() {
group.querySelectorAll('.kq-option').forEach(function(o) { o.classList.remove('selected'); });
btn.classList.add('selected');
answers[q] = btn.getAttribute('data-val');
btnNext.disabled = false;
});
});
});

// ---------- Navigation ----------
function showStep(step) {
root.querySelectorAll('.kq-question').forEach(function(el) {
el.classList.toggle('active', parseInt(el.getAttribute('data-step'), 10) === step);
});
progress.querySelectorAll('.kq-dot').forEach(function(d) {
d.classList.toggle('done', parseInt(d.getAttribute('data-step'), 10) <= step);
});
stepLabel.textContent = 'Step ' + step + ' of ' + totalSteps;
btnBack.disabled = (step === 1);
// Re-enable next if this question already has an answer
var q = ['notes','intensity','season','occasion'][step - 1];
btnNext.disabled = !answers[q];
btnNext.textContent = (step === totalSteps) ? 'Continue' : 'Next';
}

btnNext.addEventListener('click', function() {
if (currentStep < totalSteps) {
currentStep++;
showStep(currentStep);
} else {
// Move to email capture
header.style.display = 'none';
progress.style.display = 'none';
nav.style.display = 'none';
root.querySelectorAll('.kq-question').forEach(function(el) { el.classList.remove('active'); });
emailBlock.classList.add('active');
setTimeout(function(){ emailInput.focus(); }, 200);
}
});

btnBack.addEventListener('click', function() {
if (currentStep > 1) {
currentStep--;
showStep(currentStep);
}
});

// ---------- Email submit ----------
function isValidEmail(v) {
return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(v);
}

emailForm.addEventListener('submit', function(e) {
e.preventDefault();
emailError.textContent = '';
var email = (emailInput.value || '').trim();
if (!isValidEmail(email)) {
emailError.textContent = 'Please enter a valid email address.';
return;
}

var submitBtn = emailForm.querySelector('button[type="submit"]');
submitBtn.disabled = true;
submitBtn.textContent = 'Revealing…';

var match = getTopMatch() || 'emir';
var f = FRAGRANCES[match];

// ---- 1. Save to Mailchimp via JSONP (embedded-form endpoint) ----
// Merge fields MATCH, MURL, MDESC, MTAG are passed so the welcome
// email can personalize the result. Tags: fragrance-quiz + match.
if (KQ_MC.dc && KQ_MC.u && KQ_MC.id) {
try {
var cb = 'kqmc_' + Date.now();
window[cb] = function(){ try { delete window[cb]; } catch(_){} };
var params = 'u=' + encodeURIComponent(KQ_MC.u) +
'&id=' + encodeURIComponent(KQ_MC.id) +
'&EMAIL=' + encodeURIComponent(email) +
'&MATCH=' + encodeURIComponent(f.name) +
'&MATCHKEY=' + encodeURIComponent(match) +
'&MURL=' + encodeURIComponent(f.url) +
'&MDESC=' + encodeURIComponent(f.desc) +
'&MTAG=' + encodeURIComponent(f.tagline) +
'&MIMG=' + encodeURIComponent(f.img) +
'&tags=' + encodeURIComponent('fragrance-quiz,quiz-lead,' + match) +
'&c=' + cb;
// Add Mailchimp Interest Group if configured (RELIABLE tag-carrier)
if (KQ_MC.groupCategoryId && KQ_MC.groupInterestId) {
params += '&group[' + encodeURIComponent(KQ_MC.groupCategoryId) + '][' + encodeURIComponent(KQ_MC.groupInterestId) + ']=1';
}
var s = document.createElement('script');
s.src = 'https://' + KQ_MC.dc + '.list-manage.com/subscribe/post-json?' + params;
s.onload = function(){ s.remove(); };
s.onerror = function(){ s.remove(); };
document.body.appendChild(s);
} catch(_) {}
}

// ---- 2. Also save to Shopify Customers (safety net) ----
try {
var body = new URLSearchParams();
body.append('form_type', 'customer');
body.append('utf8', '✓');
body.append('contact[email]', email);
body.append('contact[accepts_marketing]', 'true');
body.append('contact[tags]', 'fragrance-quiz,quiz-lead,' + match);
fetch('/contact#contact_form', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: body.toString(),
credentials: 'same-origin'
}).catch(function(){});
} catch(_) {}

// ---- 3. Analytics hooks (GA4 / Meta Pixel / Segment) ----
try {
if (window.dataLayer) window.dataLayer.push({ event: 'fragrance_quiz_complete', email: email, match: match, answers: answers });
if (window.analytics && window.analytics.track) window.analytics.track('Fragrance Quiz Complete', { email: email, match: match, answers: answers });
} catch(_) {}

setTimeout(showResult, 450);
});

// ---------- Scoring ----------
function getTopMatch() {
var best = null;
var bestScore = -Infinity;
Object.keys(SCORES).forEach(function(handle) {
var s = SCORES[handle];
var total = (s[answers.notes]||0) + (s[answers.intensity]||0) + (s[answers.season]||0) + (s[answers.occasion]||0);
if (total > bestScore) { bestScore = total; best = handle; }
});
return best;
}

function showResult() {
emailBlock.classList.remove('active');
var handle = getTopMatch();
var f = FRAGRANCES[handle];

root.querySelector('#kq-result-name').textContent = f.name;
root.querySelector('#kq-result-tag').textContent = f.tagline;
root.querySelector('#kq-result-desc').textContent = f.desc;
var ctaEl = root.querySelector('#kq-result-cta');
ctaEl.setAttribute('href', f.url);
// Force white text every single time the result renders (beats late-loading theme CSS)
ctaEl.style.setProperty('color', '#ffffff', 'important');
ctaEl.style.setProperty('-webkit-text-fill-color', '#ffffff', 'important');
var ctaSpan = ctaEl.querySelector('.kq-btn-label');
if (ctaSpan) {
ctaSpan.style.setProperty('color', '#ffffff', 'important');
ctaSpan.style.setProperty('-webkit-text-fill-color', '#ffffff', 'important');
}

var imgEl = root.querySelector('#kq-result-img-el');
imgEl.setAttribute('alt', 'Korbaj ' + f.name);
imgEl.setAttribute('src', f.img);
imgEl.onerror = function() {
// Fallback: gold monogram on the white inner card
var inner = root.querySelector('#kq-result-img-inner');
inner.innerHTML = '<div style="font-family:var(--kq-heading);font-weight:600;font-size:88px;letter-spacing:8px;color:var(--kq-navy);">' + f.name.charAt(0) + '</div>';
};

var chips = root.querySelector('#kq-result-notes');
chips.innerHTML = '';
f.chips.forEach(function(c) {
var el = document.createElement('span');
el.className = 'kq-chip';
el.textContent = c;
chips.appendChild(el);
});

resultBlock.classList.add('active');
resultBlock.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

// ---------- Retake ----------
retakeBtn.addEventListener('click', function() {
answers = { notes: null, intensity: null, season: null, occasion: null };
currentStep = 1;
root.querySelectorAll('.kq-option.selected').forEach(function(o){ o.classList.remove('selected'); });
resultBlock.classList.remove('active');
emailBlock.classList.remove('active');
emailInput.value = '';
emailError.textContent = '';
var submitBtn = emailForm.querySelector('button[type="submit"]');
submitBtn.disabled = false;
submitBtn.textContent = 'Reveal My Match';
header.style.display = '';
progress.style.display = 'flex';
nav.style.display = 'flex';
showStep(1);
});

// Init
showStep(1);
})();
</script>
</div>

Cart 0

Sorry, looks like we don't have enough of this product.