/* ========================================================= 予你 · 一封情书 style.css ========================================================= */

/* ========================================================= 基础 ========================================================= */

{ box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0;

background: #faf7f5; color: #4a4545; font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif; 

}

/* ========================================================= 首页 ========================================================= */

.hero { min-height: 100vh;

display: flex; justify-content: center; align-items: center; text-align: center; padding: 40px 20px; background: radial-gradient( circle at 50% 35%, rgba(255, 220, 225, 0.8), transparent 40% ), linear-gradient( 135deg, #fffafa, #f8f2f3 ); 

}

.hero-inner { animation: appear 1.5s ease; }

.small-title { font-family: sans-serif;

font-size: 13px; letter-spacing: 6px; color: #a28b8f; margin-bottom: 35px; 

}

/* ========================================================= 爱心 ========================================================= */

.heart { font-family: sans-serif;

font-size: 58px; color: #c87582; margin-bottom: 18px; animation: heartbeat 2.5s infinite; text-shadow: 0 8px 25px rgba(200, 117, 130, 0.15); 

}

/* ========================================================= 标题 ========================================================= */

h1 { margin: 0;

font-size: clamp(36px, 9vw, 70px); font-weight: 400; letter-spacing: 8px; color: #4d4445; 

}

/* ========================================================= 两个人的名字 ========================================================= */

.names { margin-top: 25px;

font-family: sans-serif; font-size: 15px; letter-spacing: 4px; color: #a37d84; 

}

.names span { margin: 0 12px;

color: #c87582; 

}

/* ========================================================= 首页文字 ========================================================= */

.intro { margin-top: 35px;

font-size: 16px; line-height: 2.2; color: #817778; 

}

/* ========================================================= 向下滚动提示 ========================================================= */

.scroll { margin-top: 70px;

font-family: sans-serif; font-size: 11px; letter-spacing: 4px; color: #aaa; animation: scrollHint 2.5s ease-in-out infinite; 

}

/* ========================================================= 普通内容区域 ========================================================= */

.section { max-width: 760px;

margin: auto; padding: 110px 25px; 

}

.section-title { text-align: center;

font-size: 13px; letter-spacing: 6px; color: #b18c91; margin-bottom: 55px; 

}

/* ========================================================= 古诗词 ========================================================= */

.poem { text-align: center;

padding: 55px 30px; border-top: 1px solid #e9dfe0; border-bottom: 1px solid #e9dfe0; background: rgba(255, 255, 255, 0.35); transition: transform 0.5s ease, box-shadow 0.5s ease; 

}

.poem:hover { transform: translateY(-5px);

box-shadow: 0 15px 40px rgba(90, 60, 65, 0.06); 

}

.poem p { margin: 12px 0;

font-size: 19px; line-height: 2.1; letter-spacing: 2px; 

}

.source { margin-top: 28px;

font-family: sans-serif; font-size: 12px; letter-spacing: 3px; color: #aaa; 

}

/* ========================================================= 原创诗歌 ========================================================= */

.original { position: relative;

margin-top: 20px; padding: 65px 35px; text-align: center; background: #fffdfd; box-shadow: 0 20px 60px rgba(90, 60, 65, 0.08); transition: transform 0.6s ease, box-shadow 0.6s ease; 

}

.original:hover { transform: translateY(-5px);

box-shadow: 0 25px 70px rgba(90, 60, 65, 0.12); 

}

/* 左上角引号 */

.original::before { content: "“";

position: absolute; top: 20px; left: 25px; font-family: serif; font-size: 70px; color: #ead6d9; line-height: 1; 

}

/* 诗歌正文 */

.original p { margin: 10px 0;

font-size: 18px; line-height: 2.3; letter-spacing: 2px; color: #5c5556; 

}

/* 诗歌标题 */

.original .title { margin-bottom: 35px;

font-size: 22px; letter-spacing: 5px; color: #725d60; 

}

/* ========================================================= 最后的情书 ========================================================= */

.letter { text-align: center;

padding: 80px 20px 120px; 

}

.letter p { max-width: 620px;

margin: 18px auto; font-size: 17px; line-height: 2.3; color: #706668; 

}

/* 最后的「我喜欢你」 */

.final { margin-top: 55px;

font-size: 25px; letter-spacing: 5px; color: #b96c79; text-shadow: 0 5px 20px rgba(185, 108, 121, 0.12); 

}

/* 落款 */

.signature { margin-top: 25px;

font-family: sans-serif; font-size: 12px; letter-spacing: 3px; color: #aaa; 

}

/* ========================================================= 页脚 ========================================================= */

footer { padding: 30px;

text-align: center; font-family: sans-serif; font-size: 11px; letter-spacing: 3px; color: #b7adaf; 

}

/* ========================================================= 漂浮爱心 ========================================================= */

.floating-heart { position: fixed;

z-index: 0; color: rgba(200, 117, 130, 0.18); animation: floatUp linear infinite; pointer-events: none; 

}

.h1 { left: 10%;

bottom: -30px; animation-duration: 10s; 

}

.h2 { left: 30%;

bottom: -30px; animation-duration: 13s; animation-delay: 3s; 

}

.h3 { right: 15%;

bottom: -30px; animation-duration: 11s; animation-delay: 2s; 

}

.h4 { right: 35%;

bottom: -30px; animation-duration: 15s; animation-delay: 5s; 

}

/* ========================================================= 页面进入动画 ========================================================= */

@keyframes appear {

from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } 

}

/* ========================================================= 爱心跳动 ========================================================= */

@keyframes heartbeat {

0%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } 60% { transform: scale(1); } 

}

/* ========================================================= 漂浮动画 ========================================================= */

@keyframes floatUp {

0% { transform: translateY(0) rotate(0deg); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 0.6; } 100% { transform: translateY(-110vh) rotate(20deg); opacity: 0; } 

}

/* ========================================================= Scroll 提示动画 ========================================================= */

@keyframes scrollHint {

0%, 100% { opacity: 0.45; transform: translateY(0); } 50% { opacity: 1; transform: translateY(5px); } 

}

/* ========================================================= JS 滚动淡入 ========================================================= */

.scroll-hidden { opacity: 0;

transform: translateY(30px); transition: opacity 1s ease, transform 1s ease; 

}

.scroll-hidden.visible { opacity: 1;

transform: translateY(0); 

}

/* ========================================================= 手机适配 ========================================================= */

@media (max-width: 600px) {

.hero { min-height: 100svh; } h1 { letter-spacing: 5px; } .names { font-size: 13px; } .section { padding: 80px 20px; } .poem { padding: 40px 15px; } .poem p, .original p { font-size: 16px; } .original { padding: 55px 20px; } .original .title { font-size: 19px; letter-spacing: 4px; } .letter p { font-size: 16px; } .final { font-size: 22px; } 

}