Business Blueprint ournal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Culture Snapshot — Culture Architect</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--ink: #1a1a1a;
--cream: #f8f4ef;
--warm: #f0e9de;
--gold: #b8943c;
--gold-light: #d4aa56;
--green: #2d6a4f;
--green-light: #d8f3dc;
--yellow: #b38b00;
--yellow-light: #fff3b0;
--red: #9b2226;
--red-light: #fde8e8;
--mid: #6b7280;
--border: #e2d9cc;
}
- { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: ‘DM Sans’, sans-serif;
background: var(–cream);
color: var(–ink);
min-height: 100vh;
}
/* HERO */
.hero {
background: var(–ink);
color: var(–cream);
padding: 60px 40px 50px;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: ‘’;
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 60% 0%, rgba(184,148,60,0.18) 0%, transparent 65%);
}
.hero-eyebrow {
font-family: ‘DM Sans’, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(–gold);
margin-bottom: 16px;
position: relative;
}
.hero h1 {
font-family: ‘Playfair Display’, serif;
font-size: clamp(32px, 5vw, 56px);
font-weight: 900;
line-height: 1.1;
margin-bottom: 18px;
position: relative;
}
.hero h1 em {
font-style: italic;
color: var(–gold-light);
}
.hero-sub {
font-size: 16px;
font-weight: 300;
color: rgba(248,244,239,0.7);
max-width: 520px;
margin: 0 auto 32px;
line-height: 1.6;
position: relative;
}
.hero-meta {
display: flex;
justify-content: center;
gap: 32px;
font-size: 13px;
color: rgba(248,244,239,0.5);
position: relative;
}
.hero-meta span { display: flex; align-items: center; gap: 6px; }
/* PROGRESS */
.progress-wrap {
background: white;
border-bottom: 1px solid var(–border);
padding: 16px 40px;
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
gap: 20px;
}
.progress-label {
font-size: 12px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: var(–mid);
white-space: nowrap;
}
.progress-bar-bg {
flex: 1;
height: 4px;
background: var(–border);
border-radius: 2px;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, var(–gold), var(–gold-light));
border-radius: 2px;
transition: width 0.4s ease;
width: 0%;
}
.progress-count {
font-size: 12px;
font-weight: 600;
color: var(–ink);
white-space: nowrap;
}
/* MAIN */
.main {
max-width: 780px;
margin: 0 auto;
padding: 48px 24px 80px;
}
/* SECTION */
.section-block {
margin-bottom: 56px;
animation: fadeUp 0.5s ease both;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.section-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 28px;
padding-bottom: 16px;
border-bottom: 1px solid var(–border);
}
.section-icon {
width: 36px;
height: 36px;
background: var(–ink);
color: var(–gold);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.section-title {
font-family: ‘Playfair Display’, serif;
font-size: 20px;
font-weight: 700;
color: var(–ink);
}
.section-subtitle {
font-size: 13px;
color: var(–mid);
margin-top: 2px;
}
/* QUESTION */
.question-card {
background: white;
border: 1px solid var(–border);
border-radius: 12px;
padding: 24px;
margin-bottom: 16px;
transition: border-color 0.2s, box-shadow 0.2s;
}
.question-card:hover {
border-color: var(–gold);
box-shadow: 0 2px 12px rgba(184,148,60,0.08);
}
.question-card.answered {
border-color: #c8d8c8;
}
.q-number {
font-size: 11px;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(–gold);
margin-bottom: 8px;
}
.q-text {
font-size: 15px;
font-weight: 500;
color: var(–ink);
line-height: 1.5;
margin-bottom: 20px;
}
.q-poles {
display: flex;
justify-content: space-between;
font-size: 11px;
color: var(–mid);
margin-bottom: 8px;
font-weight: 500;
}
.q-poles .pole-low { color: var(–red); }
.q-poles .pole-high { color: var(–green); }
/* SLIDER */
.slider-row {
display: flex;
align-items: center;
gap: 14px;
}
.slider-num {
font-size: 13px;
font-weight: 600;
color: var(–mid);
width: 20px;
text-align: center;
flex-shrink: 0;
}
input[type=“range”] {
flex: 1;
-webkit-appearance: none;
height: 4px;
background: var(–border);
border-radius: 2px;
outline: none;
cursor: pointer;
transition: background 0.2s;
}
input[type=“range”]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(–ink);
border: 3px solid var(–gold);
cursor: pointer;
transition: transform 0.15s;
}
input[type=“range”]::-webkit-slider-thumb:hover {
transform: scale(1.2);
}
.score-bubble {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(–ink);
color: var(–cream);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
transition: background 0.2s;
}
.score-bubble.s-low { background: var(–red); }
.score-bubble.s-mid { background: var(–yellow); }
.score-bubble.s-high { background: var(–green); }
.score-bubble.s-unanswered { background: var(–border); color: var(–mid); }
/* SUBMIT */
.submit-wrap {
text-align: center;
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid var(–border);
}
.submit-note {
font-size: 14px;
color: var(–mid);
margin-bottom: 20px;
}
.btn-submit {
background: var(–ink);
color: var(–cream);
border: none;
padding: 16px 48px;
font-family: ‘DM Sans’, sans-serif;
font-size: 15px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
letter-spacing: 0.5px;
transition: background 0.2s, transform 0.15s;
}
.btn-submit:hover {
background: #2c2c2c;
transform: translateY(-1px);
}
.btn-submit:disabled {
background: var(–border);
color: var(–mid);
cursor: default;
transform: none;
}
/* RESULTS */
#results {
display: none;
max-width: 780px;
margin: 0 auto;
padding: 48px 24px 80px;
animation: fadeUp 0.6s ease both;
}
.results-hero {
background: var(–ink);
color: var(–cream);
border-radius: 16px;
padding: 40px;
margin-bottom: 40px;
position: relative;
overflow: hidden;
}
.results-hero::before {
content: ‘’;
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 80% 0%, rgba(184,148,60,0.2) 0%, transparent 60%);
}
.results-eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(–gold);
margin-bottom: 12px;
position: relative;
}
.results-title {
font-family: ‘Playfair Display’, serif;
font-size: clamp(24px, 4vw, 38px);
font-weight: 900;
margin-bottom: 8px;
position: relative;
line-height: 1.2;
}
.results-overall {
font-size: 14px;
color: rgba(248,244,239,0.65);
margin-bottom: 24px;
position: relative;
}
.overall-score-row {
display: flex;
align-items: center;
gap: 20px;
position: relative;
}
.big-score {
font-family: ‘Playfair Display’, serif;
font-size: 64px;
font-weight: 900;
line-height: 1;
color: var(–gold-light);
}
.big-score-label { font-size: 13px; color: rgba(248,244,239,0.5); margin-top: 4px; }
.overall-bar-wrap { flex: 1; }
.overall-bar-label { font-size: 12px; color: rgba(248,244,239,0.5); margin-bottom: 8px; }
.overall-bar-bg { background: rgba(255,255,255,0.1); border-radius: 4px; height: 8px; overflow: hidden; }
.overall-bar-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(–gold), var(–gold-light)); transition: width 1s ease; }
/* SECTION RESULTS */
.results-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.result-card {
background: white;
border: 1px solid var(–border);
border-radius: 12px;
padding: 24px;
border-left: 4px solid var(–border);
transition: box-shadow 0.2s;
}
.result-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.result-card.red-card { border-left-color: var(–red); }
.result-card.yellow-card { border-left-color: var(–yellow); }
.result-card.green-card { border-left-color: var(–green); }
.rc-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.rc-title { font-family: ‘Playfair Display’, serif; font-size: 16px; font-weight: 700; }
.rc-badge {
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 20px;
}
.badge-red { background: var(–red-light); color: var(–red); }
.badge-yellow { background: var(–yellow-light); color: var(–yellow); }
.badge-green { background: var(–green-light); color: var(–green); }
.rc-score-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rc-score-num { font-size: 28px; font-weight: 700; font-family: ‘Playfair Display’, serif; }
.rc-score-num.score-red { color: var(–red); }
.rc-score-num.score-yellow { color: var(–yellow); }
.rc-score-num.score-green { color: var(–green); }
.rc-bar-bg { flex: 1; height: 5px; background: var(–warm); border-radius: 3px; overflow: hidden; }
.rc-bar-fill { height: 100%; border-radius: 3px; transition: width 0.8s ease; }
.fill-red { background: var(–red); }
.fill-yellow { background: var(–yellow); }
.fill-green { background: var(–green); }
.rc-insight { font-size: 13px; color: var(–mid); line-height: 1.5; }
/* PRIORITY LIST */
.priorities-section {
background: white;
border: 1px solid var(–border);
border-radius: 16px;
padding: 32px;
margin-bottom: 32px;
}
.section-h2 {
font-family: ‘Playfair Display’, serif;
font-size: 22px;
font-weight: 700;
margin-bottom: 6px;
}
.section-h2-sub { font-size: 13px; color: var(–mid); margin-bottom: 24px; }
.priority-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid var(–warm);
}
.priority-item:last-child { border-bottom: none; }
.priority-rank {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
margin-top: 2px;
}
.rank-1 { background: var(–red); color: white; }
.rank-2 { background: #c45c00; color: white; }
.rank-3 { background: var(–yellow); color: white; }
.rank-other { background: var(–border); color: var(–mid); }
.priority-content h4 { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.priority-content p { font-size: 13px; color: var(–mid); line-height: 1.5; }
/* 5D BLUEPRINT CTA */
.blueprint-cta {
background: var(–ink);
color: var(–cream);
border-radius: 16px;
padding: 40px;
position: relative;
overflow: hidden;
}
.blueprint-cta::before {
content: ‘’;
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 20% 100%, rgba(184,148,60,0.15) 0%, transparent 60%);
}
.bp-eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(–gold);
margin-bottom: 14px;
position: relative;
}
.bp-title {
font-family: ‘Playfair Display’, serif;
font-size: clamp(22px, 3.5vw, 32px);
font-weight: 900;
margin-bottom: 12px;
line-height: 1.2;
position: relative;
}
.bp-body {
font-size: 14px;
color: rgba(248,244,239,0.7);
line-height: 1.7;
max-width: 560px;
margin-bottom: 32px;
position: relative;
}
.bp-steps {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
margin-bottom: 32px;
position: relative;
}
@media (max-width: 560px) { .bp-steps { grid-template-columns: repeat(3, 1fr); } }
.bp-step {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(184,148,60,0.3);
border-radius: 8px;
padding: 12px 8px;
text-align: center;
}
.bp-step-d { font-size: 20px; font-weight: 700; color: var(–gold-light); font-family: ‘Playfair Display’, serif; }
.bp-step-name { font-size: 10px; font-weight: 600; letter-spacing: 0.5px; color: rgba(248,244,239,0.6); margin-top: 4px; }
.btn-cta {
background: var(–gold);
color: var(–ink);
border: none;
padding: 14px 32px;
font-family: ‘DM Sans’, sans-serif;
font-size: 14px;
font-weight: 700;
border-radius: 8px;
cursor: pointer;
letter-spacing: 0.5px;
transition: background 0.2s;
position: relative;
}
.btn-cta:hover { background: var(–gold-light); }
.btn-reset {
background: transparent;
color: rgba(248,244,239,0.5);
border: 1px solid rgba(248,244,239,0.2);
padding: 14px 24px;
font-family: ‘DM Sans’, sans-serif;
font-size: 13px;
border-radius: 8px;
cursor: pointer;
margin-left: 12px;
transition: color 0.2s, border-color 0.2s;
position: relative;
}
.btn-reset:hover { color: var(–cream); border-color: rgba(248,244,239,0.5); }
/* INTAKE FORM */
.intake-card {
background: white;
border: 1px solid var(–border);
border-radius: 16px;
padding: 36px;
margin-bottom: 48px;
border-top: 3px solid var(–gold);
}
.intake-title {
font-family: ‘Playfair Display’, serif;
font-size: 20px;
font-weight: 700;
margin-bottom: 6px;
}
.intake-sub {
font-size: 13px;
color: var(–mid);
margin-bottom: 28px;
line-height: 1.5;
}
.intake-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
@media (max-width: 500px) { .intake-row { grid-template-columns: 1fr; } }
.intake-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.intake-field label {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(–ink);
}
.intake-field input {
border: 1px solid var(–border);
border-radius: 8px;
padding: 12px 14px;
font-family: ‘DM Sans’, sans-serif;
font-size: 15px;
color: var(–ink);
background: var(–cream);
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.intake-field input:focus {
border-color: var(–gold);
box-shadow: 0 0 0 3px rgba(184,148,60,0.1);
background: white;
}
.intake-field input.field-error {
border-color: var(–red);
box-shadow: 0 0 0 3px rgba(155,34,38,0.08);
}
.field-err-msg {
font-size: 11px;
color: var(–red);
font-weight: 500;
display: none;
}
.field-err-msg.visible { display: block; }
.intake-privacy {
font-size: 11px;
color: var(–mid);
margin-top: 12px;
}
@media (max-width: 600px) {
.hero { padding: 40px 20px 36px; }
.progress-wrap { padding: 12px 20px; }
.main, #results { padding: 32px 16px 60px; }
.results-hero, .blueprint-cta { padding: 28px 20px; }
.priorities-section { padding: 24px 20px; }
.results-grid { grid-template-columns: 1fr; }
.hero-meta { flex-direction: column; gap: 8px; }
}
</style>
</head>
<body>
<!-- HERO -->
<div class="hero">
<div class="hero-eyebrow">Culture Architect · Leadership Multiplication</div>
<h1>The Culture<br><em>Snapshot</em></h1>
<p class="hero-sub">25 questions. 5 dimensions. A clear picture of where your company stands — and what needs to change first.</p>
<div class="hero-meta">
<span>⏱ 8–12 minutes</span>
<span>◈ 25 questions</span>
<span>⬡ Instant scorecard</span>
</div>
</div>
<!-- PROGRESS -->
<div class="progress-wrap">
<span class="progress-label">Progress</span>
<div class="progress-bar-bg"><div class="progress-bar-fill" id="progressFill"></div></div>
<span class="progress-count" id="progressCount">0 / 25</span>
</div>
<!-- QUESTIONNAIRE -->
<div class="main" id="questionnaireWrap">
</div>
<!-- RESULTS -->
<div id="results"></div>
<script>
const SECTIONS = [
{
id: "clarity",
icon: "◈",
title: "Clarity & Vision",
subtitle: "Is leadership direction clear enough to act without the founder?",
color: "var(--gold)",
fiveD: "Discover & Define",
questions: [
{ id: "c1", text: "Everyone on our leadership team can clearly articulate where this company is going in the next 3 years — without asking me.", low: "No clarity", high: "Total alignment" },
{ id: "c2", text: "Our core values are not just on the wall — they actively shape how decisions are made every week.", low: "Values are decorative", high: "Values drive decisions" },
{ id: "c3", text: "When I'm not in the room, people know exactly what I would decide — and why.", low: "Decisions stall", high: "Decisions flow" },
{ id: "c4", text: "Our team understands not just what we do, but why we exist — and they use that to guide their work.", low: "Unclear purpose", high: "Purpose is operational" },
{ id: "c5", text: "We have clear definitions of success that everyone understands — not just me.", low: "Only I know what 'good' looks like", high: "Everyone knows" },
]
},
{
id: "dependency",
icon: "⬡",
title: "Founder Dependency",
subtitle: "Can the company move without you at the center of everything?",
color: "var(--red)",
fiveD: "Diagnose",
questions: [
{ id: "d1", text: "My team can make important decisions — including budget, people, and direction — without needing my input.", low: "I decide everything", high: "Team decides independently" },
{ id: "d2", text: "If I stepped away for a month, operations would continue at the same quality without me.", low: "Things would break", high: "No disruption" },
{ id: "d3", text: "Key clients feel loyalty to our company — not just to me personally.", low: "Loyalty is to me only", high: "Loyalty is to the company" },
{ id: "d4", text: "My best thinking, systems, and standards are documented so others can carry and apply them.", low: "Only in my head", high: "Fully captured and shared" },
{ id: "d5", text: "There are leaders in this company who are actively growing toward taking more responsibility than they have today.", low: "I see no succession path", high: "Leadership pipeline is strong" },
]
},
{
id: "people",
icon: "✦",
title: "People & Leadership",
subtitle: "Are your people growing — or just executing?",
color: "var(--green)",
fiveD: "Develop",
questions: [
{ id: "p1", text: "Leaders in our company are actively developing the people below them — not just managing tasks.", low: "Managers, not developers", high: "Leaders multiply leaders" },
{ id: "p2", text: "People in our company take genuine ownership of outcomes — not just responsibilities.", low: "Tasks without ownership", high: "Deep ownership culture" },
{ id: "p3", text: "Accountability in our team is consistent — people follow through without me having to chase them.", low: "Follow-up required constantly", high: "Self-accountable culture" },
{ id: "p4", text: "I can name the top 3–5 leaders who are ready to lead more — and I have an active plan to develop them.", low: "No clear plan", high: "Active development happening" },
{ id: "p5", text: "When someone fails or underperforms, we address it directly and constructively — not avoid it.", low: "Conflict avoidance is common", high: "Healthy feedback is normal" },
]
},
{
id: "environment",
icon: "⬤",
title: "Culture & Environment",
subtitle: "Does the environment you've built actually support the culture you want?",
color: "var(--yellow)",
fiveD: "Drive",
questions: [
{ id: "e1", text: "Our team meetings create momentum and alignment — they don't drain energy or feel like a waste of time.", low: "Meetings kill momentum", high: "Meetings create movement" },
{ id: "e2", text: "Communication in our company is clear, direct, and flows well across the organization.", low: "Silos and confusion", high: "Open and flowing" },
{ id: "e3", text: "There is a consistent rhythm to how we operate — people know what to expect week to week.", low: "Chaos and reactivity", high: "Rhythm and predictability" },
{ id: "e4", text: "Feedback is a normal part of how we work — people give and receive it without significant friction.", low: "Feedback is rare or feared", high: "Feedback is healthy and normal" },
{ id: "e5", text: "Trust is strong enough that people speak up, disagree respectfully, and take risks without fear.", low: "Fear-based culture", high: "High trust and psychological safety" },
]
},
{
id: "multiplication",
icon: "✕",
title: "Multiplication & Scale",
subtitle: "Is leadership growing beyond you — or stalling?",
color: "var(--ink)",
fiveD: "Define & Develop",
questions: [
{ id: "m1", text: "The culture we have today is actually the culture we intended to build — not something that happened by accident.", low: "Culture happened by accident", high: "Culture is by design" },
{ id: "m2", text: "Our team can onboard and integrate new people into our culture without heavy founder involvement.", low: "I do every onboarding", high: "Culture replicates itself" },
{ id: "m3", text: "The most important things I know and believe about leadership have been transferred into my team — not kept in my head.", low: "Only I carry this", high: "The team carries this" },
{ id: "m4", text: "Our company is growing in a way that is healthy — adding complexity hasn't increased dependency on me.", low: "Growth created more dependency", high: "Growth is multiplying leadership" },
{ id: "m5", text: "I am intentionally building a company that can outlast my direct involvement — that is a real goal, not just a hope.", low: "I haven't thought about it", high: "Actively designing for it" },
]
}
];
const INSIGHTS = {
clarity: {
red: "Vision and values haven't been translated into daily decision-making. Your team can't lead well without a clear north star. The 5D Blueprint starts with Discover and Define — extracting your thinking and turning it into something your team can carry.",
yellow: "Some clarity exists, but it's inconsistent. Not everyone is operating from the same map. The Blueprint will sharpen this and make it operational.",
green: "Strong foundation. Clarity is working as a leadership multiplier for you."
},
dependency: {
red: "The company is running through you, not with you. This is the most urgent risk to your growth — and to your exit. The Blueprint directly targets founder dependency from day one.",
yellow: "Some dependency remains, especially in decisions and relationships. This is addressable. The Blueprint creates the systems that distribute leadership properly.",
green: "You've begun reducing your bottleneck. The next step is making sure this is structural, not just situational."
},
people: {
red: "People are executing but not owning. Leadership isn't multiplying — it's sitting with you. The Develop phase of the 5D Blueprint is designed specifically to change this.",
yellow: "Some people are growing, but it's not systemic. You need a people development engine, not just individuals doing well.",
green: "Your people culture is a real asset. Keep building structure around what's already working."
},
environment: {
red: "The environment is working against your culture, not for it. Meetings, communication, and feedback need to be redesigned. The Drive phase addresses exactly this.",
yellow: "Pockets of good culture, but the environment is inconsistent. Structure needs to catch up with intention.",
green: "Your environment supports your culture. This gives you a strong platform for multiplication."
},
multiplication: {
red: "Leadership is not multiplying. The company depends on you more than it should at this stage. Everything points to the need for a structured Blueprint.",
yellow: "Multiplication is starting but not complete. There's a gap between intention and infrastructure.",
green: "Leadership is multiplying. This is the goal — keep scaling the systems that created it."
}
};
const PRIORITY_ACTIONS = {
clarity: "Build a Clarity Architecture — extract your vision, values, and decision-making into a format your team can carry and act on.",
dependency: "Map and eliminate the dependency points — document your thinking, redesign key decisions, and give your team real authority.",
people: "Launch a Leadership Development Engine — identify your top leaders and build an active development track inside your organization.",
environment: "Redesign your operating rhythms — meetings, feedback loops, communication channels, and accountability structures need to reflect your culture.",
multiplication: "Build a Multiplication System — transfer your culture into replicable frameworks your team can operate and onboard new people into."
};
// State
const scores = {};
let respondentName = '';
let respondentEmail = '';
function getColor(score) {
if (score < 4) return 'red';
if (score < 7) return 'yellow';
return 'green';
}
function getSectionAvg(section) {
const vals = section.questions.map(q => scores[q.id] !== undefined ? scores[q.id] : null).filter(v => v !== null);
if (!vals.length) return null;
return vals.reduce((a, b) => a + b, 0) / vals.length;
}
function buildQuestionnaire() {
const wrap = document.getElementById('questionnaireWrap');
wrap.innerHTML = '';
// INTAKE FORM
const intakeBlock = document.createElement('div');
intakeBlock.className = 'section-block intake-card';
intakeBlock.innerHTML = `
<div class="intake-title">Before we begin</div>
<div class="intake-sub">Enter your details below. Your results will be personalized and kept confidential.</div>
<div class="intake-row">
<div class="intake-field">
<label>First Name *</label>
<input type="text" id="fieldFirstName" placeholder="e.g. Sarah" autocomplete="given-name" />
<span class="field-err-msg" id="errFirstName">Please enter your first name.</span>
</div>
<div class="intake-field">
<label>Last Name *</label>
<input type="text" id="fieldLastName" placeholder="e.g. Johnson" autocomplete="family-name" />
<span class="field-err-msg" id="errLastName">Please enter your last name.</span>
</div>
</div>
<div class="intake-row" style="grid-template-columns:1fr;">
<div class="intake-field">
<label>Email Address *</label>
<input type="email" id="fieldEmail" placeholder="e.g. sarah@yourcompany.com" autocomplete="email" />
<span class="field-err-msg" id="errEmail">Please enter a valid email address.</span>
</div>
</div>
<div class="intake-privacy">🔒 Your information is private. We use it only to follow up on your results.</div>
`;
wrap.appendChild(intakeBlock);
SECTIONS.forEach((sec, si) => {
const block = document.createElement('div');
block.className = 'section-block';
block.style.animationDelay = `${si * 0.1}s`;
block.innerHTML = `
<div class="section-header">
<div class="section-icon">${sec.icon}</div>
<div>
<div class="section-title">${sec.title}</div>
<div class="section-subtitle">${sec.subtitle}</div>
</div>
</div>
`;
sec.questions.forEach((q, qi) => {
const card = document.createElement('div');
card.className = 'question-card';
card.id = `card-${q.id}`;
const defaultVal = 5;
card.innerHTML = `
<div class="q-number">Q${si * 5 + qi + 1} of 25</div>
<div class="q-text">${q.text}</div>
<div class="q-poles">
<span class="pole-low">1 — ${q.low}</span>
<span class="pole-high">${q.high} — 10</span>
</div>
<div class="slider-row">
<span class="slider-num">1</span>
<input type="range" min="1" max="10" value="${defaultVal}" id="range-${q.id}" />
<span class="slider-num">10</span>
<div class="score-bubble s-unanswered" id="bubble-${q.id}">—</div>
</div>
`;
block.appendChild(card);
// Attach listener after appending
setTimeout(() => {
const range = document.getElementById(`range-${q.id}`);
const bubble = document.getElementById(`bubble-${q.id}`);
const cardEl = document.getElementById(`card-${q.id}`);
range.addEventListener('input', () => {
const val = parseInt(range.value);
scores[q.id] = val;
bubble.textContent = val;
bubble.className = 'score-bubble';
if (val <= 3) bubble.classList.add('s-low');
else if (val <= 6) bubble.classList.add('s-mid');
else bubble.classList.add('s-high');
cardEl.classList.add('answered');
updateProgress();
});
}, 0);
});
wrap.appendChild(block);
});
// Submit
const submitWrap = document.createElement('div');
submitWrap.className = 'submit-wrap';
submitWrap.innerHTML = `
<p class="submit-note">Move every slider to record your score. Unanswered questions will count as 5.</p>
<button class="btn-submit" id="submitBtn" onclick="showResults()">See My Culture Snapshot →</button>
`;
wrap.appendChild(submitWrap);
}
function updateProgress() {
const answered = Object.keys(scores).length;
const pct = (answered / 25) * 100;
document.getElementById('progressFill').style.width = pct + '%';
document.getElementById('progressCount').textContent = `${answered} / 25`;
}
function showResults() {
// Validate intake fields
const firstName = document.getElementById('fieldFirstName').value.trim();
const lastName = document.getElementById('fieldLastName').value.trim();
const email = document.getElementById('fieldEmail').value.trim();
const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
let hasError = false;
const show = (id, inp, cond) => {
document.getElementById(id).classList.toggle('visible', !cond);
document.getElementById(inp).classList.toggle('field-error', !cond);
if (!cond) hasError = true;
};
show('errFirstName', 'fieldFirstName', firstName.length > 0);
show('errLastName', 'fieldLastName', lastName.length > 0);
show('errEmail', 'fieldEmail', emailValid);
if (hasError) {
document.getElementById('fieldFirstName').closest('.intake-card').scrollIntoView({ behavior: 'smooth', block: 'start' });
return;
}
respondentName = firstName;
respondentEmail = email;
// Fill in unanswered as 5
SECTIONS.forEach(sec => {
sec.questions.forEach(q => {
if (scores[q.id] === undefined) scores[q.id] = 5;
});
});
document.getElementById('questionnaireWrap').style.display = 'none';
document.getElementById('progressFill').style.width = '100%';
document.getElementById('progressCount').textContent = '25 / 25';
const resultsEl = document.getElementById('results');
resultsEl.style.display = 'block';
// Calculate
const sectionResults = SECTIONS.map(sec => {
const avg = getSectionAvg(sec);
const color = getColor(avg);
return { ...sec, avg, color };
});
// Sort by priority (red first, then yellow, then green)
const prioritized = [...sectionResults].sort((a, b) => a.avg - b.avg);
const topPriority = prioritized[0];
const colorLabel = { red: 'Needs Immediate Attention', yellow: 'Room to Grow', green: 'Strength' };
const badgeClass = { red: 'badge-red', yellow: 'badge-yellow', green: 'badge-green' };
const scoreClass = { red: 'score-red', yellow: 'score-yellow', green: 'score-green' };
const fillClass = { red: 'fill-red', yellow: 'fill-yellow', green: 'fill-green' };
const cardClass = { red: 'red-card', yellow: 'yellow-card', green: 'green-card' };
const colorHex = { red: 'var(--red)', yellow: 'var(--yellow)', green: 'var(--green)' };
// Top priority diagnosis headline
const diagnosisLine = {
red: `Your biggest challenge right now is <strong>${topPriority.title}</strong> — and it's urgent.`,
yellow: `Your most important area to develop is <strong>${topPriority.title}</strong>.`,
green: `You're in a strong position — keep building on <strong>${topPriority.title}</strong>.`
}[topPriority.color];
// Priority items HTML
let priorityHTML = prioritized.map((sec, i) => {
const rankClass = i === 0 ? 'rank-1' : i === 1 ? 'rank-2' : i === 2 ? 'rank-3' : 'rank-other';
return `
<div class="priority-item">
<div class="priority-rank ${rankClass}">${i + 1}</div>
<div class="priority-content">
<h4>${sec.title} <span style="font-weight:400;color:var(--mid);font-size:12px;">· ${sec.avg.toFixed(1)}/10</span></h4>
<p>${PRIORITY_ACTIONS[sec.id]}</p>
</div>
</div>
`;
}).join('');
// Section cards
let cardsHTML = sectionResults.map(sec => `
<div class="result-card ${cardClass[sec.color]}">
<div class="rc-top">
<div class="rc-title">${sec.icon} ${sec.title}</div>
<span class="rc-badge ${badgeClass[sec.color]}">${colorLabel[sec.color]}</span>
</div>
<div class="rc-score-row">
<span class="rc-score-num ${scoreClass[sec.color]}">${sec.avg.toFixed(1)}</span>
<div class="rc-bar-bg"><div class="rc-bar-fill ${fillClass[sec.color]}" style="width:${sec.avg * 10}%"></div></div>
<span style="font-size:12px;color:var(--mid);white-space:nowrap;">/ 10</span>
</div>
<p class="rc-insight">${INSIGHTS[sec.id][sec.color]}</p>
<div style="margin-top:10px;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--gold);">5D: ${sec.fiveD}</div>
</div>
`).join('');
resultsEl.innerHTML = `
<div class="results-hero">
<div class="results-eyebrow">Culture Snapshot · ${respondentName}'s Results</div>
<div class="results-title">${diagnosisLine}</div>
<div class="results-overall" style="margin-top:16px;">Here's where to focus — ranked from most urgent to strongest.</div>
</div>
<div class="priorities-section">
<div class="section-h2">Your Priority Diagnosis</div>
<div class="section-h2-sub">Start with #1. That's where your leadership multiplication is most blocked.</div>
${priorityHTML}
</div>
<div class="results-grid">${cardsHTML}</div>
<div class="blueprint-cta">
<div class="bp-eyebrow">The Answer to All of This</div>
<div class="bp-title">The Culture Blueprint<br>& 5D Framework</div>
<div class="bp-body">Every area this snapshot revealed — dependency, unclear values, weak ownership, fragmented culture, leadership that isn't multiplying — is exactly what the Culture Blueprint is designed to solve. Not as theory. As a structured, practical architecture built for your company.</div>
<div class="bp-steps">
<div class="bp-step"><div class="bp-step-d">D1</div><div class="bp-step-name">Discover</div></div>
<div class="bp-step"><div class="bp-step-d">D2</div><div class="bp-step-name">Diagnose</div></div>
<div class="bp-step"><div class="bp-step-d">D3</div><div class="bp-step-name">Define</div></div>
<div class="bp-step"><div class="bp-step-d">D4</div><div class="bp-step-name">Drive</div></div>
<div class="bp-step"><div class="bp-step-d">D5</div><div class="bp-step-name">Develop</div></div>
</div>
<button class="btn-cta">Book a Clarity Session →</button>
<button class="btn-reset" onclick="resetQuiz()">Retake Assessment</button>
</div>
`;
window.scrollTo({ top: 0, behavior: 'smooth' });
}
function resetQuiz() {
Object.keys(scores).forEach(k => delete scores[k]);
respondentName = '';
respondentEmail = '';
document.getElementById('results').style.display = 'none';
document.getElementById('questionnaireWrap').style.display = 'block';
document.getElementById('progressFill').style.width = '0%';
document.getElementById('progressCount').textContent = '0 / 25';
buildQuestionnaire();
window.scrollTo({ top: 0, behavior: 'sm I’m mooth' });
}
buildQuestionnaire();
</script>
</body>
</html>