.th-quiz {
--th-bg: #fffaf6;
--th-surface: #ffffff;
--th-text: #2a2623;
--th-muted: #6d645c;
--th-line: #eadfd6;
--th-accent: #e68877;
--th-accent-dark: #d56f5d;
--th-shadow: 0 18px 50px rgba(37, 27, 21, 0.08);
--th-radius-lg: 28px;
--th-radius-md: 18px;
--th-radius-sm: 14px;
color: var(--th-text);
}
.th-quiz * { box-sizing: border-box; }
.th-quiz__shell {
max-width: 920px;
margin: 0 auto;
padding: 24px 16px;
}
.th-quiz__progress-wrap {
margin-bottom: 20px;
}
.th-quiz__progress-bar {
width: 100%;
height: 12px;
border-radius: 999px;
background: #f3e7de;
overflow: hidden;
}
.th-quiz__progress-fill {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #efb0a3 0%, var(--th-accent) 100%);
transition: width .35s ease;
}
.th-quiz__progress-text {
margin-top: 10px;
text-align: right;
font-size: 14px;
font-weight: 700;
color: var(--th-muted);
}
.th-quiz__intro,
.th-quiz__step,
.th-quiz__result {
background: var(--th-surface);
border-radius: var(--th-radius-lg);
box-shadow: var(--th-shadow);
border: 1px solid rgba(234, 223, 214, 0.9);
padding: 28px;
}
.th-quiz__eyebrow {
margin: 0 0 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 12px;
font-weight: 800;
color: var(--th-accent-dark);
}
.th-quiz__title {
margin: 0;
font-size: clamp(28px, 4vw, 42px);
line-height: 1.1;
font-weight: 800;
}
.th-quiz__title--result {
font-size: clamp(24px, 3.4vw, 36px);
}
.th-quiz__intro-text,
.th-quiz__result-text,
.th-quiz__result-note,
.th-quiz__disclaimer {
margin: 16px 0 0;
font-size: 16px;
line-height: 1.7;
color: var(--th-muted);
}
.th-quiz__step-meta {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: center;
margin-bottom: 14px;
flex-wrap: wrap;
}
.th-quiz__section,
.th-quiz__counter {
font-size: 14px;
color: var(--th-muted);
font-weight: 700;
}
.th-quiz__question {
margin: 0 0 22px;
font-size: clamp(22px, 3vw, 30px);
line-height: 1.25;
}
.th-quiz__answers {
display: grid;
gap: 14px;
}
.th-quiz__answer {
width: 100%;
border: 1px solid var(--th-line);
border-radius: var(--th-radius-md);
background: #fff;
padding: 18px 20px;
text-align: left;
color: var(--th-text);
cursor: pointer;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
box-shadow: 0 8px 24px rgba(37, 27, 21, 0.03);
}
.th-quiz__answer:hover,
.th-quiz__answer:focus-visible {
transform: translateY(-2px);
border-color: #9fd8b6;
background: #eef9f2;
color: #2c2b2b;
box-shadow: 0 14px 28px rgba(37, 27, 21, 0.08);
outline: none;
}
.th-quiz__answer.is-selected {
border-color: #578757;
background: #578757;
color: #fff;
box-shadow: 0 14px 30px rgba(95, 191, 143, 0.22);
transform: translateY(-1px);
}
.th-quiz__answer.is-selected .th-quiz__answer-label {
color: #fff;
}
.th-quiz__answer-label {
display: block;
font-size: 16px;
line-height: 1.55;
font-weight: 600;
}
.th-quiz__nav {
display: flex;
gap: 12px;
justify-content: space-between;
margin-top: 26px;
flex-wrap: wrap;
}
.th-quiz__nav--center {
justify-content: center;
}
.th-quiz__btn {
appearance: none;
border: 0;
border-radius: 999px;
padding: 14px 22px;
font-size: 15px;
line-height: 1;
font-weight: 800;
cursor: pointer;
transition: transform .2s ease, opacity .2s ease, background .2s ease, color .2s ease;
}
.th-quiz__btn:hover,
.th-quiz__btn:focus-visible {
transform: translateY(-1px);
outline: none;
}
.th-quiz__btn:disabled {
cursor: not-allowed;
opacity: .45;
transform: none;
}
.th-quiz__btn--primary {
background: var(--th-accent);
color: #fff;
}
.th-quiz__btn--primary:hover,
.th-quiz__btn--primary:focus-visible {
background: var(--th-accent-dark);
}
.th-quiz__btn--ghost {
background: #f8f3ef;
color: var(--th-text);
}
.th-quiz__result-block {
margin-top: 28px;
}
.th-quiz__result-heading {
margin: 0 0 16px;
font-size: 18px;
font-weight: 800;
}
.th-quiz__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.th-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--th-line);
border-radius: 22px;
overflow: hidden;
text-decoration: none;
color: inherit;
box-shadow: 0 14px 34px rgba(37, 27, 21, 0.06);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.th-card:hover,
.th-card:focus-visible {
transform: translateY(-4px);
box-shadow: 0 18px 38px rgba(37, 27, 21, 0.11);
border-color: #e7b3a8;
outline: none;
}
.th-card__media {
min-height: 168px;
background: linear-gradient(160deg, #fff1ec 0%, #f9e3db 100%);
display: flex;
align-items: center;
justify-content: center;
}
.th-card--small .th-card__media {
min-height: 128px;
}
.th-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.th-card__initial {
font-size: 48px;
font-weight: 900;
color: var(--th-accent-dark);
}
.th-card__body {
padding: 18px 18px 20px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.th-card--large .th-card__body {
padding: 22px 22px 24px;
}
.th-card__title {
margin: 0;
font-size: 20px;
line-height: 1.2;
font-weight: 800;
}
.th-card--small .th-card__title {
font-size: 18px;
}
.th-card__text {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: var(--th-muted);
}
.th-card__cta {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: auto;
padding: 12px 16px;
border-radius: 999px;
background: #f8efe9;
color: var(--th-text);
font-size: 14px;
font-weight: 800;
}
.th-card--large {
max-width: 430px;
}
.th-quiz__disclaimer {
padding-top: 22px;
border-top: 1px solid var(--th-line);
}
@media (max-width: 900px) {
.th-quiz__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.th-quiz__shell {
padding: 18px 0;
}
.th-quiz__intro,
.th-quiz__step,
.th-quiz__result {
padding: 22px 16px;
border-radius: 22px;
}
.th-quiz__question {
font-size: 24px;
}
.th-quiz__answer {
padding: 16px;
}
.th-quiz__grid {
grid-template-columns: 1fr;
}
.th-quiz__nav {
flex-direction: column;
}
.th-quiz__btn {
width: 100%;
justify-content: center;
}
.th-card--large {
max-width: none;
}
}