PFC QUIZ
What type of Portfolio Careerist are you?
What type of Portfolio Careerist are you? Take the Quiz!
{
font-family: 'Ubuntu', sans-serif;
background: var(--bg);
color: var(--navy);
min-height: 100vh;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 2rem 1rem 4rem;
}
.container {
width: 100%;
max-width: 680px;
}
/* HEADER */
.quiz-header {
text-align: center;
padding: 2.5rem 1rem 2rem;
border-bottom: 1px solid var(--border);
margin-bottom: 2.5rem;
}
.quiz-eyebrow {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--sky);
margin-bottom: 1rem;
}
.quiz-title {
font-family: 'Ubuntu', sans-serif;
font-weight: 700;
font-size: clamp(26px, 5vw, 40px);
line-height: 1.2;
color: var(--navy);
margin-bottom: 1rem;
}
.quiz-title em {
font-style: italic;
font-weight: 400;
color: var(--sky);
}
.quiz-subtitle {
font-size: 15px;
font-weight: 300;
color: var(--slate);
line-height: 1.75;
max-width: 460px;
margin: 0 auto;
}
/* PROGRESS */
.progress-wrap { margin-bottom: 2rem; }
.progress-meta {
display: flex;
justify-content: space-between;
font-size: 12px;
font-weight: 500;
color: var(--slate);
margin-bottom: 8px;
}
.progress-track {
height: 3px;
background: rgba(64, 190, 238, 0.2);
border-radius: 2px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(--sky);
border-radius: 2px;
transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* QUESTION CARD */
.question-card {
background: var(--canvas);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2rem;
margin-bottom: 1.5rem;
animation: fadeUp 0.35s ease both;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.question-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--sky);
margin-bottom: 0.75rem;
}
.question-text {
font-size: clamp(16px, 2.5vw, 20px);
font-weight: 500;
color: var(--navy);
line-height: 1.5;
margin-bottom: 1.75rem;
}
/* OPTIONS */
.options { display: flex; flex-direction: column; gap: 10px; }
.option {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 13px 16px;
border: 1.5px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
background: var(--canvas);
transition: border-color 0.18s, background 0.18s, transform 0.12s;
text-align: left;
font-family: 'Ubuntu', sans-serif;
width: 100%;
}
.option:hover {
border-color: var(--sky);
background: var(--sky-light);
transform: translateX(3px);
}
.option.selected {
border-color: var(--sky);
background: var(--sky-light);
}
.option-marker {
width: 26px;
height: 26px;
min-width: 26px;
border-radius: 50%;
border: 1.5px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 500;
color: var(--slate);
margin-top: 1px;
transition: all 0.18s;
flex-shrink: 0;
}
.option.selected .option-marker {
background: var(--sky);
border-color: var(--sky);
color: var(--canvas);
}
.option-text {
font-size: 14px;
font-weight: 300;
line-height: 1.6;
color: var(--navy);
padding-top: 3px;
}
/* NAV */
.nav { display: flex; justify-content: flex-end; }
.btn-next {
padding: 12px 28px;
background: var(--navy);
color: var(--canvas);
border: none;
border-radius: var(--radius);
font-family: 'Ubuntu', sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
opacity: 0.3;
transition: opacity 0.2s, background 0.2s, transform 0.12s;
letter-spacing: 0.02em;
}
.btn-next.ready { opacity: 1; }
.btn-next.ready:hover { background: var(--sky); transform: translateY(-1px); }
/* EMAIL GATE */
.email-gate {
background: var(--canvas);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2.5rem 2rem;
text-align: center;
animation: fadeUp 0.35s ease both;
}
.email-gate-icon {
width: 52px;
height: 52px;
background: var(--sky-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.25rem;
}
.email-gate-icon svg {
width: 24px;
height: 24px;
stroke: var(--sky);
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.email-gate-title {
font-size: 22px;
font-weight: 700;
color: var(--navy);
margin-bottom: 0.75rem;
line-height: 1.3;
}
.email-gate-text {
font-size: 14px;
font-weight: 300;
color: var(--slate);
line-height: 1.75;
margin-bottom: 1.75rem;
max-width: 380px;
margin-left: auto;
margin-right: auto;
}
.ghl-form-wrap {
width: 100%;
border-radius: var(--radius);
overflow: hidden;
min-height: 280px;
}
.ghl-form-wrap iframe {
width: 100%;
min-height: 280px;
border: none;
display: block;
}
.email-note {
font-size: 11px;
color: var(--slate);
margin-top: 1rem;
opacity: 0.7;
}
.btn-reveal {
margin-top: 1rem;
padding: 12px 28px;
background: var(--navy);
color: var(--canvas);
border: none;
border-radius: var(--radius);
font-family: 'Ubuntu', sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
.btn-reveal:hover { background: var(--sky); }
/* RESULT */
.result-wrap { animation: fadeUp 0.4s ease both; }
.result-profile-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 14px;
border-radius: 100px;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 1.5rem;
}
.result-hero {
background: var(--canvas);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2.5rem 2rem;
margin-bottom: 1.5rem;
}
.result-headline {
font-size: clamp(20px, 3.5vw, 28px);
font-weight: 700;
color: var(--navy);
line-height: 1.3;
margin-bottom: 1rem;
}
.result-text {
font-size: 15px;
font-weight: 300;
color: var(--slate);
line-height: 1.8;
margin-bottom: 1.5rem;
}
.result-divider {
border: none;
border-top: 1px solid var(--border);
margin: 1.5rem 0;
}
.result-signals-title {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--slate);
margin-bottom: 1rem;
}
.signal {
display: flex;
gap: 12px;
align-items: flex-start;
margin-bottom: 12px;
}
.signal-dot {
width: 6px;
height: 6px;
min-width: 6px;
border-radius: 50%;
margin-top: 8px;
background: var(--sky);
}
.signal-text {
font-size: 14px;
font-weight: 300;
color: var(--navy);
line-height: 1.65;
}
.secondary-profile {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 1.5rem 2rem;
margin-bottom: 1.5rem;
}
.secondary-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--slate);
margin-bottom: 0.4rem;
}
.secondary-title {
font-size: 17px;
font-weight: 700;
color: var(--navy);
margin-bottom: 0.4rem;
}
.secondary-text {
font-size: 13px;
font-weight: 300;
color: var(--slate);
line-height: 1.65;
}
/* CTA BLOCK */
.result-cta {
background: var(--navy);
border-radius: var(--radius-lg);
padding: 2rem;
text-align: center;
margin-bottom: 1.5rem;
}
.result-cta-text {
font-size: 15px;
font-weight: 300;
color: rgba(255,255,255,0.85);
line-height: 1.7;
margin-bottom: 1.25rem;
}
.btn-cta {
display: inline-block;
padding: 13px 28px;
background: var(--sky);
color: var(--canvas);
border-radius: var(--radius);
font-family: 'Ubuntu', sans-serif;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: transform 0.15s, background 0.15s;
}
.btn-cta:hover { background: #2AAAD4; transform: translateY(-2px); }
.btn-restart {
display: block;
width: 100%;
text-align: center;
background: none;
border: none;
font-family: 'Ubuntu', sans-serif;
font-size: 13px;
font-weight: 300;
color: var(--slate);
cursor: pointer;
padding: 0.5rem;
transition: color 0.15s;
}
.btn-restart:hover { color: var(--navy); }
.hidden { display: none !important; }
@media (max-width: 480px) {
body { padding: 1rem 0.75rem 3rem; }
.question-card, .email-gate, .result-hero, .result-cta { padding: 1.5rem 1.25rem; }
}
What kind of portfolio
Portfolio Career Institute · Self-Assessment
What kind of portfolio
career person are you?
7 questions. No right or wrong answers. A clearer picture of where you stand, and what might actually fit you.
Question 1
Your profile is ready.
Enter your name and email below to receive your personalised portfolio career profile, along with occasional insights from the Portfolio Career Institute.
No spam. Unsubscribe at any time.