/* 基础样式：温暖柔和色调，响应式布局 */
:root {
–primary: #E8A87C; /* 暖橙色 */
–secondary: #C38D9E; /* 柔粉色 */
–bg-light: #F9F7F4; /* 米白色背景 */
–text-dark: #3D405B; /* 深灰色文字 */
–card-shadow: 0 4px 12px rgba(0,0,0,0.08);
/* 社媒品牌色 */
–fb: #1877F2;
–ins: #E4405F;
–pinterest: #E60023;
–reddit: #FF4500;
–twitter: #1DA1F2;
}
body {
margin: 0;
padding: 0;
font-family: ‘Arial’, sans-serif;
background-color: var(–bg-light);
color: var(–text-dark);
line-height: 1.6;
font-size: 18px; /* 基础字体放大（原默认16px） */
}
.banner {
background: linear-gradient(135deg, var(–primary), var(–secondary));
color: white;
text-align: center;
padding: 40px 20px;
}
.banner h1 {
font-size: 2.8rem; /* 原2.2rem → 放大至2.8rem */
margin-bottom: 10px;
font-weight: 700;
}
.banner p {
font-size: 1.4rem; /* 原1.1rem → 放大至1.4rem */
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
/* 新增：社媒分享模块样式 */
.share-section {
text-align: center;
padding: 30px 20px 10px;
}
.share-title {
font-size: 1.3rem;
color: var(–text-dark);
margin-bottom: 20px;
font-weight: 600;
}
.social-share {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.social-btn {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
text-decoration: none;
box-shadow: 0 3px 8px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.social-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 5px 12px rgba(0,0,0,0.15);
}
/* 各社媒按钮配色 */
.fb-btn { background-color: var(–fb); }
.ins-btn { background-color: var(–ins); }
.pinterest-btn { background-color: var(–pinterest); }
.reddit-btn { background-color: var(–reddit); }
.twitter-btn { background-color: var(–twitter); }

.pet-cards {
display: flex;
justify-content: center;
gap: 30px;
padding: 50px 20px;
flex-wrap: wrap;
}
.pet-card {
background: white;
border-radius: 16px;
width: 340px; /* 卡片宽度小幅增加，适配放大的文字 */
padding: 40px 30px; /* 内边距增加，避免文字拥挤 */
text-align: center;
box-shadow: var(–card-shadow);
cursor: pointer;
transition: transform 0.3s ease;
}
.pet-card:hover {
transform: translateY(-5px);
}
.pet-card img {
width: 160px; /* 图片小幅放大，保持比例 */
height: 160px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 25px; /* 间距增加 */
}
.pet-card h2 {
color: var(–text-dark);
margin-bottom: 25px; /* 间距增加 */
font-size: 1.8rem; /* 原默认 → 放大至1.8rem */
font-weight: 700;
}
.pet-card p {
color: #666;
margin-bottom: 30px; /* 间距增加 */
font-size: 1.2rem; /* 原默认 → 放大至1.2rem */
line-height: 1.7;
}
.start-btn {
background-color: var(–primary);
color: white;
border: none;
padding: 22px 35px; /* 按钮内边距增加 */
border-radius: 30px;
font-size: 1.3rem; /* 原1rem → 放大至1.3rem */
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease;
}
.start-btn:hover {
background-color: #D18060;
}
.footer {
text-align: center;
padding: 30px 20px;
color: #888;
font-size: 1.4rem; /* 原1.2rem → 放大至1.4rem */
}

/* 移动端适配：确保放大后在小屏上不拥挤 */
@media (max-width: 768px) {
.banner h1 {
font-size: 2.2rem;
}
.banner p {
font-size: 1.2rem;
}
/* 新增：移动端社媒按钮适配 */
.social-btn {
width: 45px;
height: 45px;
font-size: 1.3rem;
}
.pet-card {
width: 90%;
max-width: 300px;
}
.pet-card h2 {
font-size: 1.6rem;
}
.pet-card p {
font-size: 1.1rem;
}
.start-btn {
font-size: 1.2rem;
padding: 20px 30px;
}
.footer {
font-size: 1.2rem;
}
}

<!–

–>

Dog MBTI Test

Is your pup an extroverted adventurer or a quiet cuddler? Let’s find out!

Start Dog Test

Cat MBTI Test

Is your kitty a social butterfly or a lone philosopher? Discover their vibe now!

Start Cat Test