:root { color-scheme: light; --ink: #243936; --ink-soft: rgba(36, 57, 54, 0.66); --paper: rgba(250, 247, 238, 0.72); --paper-edge: rgba(218, 210, 192, 0.5); --seal: #9d453b; --mist: rgba(244, 244, 238, 0.86); --real-vh: 1svh; } /* 山海体改为服务端 SVG 渲染（/api/glyph），字体文件不进网站根目录。 卡片预览与介绍区标题均通过内联 SVG 展示，缺字回落 LXGW WenKai。 */ @font-face { font-family: "LXGW WenKai"; src: url("./字体/LXGWWenKai-Light.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "EB Garamond"; src: url("./字体/EBGaramond-Regular.woff2") format("woff2"); font-display: swap; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* 首页动画模板激活时锁死首屏滚动，根治 1px 溢出导致的微滚动/晃动。 判定： 带 home-lock 且图文模板（.home-imagetext）被 hidden 时生效； 一旦后台切换为图文模板（移除 hidden），恢复正常滚动，互不误伤。 .home-intro 浮层自身 overflow-y:auto，介绍文字过长仍可内部滚动。 不支持 :has() 的旧浏览器会忽略此规则、退回原行为，不会造成破坏。 */ html.home-lock:has(.home-imagetext[hidden]) { overflow: hidden; } html.home-lock:has(.home-imagetext[hidden]) body { overflow: hidden; } body { margin: 0; background: #f2f1ea; color: var(--ink); font-family: "LXGW WenKai", "Songti SC", "STSong", "Noto Serif SC", serif; min-height: 100svh; } /* 页脚固定在视口底部：body 纵向 flex，主内容区撑开剩余空间，页脚不收缩。 后台管理页（body.admin-page）使用独立布局，排除在外。 */ body:not(.admin-page) { display: flex; flex-direction: column; } body:not(.admin-page) main { flex: 1 0 auto; width: 100%; } a { color: inherit; text-decoration: none; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============ 全屏体验容器（首屏，固定一屏；下方为可滚动的介绍区） ============ */ .shan-hai-home { position: relative; height: 100svh; overflow: hidden; background: transparent; } /* ============ 分层背景（固定，滚动时不动） ============ */ .bg-layer { position: fixed; inset: 0; pointer-events: none; background-repeat: no-repeat; background-position: center; } .bg-sky { background: linear-gradient( 180deg, rgba(250, 249, 244, 1) 0%, rgba(245, 244, 238, 0.92) 42%, rgba(233, 234, 226, 0.55) 72%, transparent 100% ); z-index: 0; } /* CSS 绘制的干净水墨山谷背景（零成本占位，可替换为单张图片） */ .bg-painting { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 80% 55% at 50% 100%, rgba(192, 206, 198, 0.48) 0%, transparent 58%), radial-gradient(ellipse 45% 32% at 20% 88%, rgba(170, 186, 178, 0.36) 0%, transparent 55%), radial-gradient(ellipse 55% 38% at 84% 85%, rgba(162, 179, 171, 0.32) 0%, transparent 58%), radial-gradient(ellipse 60% 30% at 42% 92%, rgba(180, 194, 188, 0.3) 0%, transparent 55%), linear-gradient(180deg, #f4f3ed 0%, #eef0eb 45%, #e2e7e1 100%); filter: blur(0.6px); } /* 首页背景图插槽：后台可上传替换；默认隐藏，有图时覆盖水墨背景 */ .bg-photo { position: fixed; inset: 0; z-index: 2; pointer-events: none; background-repeat: no-repeat; background-size: cover; background-position: center; display: none; } .bg-mist { background: radial-gradient(ellipse 78% 38% at 22% 82%, rgba(244, 244, 238, 0.5), transparent 70%), radial-gradient(ellipse 60% 30% at 80% 76%, rgba(244, 244, 238, 0.4), transparent 70%); z-index: 3; } .bg-overlay { position: fixed; inset: 0; background: rgba(25, 35, 32, 0); pointer-events: none; z-index: 4; transition: background 1.2s ease; } /* ============ 导航（固定，滚动时常驻） ============ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: 34px 7vw 26px; letter-spacing: 0.18em; /* 默认底色 = 纸色合成色（var(--paper) 叠白画布），与其他非首页页面一致； 首页由 applyNavBarColor 在配置加载后覆盖为首页底色。之前默认是首页色 rgb(242,241,234)， 导致其他页面配置加载前的一瞬间显示首页导航色 */ background: rgb(251, 249, 243); /* 与全屏遮罩（.bg-overlay 的 1.2s 过渡）同步：进入 complete/branded 时导航底色随之压暗 */ transition: background-color 1.2s ease; } /* 首页导航：无底色、仅文字，首帧即透明，不走通用白底→渐隐 */ body.home-lock .site-header { background: transparent; transition: none; } /* 固定导航占位：内容区顶部留出导航高度，避免被固定导航盖住 / 滚动重叠 */ body:not(.admin-page) main { padding-top: 96px; } .brand { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 600; text-decoration: none; color: inherit; } /* logo 显示方式：左侧（默认）/ 顶部 */ .brand.logo-left { flex-direction: row; align-items: center; gap: 10px; } .brand.logo-top { flex-direction: column; align-items: flex-start; gap: 6px; } /* 文字（站点名 + 英文标识）统一包一层，便于 logo 居左/居顶 */ .brand-text { display: flex; flex-direction: column; gap: 2px; } .brand-cn { line-height: 1.1; } /* logo：高度 = 文字字号 × logoSize（1=与文字等高），宽度等比缩放（长方形也只锁高度） */ .brand-logo { display: block; width: auto; height: calc(1em * var(--logo-size, 1)); max-width: 100%; object-fit: contain; flex: 0 0 auto; } .brand-en { display: flex; justify-content: space-between; width: 100%; font-family: "LXGW WenKai", "Songti SC", serif; font-size: 10px; font-weight: 400; color: var(--ink-soft); line-height: 1; } .brand-en > span { flex: 1 1 0; text-align: center; } .site-nav { display: flex; gap: clamp(24px, 4vw, 68px); color: var(--ink); font-size: 17px; } /* 右侧导航链接：悬停时从中心向两侧展开墨色下划线 */ .site-nav .nav-link { position: relative; text-decoration: none; padding-bottom: 4px; transition: opacity 250ms ease; } .site-nav .nav-link::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 1.5px; background: var(--ink); transform: translateX(-50%); transition: width 250ms ease; } .site-nav .nav-link:hover::after, .site-nav .nav-link:focus-visible::after { width: 100%; } /* ============ 导航显示方式（文字 / 汉堡 / 两者并存） ============ */ /* 右侧容器：品牌在左，[文字导航 + 汉堡按钮]在右 */ .nav-cluster { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); flex-shrink: 0; } /* 汉堡按钮：默认隐藏，由 body[data-nav-display] 控制显示 */ .menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 34px; height: 34px; padding: 0 6px; background: transparent; border: 0; cursor: pointer; flex-shrink: 0; } .menu-toggle span { display: block; height: 2px; background: var(--ink, #2b2b2b); border-radius: 2px; } .menu-toggle:hover span { background: var(--ink); } /* 抽屉与遮罩：默认隐藏 */ .nav-drawer { position: fixed; top: 0; right: 0; z-index: 60; width: min(320px, 82vw); height: 100%; padding: 132px calc(7vw + 6px) 40px; background: rgba(250, 248, 243, 0.98); backdrop-filter: blur(6px); box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12); transform: translateX(100%); visibility: hidden; transition: transform 0.3s ease, visibility 0.3s ease; } /* × 关闭按钮：位于 header 的 .nav-cluster 中，与汉堡同一格； 打开抽屉时由 body.nav-open 切换显隐，从而占据汉堡的位置（右上角）。 盒模型与汉堡(.menu-toggle)完全一致（同宽高 + 同 padding）； 用 2px 线条绘制 ×（::before/::after 旋转 ±45°），与汉堡横线同粗细 */ .nav-close { display: none; position: relative; width: 34px; height: 34px; padding: 0 6px; background: transparent; border: 0; color: var(--ink, #2b2b2b); cursor: pointer; flex-shrink: 0; } /* 2px 线条 ×：横向跨度与汉堡横线一致（左右各内缩 6px） */ .nav-close::before, .nav-close::after { content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: currentColor; border-radius: 2px; } .nav-close::before { transform: translateY(-50%) rotate(45deg); } .nav-close::after { transform: translateY(-50%) rotate(-45deg); } .nav-drawer-list { display: flex; flex-direction: column; /* 与横版 .site-nav 的逐项间距保持一致 */ gap: clamp(24px, 4vw, 68px); } .nav-drawer-list .nav-link { display: block; width: auto; font-size: 17px; text-decoration: none; color: var(--ink, #2b2b2b); } .nav-link .nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.2em; height: 1.2em; margin-right: 10px; vertical-align: -0.15em; } .nav-link .nav-icon img { width: 100%; height: 100%; object-fit: contain; } .nav-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(20, 20, 20, 0.35); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } /* 显示方式：文字（仅行内导航，汉堡隐藏） */ [data-nav-display="text"] .menu-toggle { display: none; } /* 显示方式：汉堡（仅汉堡，行内导航隐藏） */ [data-nav-display="hamburger"] .site-nav { display: none; } [data-nav-display="hamburger"] .menu-toggle { display: flex; } /* 移动端兜底：无论 data-nav-display 是什么，手机上汉堡必须可见 */ @media (max-width: 760px) { .menu-toggle { display: flex !important; } /* 抽屉打开时汉堡隐藏（!important 覆盖上面的兜底），让位给 × */ body.nav-open .menu-toggle { display: none !important; } } /* 显示方式：两者并存 */ [data-nav-display="both"] .menu-toggle { display: flex; } /* 抽屉打开态 */ body.nav-open .nav-drawer { transform: translateX(0); visibility: visible; } body.nav-open .nav-backdrop { opacity: 1; visibility: visible; } /* 抽屉打开时：隐藏头部汉堡、显示 ×（同一格接管关闭），并把头部抬到抽屉之上 */ body.nav-open .menu-toggle { display: none; } body.nav-open .nav-close { display: flex; } body.nav-open .site-header { z-index: 70; } /* 两者并存模式下，抽屉打开时隐藏头部行内文字导航，避免与抽屉内导航重复 */ body.nav-open .site-nav { display: none; } /* ============ 核心体验区（覆盖整屏，作为定位上下文） ============ */ .experience { position: absolute; inset: 0; z-index: 5; } /* ============ 实时预览（山海体） ============ */ .preview-label { position: absolute; top: 38%; left: 50%; margin: 0; color: rgba(157, 69, 59, 0.5); font-size: 13px; letter-spacing: 0.12em; opacity: 0; transform: translate(-50%, 18px); transition: opacity 800ms ease, transform 800ms ease; } .calligraphy-preview { position: absolute; top: 26%; left: 50%; max-width: min(82vw, 980px); margin: 0; color: rgba(18, 25, 23, 0.86); font-family: "LXGW WenKai", "Kaiti SC", "STKaiti", "Songti SC", serif; font-size: clamp(58px, 9vw, 150px); letter-spacing: 0.08em; line-height: 1; text-align: center; white-space: nowrap; opacity: 0; transform: translate(-50%, 20px); transition: opacity 900ms ease, transform 900ms ease, top 900ms ease, font-size 600ms ease; } /* 服务端渲染的矢量字形以 inline 注入 .preview-text，按容器字号缩放 */ .preview-text { display: inline-block; line-height: 1; } .preview-text svg { display: block; margin: 0 auto; height: auto; width: auto; max-height: 1em; max-width: 100%; } /* ============ 输入前引导语（纸上方） ============ */ .home-hint { position: absolute; top: 26%; left: 50%; transform: translate(-50%, 0); width: min(82vw, 980px); margin: 0; text-align: center; pointer-events: none; opacity: 0; transition: opacity 1400ms ease; } .home-hint .hint-l1 { margin: 0; color: rgba(36, 57, 54, 0.4); font-family: "LXGW WenKai", "Songti SC", "STSong", serif; font-weight: 500; font-size: clamp(20px, 3vw, 30px); letter-spacing: 0.06em; line-height: 1.5; } .home-hint .hint-l2 { margin: 8px 0 0; color: rgba(36, 57, 54, 0.4); font-family: "LXGW WenKai", "Songti SC", "STSong", serif; font-size: clamp(14px, 2vw, 20px); letter-spacing: 0.1em; line-height: 1.5; } /* 点击开始（is-ready）后缓慢淡入 */ .shan-hai-home.is-ready .home-hint { opacity: 1; } /* 输入 / 生成作品后隐藏引导语 */ .shan-hai-home.is-typing .home-hint, .shan-hai-home.is-filled .home-hint, .shan-hai-home.is-merging .home-hint, .shan-hai-home.is-complete .home-hint, .shan-hai-home.is-branded .home-hint { opacity: 0; } /* ============ 初始焦点（呼吸圆点） ============ */ .start-focus { position: absolute; z-index: 9; top: 58%; left: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 96px; height: 96px; padding: 0; border: 0; background: transparent; cursor: pointer; transform: translate(-50%, -50%); transition: opacity 500ms ease; animation: focus-enter 1.4s ease backwards; } .focus-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--ink); animation: dot-breathe 2.6s ease-in-out infinite; } .focus-hint { display: none; } @keyframes focus-enter { from { opacity: 0; } to { opacity: 1; } } @keyframes dot-breathe { 0%, 100% { transform: scale(1); opacity: 0.8; box-shadow: 0 0 0 0 rgba(36, 57, 54, 0.22); } 50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 0 12px rgba(36, 57, 54, 0); } } /* ============ 宣纸 ============ */ .paper { position: absolute; top: 50%; left: 50%; width: min(58vw, 860px); aspect-ratio: 4.7 / 1.35; border: 1px solid var(--paper-edge); background: linear-gradient(115deg, rgba(255, 255, 250, 0.52), rgba(238, 229, 207, 0.26)), var(--paper); box-shadow: 0 16px 38px rgba(66, 72, 66, 0.12), inset 0 0 28px rgba(255, 255, 255, 0.4); display: grid; place-items: center; /* 仅用 transform 控制竖向位置，避免动画触发布局重排导致卡顿 */ transform: translate(-50%, calc(-50% + 8vh)) perspective(1200px) rotateX(58deg) scale(0.88); transform-origin: center center; will-change: transform; backface-visibility: hidden; transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), top 0.9s cubic-bezier(0.22, 1, 0.36, 1), width 0.9s cubic-bezier(0.22, 1, 0.36, 1), aspect-ratio 0.9s cubic-bezier(0.22, 1, 0.36, 1); z-index: 6; animation: paper-enter 1.4s cubic-bezier(0.22, 1, 0.36, 1) backwards; } /* 载入：纸张从远处渐近并淡入 */ @keyframes paper-enter { from { opacity: 0; transform: translate(-50%, calc(-50% + 14vh)) perspective(1200px) rotateX(66deg) scale(0.7); } to { opacity: 1; transform: translate(-50%, calc(-50% + 8vh)) perspective(1200px) rotateX(58deg) scale(0.88); } } /* 点击：纸张翻转落定到底部，全程不缩放（scale 恒定 0.88）。 节奏：1.6s 单段 ease-out（cubic-bezier(0.25,0.46,0.45,0.94)）— 起手即峰值速度（前面快）， 全程单调减速、收尾极缓停住（缓动），无匀速平台，呈"前快后慢、有节奏"的掉落感。 */ @keyframes paper-settle { 0% { transform: translate(-50%, calc(-50% + 8vh)) perspective(1200px) rotateX(58deg) scale(0.88); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } 100% { transform: translate(-50%, calc(-50% + 16vh)) perspective(1200px) rotateX(0deg) scale(0.88); } } .paper::before { position: absolute; inset: 0; content: ""; background: repeating-linear-gradient(8deg, transparent 0 34px, rgba(126, 111, 85, 0.035) 35px 36px), radial-gradient(circle at 22% 40%, rgba(135, 121, 91, 0.08), transparent 24%), radial-gradient(circle at 68% 62%, rgba(135, 121, 91, 0.06), transparent 26%); /* 去掉 mix-blend-mode：否则 .paper 无法提升为独立合成层， 落纸动画首帧会重绘整张纸（含大模糊阴影）导致卡顿。 纹理改用低透明度直接叠加，浅色宣纸上观感几乎一致。 */ opacity: 0.6; pointer-events: none; } .paper::after { position: absolute; inset: 0; content: ""; border: 1px solid rgba(255, 255, 255, 0.48); pointer-events: none; } .paper input { position: relative; z-index: 1; width: 86%; border: 0; outline: 0; background: transparent; color: rgba(28, 34, 32, 0.86); caret-color: transparent; font-family: "LXGW WenKai", "Songti SC", "STSong", serif; font-size: clamp(20px, 3vw, 40px); letter-spacing: 0.08em; text-align: center; } .paper input::placeholder { color: rgba(36, 57, 54, 0.32); } .cursor { position: absolute; top: 50%; left: 50%; width: 2px; height: 1.1em; background: var(--ink-soft); opacity: 0; transform: translate(-50%, -50%); pointer-events: none; } .input-hint { position: absolute; z-index: 1; bottom: 16%; margin: 0; color: rgba(36, 57, 54, 0.32); font-size: 12px; letter-spacing: 0.12em; opacity: 0; transition: opacity 600ms ease; } .submit-hint { position: absolute; z-index: 1; bottom: 20%; margin: 0; color: rgba(157, 69, 59, 0.6); font-size: 13px; letter-spacing: 0.08em; opacity: 0; transition: opacity 600ms ease; } .work-meta { position: absolute; z-index: 1; left: 50%; bottom: 12%; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; margin: 0; color: var(--ink-soft); font-family: "LXGW WenKai", "Songti SC", serif; font-size: 12px; letter-spacing: 0.12em; opacity: 0; transform: translateX(-50%); transition: opacity 800ms ease-out; pointer-events: none; } .work-meta .meta-divider { width: 44px; height: 1px; margin-bottom: 4px; background: currentColor; opacity: 0.55; } .work-meta .meta-brand, .work-meta .meta-url, .work-meta .work-no { display: block; } .work-meta .meta-url { letter-spacing: 0.08em; opacity: 0.8; } .work-meta .work-no { color: var(--seal, #9d453b); letter-spacing: 0.06em; } /* ============ 状态：Frame 02 点击开始 ============ */ .shan-hai-home.is-ready .start-focus, .shan-hai-home.is-typing .start-focus, .shan-hai-home.is-filled .start-focus, .shan-hai-home.is-merging .start-focus, .shan-hai-home.is-complete .start-focus, .shan-hai-home.is-branded .start-focus { opacity: 0; pointer-events: none; } .shan-hai-home.is-ready .paper, .shan-hai-home.is-typing .paper, .shan-hai-home.is-filled .paper { top: 50%; transform: translate(-50%, calc(-50% + 16vh)) perspective(1200px) rotateX(0deg) scale(0.88); } /* 点击：纸张先微微放大、下落到底部，落定时缩回原尺寸（与入场同源缓动，更顺） */ .shan-hai-home.is-ready .paper { animation: paper-settle 1.6s ease-in-out; } /* 后续状态不再重放入场动画 */ .shan-hai-home.is-typing .paper, .shan-hai-home.is-filled .paper, .shan-hai-home.is-merging .paper, .shan-hai-home.is-complete .paper, .shan-hai-home.is-branded .paper { animation: none; } .shan-hai-home.is-ready .cursor { opacity: 1; animation: cursor-blink 1.1s step-end infinite; } /* 输入时隐藏自定义光标，恢复原生输入光标（避免两个光标同时闪） */ .shan-hai-home.is-typing .paper input, .shan-hai-home.is-filled .paper input { caret-color: var(--ink-soft); } /* ============ 状态：Frame 03 输入中 ============ */ .shan-hai-home.is-typing .calligraphy-preview, .shan-hai-home.is-filled .calligraphy-preview { opacity: 1; transform: translate(-50%, 0); } .shan-hai-home.is-typing .preview-label, .shan-hai-home.is-filled .preview-label { opacity: 1; transform: translate(-50%, 0); } /* 合并 / 完成 / 品牌：山海体文字常驻纸上，不自动消失 */ .shan-hai-home.is-merging .calligraphy-preview, .shan-hai-home.is-complete .calligraphy-preview, .shan-hai-home.is-branded .calligraphy-preview { opacity: 1; } .shan-hai-home.is-typing .input-hint, .shan-hai-home.is-filled .input-hint { opacity: 1; } /* 输入后隐藏自定义光标，使用原生输入光标 */ .shan-hai-home.is-typing .cursor, .shan-hai-home.is-filled .cursor { opacity: 0; animation: none; } /* ============ 状态：Frame 04 输入完成（首次显示 Enter 提示） ============ */ .shan-hai-home.is-first-fill .submit-hint { opacity: 1; } /* ============ 移动端生成按钮（手机没有回车键，点「写好了」提交；位置与电脑「回车」提示对齐） ============ */ .mobile-generate { position: absolute; z-index: 2; left: 50%; bottom: 20%; transform: translateX(-50%); width: 92px; height: 34px; border: 1px solid rgba(157, 69, 59, 0.5); background: transparent; color: rgba(157, 69, 59, 0.8); font-family: "LXGW WenKai", "Songti SC", serif; font-size: 15px; letter-spacing: 0.1em; border-radius: 2px; cursor: pointer; opacity: 0; transition: opacity 600ms ease; display: none; } @media (max-width: 760px) { /* 手机无回车键：显示「写好了」提交框，隐藏电脑用的「回车」文字提示 */ .mobile-generate { display: block; /* 移到卡片正下方（卡片外、留 40px 间距），不再压在卡片内部 */ top: calc(100% + 40px); bottom: auto; } .shan-hai-home.is-first-fill .mobile-generate { opacity: 1; } /* 提交完成后「写好了」本就是输入态提交键，完成态应隐藏，避免与下载按钮并存 */ .shan-hai-home.is-complete .mobile-generate, .shan-hai-home.is-branded .mobile-generate { display: none; } .submit-hint { display: none; } /* 下载按钮：手机端紧跟在卡片下方（卡片 top:50% + 半高 + 24px 间距），不同屏宽自动适配 */ .shan-hai-home .work-actions { top: calc(50% + min(78vw, 400px) * 3 / 8 + 24px); bottom: auto; } } /* ============ 状态：Frame 05 双向奔赴 ============ */ .shan-hai-home.is-merging .calligraphy-preview { top: 50%; /* 字落向纸上方（与 complete/branded 同款上移），落定后不再二次移动（避免"顿"）。 transition 已在基础规则 .calligraphy-preview 中定义（含 transform + top），此处不重复定义， 避免状态切换时 transition 与属性同时变化导致动画失效。 */ transform: translate(-50%, calc(-50% - 6vh)); z-index: 8; } .shan-hai-home.is-merging .paper { top: 50%; /* 回车即开始从长条逐渐 morph 成 4:3（与字落向纸同步进行） */ width: min(40vw, 500px); aspect-ratio: 4 / 3; transform: translate(-50%, -50%) perspective(1200px) rotateX(0deg) scale(1); /* transition 已在基础规则 .paper 中定义，此处不重复定义， 避免状态切换时 transition 与属性同时变化导致动画失效 */ z-index: 7; } .shan-hai-home.is-merging .paper input, .shan-hai-home.is-merging .input-hint, .shan-hai-home.is-merging .submit-hint, .shan-hai-home.is-merging .preview-label { opacity: 0; } /* ============ 状态：Frame 06 作品完成 ============ */ .shan-hai-home.is-complete .bg-overlay, .shan-hai-home.is-branded .bg-overlay { background: rgba(25, 35, 32, 0.16); } .shan-hai-home.is-complete .calligraphy-preview, .shan-hai-home.is-branded .calligraphy-preview { top: 50%; left: 50%; /* 作品字整体上移到纸张上中部，与底部品牌/编号信息拉开层次（对齐参考卡片版式） */ transform: translate(-50%, calc(-50% - 6vh)); font-size: clamp(58px, 9vw, 150px); z-index: 8; } .shan-hai-home.is-complete .paper, .shan-hai-home.is-branded .paper { top: 50%; width: min(40vw, 500px); aspect-ratio: 4 / 3; transform: translate(-50%, -50%) perspective(1200px) rotateX(0deg) scale(1); } .shan-hai-home.is-complete .paper input, .shan-hai-home.is-complete .cursor, .shan-hai-home.is-complete .input-hint, .shan-hai-home.is-complete .submit-hint, .shan-hai-home.is-complete .preview-label, .shan-hai-home.is-branded .paper input, .shan-hai-home.is-branded .cursor, .shan-hai-home.is-branded .input-hint, .shan-hai-home.is-branded .submit-hint, .shan-hai-home.is-branded .preview-label { opacity: 0; } /* ============ 状态：Frame 07 品牌信息淡入 ============ */ .shan-hai-home.is-complete .work-meta, .shan-hai-home.is-branded .work-meta { opacity: 0.5; } /* ============ 作品操作按钮（下载 / 再来一次） ============ */ .work-actions { position: absolute; z-index: 12; /* 跟随成品纸的下移量（is-complete/branded 态纸下移 16vh），再叠加纸半高+留白， 保证大屏（16vh 更大）按钮始终落在纸下方、不压到图；≤1439 外观不变。 */ top: calc(50% + 16vh + 150px); left: 50%; display: flex; align-items: center; gap: 16px; transform: translate(-50%, 0); opacity: 0; pointer-events: none; transition: opacity 0.6s ease; } .shan-hai-home.is-complete .work-actions, .shan-hai-home.is-branded .work-actions { opacity: 1; pointer-events: auto; } .action-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(36, 57, 54, 0.3); border-radius: 999px; background: rgba(255, 255, 250, 0.72); color: var(--ink); cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease; } .action-btn:hover { background: rgba(255, 255, 250, 0.95); transform: translateY(-1px); } .action-btn.reset { display: none; } .action-btn svg { width: 18px; height: 18px; } /* ============ 再来一次：纸张翻转着向下飞出屏幕（点击落纸的反向） ============ */ .shan-hai-home.is-resetting .paper { animation: paper-reset 0.6s cubic-bezier(0.36, 0, 0.22, 1) forwards; } /* 山海体文字与纸张同步翻转、下移、淡出，不单独消失 */ .shan-hai-home.is-resetting .calligraphy-preview { animation: preview-reset 0.6s cubic-bezier(0.36, 0, 0.22, 1) forwards; } @keyframes paper-reset { from { top: 50%; opacity: 1; transform: translate(-50%, -50%) perspective(1200px) rotateX(0deg) scale(1); } to { top: 50%; opacity: 0; transform: translate(-50%, calc(-50% + 70vh)) perspective(1200px) rotateX(58deg) scale(1.8); } } @keyframes preview-reset { from { opacity: 1; transform: translate(-50%, -50%) perspective(1200px) rotateX(0deg) scale(1); } to { opacity: 0; transform: translate(-50%, calc(-50% + 70vh)) perspective(1200px) rotateX(58deg) scale(1.8); } } /* 操作按钮直接淡出；纸上的作品信息随纸张一起翻转消失 */ .shan-hai-home.is-resetting .work-actions { opacity: 0 !important; pointer-events: none; } /* ============ 首屏内介绍态：隐藏体验内元素，介绍浮层浮现（首页保持一屏，不滚动） ============ */ .shan-hai-home.is-intro .paper, .shan-hai-home.is-intro .calligraphy-preview { opacity: 0; pointer-events: none; } .shan-hai-home.is-intro .work-actions, .shan-hai-home.is-intro .start-focus { opacity: 0; pointer-events: none; } .shan-hai-home.is-intro .home-hint { opacity: 0; } @keyframes cursor-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ============ 向下划提示（仅成品态显示） ============ */ .scroll-hint { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); z-index: 13; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 14px; border: none; background: none; color: var(--ink); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; } .shan-hai-home.is-complete .scroll-hint, .shan-hai-home.is-branded .scroll-hint { opacity: 0.8; pointer-events: auto; } /* 首屏内：介绍区在下方，划动提示仅作引导，滚动后随首屏一起离开视口 */ .scroll-hint .chev { width: 22px; height: 22px; animation: hint-bounce 1.8s ease-in-out infinite; } .scroll-hint .hint-text { font-family: "LXGW WenKai", "Songti SC", serif; font-size: 13px; letter-spacing: 0.14em; } @keyframes hint-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } /* ============ 字体介绍区（首屏下方，随页面滚动显现，文字直接叠在固定背景上） ============ */ .font-intro { position: relative; z-index: 20; /* 高度随内容自适应：不再强制满屏，避免内容少时出现大片空白 */ display: flex; align-items: center; padding: clamp(72px, 12vh, 140px) clamp(24px, 6vw, 88px); /* 默认与首屏共用背景（透明，露出固定水墨层）；后台 intro.background 可切独立背景 */ background: transparent; color: var(--ink); } .intro-inner { width: 100%; max-width: 860px; margin: 0 auto; } /* ============ 首屏内介绍浮层（下载飞出后浮现，首页保持一屏） ============ */ .home-intro { position: absolute; inset: 0; z-index: 11; display: flex; align-items: center; justify-content: center; padding: clamp(96px, 14vh, 150px) clamp(24px, 6vw, 88px) clamp(80px, 12vh, 120px); overflow-y: auto; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.7s ease, visibility 0.7s ease; } .shan-hai-home.is-intro .home-intro { opacity: 1; visibility: visible; pointer-events: auto; } .home-intro .intro-inner { width: 100%; max-width: 760px; margin: 0 auto; } /* 介绍浮层操作按钮组：再次体验 + 自定义按钮；默认竖向(另起一行)，整组对齐可后台调 */ .intro-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: clamp(28px, 5vh, 52px); } .intro-actions.align-center { align-items: center; } .intro-actions.align-right { align-items: flex-end; } .intro-actions.layout-same { flex-direction: row; flex-wrap: wrap; align-items: center; } .intro-actions.layout-same.align-left { justify-content: flex-start; } .intro-actions.layout-same.align-center { justify-content: center; } .intro-actions.layout-same.align-right { justify-content: flex-end; } .intro-custom-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* 介绍浮层内的「再次体验」按钮 */ .intro-experience-btn { display: inline-block; padding: 12px 40px; font-family: "LXGW WenKai", "Songti SC", serif; font-size: 16px; letter-spacing: 0.18em; color: var(--paper, #faf7ee); background: var(--ink); border: none; border-radius: 999px; cursor: pointer; transition: transform 0.3s ease, opacity 0.3s ease; } .intro-experience-btn:hover { transform: translateY(-1px); opacity: 0.92; } /* 介绍浮层自定义按钮（后台可加，跟再次体验同行/另起行，可设文字/颜色/链接） */ .intro-action-btn { display: inline-block; font-family: "LXGW WenKai", "Songti SC", serif; font-size: 16px; letter-spacing: 0.18em; color: var(--paper, #faf7ee); background: var(--ink); border: none; border-radius: 999px; padding: 12px 40px; cursor: pointer; text-decoration: none; transition: transform 0.3s ease, opacity 0.3s ease; } .intro-action-btn:hover { transform: translateY(-1px); opacity: 0.92; } /* 段落块按钮（介绍区 / 图文模板通用） */ .block-btns { margin-top: 14px; display: flex; gap: 12px; flex-wrap: wrap; } .block-btn { display: inline-block; font-family: "LXGW WenKai", "Songti SC", serif; font-size: 14px; letter-spacing: 0.12em; color: var(--paper, #faf7ee); background: var(--ink); border: none; border-radius: 999px; padding: 10px 28px; cursor: pointer; text-decoration: none; transition: transform 0.3s ease, opacity 0.3s ease; } .block-btn:hover { transform: translateY(-1px); opacity: 0.92; } /* 介绍区组件化内容块（视觉对齐「首屏图文模板」.imagetext-* / .it-block-* 样式） */ .intro-components { display: flex; flex-direction: column; gap: 0; } /* 介绍区区块（与首页图文区块共用组件模型）：支持 stack / 图文左右 布局 */ .intro-block { width: 100%; } .intro-block.intro-layout-left, .intro-block.intro-layout-right { display: grid; gap: clamp(18px, 4vw, 40px); align-items: center; } .intro-block.intro-layout-left { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .intro-block.intro-layout-right { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } .intro-block.intro-layout-right .intro-comp-img { order: 2; } .intro-block + .intro-block { margin-top: clamp(68px, calc(40px + 5vh), 96px); } .intro-block-body { width: 100%; } .intro-block-body > :last-child { margin-bottom: 0; } .intro-comp-en { font-family: "LXGW WenKai", "Songti SC", serif; font-size: 12px; letter-spacing: 0.32em; color: rgba(36, 57, 54, 0.45); text-transform: uppercase; margin: 0 0 10px; } .intro-comp-title { font-family: "LXGW WenKai", "Songti SC", serif; font-weight: 400; font-size: clamp(28px, 5vw, 46px); margin: 0 0 14px; letter-spacing: 0.04em; } /* 介绍区大标题：服务端渲染的内联 SVG，按容器字号缩放（与 .preview-text svg 一致，字体不下发浏览器） */ .intro-comp-title svg { display: block; margin: 0 auto; width: auto; height: auto; max-width: 100%; max-height: 1em; } .intro-comp-subtitle { font-family: "LXGW WenKai", "Songti SC", serif; font-size: clamp(16px, 2.4vw, 20px); color: rgba(36, 57, 54, 0.82); margin: 0 0 28px; letter-spacing: 0.03em; } /* 段落标题：介于大标题与小标题之间的中间标题（对齐首屏 .it-block-title） */ .intro-comp-paratitle { font-family: "LXGW WenKai", "Songti SC", serif; font-weight: 400; font-size: clamp(18px, 2.4vw, 24px); color: rgba(36, 57, 54, 0.92); margin: 0 0 8px; letter-spacing: 0.03em; } .intro-comp-text { font-family: "LXGW WenKai", "Songti SC", serif; font-size: clamp(14px, 1.8vw, 16px); line-height: 2; color: rgba(36, 57, 54, 0.72); margin: 0 0 16px; } .intro-comp-ph { margin: 0 0 16px; min-height: 120px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px; border: 1px dashed rgba(36, 57, 54, 0.28); border-radius: 12px; color: rgba(36, 57, 54, 0.45); font-size: 14px; background: rgba(36, 57, 54, 0.03); } .intro-comp-img { display: block; max-width: 100%; max-height: 360px; width: auto; height: auto; object-fit: contain; border-radius: 14px; margin: 0 0 16px; border: 1px solid rgba(36, 57, 54, 0.12); } .intro-comp-actions { margin: 30px 0 0; } /* 末项不留多余底部间距 */ .intro-components > :last-child { margin-bottom: 0; } /* ============ P2 新增组件前台样式（水墨纸色，与全站一致） ============ */ /* 通用卡片 */ .comp-card { max-width: 520px; background: var(--paper, #faf7ee); border: 1px solid var(--paper-edge, rgba(218, 210, 192, 0.5)); border-radius: 16px; padding: 26px 26px 28px; box-shadow: 0 10px 30px rgba(36, 57, 54, 0.06); } .comp-card-img { display: block; max-width: 100%; width: 100%; height: auto; border-radius: 12px; margin: 0 0 16px; border: 1px solid rgba(36, 57, 54, 0.1); object-fit: cover; aspect-ratio: 16 / 10; } .comp-card-img:last-child { margin-bottom: 0; } .comp-card-title { font-family: "LXGW WenKai", "Songti SC", serif; font-weight: 400; font-size: clamp(20px, 2.6vw, 26px); margin: 0 0 10px; letter-spacing: 0.03em; color: var(--ink); } .comp-card-text { font-family: "LXGW WenKai", "Songti SC", serif; font-size: clamp(14px, 1.8vw, 16px); line-height: 1.9; color: rgba(36, 57, 54, 0.72); margin: 0 0 16px; } .comp-card-text:last-child { margin-bottom: 0; } .comp-card-btn { margin-top: 4px; } /* 卡片网格 */ .comp-cardgrid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); } .comp-cardgrid-item { background: var(--paper, #faf7ee); border: 1px solid var(--paper-edge, rgba(218, 210, 192, 0.5)); border-radius: 16px; padding: 18px; overflow: hidden; } .comp-cardgrid-img { display: block; max-width: 100%; width: 100%; height: auto; border-radius: 10px; margin: 0 0 12px; border: 1px solid rgba(36, 57, 54, 0.1); object-fit: cover; aspect-ratio: 16 / 10; } .comp-cardgrid-title { font-family: "LXGW WenKai", "Songti SC", serif; font-weight: 400; font-size: clamp(16px, 2vw, 20px); margin: 0 0 8px; color: var(--ink); } .comp-cardgrid-text { font-family: "LXGW WenKai", "Songti SC", serif; font-size: 14px; line-height: 1.8; color: rgba(36, 57, 54, 0.72); margin: 0; } .comp-cardgrid-linkwrap { display: block; text-decoration: none; color: inherit; } .comp-cardgrid-linkwrap:hover .comp-cardgrid-title { color: rgba(36, 57, 54, 0.6); } /* 时间线 */ .comp-timeline { position: relative; max-width: 720px; } .comp-timeline-item { position: relative; display: flex; gap: 18px; padding-bottom: 28px; } .comp-timeline-item:last-child { padding-bottom: 0; } /* 竖向连接线（穿过序号圆点中心） */ .comp-timeline-item::before { content: ""; position: absolute; left: 23px; top: 36px; bottom: 0; width: 2px; background: var(--paper-edge, rgba(218, 210, 192, 0.7)); } .comp-timeline-item:last-child::before { display: none; } /* 左侧：自动序号 + 可选日期 */ .comp-timeline-marker { flex: 0 0 48px; display: flex; flex-direction: column; align-items: center; } .comp-timeline-num { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--paper, #faf7ee); font-family: "LXGW WenKai", "Songti SC", serif; font-size: 15px; font-weight: 400; box-shadow: 0 0 0 4px var(--paper, #faf7ee), 0 0 0 5px rgba(36, 57, 54, 0.15); position: relative; z-index: 1; } .comp-timeline-date { margin-top: 8px; text-align: center; font-family: "LXGW WenKai", "Songti SC", serif; font-size: 12px; letter-spacing: 0.02em; line-height: 1.4; color: rgba(36, 57, 54, 0.5); } /* 右侧：标题 + 描述 */ .comp-timeline-body { flex: 1; padding-top: 4px; min-width: 0; } .comp-timeline-title { font-family: "LXGW WenKai", "Songti SC", serif; font-weight: 400; font-size: clamp(17px, 2.2vw, 21px); margin: 0 0 6px; color: var(--ink); } .comp-timeline-text { font-family: "LXGW WenKai", "Songti SC", serif; font-size: 14px; line-height: 1.8; color: rgba(36, 57, 54, 0.72); margin: 0; } /* 手风琴折叠（原生 details/summary，免 JS） */ .comp-accordion { max-width: 720px; display: flex; flex-direction: column; gap: 12px; } .comp-accordion-item { border: 1px solid var(--paper-edge, rgba(218, 210, 192, 0.5)); border-radius: 12px; background: var(--paper, #faf7ee); overflow: hidden; } .comp-accordion-summary { list-style: none; cursor: pointer; padding: 16px 44px 16px 20px; position: relative; font-family: "LXGW WenKai", "Songti SC", serif; font-size: clamp(16px, 2vw, 19px); color: var(--ink); } .comp-accordion-summary::-webkit-details-marker { display: none; } .comp-accordion-summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 22px; color: rgba(36, 57, 54, 0.5); } .comp-accordion-item[open] .comp-accordion-summary::after { content: "\2212"; } .comp-accordion-body { padding: 0 20px 18px; font-family: "LXGW WenKai", "Songti SC", serif; font-size: 14px; line-height: 1.9; color: rgba(36, 57, 54, 0.72); } /* 标签页组件：顶部 tab 条 + 内容面板 */ .comp-tabcontent { max-width: 760px; } .comp-tab-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; border-bottom: 1px solid rgba(36, 57, 54, 0.12); padding-bottom: 4px; } .comp-tab-btn { font-family: "LXGW WenKai", "Songti SC", serif; font-size: 15px; color: rgba(36, 57, 54, 0.55); background: none; border: none; cursor: pointer; padding: 8px 16px; border-radius: 8px 8px 0 0; transition: color 0.2s, background 0.2s; letter-spacing: 0.04em; } .comp-tab-btn:hover { color: rgba(36, 57, 54, 0.85); background: rgba(36, 57, 54, 0.05); } .comp-tab-btn.active { color: var(--ink); background: #fff; box-shadow: 0 -1px 0 0 var(--ink, #243936) inset; } .comp-tab-panel { display: none; } .comp-tab-panel.active { display: block; } .comp-tab-panel-body { display: flex; flex-direction: column; gap: 18px; } .comp-tabcontent-empty { color: rgba(36, 57, 54, 0.45); font-family: "LXGW WenKai", "Songti SC", serif; font-size: 14px; } /* tab 内容来源切换（固定内容 / 绑定文章） */ .comp-tab-source { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; font-size: 13px; color: rgba(36, 57, 54, 0.65); } .comp-tab-source select { font-size: 13px; padding: 4px 8px; border: 1px solid rgba(36, 57, 54, 0.18); border-radius: 6px; background: #fff; color: var(--ink); } .comp-tab-article { display: none; flex-direction: column; gap: 10px; margin-bottom: 12px; } .comp-tab-article select { font-size: 13px; padding: 4px 8px; border: 1px solid rgba(36, 57, 54, 0.18); border-radius: 6px; background: #fff; color: var(--ink); } /* C 形态：嵌入文章（整篇呈现某篇文章） */ .comp-postembed { max-width: 760px; } .comp-postembed-empty { color: rgba(36, 57, 54, 0.5); font-family: "LXGW WenKai", "Songti SC", serif; font-size: 14px; } .comp-postembed-inner { display: flex; flex-direction: column; gap: 18px; } .comp-postembed-title { font-family: "LXGW WenKai", "Songti SC", serif; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.25; color: var(--ink); margin: 0; } .comp-postembed-meta { display: flex; gap: 14px; flex-wrap: wrap; font-family: "LXGW WenKai", "Songti SC", serif; font-size: 13px; color: rgba(36, 57, 54, 0.55); } .comp-postembed-meta .comp-postembed-cat::after { content: "·"; margin-left: 14px; color: rgba(36, 57, 54, 0.35); } .comp-postembed-cover { width: 100%; max-height: 460px; object-fit: cover; border-radius: 14px; background: var(--paper-edge, rgba(218, 210, 192, 0.4)); } /* 移动端：卡片网格改为自适应列 */ @media (max-width: 760px) { .comp-cardgrid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } } /* ============ 首页图文模板（与动画模板二选一） ============ */ .home-imagetext { position: relative; z-index: 20; min-height: 100svh; display: flex; align-items: center; padding: 14vh clamp(24px, 6vw, 88px) 12vh; background: transparent; color: var(--ink); } /* 模板切换显隐：.home-imagetext{display:flex} 会与 [hidden] 的 display:none 同特异性， 作者样式胜出导致动画模式下空白区块仍占位。显式提升优先级确保 hidden 始终生效。 */ .home-imagetext[hidden], .shan-hai-home[hidden] { display: none !important; } .imagetext-inner { width: 100%; max-width: 860px; margin: 0 auto; } .imagetext-eyebrow { font-family: "LXGW WenKai", "Songti SC", serif; font-size: 12px; letter-spacing: 0.32em; color: rgba(36, 57, 54, 0.45); margin: 0 0 10px; text-transform: uppercase; } .imagetext-title { font-family: "LXGW WenKai", "Songti SC", serif; font-weight: 400; font-size: clamp(28px, 5vw, 46px); margin: 0 0 14px; letter-spacing: 0.04em; } .imagetext-lead { font-family: "LXGW WenKai", "Songti SC", serif; font-size: clamp(16px, 2.4vw, 20px); color: rgba(36, 57, 54, 0.82); margin: 0 0 28px; } .imagetext-blocks { display: flex; flex-direction: column; gap: 30px; } /* 图文块：左图右文 / 右图左文 / 上下堆叠 */ .it-block { display: grid; gap: clamp(18px, 4vw, 40px); align-items: center; } .it-block.it-layout-left { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } .it-block.it-layout-right { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } .it-block.it-layout-right .it-block-img { order: 2; } .it-block.it-layout-stack { grid-template-columns: 1fr; } .it-block-img { display: block; max-width: 100%; max-height: 360px; width: auto; height: auto; object-fit: contain; border-radius: 14px; border: 1px solid rgba(36, 57, 54, 0.12); } .it-block-en { font-family: "LXGW WenKai", "Songti SC", serif; font-size: 12px; letter-spacing: 0.28em; color: rgba(36, 57, 54, 0.45); margin: 0 0 6px; text-transform: uppercase; } .it-block-title { font-family: "LXGW WenKai", "Songti SC", serif; font-weight: 400; font-size: clamp(18px, 2.4vw, 24px); margin: 0 0 8px; letter-spacing: 0.03em; color: rgba(36, 57, 54, 0.92); } .it-block-subtitle { font-family: "LXGW WenKai", "Songti SC", serif; font-size: clamp(14px, 1.8vw, 16px); color: rgba(36, 57, 54, 0.6); margin: 0 0 10px; letter-spacing: 0.04em; } .it-block-text { font-family: "LXGW WenKai", "Songti SC", serif; font-size: clamp(14px, 1.8vw, 16px); line-height: 2; color: rgba(36, 57, 54, 0.72); margin: 0; } /* 首页图文区块也可用段落标题 / 占位提示组件（与介绍区一致） */ .it-block-paratitle { font-family: "LXGW WenKai", "Songti SC", serif; font-weight: 400; font-size: clamp(18px, 2.4vw, 24px); color: rgba(36, 57, 54, 0.92); margin: 0 0 8px; letter-spacing: 0.03em; } .it-block-ph { margin: 0 0 16px; min-height: 120px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 18px; border: 1px dashed rgba(36, 57, 54, 0.28); border-radius: 12px; color: rgba(36, 57, 54, 0.45); font-size: 14px; background: rgba(36, 57, 54, 0.03); } .imagetext-actions { margin-top: 30px; } @media (max-width: 760px) { .it-block.it-layout-left, .it-block.it-layout-right { grid-template-columns: 1fr; } .it-block.it-layout-right .it-block-img { order: 0; } .intro-block.intro-layout-left, .intro-block.intro-layout-right { grid-template-columns: 1fr; } .intro-block.intro-layout-right .intro-comp-img { order: 0; } } @media (max-width: 760px) { .scroll-hint { bottom: 3.5%; } .font-intro { padding: 36px 22px 44px; border-top-left-radius: 18px; border-top-right-radius: 18px; } } /* ============ 响应式 ============ */ @media (max-width: 760px) { .site-header { padding: 26px 24px 16px; } /* 抽屉右边距与头部一致（24px）+ 汉堡右内边距 6px，文字右边缘与 × 字形对齐 */ .nav-drawer { padding: 72px calc(24px + 6px) 32px; } .brand { font-size: 20px; } .site-nav { gap: 18px; font-size: 12px; } .paper { width: min(88vw, 520px); aspect-ratio: 3.2 / 1.45; top: 50%; transform: translate(-50%, calc(-50% + 8vh)) perspective(1200px) rotateX(48deg) scale(0.9); } .shan-hai-home.is-ready .paper, .shan-hai-home.is-typing .paper, .shan-hai-home.is-filled .paper { top: 50%; transform: translate(-50%, calc(-50% + 12vh)) perspective(1200px) rotateX(0deg) scale(0.9); } /* 移动端：落定后的纸（含回车 morph 起点的 merging 态）为 4:3 并缩小 */ .shan-hai-home.is-merging .paper, .shan-hai-home.is-complete .paper, .shan-hai-home.is-branded .paper { width: min(78vw, 400px); aspect-ratio: 4 / 3; top: 50%; transform: translate(-50%, -50%) perspective(1200px) rotateX(0deg) scale(1); } .start-focus { top: 58%; } .calligraphy-preview { top: 34%; max-width: 92vw; font-size: clamp(46px, 14vw, 72px); } .preview-label { top: 40%; } /* 移动端：字落到卡片上，且「字到线」间距恒等于「线到下面字」间距(≈17px)，跨屏宽自适应。 偏移 = 0.66×卡片宽 − 132px（卡片宽=min(78vw,400px)）；化简后：+ 0.285×min(78vw,400px) − 132px */ .shan-hai-home.is-merging .calligraphy-preview, .shan-hai-home.is-complete .calligraphy-preview, .shan-hai-home.is-branded .calligraphy-preview { transform: translate(-50%, calc(-50% + 0.285 * min(78vw, 400px) - 132px)); } } /* ============ 减少动态偏好 ============ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .cursor { animation: none; opacity: 1; } } /* ============ 页脚（后台可配置，留空则隐藏） ============ */ .site-footer { position: relative; z-index: 20; flex-shrink: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px 10px; justify-content: center; align-items: center; padding: 30px 7vw 40px; font-family: "LXGW WenKai", "Songti SC", "STSong", serif; font-size: 13px; letter-spacing: 0.08em; color: rgba(36, 57, 54, 0.5); text-align: center; } .site-footer[hidden] { display: none; } .site-footer .footer-logo-wrap { flex: 0 0 100%; margin-bottom: 8px; } .site-footer .footer-logo { max-height: 34px; width: auto; display: inline-block; vertical-align: middle; } .site-footer .footer-line { line-height: 1.6; display: inline; } .site-footer .footer-icon { display: inline-block; vertical-align: middle; line-height: 1; margin-right: 4px; } .site-footer .footer-icon-img { max-height: 1.1em; width: auto; vertical-align: middle; } .site-footer .footer-sep { display: inline; opacity: 0.5; margin: 0 2px; } .site-footer[style*="text-align: left"] { justify-content: flex-start; text-align: left; } .site-footer[style*="text-align: right"] { justify-content: flex-end; text-align: right; } /* 首页（锁死一屏）：页脚改为屏幕底部常驻细条，读取页脚版块配置，始终可见、可后台改 */ .home-lock .site-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px 7vw; /* 首页页脚不使用底色，透明只显示文字（U老师 2026-08-17 要求） */ background: transparent; border-top: none; } /* 首页英雄区底部预留页脚条高度，避免输入框 / 下载按钮被遮挡 */ .home-lock .shan-hai-home { padding-bottom: 46px; } /* ============ 通用页面（page.html · 组件组合 / 随笔列表模板） ============ */ .page-page { background: var(--paper, #faf7ee); min-height: 100vh; } .page-main { position: relative; z-index: 20; max-width: 960px; margin: 0 auto; padding: clamp(96px, 14vh, 160px) 7vw 80px; } .page-head { text-align: center; margin-bottom: clamp(28px, 5vh, 56px); } .page-title { margin: 0; font-family: "LXGW WenKai", "Songti SC", "STSong", serif; font-weight: 600; font-size: clamp(28px, 5vw, 48px); letter-spacing: 0.04em; color: var(--ink, #243936); } .page-sub { margin: 12px 0 0; font-family: "LXGW WenKai", "Songti SC", "STSong", serif; font-size: clamp(14px, 2vw, 18px); letter-spacing: 0.06em; color: rgba(36, 57, 54, 0.6); } .page-blocks { display: flex; flex-direction: column; } /* 复用介绍区的 .intro-block / .intro-block-body / .intro-comp-* 视觉 */ .blog-list-wrap { margin-top: 8px; } /* ============ 移动端安全网（仅 ≤760px；绝不改动桌面规则，首页桌面外观保持不变） ============ */ @media (max-width: 760px) { /* overflow-x: clip 在不破坏纵向滚动 / sticky 的前提下，杜绝任何残余横向滚动 */ html, body { overflow-x: clip; } img, svg, video, canvas, iframe { max-width: 100%; height: auto; } /* 普通内容页：缩小顶部留白，避免标题被导航挤压 */ .page-main { padding-top: clamp(76px, 11vh, 120px); padding-left: 6vw; padding-right: 6vw; } /* 极窄屏：站点头部允许换行，避免导航被挤爆 */ .site-header { flex-wrap: wrap; gap: 10px; } } /* ============ 大屏加宽（仅 ≥1440px 生效；≤1439px 完全不动，保留现有效果） ============ */ @media (min-width: 1440px) { /* 内容页 / 博客列表 / 文章详情：拓宽主容器，不再挤在中间一小条 */ .page-main { max-width: min(90vw, 1240px); } .blog-main, .post-main { max-width: min(92vw, 1500px); } .post-article { max-width: min(90vw, 960px); } /* 组件级写死宽度放开，随主容器铺开 */ .comp-timeline, .comp-accordion, .comp-postembed { max-width: none; } .intro-inner, .home-intro .intro-inner { max-width: min(88vw, 1080px); } /* 首页纸在大屏放大，避免孤零零一小块 */ .paper { width: min(56vw, 1040px); } .shan-hai-home.is-merging .paper, .shan-hai-home.is-complete .paper, .shan-hai-home.is-branded .paper { width: min(40vw, 680px); } } @media (min-width: 1920px) { .page-main { max-width: min(88vw, 1440px); } .blog-main, .post-main { max-width: min(90vw, 1760px); } .post-article { max-width: min(90vw, 1040px); } .paper { width: min(54vw, 1200px); } .shan-hai-home.is-merging .paper, .shan-hai-home.is-complete .paper, .shan-hai-home.is-branded .paper { width: min(40vw, 820px); } }