Cat MBTI Test

/* 统一样式变量，和狗狗页保持视觉一致 */
:root {
–primary: #d28061; /* 主色调（暖橙红） */
–primary-hover: #b86c4d; /* 主色hover */
–bg-light: #F9F7F4; /* 背景色 */
–text-dark: #333; /* 主文字色 */
–text-gray: #666; /* 次要文字色 */
–card-shadow: 0 4px 12px rgba(0,0,0,0.08);
–option-hover-bg: #d28061; /* 选项hover背景 */
–option-selected-bg: #d28061; /* 选项选中背景 */
}
body {
margin: 0;
padding: 0;
font-family: ‘Arial’, sans-serif;
background-color: var(–bg-light);
color: var(–text-dark);
line-height: 1.7; /* 适配放大字体的行高 */
font-size: 16px; /* 基础字体放大 */
}
.progress-container {
width: 80%;
max-width: 600px;
margin: 30px auto;
}
.progress-bar {
height: 8px;
background-color: #eee;
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background-color: var(–primary);
width: 5%;
transition: width 0.3s ease;
}
.progress-text {
text-align: right;
margin-top: 8px;
font-size: 1.1rem; /* 原0.9rem → 放大至1.1rem */
color: var(–text-gray);
}
.question-card {
background: white;
border-radius: 16px;
width: 80%;
max-width: 600px;
margin: 20px auto;
padding: 40px;
box-shadow: var(–card-shadow);
}
.question-card h2 {
color: var(–text-dark);
margin-bottom: 30px;
font-size: 1.8rem; /* 原1.5rem → 放大至1.8rem（题目文字） */
}
.option {
display: block;
width: 100%;
padding: 18px 15px; /* 增加内边距，适配放大字体 */
margin-bottom: 15px;
border: 2px solid #eee;
border-radius: 12px;
background: white;
color: var(–text-dark);
font-size: 1.2rem; /* 原1rem → 放大至1.2rem（选项文字） */
text-align: left;
cursor: pointer;
transition: all 0.3s ease;
}
.option:hover {
border-color: var(–primary);
background-color: var(–option-hover-bg);
color: white; /* hover时文字变白，提升可读性 */
}
.option.selected {
border-color: var(–primary);
background-color: var(–option-selected-bg);
color: white; /* 选中时文字变白 */
font-weight: 600;
}
.btn-group {
display: flex;
justify-content: space-between;
width: 80%;
max-width: 600px;
margin: 30px auto;
}
.nav-btn {
padding: 15px 30px; /* 增加按钮内边距，匹配字体大小 */
border-radius: 30px;
font-size: 1.2rem; /* 原1rem → 放大至1.2rem（按钮文字） */
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease;
}
.prev-btn {
background-color: white;
color: var(–text-dark);
border: 2px solid #eee;
}
.prev-btn:hover {
border-color: var(–primary);
color: var(–primary);
}
.next-btn {
background-color: var(–primary);
color: white;
border: none;
}
.next-btn:hover {
background-color: var(–primary-hover);
}
.next-btn:disabled {
background-color: #ccc;
cursor: not-allowed;
}