/* ============================================
Design System — Mindloop-inspired dark monochrome
============================================ */
/* 字体加载策略：
- Google Fonts 通过 HTML 的 +
提前与 fonts.gstatic.com 建立连接（替代 CSS @import 的串行阻塞）
- 即使 Google Fonts 加载失败（中国大陆部分网络），下方 fallback 链确保渲染一致
- body 用 pluwen 中文字体范式覆盖 iOS/macOS/Win/Android 全端
- .serif 装饰类在中文场景回落到楷体 + font-synthesis:none 禁止伪斜 */
:root {
/* 暖色暗黑：底色不是纯黑，而是带一丝暖灰，配琥珀色点缀 */
--background: hsl(252 8% 6%);
--foreground: hsl(248 15% 96%);
--card: hsl(252 10% 9%);
--card-foreground: hsl(248 15% 96%);
--primary: hsl(248 15% 96%);
--primary-foreground: hsl(252 8% 6%);
--secondary: hsl(252 8% 14%);
--secondary-foreground: hsl(250 12% 85%);
--muted: hsl(252 8% 17%);
--muted-foreground: hsl(250 10% 65%);
/* 主点缀色：暖琥珀 */
--accent: hsl(252 55% 62%);
--accent-soft: hsl(252 40% 50%);
--accent-deep: hsl(256 35% 28%);
--accent-foreground: hsl(252 8% 6%);
--border: hsl(252 8% 22%);
--input: hsl(252 8% 18%);
--ring: hsl(252 35% 50%);
--hero-subtitle: hsl(250 18% 92%);
--max-width: 1280px;
--gutter-x: clamp(1.5rem, 5vw, 7rem);
/* ============================================
字体栈统一管理（避免"一句话内前后字体不同"）
============================================
- --font-sans：正文 + 全部中文场景默认字体
- --font-display：装饰用（数字大字、引言、标题）。Instrument Serif 排在最前
让英文/数字渲染为衬线 italic 装饰；中文 fallback 链与 --font-sans 完全一致，
因此句中夹的中文片段不会跳变成系统衬线（宋体/Songti）。
- 任何写"font-family: ..."的地方都引用这两个变量之一，不要再硬编码字体。 */
--font-sans:
'Inter',
system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue',
'PingFang SC', 'Microsoft YaHei',
'Source Han Sans SC', 'Noto Sans CJK SC',
sans-serif;
--font-display:
'Instrument Serif',
'Inter',
system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue',
'PingFang SC', 'Microsoft YaHei',
'Source Han Sans SC', 'Noto Sans CJK SC',
sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background: var(--background);
color: var(--foreground);
font-family: var(--font-sans);
font-weight: 400;
line-height: 1.5;
overflow-x: hidden;
position: relative;
}
/* 全站细密颗粒纹理：让暗色不死板，像胶片质感 */
body::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 200;
opacity: 0.05;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
::selection {
background: hsla(252, 55%, 62%, 0.28);
color: var(--foreground);
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
img,
video {
max-width: 100%;
display: block;
}
.serif {
/* 英文/数字字符走 Instrument Serif italic（设计意图：装饰强调）。
中文字符通过 --font-display 的 fallback 链回落到与 body 完全相同的字体，
确保「一句话内中文片段字体不变」。
font-synthesis: none 禁止浏览器对中文做伪斜体。 */
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-synthesis: none;
}
/* ============================================
Liquid Glass Effect
============================================ */
.liquid-glass {
background: rgba(255, 255, 255, 0.01);
background-blend-mode: luminosity;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: none;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.liquid-glass::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1.4px;
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.45) 0%,
rgba(255, 255, 255, 0.15) 20%,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, 0) 60%,
rgba(255, 255, 255, 0.15) 80%,
rgba(255, 255, 255, 0.45) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* ============================================
Layout
============================================ */
.container {
max-width: var(--max-width);
margin: 0 auto;
padding-left: var(--gutter-x);
padding-right: var(--gutter-x);
}
section {
padding: 6rem 0;
}
@media (min-width: 768px) {
section {
padding: 9rem 0;
}
}
/* ============================================
Navbar
============================================ */
.navbar {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 50;
padding: 1.4rem var(--gutter-x);
background: transparent;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.navbar-logo {
display: inline-flex;
align-items: baseline;
gap: 0.6rem;
font-weight: 600;
font-size: 1.05rem;
letter-spacing: 0.5px;
}
.logo-mark {
font-family: var(--font-sans);
font-weight: 600;
font-size: 0.78rem;
letter-spacing: 3.5px;
color: var(--accent);
padding: 0.3rem 0.65rem;
border: 1px solid var(--accent-soft);
border-radius: 4px;
line-height: 1;
}
.logo-mark::after {
content: none;
}
.navbar-logo > span:last-child {
font-weight: 600;
letter-spacing: 1px;
}
.navbar-links {
display: none;
gap: 0.75rem;
align-items: center;
color: var(--muted-foreground);
font-size: 0.875rem;
}
.navbar-links a:hover {
color: var(--foreground);
}
.navbar-links .dot {
opacity: 0.4;
}
@media (min-width: 768px) {
.navbar-links {
display: flex;
}
}
.navbar-actions {
display: flex;
gap: 0.5rem;
align-items: center;
}
.icon-btn {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--foreground);
font-size: 0.875rem;
cursor: pointer;
transition: transform 0.25s ease, background 0.25s ease;
}
.icon-btn:hover {
transform: translateY(2px);
background: rgba(255, 255, 255, 0.06);
}
/* ============================================
Hero
============================================ */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 8rem var(--gutter-x) 5rem;
overflow: hidden;
text-align: center;
}
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(ellipse at 75% 25%, hsla(252, 60%, 45%, 0.20) 0%, transparent 55%),
radial-gradient(ellipse at 15% 80%, hsla(330, 50%, 35%, 0.12) 0%, transparent 55%),
linear-gradient(180deg, hsl(252 10% 8%) 0%, hsl(252 8% 5%) 100%);
}
.hero-bg img,
.hero-bg video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 62%;
opacity: 1;
z-index: 0;
image-orientation: from-image;
/* 关键：径向羽化，照片铺满但四角柔和地融进暗色背景 */
-webkit-mask-image: radial-gradient(
ellipse 140% 120% at 50% 42%,
rgba(0, 0, 0, 1) 55%,
rgba(0, 0, 0, 0.92) 75%,
rgba(0, 0, 0, 0.55) 90%,
rgba(0, 0, 0, 0) 100%
);
mask-image: radial-gradient(
ellipse 140% 120% at 50% 42%,
rgba(0, 0, 0, 1) 55%,
rgba(0, 0, 0, 0.92) 75%,
rgba(0, 0, 0, 0.55) 90%,
rgba(0, 0, 0, 0) 100%
);
/* 缓慢 ken-burns，画面活起来 */
animation: heroKenBurns 38s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes heroKenBurns {
0% { transform: scale(1.04) translate3d(0, 0, 0); }
100% { transform: scale(1.13) translate3d(-1.2%, -1.5%, 0); }
}
@media (prefers-reduced-motion: reduce) {
.hero-bg img,
.hero-bg video {
animation: none;
}
}
/* 暖色暗角 + 底部渐隐 overlay：让中央人物保持清晰，标题区域足够沉静可读 */
.hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
/* 边角暖色暗调，强化视觉聚焦 */
radial-gradient(ellipse 85% 75% at 50% 45%,
transparent 55%,
hsla(256, 25%, 6%, 0.35) 85%,
hsla(256, 25%, 4%, 0.55) 100%),
/* 底部黑场为标题铺底 */
linear-gradient(180deg,
transparent 0%,
transparent 50%,
hsla(252, 8%, 4%, 0.6) 82%,
hsla(252, 8%, 4%, 0.95) 100%);
}
.hero-fade {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 18rem;
background: linear-gradient(to top, var(--background) 5%, transparent);
z-index: 1;
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 60rem;
margin: 0 auto;
}
/* 左文 + 右图 双栏 hero */
.hero-split {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 3.5rem;
align-items: center;
}
@media (min-width: 900px) {
.hero-split {
grid-template-columns: 1.15fr 0.85fr;
gap: 5rem;
}
}
.hero-text {
text-align: center;
}
@media (min-width: 900px) {
.hero-text {
text-align: left;
}
.hero-text .hero-title { margin-left: 0; }
.hero-text .hero-subtitle { margin-left: 0; margin-right: auto; }
.hero-text .hero-cta { justify-content: flex-start; }
}
.hero-photo {
position: relative;
border-radius: 1.5rem;
overflow: hidden;
aspect-ratio: 2 / 3;
max-width: 440px;
width: 100%;
margin: 0 auto;
border: 1px solid hsla(252, 30%, 35%, 0.4);
box-shadow:
0 35px 90px hsla(252, 60%, 25%, 0.35),
0 0 0 1px hsla(252, 40%, 50%, 0.12),
inset 0 1px 1px hsla(252, 50%, 80%, 0.08);
transform: rotate(-1deg);
transition: transform 0.5s ease;
}
.hero-photo:hover {
transform: rotate(0deg) scale(1.01);
}
.hero-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hero-photo::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
transparent 0%,
transparent 70%,
hsla(252, 8%, 5%, 0.35) 100%);
pointer-events: none;
}
.hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.75rem;
color: var(--muted-foreground);
font-size: 0.875rem;
margin-bottom: 1.5rem;
}
.avatar-stack {
display: inline-flex;
}
.avatar-stack > * {
width: 2rem;
height: 2rem;
border-radius: 50%;
border: 2px solid hsla(252, 8%, 4%, 0.85);
background: var(--secondary);
margin-left: -0.6rem;
box-shadow: 0 1px 4px hsla(0, 0%, 0%, 0.4);
}
.avatar-stack > *:first-child {
margin-left: 0;
background: linear-gradient(135deg, hsl(252 55% 55%) 0%, hsl(256 40% 30%) 100%);
}
.avatar-stack > *:nth-child(2) {
background: linear-gradient(135deg, hsl(330 45% 50%) 0%, hsl(348 35% 25%) 100%);
}
.hero-title {
font-size: clamp(1.75rem, 3.6vw, 3.25rem);
font-weight: 500;
letter-spacing: -1px;
line-height: 1.15;
margin-bottom: 1.25rem;
text-wrap: balance;
}
.hero-subtitle {
font-size: clamp(1rem, 1.4vw, 1.125rem);
color: var(--hero-subtitle);
max-width: 38rem;
margin: 0 auto 2.5rem;
line-height: 1.6;
}
.hero-cta {
display: inline-flex;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: center;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.95rem 2.1rem;
border-radius: 999px;
font-weight: 500;
font-size: 0.95rem;
cursor: pointer;
border: none;
transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.btn:active {
transform: scale(0.97);
}
.btn-primary {
background: var(--foreground);
color: var(--primary-foreground);
box-shadow: 0 8px 22px hsla(252, 30%, 4%, 0.45),
0 0 0 1px hsla(252, 50%, 70%, 0.12) inset;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px hsla(252, 30%, 4%, 0.55),
0 0 0 1px hsla(252, 50%, 70%, 0.18) inset;
}
.btn-glass {
color: var(--foreground);
border-radius: 999px;
padding: 0.95rem 2.1rem;
transition: transform 0.18s ease, background 0.25s ease;
}
.btn-glass:hover {
background: rgba(255, 255, 255, 0.05);
transform: translateY(-2px);
}
.btn-square {
border-radius: 0.625rem;
}
/* ============================================
Section Header
============================================ */
.section-eyebrow {
display: inline-block;
font-size: 0.75rem;
letter-spacing: 4px;
color: var(--accent);
margin-bottom: 1.5rem;
position: relative;
padding-left: 1.75rem;
}
.section-eyebrow::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 1.25rem;
height: 1px;
background: var(--accent);
transform: translateY(-50%);
}
.section-title {
font-size: clamp(2.25rem, 5vw, 4rem);
font-weight: 500;
letter-spacing: -1px;
line-height: 1.1;
margin-bottom: 1rem;
text-wrap: balance;
}
.section-subtitle {
font-size: 1.125rem;
color: var(--muted-foreground);
max-width: 42rem;
margin-bottom: 4rem;
line-height: 1.6;
}
/* ============================================
Trip Cards (Homepage list)
============================================ */
.trip-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 768px) {
.trip-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
}
.trip-card {
position: relative;
display: block;
border-radius: 1.25rem;
overflow: hidden;
background: var(--card);
border: 1px solid var(--border);
aspect-ratio: 4 / 5;
transition: transform 0.4s ease, border-color 0.3s ease, box-shadow 0.4s ease;
}
/* 纯文字卡片：不要长方形空黑，改成更扁的内容卡 */
.trip-card-text {
aspect-ratio: auto;
min-height: 19rem;
background:
radial-gradient(ellipse at top right, hsla(252, 50%, 35%, 0.22) 0%, transparent 60%),
radial-gradient(ellipse at bottom left, hsla(330, 35%, 25%, 0.12) 0%, transparent 55%),
linear-gradient(180deg, hsl(252 10% 11%) 0%, hsl(252 8% 6%) 100%);
}
.trip-card-text:hover {
box-shadow: 0 30px 60px hsla(252, 30%, 3%, 0.5),
0 0 0 1px hsla(252, 40%, 50%, 0.18);
}
.trip-card-text .trip-card-content {
position: relative;
inset: auto;
padding: 2.5rem 2rem 2rem;
}
.trip-card-text::before {
content: '';
position: absolute;
top: 0;
left: 2rem;
right: 2rem;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--accent-soft) 50%, transparent 100%);
opacity: 0.7;
transition: opacity 0.4s ease, left 0.4s ease, right 0.4s ease;
}
.trip-card-text:hover::before {
opacity: 1;
left: 1rem;
right: 1rem;
}
.trip-card-footer {
margin-top: 2rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border);
font-size: 0.85rem;
color: var(--accent);
letter-spacing: 0.5px;
}
.trip-card-text:hover .trip-card-footer {
color: var(--foreground);
}
.trip-card-placeholder-text {
font-size: 0.85rem;
letter-spacing: 2px;
color: hsla(252, 30%, 70%, 0.5);
}
.trip-card:hover {
transform: translateY(-4px);
border-color: hsla(0, 0%, 100%, 0.4);
}
.trip-card-bg {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 40%, hsla(252, 50%, 50%, 0.20) 0%, transparent 60%),
radial-gradient(circle at 80% 80%, hsla(330, 40%, 30%, 0.15) 0%, transparent 60%),
linear-gradient(180deg, hsl(252 10% 10%) 0%, hsl(252 8% 4%) 100%);
}
.trip-card-bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 25%;
opacity: 0.65;
transition: opacity 0.4s ease, transform 0.6s ease;
}
.trip-card:hover .trip-card-bg img {
opacity: 0.85;
transform: scale(1.04);
}
.trip-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
transparent 0%,
transparent 40%,
hsla(0, 0%, 0%, 0.85) 100%);
}
.trip-card-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 2rem;
}
.trip-card-meta {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.75rem;
letter-spacing: 2px;
color: var(--accent);
margin-bottom: 0.75rem;
}
.trip-card-title {
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 500;
letter-spacing: -1px;
line-height: 1.15;
margin-bottom: 0.5rem;
text-wrap: balance;
}
.trip-card-summary {
color: var(--secondary-foreground);
font-size: 0.95rem;
line-height: 1.5;
}
.trip-card-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: hsla(252, 30%, 70%, 0.4);
font-size: 0.75rem;
letter-spacing: 2px;
border: 1px dashed hsla(252, 30%, 50%, 0.2);
border-radius: 1.25rem;
pointer-events: none;
}
/* ============================================
Trip Detail Page
============================================ */
.trip-hero {
position: relative;
min-height: 90vh;
display: flex;
align-items: flex-end;
padding: 8rem var(--gutter-x) 6rem;
overflow: hidden;
}
.trip-hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 80% 20%, hsla(252, 55%, 45%, 0.22) 0%, transparent 55%),
radial-gradient(ellipse at 20% 80%, hsla(330, 40%, 30%, 0.14) 0%, transparent 60%),
linear-gradient(180deg, hsl(252 10% 8%) 0%, hsl(252 8% 4%) 100%);
}
.trip-hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.55;
image-orientation: from-image;
/* 同样的羽化处理：照片铺满，四角融入暗背景 */
-webkit-mask-image: radial-gradient(
ellipse 140% 120% at 50% 40%,
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 0.85) 75%,
rgba(0, 0, 0, 0.4) 92%,
rgba(0, 0, 0, 0) 100%
);
mask-image: radial-gradient(
ellipse 140% 120% at 50% 40%,
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 0.85) 75%,
rgba(0, 0, 0, 0.4) 92%,
rgba(0, 0, 0, 0) 100%
);
}
.trip-hero-fade {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 16rem;
background: linear-gradient(to top, var(--background), transparent);
}
.trip-hero-content {
position: relative;
z-index: 2;
max-width: var(--max-width);
margin: 0 auto;
width: 100%;
}
.trip-hero-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.5rem;
font-size: 0.75rem;
letter-spacing: 2.5px;
color: var(--accent);
margin-bottom: 1.5rem;
}
.trip-hero-meta .dot {
opacity: 0.4;
}
.trip-hero-title {
font-size: clamp(2.5rem, 8vw, 6rem);
font-weight: 500;
letter-spacing: -2px;
line-height: 1.05;
margin-bottom: 1.5rem;
max-width: 60rem;
text-wrap: balance;
}
.trip-hero-tagline {
font-size: clamp(1.125rem, 1.6vw, 1.5rem);
color: var(--hero-subtitle);
max-width: 50rem;
line-height: 1.5;
}
/* ============================================
Timeline
============================================ */
.timeline {
position: relative;
padding-left: 2rem;
border-left: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 3rem;
}
.timeline-item {
position: relative;
}
.timeline-marker {
position: absolute;
left: -2.4rem;
top: 0.4rem;
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
background: var(--accent);
border: 3px solid var(--background);
box-shadow: 0 0 0 1px var(--accent-soft), 0 0 14px hsla(252, 60%, 50%, 0.5);
animation: pulseDot 3s ease-in-out infinite;
}
@keyframes pulseDot {
0%, 100% { box-shadow: 0 0 0 1px var(--accent-soft), 0 0 14px hsla(252, 60%, 50%, 0.5); }
50% { box-shadow: 0 0 0 1px var(--accent-soft), 0 0 22px hsla(252, 70%, 55%, 0.75); }
}
@media (prefers-reduced-motion: reduce) {
.timeline-marker { animation: none; }
}
.timeline-time {
color: var(--accent);
}
.timeline-time {
font-size: 0.75rem;
letter-spacing: 2px;
margin-bottom: 0.5rem;
display: block;
}
.timeline-title {
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 0.5rem;
letter-spacing: -0.5px;
text-wrap: balance;
}
.timeline-body {
color: var(--secondary-foreground);
font-size: 0.95rem;
line-height: 1.65;
}
.timeline-actions {
margin-top: 1rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
padding: 0.3rem 0.85rem;
border-radius: 999px;
background: var(--secondary);
color: var(--secondary-foreground);
border: 1px solid transparent;
transition: border-color 0.2s ease, color 0.2s ease;
}
a.tag:hover {
border-color: var(--accent);
color: var(--accent);
}
.tag.warn {
background: hsla(348, 45%, 16%, 1);
color: hsla(330, 60%, 78%, 1);
border-color: hsla(348, 45%, 30%, 1);
}
.tag.good {
background: hsla(252, 35%, 18%, 1);
color: hsla(250, 55%, 78%, 1);
border-color: hsla(252, 40%, 35%, 1);
}
/* ============================================
Cards Grid (food / hotels / tips)
============================================ */
.cards-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 640px) {
.cards-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.cards-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.card {
padding: 1.75rem;
background:
radial-gradient(ellipse at top right, hsla(252, 35%, 25%, 0.12) 0%, transparent 60%),
var(--card);
border: 1px solid var(--border);
border-radius: 1rem;
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.4s ease;
position: relative;
overflow: hidden;
}
.card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, hsla(252, 50%, 60%, 0.25), transparent);
opacity: 0;
transition: opacity 0.4s ease;
}
.card:hover {
border-color: hsla(252, 40%, 55%, 0.4);
transform: translateY(-3px);
box-shadow: 0 18px 40px hsla(252, 30%, 3%, 0.45);
}
.card:hover::after {
opacity: 1;
}
.card-eyebrow {
display: block;
font-size: 0.7rem;
letter-spacing: 2.5px;
color: var(--accent);
margin-bottom: 0.75rem;
}
.card-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
letter-spacing: -0.3px;
text-wrap: balance;
}
.card-body {
color: var(--secondary-foreground);
font-size: 0.9rem;
line-height: 1.6;
}
.card-footer {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
align-items: center;
font-size: 0.8rem;
color: var(--muted-foreground);
}
.card-link {
color: var(--foreground);
border-bottom: 1px solid hsla(0, 0%, 100%, 0.3);
padding-bottom: 1px;
font-size: 0.85rem;
}
.card-link:hover {
border-color: var(--foreground);
}
/* ============================================
Pull quote
============================================ */
.pull-quote {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.6rem, 3.2vw, 2.6rem);
line-height: 1.4;
color: var(--hero-subtitle);
max-width: 50rem;
margin: 0 auto;
text-align: center;
position: relative;
padding: 2.5rem 1.5rem;
letter-spacing: 0.5px;
}
.pull-quote::before {
content: '"';
position: absolute;
top: -0.5rem;
left: 50%;
transform: translateX(-50%);
font-size: 6rem;
color: hsla(252, 50%, 55%, 0.18);
line-height: 1;
font-family: var(--font-display);
}
.pull-quote::after {
content: '';
position: absolute;
bottom: 0.5rem;
left: 50%;
transform: translateX(-50%);
width: 3rem;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
opacity: 0.6;
}
/* ============================================
Highlight reel (photo strip)
============================================ */
.photo-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
@media (min-width: 768px) {
.photo-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.photo-tile {
aspect-ratio: 4 / 5;
border-radius: 0.85rem;
overflow: hidden;
background:
radial-gradient(ellipse at top right, hsla(252, 35%, 25%, 0.18) 0%, transparent 60%),
var(--card);
border: 1px solid var(--border);
position: relative;
transition: transform 0.4s ease, border-color 0.3s ease;
}
.photo-tile:hover {
transform: translateY(-3px);
border-color: hsla(252, 40%, 55%, 0.35);
}
.photo-tile img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
image-orientation: from-image;
}
.photo-tile:hover img {
transform: scale(1.06);
}
.photo-tile.placeholder::before {
content: '';
position: absolute;
inset: 1rem;
border-radius: 0.5rem;
border: 1px dashed hsla(252, 30%, 50%, 0.18);
pointer-events: none;
}
.photo-tile.placeholder::after {
content: attr(data-label);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.78rem;
letter-spacing: 1.5px;
color: hsla(252, 35%, 72%, 0.55);
text-align: center;
padding: 1.5rem;
line-height: 1.5;
}
/* ============================================
Verdict / Rating
============================================ */
.verdict {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 3rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: 1.25rem;
}
@media (min-width: 768px) {
.verdict {
grid-template-columns: 1fr 2fr;
gap: 3rem;
}
}
.verdict-score {
font-size: clamp(3rem, 6vw, 5rem);
font-weight: 500;
letter-spacing: -2px;
line-height: 1;
}
.verdict-score small {
font-size: 1rem;
color: var(--muted-foreground);
font-weight: 400;
margin-left: 0.5rem;
letter-spacing: 0;
}
.verdict-label {
font-size: 0.7rem;
letter-spacing: 2.5px;
color: var(--accent);
margin-top: 0.75rem;
}
.verdict-body {
color: var(--secondary-foreground);
font-size: 1rem;
line-height: 1.7;
}
/* ============================================
Footer
============================================ */
.footer {
border-top: 1px solid var(--border);
padding: 3rem var(--gutter-x);
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
align-items: center;
justify-content: space-between;
font-size: 0.85rem;
color: var(--muted-foreground);
position: relative;
}
.footer::before {
content: '';
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 4rem;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.footer-links {
display: flex;
gap: 1.5rem;
}
.footer a {
transition: color 0.2s ease;
}
.footer a:hover {
color: var(--accent);
}
/* ============================================
Back link
============================================ */
.back-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--muted-foreground);
font-size: 0.875rem;
}
.back-link:hover {
color: var(--foreground);
}
/* ============================================
Reveal-on-scroll animation
============================================ */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.in-view {
opacity: 1;
transform: translateY(0);
}
/* Stagger children */
.reveal-stagger > * {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.45s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.55s; }
.reveal-stagger.in-view > *:nth-child(7) { transition-delay: 0.65s; }
.reveal-stagger.in-view > *:nth-child(8) { transition-delay: 0.75s; }
.reveal-stagger.in-view > * {
opacity: 1;
transform: translateY(0);
}
/* ============================================
Misc
============================================ */
.divider {
border: none;
border-top: 1px solid var(--border);
margin: 0;
}
.muted {
color: var(--muted-foreground);
}
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
}
.kbd {
font-family: 'SFMono-Regular', Consolas, monospace;
background: var(--secondary);
padding: 0.15rem 0.5rem;
border-radius: 4px;
font-size: 0.85rem;
color: var(--secondary-foreground);
}
/* 防止标点单字成行：把最后几个字+标点绑死 */
.nowrap {
white-space: nowrap;
}
/* ============================================
Verdict pair（李恩 / 李娜 各自一卡）
============================================ */
.verdict-pair {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 768px) {
.verdict-pair {
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
}
.verdict-card {
padding: 2rem;
background:
radial-gradient(ellipse at top right, hsla(252, 35%, 25%, 0.18) 0%, transparent 60%),
var(--card);
border: 1px solid var(--border);
border-radius: 1.25rem;
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.4s ease;
}
.verdict-card:hover {
border-color: hsla(252, 40%, 55%, 0.4);
transform: translateY(-2px);
box-shadow: 0 18px 40px hsla(252, 30%, 3%, 0.45);
}
.verdict-card-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.verdict-name {
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 1px;
color: var(--accent);
}
.verdict-score-inline {
font-family: var(--font-display);
font-style: italic;
font-size: 2.4rem;
font-weight: 400;
letter-spacing: -1px;
color: var(--foreground);
line-height: 1;
white-space: nowrap;
}
.verdict-score-inline small {
font-family: var(--font-sans);
font-style: normal;
font-size: 0.78rem;
color: var(--muted-foreground);
margin-left: 0.25rem;
letter-spacing: 0.5px;
}
.verdict-card-body {
color: var(--secondary-foreground);
font-size: 0.95rem;
line-height: 1.7;
}
/* Owner form (李恩/李娜 自填打分+留言) */
.owner-form {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.owner-stars {
margin-bottom: 0.15rem;
}
.owner-text {
width: 100%;
background: var(--input);
border: 1px solid var(--border);
border-radius: 0.65rem;
padding: 0.75rem 0.9rem;
color: var(--foreground);
font-family: inherit;
font-size: 0.92rem;
line-height: 1.6;
resize: vertical;
min-height: 4.5rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.owner-text::placeholder {
color: hsla(250, 10%, 55%, 1);
}
.owner-text:focus {
outline: none;
border-color: var(--accent-soft);
box-shadow: 0 0 0 3px hsla(252, 55%, 55%, 0.18);
}
.owner-form-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.owner-form-meta {
font-size: 0.75rem;
color: var(--muted-foreground);
letter-spacing: 0.3px;
}
.owner-submit {
padding: 0.65rem 1.4rem;
font-size: 0.88rem;
}
.owner-submit[disabled] {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.owner-form-msg {
font-size: 0.82rem;
letter-spacing: 0.3px;
color: var(--muted-foreground);
min-height: 1.1em;
}
.owner-form-msg.error { color: hsla(348, 70%, 72%, 1); }
.owner-form-msg.success { color: hsla(140, 35%, 70%, 1); }
/* ============================================
Visitor reviews（访客评价区）
============================================ */
.review-summary {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
align-items: center;
padding: 1.5rem 1.5rem;
margin-top: 2.5rem;
background:
radial-gradient(ellipse at top right, hsla(252, 35%, 25%, 0.18) 0%, transparent 60%),
var(--card);
border: 1px solid var(--border);
border-radius: 1.1rem;
}
@media (min-width: 600px) {
.review-summary {
grid-template-columns: auto 1fr;
gap: 1.5rem;
padding: 1.75rem 2rem;
}
}
.review-summary-score {
display: flex;
align-items: baseline;
gap: 0.3rem;
font-family: var(--font-display);
font-style: italic;
font-size: 2.6rem;
letter-spacing: -1px;
line-height: 1;
}
.review-summary-score small {
font-family: var(--font-sans);
font-style: normal;
font-size: 0.85rem;
color: var(--muted-foreground);
letter-spacing: 0.5px;
}
.review-stars-display {
position: relative;
display: inline-block;
font-size: 1.15rem;
letter-spacing: 4px;
line-height: 1;
}
.review-stars-display .star-out {
color: hsla(252, 8%, 28%, 1);
}
.review-stars-display .star-fill {
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
overflow: hidden;
width: var(--p, 0%);
color: var(--accent);
pointer-events: none;
}
.review-stars-display .star-fill::before {
content: '★★★★★';
letter-spacing: 4px;
}
.review-count {
font-size: 0.85rem;
color: var(--muted-foreground);
margin-top: 0.45rem;
letter-spacing: 0.3px;
}
/* form */
.review-form {
margin-top: 1.5rem;
padding: 1.5rem 1.25rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: 1.1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 600px) {
.review-form {
padding: 1.75rem 2rem;
}
}
.review-form-stars {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem 1rem;
}
.review-form-label {
font-size: 0.78rem;
letter-spacing: 2.5px;
color: var(--accent);
text-transform: uppercase;
}
.rating-input {
display: inline-flex;
gap: 0.1rem;
}
.star-btn {
background: none;
border: none;
padding: 0.1rem 0.2rem;
cursor: pointer;
font-size: 1.7rem;
line-height: 1;
color: hsla(252, 8%, 28%, 1);
transition: color 0.18s ease, transform 0.15s ease, text-shadow 0.18s ease;
}
.star-btn:hover {
transform: scale(1.12);
}
.star-btn.active {
color: var(--accent);
text-shadow: 0 0 12px hsla(252, 60%, 55%, 0.45);
}
.star-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
.review-name,
.review-text {
width: 100%;
background: var(--input);
border: 1px solid var(--border);
border-radius: 0.7rem;
padding: 0.85rem 1rem;
color: var(--foreground);
font-family: inherit;
font-size: 0.95rem;
line-height: 1.55;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.review-name::placeholder,
.review-text::placeholder {
color: hsla(250, 10%, 55%, 1);
}
.review-name:focus,
.review-text:focus {
outline: none;
border-color: var(--accent-soft);
box-shadow: 0 0 0 3px hsla(252, 55%, 55%, 0.18);
}
.review-text {
resize: vertical;
min-height: 5rem;
}
.review-form-foot {
display: flex;
flex-direction: column-reverse;
align-items: stretch;
gap: 0.75rem;
}
@media (min-width: 600px) {
.review-form-foot {
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
}
.review-form-hint {
font-size: 0.78rem;
color: var(--muted-foreground);
letter-spacing: 0.3px;
text-align: center;
}
@media (min-width: 600px) {
.review-form-hint {
text-align: left;
}
}
.review-submit {
padding: 0.85rem 1.8rem;
font-size: 0.95rem;
width: 100%;
}
@media (min-width: 600px) {
.review-submit {
width: auto;
padding: 0.7rem 1.8rem;
font-size: 0.9rem;
}
}
.review-submit[disabled] {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.review-form-msg {
font-size: 0.85rem;
letter-spacing: 0.3px;
color: var(--muted-foreground);
min-height: 1.2em;
}
.review-form-msg.error {
color: hsla(348, 70%, 72%, 1);
}
.review-form-msg.success {
color: hsla(140, 35%, 70%, 1);
}
/* list */
.review-list {
list-style: none;
margin-top: 2rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.review-item {
padding: 1.4rem 1.6rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: 0.9rem;
transition: border-color 0.3s ease;
}
.review-item:hover {
border-color: hsla(252, 40%, 55%, 0.3);
}
.review-item-head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 0.9rem;
margin-bottom: 0.65rem;
}
.review-item-name {
font-weight: 600;
font-size: 0.95rem;
color: var(--foreground);
letter-spacing: 0.3px;
}
.review-item-stars {
font-size: 0.95rem;
letter-spacing: 2px;
color: var(--accent);
line-height: 1;
}
.review-item-time {
margin-left: auto;
font-size: 0.78rem;
color: var(--muted-foreground);
letter-spacing: 0.3px;
}
.review-item-body {
color: var(--secondary-foreground);
font-size: 0.95rem;
line-height: 1.65;
white-space: pre-wrap;
word-break: break-word;
}
.review-empty {
padding: 1.5rem;
text-align: center;
font-size: 0.9rem;
color: var(--muted-foreground);
letter-spacing: 0.3px;
list-style: none;
border: 1px dashed var(--border);
border-radius: 0.9rem;
}
/* ============================================
Dashboard 看板
============================================ */
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
.stats-grid {
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
}
}
.stat-card {
position: relative;
padding: 1.75rem 1.5rem 1.5rem;
background:
radial-gradient(ellipse at top right, hsla(252, 50%, 35%, 0.18) 0%, transparent 65%),
var(--card);
border: 1px solid var(--border);
border-radius: 1rem;
overflow: hidden;
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.4s ease;
}
.stat-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, hsla(252, 60%, 60%, 0.45), transparent);
opacity: 0.6;
}
.stat-card:hover {
border-color: hsla(252, 40%, 55%, 0.4);
transform: translateY(-3px);
box-shadow: 0 18px 40px hsla(252, 30%, 3%, 0.45);
}
.stat-eyebrow {
display: block;
font-size: 0.7rem;
letter-spacing: 2.5px;
color: var(--accent);
margin-bottom: 0.85rem;
text-transform: uppercase;
}
.stat-number {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(2.6rem, 5vw, 3.6rem);
font-weight: 400;
letter-spacing: -2px;
line-height: 1;
color: var(--foreground);
display: flex;
align-items: baseline;
gap: 0.35rem;
margin-bottom: 0.65rem;
}
.stat-number small {
font-family: var(--font-sans);
font-style: normal;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 1px;
color: var(--muted-foreground);
}
.stat-foot {
font-size: 0.78rem;
color: var(--muted-foreground);
letter-spacing: 0.5px;
border-top: 1px dashed hsla(252, 8%, 22%, 0.6);
padding-top: 0.75rem;
}
/* 主区块：地图 + 侧边小卡 */
.dashboard-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
margin-bottom: 2.5rem;
}
@media (min-width: 980px) {
.dashboard-grid {
grid-template-columns: 1.55fr 1fr;
gap: 1.5rem;
}
}
.dash-map-card,
.dash-trip-card,
.dash-next-card {
position: relative;
padding: 1.75rem;
background:
radial-gradient(ellipse at top right, hsla(252, 35%, 25%, 0.22) 0%, transparent 60%),
var(--card);
border: 1px solid var(--border);
border-radius: 1.1rem;
transition: border-color 0.3s ease, box-shadow 0.4s ease;
}
.dash-map-card:hover,
.dash-trip-card:hover,
.dash-next-card:hover {
border-color: hsla(252, 40%, 55%, 0.35);
box-shadow: 0 18px 40px hsla(252, 30%, 3%, 0.4);
}
.dash-card-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
flex-wrap: wrap;
gap: 0.75rem;
}
.dash-eyebrow {
font-size: 0.7rem;
letter-spacing: 3px;
color: var(--accent);
text-transform: uppercase;
}
.dash-pill {
font-size: 0.72rem;
letter-spacing: 1px;
padding: 0.3rem 0.8rem;
border-radius: 999px;
background: hsla(330, 60%, 30%, 0.25);
color: hsl(330 70% 75%);
border: 1px solid hsla(330, 60%, 50%, 0.35);
}
.map-stage {
position: relative;
background:
radial-gradient(ellipse at center, hsla(252, 18%, 12%, 0.85) 0%, hsla(252, 10%, 7%, 1) 75%);
border-radius: 0.85rem;
overflow: hidden;
border: 1px solid hsla(252, 8%, 18%, 1);
}
.map-svg {
display: block;
width: 100%;
height: auto;
}
.map-pin .pulse-ring {
transform-origin: center;
animation: pinPulse 2.4s ease-out infinite;
}
@keyframes pinPulse {
0% { r: 6; opacity: 1; }
100% { r: 26; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.map-pin .pulse-ring { animation: none; }
}
.map-legend {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
margin-top: 1rem;
font-size: 0.78rem;
color: var(--muted-foreground);
letter-spacing: 0.5px;
}
.legend-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.legend-dot {
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
background: #a78bfa;
box-shadow: 0 0 8px hsla(330, 80%, 55%, 0.5);
}
.legend-dot.legend-pending {
background: hsla(252, 8%, 35%, 1);
box-shadow: none;
}
.legend-active {
color: hsl(252 50% 78%);
}
/* 侧边小卡（最近一程 + 下一程） */
.dash-side {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.dash-trip-title {
font-size: 1.4rem;
font-weight: 500;
letter-spacing: -0.5px;
margin: 0.85rem 0 0.4rem;
text-wrap: balance;
}
.dash-trip-meta {
font-size: 0.82rem;
color: var(--muted-foreground);
letter-spacing: 0.5px;
margin-bottom: 1rem;
}
.dash-trip-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 1.25rem;
}
.dash-trip-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.88rem;
color: var(--accent);
letter-spacing: 0.5px;
padding-top: 1rem;
border-top: 1px solid var(--border);
transition: color 0.2s ease, gap 0.2s ease;
}
.dash-trip-link:hover {
color: var(--foreground);
gap: 0.65rem;
}
.dash-next-title {
font-size: 1.4rem;
font-weight: 500;
letter-spacing: -0.5px;
margin: 0.85rem 0 0.65rem;
}
.dash-next-body {
font-size: 0.9rem;
color: var(--secondary-foreground);
line-height: 1.65;
margin-bottom: 1.25rem;
}
.dash-next-progress {
display: flex;
align-items: center;
gap: 0.85rem;
}
.dash-progress-bar {
flex: 1;
height: 0.4rem;
background: hsla(252, 8%, 18%, 1);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.dash-progress-bar > span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--accent-soft), var(--accent));
border-radius: 999px;
position: relative;
box-shadow: 0 0 12px hsla(252, 60%, 55%, 0.4);
}
.dash-progress-bar > span::after {
content: '';
position: absolute;
top: 0; right: -2px;
width: 6px;
height: 100%;
background: hsla(252, 70%, 75%, 1);
border-radius: 50%;
box-shadow: 0 0 8px hsla(252, 70%, 65%, 0.8);
}
.dash-progress-label {
font-size: 0.75rem;
color: var(--muted-foreground);
letter-spacing: 0.5px;
white-space: nowrap;
}
/* 习惯归档 */
.dash-habit-row {
display: grid;
grid-template-columns: 1fr;
gap: 0.85rem;
}
@media (min-width: 640px) {
.dash-habit-row {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.dash-habit-row {
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
}
.dash-habit {
display: flex;
align-items: flex-start;
gap: 0.85rem;
padding: 1rem 1.1rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: 0.85rem;
transition: border-color 0.3s ease, transform 0.3s ease;
}
.dash-habit:hover {
border-color: hsla(252, 40%, 55%, 0.35);
transform: translateY(-2px);
}
.dash-habit-num {
font-family: var(--font-display);
font-style: italic;
font-size: 1.6rem;
color: var(--accent);
line-height: 1;
flex-shrink: 0;
}
.dash-habit-title {
font-size: 0.92rem;
font-weight: 600;
color: var(--foreground);
margin-bottom: 0.25rem;
letter-spacing: -0.2px;
}
.dash-habit-body {
font-size: 0.78rem;
color: var(--muted-foreground);
line-height: 1.55;
}
/* ============================================
Trip TOC（行程页侧边栏目录）
============================================ */
.trip-toc {
position: fixed;
top: 50%;
left: 0.75rem;
transform: translateY(-50%);
z-index: 40;
width: 11rem;
max-height: calc(100vh - 6rem);
overflow-y: auto;
padding: 1.1rem 1rem;
background: hsla(252, 10%, 8%, 0.78);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid hsla(252, 8%, 22%, 0.7);
border-radius: 1rem;
box-shadow:
0 18px 50px hsla(252, 30%, 3%, 0.5),
inset 0 1px 1px hsla(252, 50%, 80%, 0.05);
font-size: 0.82rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease, transform 0.4s ease;
scrollbar-width: thin;
scrollbar-color: hsla(252, 30%, 40%, 0.5) transparent;
}
.trip-toc::-webkit-scrollbar { width: 4px; }
.trip-toc::-webkit-scrollbar-thumb {
background: hsla(252, 30%, 40%, 0.5);
border-radius: 4px;
}
.trip-toc.is-visible {
opacity: 1;
pointer-events: auto;
}
/* 桌面端默认隐藏，向下滚出 hero 之后由 JS 加 .is-visible */
@media (max-width: 1199px) {
.trip-toc { display: none; }
}
/* trip 子页：桌面端 toc 可见时，给 section 内容容器左侧让出 toc 宽度，
避免目录 fixed 在屏幕左侧时遮挡正文左缘（toc 占 left:0.75rem~11.75rem 区间） */
@media (min-width: 1200px) {
body:has(.trip-toc) section > .container {
padding-left: 13rem;
}
}
.trip-toc-head {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 0.75rem;
margin-bottom: 0.65rem;
border-bottom: 1px solid hsla(252, 8%, 22%, 0.7);
}
.trip-toc-eyebrow {
font-size: 0.66rem;
letter-spacing: 2.5px;
color: var(--accent);
text-transform: uppercase;
}
.trip-toc-progress {
width: 2.6rem;
height: 3px;
border-radius: 999px;
background: hsla(252, 8%, 18%, 1);
overflow: hidden;
}
.trip-toc-progress-bar {
display: block;
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--accent-soft), var(--accent));
border-radius: 999px;
transition: width 0.25s ease;
}
.trip-toc-nav {
display: flex;
flex-direction: column;
gap: 0.05rem;
}
.trip-toc-link {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.45rem 0.55rem;
border-radius: 0.55rem;
color: var(--muted-foreground);
letter-spacing: 0.2px;
position: relative;
border: 1px solid transparent;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.trip-toc-link:hover {
color: var(--foreground);
background: hsla(252, 30%, 30%, 0.18);
}
.trip-toc-link.is-active {
color: var(--foreground);
background: hsla(252, 50%, 30%, 0.28);
border-color: hsla(252, 50%, 50%, 0.3);
}
.trip-toc-link.is-active .trip-toc-num {
color: var(--accent);
}
.trip-toc-num {
font-family: var(--font-display);
font-style: italic;
font-size: 0.85rem;
color: hsla(252, 30%, 55%, 0.75);
flex-shrink: 0;
width: 1.6rem;
letter-spacing: 0;
transition: color 0.2s ease;
}
/* 移动端 FAB（点开弹出抽屉式目录） */
.trip-toc-fab {
position: fixed;
right: 1.1rem;
bottom: 1.1rem;
z-index: 50;
width: 3rem;
height: 3rem;
border-radius: 50%;
border: 1px solid hsla(252, 50%, 50%, 0.4);
background: hsla(252, 12%, 8%, 0.92);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--accent);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 12px 28px hsla(252, 30%, 3%, 0.55);
transition: transform 0.25s ease, background 0.25s ease;
}
.trip-toc-fab:hover {
transform: translateY(-2px);
background: hsla(252, 35%, 18%, 0.95);
}
.trip-toc-fab-icon {
display: flex;
flex-direction: column;
gap: 4px;
width: 1rem;
}
.trip-toc-fab-icon span {
display: block;
height: 1.5px;
background: var(--accent);
border-radius: 2px;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.trip-toc-fab-icon span:nth-child(1) { width: 100%; }
.trip-toc-fab-icon span:nth-child(2) { width: 70%; }
.trip-toc-fab-icon span:nth-child(3) { width: 90%; }
@media (min-width: 1200px) {
.trip-toc-fab { display: none; }
}
/* 移动端打开后的抽屉模式 */
.trip-toc.is-mobile-open {
display: block;
position: fixed;
top: auto;
bottom: 5rem;
right: 1.1rem;
left: auto;
transform: none;
width: min(18rem, calc(100vw - 2.2rem));
max-height: 60vh;
opacity: 1;
pointer-events: auto;
animation: tocSlideIn 0.3s ease;
}
@keyframes tocSlideIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================
Weather widget（实时天气）
============================================ */
.weather-card {
position: relative;
margin-top: 2.5rem;
padding: 1.75rem;
background:
radial-gradient(ellipse at top right, hsla(252, 50%, 35%, 0.22) 0%, transparent 60%),
radial-gradient(ellipse at bottom left, hsla(210, 40%, 25%, 0.15) 0%, transparent 60%),
var(--card);
border: 1px solid var(--border);
border-radius: 1.1rem;
overflow: hidden;
transition: border-color 0.3s ease, box-shadow 0.4s ease;
}
.weather-card[data-state="day"] {
background:
radial-gradient(ellipse at 75% 25%, hsla(252, 65%, 45%, 0.28) 0%, transparent 55%),
radial-gradient(ellipse at 15% 80%, hsla(248, 55%, 40%, 0.15) 0%, transparent 55%),
linear-gradient(170deg, hsl(252 14% 12%) 0%, hsl(252 8% 6%) 100%);
}
.weather-card[data-state="night"] {
background:
radial-gradient(ellipse at 75% 25%, hsla(220, 50%, 35%, 0.25) 0%, transparent 55%),
radial-gradient(ellipse at 15% 80%, hsla(260, 35%, 25%, 0.18) 0%, transparent 55%),
linear-gradient(170deg, hsl(220 14% 11%) 0%, hsl(225 12% 6%) 100%);
}
.weather-card:hover {
border-color: hsla(252, 40%, 55%, 0.35);
box-shadow: 0 22px 50px hsla(252, 30%, 3%, 0.45);
}
.weather-now {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
align-items: center;
margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
.weather-now {
grid-template-columns: 1fr auto;
}
}
.weather-loc {
display: flex;
flex-direction: column;
gap: 0.2rem;
margin-bottom: 0.75rem;
}
.weather-loc-name {
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 0.5px;
color: var(--foreground);
}
.weather-loc-sub {
font-size: 0.78rem;
color: var(--muted-foreground);
letter-spacing: 0.5px;
}
.weather-temp {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(4.5rem, 10vw, 6.5rem);
font-weight: 400;
letter-spacing: -4px;
line-height: 0.95;
color: var(--foreground);
display: flex;
align-items: flex-start;
}
.weather-temp-unit {
font-family: var(--font-sans);
font-style: normal;
font-size: 1.2rem;
font-weight: 500;
color: var(--muted-foreground);
letter-spacing: 0;
margin-left: 0.4rem;
margin-top: 0.85rem;
}
.weather-desc {
font-size: 1rem;
color: var(--secondary-foreground);
letter-spacing: 0.3px;
margin-top: 0.35rem;
}
.weather-now-right {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.85rem;
}
@media (min-width: 640px) {
.weather-now-right {
align-items: flex-end;
}
}
.weather-icon {
width: 5.5rem;
height: 5.5rem;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* 天气图标基础元素 */
.weather-icon svg {
width: 100%;
height: 100%;
overflow: visible;
}
.weather-update {
font-size: 0.72rem;
color: var(--muted-foreground);
letter-spacing: 0.5px;
}
/* 当前指标 */
.weather-stats {
list-style: none;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
padding: 1rem 1.2rem;
margin: 0 0 1.5rem;
background: hsla(252, 8%, 6%, 0.5);
border: 1px solid hsla(252, 8%, 22%, 0.6);
border-radius: 0.85rem;
}
@media (min-width: 640px) {
.weather-stats {
grid-template-columns: repeat(4, 1fr);
}
}
.weather-stats li {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.4rem 0;
border-right: 1px solid hsla(252, 8%, 22%, 0.5);
}
.weather-stats li:last-child {
border-right: none;
}
@media (max-width: 639px) {
.weather-stats li:nth-child(2n) { border-right: none; }
.weather-stats li:nth-child(-n+2) { border-bottom: 1px solid hsla(252, 8%, 22%, 0.5); }
}
.wx-stat-key {
font-size: 0.7rem;
color: var(--muted-foreground);
letter-spacing: 1.5px;
}
.wx-stat-val {
font-size: 1.05rem;
font-weight: 600;
color: var(--foreground);
letter-spacing: 0.3px;
}
/* 7 天预报 */
.weather-forecast {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0.4rem;
}
@media (max-width: 720px) {
.weather-forecast {
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
}
}
.wx-day {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding: 0.85rem 0.5rem 0.85rem;
background: hsla(252, 10%, 9%, 0.5);
border: 1px solid hsla(252, 8%, 22%, 0.6);
border-radius: 0.7rem;
transition: border-color 0.25s ease, transform 0.25s ease;
}
.wx-day:hover {
border-color: hsla(252, 40%, 55%, 0.35);
transform: translateY(-2px);
}
.wx-day.is-today {
border-color: hsla(252, 50%, 50%, 0.45);
background: hsla(252, 35%, 16%, 0.7);
}
.wx-day-label {
font-size: 0.72rem;
letter-spacing: 1px;
color: var(--muted-foreground);
}
.wx-day.is-today .wx-day-label {
color: var(--accent);
}
.wx-day-icon {
width: 1.85rem;
height: 1.85rem;
display: flex;
align-items: center;
justify-content: center;
}
.wx-day-icon svg {
width: 100%;
height: 100%;
}
.wx-day-temp {
font-size: 0.78rem;
color: var(--foreground);
letter-spacing: 0.3px;
text-align: center;
line-height: 1.3;
}
.wx-day-temp .wx-hi {
font-weight: 600;
color: var(--foreground);
}
.wx-day-temp .wx-lo {
color: var(--muted-foreground);
}
/* 错误回退 */
.weather-error {
margin: 1rem 0;
padding: 0.85rem 1rem;
background: hsla(348, 35%, 18%, 0.6);
border: 1px solid hsla(348, 45%, 30%, 1);
border-radius: 0.7rem;
color: hsla(330, 60%, 78%, 1);
font-size: 0.85rem;
}
.weather-error a {
color: hsla(330, 70%, 80%, 1);
border-bottom: 1px solid hsla(330, 70%, 80%, 0.4);
}
/* 底部 */
.weather-foot {
margin-top: 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.72rem;
color: var(--muted-foreground);
letter-spacing: 0.5px;
}
.weather-refresh {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.85rem;
background: transparent;
color: var(--muted-foreground);
border: 1px solid hsla(252, 8%, 22%, 0.8);
border-radius: 999px;
font-size: 0.75rem;
letter-spacing: 0.5px;
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease;
font-family: inherit;
}
.weather-refresh:hover {
color: var(--accent);
border-color: hsla(252, 50%, 50%, 0.4);
}
.weather-refresh-icon {
display: inline-block;
transition: transform 0.5s ease;
}
.weather-refresh.is-spinning .weather-refresh-icon {
animation: wxSpin 0.8s linear infinite;
}
@keyframes wxSpin {
to { transform: rotate(360deg); }
}
/* 骨架屏 */
.wx-skeleton {
width: 100%;
height: 100%;
border-radius: 0.5rem;
background: linear-gradient(90deg,
hsla(252, 8%, 14%, 0.6) 0%,
hsla(252, 8%, 22%, 0.7) 40%,
hsla(252, 8%, 14%, 0.6) 80%);
background-size: 200% 100%;
animation: wxShimmer 1.5s ease-in-out infinite;
}
.wx-skeleton-strip {
width: 100%;
height: 5.5rem;
}
@keyframes wxShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* 天气图标动画（CSS 绘制 SVG 内的元素） */
.wx-sun-rays {
transform-origin: 50% 50%;
animation: wxSunSpin 30s linear infinite;
}
@keyframes wxSunSpin {
to { transform: rotate(360deg); }
}
.wx-cloud {
animation: wxCloudFloat 6s ease-in-out infinite;
}
@keyframes wxCloudFloat {
0%, 100% { transform: translateX(-1.5px); }
50% { transform: translateX(1.5px); }
}
.wx-rain-drop {
animation: wxRainDrop 1.4s linear infinite;
}
.wx-rain-drop:nth-child(2) { animation-delay: 0.4s; }
.wx-rain-drop:nth-child(3) { animation-delay: 0.8s; }
@keyframes wxRainDrop {
0% { transform: translateY(-4px); opacity: 0; }
20% { opacity: 1; }
80% { opacity: 1; }
100% { transform: translateY(8px); opacity: 0; }
}
.wx-snow {
animation: wxSnowFloat 3s ease-in-out infinite;
}
@keyframes wxSnowFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(2px) rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) {
.wx-sun-rays, .wx-cloud, .wx-rain-drop, .wx-snow, .wx-skeleton {
animation: none;
}
}
/* ============================================
打卡墙 Check-in Wall
============================================ */
/* 打卡页：实心玻璃导航（首页是透明覆盖 hero，这里是 sticky 实心） */
.navbar-solid {
position: sticky;
top: 0;
background: hsla(252, 10%, 6%, 0.82);
backdrop-filter: blur(16px) saturate(1.4);
-webkit-backdrop-filter: blur(16px) saturate(1.4);
border-bottom: 1px solid hsla(252, 8%, 22%, 0.55);
padding-top: max(1.4rem, env(safe-area-inset-top));
}
.navbar-links a.is-current {
color: var(--accent);
}
.checkin-open-btn {
font-family: inherit;
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.3px;
padding: 0.5rem 1.05rem;
border-radius: 999px;
background: var(--accent);
color: var(--accent-foreground);
border: none;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.2s ease;
box-shadow: 0 6px 18px hsla(252, 55%, 30%, 0.35);
}
.checkin-open-btn:hover {
transform: translateY(-1px);
background: hsl(252 60% 67%);
}
.checkin-open-btn:active { transform: scale(0.96); }
/* 头部 */
.checkin-head {
position: relative;
padding: clamp(4rem, 11vw, 7rem) 0 2.5rem;
overflow: hidden;
}
.checkin-head-glow {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse 60% 55% at 80% -10%, hsla(252, 62%, 48%, 0.20) 0%, transparent 60%),
radial-gradient(ellipse 50% 50% at 5% 30%, hsla(330, 45%, 32%, 0.14) 0%, transparent 60%);
}
.checkin-head-title {
font-size: clamp(2rem, 5.2vw, 3.4rem);
font-weight: 500;
letter-spacing: -1px;
line-height: 1.12;
margin: 0.5rem 0 1rem;
text-wrap: balance;
}
.checkin-head-sub {
font-size: clamp(0.98rem, 1.4vw, 1.12rem);
color: var(--secondary-foreground);
max-width: 40rem;
line-height: 1.65;
}
.checkin-stats {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.6rem;
margin-top: 1.75rem;
font-size: 0.92rem;
color: var(--muted-foreground);
letter-spacing: 0.3px;
}
.ci-stat b {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: 1.5rem;
color: var(--accent);
margin-right: 0.15rem;
}
.ci-stat-dot { opacity: 0.4; }
/* 工具条 */
.checkin-board-section { padding-top: 0; padding-bottom: 6rem; }
.checkin-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 2.25rem;
position: sticky;
top: 4.6rem;
z-index: 30;
padding: 0.6rem 0;
}
.checkin-filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.ci-filter {
font-family: inherit;
font-size: 0.85rem;
letter-spacing: 0.3px;
padding: 0.45rem 0.95rem;
border-radius: 999px;
background: hsla(252, 10%, 12%, 0.7);
color: var(--muted-foreground);
border: 1px solid var(--border);
cursor: pointer;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.ci-filter:hover { color: var(--foreground); border-color: hsla(252, 40%, 50%, 0.4); }
.ci-filter.is-active {
color: var(--accent-foreground);
background: var(--accent);
border-color: var(--accent);
font-weight: 500;
}
.checkin-toolbar .checkin-open {
padding: 0.6rem 1.4rem;
font-size: 0.9rem;
}
/* 瀑布流网格 */
.checkin-grid {
columns: 1;
column-gap: 1.25rem;
}
@media (min-width: 560px) { .checkin-grid { columns: 2; } }
@media (min-width: 900px) { .checkin-grid { columns: 3; } }
@media (min-width: 1280px) { .checkin-grid { columns: 4; } }
.checkin-loading,
.checkin-empty {
padding: 4rem 1.5rem;
text-align: center;
color: var(--muted-foreground);
font-size: 0.95rem;
letter-spacing: 0.3px;
}
/* 打卡卡片 */
.ci-card {
break-inside: avoid;
margin-bottom: 1.25rem;
display: block;
background: var(--card);
border: 1px solid var(--border);
border-radius: 1.1rem;
overflow: hidden;
transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.4s ease;
animation: ciCardIn 0.5s ease backwards;
animation-delay: calc(var(--i, 0) * 0.04s);
}
@keyframes ciCardIn {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.ci-card:hover {
border-color: hsla(252, 40%, 55%, 0.45);
transform: translateY(-3px);
box-shadow: 0 22px 48px hsla(252, 30%, 3%, 0.5);
}
.ci-card-photo {
position: relative;
cursor: zoom-in;
background: hsl(252 10% 8%);
line-height: 0;
}
.ci-card-photo img {
width: 100%;
height: auto;
object-fit: cover;
transition: opacity 0.3s ease;
}
.ci-card-cat,
.ci-card-cat-big {
position: absolute;
top: 0.7rem;
left: 0.7rem;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
border-radius: 50%;
background: hsla(252, 10%, 6%, 0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid hsla(252, 40%, 60%, 0.3);
}
.ci-card-count {
position: absolute;
bottom: 0.7rem;
right: 0.7rem;
font-size: 0.72rem;
letter-spacing: 0.5px;
padding: 0.2rem 0.6rem;
border-radius: 999px;
color: var(--foreground);
background: hsla(252, 10%, 6%, 0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* 无照片卡片：暖色渐变铺底 */
.ci-card--text {
background:
radial-gradient(ellipse at top right, hsla(252, 50%, 35%, 0.22) 0%, transparent 60%),
radial-gradient(ellipse at bottom left, hsla(330, 35%, 25%, 0.14) 0%, transparent 55%),
linear-gradient(180deg, hsl(252 10% 11%) 0%, hsl(252 8% 6%) 100%);
}
.ci-card-nophoto {
position: relative;
height: 5.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.ci-card-cat-big {
position: static;
width: 3rem;
height: 3rem;
font-size: 1.6rem;
}
.ci-card-body { padding: 1.15rem 1.25rem 1.25rem; }
.ci-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.55rem;
}
.ci-card-place {
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -0.2px;
line-height: 1.3;
text-wrap: balance;
}
.ci-card-rating {
flex-shrink: 0;
font-size: 0.82rem;
letter-spacing: 1px;
color: var(--accent);
line-height: 1;
}
.ci-star-dim { color: hsla(252, 8%, 30%, 1); }
.ci-card-addr {
font-size: 0.8rem;
color: var(--muted-foreground);
letter-spacing: 0.2px;
line-height: 1.4;
margin-bottom: 0.5rem;
}
.ci-card-text {
font-size: 0.9rem;
color: var(--secondary-foreground);
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ci-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-top: 0.9rem;
padding-top: 0.8rem;
border-top: 1px solid var(--border);
font-size: 0.75rem;
color: var(--muted-foreground);
letter-spacing: 0.3px;
}
.ci-card-author {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--secondary-foreground);
}
.ci-card-author-dot {
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background: linear-gradient(135deg, hsl(252 55% 55%), hsl(256 40% 30%));
}
/* ============================================
录入面板（底部抽屉 / 桌面居中）
============================================ */
.checkin-modal {
position: fixed;
inset: 0;
z-index: 100;
display: flex;
align-items: flex-end;
justify-content: center;
}
.checkin-modal[hidden] { display: none; }
.checkin-modal-backdrop {
position: absolute;
inset: 0;
background: hsla(252, 10%, 3%, 0.6);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
opacity: 0;
transition: opacity 0.28s ease;
}
.checkin-modal.is-open .checkin-modal-backdrop { opacity: 1; }
.checkin-sheet {
position: relative;
width: 100%;
max-width: 580px;
max-height: 92vh;
overflow-y: auto;
background:
radial-gradient(ellipse at top, hsla(252, 35%, 22%, 0.3) 0%, transparent 55%),
hsl(252 10% 9%);
border: 1px solid hsla(252, 30%, 30%, 0.5);
border-bottom: none;
border-radius: 1.5rem 1.5rem 0 0;
padding: 1.5rem 1.5rem max(1.6rem, env(safe-area-inset-bottom));
transform: translateY(100%);
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
scrollbar-width: thin;
scrollbar-color: hsla(252, 30%, 40%, 0.5) transparent;
}
.checkin-modal.is-open .checkin-sheet { transform: translateY(0); }
@media (min-width: 640px) {
.checkin-modal { align-items: center; padding: 1.5rem; }
.checkin-sheet {
border: 1px solid hsla(252, 30%, 30%, 0.5);
border-radius: 1.4rem;
transform: translateY(24px) scale(0.97);
opacity: 0;
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}
.checkin-modal.is-open .checkin-sheet { transform: translateY(0) scale(1); opacity: 1; }
}
.checkin-sheet-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.checkin-sheet-eyebrow {
font-size: 0.68rem;
letter-spacing: 2.5px;
color: var(--accent);
text-transform: uppercase;
}
.checkin-sheet-title {
font-size: 1.5rem;
font-weight: 500;
letter-spacing: -0.5px;
margin-top: 0.25rem;
}
.checkin-close {
width: 2.2rem;
height: 2.2rem;
flex-shrink: 0;
border-radius: 50%;
border: 1px solid var(--border);
background: hsla(252, 8%, 14%, 0.8);
color: var(--muted-foreground);
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.checkin-close:hover { color: var(--foreground); border-color: var(--accent-soft); transform: rotate(90deg); }
.ci-field { margin-bottom: 1.4rem; }
.ci-field-row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.ci-sub { flex: 1; min-width: 8rem; }
.ci-label {
display: block;
font-size: 0.72rem;
letter-spacing: 2px;
color: var(--accent);
text-transform: uppercase;
margin-bottom: 0.6rem;
}
.ci-label-opt {
font-size: 0.66rem;
letter-spacing: 0.5px;
color: var(--muted-foreground);
text-transform: none;
margin-left: 0.3rem;
}
.ci-hint {
display: block;
font-size: 0.74rem;
color: var(--muted-foreground);
letter-spacing: 0.2px;
margin-top: 0.55rem;
line-height: 1.4;
}
.ci-input {
width: 100%;
background: var(--input);
border: 1px solid var(--border);
border-radius: 0.7rem;
padding: 0.8rem 1rem;
color: var(--foreground);
font-family: inherit;
font-size: 0.95rem;
line-height: 1.5;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ci-input::placeholder { color: hsla(250, 10%, 55%, 1); }
.ci-input:focus {
outline: none;
border-color: var(--accent-soft);
box-shadow: 0 0 0 3px hsla(252, 55%, 55%, 0.18);
}
.ci-address { margin-top: 0.6rem; }
.ci-textarea { resize: vertical; min-height: 5rem; }
/* 照片区 */
.ci-photos {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
}
.ci-photo-add {
width: 5rem;
height: 5rem;
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.25rem;
border: 1px dashed hsla(252, 35%, 50%, 0.4);
border-radius: 0.8rem;
background: hsla(252, 10%, 12%, 0.5);
color: var(--muted-foreground);
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.ci-photo-add:hover {
border-color: var(--accent);
color: var(--accent);
background: hsla(252, 30%, 18%, 0.4);
}
.ci-photo-add-icon { font-size: 1.4rem; line-height: 1; }
.ci-photo-add-text { font-size: 0.64rem; letter-spacing: 0.3px; }
.ci-photo-add.is-loading {
pointer-events: none;
opacity: 0.6;
animation: ciPulse 1s ease-in-out infinite;
}
@keyframes ciPulse { 50% { opacity: 0.35; } }
.ci-thumb {
position: relative;
width: 5rem;
height: 5rem;
border-radius: 0.8rem;
overflow: hidden;
border: 1px solid var(--border);
}
.ci-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ci-thumb-del {
position: absolute;
top: 0.2rem;
right: 0.2rem;
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
border: none;
background: hsla(252, 10%, 4%, 0.8);
color: #fff;
font-size: 0.95rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.ci-thumb-del:hover { background: hsla(348, 60%, 40%, 0.9); }
/* 定位 */
.ci-loc-row { display: flex; gap: 0.6rem; }
.ci-loc-row .ci-input { flex: 1; }
.ci-locate-btn {
flex-shrink: 0;
padding: 0 1rem;
border-radius: 0.7rem;
border: 1px solid var(--accent-soft);
background: hsla(252, 40%, 22%, 0.4);
color: var(--accent);
font-family: inherit;
font-size: 0.85rem;
letter-spacing: 0.3px;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s ease, border-color 0.2s ease;
}
.ci-locate-btn:hover { background: hsla(252, 45%, 28%, 0.55); }
.ci-locate-btn:disabled { opacity: 0.5; cursor: wait; }
.ci-poi-list {
list-style: none;
margin: 0.6rem 0 0;
padding: 0.35rem;
max-height: 13rem;
overflow-y: auto;
background: hsla(252, 10%, 7%, 0.7);
border: 1px solid var(--border);
border-radius: 0.7rem;
}
.ci-poi {
display: flex;
flex-direction: column;
gap: 0.1rem;
padding: 0.55rem 0.7rem;
border-radius: 0.5rem;
cursor: pointer;
transition: background 0.15s ease;
}
.ci-poi:hover { background: hsla(252, 40%, 25%, 0.35); }
.ci-poi-name { font-size: 0.9rem; color: var(--foreground); }
.ci-poi-addr { font-size: 0.74rem; color: var(--muted-foreground); }
.ci-loc-msg {
display: block;
font-size: 0.76rem;
letter-spacing: 0.2px;
margin-top: 0.5rem;
color: var(--muted-foreground);
min-height: 1em;
}
.ci-loc-msg.success { color: hsla(140, 35%, 70%, 1); }
.ci-loc-msg.error { color: hsla(348, 70%, 72%, 1); }
/* 分类 chips */
.ci-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ci-cat {
font-family: inherit;
font-size: 0.85rem;
padding: 0.5rem 0.85rem;
border-radius: 0.7rem;
background: var(--input);
color: var(--secondary-foreground);
border: 1px solid var(--border);
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.ci-cat:hover { border-color: hsla(252, 40%, 50%, 0.45); }
.ci-cat.is-active {
border-color: var(--accent);
background: hsla(252, 45%, 24%, 0.5);
color: var(--foreground);
}
.ci-rating .star-btn { font-size: 1.9rem; }
/* 作者 segmented */
.ci-author {
display: inline-flex;
background: var(--input);
border: 1px solid var(--border);
border-radius: 0.7rem;
padding: 0.2rem;
width: 100%;
}
.ci-author button {
flex: 1;
font-family: inherit;
font-size: 0.88rem;
padding: 0.5rem 0.5rem;
border: none;
border-radius: 0.5rem;
background: transparent;
color: var(--muted-foreground);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.ci-author button.is-active {
background: var(--accent);
color: var(--accent-foreground);
font-weight: 500;
}
.ci-msg {
font-size: 0.85rem;
letter-spacing: 0.2px;
color: var(--muted-foreground);
min-height: 1.1em;
margin-bottom: 0.75rem;
}
.ci-msg.error { color: hsla(348, 70%, 72%, 1); }
.ci-msg.success { color: hsla(140, 35%, 70%, 1); }
.ci-submit { width: 100%; padding: 0.95rem; font-size: 0.98rem; }
.ci-submit:disabled { opacity: 0.55; cursor: wait; transform: none; }
/* ============================================
照片灯箱
============================================ */
.ci-lightbox {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
background: hsla(252, 10%, 3%, 0.94);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.ci-lightbox[hidden] { display: none; }
.ci-lightbox img {
max-width: 92vw;
max-height: 86vh;
object-fit: contain;
border-radius: 0.6rem;
box-shadow: 0 30px 80px hsla(0, 0%, 0%, 0.7);
}
.ci-lightbox-close {
position: absolute;
top: max(1rem, env(safe-area-inset-top));
right: 1rem;
width: 2.6rem;
height: 2.6rem;
border-radius: 50%;
border: 1px solid hsla(0, 0%, 100%, 0.2);
background: hsla(252, 10%, 8%, 0.7);
color: #fff;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
.ci-lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 3rem;
height: 3rem;
border-radius: 50%;
border: 1px solid hsla(0, 0%, 100%, 0.18);
background: hsla(252, 10%, 8%, 0.6);
color: #fff;
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
transition: background 0.2s ease;
}
.ci-lightbox-nav:hover { background: hsla(252, 40%, 25%, 0.7); }
.ci-lightbox-prev { left: 1rem; }
.ci-lightbox-next { right: 1rem; }
/* toast */
.ci-toast {
position: fixed;
left: 50%;
bottom: max(2rem, env(safe-area-inset-bottom));
transform: translate(-50%, 1.5rem);
z-index: 300;
padding: 0.8rem 1.5rem;
border-radius: 999px;
background: hsla(252, 35%, 18%, 0.95);
border: 1px solid hsla(252, 50%, 50%, 0.4);
color: var(--foreground);
font-size: 0.9rem;
letter-spacing: 0.3px;
box-shadow: 0 16px 40px hsla(252, 30%, 3%, 0.55);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.ci-toast.is-show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
.ci-card { animation: none; }
.checkin-sheet { transition: opacity 0.2s ease; }
}
/* ============================================
首页：日常打卡入口 banner
============================================ */
#checkin-entry { padding-bottom: 6rem; }
.checkin-banner {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
padding: clamp(2rem, 5vw, 3.5rem);
border-radius: 1.5rem;
overflow: hidden;
background:
radial-gradient(ellipse 70% 90% at 85% 20%, hsla(252, 55%, 40%, 0.28) 0%, transparent 60%),
radial-gradient(ellipse 60% 80% at 10% 90%, hsla(330, 45%, 30%, 0.18) 0%, transparent 60%),
linear-gradient(165deg, hsl(252 12% 12%) 0%, hsl(252 8% 7%) 100%);
border: 1px solid hsla(252, 35%, 35%, 0.4);
box-shadow: inset 0 1px 1px hsla(252, 50%, 80%, 0.06);
transition: transform 0.4s ease, border-color 0.3s ease, box-shadow 0.4s ease;
}
@media (min-width: 760px) {
.checkin-banner { grid-template-columns: 1.4fr 1fr; align-items: center; }
}
.checkin-banner:hover {
transform: translateY(-4px);
border-color: hsla(252, 45%, 55%, 0.5);
box-shadow: 0 30px 60px hsla(252, 30%, 3%, 0.5);
}
.checkin-banner-title {
font-size: clamp(1.6rem, 3.6vw, 2.6rem);
font-weight: 500;
letter-spacing: -1px;
line-height: 1.15;
margin: 0.75rem 0 0.85rem;
text-wrap: balance;
}
.checkin-banner-sub {
color: var(--secondary-foreground);
font-size: clamp(0.95rem, 1.3vw, 1.05rem);
line-height: 1.6;
max-width: 32rem;
margin-bottom: 1.5rem;
}
.checkin-banner-cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
color: var(--accent);
letter-spacing: 0.3px;
transition: gap 0.25s ease, color 0.2s ease;
}
.checkin-banner:hover .checkin-banner-cta { gap: 0.9rem; color: var(--foreground); }
.checkin-banner-art { position: relative; min-height: 9rem; display: none; }
@media (min-width: 760px) { .checkin-banner-art { display: block; } }
.cb-emoji {
position: absolute;
font-size: 2.2rem;
filter: drop-shadow(0 6px 14px hsla(252, 30%, 3%, 0.5));
animation: cbFloat 5s ease-in-out infinite;
}
.cb-emoji-1 { top: 8%; left: 18%; font-size: 3rem; animation-delay: 0s; }
.cb-emoji-2 { top: 50%; left: 2%; animation-delay: 0.6s; }
.cb-emoji-3 { top: 22%; right: 14%; font-size: 2.6rem; animation-delay: 1.1s; }
.cb-emoji-4 { bottom: 6%; left: 38%; font-size: 2.4rem; animation-delay: 1.6s; }
.cb-emoji-5 { bottom: 18%; right: 8%; animation-delay: 2.1s; }
@keyframes cbFloat {
0%, 100% { transform: translateY(0) rotate(-3deg); }
50% { transform: translateY(-10px) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
.cb-emoji { animation: none; }
}
/* ============================================
View Transitions —— 跨页丝滑转场（渐进增强）
不支持的浏览器自动回退为普通跳转，无副作用
============================================ */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
::view-transition-old(root) { animation: vtFadeOut 0.26s ease both; }
::view-transition-new(root) { animation: vtFadeIn 0.32s ease both; }
}
@keyframes vtFadeOut { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vtFadeIn { from { opacity: 0; transform: translateY(10px); } }
/* iOS「添加到主屏」引导条 */
.a2hs-tip {
position: fixed;
left: 1rem;
right: 1rem;
bottom: max(1rem, env(safe-area-inset-bottom));
z-index: 150;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 1rem;
background: hsla(252, 12%, 10%, 0.96);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid hsla(252, 45%, 50%, 0.4);
border-radius: 0.9rem;
box-shadow: 0 16px 40px hsla(252, 30%, 3%, 0.5);
font-size: 0.85rem;
line-height: 1.5;
color: var(--secondary-foreground);
opacity: 0;
transform: translateY(1rem);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.a2hs-tip.is-show { opacity: 1; transform: translateY(0); }
.a2hs-tip-text { flex: 1; }
.a2hs-tip-text b { color: var(--accent); font-weight: 600; }
.a2hs-tip-close {
flex-shrink: 0;
width: 1.8rem;
height: 1.8rem;
border-radius: 50%;
border: none;
background: hsla(252, 8%, 18%, 0.9);
color: var(--muted-foreground);
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
}
@media (min-width: 600px) {
.a2hs-tip { left: auto; right: 1.5rem; max-width: 23rem; }
}
/* 首页：导航「记一笔」按钮 + hero 打卡 CTA（让打卡入口在第一屏就醒目） */
.nav-checkin-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.3px;
padding: 0.55rem 1.15rem;
border-radius: 999px;
color: var(--accent-foreground);
background: var(--accent);
box-shadow: 0 6px 18px hsla(252, 55%, 30%, 0.4);
transition: transform 0.18s ease, background 0.2s ease, box-shadow 0.25s ease;
}
.nav-checkin-btn:hover {
transform: translateY(-1px);
background: hsl(252 60% 67%);
box-shadow: 0 10px 24px hsla(252, 55%, 30%, 0.5);
}
.nav-checkin-btn:active { transform: scale(0.96); }
.btn-checkin {
background: var(--accent);
color: var(--accent-foreground);
box-shadow: 0 8px 22px hsla(252, 55%, 30%, 0.42),
0 0 0 1px hsla(252, 60%, 72%, 0.25) inset;
}
.btn-checkin:hover {
transform: translateY(-2px);
background: hsl(252 60% 67%);
box-shadow: 0 14px 32px hsla(252, 55%, 30%, 0.52),
0 0 0 1px hsla(252, 60%, 72%, 0.3) inset;
}
/* 打卡录入：定位 + 搜地点两个按钮一行 */
.ci-loc-btns {
display: flex;
gap: 0.6rem;
margin-top: 0.6rem;
}
.ci-loc-btns .ci-locate-btn {
flex: 1;
padding: 0.7rem 1rem;
text-align: center;
}
.ci-search-btn {
background: hsla(252, 12%, 14%, 0.6);
border-color: var(--border);
color: var(--secondary-foreground);
}
.ci-search-btn:hover {
background: hsla(252, 30%, 20%, 0.5);
border-color: var(--accent-soft);
color: var(--accent);
}
.ci-poi-dist {
font-size: 0.72rem;
color: var(--accent);
font-weight: 500;
margin-left: 0.45rem;
white-space: nowrap;
}
/* ============================================
立体感（elevation）—— 卡片默认就有景深阴影 + 顶部暖色内高光，
hover 浮得更高；解决"静止时太平"的问题
============================================ */
:root {
--elev-rest:
inset 0 1.5px 0 hsla(42, 85%, 92%, 0.22), /* 顶部亮高光边（受光感）*/
0 0 0 1px hsla(36, 30%, 55%, 0.1), /* 外描边光，勾出卡片轮廓 */
0 10px 22px hsla(0, 0%, 0%, 0.55), /* 深投影 */
0 26px 56px hsla(18, 45%, 5%, 0.6); /* 暖色辉光（深背景也可见）*/
--elev-hover:
inset 0 1.5px 0 hsla(42, 85%, 92%, 0.3),
0 0 0 1px hsla(36, 42%, 58%, 0.18),
0 16px 30px hsla(0, 0%, 0%, 0.6),
0 36px 72px hsla(18, 45%, 5%, 0.66);
}
.card,
.stat-card,
.trip-card,
.dash-map-card,
.dash-trip-card,
.dash-next-card,
.verdict-card,
.review-summary,
.weather-card,
.ci-card,
.dash-habit,
.checkin-banner,
.photo-tile {
box-shadow: var(--elev-rest);
}
.card:hover,
.stat-card:hover,
.trip-card:hover,
.dash-map-card:hover,
.dash-trip-card:hover,
.dash-next-card:hover,
.verdict-card:hover,
.weather-card:hover,
.ci-card:hover,
.dash-habit:hover,
.checkin-banner:hover,
.photo-tile:hover {
box-shadow: var(--elev-hover);
}
/* ============================================
手机端 Hero —— 拉开标题与按钮、加留白，消除拥挤
============================================ */
@media (max-width: 768px) {
.hero {
align-items: flex-end; /* 按钮锚在底部一带，基本保持原位 */
padding-bottom: 14rem;
}
.hero-title {
font-size: clamp(1.9rem, 6.6vw, 2.5rem);
line-height: 1.34; /* 两行间距拉开，有呼吸 */
letter-spacing: -0.5px;
margin-bottom: 9rem; /* 文字再往上提一点 */
text-wrap: balance;
}
.hero-cta {
gap: 1rem;
}
.hero-cta .btn {
padding: 0.95rem 2.3rem; /* 按钮更舒展大气 */
font-size: 1rem;
}
}
/* ============================================
Hero 排版升级：标题关键词用衬线艺术字体 + 上方对称发光小标
============================================ */
.hero-eyebrow-deco {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.85rem;
margin-bottom: 1.7rem;
}
.hero-eyebrow-deco .serif {
font-size: 1.05rem;
color: var(--accent);
letter-spacing: 0.5px;
white-space: nowrap;
}
.hero-deco-line {
display: block;
width: 2.4rem;
height: 1px;
background: linear-gradient(90deg, transparent, hsla(252, 60%, 62%, 0.8));
box-shadow: 0 0 8px hsla(252, 65%, 55%, 0.4);
}
.hero-deco-line:last-child {
background: linear-gradient(90deg, hsla(252, 60%, 62%, 0.8), transparent);
}
/* 标题里的关键词「每一程」走衬线斜体，和周围无衬线形成排版对比 */
.hero-title .serif {
font-size: 1.08em;
padding: 0 0.04em;
}
@media (max-width: 768px) {
.hero-eyebrow-deco { gap: 0.7rem; margin-bottom: 1.4rem; }
.hero-eyebrow-deco .serif { font-size: 0.92rem; }
.hero-deco-line { width: 1.7rem; }
}
/* ============================================
Hero 按钮高级化：玻璃质感 + 高光边 + 暖光晕（一实一虚）
============================================ */
.hero-cta {
gap: 1.1rem;
}
.hero-cta .btn {
position: relative;
padding: 1.05rem 2.7rem;
border-radius: 999px;
font-size: 1rem;
font-weight: 500;
letter-spacing: 1.5px;
border: none;
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, background 0.3s ease;
}
/* 日常：暖琥珀渐变玻璃（主） */
.hero-cta .btn-checkin {
background: linear-gradient(140deg, hsla(250, 62%, 58%, 0.95), hsla(22, 55%, 46%, 0.92));
color: hsl(252 35% 12%);
box-shadow:
inset 0 1px 0 hsla(42, 95%, 92%, 0.55),
inset 0 0 0 1px hsla(36, 75%, 72%, 0.35),
0 10px 28px hsla(26, 60%, 22%, 0.5),
0 2px 6px hsla(0, 0%, 0%, 0.3);
}
/* 旅行：静态磨砂玻璃（纯 CSS，不用 backdrop-filter，零延迟、一打开就在）。
半透明渐变 + 顶部内高光 + 底部内阴影 + 内描边 = 磨砂玻璃的厚度与受光感 */
.hero-cta .btn-primary {
background: linear-gradient(160deg, hsla(40, 32%, 96%, 0.34) 0%, hsla(34, 18%, 80%, 0.22) 100%);
color: hsl(36 35% 97%);
box-shadow:
inset 0 1.5px 1px hsla(45, 92%, 98%, 0.62),
inset 0 -2px 4px hsla(252, 30%, 22%, 0.2),
inset 0 0 0 1px hsla(40, 52%, 90%, 0.34),
0 10px 28px hsla(0, 0%, 0%, 0.42);
}
.hero-cta .btn:hover {
transform: translateY(-3px) scale(1.01);
}
.hero-cta .btn-checkin:hover {
box-shadow:
inset 0 1px 0 hsla(42, 95%, 92%, 0.65),
inset 0 0 0 1px hsla(36, 75%, 72%, 0.45),
0 16px 36px hsla(26, 60%, 22%, 0.6),
0 0 28px hsla(250, 75%, 52%, 0.35);
}
.hero-cta .btn-primary:hover {
background: linear-gradient(160deg, hsla(40, 34%, 97%, 0.44) 0%, hsla(34, 20%, 82%, 0.3) 100%);
box-shadow:
inset 0 1.5px 1px hsla(45, 92%, 98%, 0.72),
inset 0 -2px 4px hsla(252, 30%, 22%, 0.22),
inset 0 0 0 1px hsla(40, 58%, 90%, 0.42),
0 16px 36px hsla(0, 0%, 0%, 0.48);
}
.hero-cta .btn:active {
transform: translateY(-1px) scale(0.99);
}
/* Hero 标题：引入霞鹜文楷（自托管子集 woff2，优雅楷体）；系统楷体/宋体兜底 */
@font-face {
font-family: 'LXGW WenKai';
src: url('/assets/fonts/lxgw-wenkai-subset.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
.hero-title {
font-family: 'LXGW WenKai', 'STKaiti', 'KaiTi SC', 'KaiTi', 'Songti SC', serif;
font-weight: 400;
letter-spacing: 2px;
text-align: center;
padding-left: 2px; /* 补偿字间距在行尾的留白，两行真正视觉居中 */
}