mirror of
https://github.com/Vb-Lg/class-history-template.git
synced 2026-11-03 18:46:40 +00:00
1131 lines
22 KiB
CSS
1131 lines
22 KiB
CSS
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
--bg: #080c17;
|
||
--panel: rgba(255, 255, 255, .045);
|
||
--panel-hi: rgba(255, 255, 255, .08);
|
||
--line: rgba(230, 192, 104, .22);
|
||
--gold: #e6c068;
|
||
--gold-soft: #f4e0a8;
|
||
--blue: #6ea8fe;
|
||
--text: #e9ecf5;
|
||
--muted: #96a0b8;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", sans-serif;
|
||
line-height: 1.8;
|
||
overflow-x: hidden;
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
::selection {
|
||
background: rgba(230, 192, 104, .3);
|
||
color: #fff;
|
||
}
|
||
|
||
/* ===== 背景 ===== */
|
||
#stars {
|
||
position: fixed;
|
||
inset: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.glow {
|
||
position: fixed;
|
||
border-radius: 50%;
|
||
filter: blur(90px);
|
||
opacity: .35;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.glow.g1 {
|
||
width: 520px;
|
||
height: 520px;
|
||
background: #1b3a7a;
|
||
top: -180px;
|
||
left: -160px;
|
||
}
|
||
|
||
.glow.g2 {
|
||
width: 460px;
|
||
height: 460px;
|
||
background: #5a3d1a;
|
||
bottom: -160px;
|
||
right: -140px;
|
||
}
|
||
|
||
.glow.g3 {
|
||
width: 380px;
|
||
height: 380px;
|
||
background: #123f45;
|
||
top: 45%;
|
||
left: 60%;
|
||
opacity: .25;
|
||
}
|
||
|
||
.wrap {
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* ===== 顶部进度条 ===== */
|
||
#progress {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
height: 2px;
|
||
width: 0;
|
||
background: linear-gradient(90deg, var(--gold), var(--blue));
|
||
z-index: 99;
|
||
transition: width .1s linear;
|
||
box-shadow: 0 0 12px rgba(230, 192, 104, .7);
|
||
}
|
||
|
||
/* ===== 通用 ===== */
|
||
.container {
|
||
max-width: 1080px;
|
||
margin: 0 auto;
|
||
padding: 0 24px;
|
||
}
|
||
|
||
section {
|
||
padding: 110px 0;
|
||
position: relative;
|
||
}
|
||
|
||
.sec-tag {
|
||
display: inline-block;
|
||
font-size: 12px;
|
||
letter-spacing: .35em;
|
||
color: var(--gold);
|
||
text-transform: uppercase;
|
||
margin-bottom: 14px;
|
||
padding-left: 34px;
|
||
position: relative;
|
||
}
|
||
|
||
.sec-tag::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
width: 24px;
|
||
height: 1px;
|
||
background: var(--gold);
|
||
}
|
||
|
||
.sec-title {
|
||
font-size: clamp(26px, 4.4vw, 40px);
|
||
font-weight: 700;
|
||
letter-spacing: .06em;
|
||
line-height: 1.35;
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.sec-title em {
|
||
font-style: normal;
|
||
background: linear-gradient(100deg, var(--gold-soft), var(--gold) 45%, #b08a2e);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
.sec-desc {
|
||
color: var(--muted);
|
||
max-width: 620px;
|
||
font-size: 15.5px;
|
||
}
|
||
|
||
/* 滚动出现 */
|
||
.reveal {
|
||
opacity: 0;
|
||
transform: translateY(34px);
|
||
transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
|
||
}
|
||
|
||
.reveal.visible {
|
||
opacity: 1;
|
||
transform: none;
|
||
}
|
||
|
||
/* ===== 首屏 ===== */
|
||
.hero {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
padding: 100px 24px 80px;
|
||
position: relative;
|
||
}
|
||
|
||
.hero-badge {
|
||
font-size: 12px;
|
||
letter-spacing: .5em;
|
||
color: var(--gold);
|
||
border: 1px solid var(--line);
|
||
border-radius: 100px;
|
||
padding: 8px 20px 8px 24px;
|
||
margin-bottom: 34px;
|
||
background: rgba(230, 192, 104, .05);
|
||
animation: fadeDown 1s .1s both;
|
||
}
|
||
|
||
.hero h1 {
|
||
font-size: clamp(46px, 11vw, 110px);
|
||
font-weight: 800;
|
||
letter-spacing: .04em;
|
||
line-height: 1.05;
|
||
background: linear-gradient(180deg, #fff 10%, #e8d9a8 55%, #9c7c2e 100%);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
animation: fadeDown 1.2s .25s both;
|
||
filter: drop-shadow(0 8px 40px rgba(230, 192, 104, .22));
|
||
}
|
||
|
||
.hero .sub {
|
||
margin-top: 22px;
|
||
font-size: clamp(14px, 2.2vw, 18px);
|
||
color: var(--muted);
|
||
letter-spacing: .18em;
|
||
animation: fadeDown 1.2s .5s both;
|
||
min-height: 1.8em;
|
||
}
|
||
|
||
.hero .sub .cursor {
|
||
display: inline-block;
|
||
width: 1px;
|
||
height: 1em;
|
||
background: var(--gold);
|
||
vertical-align: -.12em;
|
||
margin-left: 3px;
|
||
animation: blink 1s steps(1) infinite;
|
||
}
|
||
|
||
.hero-line {
|
||
width: 1px;
|
||
height: 70px;
|
||
margin-top: 56px;
|
||
background: linear-gradient(180deg, transparent, var(--gold));
|
||
animation: fadeDown 1.4s .8s both;
|
||
}
|
||
|
||
.hero-line::after {
|
||
content: '';
|
||
display: block;
|
||
width: 5px;
|
||
height: 5px;
|
||
border-radius: 50%;
|
||
background: var(--gold);
|
||
margin: 0 auto;
|
||
transform: translateY(-2px);
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
/* 首屏：班史列表入口按钮（线下方） */
|
||
.hero-cta {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-top: 26px;
|
||
font-size: 14.5px;
|
||
font-weight: 600;
|
||
letter-spacing: .14em;
|
||
color: #241a05;
|
||
text-decoration: none;
|
||
background: linear-gradient(135deg, #f4e0a8, #e6c068 55%, #d3a94b);
|
||
border: none;
|
||
border-radius: 999px;
|
||
padding: 12px 34px;
|
||
cursor: pointer;
|
||
box-shadow: 0 10px 26px rgba(230, 192, 104, .25);
|
||
animation: fadeDown 1.4s 1s both;
|
||
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
|
||
}
|
||
|
||
.hero-cta:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 14px 32px rgba(230, 192, 104, .38);
|
||
filter: brightness(1.05);
|
||
}
|
||
|
||
.hero-cta:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.hero-nav {
|
||
display: flex;
|
||
gap: 16px;
|
||
margin-top: 24px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.hero-nav .nav-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 13.5px;
|
||
letter-spacing: .1em;
|
||
color: var(--gold);
|
||
text-decoration: none;
|
||
padding: 7px 16px;
|
||
border-radius: 100px;
|
||
border: 1px solid var(--line);
|
||
background: rgba(230, 192, 104, .05);
|
||
transition: .35s;
|
||
}
|
||
|
||
.hero-nav .nav-link:hover {
|
||
background: var(--gold);
|
||
color: #151006;
|
||
transform: translateX(-3px);
|
||
}
|
||
|
||
@keyframes blink {
|
||
|
||
0%,
|
||
50% {
|
||
opacity: 1
|
||
}
|
||
|
||
51%,
|
||
100% {
|
||
opacity: 0
|
||
}
|
||
}
|
||
|
||
@keyframes pulse {
|
||
|
||
0%,
|
||
100% {
|
||
opacity: .4;
|
||
transform: translateY(-2px) scale(1)
|
||
}
|
||
|
||
50% {
|
||
opacity: 1;
|
||
transform: translateY(-2px) scale(1.6)
|
||
}
|
||
}
|
||
|
||
@keyframes fadeDown {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-18px)
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: none
|
||
}
|
||
}
|
||
|
||
/* ===== 简介 + 数据 ===== */
|
||
.intro-grid {
|
||
display: grid;
|
||
grid-template-columns: 1.15fr .85fr;
|
||
gap: 56px;
|
||
align-items: center;
|
||
}
|
||
|
||
.intro-text p {
|
||
color: #c3cad9;
|
||
font-size: 16px;
|
||
margin-bottom: 18px;
|
||
}
|
||
|
||
.intro-text p:first-child::first-letter {
|
||
font-size: 2.6em;
|
||
float: left;
|
||
line-height: .9;
|
||
margin: 6px 12px 0 0;
|
||
color: var(--gold);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.stats {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 16px;
|
||
}
|
||
|
||
.stat {
|
||
background: var(--panel);
|
||
border: 1px solid rgba(255, 255, 255, .07);
|
||
border-radius: 16px;
|
||
padding: 24px 20px;
|
||
text-align: center;
|
||
transition: .4s;
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
|
||
.stat:hover {
|
||
background: var(--panel-hi);
|
||
transform: translateY(-4px);
|
||
border-color: var(--line);
|
||
}
|
||
|
||
.stat b {
|
||
display: block;
|
||
font-size: clamp(26px, 4vw, 36px);
|
||
font-weight: 800;
|
||
background: linear-gradient(180deg, #fff, var(--gold));
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.stat span {
|
||
font-size: 12.5px;
|
||
color: var(--muted);
|
||
letter-spacing: .12em;
|
||
}
|
||
|
||
/* ===== 时间轴 ===== */
|
||
.timeline {
|
||
position: relative;
|
||
margin-top: 64px;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 1px;
|
||
background: linear-gradient(180deg, transparent, rgba(230, 192, 104, .55) 12%, rgba(230, 192, 104, .55) 88%, transparent);
|
||
transform: translateX(-.5px);
|
||
}
|
||
|
||
.tl-item {
|
||
position: relative;
|
||
width: 50%;
|
||
padding: 0 46px 56px 0;
|
||
text-align: right;
|
||
}
|
||
|
||
.tl-item:nth-child(even) {
|
||
margin-left: 50%;
|
||
padding: 0 0 56px 46px;
|
||
text-align: left;
|
||
}
|
||
|
||
.tl-item:last-child {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.tl-dot {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: -6.5px;
|
||
width: 13px;
|
||
height: 13px;
|
||
border-radius: 50%;
|
||
background: var(--bg);
|
||
border: 2px solid var(--gold);
|
||
box-shadow: 0 0 0 4px rgba(230, 192, 104, .08);
|
||
transition: .4s;
|
||
}
|
||
|
||
.tl-item:nth-child(even) .tl-dot {
|
||
left: -6.5px;
|
||
right: auto;
|
||
}
|
||
|
||
.tl-item:hover .tl-dot {
|
||
background: var(--gold);
|
||
box-shadow: 0 0 16px rgba(230, 192, 104, .9);
|
||
}
|
||
|
||
.tl-card {
|
||
display: inline-block;
|
||
text-align: left;
|
||
max-width: 420px;
|
||
background: var(--panel);
|
||
border: 1px solid rgba(255, 255, 255, .07);
|
||
border-radius: 16px;
|
||
padding: 22px 24px;
|
||
transition: .45s cubic-bezier(.2, .7, .2, 1);
|
||
}
|
||
|
||
.tl-item:hover .tl-card {
|
||
background: var(--panel-hi);
|
||
border-color: var(--line);
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9);
|
||
}
|
||
|
||
.tl-date {
|
||
font-size: 12px;
|
||
letter-spacing: .2em;
|
||
color: var(--gold);
|
||
font-weight: 600;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.tl-card h3 {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
margin-bottom: 8px;
|
||
letter-spacing: .03em;
|
||
}
|
||
|
||
.tl-card p {
|
||
font-size: 14.5px;
|
||
color: var(--muted);
|
||
line-height: 1.85;
|
||
}
|
||
|
||
/* ===== 人物卡片 ===== */
|
||
.people {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 18px;
|
||
margin-top: 56px;
|
||
}
|
||
|
||
.person {
|
||
background: var(--panel);
|
||
border: 1px solid rgba(255, 255, 255, .07);
|
||
border-radius: 18px;
|
||
padding: 28px 22px;
|
||
text-align: center;
|
||
transition: .45s cubic-bezier(.2, .7, .2, 1);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.person::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(circle at 50% 0%, rgba(230, 192, 104, .16), transparent 65%);
|
||
opacity: 0;
|
||
transition: .5s;
|
||
}
|
||
|
||
.person:hover {
|
||
transform: translateY(-6px);
|
||
border-color: var(--line);
|
||
background: var(--panel-hi);
|
||
}
|
||
|
||
.person:hover::after {
|
||
opacity: 1;
|
||
}
|
||
|
||
.avatar {
|
||
width: 62px;
|
||
height: 62px;
|
||
margin: 0 auto 16px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
background: linear-gradient(140deg, rgba(230, 192, 104, .22), rgba(110, 168, 254, .18));
|
||
border: 1px solid var(--line);
|
||
}
|
||
|
||
.person h3 {
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
margin-bottom: 4px;
|
||
position: relative;
|
||
}
|
||
|
||
.person .role {
|
||
font-size: 12px;
|
||
letter-spacing: .18em;
|
||
color: var(--gold);
|
||
position: relative;
|
||
}
|
||
|
||
.person .quote {
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
margin-top: 12px;
|
||
position: relative;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* ===== 荣誉 ===== */
|
||
.honors {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||
gap: 16px;
|
||
margin-top: 56px;
|
||
}
|
||
|
||
.honor {
|
||
display: flex;
|
||
gap: 16px;
|
||
align-items: flex-start;
|
||
background: var(--panel);
|
||
border: 1px solid rgba(255, 255, 255, .07);
|
||
border-radius: 16px;
|
||
padding: 22px;
|
||
transition: .4s;
|
||
}
|
||
|
||
.honor:hover {
|
||
background: var(--panel-hi);
|
||
border-color: var(--line);
|
||
transform: translateX(4px);
|
||
}
|
||
|
||
.honor .medal {
|
||
flex: 0 0 42px;
|
||
height: 42px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 19px;
|
||
background: rgba(230, 192, 104, .12);
|
||
border: 1px solid var(--line);
|
||
}
|
||
|
||
.honor h4 {
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
.honor p {
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
}
|
||
|
||
/* ===== 记忆墙 ===== */
|
||
.gallery {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||
gap: 14px;
|
||
margin-top: 56px;
|
||
}
|
||
|
||
.photo {
|
||
aspect-ratio: 1/1;
|
||
border-radius: 16px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
border: 1px solid rgba(255, 255, 255, .07);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(150deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
|
||
transition: .5s cubic-bezier(.2, .7, .2, 1);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.photo:nth-child(3n) {
|
||
background: linear-gradient(150deg, rgba(230, 192, 104, .1), rgba(255, 255, 255, .015));
|
||
}
|
||
|
||
.photo:nth-child(4n) {
|
||
background: linear-gradient(150deg, rgba(110, 168, 254, .1), rgba(255, 255, 255, .015));
|
||
}
|
||
|
||
.photo:hover {
|
||
transform: scale(1.035);
|
||
border-color: var(--line);
|
||
}
|
||
|
||
.photo span {
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
letter-spacing: .1em;
|
||
text-align: center;
|
||
padding: 0 12px;
|
||
transition: .4s;
|
||
}
|
||
|
||
.photo:hover span {
|
||
color: var(--gold-soft);
|
||
}
|
||
|
||
.photo::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(circle at 50% 120%, rgba(230, 192, 104, .18), transparent 60%);
|
||
opacity: 0;
|
||
transition: .5s;
|
||
}
|
||
|
||
.photo:hover::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* ===== 留言墙 ===== */
|
||
.msg-form {
|
||
display: grid;
|
||
grid-template-columns: 200px 1fr auto;
|
||
gap: 12px;
|
||
margin-top: 48px;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.msg-form input,
|
||
.msg-form textarea {
|
||
background: var(--panel);
|
||
border: 1px solid rgba(255, 255, 255, .1);
|
||
border-radius: 14px;
|
||
padding: 14px 18px;
|
||
color: var(--text);
|
||
font-family: inherit;
|
||
font-size: 14.5px;
|
||
outline: none;
|
||
transition: .3s;
|
||
resize: none;
|
||
}
|
||
|
||
.msg-form input:focus,
|
||
.msg-form textarea:focus {
|
||
border-color: var(--line);
|
||
background: var(--panel-hi);
|
||
box-shadow: 0 0 0 4px rgba(230, 192, 104, .07);
|
||
}
|
||
|
||
.msg-form textarea {
|
||
min-height: 52px;
|
||
max-height: 140px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.msg-form button {
|
||
background: linear-gradient(140deg, var(--gold), #b8912f);
|
||
border: none;
|
||
border-radius: 14px;
|
||
padding: 0 30px;
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
font-size: 14.5px;
|
||
font-weight: 700;
|
||
color: #1a1405;
|
||
letter-spacing: .12em;
|
||
transition: .35s;
|
||
}
|
||
|
||
.msg-form button:hover {
|
||
filter: brightness(1.12);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 12px 26px -12px rgba(230, 192, 104, .8);
|
||
}
|
||
|
||
.msg-form button:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.msg-form button:disabled {
|
||
opacity: .6;
|
||
cursor: not-allowed;
|
||
transform: none;
|
||
box-shadow: none;
|
||
filter: none;
|
||
}
|
||
|
||
.msg-list {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||
gap: 14px;
|
||
margin-top: 28px;
|
||
}
|
||
|
||
.msg {
|
||
background: var(--panel);
|
||
border: 1px solid rgba(255, 255, 255, .07);
|
||
border-radius: 16px;
|
||
padding: 20px;
|
||
position: relative;
|
||
animation: pop .5s cubic-bezier(.2, .9, .3, 1.3) both;
|
||
}
|
||
|
||
@keyframes pop {
|
||
from {
|
||
opacity: 0;
|
||
transform: scale(.94) translateY(10px)
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: none
|
||
}
|
||
}
|
||
|
||
.msg .who {
|
||
font-size: 12px;
|
||
letter-spacing: .14em;
|
||
color: var(--gold);
|
||
margin-bottom: 8px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.msg .who time {
|
||
font-size: 11px;
|
||
color: #66708a;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.msg .body {
|
||
font-size: 14.5px;
|
||
color: #c9d0de;
|
||
line-height: 1.8;
|
||
word-break: break-word;
|
||
}
|
||
|
||
/* ===== 页脚 ===== */
|
||
footer {
|
||
text-align: center;
|
||
padding: 80px 24px 60px;
|
||
border-top: 1px solid rgba(255, 255, 255, .06);
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
footer .sig {
|
||
font-size: clamp(18px, 3vw, 24px);
|
||
font-weight: 700;
|
||
letter-spacing: .14em;
|
||
background: linear-gradient(100deg, var(--gold-soft), var(--gold));
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
footer p {
|
||
color: var(--muted);
|
||
font-size: 13px;
|
||
letter-spacing: .14em;
|
||
}
|
||
|
||
footer .small {
|
||
margin-top: 26px;
|
||
font-size: 12px;
|
||
color: #4c566b;
|
||
letter-spacing: .1em;
|
||
}
|
||
|
||
/* 回到顶部 */
|
||
#top {
|
||
position: fixed;
|
||
right: 24px;
|
||
bottom: 24px;
|
||
width: 46px;
|
||
height: 46px;
|
||
border-radius: 50%;
|
||
background: rgba(230, 192, 104, .12);
|
||
border: 1px solid var(--line);
|
||
color: var(--gold);
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
z-index: 50;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: .4s;
|
||
backdrop-filter: blur(10px);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
#top.show {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
#top:hover {
|
||
background: var(--gold);
|
||
color: #151006;
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
/* ============================================================
|
||
页眉 / 顶部导航
|
||
============================================================ */
|
||
.topbar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 60;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
|
||
padding: 14px 28px;
|
||
|
||
background: rgba(8, 12, 23, 0);
|
||
backdrop-filter: blur(0px);
|
||
-webkit-backdrop-filter: blur(0px);
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0);
|
||
|
||
transition:
|
||
background 0.4s ease,
|
||
backdrop-filter 0.4s ease,
|
||
border-color 0.4s ease,
|
||
padding 0.4s ease;
|
||
}
|
||
|
||
/* 滚动后「实心化」 */
|
||
.topbar.scrolled {
|
||
padding: 10px 28px;
|
||
background: rgba(8, 12, 23, 0.72);
|
||
backdrop-filter: blur(14px);
|
||
-webkit-backdrop-filter: blur(14px);
|
||
border-bottom-color: rgba(255, 255, 255, 0.06);
|
||
}
|
||
|
||
/* ---- 左侧标识 ---- */
|
||
.brand {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex: 0 0 auto; /* 品牌区不参与收缩 */
|
||
text-decoration: none;
|
||
color: var(--gold-soft, #f4e0a8);
|
||
font-size: 13.5px;
|
||
letter-spacing: 0.14em;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.brand-mark {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 50%;
|
||
border: 1px solid rgba(230, 192, 104, 0.35);
|
||
background: rgba(230, 192, 104, 0.1);
|
||
color: #e6c068;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
letter-spacing: 0;
|
||
box-shadow: 0 0 18px rgba(230, 192, 104, 0.18);
|
||
transition: 0.35s;
|
||
}
|
||
|
||
.brand:hover .brand-mark {
|
||
background: #e6c068;
|
||
color: #151006;
|
||
box-shadow: 0 0 26px rgba(230, 192, 104, 0.45);
|
||
}
|
||
|
||
/* ---- 右侧导航 ---- */
|
||
.topnav {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-start; /* 滚动容器用 flex-start，溢出时左侧项仍可达 */
|
||
gap: 4px;
|
||
|
||
flex: 1 1 auto; /* 占满剩余空间 */
|
||
min-width: 0; /* ★ 关键：允许在 flex 容器内收缩 */
|
||
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
overscroll-behavior-x: contain;
|
||
-webkit-overflow-scrolling: touch;
|
||
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
}
|
||
|
||
.topnav::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
/* ★ 空间足够时把整组推到最右；溢出时 auto margin 自动归零，第一项依然从最左侧开始。
|
||
first-child 带 .nav-cta 的变体必须列出：特异性 (0,3,1) 才能压过下方
|
||
.topnav a.nav-cta 的 margin-left: 6px（(0,2,1)，源码顺序更靠后），
|
||
否则 auto 被覆盖、整组按钮塌到左侧。 */
|
||
.topnav > a:first-child,
|
||
.topnav > a.nav-cta:first-child {
|
||
margin-left: auto;
|
||
}
|
||
|
||
.topnav a {
|
||
flex: 0 0 auto; /* 标签不被压缩 */
|
||
padding: 7px 12px;
|
||
border-radius: 100px;
|
||
font-size: 13px;
|
||
letter-spacing: 0.08em;
|
||
color: #96a0b8;
|
||
text-decoration: none;
|
||
white-space: nowrap;
|
||
transition:
|
||
color 0.3s,
|
||
background 0.3s;
|
||
}
|
||
|
||
.topnav a:hover {
|
||
color: #f4e0a8;
|
||
background: rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.topnav a.nav-cta {
|
||
margin-left: 6px;
|
||
color: #e6c068;
|
||
border: 1px solid rgba(230, 192, 104, 0.28);
|
||
background: rgba(230, 192, 104, 0.06);
|
||
}
|
||
|
||
.topnav a.nav-cta:hover {
|
||
background: #e6c068;
|
||
color: #151006;
|
||
}
|
||
|
||
/* ---- 锚点跳转时不被页眉盖住 ---- */
|
||
section[id] {
|
||
scroll-margin-top: 88px;
|
||
}
|
||
|
||
/* ---- 首屏给页眉让出空间 ---- */
|
||
.hero {
|
||
padding-top: 92px;
|
||
}
|
||
|
||
/* ============================================================
|
||
响应式
|
||
============================================================ */
|
||
@media (max-width:860px) {
|
||
.intro-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 36px;
|
||
}
|
||
|
||
.msg-form {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.msg-form button {
|
||
padding: 14px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
|
||
/* ---- 页眉 ---- */
|
||
.topbar,
|
||
.topbar.scrolled {
|
||
padding: 10px 12px;
|
||
gap: 10px;
|
||
}
|
||
|
||
.brand-text {
|
||
display: none;
|
||
}
|
||
|
||
.topnav {
|
||
/* 保留 flex-start：滚动容器里若用 flex-end，
|
||
内容溢出时左侧项会被推出可视区且滚不回来 */
|
||
justify-content: flex-start;
|
||
|
||
/* 右侧渐隐，提示「还能横向滑动」 */
|
||
-webkit-mask-image: linear-gradient(
|
||
90deg, #000 0, #000 calc(100% - 20px), transparent 100%
|
||
);
|
||
mask-image: linear-gradient(
|
||
90deg, #000 0, #000 calc(100% - 20px), transparent 100%
|
||
);
|
||
}
|
||
|
||
/* ★ 手机端：菜单靠右对齐。
|
||
空间足够 → auto margin 吃掉剩余空间，整组贴右；
|
||
空间不足 → auto margin 归零，从第一项开始正常横向滚动 */
|
||
.topnav > a:first-child {
|
||
margin-left: auto;
|
||
}
|
||
|
||
.topnav a {
|
||
padding: 6px 10px;
|
||
font-size: 12.5px;
|
||
}
|
||
|
||
.topnav a.nav-cta {
|
||
margin-left: 4px;
|
||
margin-right: 4px; /* 滚到最右时留点呼吸感 */
|
||
}
|
||
|
||
section[id] {
|
||
scroll-margin-top: 72px;
|
||
}
|
||
|
||
.hero {
|
||
padding-top: 80px;
|
||
}
|
||
|
||
/* ---- 正文 ---- */
|
||
section {
|
||
padding: 80px 0;
|
||
}
|
||
|
||
.timeline::before {
|
||
left: 6px;
|
||
}
|
||
|
||
.tl-item,
|
||
.tl-item:nth-child(even) {
|
||
width: 100%;
|
||
margin-left: 0;
|
||
padding: 0 0 44px 34px;
|
||
text-align: left;
|
||
}
|
||
|
||
.tl-dot,
|
||
.tl-item:nth-child(even) .tl-dot {
|
||
left: .5px;
|
||
right: auto;
|
||
}
|
||
|
||
.tl-card {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.stats {
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 12px;
|
||
}
|
||
|
||
.stat {
|
||
padding: 18px 12px;
|
||
}
|
||
|
||
.gallery {
|
||
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
|
||
gap: 10px;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.topbar {
|
||
transition: none;
|
||
}
|
||
}
|