/* =========================================================
端午 · 仲夏端阳
Style: 宋韵雅集 × 水墨意境 × 朱砂印章
========================================================= */
:root {
--cinnabar: #C1272D;
--cinnabar-deep: #7A1B20;
--gold: #C9A55C;
--gold-light: #E8C77A;
--ink: #1A1815;
--ink-soft: #3A322A;
--bamboo: #4A6741;
--bamboo-deep: #2F4128;
--rice: #F5EBD8;
--rice-warm: #EDE0C5;
--mist: #E8DCC4;
--white-jade: #F9F5EC;
--jade: #6B8E5A;
--font-display: "Ma Shan Zheng", "ZCOOL XiaoWei", "Noto Serif SC", serif;
--font-serif: "Noto Serif SC", "Songti SC", "STSong", serif;
--font-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
--font-en: "Cormorant Garamond", "Times New Roman", serif;
}
/* ---------- 基础 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
color: var(--ink);
background: var(--rice);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
line-height: 1.6;
}
/* 宣纸纹理 */
body::before {
content: "";
position: fixed; inset: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(193, 39, 45, 0.025), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(201, 165, 92, 0.04), transparent 50%),
radial-gradient(circle at 50% 50%, rgba(26, 24, 21, 0.015), transparent 60%);
pointer-events: none;
z-index: 0;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input { font: inherit; }
/* ---------- 卷轴开篇 ---------- */
.scroll-curtain {
position: fixed; inset: 0; z-index: 1000;
pointer-events: none;
display: flex; flex-direction: column;
}
.scroll-curtain .curtain-top,
.scroll-curtain .curtain-bottom {
flex: 1;
background: linear-gradient(180deg, var(--ink) 0%, var(--ink-soft) 100%);
position: relative;
transition: transform 1.4s cubic-bezier(.77,0,.18,1);
}
.scroll-curtain .curtain-bottom {
background: linear-gradient(0deg, var(--ink) 0%, var(--ink-soft) 100%);
}
.scroll-curtain .curtain-top::after,
.scroll-curtain .curtain-bottom::after {
content: "";
position: absolute; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.scroll-curtain .curtain-top::after { bottom: 0; }
.scroll-curtain .curtain-bottom::after { top: 0; }
.scroll-curtain.is-open .curtain-top { transform: translateY(-100%); }
.scroll-curtain.is-open .curtain-bottom { transform: translateY(100%); }
/* ---------- 飘落物 ---------- */
.floaters {
position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden;
}
.floater {
position: absolute; top: -30px; opacity: 0;
width: 14px; height: 14px;
background: var(--cinnabar);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
animation: fall linear infinite;
filter: drop-shadow(0 2px 4px rgba(122, 27, 32, 0.3));
}
.floater.leaf {
background: var(--bamboo);
clip-path: polygon(50% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%);
}
@keyframes fall {
0% { transform: translate3d(0, -30px, 0) rotate(0deg); opacity: 0; }
10% { opacity: 0.6; }
90% { opacity: 0.6; }
100% { transform: translate3d(40px, 110vh, 0) rotate(720deg); opacity: 0; }
}
/* ---------- 顶部信息条 ---------- */
.topbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 50;
padding: 18px 40px;
font-family: var(--font-serif);
font-size: 13px;
color: var(--rice);
background: linear-gradient(180deg, rgba(26,24,21,0.85) 0%, rgba(26,24,21,0) 100%);
backdrop-filter: blur(2px);
transition: background 0.4s;
}
.topbar-inner {
max-width: 1400px; margin: 0 auto;
display: flex; align-items: center; justify-content: space-between;
letter-spacing: 0.08em;
}
.topbar-brand {
font-family: var(--font-display);
font-size: 18px;
color: var(--gold);
}
.topbar-nav {
display: flex; gap: 36px;
}
.topbar-nav a {
color: var(--rice);
text-decoration: none;
position: relative;
padding-bottom: 4px;
transition: color 0.3s;
}
.topbar-nav a::after {
content: "";
position: absolute; bottom: 0; left: 50%;
width: 0; height: 1px; background: var(--gold);
transition: width 0.3s, left 0.3s;
}
.topbar-nav a:hover { color: var(--gold); }
.topbar-nav a:hover::after { width: 100%; left: 0; }
.topbar-nav a.is-active { color: var(--gold); }
.topbar-nav a.is-active::after { width: 100%; left: 0; }
.topbar-year {
font-family: var(--font-en);
font-style: italic;
color: var(--gold-light);
}
/* ---------- 首屏 ---------- */
.hero {
position: relative;
min-height: 100vh;
background:
radial-gradient(ellipse at 20% 80%, rgba(122, 27, 32, 0.4) 0%, transparent 50%),
radial-gradient(ellipse at 80% 20%, rgba(201, 165, 92, 0.15) 0%, transparent 50%),
linear-gradient(180deg, #0E0D0B 0%, #1A1815 50%, #2A1F1A 100%);
color: var(--rice);
overflow: hidden;
padding: 100px 40px 80px;
display: flex; align-items: center;
}
.hero-mist {
position: absolute; inset: 0;
background-image:
radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.04), transparent 60%),
radial-gradient(ellipse at 70% 70%, rgba(201,165,92,0.06), transparent 60%);
pointer-events: none;
}
.hero-grid {
max-width: 1400px;
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
position: relative; z-index: 2;
}
/* 左侧 */
.hero-left { position: relative; }
.hero-eyebrow {
display: inline-flex; align-items: center; gap: 12px;
font-family: var(--font-en);
font-size: 13px;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 32px;
opacity: 0;
animation: fadeUp 1s 0.4s forwards;
}
.hero-eyebrow .dot {
width: 6px; height: 6px; background: var(--cinnabar);
border-radius: 50%;
box-shadow: 0 0 12px var(--cinnabar);
}
.hero-title {
font-family: var(--font-display);
font-size: clamp(180px, 22vw, 320px);
line-height: 0.85;
letter-spacing: -0.04em;
color: var(--rice);
position: relative;
margin-bottom: 32px;
}
.hero-title .char {
display: inline-block;
opacity: 0;
transform: translateY(80px) rotate(8deg);
animation: charIn 1.2s cubic-bezier(.2,.7,.2,1) forwards;
position: relative;
}
.hero-title .char-1 { animation-delay: 0.6s; color: var(--rice); }
.hero-title .char-2 {
animation-delay: 0.9s;
color: transparent;
background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 50%, var(--cinnabar) 100%);
-webkit-background-clip: text; background-clip: text;
}
.hero-title .char-2::before {
content: "午";
position: absolute; inset: 0;
color: var(--gold);
-webkit-text-stroke: 1px var(--gold);
z-index: -1;
filter: blur(2px);
opacity: 0.3;
}
@keyframes charIn {
to { opacity: 1; transform: translateY(0) rotate(0); }
}
.hero-sub {
font-family: var(--font-serif);
font-size: 20px;
line-height: 1.9;
color: var(--rice);
margin-bottom: 48px;
opacity: 0;
animation: fadeUp 1s 1.4s forwards;
}
.hero-sub .cite {
font-size: 14px;
color: var(--gold);
font-style: italic;
margin-top: 6px;
font-family: var(--font-en);
letter-spacing: 0.1em;
}
.hero-meta {
display: flex; gap: 48px;
padding: 24px 0;
border-top: 1px solid rgba(201, 165, 92, 0.2);
border-bottom: 1px solid rgba(201, 165, 92, 0.2);
opacity: 0;
animation: fadeUp 1s 1.6s forwards;
}
.meta-item { display: flex; flex-direction: column; gap: 6px; }
.meta-label {
font-family: var(--font-en);
font-style: italic;
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--gold);
opacity: 0.7;
}
.meta-value {
font-family: var(--font-serif);
font-size: 16px;
color: var(--rice);
font-weight: 500;
}
.hero-stamp {
position: absolute;
top: -20px; right: -40px;
width: 100px; height: 100px;
color: var(--cinnabar);
transform: rotate(8deg);
opacity: 0;
animation: stampIn 1.2s 1.2s cubic-bezier(.2,1.2,.4,1) forwards;
filter: drop-shadow(0 4px 12px rgba(193, 39, 45, 0.4));
}
@keyframes stampIn {
0% { opacity: 0; transform: rotate(28deg) scale(2); }
60% { opacity: 1; transform: rotate(4deg) scale(0.92); }
80% { transform: rotate(10deg) scale(1.02); }
100% { opacity: 1; transform: rotate(8deg) scale(1); }
}
/* 右侧 — 龙舟 */
.hero-right {
position: relative;
display: flex; flex-direction: column;
align-items: center;
gap: 32px;
}
.boat-stage {
position: relative;
width: 100%;
height: 360px;
display: flex; flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
}
.boat-mountains {
position: absolute; bottom: 60px; left: 0; right: 0;
width: 110%; height: 200px;
color: var(--bamboo);
z-index: 1;
}
.boat-wrap {
position: relative; z-index: 3;
width: 100%;
opacity: 0;
animation: fadeUp 1.4s 0.8s forwards, boatFloat 6s ease-in-out infinite;
}
.dragonboat { width: 100%; height: auto; }
/* 桨手摆动 */
.rower .oar {
transform-origin: 240px 122px;
animation: oarRow 0.8s ease-in-out infinite;
animation-delay: var(--delay, 0s);
}
.rower:nth-child(1) .oar { transform-origin: 240px 122px; }
@keyframes oarRow {
0%, 100% { transform: rotate(-12deg); }
50% { transform: rotate(12deg); }
}
@keyframes boatFloat {
0%, 100% { transform: translateY(0) rotate(-0.5deg); }
50% { transform: translateY(-8px) rotate(0.5deg); }
}
/* 水波纹 */
.water-ripples {
position: absolute; bottom: 40px; left: 50%;
transform: translateX(-50%);
width: 80%; height: 60px;
display: flex; align-items: center; justify-content: center;
gap: 16px;
z-index: 2;
}
.water-ripples span {
display: block;
width: 60px; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
position: relative;
animation: ripple 3s ease-in-out infinite;
}
.water-ripples span:nth-child(2) { animation-delay: 0.5s; width: 80px; }
.water-ripples span:nth-child(3) { animation-delay: 1s; width: 100px; }
.water-ripples span:nth-child(4) { animation-delay: 1.5s; width: 70px; }
.water-ripples span:nth-child(5) { animation-delay: 2s; width: 50px; }
@keyframes ripple {
0%, 100% { transform: translateX(0) scaleX(1); opacity: 0.3; }
50% { transform: translateX(20px) scaleX(1.2); opacity: 0.8; }
}
/* 旗帜 */
.hero-flags {
position: absolute; top: 0; left: 50%;
transform: translateX(-50%);
display: flex; gap: 8px;
z-index: 4;
}
.flag {
display: block;
width: 2px; height: 60px;
background: var(--ink-soft);
position: relative;
transform-origin: bottom center;
}
.flag::after {
content: "";
position: absolute; top: 0; left: 2px;
width: 24px; height: 18px;
background: var(--cinnabar);
clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%);
animation: flagWave 2s ease-in-out infinite;
}
.flag-1::after { animation-delay: 0s; }
.flag-2::after { animation-delay: 0.3s; background: var(--gold); }
.flag-3::after { animation-delay: 0.6s; background: var(--cinnabar); }
.flag-2 { height: 50px; }
.flag-3 { height: 70px; }
@keyframes flagWave {
0%, 100% { transform: skewY(-3deg) scaleX(1); }
50% { transform: skewY(3deg) scaleX(0.92); }
}
.hero-caption {
display: flex; align-items: center; gap: 16px;
font-family: var(--font-en);
font-style: italic;
font-size: 14px;
color: var(--gold);
letter-spacing: 0.2em;
opacity: 0;
animation: fadeUp 1s 2s forwards;
}
.caption-line { width: 40px; height: 1px; background: var(--gold); }
.caption-num { color: var(--rice); opacity: 0.5; }
/* 滚动提示 */
.scroll-hint {
position: absolute;
bottom: 32px; left: 50%;
transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 12px;
color: var(--gold);
font-family: var(--font-en);
font-style: italic;
font-size: 12px;
letter-spacing: 0.3em;
text-transform: uppercase;
text-decoration: none;
z-index: 3;
animation: hintBob 2s ease-in-out infinite;
}
.hint-line {
width: 1px; height: 40px;
background: linear-gradient(180deg, var(--gold), transparent);
}
@keyframes hintBob {
0%, 100% { transform: translate(-50%, 0); }
50% { transform: translate(-50%, 8px); }
}
@keyframes fadeUp {
to { opacity: 1; transform: translateY(0); }
}
/* ---------- Section 通用 ---------- */
section { position: relative; z-index: 1; }
.section-head {
max-width: 1400px; margin: 0 auto;
padding: 120px 40px 60px;
text-align: left;
}
.section-head-light .section-eyebrow,
.section-head-light .section-title .title-en { color: var(--gold); }
.section-head-light .section-lead { color: var(--rice-warm); }
.section-eyebrow {
font-family: var(--font-en);
font-style: italic;
font-size: 12px;
letter-spacing: 0.5em;
text-transform: uppercase;
color: var(--cinnabar);
margin-bottom: 20px;
}
.section-title {
font-family: var(--font-display);
font-size: clamp(72px, 9vw, 140px);
line-height: 1;
letter-spacing: 0.04em;
color: var(--ink);
display: flex; align-items: baseline;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.section-title .title-en {
font-family: var(--font-en);
font-style: italic;
font-weight: 500;
font-size: 24px;
color: var(--bamboo);
letter-spacing: 0.05em;
margin-left: 12px;
align-self: center;
}
.section-lead {
font-family: var(--font-serif);
font-size: 18px;
color: var(--ink-soft);
max-width: 600px;
line-height: 1.8;
}
/* ---------- 溯源 ---------- */
.origin {
background: var(--rice);
position: relative;
}
.origin::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 100px;
background: linear-gradient(180deg, rgba(245, 235, 216, 0) 0%, var(--rice) 100%);
pointer-events: none;
}
.origin-grid {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px 120px;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 80px;
align-items: start;
}
.origin-qu {
display: grid;
grid-template-columns: 200px 1fr;
gap: 40px;
align-items: start;
}
.qu-portrait {
position: relative;
background: linear-gradient(180deg, var(--mist) 0%, var(--rice-warm) 100%);
padding: 20px;
border: 1px solid var(--gold);
position: relative;
}
.qu-portrait::before,
.qu-portrait::after {
content: ""; position: absolute;
width: 12px; height: 12px;
border: 1px solid var(--cinnabar);
}
.qu-portrait::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.qu-portrait::after { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }
.qu-portrait svg { width: 100%; height: auto; }
.qu-tag {
font-family: var(--font-en);
font-style: italic;
color: var(--cinnabar);
font-size: 13px;
letter-spacing: 0.3em;
margin-bottom: 12px;
}
.qu-name {
font-family: var(--font-display);
font-size: 64px;
line-height: 1;
color: var(--ink);
margin-bottom: 8px;
}
.qu-line {
font-family: var(--font-serif);
font-size: 14px;
color: var(--ink-soft);
margin-bottom: 24px;
font-style: italic;
}
.qu-text {
font-family: var(--font-serif);
font-size: 16px;
line-height: 2;
color: var(--ink-soft);
margin-bottom: 32px;
}
.qu-text em {
font-style: normal;
color: var(--cinnabar);
font-weight: 500;
}
.quote {
position: relative;
padding: 32px 32px 32px 60px;
background: var(--white-jade);
border-left: 3px solid var(--cinnabar);
}
.quote-mark {
position: absolute;
top: 8px; left: 16px;
font-family: var(--font-display);
font-size: 48px;
line-height: 1;
color: var(--cinnabar);
opacity: 0.4;
}
.quote-text {
display: block;
font-family: var(--font-serif);
font-size: 20px;
color: var(--ink);
line-height: 1.6;
margin-bottom: 8px;
}
.quote-cite {
font-family: var(--font-en);
font-style: italic;
font-size: 13px;
color: var(--cinnabar);
letter-spacing: 0.2em;
}
/* 时间线 */
.origin-timeline {
background: var(--white-jade);
padding: 40px 32px;
border: 1px solid var(--mist);
position: relative;
}
.timeline-title {
font-family: var(--font-display);
font-size: 36px;
color: var(--ink);
margin-bottom: 32px;
text-align: center;
position: relative;
}
.timeline-title::before,
.timeline-title::after {
content: "";
position: absolute;
top: 50%;
width: 30px; height: 1px;
background: var(--cinnabar);
}
.timeline-title::before { left: calc(50% - 80px); }
.timeline-title::after { right: calc(50% - 80px); }
.timeline {
list-style: none;
position: relative;
padding-left: 20px;
}
.timeline::before {
content: "";
position: absolute;
left: 6px; top: 0; bottom: 0;
width: 1px;
background: var(--gold);
opacity: 0.5;
}
.timeline li {
position: relative;
display: grid;
grid-template-columns: 60px 1fr;
align-items: center;
gap: 16px;
padding: 14px 0;
}
.t-year {
font-family: var(--font-serif);
font-weight: 700;
color: var(--cinnabar);
font-size: 16px;
letter-spacing: 0.05em;
}
.t-dot {
position: absolute;
left: -16px; top: 50%;
transform: translateY(-50%);
width: 9px; height: 9px;
border-radius: 50%;
background: var(--cinnabar);
border: 2px solid var(--rice);
box-shadow: 0 0 0 1px var(--cinnabar);
}
.t-text {
font-family: var(--font-serif);
font-size: 14px;
color: var(--ink-soft);
}
/* ---------- 习俗 ---------- */
.customs {
background: linear-gradient(180deg, var(--rice) 0%, var(--rice-warm) 50%, var(--rice) 100%);
position: relative;
}
.customs::before {
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 80px 80px;
pointer-events: none;
opacity: 0.5;
}
.customs-grid {
max-width: 1400px;
margin: 0 auto;
padding: 40px 40px 140px;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 24px;
}
.custom-card {
position: relative;
background: var(--white-jade);
padding: 36px 28px 32px;
border: 1px solid var(--mist);
transition: transform 0.5s cubic-bezier(.2,.7,.2,1), box-shadow 0.5s;
opacity: 0;
transform: translateY(40px);
overflow: hidden;
isolation: isolate;
}
.custom-card[data-anim="fade-up"].is-visible {
opacity: 1;
transform: translateY(0);
}
.custom-card::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(193, 39, 45, 0.06), transparent 60%);
opacity: 0;
transition: opacity 0.4s;
z-index: -1;
}
.custom-card:hover {
transform: translateY(-8px);
box-shadow: 0 30px 60px -20px rgba(122, 27, 32, 0.2);
}
.custom-card:hover::before { opacity: 1; }
.custom-card::after {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--cinnabar);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s;
}
.custom-card:hover::after { transform: scaleX(1); }
/* 大小不一的网格 */
.custom-1, .custom-2, .custom-3 {
grid-column: span 2;
}
.custom-4, .custom-5 {
grid-column: span 3;
}
.custom-illu {
width: 100%;
height: 140px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 20px;
}
.custom-illu svg { width: 100%; height: 100%; }
.custom-num {
font-family: var(--font-display);
font-size: 60px;
line-height: 1;
color: var(--cinnabar);
position: absolute;
top: 16px; right: 24px;
opacity: 0.12;
}
.custom-name {
font-family: var(--font-display);
font-size: 36px;
letter-spacing: 0.08em;
color: var(--ink);
margin-bottom: 16px;
line-height: 1.2;
}
.custom-desc {
font-family: var(--font-serif);
font-size: 15px;
line-height: 1.9;
color: var(--ink-soft);
margin-bottom: 24px;
}
.custom-meta {
display: flex; gap: 8px;
font-family: var(--font-serif);
font-size: 12px;
color: var(--cinnabar);
letter-spacing: 0.1em;
padding-top: 16px;
border-top: 1px dashed var(--gold);
}
/* 艾草摇曳 */
.leaf-sway {
animation: sway 4s ease-in-out infinite;
transform-origin: bottom center;
}
@keyframes sway {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
/* ---------- 诗韵 ---------- */
.poetry {
background: var(--ink);
color: var(--rice);
position: relative;
overflow: hidden;
}
.ink-bg {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 20% 30%, rgba(193, 39, 45, 0.18) 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(201, 165, 92, 0.12) 0%, transparent 50%),
linear-gradient(180deg, var(--ink) 0%, #14110E 100%);
z-index: 0;
}
.ink-bg::after {
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
opacity: 0.4;
mix-blend-mode: overlay;
}
.poetry .section-head { position: relative; z-index: 2; }
.poem-stage {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px 140px;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 60px;
position: relative; z-index: 2;
}
/* 主诗 */
.poem-frame {
position: relative;
background: var(--rice);
color: var(--ink);
padding: 56px 48px;
border: 1px solid var(--gold);
isolation: isolate;
}
.poem-frame::before {
content: "";
position: absolute; inset: 12px;
border: 1px solid var(--gold);
opacity: 0.5;
pointer-events: none;
}
.poem-title-tag {
font-family: var(--font-display);
font-size: 32px;
color: var(--cinnabar);
text-align: center;
margin-bottom: 8px;
letter-spacing: 0.1em;
}
.poem-author {
font-family: var(--font-serif);
font-size: 14px;
text-align: center;
color: var(--ink-soft);
letter-spacing: 0.3em;
margin-bottom: 32px;
}
.poem-verse {
font-family: var(--font-serif);
font-size: 24px;
line-height: 2;
text-align: center;
color: var(--ink);
}
.poem-verse p { margin: 0; }
.poem-blank { height: 16px; }
.poem-seal {
position: absolute;
bottom: 32px; right: 32px;
width: 70px; height: 70px;
color: var(--cinnabar);
transform: rotate(-4deg);
opacity: 0.85;
}
/* 旁注 */
.poem-side { display: flex; flex-direction: column; gap: 24px; }
.side-card {
background: rgba(245, 235, 216, 0.04);
border: 1px solid rgba(201, 165, 92, 0.3);
padding: 28px 24px;
position: relative;
transition: background 0.3s, transform 0.3s;
}
.side-card:hover {
background: rgba(245, 235, 216, 0.08);
transform: translateX(4px);
}
.side-eyebrow {
font-family: var(--font-display);
font-size: 16px;
color: var(--gold);
margin-bottom: 20px;
letter-spacing: 0.1em;
}
.side-poem {
font-family: var(--font-serif);
font-size: 18px;
line-height: 2;
color: var(--rice);
}
.side-poem p { margin: 0; }
.side-poem .dot-line {
text-align: center;
color: var(--gold);
letter-spacing: 0.5em;
margin: 8px 0;
font-size: 14px;
}
.side-meta {
margin-top: 16px;
font-family: var(--font-en);
font-style: italic;
font-size: 12px;
color: var(--gold);
letter-spacing: 0.2em;
text-align: right;
}
/* ---------- 祈福 ---------- */
.blessing {
background: linear-gradient(180deg, var(--rice) 0%, var(--white-jade) 100%);
position: relative;
}
.blessing::before {
content: "";
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 10% 20%, rgba(193, 39, 45, 0.04), transparent 30%),
radial-gradient(circle at 90% 80%, rgba(201, 165, 92, 0.06), transparent 30%);
pointer-events: none;
}
.blessing-grid {
max-width: 1400px;
margin: 0 auto;
padding: 40px 40px 140px;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
align-items: start;
}
.blessing-form {
display: flex; flex-direction: column; gap: 24px;
padding: 40px 32px;
background: var(--rice);
border: 1px solid var(--mist);
position: relative;
}
.blessing-form::before {
content: "「";
position: absolute;
top: 12px; left: 16px;
font-family: var(--font-display);
font-size: 40px;
color: var(--cinnabar);
opacity: 0.2;
line-height: 1;
}
.form-row {
display: flex; align-items: center;
gap: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--mist);
}
.form-row label {
font-family: var(--font-serif);
font-size: 16px;
color: var(--cinnabar);
width: 60px;
letter-spacing: 0.1em;
}
.form-row input {
flex: 1;
border: 0;
background: transparent;
font-family: var(--font-display);
font-size: 24px;
color: var(--ink);
padding: 8px 0;
outline: none;
}
.form-row input::placeholder {
color: var(--mist);
opacity: 0.8;
}
.form-style { border-bottom: 0; padding-bottom: 0; flex-direction: column; align-items: flex-start; gap: 16px; }
.form-style label { width: auto; }
.style-options {
display: flex; gap: 12px; flex-wrap: wrap;
}
.style-btn {
font-family: var(--font-serif);
font-size: 14px;
letter-spacing: 0.1em;
padding: 10px 20px;
background: var(--white-jade);
color: var(--ink);
border: 1px solid var(--mist);
transition: all 0.3s;
}
.style-btn:hover {
border-color: var(--cinnabar);
color: var(--cinnabar);
}
.style-btn.is-active {
background: var(--cinnabar);
color: var(--rice);
border-color: var(--cinnabar);
}
.bless-gen {
display: flex; align-items: center; gap: 16px;
padding: 18px 28px;
background: var(--ink);
color: var(--rice);
font-family: var(--font-serif);
font-size: 15px;
letter-spacing: 0.3em;
position: relative;
overflow: hidden;
transition: transform 0.3s;
margin-top: 16px;
}
.bless-gen::before {
content: "";
position: absolute; inset: 0;
background: var(--cinnabar);
transform: translateX(-100%);
transition: transform 0.4s;
z-index: 0;
}
.bless-gen > * { position: relative; z-index: 1; }
.bless-gen:hover::before { transform: translateX(0); }
.bless-gen:hover { transform: translateY(-2px); }
.bless-gen .gen-line {
width: 30px; height: 1px;
background: currentColor;
display: block;
}
.bless-gen .gen-arrow {
margin-left: auto;
font-family: var(--font-en);
font-size: 20px;
transition: transform 0.3s;
}
.bless-gen:hover .gen-arrow { transform: translateX(6px); }
.bless-tips {
display: flex; gap: 8px;
font-family: var(--font-serif);
font-size: 12px;
color: var(--ink-soft);
letter-spacing: 0.05em;
opacity: 0.7;
margin-top: 8px;
}
/* 卡片舞台 */
.blessing-card-stage {
position: relative;
display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.bless-card {
width: 100%;
max-width: 480px;
aspect-ratio: 3 / 4;
position: relative;
padding: 48px 40px;
display: flex; align-items: center; justify-content: center;
transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
isolation: isolate;
overflow: hidden;
}
.bless-card.flash {
animation: cardFlash 0.8s;
}
@keyframes cardFlash {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.15); }
}
.card-corner {
position: absolute;
width: 30px; height: 30px;
border: 1.5px solid currentColor;
opacity: 0.6;
}
.card-tl { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.card-tr { top: 16px; right: 16px; border-left: 0; border-bottom: 0; }
.card-bl { bottom: 16px; left: 16px; border-right: 0; border-top: 0; }
.card-br { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }
.card-inner {
text-align: center;
position: relative;
z-index: 2;
width: 100%;
}
.card-deco-top {
display: flex; gap: 8px; justify-content: center;
margin-bottom: 24px;
}
.card-deco-top span {
display: block;
width: 4px; height: 4px;
background: currentColor;
transform: rotate(45deg);
opacity: 0.4;
}
.card-eyebrow {
font-family: var(--font-en);
font-style: italic;
font-size: 12px;
letter-spacing: 0.4em;
text-transform: uppercase;
color: currentColor;
opacity: 0.6;
margin-bottom: 16px;
}
.card-headline {
font-family: var(--font-display);
font-size: 80px;
line-height: 1;
color: currentColor;
margin-bottom: 24px;
display: flex; justify-content: center; gap: 8px;
}
.card-headline span {
display: inline-block;
animation: charFloat 3s ease-in-out infinite;
}
.card-headline .hl-1 { animation-delay: 0s; }
.card-headline .hl-2 { animation-delay: 0.2s; }
.card-headline .hl-3 { animation-delay: 0.4s; }
.card-headline .hl-4 { animation-delay: 0.6s; }
@keyframes charFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
.card-to {
font-family: var(--font-serif);
font-size: 18px;
margin-bottom: 24px;
color: currentColor;
display: flex; justify-content: center; align-items: baseline; gap: 8px;
flex-wrap: wrap;
}
.to-label, .to-suffix { font-size: 14px; opacity: 0.7; }
.to-name {
font-family: var(--font-display);
font-size: 28px;
letter-spacing: 0.1em;
border-bottom: 1px solid currentColor;
padding: 0 8px;
display: inline-block;
min-width: 60px;
}
.card-body {
font-family: var(--font-serif);
font-size: 18px;
line-height: 2.2;
color: currentColor;
margin-bottom: 32px;
}
.card-body p { margin: 0; }
.card-foot {
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-serif);
font-size: 13px;
letter-spacing: 0.1em;
color: currentColor;
border-top: 1px solid currentColor;
padding-top: 16px;
margin-top: 8px;
opacity: 0.8;
}
.from-label { opacity: 0.6; margin-right: 8px; }
.from-name {
font-family: var(--font-display);
font-size: 18px;
letter-spacing: 0.1em;
}
.card-seal {
position: absolute;
bottom: 60px; right: 40px;
width: 60px; height: 60px;
color: var(--cinnabar);
transform: rotate(-6deg);
z-index: 1;
opacity: 0.85;
}
/* 卡片三种风格 */
.bless-cinnabar {
background: linear-gradient(135deg, #C1272D 0%, #7A1B20 100%);
color: var(--rice);
}
.bless-cinnabar::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 20%, rgba(201, 165, 92, 0.15), transparent 40%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.08), transparent 40%);
z-index: 1;
}
.bless-cinnabar .card-seal { color: var(--gold); }
.bless-ink {
background: linear-gradient(135deg, var(--ink) 0%, #2A2520 100%);
color: var(--rice);
}
.bless-ink::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(circle at 50% 50%, rgba(201, 165, 92, 0.12), transparent 50%);
z-index: 1;
}
.bless-ink .card-seal { color: var(--cinnabar); }
.bless-bamboo {
background: linear-gradient(135deg, var(--bamboo) 0%, var(--bamboo-deep) 100%);
color: var(--rice);
}
.bless-bamboo::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 80%, rgba(201, 165, 92, 0.18), transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.06), transparent 50%);
z-index: 1;
}
.bless-bamboo .card-seal { color: var(--cinnabar); }
.bless-dl {
font-family: var(--font-serif);
font-size: 14px;
color: var(--ink);
letter-spacing: 0.2em;
padding: 12px 24px;
background: var(--rice);
border: 1px solid var(--ink);
transition: all 0.3s;
}
.bless-dl:hover {
background: var(--ink);
color: var(--rice);
}
/* ---------- 页脚 ---------- */
.foot {
background: var(--ink);
color: var(--rice);
padding: 80px 40px 40px;
position: relative;
overflow: hidden;
}
.foot::before {
content: "";
position: absolute; bottom: 0; left: 0; right: 0;
height: 120px;
background:
linear-gradient(180deg, transparent 0%, rgba(201, 165, 92, 0.05) 100%),
repeating-linear-gradient(90deg, transparent 0, transparent 60px, rgba(201, 165, 92, 0.08) 60px, rgba(201, 165, 92, 0.08) 61px);
pointer-events: none;
}
.foot-inner {
max-width: 1400px; margin: 0 auto;
position: relative; z-index: 2;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 60px;
align-items: center;
}
.foot-brand {
display: flex; align-items: center; gap: 20px;
}
.foot-char {
font-family: var(--font-display);
font-size: 96px;
line-height: 1;
color: var(--cinnabar);
text-shadow: 0 4px 20px rgba(193, 39, 45, 0.4);
}
.foot-title {
font-family: var(--font-en);
font-style: italic;
font-size: 16px;
color: var(--gold);
letter-spacing: 0.2em;
margin-bottom: 4px;
}
.foot-sub {
font-family: var(--font-serif);
font-size: 13px;
color: var(--rice);
opacity: 0.7;
letter-spacing: 0.1em;
}
.foot-text {
font-family: var(--font-serif);
font-size: 16px;
line-height: 2;
color: var(--rice-warm);
text-align: center;
}
.foot-text p { margin: 0; }
.foot-copy {
font-family: var(--font-en);
font-style: italic;
font-size: 12px;
color: var(--gold);
letter-spacing: 0.2em;
opacity: 0.7;
text-align: right;
display: flex; flex-direction: column; gap: 12px; align-items: flex-end;
}
.foot-river {
display: block;
width: 120px; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
position: relative;
}
.foot-river::before {
content: "";
position: absolute; top: -3px; left: 50%;
width: 7px; height: 7px;
background: var(--cinnabar);
border-radius: 50%;
transform: translateX(-50%);
box-shadow: 0 0 10px var(--cinnabar);
animation: dotMove 4s ease-in-out infinite;
}
.foot-link {
display: inline-block;
font-family: var(--font-serif);
font-size: 14px;
color: var(--gold);
letter-spacing: 0.2em;
text-decoration: none;
padding: 8px 16px;
border: 1px solid var(--gold);
transition: all 0.3s;
}
.foot-link:hover {
background: var(--cinnabar);
border-color: var(--cinnabar);
color: var(--rice);
}
@keyframes dotMove {
0%, 100% { transform: translateX(-60px); }
50% { transform: translateX(60px); }
}
/* ---------- 百粽图 (Zongzi Atlas) ---------- */
.atlas {
background: var(--rice);
position: relative;
overflow: hidden;
}
.atlas::before {
content: "";
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 10% 20%, rgba(74, 103, 65, 0.05), transparent 30%),
radial-gradient(circle at 90% 80%, rgba(193, 39, 45, 0.04), transparent 30%);
pointer-events: none;
}
.atlas-marquee {
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
padding: 60px 0 40px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--cinnabar) transparent;
cursor: grab;
}
.atlas-marquee:active { cursor: grabbing; }
.atlas-marquee::-webkit-scrollbar { height: 6px; }
.atlas-marquee::-webkit-scrollbar-track { background: var(--mist); }
.atlas-marquee::-webkit-scrollbar-thumb { background: var(--cinnabar); border-radius: 3px; }
.atlas-rail {
display: flex;
gap: 32px;
padding: 0 80px;
width: max-content;
align-items: stretch;
}
.atlas-card {
flex: 0 0 280px;
background: var(--white-jade);
border: 1px solid var(--mist);
padding: 32px 24px 28px;
position: relative;
transition: transform 0.5s cubic-bezier(.2,.7,.2,1), box-shadow 0.5s;
isolation: isolate;
}
.atlas-card::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--bamboo) 0%, var(--cinnabar) 100%);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s;
z-index: 2;
}
.atlas-card:hover {
transform: translateY(-12px);
box-shadow: 0 30px 60px -20px rgba(74, 103, 65, 0.3);
}
.atlas-card:hover::before { transform: scaleX(1); }
.atlas-illu {
width: 100%;
height: 200px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 24px;
filter: drop-shadow(0 8px 12px rgba(74, 103, 65, 0.15));
transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.atlas-card:hover .atlas-illu {
transform: rotate(-3deg) translateY(-4px);
}
.atlas-tag {
display: inline-block;
font-family: var(--font-en);
font-style: italic;
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--cinnabar);
padding: 4px 10px;
border: 1px solid var(--cinnabar);
margin-bottom: 12px;
}
.atlas-name {
font-family: var(--font-display);
font-size: 28px;
letter-spacing: 0.05em;
color: var(--ink);
margin-bottom: 16px;
line-height: 1.3;
}
.atlas-desc {
font-family: var(--font-serif);
font-size: 14px;
line-height: 1.8;
color: var(--ink-soft);
}
.atlas-foot {
max-width: 1400px;
margin: 0 auto;
padding: 24px 40px 100px;
display: flex; align-items: center; justify-content: center; gap: 20px;
font-family: var(--font-en);
font-style: italic;
font-size: 13px;
color: var(--cinnabar);
letter-spacing: 0.3em;
}
.atlas-line {
width: 60px; height: 1px;
background: var(--cinnabar);
opacity: 0.5;
}
/* ---------- 端阳十二时辰 ---------- */
.hours {
background: var(--ink);
color: var(--rice);
position: relative;
overflow: hidden;
}
/* ---------- 南北食俗 ---------- */
.northsouth {
background: linear-gradient(180deg, var(--ink) 0%, #1f1a16 100%);
color: var(--rice);
position: relative;
padding-bottom: 140px;
overflow: hidden;
}
.ns-bg {
position: absolute; inset: 0;
background-image:
radial-gradient(ellipse at 30% 50%, rgba(193, 39, 45, 0.08) 0%, transparent 50%),
radial-gradient(ellipse at 70% 50%, rgba(74, 103, 65, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.northsouth .section-head { position: relative; z-index: 2; }
.ns-stage {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 0;
align-items: stretch;
position: relative; z-index: 2;
}
.ns-divider {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 20px;
position: relative;
min-width: 100px;
}
.ns-div-line {
width: 1px;
height: 80px;
background: linear-gradient(180deg, transparent 0%, var(--gold) 50%, transparent 100%);
opacity: 0.5;
}
.ns-div-line.ns-div-top { margin-bottom: 16px; }
.ns-div-line.ns-div-bot { margin-top: 16px; }
.ns-div-char {
font-family: var(--font-serif);
font-size: 64px;
color: var(--cinnabar);
line-height: 1;
font-weight: 700;
opacity: 0.8;
text-shadow: 0 0 30px rgba(193, 39, 45, 0.3);
}
.ns-div-sub {
font-family: var(--font-en);
font-style: italic;
font-size: 11px;
color: var(--gold);
letter-spacing: 0.4em;
margin-top: 8px;
opacity: 0.6;
}
.ns-side { padding: 0 24px; }
.ns-card {
background: rgba(245, 235, 216, 0.04);
border: 1px solid rgba(201, 165, 92, 0.25);
padding: 36px 30px;
position: relative;
height: 100%;
transition: all 0.4s;
}
.ns-card::before {
content: "";
position: absolute;
top: 8px; left: 8px; right: 8px; bottom: 8px;
border: 1px solid rgba(201, 165, 92, 0.1);
pointer-events: none;
}
.ns-north .ns-card { border-color: rgba(201, 165, 92, 0.4); }
.ns-south .ns-card { border-color: rgba(74, 103, 65, 0.4); }
.ns-card:hover {
background: rgba(245, 235, 216, 0.07);
transform: translateY(-4px);
}
.ns-tag {
font-family: var(--font-display);
font-size: 14px;
color: var(--gold);
letter-spacing: 0.2em;
margin-bottom: 12px;
}
.ns-region {
font-family: var(--font-serif);
font-size: 32px;
font-weight: 700;
color: var(--rice);
margin: 0 0 24px;
letter-spacing: 0.1em;
}
.ns-zongzi {
width: 100%;
height: 160px;
margin-bottom: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.ns-zongzi svg {
width: 200px;
height: 160px;
}
.ns-zongzi-name {
font-family: var(--font-en);
font-style: italic;
font-size: 12px;
color: var(--gold);
letter-spacing: 0.2em;
text-align: center;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px dashed rgba(201, 165, 92, 0.3);
}
.ns-points {
list-style: none;
padding: 0;
margin: 0 0 20px;
}
.ns-points li {
font-family: var(--font-serif);
font-size: 15px;
line-height: 1.8;
color: var(--rice);
padding: 6px 0;
display: flex;
align-items: baseline;
gap: 10px;
}
.ns-pdot {
display: inline-block;
width: 4px;
height: 4px;
background: var(--gold);
flex-shrink: 0;
margin-top: 8px;
}
.ns-south .ns-pdot { background: #4A6741; }
.ns-points em {
font-style: normal;
color: var(--gold);
font-weight: 500;
}
.ns-points strong {
color: var(--cinnabar);
font-weight: 500;
}
.ns-quote {
font-family: var(--font-display);
font-size: 14px;
color: var(--cinnabar);
font-style: italic;
padding-top: 16px;
border-top: 1px solid rgba(201, 165, 92, 0.2);
letter-spacing: 0.1em;
text-align: center;
}
.ns-foot {
max-width: 900px;
margin: 100px auto 0;
padding: 0 40px;
text-align: center;
position: relative; z-index: 2;
}
.ns-foot-rule {
width: 60px;
height: 1px;
background: var(--cinnabar);
margin: 0 auto 24px;
opacity: 0.4;
}
.ns-foot p {
font-family: var(--font-serif);
font-size: 22px;
line-height: 2;
color: var(--rice);
letter-spacing: 0.08em;
}
.ns-foot p em { font-style: normal; color: var(--gold); }
.ns-foot p strong { color: var(--cinnabar); font-weight: 500; }
.hours-bg {
position: absolute; inset: 0;
/* ---------- 五音 · 宫商角徵羽 ---------- */
.pentatonic {
background: linear-gradient(180deg, #221e1a 0%, var(--ink) 100%);
color: var(--rice);
position: relative;
padding-bottom: 140px;
overflow: hidden;
}
.pentatonic-bg {
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 30% 40%, rgba(193, 39, 45, 0.06) 0%, transparent 50%),
radial-gradient(circle at 70% 60%, rgba(201, 165, 92, 0.06) 0%, transparent 50%);
pointer-events: none;
}
.pentatonic .section-head { position: relative; z-index: 2; }
.pentatonic-rail {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
position: relative; z-index: 2;
}
.note-card {
position: relative;
background: rgba(245, 235, 216, 0.03);
border: 1px solid rgba(201, 165, 92, 0.3);
padding: 60px 16px 28px;
text-align: center;
cursor: pointer;
font-family: inherit;
color: inherit;
transition: all 0.4s;
overflow: hidden;
}
.note-card::before {
content: "";
position: absolute;
top: 6px; left: 6px; right: 6px; bottom: 6px;
border: 1px solid rgba(201, 165, 92, 0.1);
pointer-events: none;
transition: border-color 0.4s;
}
.note-card:hover {
background: rgba(193, 39, 45, 0.08);
transform: translateY(-4px);
border-color: rgba(193, 39, 45, 0.5);
}
.note-card:hover::before { border-color: rgba(193, 39, 45, 0.3); }
.note-card.is-playing {
background: rgba(193, 39, 45, 0.15);
border-color: var(--cinnabar);
}
.note-card.is-playing::before { border-color: var(--cinnabar); }
.note-ripple {
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
background: var(--cinnabar);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
.note-card.is-playing .note-ripple {
animation: note-ripple-out 1.4s ease-out;
}
.note-ripple.delay-1 { animation-delay: 0.2s !important; }
.note-ripple.delay-2 { animation-delay: 0.4s !important; }
@keyframes note-ripple-out {
0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
100% { transform: translate(-50%, -50%) scale(40); opacity: 0; }
}
.note-glyph {
font-family: var(--font-serif);
font-size: 80px;
font-weight: 700;
color: var(--rice);
line-height: 1;
margin-bottom: 12px;
letter-spacing: 0;
transition: color 0.4s, transform 0.4s;
}
.note-card:hover .note-glyph {
color: var(--cinnabar);
transform: scale(1.05);
}
.note-pinyin {
font-family: var(--font-en);
font-size: 14px;
color: var(--gold);
font-style: italic;
letter-spacing: 0.15em;
margin-bottom: 4px;
}
.note-en {
font-family: var(--font-en);
font-size: 18px;
color: var(--rice);
letter-spacing: 0.1em;
margin-bottom: 16px;
}
.note-line {
width: 40px;
height: 1px;
background: var(--gold);
margin: 0 auto 16px;
opacity: 0.4;
}
.note-meta {
display: flex;
flex-direction: column;
gap: 4px;
font-family: var(--font-serif);
font-size: 13px;
color: var(--rice);
letter-spacing: 0.1em;
}
.note-meta span:nth-child(1) { color: var(--cinnabar); font-weight: 500; }
.note-meta span:nth-child(2) { color: var(--gold); }
.note-meta span:nth-child(3) { font-style: italic; opacity: 0.7; }
.pentatonic-scale {
max-width: 1200px;
margin: 40px auto 0;
padding: 0 40px;
position: relative;
z-index: 2;
}
.pentatonic-scale svg {
width: 100%;
height: 80px;
}
.pentatonic-foot {
max-width: 900px;
margin: 80px auto 0;
padding: 0 40px;
text-align: center;
position: relative; z-index: 2;
}
.pentatonic-foot-line {
width: 60px;
height: 1px;
background: var(--cinnabar);
margin: 0 auto 24px;
opacity: 0.4;
}
.pentatonic-foot p {
font-family: var(--font-serif);
font-size: 22px;
line-height: 2;
color: var(--rice);
letter-spacing: 0.08em;
}
.pentatonic-foot p em { font-style: normal; color: var(--cinnabar); font-weight: 500; }
.pentatonic-foot p strong { color: var(--gold); font-weight: 500; }
/* ---------- 古乐器 ---------- */
.instruments {
position: relative;
background: linear-gradient(180deg, var(--rice) 0%, var(--white-jade) 100%);
padding-bottom: 140px;
}
.instruments-grid {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}
.instrument-card {
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(26, 24, 21, 0.1);
padding: 24px 20px;
text-align: center;
transition: all 0.4s;
position: relative;
}
.instrument-card::before {
content: "";
position: absolute;
top: 5px; left: 5px; right: 5px; bottom: 5px;
border: 1px solid rgba(193, 39, 45, 0.1);
pointer-events: none;
}
.instrument-card:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(26, 24, 21, 0.08);
}
.instrument-illu {
width: 100%;
height: 180px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.instrument-illu svg { width: 100%; height: 100%; }
.instrument-tag {
font-family: var(--font-display);
font-size: 14px;
color: var(--cinnabar);
letter-spacing: 0.2em;
margin-bottom: 8px;
}
.instrument-name {
font-family: var(--font-serif);
font-size: 22px;
font-weight: 700;
color: var(--ink);
margin: 0 0 14px;
letter-spacing: 0.05em;
}
.instrument-text {
font-family: var(--font-serif);
font-size: 13px;
line-height: 1.8;
color: var(--ink-light);
margin: 0 0 20px;
}
.instrument-text em { font-style: normal; color: var(--cinnabar); font-weight: 500; }
.instrument-text strong { color: var(--gold); font-weight: 500; }
.instrument-play {
display: inline-block;
padding: 10px 20px;
border: 1px solid var(--cinnabar);
font-family: var(--font-display);
font-size: 12px;
color: var(--cinnabar);
cursor: pointer;
letter-spacing: 0.3em;
background: transparent;
transition: all 0.3s;
}
.instrument-play:hover {
background: var(--cinnabar);
color: var(--rice);
}
.instrument-play.is-playing {
background: var(--cinnabar);
color: var(--rice);
animation: instrument-pulse 0.6s ease-out;
}
@keyframes instrument-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(193, 39, 45, 0.2); }
}
/* ---------- 端阳鼓谱 ---------- */
.drum-pattern {
background: var(--ink);
color: var(--rice);
position: relative;
padding-bottom: 140px;
overflow: hidden;
}
.dp-bg {
position: absolute; inset: 0;
background-image:
radial-gradient(ellipse at 30% 40%, rgba(193, 39, 45, 0.1) 0%, transparent 50%),
radial-gradient(ellipse at 70% 60%, rgba(201, 165, 92, 0.08) 0%, transparent 50%);
pointer-events: none;
}
.drum-pattern .section-head { position: relative; z-index: 2; }
.drum-stage {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
position: relative; z-index: 2;
}
.drum-display {
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
.drum-visual {
width: 280px;
height: 280px;
position: relative;
}
.drum-visual svg { width: 100%; height: 100%; }
.drum-pulse {
transform-origin: center;
transform-box: fill-box;
opacity: 0;
transition: opacity 0.2s;
}
.drum-visual.is-hit .drum-pulse {
animation: drum-hit 0.5s ease-out;
}
@keyframes drum-hit {
0% { opacity: 0; transform: scale(0.6); }
30% { opacity: 0.9; transform: scale(1.2); }
100% { opacity: 0; transform: scale(1.6); }
}
.drum-pattern-grid {
display: flex;
gap: 12px;
padding: 16px;
background: rgba(245, 235, 216, 0.03);
border: 1px solid rgba(201, 165, 92, 0.2);
}
.drum-step {
width: 36px;
height: 36px;
background: rgba(245, 235, 216, 0.05);
border: 1px solid rgba(201, 165, 92, 0.3);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-serif);
font-size: 14px;
color: var(--gold);
transition: all 0.2s;
}
.drum-step.is-on {
background: var(--cinnabar);
color: var(--rice);
border-color: var(--cinnabar);
transform: scale(1.1);
box-shadow: 0 0 12px rgba(193, 39, 45, 0.6);
}
.drum-step.is-soft {
background: rgba(201, 165, 92, 0.3);
color: var(--rice);
border-color: var(--gold);
}
.drum-play {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 32px;
background: transparent;
border: 1px solid var(--cinnabar);
color: var(--cinnabar);
font-family: var(--font-display);
font-size: 16px;
cursor: pointer;
letter-spacing: 0.3em;
transition: all 0.3s;
}
.drum-play:hover {
background: var(--cinnabar);
color: var(--rice);
}
.drum-play.is-playing {
background: var(--cinnabar);
color: var(--rice);
animation: drum-btn-pulse 1s ease-in-out infinite;
}
@keyframes drum-btn-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(193, 39, 45, 0.4); }
50% { box-shadow: 0 0 0 8px rgba(193, 39, 45, 0); }
}
.drum-play-icon { font-size: 20px; }
.drum-info-tag {
font-family: var(--font-display);
font-size: 14px;
color: var(--gold);
letter-spacing: 0.2em;
margin-bottom: 12px;
}
.drum-info-title {
font-family: var(--font-serif);
font-size: 40px;
font-weight: 700;
color: var(--rice);
margin: 0 0 8px;
letter-spacing: 0.15em;
}
.drum-info-sub {
font-family: var(--font-en);
font-style: italic;
font-size: 14px;
color: var(--cinnabar);
letter-spacing: 0.2em;
margin-bottom: 24px;
}
.drum-info-text {
font-family: var(--font-serif);
font-size: 15px;
line-height: 2;
color: var(--rice);
margin: 0 0 24px;
}
.drum-info-text em { font-style: normal; color: var(--cinnabar); font-weight: 500; }
.drum-info-text strong { color: var(--gold); font-weight: 500; }
.drum-info-list {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid rgba(201, 165, 92, 0.2);
}
.drum-info-list li {
font-family: var(--font-serif);
font-size: 15px;
color: var(--rice);
padding: 12px 0;
border-bottom: 1px solid rgba(201, 165, 92, 0.1);
display: flex;
align-items: center;
gap: 12px;
}
.drum-step-num {
font-family: var(--font-serif);
font-size: 18px;
color: var(--cinnabar);
font-weight: 700;
width: 30px;
}
.drum-info-list li span:not(.drum-step-num) {
color: var(--gold);
font-style: italic;
}
background:
radial-gradient(ellipse at 30% 50%, rgba(201, 165, 92, 0.1) 0%, transparent 50%),
radial-gradient(ellipse at 70% 30%, rgba(193, 39, 45, 0.12) 0%, transparent 50%);
pointer-events: none;
}
.hours-stage {
max-width: 100%;
overflow-x: auto;
overflow-y: visible;
padding: 40px 0 140px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--gold) transparent;
position: relative; z-index: 2;
}
.hours-stage::-webkit-scrollbar { height: 4px; }
.hours-stage::-webkit-scrollbar-track { background: transparent; }
.hours-stage::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
.hours-rail {
display: flex;
gap: 0;
padding: 0 80px;
width: max-content;
position: relative;
}
.hours-rail::before {
content: "";
position: absolute;
left: 80px; right: 80px; top: 50px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), var(--gold), transparent);
opacity: 0.4;
z-index: 0;
}
.hour-item {
flex: 0 0 200px;
position: relative;
padding: 0 16px;
display: flex; flex-direction: column;
align-items: center;
text-align: center;
}
.hour-zh {
font-family: var(--font-display);
font-size: 56px;
line-height: 1;
color: var(--gold);
margin-bottom: 8px;
position: relative;
z-index: 2;
text-shadow: 0 4px 12px rgba(201, 165, 92, 0.3);
}
.hour-time {
font-family: var(--font-en);
font-style: italic;
font-size: 12px;
letter-spacing: 0.3em;
color: var(--rice);
opacity: 0.5;
margin-bottom: 16px;
position: relative; z-index: 2;
}
.hour-item::before {
content: "";
position: absolute;
top: 70px; left: 50%;
transform: translateX(-50%);
width: 12px; height: 12px;
border-radius: 50%;
background: var(--cinnabar);
box-shadow: 0 0 0 4px var(--ink), 0 0 0 5px var(--cinnabar), 0 0 16px var(--cinnabar);
z-index: 1;
}
.hour-act {
margin-top: 32px;
padding: 20px 12px;
background: rgba(245, 235, 216, 0.04);
border: 1px solid rgba(201, 165, 92, 0.2);
width: 100%;
transition: all 0.4s;
}
.hour-item:hover .hour-act {
background: rgba(193, 39, 45, 0.1);
border-color: var(--cinnabar);
transform: translateY(-4px);
}
.hour-act-name {
font-family: var(--font-display);
font-size: 22px;
letter-spacing: 0.1em;
color: var(--rice);
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--gold);
display: inline-block;
}
.hour-act-desc {
font-family: var(--font-serif);
font-size: 13px;
line-height: 1.8;
color: var(--rice-warm);
opacity: 0.85;
}
/* ---------- 端阳数据 ---------- */
.numbers {
background: linear-gradient(180deg, var(--rice) 0%, var(--rice-warm) 100%);
position: relative;
overflow: hidden;
}
.numbers-bg {
position: absolute; inset: 0;
background-image:
repeating-linear-gradient(0deg, transparent 0, transparent 60px, rgba(193, 39, 45, 0.04) 60px, rgba(193, 39, 45, 0.04) 61px),
repeating-linear-gradient(90deg, transparent 0, transparent 60px, rgba(201, 165, 92, 0.05) 60px, rgba(201, 165, 92, 0.05) 61px);
pointer-events: none;
}
.numbers-grid {
max-width: 1400px;
margin: 0 auto;
padding: 60px 40px 80px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
position: relative; z-index: 2;
}
.num-card {
background: var(--white-jade);
padding: 48px 32px 40px;
border: 1px solid var(--mist);
position: relative;
transition: transform 0.4s, box-shadow 0.4s;
overflow: hidden;
}
.num-card::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 0; height: 100%;
background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
transition: width 0.6s cubic-bezier(.2,.7,.2,1);
z-index: 0;
}
.num-card:hover::before { width: 100%; }
.num-card:hover {
transform: translateY(-8px);
box-shadow: 0 30px 60px -20px rgba(26, 24, 21, 0.4);
}
.num-card > * { position: relative; z-index: 1; transition: color 0.4s; }
.num-card:hover .num-big,
.num-card:hover .num-name,
.num-card:hover .num-desc { color: var(--rice); }
.num-card:hover .num-line { background: var(--gold); }
.num-big {
font-family: var(--font-display);
font-size: 96px;
line-height: 1;
color: var(--cinnabar);
margin-bottom: 24px;
display: flex; align-items: baseline; gap: 8px;
transition: color 0.4s;
}
.num-value {
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
display: inline-block;
min-width: 0.6em;
}
.num-unit {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 400;
opacity: 0.7;
}
.num-line {
width: 40px; height: 1px;
background: var(--cinnabar);
margin-bottom: 20px;
transition: background 0.4s;
}
.num-name {
font-family: var(--font-display);
font-size: 28px;
letter-spacing: 0.1em;
color: var(--ink);
margin-bottom: 16px;
transition: color 0.4s;
}
.num-desc {
font-family: var(--font-serif);
font-size: 14px;
line-height: 1.9;
color: var(--ink-soft);
transition: color 0.4s;
}
.numbers-quote {
max-width: 900px;
margin: 40px auto 100px;
padding: 0 40px;
text-align: center;
position: relative; z-index: 2;
}
.quote-mark-big {
font-family: var(--font-display);
font-size: 80px;
line-height: 0.5;
color: var(--cinnabar);
opacity: 0.3;
margin-bottom: 24px;
}
.quote-big {
font-family: var(--font-serif);
font-size: 28px;
line-height: 1.8;
color: var(--ink);
margin-bottom: 16px;
letter-spacing: 0.1em;
}
.quote-small {
font-family: var(--font-en);
font-style: italic;
font-size: 14px;
color: var(--cinnabar);
letter-spacing: 0.3em;
}
/* ---------- 端阳传说 ---------- */
.legends {
position: relative;
background: linear-gradient(180deg, var(--rice) 0%, var(--white-jade) 100%);
padding-bottom: 140px;
overflow: hidden;
}
.legends-bg {
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 10% 20%, rgba(193, 39, 45, 0.05), transparent 40%),
radial-gradient(circle at 90% 80%, rgba(201, 165, 92, 0.06), transparent 40%);
pointer-events: none;
}
.legends .section-head { position: relative; z-index: 2; }
.legends-rail {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
position: relative; z-index: 2;
}
.legends-rail::before {
content: "";
position: absolute;
top: 240px;
left: 6%;
right: 6%;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--cinnabar) 20%, var(--gold) 50%, var(--cinnabar) 80%, transparent 100%);
opacity: 0.3;
z-index: 0;
}
.legend-card {
position: relative;
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(26, 24, 21, 0.1);
padding: 32px 24px 28px;
text-align: center;
transition: all 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.legend-card::before {
content: "";
position: absolute;
top: 6px; left: 6px; right: 6px; bottom: 6px;
border: 1px solid rgba(193, 39, 45, 0.1);
pointer-events: none;
transition: border-color 0.4s;
}
.legend-card:hover {
background: rgba(255, 255, 255, 0.9);
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(26, 24, 21, 0.1);
}
.legend-card:hover::before { border-color: rgba(193, 39, 45, 0.4); }
.legend-card[data-region="楚"]::after,
.legend-card[data-region="吴"]::after,
.legend-card[data-region="越"]::after,
.legend-card[data-region="民"]::after {
content: "";
position: absolute;
top: 240px;
left: 50%;
width: 10px;
height: 10px;
background: var(--cinnabar);
border-radius: 50%;
transform: translateX(-50%) translateY(-5px);
z-index: 1;
box-shadow: 0 0 0 4px var(--rice), 0 0 0 5px var(--cinnabar);
}
.legend-num {
position: absolute;
top: 14px;
right: 18px;
font-family: var(--font-serif);
font-size: 32px;
color: var(--cinnabar);
opacity: 0.15;
font-weight: 700;
line-height: 1;
}
.legend-portrait {
width: 120px;
height: 140px;
margin: 0 auto 20px;
}
.legend-region {
font-family: var(--font-display);
font-size: 14px;
color: var(--cinnabar);
letter-spacing: 0.2em;
margin-bottom: 8px;
}
.legend-name {
font-family: var(--font-serif);
font-size: 30px;
font-weight: 700;
color: var(--ink);
margin: 0 0 6px;
letter-spacing: 0.15em;
}
.legend-era {
font-family: var(--font-en);
font-style: italic;
font-size: 12px;
color: var(--gold);
letter-spacing: 0.25em;
margin: 0 0 16px;
}
.legend-text {
font-family: var(--font-serif);
font-size: 14px;
line-height: 1.9;
color: var(--ink-light);
margin: 0 0 16px;
}
.legend-text em {
font-style: normal;
color: var(--cinnabar);
font-weight: 500;
}
.legend-quote {
font-family: var(--font-display);
font-size: 13px;
color: var(--cinnabar);
padding-top: 12px;
border-top: 1px dashed rgba(193, 39, 45, 0.25);
font-style: italic;
letter-spacing: 0.08em;
}
.legends-foot {
max-width: 900px;
margin: 100px auto 0;
padding: 0 40px;
text-align: center;
position: relative; z-index: 2;
}
.legends-foot-line {
width: 60px;
height: 1px;
background: var(--cinnabar);
margin: 0 auto 24px;
opacity: 0.4;
}
.legends-foot p {
font-family: var(--font-serif);
font-size: 22px;
line-height: 2;
color: var(--ink);
letter-spacing: 0.08em;
}
.legends-foot p strong { color: var(--cinnabar); font-weight: 500; }
.legends-foot p em { font-style: normal; color: var(--gold); }
/* ---------- 童谣小调 ---------- */
.rhyme {
background: var(--ink);
color: var(--rice);
position: relative;
overflow: hidden;
}
.rhyme-bg {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 20% 30%, rgba(193, 39, 45, 0.15) 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(201, 165, 92, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.rhyme-stage {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px 140px;
display: grid;
grid-template-columns: 1fr auto;
gap: 60px;
align-items: center;
position: relative; z-index: 2;
}
.rhyme-staff {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
pointer-events: none;
z-index: 0;
}
.rhyme-staff span {
position: absolute;
left: 0; right: 0;
height: 1px;
background: var(--gold);
opacity: 0.12;
}
.rhyme-staff span:nth-child(1) { top: 18%; }
.rhyme-staff span:nth-child(2) { top: 36%; }
.rhyme-staff span:nth-child(3) { top: 54%; }
.rhyme-staff span:nth-child(4) { top: 72%; }
.rhyme-staff span:nth-child(5) { top: 90%; }
.rhyme-content {
position: relative; z-index: 2;
}
.rhyme-line {
display: grid;
grid-template-columns: 60px 1fr 200px;
align-items: baseline;
gap: 32px;
padding: 24px 0;
border-bottom: 1px solid rgba(201, 165, 92, 0.15);
transition: all 0.4s;
}
.rhyme-line:hover {
background: rgba(193, 39, 45, 0.05);
padding-left: 12px;
}
.rhyme-line:last-child { border-bottom: 0; }
.rhyme-num {
font-family: var(--font-en);
font-style: italic;
font-size: 18px;
color: var(--gold);
opacity: 0.6;
letter-spacing: 0.2em;
}
.rhyme-lyric {
font-family: var(--font-display);
font-size: 48px;
line-height: 1.4;
color: var(--rice);
letter-spacing: 0.05em;
}
.rhyme-note {
font-family: var(--font-en);
font-style: italic;
font-size: 14px;
color: var(--gold-light);
text-align: right;
letter-spacing: 0.2em;
opacity: 0.7;
align-self: end;
}
.rhyme-side {
display: flex; flex-direction: column; align-items: center; gap: 32px;
position: relative; z-index: 2;
width: 280px;
}
.side-tag {
font-family: var(--font-serif);
font-size: 18px;
line-height: 1.8;
color: var(--rice-warm);
text-align: center;
font-style: italic;
}
.rhyme-deco {
width: 160px; height: 160px;
color: var(--cinnabar);
animation: spin 30s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* ---------- 诗词长廊 ---------- */
.corpus {
position: relative;
background: linear-gradient(180deg, var(--ink) 0%, #221e1a 100%);
color: var(--rice);
padding-bottom: 140px;
overflow: hidden;
}
.corpus-bg {
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(193, 39, 45, 0.08), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(201, 165, 92, 0.08), transparent 40%);
pointer-events: none;
}
.corpus-deco-top {
display: flex;
justify-content: center;
gap: 24px;
padding: 0 0 60px;
position: relative; z-index: 2;
}
.corpus-deco-top span {
display: block;
width: 1px;
height: 60px;
background: linear-gradient(180deg, transparent 0%, var(--gold) 50%, transparent 100%);
opacity: 0.5;
animation: drop-line 4s ease-in-out infinite;
}
.corpus-deco-top span:nth-child(odd) { animation-delay: 0.4s; }
.corpus-deco-top span:nth-child(3n) { animation-delay: 0.8s; height: 80px; }
.corpus-deco-top span:nth-child(5n) { animation-delay: 1.2s; }
@keyframes drop-line {
0%, 100% { opacity: 0.3; transform: scaleY(0.8); }
50% { opacity: 0.8; transform: scaleY(1.2); }
}
.corpus-grid {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
position: relative; z-index: 2;
}
.verse-card {
background: rgba(245, 235, 216, 0.03);
border: 1px solid rgba(201, 165, 92, 0.25);
padding: 36px 30px 28px;
position: relative;
transition: all 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
display: flex;
flex-direction: column;
gap: 16px;
}
.verse-card::before {
content: "";
position: absolute;
top: 8px; left: 8px; right: 8px; bottom: 8px;
border: 1px solid rgba(201, 165, 92, 0.1);
pointer-events: none;
transition: border-color 0.4s;
}
.verse-card:hover {
background: rgba(245, 235, 216, 0.06);
transform: translateY(-4px);
border-color: rgba(201, 165, 92, 0.5);
}
.verse-card:hover::before {
border-color: rgba(193, 39, 45, 0.3);
}
.verse-card.verse-feature {
background: rgba(193, 39, 45, 0.04);
border-color: rgba(193, 39, 45, 0.4);
}
.verse-card.verse-feature::before {
border-color: rgba(193, 39, 45, 0.15);
}
.verse-tag {
font-family: var(--font-display);
font-size: 14px;
color: var(--gold);
letter-spacing: 0.15em;
padding-bottom: 12px;
border-bottom: 1px solid rgba(201, 165, 92, 0.2);
}
.verse-feature .verse-tag { color: var(--cinnabar); border-bottom-color: rgba(193, 39, 45, 0.3); }
.verse-title {
font-family: var(--font-serif);
font-size: 26px;
font-weight: 700;
color: var(--rice);
margin: 0;
letter-spacing: 0.04em;
line-height: 1.3;
}
.verse-feature .verse-title { font-size: 32px; }
.verse-author {
font-family: var(--font-en);
font-style: italic;
font-size: 13px;
color: var(--gold);
letter-spacing: 0.2em;
margin-top: -8px;
}
.verse-body {
font-family: var(--font-serif);
font-size: 17px;
line-height: 2.1;
color: var(--rice);
flex: 1;
}
.verse-body p { margin: 0; }
.verse-feature .verse-body { font-size: 18px; line-height: 2.15; }
.verse-note {
font-family: var(--font-serif);
font-size: 13px;
color: var(--gold-light);
font-style: italic;
padding-top: 12px;
border-top: 1px dashed rgba(201, 165, 92, 0.2);
margin-top: 8px;
text-align: right;
letter-spacing: 0.05em;
opacity: 0.7;
}
.corpus-quote {
max-width: 900px;
margin: 100px auto 0;
padding: 0 40px;
text-align: center;
position: relative; z-index: 2;
}
.corpus-quote .quote-mark-big {
font-family: var(--font-serif);
font-size: 80px;
color: var(--cinnabar);
line-height: 0.6;
opacity: 0.4;
margin-bottom: 8px;
}
.corpus-quote .quote-big {
font-family: var(--font-serif);
font-size: 28px;
line-height: 1.8;
color: var(--rice);
letter-spacing: 0.1em;
margin-bottom: 16px;
}
.corpus-quote .quote-small {
font-family: var(--font-en);
font-style: italic;
font-size: 13px;
color: var(--gold);
letter-spacing: 0.3em;
opacity: 0.6;
}
/* ---------- 多页面 — 通用页头 hero ---------- */
.page-hero {
position: relative;
min-height: 60vh;
padding: 140px 40px 80px;
display: flex; align-items: center;
overflow: hidden;
isolation: isolate;
}
.page-hero-dark {
background: linear-gradient(180deg, var(--ink) 0%, #14110E 100%);
color: var(--rice);
}
.page-hero-light {
background: linear-gradient(180deg, var(--rice) 0%, var(--rice-warm) 100%);
color: var(--ink);
}
.page-hero-mist {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse at 30% 50%, rgba(201, 165, 92, 0.12) 0%, transparent 50%),
radial-gradient(ellipse at 80% 30%, rgba(193, 39, 45, 0.1) 0%, transparent 50%);
}
.page-hero-grid {
max-width: 1400px;
margin: 0 auto;
width: 100%;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 60px;
align-items: center;
position: relative; z-index: 2;
}
.page-hero-eyebrow {
font-family: var(--font-en);
font-style: italic;
font-size: 13px;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--cinnabar);
margin-bottom: 20px;
display: inline-flex; align-items: center; gap: 12px;
}
.page-hero-eyebrow::before {
content: "";
width: 30px; height: 1px;
background: var(--cinnabar);
}
.page-hero-title {
font-family: var(--font-display);
font-size: clamp(96px, 12vw, 200px);
line-height: 0.9;
letter-spacing: 0.04em;
margin-bottom: 32px;
}
.page-hero-title .gold {
color: var(--gold);
-webkit-text-stroke: 1px var(--gold);
}
.page-hero-title .cinnabar {
color: var(--cinnabar);
}
.page-hero-text {
font-family: var(--font-serif);
font-size: 18px;
line-height: 2;
max-width: 540px;
opacity: 0.85;
}
.page-hero-text.dark-rice { color: var(--rice); }
.page-hero-text.light-ink { color: var(--ink-soft); }
.page-hero-art {
position: relative;
height: 360px;
display: flex; align-items: center; justify-content: center;
}
.page-hero-art svg { width: 100%; height: 100%; max-width: 360px; }
.page-hero-deco {
position: absolute;
font-family: var(--font-display);
font-size: 280px;
line-height: 0.8;
color: var(--cinnabar);
opacity: 0.06;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
letter-spacing: -0.05em;
}
.page-hero-meta {
display: flex; gap: 40px;
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid rgba(201, 165, 92, 0.25);
}
.page-hero-dark .page-hero-meta { border-top-color: rgba(201, 165, 92, 0.25); }
.page-hero-light .page-hero-meta { border-top-color: rgba(193, 39, 45, 0.2); }
.page-hero-meta .meta-item { display: flex; flex-direction: column; gap: 6px; }
.page-hero-meta .meta-label {
font-family: var(--font-en);
font-style: italic;
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--cinnabar);
opacity: 0.8;
}
.page-hero-meta .meta-value {
font-family: var(--font-serif);
font-size: 16px;
color: inherit;
}
/* ---------- 首页 — 端阳指南 (Guide) ---------- */
.guide {
background: var(--rice);
position: relative;
}
.guide::before {
content: "";
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 10% 30%, rgba(193, 39, 45, 0.04), transparent 30%),
radial-gradient(circle at 90% 70%, rgba(201, 165, 92, 0.06), transparent 30%);
pointer-events: none;
}
.guide-grid {
max-width: 1400px;
margin: 0 auto;
padding: 60px 40px 140px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.guide-card {
position: relative;
padding: 56px 48px 40px;
min-height: 460px;
display: flex; flex-direction: column;
justify-content: space-between;
border: 1px solid var(--mist);
overflow: hidden;
transition: all 0.6s cubic-bezier(.2,.7,.2,1);
isolation: isolate;
text-decoration: none;
color: inherit;
}
.guide-card::before {
content: "";
position: absolute; inset: 0;
background: var(--white-jade);
z-index: -1;
transition: background 0.6s;
}
.guide-card.guide-dark::before { background: var(--ink); }
.guide-card.guide-cinnabar::before { background: linear-gradient(135deg, var(--cinnabar) 0%, var(--cinnabar-deep) 100%); }
.guide-card.guide-bamboo::before { background: linear-gradient(135deg, var(--bamboo) 0%, var(--bamboo-deep) 100%); }
.guide-card.guide-ink::before { background: linear-gradient(135deg, var(--ink) 0%, #2A2520 100%); }
.guide-card.guide-dark,
.guide-card.guide-cinnabar,
.guide-card.guide-bamboo,
.guide-card.guide-ink { color: var(--rice); }
.guide-card .guide-num {
font-family: var(--font-display);
font-size: 80px;
line-height: 1;
color: var(--gold);
opacity: 0.7;
margin-bottom: 16px;
}
.guide-card .guide-eyebrow {
font-family: var(--font-en);
font-style: italic;
font-size: 12px;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--gold);
opacity: 0.8;
margin-bottom: 12px;
}
.guide-card .guide-name {
font-family: var(--font-display);
font-size: 88px;
line-height: 1;
letter-spacing: 0.04em;
margin-bottom: 20px;
}
.guide-card .guide-en {
font-family: var(--font-en);
font-style: italic;
font-size: 16px;
letter-spacing: 0.2em;
color: var(--gold);
margin-bottom: 24px;
opacity: 0.85;
}
.guide-card .guide-desc {
font-family: var(--font-serif);
font-size: 15px;
line-height: 1.9;
margin-bottom: 32px;
opacity: 0.9;
}
.guide-card .guide-cta {
display: flex; align-items: center; gap: 12px;
font-family: var(--font-serif);
font-size: 14px;
letter-spacing: 0.2em;
color: var(--gold);
padding-top: 20px;
border-top: 1px solid rgba(201, 165, 92, 0.3);
}
.guide-card .guide-arrow {
margin-left: auto;
font-family: var(--font-en);
font-size: 24px;
transition: transform 0.4s;
}
.guide-card:hover { transform: translateY(-12px); box-shadow: 0 40px 80px -20px rgba(26, 24, 21, 0.4); }
.guide-card:hover .guide-arrow { transform: translateX(12px); }
.guide-card .guide-deco {
position: absolute;
top: -40px; right: -40px;
width: 240px; height: 240px;
opacity: 0.12;
z-index: -1;
color: var(--gold);
transition: transform 0.6s;
}
.guide-card:hover .guide-deco { transform: rotate(20deg) scale(1.1); }
.guide-card.guide-cinnabar .guide-deco,
.guide-card.guide-bamboo .guide-deco { color: var(--gold); }
.guide-card.guide-dark .guide-deco,
.guide-card.guide-ink .guide-deco { color: var(--gold); }
/* ---------- 首页 — 节令信息条 ---------- */
.term {
background: linear-gradient(180deg, var(--rice) 0%, var(--rice-warm) 100%);
padding: 100px 40px;
position: relative;
}
.term-inner {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 48px;
align-items: center;
}
.term-cell {
text-align: center;
padding: 0 24px;
position: relative;
}
.term-cell:not(:last-child)::after {
content: "";
position: absolute;
right: -24px; top: 20%; bottom: 20%;
width: 1px;
background: var(--cinnabar);
opacity: 0.3;
}
.term-eyebrow {
font-family: var(--font-en);
font-style: italic;
font-size: 12px;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--cinnabar);
margin-bottom: 12px;
}
.term-val {
font-family: var(--font-display);
font-size: 64px;
line-height: 1;
color: var(--ink);
margin-bottom: 12px;
}
.term-label {
font-family: var(--font-serif);
font-size: 14px;
color: var(--ink-soft);
letter-spacing: 0.1em;
}
/* ---------- 首页 — 一言 ---------- */
.saying {
background: var(--ink);
color: var(--rice);
padding: 120px 40px;
text-align: center;
position: relative;
overflow: hidden;
}
.saying::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 50% 50%, rgba(201, 165, 92, 0.15) 0%, transparent 50%);
}
.saying-inner {
max-width: 900px;
margin: 0 auto;
position: relative; z-index: 2;
}
.saying-mark {
font-family: var(--font-display);
font-size: 100px;
line-height: 0.5;
color: var(--cinnabar);
opacity: 0.3;
margin-bottom: 32px;
}
.saying-text {
font-family: var(--font-serif);
font-size: 36px;
line-height: 2;
color: var(--rice);
margin-bottom: 24px;
letter-spacing: 0.05em;
}
.saying-from {
font-family: var(--font-en);
font-style: italic;
font-size: 14px;
color: var(--gold);
letter-spacing: 0.3em;
}
/* ---------- 多页 — 段落说明区 (intro) ---------- */
.intro {
max-width: 1400px;
margin: 0 auto;
padding: 60px 40px;
display: grid;
grid-template-columns: 200px 1fr;
gap: 60px;
align-items: start;
}
.intro-tag {
font-family: var(--font-en);
font-style: italic;
font-size: 12px;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--cinnabar);
padding-top: 12px;
border-top: 1px solid var(--cinnabar);
}
.intro-body {
font-family: var(--font-serif);
font-size: 18px;
line-height: 2.2;
color: var(--ink-soft);
max-width: 760px;
}
.intro-body em {
font-style: normal;
color: var(--cinnabar);
font-weight: 500;
}
/* ---------- 五毒图 (Five Poisons) ---------- */
.wudu {
background: var(--rice);
padding: 60px 0 100px;
position: relative;
overflow: hidden;
}
.wudu::before {
content: "";
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 30% 30%, rgba(74, 103, 65, 0.05), transparent 30%),
radial-gradient(circle at 70% 70%, rgba(193, 39, 45, 0.04), transparent 30%);
pointer-events: none;
}
.wudu-frame {
max-width: 700px;
margin: 0 auto;
padding: 40px;
position: relative;
background: var(--white-jade);
border: 2px solid var(--gold);
box-shadow: 0 20px 60px -10px rgba(26, 24, 21, 0.15);
}
.wudu-frame::before,
.wudu-frame::after {
content: "";
position: absolute;
width: 40px; height: 40px;
border: 2px solid var(--cinnabar);
}
.wudu-frame::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.wudu-frame::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.wudu-svg-wrap {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
}
.wudu-svg-wrap svg { width: 100%; height: 100%; }
.wudu-caption {
text-align: center;
margin-top: 24px;
font-family: var(--font-serif);
font-size: 14px;
color: var(--ink-soft);
line-height: 1.8;
letter-spacing: 0.1em;
}
.wudu-caption strong {
color: var(--cinnabar);
font-weight: 500;
}
/* ---------- 古画 (Gallery) ---------- */
.gallery {
background: linear-gradient(180deg, var(--rice) 0%, var(--rice-warm) 100%);
padding: 60px 0 140px;
position: relative;
}
.gallery::before {
content: "";
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-size: 80px 80px;
pointer-events: none;
opacity: 0.6;
}
.gallery-grid {
max-width: 1400px;
margin: 0 auto;
padding: 40px 40px 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.gallery-card {
background: var(--white-jade);
border: 1px solid var(--mist);
overflow: hidden;
transition: transform 0.5s, box-shadow 0.5s;
position: relative;
isolation: isolate;
}
.gallery-card:hover {
transform: translateY(-8px);
box-shadow: 0 30px 60px -20px rgba(26, 24, 21, 0.25);
}
.gallery-painting {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
background: linear-gradient(135deg, #E8DCC4 0%, #D4C3A0 100%);
overflow: hidden;
border-bottom: 1px solid var(--mist);
}
.gallery-painting svg { width: 100%; height: 100%; }
.gallery-painting::after {
content: "";
position: absolute; inset: 0;
background: radial-gradient(ellipse at center, transparent 30%, rgba(26, 24, 21, 0.08) 100%);
pointer-events: none;
}
.gallery-info {
padding: 24px 24px 20px;
}
.gallery-era {
font-family: var(--font-en);
font-style: italic;
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--cinnabar);
margin-bottom: 8px;
}
.gallery-name {
font-family: var(--font-display);
font-size: 24px;
color: var(--ink);
margin-bottom: 8px;
letter-spacing: 0.05em;
line-height: 1.3;
}
.gallery-author {
font-family: var(--font-serif);
font-size: 13px;
color: var(--ink-soft);
margin-bottom: 12px;
font-style: italic;
}
.gallery-desc {
font-family: var(--font-serif);
font-size: 14px;
line-height: 1.8;
color: var(--ink-soft);
}
/* ---------- 倒计时 (Countdown) ---------- */
.countdown {
background: var(--ink);
color: var(--rice);
padding: 100px 40px;
position: relative;
overflow: hidden;
}
.countdown::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 20% 50%, rgba(193, 39, 45, 0.15) 0%, transparent 50%),
radial-gradient(ellipse at 80% 50%, rgba(201, 165, 92, 0.1) 0%, transparent 50%);
}
.countdown-inner {
max-width: 1400px;
margin: 0 auto;
position: relative; z-index: 2;
text-align: center;
}
.countdown-eyebrow {
font-family: var(--font-en);
font-style: italic;
font-size: 14px;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 16px;
}
.countdown-title {
font-family: var(--font-display);
font-size: 64px;
line-height: 1;
color: var(--rice);
margin-bottom: 16px;
letter-spacing: 0.05em;
}
.countdown-subtitle {
font-family: var(--font-serif);
font-size: 16px;
color: var(--rice-warm);
margin-bottom: 60px;
opacity: 0.85;
}
.countdown-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 800px;
margin: 0 auto;
}
.countdown-cell {
position: relative;
padding: 32px 16px;
background: rgba(245, 235, 216, 0.04);
border: 1px solid rgba(201, 165, 92, 0.3);
transition: all 0.3s;
}
.countdown-cell:hover {
background: rgba(193, 39, 45, 0.1);
border-color: var(--cinnabar);
transform: translateY(-4px);
}
.countdown-num {
font-family: var(--font-display);
font-size: 80px;
line-height: 1;
color: var(--gold);
font-feature-settings: "tnum";
font-variant-numeric: tabular-nums;
text-shadow: 0 4px 16px rgba(201, 165, 92, 0.3);
margin-bottom: 12px;
}
.countdown-label {
font-family: var(--font-serif);
font-size: 14px;
color: var(--rice);
letter-spacing: 0.3em;
opacity: 0.7;
}
.countdown-date {
margin-top: 40px;
font-family: var(--font-en);
font-style: italic;
font-size: 14px;
color: var(--cinnabar);
letter-spacing: 0.2em;
}
/* ---------- 许愿墙 (Wishes) ---------- */
.wishes {
background: linear-gradient(180deg, var(--rice) 0%, var(--white-jade) 100%);
min-height: 80vh;
padding: 60px 0 100px;
position: relative;
overflow: hidden;
}
.wishes::before {
content: "";
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 10% 10%, rgba(193, 39, 45, 0.05), transparent 30%),
radial-gradient(circle at 90% 90%, rgba(201, 165, 92, 0.05), transparent 30%);
pointer-events: none;
}
.wishes-form {
max-width: 700px;
margin: 0 auto 60px;
padding: 0 40px;
position: relative; z-index: 5;
}
.wishes-form-inner {
display: flex;
gap: 12px;
padding: 16px;
background: var(--rice);
border: 1px solid var(--gold);
box-shadow: 0 8px 24px -8px rgba(26, 24, 21, 0.15);
}
.wishes-form input {
flex: 1;
border: 0;
background: transparent;
font-family: var(--font-display);
font-size: 20px;
color: var(--ink);
padding: 12px;
outline: none;
}
.wishes-form input::placeholder { color: var(--mist); }
.wishes-form button {
padding: 12px 24px;
background: var(--cinnabar);
color: var(--rice);
font-family: var(--font-serif);
font-size: 14px;
letter-spacing: 0.2em;
transition: background 0.3s;
}
.wishes-form button:hover { background: var(--cinnabar-deep); }
.wishes-board {
position: relative;
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 40px;
min-height: 600px;
}
.wish-card {
position: absolute;
padding: 16px 18px;
background: var(--rice);
border: 1px solid var(--mist);
font-family: var(--font-serif);
font-size: 15px;
line-height: 1.7;
color: var(--ink);
max-width: 220px;
box-shadow: 0 4px 12px -4px rgba(26, 24, 21, 0.1);
transition: transform 0.4s;
animation: wishFloat 12s ease-in-out infinite;
cursor: pointer;
}
.wish-card:hover {
transform: scale(1.05) rotate(0deg) !important;
z-index: 10;
box-shadow: 0 12px 30px -8px rgba(26, 24, 21, 0.2);
}
.wish-card::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 24px; height: 24px;
border-top: 2px solid var(--cinnabar);
border-left: 2px solid var(--cinnabar);
}
.wish-card::after {
content: "";
position: absolute;
bottom: 0; right: 0;
width: 24px; height: 24px;
border-bottom: 2px solid var(--cinnabar);
border-right: 2px solid var(--cinnabar);
}
.wish-card-text { margin-bottom: 8px; }
.wish-card-from {
font-family: var(--font-display);
font-size: 12px;
color: var(--cinnabar);
text-align: right;
border-top: 1px dashed var(--gold);
padding-top: 6px;
margin-top: 8px;
}
.wish-card.tone-1 { background: var(--rice); }
.wish-card.tone-2 { background: var(--white-jade); border-color: var(--gold); }
.wish-card.tone-3 { background: #FAF0E0; }
.wish-card.tone-4 { background: #F5E5D0; }
.wish-card.tone-5 { background: #EFE4C8; }
@keyframes wishFloat {
0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
50% { transform: translateY(-8px) rotate(var(--rot, 0deg)); }
}
.wishes-foot {
text-align: center;
font-family: var(--font-serif);
font-size: 13px;
color: var(--ink-soft);
letter-spacing: 0.2em;
margin-top: 40px;
position: relative; z-index: 5;
}
/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
.hero { padding: 80px 24px 60px; }
.hero-grid { grid-template-columns: 1fr; gap: 60px; }
.hero-right { order: -1; }
.boat-stage { height: 280px; }
.hero-title { font-size: clamp(140px, 28vw, 240px); text-align: center; }
.hero-sub { text-align: center; }
.hero-meta { justify-content: center; flex-wrap: wrap; gap: 24px; }
.hero-stamp { top: -10px; right: 0; }
.section-head { padding: 80px 24px 40px; }
.origin-grid, .poem-stage, .blessing-grid, .rhyme-stage {
grid-template-columns: 1fr;
gap: 40px;
padding-left: 24px; padding-right: 24px;
}
.origin-qu { grid-template-columns: 1fr; }
.customs-grid {
grid-template-columns: repeat(2, 1fr);
padding-left: 24px; padding-right: 24px;
}
.custom-1, .custom-2, .custom-3, .custom-4, .custom-5 { grid-column: span 1; }
.topbar { padding: 14px 20px; font-size: 12px; }
.topbar-nav { display: none; }
.foot-inner { grid-template-columns: 1fr; text-align: center; gap: 40px; }
.foot-brand { justify-content: center; }
.foot-copy { text-align: center; align-items: center; }
.numbers-grid {
grid-template-columns: repeat(2, 1fr);
padding-left: 24px; padding-right: 24px;
}
.num-big { font-size: 72px; }
.rhyme-line { grid-template-columns: 40px 1fr; gap: 16px; }
.rhyme-note { display: none; }
.rhyme-lyric { font-size: 32px; }
.rhyme-side { width: 100%; flex-direction: row; justify-content: center; }
.rhyme-deco { width: 120px; height: 120px; }
.atlas-rail { padding: 0 40px; gap: 24px; }
.atlas-card { flex: 0 0 240px; }
.hour-item { flex: 0 0 160px; }
.hour-zh { font-size: 40px; }
.page-hero { padding: 120px 24px 60px; min-height: 50vh; }
.page-hero-grid { grid-template-columns: 1fr; gap: 40px; }
.page-hero-art { display: none; }
.page-hero-meta { flex-wrap: wrap; gap: 24px; }
.guide-grid { grid-template-columns: 1fr; padding-left: 24px; padding-right: 24px; }
.guide-card { min-height: 380px; padding: 40px 32px 32px; }
.guide-card .guide-name { font-size: 64px; }
.term-inner { grid-template-columns: 1fr; gap: 40px; padding: 0 24px; }
.term-cell:not(:last-child)::after { display: none; }
.intro { grid-template-columns: 1fr; gap: 16px; padding: 40px 24px; }
.saying-text { font-size: 24px; }
.gallery-grid { grid-template-columns: 1fr; padding-left: 24px; padding-right: 24px; }
.wudu-frame { padding: 24px; }
.countdown-grid { grid-template-columns: repeat(2, 1fr); }
.countdown-num { font-size: 56px; }
.countdown-title { font-size: 40px; }
.wishes-board { padding: 24px; min-height: 500px; }
.wish-card { max-width: 180px; font-size: 14px; }
.wishes-form { padding: 0 24px; }
.wishes-form-inner { flex-direction: column; }
}
@media (max-width: 640px) {
.hero-title { font-size: 120px; }
.hero-stamp { width: 70px; height: 70px; }
.section-title { font-size: 56px; }
.customs-grid { grid-template-columns: 1fr; }
.poem-frame { padding: 36px 24px; }
.poem-verse { font-size: 18px; }
.card-headline { font-size: 56px; }
.blessing-form { padding: 28px 20px; }
.form-row { flex-wrap: wrap; }
.form-row label { width: 100%; }
.form-row input { width: 100%; font-size: 20px; }
.numbers-grid { grid-template-columns: 1fr; }
.num-big { font-size: 64px; }
.quote-big { font-size: 20px; }
.rhyme-lyric { font-size: 26px; }
.rhyme-line { padding: 16px 0; }
.atlas-card { flex: 0 0 220px; }
.atlas-illu { height: 160px; }
.hour-item { flex: 0 0 140px; }
.hour-zh { font-size: 32px; }
.hour-act { padding: 16px 8px; }
.hour-act-name { font-size: 18px; }
.hour-act-desc { font-size: 12px; }
.side-tag { font-size: 14px; }
.corpus-grid { grid-template-columns: 1fr; gap: 20px; }
.verse-card { padding: 24px 20px; }
.verse-title { font-size: 22px; }
.verse-feature .verse-title { font-size: 24px; }
.corpus-quote .quote-big { font-size: 20px; }
.legends-rail { grid-template-columns: 1fr 1fr; gap: 16px; }
.legends-rail::before { display: none; }
.legend-card[data-region]::after { display: none; }
.legends-foot p { font-size: 17px; }
.ns-stage { grid-template-columns: 1fr; gap: 24px; }
.ns-divider { flex-direction: row; padding: 16px 0; min-width: 0; }
.ns-div-line { width: 60px; height: 1px; }
.ns-div-char { font-size: 36px; }
.ns-side { padding: 0; }
.ns-region { font-size: 24px; }
.ns-foot p { font-size: 17px; }
.pentatonic-rail { grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 0 20px; }
.note-card { padding: 40px 8px 16px; }
.note-glyph { font-size: 48px; }
.instruments-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
.instrument-illu { height: 140px; }
.drum-stage { grid-template-columns: 1fr; gap: 40px; }
.drum-info-title { font-size: 28px; }
.drum-visual { width: 220px; height: 220px; }
.drum-step { width: 28px; height: 28px; font-size: 12px; }
}