* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #fbf7ef;
font-family: 'Inter', 'Noto Serif SC', system-ui, sans-serif;
color: #2c2418;
overflow-x: hidden;
}
/* 平滑滚动 & 视差预备 */
html {
scroll-behavior: smooth;
}
/* 自定义滚动条保持质感 */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: #ede3d3;
}
::-webkit-scrollbar-thumb {
background: #c2a071;
border-radius: 12px;
}
/* 全屏 Hero 视差区 */
.hero-parallax {
position: relative;
height: 100vh;
min-height: 700px;
/* 图片资源统一放在与 index.html 同级的 image/、backgrounds/、custom-image/ 目录 */
background: url('../image/背景图雨水.jpg') center/cover no-repeat fixed;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
isolation: isolate;
}
.hero-parallax::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, rgba(30, 20, 10, 0.55), rgba(50, 35, 20, 0.65));
z-index: 1;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 900px;
padding: 0 1.5rem;
backdrop-filter: blur(3px);
animation: fadeInUp 1.2s ease-out;
}
.slide-section {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.slide-section.reveal {
opacity: 1;
transform: translateY(0);
}
.slide-left {
transform: translateX(-40px);
}
.slide-right {
transform: translateX(40px);
}
.slide-left.reveal,
.slide-right.reveal {
transform: translateX(0);
}
.hero-content h1 {
font-size: 5rem;
font-weight: 800;
font-family: 'Noto Serif SC', serif;
letter-spacing: 12px;
text-shadow: 0 8px 20px rgba(0,0,0,0.25);
margin-bottom: 0.5rem;
}
.hero-content .sub {
font-size: 1.2rem;
letter-spacing: 3px;
border-top: 1px solid rgba(255,245,215,0.7);
display: inline-block;
padding-top: 0.8rem;
font-weight: 300;
}
.hero-content p {
margin-top: 1.5rem;
font-size: 1rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
font-weight: 300;
}
.scroll-indicator {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
color: rgba(255,245,215,0.9);
font-size: 1.8rem;
animation: bounce 2s infinite;
cursor: pointer;
}
/* 主要容器 */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
/* 节气引言区 */
.intro-section {
text-align: center;
padding: 5rem 1rem 4rem;
background: #fffcf5;
margin-top: -2px;
position: relative;
z-index: 5;
}
.intro-section h2 {
font-size: 2.6rem;
font-family: 'Noto Serif SC', serif;
color: #5b3c1a;
position: relative;
display: inline-block;
}
.intro-section h2:after {
content: '';
position: absolute;
bottom: -12px;
left: 20%;
width: 60%;
height: 2px;
background: #ddba8b;
}
.intro-text {
max-width: 800px;
margin: 2rem auto 0;
font-size: 1.05rem;
line-height: 1.7;
color: #5f4a30;
}
.season-gallery {
margin: 2rem 0 3rem;
display: grid;
gap: 1rem;
}
.season-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.season-card {
position: relative;
border-radius: 32px;
overflow: hidden;
min-height: 260px;
box-shadow: 0 26px 40px -24px rgba(0,0,0,0.16);
border: 1px solid rgba(255,255,255,0.7);
background: #fff;
opacity: 0;
transform: translateY(40px);
transition: opacity 1.2s ease, transform 1.2s ease;
}
.season-card.reveal {
opacity: 1;
transform: translateY(0);
}
.season-card.delay {
transition-delay: 0.3s;
}
.season-card.delay2 {
transition-delay: 0.6s;
}
.season-card.delay3 {
transition-delay: 0.9s;
}
.season-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.season-info {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 1.2rem 1.3rem;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.72) 100%);
color: #fff;
}
.season-info h3 {
margin: 0 0 0.5rem;
font-size: 1.4rem;
font-family: 'Noto Serif SC', serif;
}
.season-info p {
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
color: rgba(255,255,255,0.94);
}
/* 节气卡片网格 + 微视差滚动触发效果 */
/* 全屏节气展示 */
#termFullView {
display: none;
position: fixed;
inset: 0;
z-index: 1200;
background: #000 center/cover no-repeat fixed;
justify-content: center;
align-items: center;
color: #fff;
opacity: 0;
transition: opacity 420ms ease;
}
#termFullView.active { opacity: 1; }
#termFullView .overlay {
position: absolute;
inset: 0;
background: rgba(6,6,6,0.45);
backdrop-filter: blur(4px);
}
#termFullView .term-card {
position: relative;
z-index: 2;
max-width: 1100px;
width: calc(100% - 4rem);
margin: 2rem;
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.18));
border-radius: 18px;
padding: 2rem;
box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}
#termFullView .term-card h2 { margin: 0 0 0.6rem; font-family: 'Noto Serif SC', serif; font-size: 2.6rem; }
#termFullView .term-card p { color: rgba(255,255,255,0.95); line-height:1.8; }
#termFullView .term-card .term-content { font-size: 1.05rem; max-height: 42vh; overflow: auto; }
#termFullView .term-card .term-poem { margin-top:1rem; color:#f6e8d1; font-style:italic; font-size:0.98rem; }
#termFullView .close-full {
position: absolute;
top: 26px;
right: 28px;
z-index: 1300;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(255,255,255,0.08);
color: #fff;
padding: 0.6rem 0.9rem;
border-radius: 999px;
cursor: pointer;
font-size: 1rem;
}
#termFullView .term-full-nav {
position: absolute;
top: 24px;
left: 50%;
transform: translateX(-50%);
width: min(90%, 1100px);
z-index: 1300;
background: rgba(0,0,0,0.34);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 14px;
overflow: hidden;
}
#termFullView .term-full-nav:hover .thumbs-wrap {
max-height: 340px;
opacity: 1;
}
#termFullView .nav-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.9rem 1rem;
color: #f9f2de;
font-size: 0.95rem;
letter-spacing: 0.04em;
cursor: pointer;
}
#termFullView .nav-head span {
color: #ffdca4;
font-weight: 600;
}
#termFullView .thumbs-wrap {
max-height: 0;
overflow-y: auto;
transition: max-height 280ms ease, opacity 220ms ease;
opacity: 0;
border-top: 1px solid rgba(255,255,255,0.12);
background: rgba(0,0,0,0.45);
}
#termFullView .nav-thumb-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0.65rem;
padding: 0.75rem 1rem 0.95rem;
}
#termFullView .nav-thumb {
border-radius: 16px;
overflow: hidden;
background: rgba(255,255,255,0.08);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
cursor: pointer;
transition: transform 180ms ease, box-shadow 180ms ease;
display: grid;
grid-template-rows: 110px auto;
}
#termFullView .nav-thumb:hover,
#termFullView .nav-thumb.active {
transform: translateY(-2px);
box-shadow: 0 18px 30px rgba(0,0,0,0.22);
}
#termFullView .nav-thumb .thumb-image {
background-size: cover;
background-position: center;
min-height: 110px;
}
#termFullView .nav-thumb .thumb-label {
padding: 0.8rem 0.85rem;
color: #fff;
font-size: 0.85rem;
line-height: 1.4;
background: rgba(0,0,0,0.4);
}
#termFullView .nav-thumb .thumb-label strong {
display: block;
color: #ffe5b0;
font-size: 0.92rem;
margin-bottom: 0.25rem;
}
#termFullView .nav-thumb .thumb-label small {
display: block;
color: rgba(255,255,255,0.72);
font-size: 0.78rem;
}
/* 左右点击区域切换 */
#termFullView .nav-left, #termFullView .nav-right {
position: absolute;
top: 0; bottom: 0;
width: 28%;
z-index: 1250;
cursor: pointer;
}
#termFullView .nav-left { left: 0; }
#termFullView .nav-right { right: 0; }
/* 小提示箭头（可保留或隐藏） */
#termFullView .nav-left:after, #termFullView .nav-right:after {
content: '';
position: absolute;
top: 50%; transform: translateY(-50%);
width: 48px; height: 48px; opacity: 0.18;
background-size: contain; background-repeat: no-repeat;
}
#termFullView .nav-left:after { left: 24px; background-image: url('data:image/svg+xml;utf8,'); }
#termFullView .nav-right:after { right: 24px; background-image: url('data:image/svg+xml;utf8,'); }
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
margin: 3rem 0 4rem;
}
.card {
background: rgba(255, 250, 240, 0.9);
border-radius: 48px;
padding: 1.8rem 1.5rem;
transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.05);
cursor: pointer;
border: 1px solid #f0e2d2;
backdrop-filter: blur(2px);
opacity: 0;
transform: translateY(35px);
transition: opacity 0.7s ease, transform 0.6s ease, box-shadow 0.3s;
}
.card-image {
width: 100%;
height: 180px;
overflow: hidden;
border-radius: 32px;
margin-bottom: 1rem;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.card.reveal {
opacity: 1;
transform: translateY(0);
}
.card:hover {
transform: translateY(-8px) scale(1.01);
background: #ffffff;
box-shadow: 0 30px 40px -18px rgba(80, 50, 20, 0.25);
border-color: #e2cfb5;
}
.season-icon {
font-size: 1.8rem;
margin-bottom: 0.5rem;
}
.card h3 {
font-size: 1.8rem;
font-weight: 700;
font-family: 'Noto Serif SC', serif;
margin: 0.3rem 0 0.4rem;
letter-spacing: 2px;
}
.card-date {
font-size: 0.85rem;
color: #b2763e;
margin-bottom: 1rem;
border-left: 3px solid #e3be91;
padding-left: 0.6rem;
}
.card-desc {
font-size: 0.9rem;
line-height: 1.45;
color: #53412e;
}
.custom-tag {
margin-top: 1rem;
font-size: 0.75rem;
color: #9a7248;
font-weight: 500;
}
/* 非遗专题滚动区 — 类似官方展示模块 */
.heritage-section {
background: #f2ecdf;
border-radius: 64px;
padding: 3rem 2rem;
margin: 2rem 0 4rem;
box-shadow: inset 0 1px 4px rgba(0,0,0,0.02), 0 20px 30px -10px rgba(0,0,0,0.05);
}
.section-title {
text-align: center;
font-size: 2rem;
font-weight: 600;
font-family: 'Noto Serif SC', serif;
margin-bottom: 2rem;
}
.section-title i {
color: #c1945b;
margin-right: 10px;
}
.heritage-bar {
display: flex;
align-items: stretch;
gap: 0;
margin-top: 1.5rem;
overflow-x: auto;
overflow-y: hidden;
min-height: 420px;
padding-bottom: 0.35rem;
transition: transform 260ms ease;
scroll-behavior: smooth;
perspective: 1800px;
background: linear-gradient(90deg, rgba(254,245,232,0.96), rgba(248,236,209,0.98));
border-radius: 40px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65), 0 28px 60px rgba(0,0,0,0.12);
}
.heritage-bar::-webkit-scrollbar { height: 10px; }
.heritage-bar::-webkit-scrollbar-thumb { background: rgba(148, 110, 54, 0.35); border-radius: 999px; }
.heritage-section:hover .heritage-bar {
transform: scale(1.01);
}
.heritage-bar:hover .heritage-block:not(:hover) {
flex: 0.35 1 0;
opacity: 0.72;
transform: translateY(8px) rotateX(3deg) scale(0.96);
}
.heritage-bar:hover .heritage-block:nth-child(odd):not(:hover) {
transform: translateY(10px) rotateX(3deg) rotateY(4deg) scale(0.96);
}
.heritage-bar:hover .heritage-block:nth-child(even):not(:hover) {
transform: translateY(10px) rotateX(3deg) rotateY(-4deg) scale(0.96);
}
.heritage-block {
position: relative;
flex: 1 1 calc((100% - 0rem) / 11);
min-width: 6rem;
min-height: 420px;
display: flex;
flex-direction: column;
border-radius: 0;
overflow: hidden;
background: transparent;
transform-style: preserve-3d;
transition: flex 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 420ms ease;
transform-origin: center center;
cursor: pointer;
}
.heritage-block:first-child {
border-top-left-radius: 40px;
border-bottom-left-radius: 40px;
}
.heritage-block:last-child {
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
}
.heritage-block:hover,
.heritage-block:focus-within {
flex: 6 1 0;
transform: translateY(-28px) rotateX(10deg) rotateY(2deg) scale(1.08);
box-shadow: 0 50px 140px rgba(0,0,0,0.34);
opacity: 1;
z-index: 3;
}
.heritage-block:hover::after {
content: '';
position: absolute;
inset: 0;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 18px 40px rgba(0,0,0,0.18);
pointer-events: none;
opacity: 1;
transition: opacity 260ms ease;
}
.heritage-block::before {
content: '';
position: absolute;
inset: 0;
background: rgba(255,255,255,0.045);
pointer-events: none;
}
.heritage-block .block-image {
min-height: 260px;
background-size: cover;
background-position: center;
transition: transform 260ms ease;
}
.heritage-block:hover .block-image {
transform: scale(1.08) translateY(-6px);
}
.heritage-block .block-caption {
padding: 1.4rem 1.2rem 1.2rem;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.6rem;
background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,241,228,0.92));
border-top: 1px solid rgba(255,255,255,0.45);
}
.heritage-block h4 {
margin: 0;
font-size: 1.18rem;
color: #3f2b1a;
line-height: 1.2;
}
.heritage-block p {
margin: 0;
color: #6b5134;
font-size: 0.92rem;
line-height: 1.55;
max-height: 5rem;
overflow: hidden;
text-overflow: ellipsis;
}
.heritage-block .block-extra {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 1rem 1rem 1.2rem;
background: rgba(16,16,16,0.75);
color: #fff;
transform: translateY(100%);
opacity: 0;
transition: transform 260ms ease, opacity 260ms ease;
backdrop-filter: blur(10px);
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.heritage-block:hover .block-extra,
.heritage-block:focus-within .block-extra {
transform: translateY(0);
opacity: 1;
}
.heritage-block .block-extra h5 {
margin: 0;
font-size: 1rem;
color: #ffe9b7;
letter-spacing: 0.04em;
}
.heritage-block .block-extra p {
margin: 0;
font-size: 0.88rem;
line-height: 1.6;
color: rgba(255,255,255,0.9);
}
.heritage-block .detail-image {
min-height: 120px;
background-size: cover;
background-position: center;
border-radius: 18px;
opacity: 0.95;
}
@media (max-width: 1300px) {
.heritage-bar {
flex-wrap: wrap;
}
.heritage-block {
min-width: calc(33.333% - 0.75rem);
}
.heritage-block:hover,
.heritage-block:focus-within {
flex: 1 1 calc(33.333% - 0.75rem);
}
}
@media (max-width: 900px) {
.heritage-block {
min-width: calc(50% - 0.75rem);
}
.heritage-block:hover,
.heritage-block:focus-within {
flex: 1 1 calc(50% - 0.75rem);
}
}
@media (max-width: 640px) {
.heritage-bar {
flex-wrap: nowrap;
overflow-x: auto;
min-height: auto;
}
.heritage-block {
min-width: 80vw;
flex: 0 0 80vw;
}
.heritage-block:hover,
.heritage-block:focus-within {
flex: 0 0 90vw;
}
}
@media (max-width: 720px) {
.heritage-bar {
flex-direction: column;
}
.heritage-block {
min-width: 100%;
flex: 1 1 auto;
}
.heritage-block:hover,
.heritage-block:focus-within {
transform: none;
}
}
/* 节气韵味花信风格 */
.flower-news {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0.5rem;
background: #fffaf0;
border-radius: 48px;
padding: 1.5rem;
margin: 2rem 0;
font-size: 0.9rem;
line-height: 1.6;
}
.flower-item {
text-align: center;
padding: 0.7rem 0.5rem;
border-radius: 16px;
background: rgba(255, 248, 240, 0.6);
transition: transform 0.2s ease, background 0.2s ease;
}
.flower-item:hover {
background: rgba(255, 255, 245, 1);
transform: translateY(-2px);
}
.flower-item span {
display: block;
font-size: 1.5rem;
margin-bottom: 0.3rem;
}
/* 三候列表响应式适配 */
@media (max-width: 1200px) {
.flower-news { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
.flower-news { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
.flower-news { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
.flower-news { grid-template-columns: 1fr; }
}
/* 模态框高级 */
.modal {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(20, 12, 5, 0.85);
backdrop-filter: blur(10px);
z-index: 1000;
justify-content: center;
align-items: center;
}
.modal-card {
background: #fffcf2;
max-width: 550px;
width: 90%;
border-radius: 64px;
padding: 2rem;
position: relative;
box-shadow: 0 30px 45px rgba(0,0,0,0.3);
animation: modalPop 0.35s;
}
@keyframes modalPop {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
.close-modal {
position: absolute;
top: 20px; right: 28px;
font-size: 2rem;
cursor: pointer;
}
/* ===== 节气钟样式 — 中国风·以节气钟.jpg为背景 ===== */
.solar-clock-section {
position: relative;
max-width: 760px;
width: 100%;
margin: 0 auto 2.5rem;
border-radius: 56px 24px 56px 24px;
overflow: hidden;
box-shadow: 0 30px 60px -16px rgba(60, 45, 30, 0.45),
0 0 0 1px rgba(200, 178, 148, 0.5);
font-family: 'Noto Serif SC', '华文楷体', 'KaiTi', 'SimSun', serif;
}
/* 背景图 — 节气钟.jpg 全幅铺满 */
.solar-clock-section .clock-bg-layer {
position: absolute;
inset: 0;
background-image: url('../image/节气钟.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: brightness(0.62) saturate(1.06) contrast(1.02);
z-index: 0;
transition: filter 0.6s ease;
}
/* 半透明绢帛遮罩 — 仿古宣纸/绡纱质感 */
.solar-clock-section .clock-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(245, 235, 218, 0.50) 0%,
rgba(210, 192, 165, 0.30) 50%,
rgba(240, 226, 204, 0.45) 100%);
z-index: 1;
pointer-events: none;
}
/* 内容层 */
.solar-clock-section .clock-content {
position: relative;
z-index: 2;
padding: 2.6rem 2.2rem 2.8rem;
color: #f5efe2;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
/* 仿古窗棂/冰裂纹装饰边框 */
.solar-clock-section .clock-content::before {
content: '';
position: absolute;
pointer-events: none;
top: 20px; left: 20px; right: 20px; bottom: 20px;
border-radius: 48px 16px 48px 16px;
border: 1px solid rgba(232, 220, 200, 0.22);
box-shadow: inset 0 0 50px rgba(200, 180, 150, 0.05);
}
.solar-clock-section .header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
padding-bottom: 0.6rem;
margin-bottom: 2rem;
border-bottom: 1px solid rgba(232, 220, 200, 0.32);
}
.solar-clock-section .header h1 {
font-size: 1.8rem;
font-weight: 500;
letter-spacing: 8px;
color: #f5efe2;
text-shadow: 0 2px 10px rgba(0,0,0,0.6);
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0;
}
.solar-clock-section .header h1 small {
font-size: 0.85rem;
font-weight: 300;
letter-spacing: 3px;
color: #dacdb6;
margin-left: 0.6rem;
text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.solar-clock-section .chinese-now {
font-size: 1rem;
background: rgba(200, 180, 155, 0.30);
backdrop-filter: blur(6px);
padding: 0.3rem 1.2rem;
border-radius: 30px;
color: #f5efe2;
border: 1px solid rgba(232, 220, 200, 0.25);
box-shadow: 0 0 20px rgba(0,0,0,0.15);
white-space: nowrap;
letter-spacing: 2px;
}
.clock-display {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 2rem;
}
.clock-display .time-ring {
position: relative;
background: rgba(30, 25, 18, 0.28);
backdrop-filter: blur(12px);
border-radius: 50%;
padding: 0.5rem 2.6rem;
border: 2px solid rgba(232, 220, 200, 0.25);
box-shadow: 0 0 50px rgba(0,0,0,0.22),
inset 0 0 30px rgba(200, 180, 150, 0.04);
margin-bottom: 0.6rem;
}
.clock-display .time-ring::after {
content: '⌾';
position: absolute;
right: -8px; top: 50%;
transform: translateY(-50%);
font-size: 1.4rem;
color: rgba(232, 213, 182, 0.20);
text-shadow: 0 0 20px rgba(200, 180, 140, 0.1);
}
.clock-display .digital-clock {
font-size: 3.8rem;
font-weight: 400;
letter-spacing: 10px;
color: #f5efe2;
font-family: 'Noto Serif SC', 'Courier New', monospace;
text-shadow: 0 2px 20px rgba(0,0,0,0.7);
line-height: 1.3;
}
.clock-display .date-tag {
display: flex;
gap: 0.8rem;
font-size: 1.05rem;
color: #ddd0bc;
background: rgba(40, 32, 24, 0.20);
backdrop-filter: blur(6px);
padding: 0.3rem 1.8rem;
border-radius: 40px;
border: 1px solid rgba(232, 220, 200, 0.12);
letter-spacing: 2px;
text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.solar-term-card {
background: rgba(40, 32, 24, 0.18);
backdrop-filter: blur(12px);
border-radius: 80px 16px 80px 16px;
padding: 1.5rem 1.8rem;
margin: 1.8rem 0 1.4rem;
border: 1px solid rgba(232, 220, 200, 0.15);
box-shadow: 0 8px 32px rgba(0,0,0,0.12),
inset 0 1px 0 rgba(255,245,225,0.06);
}
.solar-term-card .term-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.8rem 0.4rem;
}
.solar-term-card .term-label {
font-size: 0.85rem;
color: #d4c8b2;
letter-spacing: 4px;
font-weight: 300;
text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.solar-term-card .term-name {
font-size: 2.6rem;
font-weight: 500;
color: #f5efe2;
letter-spacing: 12px;
line-height: 1.2;
text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
.solar-term-card .term-name small {
font-size: 1rem;
letter-spacing: 3px;
color: #cfc1a8;
margin-left: 0.6rem;
font-weight: 300;
text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
.solar-term-card .countdown-box {
background: rgba(30, 25, 18, 0.22);
backdrop-filter: blur(8px);
padding: 0.5rem 1.4rem;
border-radius: 60px;
border: 1px solid rgba(232, 220, 200, 0.12);
min-width: 140px;
text-align: center;
box-shadow: inset 0 0 20px rgba(200, 180, 150, 0.02);
}
.solar-term-card .countdown-number {
font-size: 1.7rem;
font-weight: 400;
letter-spacing: 2px;
color: #f5efe2;
font-family: 'Noto Serif SC', monospace;
text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}
.solar-term-card .countdown-label {
font-size: 0.7rem;
color: #cdc0a8;
display: block;
margin-top: -2px;
letter-spacing: 2px;
text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.sub-term-hint {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
color: #ddd0bc;
font-size: 0.92rem;
background: rgba(40, 32, 24, 0.12);
backdrop-filter: blur(6px);
padding: 0.5rem 0.8rem;
border-radius: 48px;
border: 1px dashed rgba(232, 220, 200, 0.12);
margin-top: 0.2rem;
text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
.sub-term-hint span {
background: rgba(200, 180, 155, 0.08);
backdrop-filter: blur(4px);
padding: 0.15rem 1rem;
border-radius: 30px;
border: 1px solid rgba(232, 220, 200, 0.06);
}
/* ===== 全屏屏保按钮 — 中国风水墨交互 ===== */
.fullscreen-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
background: rgba(200, 180, 155, 0.20);
backdrop-filter: blur(8px);
padding: 0.45rem 1.1rem 0.45rem 0.9rem;
border-radius: 30px;
color: #e8ddcd;
border: 1px solid rgba(232, 220, 200, 0.18);
cursor: pointer;
font-size: 0.95rem;
letter-spacing: 2px;
font-family: 'Noto Serif SC', '华文楷体', serif;
transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 0 0 rgba(200, 180, 150, 0);
margin-left: 0.5rem;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.fullscreen-btn::before {
content: '';
position: absolute;
inset: -40%;
width: 180%;
height: 180%;
background: radial-gradient(circle at center, rgba(255,235,200,0.12) 0%, transparent 70%);
opacity: 0;
transform: scale(0.5);
transition: opacity 0.5s ease, transform 0.6s ease;
pointer-events: none;
}
.fullscreen-btn:hover {
background: rgba(220, 200, 175, 0.30);
border-color: rgba(232, 220, 200, 0.40);
transform: translateY(-2px) scale(1.04);
box-shadow: 0 8px 28px rgba(0,0,0,0.25), 0 0 30px rgba(200, 180, 150, 0.08);
color: #f5efe2;
}
.fullscreen-btn:hover::before {
opacity: 1;
transform: scale(1);
}
.fullscreen-btn:active {
transform: translateY(0) scale(0.97);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.fullscreen-btn .btn-icon {
font-size: 1.1rem;
line-height: 1;
display: inline-block;
transition: transform 0.4s ease;
}
.fullscreen-btn:hover .btn-icon {
transform: rotate(10deg) scale(1.15);
}
/* ===== 全屏屏保层 ===== */
.screensaver-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: #000;
background-image: url('../image/节气钟全屏.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: none;
opacity: 0;
transition: opacity 0.8s ease;
font-family: 'Noto Serif SC', '华文楷体', 'KaiTi', 'SimSun', serif;
color: #f0e8d8;
text-shadow: 0 2px 20px rgba(0,0,0,0.6);
cursor: pointer;
user-select: none;
-webkit-user-drag: none;
-webkit-touch-callout: none;
}
.screensaver-overlay.active {
display: block;
opacity: 1;
}
/* 半透明遮罩增强文字可读性 */
.screensaver-overlay::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0,0,0,0.25);
pointer-events: none;
z-index: 0;
}
.screensaver-overlay .ss-content {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
padding: 3rem 3.5rem;
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-rows: auto 1fr auto;
gap: 1rem;
}
/* 左上角 — 实时时钟（放大1.5倍）+ 日期信息 */
.ss-left {
grid-column: 1;
grid-row: 1;
text-align: left;
align-self: start;
line-height: 1.4;
}
.ss-left .ss-clock-hm {
font-size: 6.3rem;
font-weight: 400;
letter-spacing: 10px;
color: #ffffff;
text-shadow: 0 3px 30px rgba(0,0,0,0.8), 0 0 60px rgba(0,0,0,0.3);
font-family: 'Noto Serif SC', 'Courier New', monospace;
line-height: 1.1;
}
.ss-left .ss-clock-ss {
font-size: 1.8rem;
font-weight: 300;
letter-spacing: 6px;
color: rgba(255,255,255,0.5);
text-shadow: 0 2px 16px rgba(0,0,0,0.5);
margin-left: 0.3rem;
vertical-align: super;
}
.ss-left .ss-date-greg {
font-size: 2rem;
font-weight: 400;
letter-spacing: 4px;
color: #ffffff;
text-shadow: 0 2px 24px rgba(0,0,0,0.6);
margin-top: 0.5rem;
}
.ss-left .ss-date-week {
font-size: 1.5rem;
color: #f5e8d0;
letter-spacing: 4px;
margin-top: 0.1rem;
text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
.ss-left .ss-date-lunar {
font-size: 0.85rem;
color: #d4c4a8;
letter-spacing: 2px;
margin-top: 0.15rem;
border-left: 1px solid rgba(255,235,200,0.2);
padding-left: 0.6rem;
text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
/* 中上方 — 当前节气 + 倒计时 */
.ss-center-top {
grid-column: 2;
grid-row: 1;
text-align: center;
align-self: start;
justify-self: center;
background: rgba(0,0,0,0.25);
backdrop-filter: blur(14px);
border-radius: 48px 16px 48px 16px;
padding: 1.4rem 2.2rem;
border: 1px solid rgba(255,235,200,0.12);
box-shadow: 0 0 80px rgba(0,0,0,0.2);
line-height: 1.6;
}
.ss-center-top .ss-center-term-name {
font-size: 3.6rem;
font-weight: 500;
letter-spacing: 16px;
color: #ffffff;
text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}
.ss-center-top .ss-center-countdown {
font-size: 1.3rem;
color: #f0dcbe;
letter-spacing: 4px;
margin-top: 0.2rem;
text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.ss-center-top .ss-center-countdown .cd-next-term {
color: #f5e8d0;
}
.ss-center-top .ss-center-lunar-small {
font-size: 0.8rem;
color: #bcaa8c;
letter-spacing: 3px;
margin-top: 0.35rem;
text-shadow: 0 1px 6px rgba(0,0,0,0.3);
}
/* 右上角 — 十二时辰 + "当前时辰"标签 */
.ss-right {
grid-column: 3;
grid-row: 1;
text-align: right;
align-self: start;
line-height: 1.4;
}
.ss-right .ss-shichen-label {
font-size: 0.7rem;
color: #bcaa8c;
letter-spacing: 4px;
margin-bottom: 0.1rem;
text-shadow: 0 1px 8px rgba(0,0,0,0.3);
}
.ss-right .ss-shichen-name {
font-size: 3.6rem;
font-weight: 500;
letter-spacing: 12px;
color: #ffffff;
text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}
.ss-right .ss-shichen-period {
font-size: 1.2rem;
color: #f5e8d0;
letter-spacing: 3px;
margin-top: 0.1rem;
text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.ss-right .ss-shichen-desc {
font-size: 1.1rem;
color: #f0dcbe;
letter-spacing: 4px;
margin-top: 0.3rem;
border-right: 2px solid rgba(255,235,200,0.25);
padding-right: 1rem;
text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
/* 中央 — 节气名淡入（装饰性，保留但略小） */
.ss-center-middle {
grid-column: 1 / -1;
grid-row: 2;
text-align: center;
align-self: center;
justify-self: center;
font-size: 7rem;
font-weight: 200;
letter-spacing: 40px;
color: rgba(255,255,255,0.08);
text-shadow: 0 0 80px rgba(0,0,0,0.1);
animation: ssTermFade 5s ease-in-out infinite alternate;
pointer-events: none;
}
@keyframes ssTermFade {
0% { opacity: 0.08; transform: scale(0.97); }
100% { opacity: 0.25; transform: scale(1.03); }
}
/* 底部退出提示 */
.ss-bottom {
grid-column: 1 / -1;
grid-row: 3;
text-align: center;
align-self: end;
justify-self: center;
font-size: 0.9rem;
color: rgba(220, 208, 188, 0.25);
letter-spacing: 6px;
padding-bottom: 1rem;
transition: color 0.4s ease;
}
.screensaver-overlay:hover .ss-bottom {
color: rgba(220, 208, 188, 0.6);
}
.ss-bottom .ss-exit-hint {
display: inline-block;
padding: 0.4rem 1.4rem;
border-radius: 30px;
border: 1px solid rgba(255,235,200,0.06);
background: rgba(0,0,0,0.15);
backdrop-filter: blur(6px);
transition: all 0.3s ease;
}
.screensaver-overlay:hover .ss-exit-hint {
border-color: rgba(255,235,200,0.12);
background: rgba(0,0,0,0.2);
}
/* 屏保响应式 */
@media (max-width: 820px) {
.screensaver-overlay .ss-content {
padding: 2rem 1.5rem;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto 1fr auto;
}
.ss-left { grid-column: 1; grid-row: 1; }
.ss-right { grid-column: 2; grid-row: 1; text-align: right; }
.ss-center-top { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
.ss-center-top .ss-center-term-name { font-size: 2.6rem; }
.ss-center-middle { grid-row: 3; font-size: 4rem; letter-spacing: 24px; }
.ss-bottom { grid-row: 4; }
.ss-right .ss-shichen-name { font-size: 2.6rem; }
.ss-left .ss-clock-hm { font-size: 4.8rem; }
}
@media (max-width: 480px) {
.ss-left .ss-clock-hm { font-size: 3.6rem; letter-spacing: 6px; }
.ss-left .ss-clock-ss { font-size: 1.2rem; }
.ss-left .ss-date-greg { font-size: 1.3rem; }
.ss-left .ss-date-week { font-size: 1.1rem; }
.ss-left .ss-date-lunar { font-size: 0.75rem; }
.ss-right .ss-shichen-name { font-size: 2rem; letter-spacing: 6px; }
.ss-right .ss-shichen-period { font-size: 0.95rem; }
.ss-right .ss-shichen-desc { font-size: 0.9rem; }
.ss-center-top { padding: 0.8rem 1.2rem; }
.ss-center-top .ss-center-term-name { font-size: 2rem; letter-spacing: 8px; }
.ss-center-top .ss-center-countdown { font-size: 1rem; }
.ss-center-middle { font-size: 2.4rem; letter-spacing: 14px; }
}
footer {
text-align: center;
padding: 3rem 2rem 2rem;
color: #a28057;
border-top: 1px solid #e3d3c0;
margin-top: 3rem;
position: relative;
}
.back-to-top {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
margin: 0 auto 1.2rem;
padding: 0.85rem 1.4rem;
border-radius: 999px;
background: rgba(255, 248, 235, 0.96);
border: 1px solid rgba(162, 128, 87, 0.24);
color: #6b4d2c;
font-weight: 700;
letter-spacing: 0.02em;
box-shadow: 0 18px 40px rgba(0,0,0,0.08);
cursor: pointer;
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease, background 280ms ease;
}
.back-to-top:hover {
transform: translateY(-4px) scale(1.02);
background: rgba(255, 255, 245, 1);
box-shadow: 0 24px 50px rgba(0,0,0,0.12);
}
.back-to-top span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #f9d48e 0%, #dba85e 45%, #8d5b2d 100%);
color: #fff;
font-size: 1rem;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(40px);}
to { opacity: 1; transform: translateY(0);}
}
@keyframes bounce {
0%,100%{ transform: translateX(-50%) translateY(0);}
50%{ transform: translateX(-50%) translateY(12px);}
}
@media (max-width: 780px) {
.hero-content h1 { font-size: 2.8rem; letter-spacing: 6px; }
.container { padding: 0 1rem; }
.grid { gap: 1.2rem; }
.season-row { grid-template-columns: 1fr; }
.season-card { min-height: 200px; }
}
/* =====================================================================
节气钟 · 侧边抽屉（覆盖原区块的流式布局，改为右侧悬浮面板）
===================================================================== */
.clock-fab {
position: fixed;
right: 0;
top: 44%;
z-index: 1390;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
padding: 1rem 0.55rem 1.1rem;
border: 1px solid rgba(200, 178, 148, 0.55);
border-right: none;
border-radius: 18px 0 0 18px;
background: linear-gradient(160deg, #f7f2e9 0%, #efe4d2 100%);
color: #6b4b2a;
font-family: 'Noto Serif SC', '华文楷体', 'KaiTi', 'SimSun', serif;
box-shadow: -6px 8px 24px -8px rgba(70, 52, 34, 0.45);
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.clock-fab:hover { transform: translateX(-3px); box-shadow: -10px 10px 28px -8px rgba(70, 52, 34, 0.55); }
.clock-fab:focus-visible { outline: 3px solid #c1945b; outline-offset: 3px; }
.clock-fab-icon { font-size: 1.15rem; line-height: 1; }
.clock-fab-text {
writing-mode: vertical-rl;
letter-spacing: 3px;
font-size: 0.92rem;
}
.clock-fab[aria-expanded="true"] { transform: translateX(102%); opacity: 0; pointer-events: none; }
.clock-drawer-mask {
position: fixed;
inset: 0;
z-index: 1380;
background: rgba(28, 20, 12, 0.42);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
transition: opacity 0.32s ease;
}
.clock-drawer-mask.show { opacity: 1; }
/* 抽屉本体：覆盖 .solar-clock-section 的流式样式 */
.solar-clock-section.clock-drawer {
position: fixed;
top: 0;
right: 0;
left: auto;
width: min(460px, 94vw);
max-width: none;
height: 100vh;
height: 100dvh;
margin: 0;
border-radius: 0;
z-index: 1400;
overflow-y: auto;
overflow-x: hidden;
transform: translateX(102%);
transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: -24px 0 60px -18px rgba(40, 28, 16, 0.55);
-webkit-overflow-scrolling: touch;
}
.solar-clock-section.clock-drawer.open { transform: translateX(0); }
/* 抽屉模式下加深绢帛遮罩，保证浅色文字在明亮背景图上仍然可读 */
.solar-clock-section.clock-drawer .clock-overlay {
background: linear-gradient(165deg,
rgba(30, 22, 14, 0.58) 0%,
rgba(30, 22, 14, 0.34) 48%,
rgba(30, 22, 14, 0.54) 100%);
}
.solar-clock-section.clock-drawer .clock-content { padding: 3.2rem 1.6rem 2.2rem; }
.solar-clock-section.clock-drawer .clock-content::before { border-radius: 20px; inset: 12px; }
.clock-close {
position: absolute;
top: 0.9rem;
right: 0.9rem;
z-index: 5;
width: 2.2rem;
height: 2.2rem;
display: grid;
place-items: center;
border: 1px solid rgba(232, 220, 200, 0.55);
border-radius: 50%;
background: rgba(40, 30, 20, 0.35);
color: #f5efe2;
font-size: 1rem;
line-height: 1;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.clock-close:hover { background: rgba(40, 30, 20, 0.6); transform: rotate(90deg); }
.clock-close:focus-visible { outline: 3px solid #c1945b; outline-offset: 2px; }
@media (max-width: 560px) {
.solar-clock-section.clock-drawer { width: 100vw; }
.clock-fab { top: 38%; padding: 0.85rem 0.45rem 0.95rem; }
/* 手机端：让节气信息与倒计时纵向排布，避免横向溢出被裁切 */
.solar-clock-section.clock-drawer .clock-content { padding: 3rem 1rem 2rem; }
.solar-clock-section.clock-drawer .term-row {
flex-direction: column;
align-items: flex-start;
flex-wrap: wrap;
gap: 0.8rem;
}
.solar-clock-section.clock-drawer .countdown-box {
width: 100%;
justify-content: center;
box-sizing: border-box;
}
.solar-clock-section.clock-drawer .digital-clock { font-size: 2.1rem; letter-spacing: 2px; }
.solar-clock-section.clock-drawer .sub-term-hint { flex-wrap: wrap; row-gap: 0.4rem; }
}
/* 尊重「减少动态效果」偏好 */
@media (prefers-reduced-motion: reduce) {
.solar-clock-section.clock-drawer,
.clock-drawer-mask,
.clock-fab,
.clock-close { transition: none; }
}