<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Investigator Profile — Get Haunted</title>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
<style>
:root {
--bg: #0a0a0f;
--bg2: #111118;
--bg3: #18181f;
--border: rgba(255,255,255,0.08);
--border-hover: rgba(255,255,255,0.18);
--text: #f0ede8;
--text-muted: #8a8790;
--text-dim: #4a4852;
--accent: #c9a96e;
--accent-dim: rgba(201,169,110,0.15);
--accent-border: rgba(201,169,110,0.3);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--text);
font-family: 'Jost', sans-serif;
font-weight: 300;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 0 1rem 4rem;
position: relative;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(ellipse at 50% 0%, rgba(201,169,110,0.06) 0%, transparent 60%),
radial-gradient(ellipse at 80% 80%, rgba(100,80,160,0.04) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
.wrap {
width: 100%;
max-width: 600px;
position: relative;
z-index: 1;
padding-top: 3rem;
}
.brand {
text-align: center;
margin-bottom: 3rem;
}
.brand-logo {
font-family: 'Cormorant Garamond', serif;
font-size: 13px;
font-weight: 400;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--accent);
opacity: 0.8;
}
.brand-divider {
width: 1px;
height: 32px;
background: linear-gradient(to bottom, var(--accent), transparent);
margin: 12px auto;
opacity: 0.4;
}
.brand-sub {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-dim);
}
/* INTRO */
#screen-intro { text-align: center; animation: fadeUp 0.8s ease both; }
.intro-eyebrow {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 1.5rem;
opacity: 0.7;
}
.intro-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(38px, 7vw, 56px);
font-weight: 300;
line-height: 1.1;
color: var(--text);
margin-bottom: 1.5rem;
letter-spacing: -0.01em;
}
.intro-title em {
font-style: italic;
color: var(--accent);
}
.intro-text {
font-size: 15px;
line-height: 1.8;
color: var(--text-muted);
max-width: 440px;
margin: 0 auto 3rem;
}
.ornament {
display: flex;
align-items: center;
gap: 12px;
justify-content: center;
margin-bottom: 2.5rem;
opacity: 0.3;
}
.ornament-line { flex: 1; max-width: 80px; height: 0.5px; background: var(--accent); }
.ornament-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.start-btn {
display: inline-block;
background: transparent;
border: 0.5px solid var(--accent-border);
color: var(--accent);
font-family: 'Jost', sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 16px 40px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.start-btn::before {
content: '';
position: absolute;
inset: 0;
background: var(--accent-dim);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.start-btn:hover::before { transform: scaleX(1); }
.start-btn:hover { border-color: var(--accent); }
.start-btn span { position: relative; z-index: 1; }
.intro-note {
margin-top: 2rem;
font-size: 12px;
color: var(--text-dim);
letter-spacing: 0.05em;
}
/* QUIZ */
#screen-quiz { display: none; animation: fadeUp 0.5s ease both; }
.progress-wrap { margin-bottom: 2.5rem; }
.progress-meta {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.progress-section {
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
opacity: 0.7;
}
.progress-count {
font-size: 11px;
letter-spacing: 0.1em;
color: var(--text-dim);
}
.progress-track {
height: 0.5px;
background: var(--border);
position: relative;
}
.progress-fill {
height: 100%;
background: linear-gradient(to right, var(--accent), rgba(201,169,110,0.5));
transition: width 0.5s ease;
position: absolute;
top: 0; left: 0;
}
.question-text {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(22px, 4vw, 28px);
font-weight: 300;
line-height: 1.4;
color: var(--text);
margin-bottom: 2rem;
min-height: 80px;
}
.options-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 2.5rem;
}
.option-btn {
background: var(--bg2);
border: 0.5px solid var(--border);
color: var(--text-muted);
font-family: 'Jost', sans-serif;
font-size: 14px;
font-weight: 300;
line-height: 1.6;
padding: 16px 20px;
text-align: left;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: flex-start;
gap: 14px;
width: 100%;
}
.option-indicator {
width: 16px;
height: 16px;
border-radius: 50%;
border: 0.5px solid var(--text-dim);
flex-shrink: 0;
margin-top: 2px;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.option-btn:hover {
background: var(--bg3);
border-color: var(--border-hover);
color: var(--text);
}
.option-btn.selected {
background: var(--accent-dim);
border-color: var(--accent-border);
color: var(--text);
}
.option-btn.selected .option-indicator {
background: var(--accent);
border-color: var(--accent);
}
.option-btn.selected .option-indicator::after {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--bg);
}
.nav-row {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav-back {
background: transparent;
border: none;
color: var(--text-dim);
font-family: 'Jost', sans-serif;
font-size: 13px;
letter-spacing: 0.1em;
cursor: pointer;
padding: 8px 0;
transition: color 0.2s;
}
.nav-back:hover { color: var(--text-muted); }
.nav-back:disabled { opacity: 0.2; cursor: default; }
.nav-next {
background: transparent;
border: 0.5px solid var(--border-hover);
color: var(--text);
font-family: 'Jost', sans-serif;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 12px 28px;
cursor: pointer;
transition: all 0.2s ease;
}
.nav-next:hover:not(:disabled) {
border-color: var(--accent-border);
color: var(--accent);
}
.nav-next:disabled {
opacity: 0.2;
cursor: default;
}
/* RESULT */
#screen-result { display: none; animation: fadeUp 0.7s ease both; }
.result-header { text-align: center; margin-bottom: 3rem; }
.result-eyebrow {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 1rem;
}
.result-name {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(40px, 8vw, 64px);
font-weight: 300;
line-height: 1;
color: var(--text);
margin-bottom: 0.75rem;
}
.result-badge {
display: inline-block;
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--accent);
border: 0.5px solid var(--accent-border);
padding: 5px 14px;
margin-bottom: 1.5rem;
}
.result-tagline {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(16px, 3vw, 19px);
font-style: italic;
font-weight: 300;
line-height: 1.6;
color: var(--text-muted);
max-width: 480px;
margin: 0 auto;
}
.result-divider {
height: 0.5px;
background: var(--border);
margin: 2.5rem 0;
position: relative;
}
.result-divider::before {
content: '✦';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(--bg);
color: var(--accent);
font-size: 10px;
padding: 0 12px;
opacity: 0.5;
}
.result-section {
margin-bottom: 2rem;
}
.result-section-label {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
opacity: 0.7;
margin-bottom: 1rem;
}
.result-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
border-bottom: 0.5px solid var(--border);
font-size: 14px;
color: var(--text-muted);
line-height: 1.6;
}
.result-item:last-child { border-bottom: none; }
.result-item::before {
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
margin-top: 7px;
opacity: 0.6;
}
.result-path-box {
background: var(--bg2);
border: 0.5px solid var(--border);
border-left: 1px solid var(--accent-border);
padding: 1.25rem 1.5rem;
margin-top: 0.5rem;
}
.result-path-text {
font-family: 'Cormorant Garamond', serif;
font-size: 17px;
font-weight: 300;
line-height: 1.7;
color: var(--text-muted);
}
.result-actions {
display: flex;
gap: 12px;
margin-top: 2.5rem;
flex-wrap: wrap;
}
.action-btn {
flex: 1;
min-width: 140px;
background: transparent;
border: 0.5px solid var(--border-hover);
color: var(--text-muted);
font-family: 'Jost', sans-serif;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 14px 20px;
cursor: pointer;
transition: all 0.2s;
text-align: center;
}
.action-btn:hover {
border-color: var(--accent-border);
color: var(--accent);
}
.action-btn.primary {
border-color: var(--accent-border);
color: var(--accent);
}
.action-btn.primary:hover {
background: var(--accent-dim);
}
.footer-brand {
text-align: center;
margin-top: 4rem;
padding-top: 2rem;
border-top: 0.5px solid var(--border);
}
.footer-text {
font-size: 12px;
color: var(--text-dim);
letter-spacing: 0.1em;
}
.footer-link {
color: var(--accent);
opacity: 0.6;
text-decoration: none;
transition: opacity 0.2s;
}
.footer-link:hover { opacity: 1; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 480px) {
.wrap { padding-top: 2rem; }
.result-actions { flex-direction: column; }
}
</style>
</head>
<body>
<div class="wrap">
<div class="brand">
<div class="brand-logo">Get Haunted</div>
<div class="brand-divider"></div>
<div class="brand-sub">Signal & Soul Framework</div>
</div>
<!-- INTRO -->
<div id="screen-intro">
<p class="intro-eyebrow">Discover your investigator type</p>
<h1 class="intro-title">The Personal<br><em>Investigator</em><br>Profile</h1>
<div class="ornament">
<div class="ornament-line"></div>
<div class="ornament-dot"></div>
<div class="ornament-line"></div>
</div>
<p class="intro-text">Discover how you naturally receive, connect, and interpret paranormal experience. No right answers. No wrong gifts. Just a clearer picture of who you are in the field.</p>
<button class="start-btn" /span></button>
<p class="intro-note">15 questions · ~3 minutes · 8 possible types</p>
</div>
<!-- QUIZ -->
<div id="screen-quiz">
<div class="progress-wrap">
<div class="progress-meta">
<span class="progress-section" id="section-label"></span>
<span class="progress-count" id="q-count"></span>
</div>
<div class="progress-track">
<div class="progress-fill" id="progress" style="width:0%"></div>
</div>
</div>
<p class="question-text" id="question-text"></p>
<div class="options-list" id="options-list"></div>
<div class="nav-row">
<button class="nav-back" id="back-btn" /button>
<button class="nav-next" id="next-btn" /button>
</div>
</div>
<!-- RESULT -->
<div id="screen-result">
<div class="result-header">
<p class="result-eyebrow">Your investigator type</p>
<h2 class="result-name" id="r-name"></h2>
<div class="result-badge" id="r-badge"></div>
<p class="result-tagline" id="r-tagline"></p>
</div>
<div class="result-divider"></div>
<div class="result-section">
<p class="result-section-label">Your strengths</p>
<div id="r-strengths"></div>
</div>
<div class="result-section">
<p class="result-section-label">Your growth edge</p>
<div id="r-growth"></div>
</div>
<div class="result-section">
<p class="result-section-label">Your Signal & Soul path</p>
<div class="result-path-box">
<p class="result-path-text" id="r-path"></p>
</div>
</div>
<div class="result-actions">
<button class="action-btn primary" /button>
<button class="action-btn" /button>
</div>
</div>
<div class="footer-brand">
<p class="footer-text">
Get Haunted · <a href="https://www.gethaunted.com" class="footer-link">gethaunted.com</a>
</p>
</div>
</div>
<script>
const questions=[
{section:"How you show up",q:"When you arrive at a location for the first time, what's your instinct?",options:["I take it all in visually — I want to see the whole space first","I close my eyes and just feel the energy of the place","I want to know the history before I experience anything","I start talking — to my team, to whatever might be there"],scores:["witness","empath","archivist","conduit"]},
{section:"How you show up",q:"During an investigation, you are most likely to:",options:["Stay quiet and observe what's happening around you","Follow a feeling pulling you toward a specific area","Ask questions out loud and wait for responses","Keep the group steady and watch how everyone else is responding"],scores:["witness","intuitive","conduit","anchor"]},
{section:"How you show up",q:"After an experience, your first reaction is to:",options:["Document it immediately with as much detail as possible","Sit with it and process how it made you feel","Cross-reference it with what you know about the location","Share it with your team and explore what it might mean"],scores:["archivist","empath","witness","seeker"]},
{section:"How you receive",q:"The experiences you find most compelling tend to be:",options:["Physical — temperature changes, touches, movement","Emotional — sudden unexplained feelings or mood shifts","Visual — shadows, apparitions, light anomalies","Auditory — voices, sounds, responses to questions"],scores:["witness","empath","intuitive","conduit"]},
{section:"How you receive",q:"Have you ever walked into a space and immediately felt something was wrong — before anything happened?",options:["Yes, regularly — it's almost automatic for me","Occasionally — when the energy is particularly strong","Rarely — I need more evidence before I form an impression","I'm not sure — I don't always trust those feelings yet"],scores:["empath","intuitive","witness","seeker"]},
{section:"How you receive",q:"When you experience something unexplained, your mind goes to:",options:["What is the rational explanation first","What is this trying to communicate","What does this feel like energetically","How does this fit into what I already know about this place"],scores:["witness","conduit","empath","archivist"]},
{section:"How you receive",q:"Do you believe your emotional state affects what you experience on an investigation?",options:["Absolutely — I adjust my state intentionally","Probably — but I'm still learning how","Possibly — I haven't thought about it deeply yet","I try to keep emotion out of it"],scores:["empath","intuitive","seeker","witness"]},
{section:"How you connect",q:"On a team, you naturally fall into the role of:",options:["The one who keeps everyone calm and focused","The one asking the most questions","The one who goes quiet and withdraws into the experience","The one connecting dots between what people are experiencing"],scores:["anchor","conduit","intuitive","seeker"]},
{section:"How you connect",q:"When a teammate has an experience you didn't share, you:",options:["Ask them to describe every detail","Check in on how they're feeling emotionally","Compare it to anything you noticed in that same moment","Encourage them to trust what they felt"],scores:["archivist","empath","witness","anchor"]},
{section:"How you connect",q:"Your ideal investigation team is:",options:["Small and intimate — fewer people, deeper experience","Diverse — different gifts and perspectives","Experienced — people who know what they're doing","Open — no egos, no agendas, just genuine curiosity"],scores:["empath","seeker","archivist","anchor"]},
{section:"How you understand",q:"When it comes to what causes paranormal phenomena, you believe:",options:["There are many possible explanations and all deserve consideration","It's deeply connected to human consciousness and emotion","The location itself holds the key — its history and energy","I'm still figuring out what I believe and that's okay"],scores:["seeker","empath","archivist","intuitive"]},
{section:"How you understand",q:"The aspect of investigation you find most frustrating is:",options:["When people jump to conclusions without enough evidence","When the experience gets reduced to gadgets and gear","When teammates dismiss what can't be immediately explained","When investigations feel more like entertainment than exploration"],scores:["witness","empath","anchor","seeker"]},
{section:"How you understand",q:"What drew you to paranormal investigation in the first place?",options:["A personal experience I couldn't explain","A lifelong feeling that there is more than what we can see","Curiosity — I'm a researcher at heart","The community — I wanted to explore this with others"],scores:["conduit","intuitive","archivist","anchor"]},
{section:"The Inner Eye check-in",q:"When you think about your own intuitive or psychic gifts, you:",options:["Know they exist and actively work to develop them","Suspect they exist but don't fully understand them yet","Am curious but approaching with healthy skepticism","Am brand new to thinking about myself this way"],scores:["intuitive","empath","witness","seeker"]},
{section:"The Inner Eye check-in",q:"Has an investigation ever changed how you see yourself?",options:["Yes — profoundly","Yes — in small but meaningful ways","Not yet — but I'm open to it","I hadn't considered that as a possibility until now"],scores:["empath","intuitive","anchor","seeker"]}
];
const types={
empath:{name:"The Empath",badge:"Soul dominant",tagline:"You feel the story of a location before you ever hear it. Your greatest gift is also your greatest responsibility — learning to distinguish what belongs to you and what belongs to the space.",strengths:["Sensing emotional residue and atmospheric shifts","Creating deep connection with whatever is present","Reading the energy of a team and a location simultaneously"],growth:["Grounding and protection before investigations","Learning to interpret what you feel without second-guessing","Understanding how your emotional state shapes experience"],path:"The Inner Eye Series was made for you — particularly sessions two and three. The Veil Method will unlock experiences you've never had with equipment in hand."},
witness:{name:"The Witness",badge:"Signal dominant",tagline:"You notice what others miss. Patient, precise, and quietly perceptive — you are the investigator who catches the detail that changes everything.",strengths:["Observation of subtle environmental changes","Documenting experiences with accuracy and detail","Keeping the investigation grounded in what can be verified"],growth:["Allowing yourself to feel, not just observe","Trusting experiences that can't be immediately documented","Opening to your own intuitive signals"],path:"The Veil Method is your natural home — letting the location speak to a still and watchful mind. The Inner Eye will challenge you to expand beyond what you can prove."},
conduit:{name:"The Conduit",badge:"Signal & Soul balanced",tagline:"You don't just investigate — you communicate. Something in you opens a channel that others can't. Locations and energies respond to your presence in ways that still surprise you.",strengths:["Natural communication with whatever is present","Strong personal energy that locations respond to","Bridging the experience between the space and the team"],growth:["Learning when to speak and when to be still","Understanding the difference between receiving and projecting","Protecting your own energy during and after investigations"],path:"Both The Veil Method and The Inner Eye apply to you in equal measure. You are the rare investigator who walks both paths simultaneously."},
archivist:{name:"The Archivist",badge:"Signal dominant",tagline:"Context is everything to you. You believe that understanding what happened in a place unlocks what is still happening there — and you're usually right.",strengths:["Deep historical and contextual research","Connecting past events to present phenomena","Bringing structure and preparation to every investigation"],growth:["Learning to experience before you analyze","Allowing the location to surprise you beyond what you expected","Opening to information that can't be sourced or verified"],path:"The Veil Method will stretch you beautifully — it asks you to let go of the research and just listen. The Inner Eye will reveal how much you bring to an investigation beyond what you know."},
intuitive:{name:"The Intuitive",badge:"Soul dominant",tagline:"You receive information in flashes — images, words, physical sensations — and you don't always know why you know something. You just do. Learning to trust that is your life's work as an investigator.",strengths:["Receiving impressions before any evidence presents itself","Accessing information beyond the physical environment","Sensing what others in the team are missing"],growth:["Building trust in your own signals","Developing a language for what you receive","Understanding the difference between intuition and imagination"],path:"The Inner Eye Series will transform how you understand your gift. Every session was built for someone exactly like you. The Veil Method will give your intuition space to breathe."},
anchor:{name:"The Anchor",badge:"Soul dominant",tagline:"You are the reason the best investigations happen. The calm you create, the stability you hold, the space you make for others — without you, nothing else is possible.",strengths:["Creating the energetic environment investigations need","Emotional attunement to the team and the space","Holding steady when experiences become intense"],growth:["Recognizing your own experience, not just facilitating others'","Understanding that your stability is a gift — and a skill to develop","Allowing yourself to receive, not just provide"],path:"The Inner Eye will help you see yourself as a full investigator, not just a support role. The Veil Method will finally give you space to experience rather than manage."},
seeker:{name:"The Seeker",badge:"Signal & Soul balanced",tagline:"The big questions drive you — not just what is happening, but why. You hold every theory loosely and every experience seriously. The field needs more minds like yours.",strengths:["Open, non-dogmatic approach to all phenomena","Connecting individual experiences to broader understanding","Asking the questions that push the field forward"],growth:["Moving from thinking to feeling — trusting experience over theory","Allowing yourself to land on a moment without immediately analyzing it","Developing patience with what can't yet be explained"],path:"Signal & Soul was built around the same philosophy that drives you. The Veil Method and The Inner Eye together represent the balance you've been looking for."}
};
let current=0, answers=[], scores={};
function startQuiz(){
document.getElementById('screen-intro').style.display='none';
document.getElementById('screen-quiz').style.display='block';
renderQuestion();
}
function renderQuestion(){
const q=questions[current];
document.getElementById('section-label').textContent=q.section;
document.getElementById('question-text').textContent=q.q;
document.getElementById('q-count').textContent=(current+1)+' / '+questions.length;
document.getElementById('progress').style.width=((current/questions.length)*100)+'%';
document.getElementById('back-btn').disabled=current===0;
const ol=document.getElementById('options-list');
ol.innerHTML='';
q.options.forEach((opt,i)=>{
const btn=document.createElement('button');
btn.className='option-btn'+(answers[current]===i?' selected':'');
btn.innerHTML=`<span class="option-indicator"></span><span>${opt}</span>`;
btn./div>`).join('');
document.getElementById('r-growth').innerHTML=t.growth.map(s=>`<div class="result-item">${s}</div>`).join('');
document.getElementById('r-path').textContent=t.path;
document.getElementById('progress').style.width='100%';
window.scrollTo({top:0,behavior:'smooth'});
}
function visitSite(){
window.open('https://www.gethaunted.com','_blank');
}
function restartQuiz(){
current=0; answers=[];
document.getElementById('screen-result').style.display='none';
document.getElementById('screen-intro').style.display='block';
window.scrollTo({top:0,behavior:'smooth'});
}
</script>
</body>
</html>
