/* ========================================================================== 南京乡土文化数字展陈 · 前端预览（古风文化版） 方案一 A「卷帙·展墙延续」：宣纸、墨色、朱砂印、双线版框、竖排签条、回纹、水墨远山。 参照场馆实景：书标签墙、墙面立轴、冰裂锦地纹、水墨山水。 注：首页已按 2026-09-19 决定移除线装书与卷轴签，"首页不放具象物"。 B / C 两方向保留原气质，共用同一信息结构。 ========================================================================== */ :root { color-scheme: dark; --studio-bg: #171410; --studio-panel: #201c16; --studio-line: rgba(230, 214, 178, .16); --studio-muted: #948a76; --studio-text: #ece2cb; --screen-ink: #1b2721; --screen-paper: #e8e4d4; --screen-muted: #718276; --screen-accent: #a8784e; --screen-deep: #263e35; --screen-red: #9f493b; --screen-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07); --serif: "STSong", "SimSun", "NSimSun", "Noto Serif CJK SC", serif; /* 回纹（数据 URI 内联 SVG，无外部资源） */ --meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cpath d='M3 23V3h20v20H7V7h12v12h-8v-8h4' fill='none' stroke='%239a6b41' stroke-width='1.4'/%3E%3C/svg%3E"); font-family: var(--serif); } * { box-sizing: border-box; } html, body { margin: 0; min-width: 1120px; min-height: 100%; background: var(--studio-bg); color: var(--studio-text); } body { background: radial-gradient(circle at 50% -20%, #3a3125 0, #1c1813 45%, #12100c 80%); } button { font: inherit; } button:focus-visible { outline: 2px solid #e9c684; outline-offset: 3px; } /* ---------- 评审壳（深色胡桃木底，压住不作秀） ---------- */ .studio-shell { width: min(1680px, calc(100vw - 72px)); margin: 0 auto; padding: 28px 0 24px; } .studio-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--studio-line); } .brand-lockup { display: flex; align-items: center; gap: 14px; min-width: 310px; } .brand-seal { display: grid; place-items: center; width: 42px; height: 42px; transform: rotate(45deg); border: 1px solid #b8a97f; color: #e6d7b4; font: 24px var(--serif); } .brand-seal::first-letter { transform: rotate(-45deg); } .brand-lockup h1 { margin: 5px 0 0; font-size: 18px; letter-spacing: .14em; font-weight: 500; font-family: var(--serif); } .micro-label { margin: 0; color: var(--studio-muted); font-size: 10px; letter-spacing: .17em; text-transform: uppercase; } .toolbar-controls { display: flex; align-items: center; justify-content: flex-end; gap: 9px; } .view-switch, .direction-switch { display: flex; gap: 3px; padding: 4px; border: 1px solid var(--studio-line); background: rgba(255,248,230,.05); border-radius: 8px; } .view-button, .direction-button, .utility-button { border: 0; border-radius: 5px; padding: 8px 11px; color: #a99f88; background: transparent; cursor: pointer; font-size: 11px; font-family: var(--serif); letter-spacing: .06em; transition: .2s ease; } .view-button:hover, .direction-button:hover, .utility-button:hover { color: #f6eed8; background: rgba(255,248,230,.1); } .view-button.is-active, .direction-button.is-active { color: #241f14; background: #ddd3ae; } .utility-button { border: 1px solid var(--studio-line); white-space: nowrap; } .utility-button[aria-pressed="true"] { color: #252516; border-color: #d5c681; background: #d5c681; } .icon-button { min-width: 37px; padding: 8px 10px; font-size: 17px; line-height: 1; } .preview-meta { display: grid; grid-template-columns: minmax(250px, .75fr) minmax(350px, 1.35fr) auto; align-items: end; gap: 28px; padding: 22px 2px 17px; } .preview-meta h2 { margin: 5px 0 0; color: #f0e5cc; font: 500 28px/1.1 var(--serif); letter-spacing: .14em; } .direction-note { max-width: 650px; margin: 0; color: #b0a892; font-size: 13px; line-height: 1.85; font-family: var(--serif); letter-spacing: .04em; } .canvas-meta { display: flex; align-items: center; gap: 8px; color: #9d937e; font-size: 11px; white-space: nowrap; } .canvas-meta i, .studio-footer i { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: #6b6350; } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #8ca97e; box-shadow: 0 0 0 4px rgba(140,169,126,.12); } .display-frame { position: relative; padding: 11px; border-radius: 15px; background: linear-gradient(145deg, #453b2b, #16130e 58%); box-shadow: var(--screen-shadow); } .display-frame::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,244,214,.12); border-radius: 15px; pointer-events: none; } .display-screen { position: relative; overflow: hidden; aspect-ratio: 4320 / 1920; border-radius: 6px; isolation: isolate; background: #111; } .display-screen::after { content: ""; position: absolute; inset: 0; z-index: 40; pointer-events: none; border: 1px solid rgba(255,244,214,.16); } .ambient-noise { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .24; background-image: radial-gradient(rgba(255,255,255,.5) .45px, transparent .55px); background-size: 5px 5px; mix-blend-mode: overlay; } .screen-topbar { position: absolute; z-index: 20; left: 4.6%; right: 4.6%; top: 4.6%; display: flex; justify-content: space-between; align-items: center; color: var(--screen-muted); font-size: 10px; letter-spacing: .3em; pointer-events: none; font-family: var(--serif); } .screen-brand, .screen-context { display: flex; align-items: center; gap: 8px; } .screen-mark { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid currentColor; font: 12px var(--serif); } .context-separator { opacity: .5; } .screen-footer { position: absolute; z-index: 23; left: 4.6%; right: 4.6%; bottom: 4.2%; display: flex; justify-content: space-between; color: var(--screen-muted); font-size: 10px; letter-spacing: .22em; pointer-events: none; font-family: var(--serif); } .reserved-slot { position: absolute; z-index: 25; bottom: 8.6%; width: 12.4%; min-height: 8.5%; padding: 7px 10px; border: 1px dashed rgba(84, 94, 70, .55); color: rgba(70, 90, 72, .85); background: rgba(239,239,222,.14); font-size: 9px; letter-spacing: .1em; pointer-events: none; font-family: var(--serif); } .reserved-slot span, .reserved-slot small { display: block; } .reserved-slot small { margin-top: 4px; opacity: .75; font-size: 8px; letter-spacing: .04em; } .reserved-slot-left { left: 4.1%; text-align: left; } /* 评审壳的右下预留位是 index.html 里的常驻节点（测试断言该元素存在）， 视频展播 / 深度浏览两类画面用这个类整个隐藏，而不是删节点。 */ .reserved-slot-right.is-hidden { display: none; } .reserved-slot-right { right: 4.1%; text-align: right; border-color: rgba(120,90,50,.55); color: rgba(96,74,44,.9); background: rgba(246,241,226,.55); } .qr-pair { display: flex !important; gap: 6px; justify-content: flex-end; } /* 二维码占位图：0.964 比例，必须 contain —— 用 cover 会把码的上/下边各切掉约 3.6% */ .qr-pair img { display: block; width: 46px; height: 46px; object-fit: contain; background: #fff; padding: 3px; border: 1px solid rgba(90,70,40,.4); border-radius: 2px; } .shuiyun .reserved-slot-right, .archive .reserved-slot-right { background: rgba(10,20,28,.35); border-color: rgba(200,220,215,.4); color: rgba(220,232,228,.8); } .archive .reserved-slot-right { background: rgba(30,26,22,.4); border-color: rgba(233,201,139,.4); color: rgba(233,220,196,.85); } .seam-lines { display: none; position: absolute; inset: 0; z-index: 45; pointer-events: none; } .show-seams .seam-lines { display: block; } .seam-lines span { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(239, 211, 147, .58); box-shadow: 0 0 16px rgba(239,211,147,.25); } .seam-lines span:nth-child(1) { left: 25%; } .seam-lines span:nth-child(2) { left: 50%; } .seam-lines span:nth-child(3) { left: 75%; } .seam-lines b { position: absolute; right: 1.8%; top: 7.5%; padding: 4px 7px; border: 1px solid rgba(239,211,147,.44); color: #edd493; background: rgba(39,30,17,.72); font-size: 9px; letter-spacing: .12em; font-weight: 400; } .screen-view { position: absolute; inset: 0; z-index: 3; display: none; overflow: hidden; } .screen-view.is-active { display: block; } /* ========================================================================== 观众端公共骨架 ========================================================================== */ .audience-home, .audience-detail { position: absolute; inset: 0; overflow: hidden; color: var(--screen-ink); background: var(--screen-paper); animation: screen-in .55s cubic-bezier(.22,.8,.36,1) both; font-family: var(--serif); } @keyframes screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .moyun .audience-home, .moyun .audience-detail { --screen-paper: #ede6d2; --screen-ink: #26422f; --screen-muted: #71806f; --screen-accent: #96683a; --screen-deep: #21473a; --screen-red: #a03c28; background: radial-gradient(ellipse 60% 46% at 86% 5%, rgba(255, 252, 238, .92), transparent 62%), radial-gradient(ellipse 52% 58% at 3% 97%, rgba(191, 178, 138, .36), transparent 60%), linear-gradient(168deg, #f1ebd9 0%, #eae2cb 48%, #e2d9bd 100%); } .shuiyun .audience-home, .shuiyun .audience-detail { --screen-paper: #132a3a; --screen-ink: #e6ece0; --screen-muted: #7da8a0; --screen-accent: #e2b36c; --screen-deep: #0c1d2a; --screen-red: #d68469; } .archive .audience-home, .archive .audience-detail { --screen-paper: #171615; --screen-ink: #efe4cf; --screen-muted: #a39887; --screen-accent: #df7255; --screen-deep: #28231f; --screen-red: #e7795f; } /* 宣纸肌理 + 帘纹 */ .moyun .audience-home::before, .moyun .audience-detail::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(104, 88, 58, .028) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(104, 88, 58, .02) 0 1px, transparent 1px 6px), radial-gradient(ellipse 118% 88% at 50% 50%, transparent 70%, rgba(112, 90, 54, .13) 100%); mix-blend-mode: multiply; } .shuiyun .audience-home::before, .shuiyun .audience-detail::before { content: ""; position: absolute; inset: 0; opacity: .45; pointer-events: none; background: radial-gradient(ellipse at 93% 8%, rgba(255,255,245,.1), transparent 28%), repeating-linear-gradient(90deg, transparent 0 12px, rgba(230,240,235,.02) 13px 14px); } .archive .audience-home::before, .archive .audience-detail::before { content: ""; position: absolute; inset: 0; opacity: .45; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(237,225,202,.03) 13px 14px); } .shuiyun .audience-home::after, .shuiyun .audience-detail::after { content: ""; position: absolute; inset: 0; opacity: .35; background: radial-gradient(ellipse at 13% 80%, rgba(69,133,139,.6), transparent 35%), linear-gradient(110deg, rgba(8,20,32,.18), transparent 55%, rgba(221,170,102,.14)); pointer-events: none; } .archive .audience-home::after, .archive .audience-detail::after { content: ""; position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(rgba(237,225,202,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(237,225,202,.22) 1px, transparent 1px); background-size: 9% 17%; mask-image: linear-gradient(90deg, black, transparent 88%); pointer-events: none; } /* ========================================================================== A 稿 · 配色变体（2026-09-20）—— 排版与结构一律不变，只换「纸色 / 墨色 / 点缀 / 印章」 ------------------------------------------------------------------------- 宣纸黄 = 上面的 .moyun（默认稿）。下列 4 个是浅色纸色系变体，每个只定义： ① 6 个 --screen-* token（纸/墨/灰/点缀/深/印章红）； ② 纸底三层渐变（高光 + 光晕 + 主纸色）； ③ 宣纸肌理纹（同 moyun 结构，只把纹色换成各色相的深调）。 装置层、挂屏、书名签、金陵水岸卷、版框全部 color-mix 引 token，自动随色派生，无需逐条覆盖。 后台 .is-admin 不走这些 token，保持不变。 */ /* 月白 · 冷调淡青米白 */ .yuebai .audience-home, .yuebai .audience-detail { --screen-paper: #ecefea; --screen-ink: #2a3a45; --screen-muted: #7a8a93; --screen-accent: #8a99a5; --screen-deep: #223a46; --screen-red: #a34e4a; background: radial-gradient(ellipse 60% 46% at 86% 5%, rgba(250, 252, 251, .92), transparent 62%), radial-gradient(ellipse 52% 58% at 3% 97%, rgba(148, 168, 180, .30), transparent 60%), linear-gradient(168deg, #f1f4f1 0%, #e7ece9 48%, #dde4e1 100%); } .yuebai .audience-home::before, .yuebai .audience-detail::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; background: repeating-linear-gradient(0deg, rgba(60, 82, 96, .026) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(60, 82, 96, .018) 0 1px, transparent 1px 6px), radial-gradient(ellipse 118% 88% at 50% 50%, transparent 70%, rgba(70, 90, 105, .12) 100%); } .yuebai .audience-idle { --screen-paper: #ecefea; --screen-ink: #2a3a45; --screen-muted: #7a8a93; --screen-accent: #8a99a5; --screen-deep: #223a46; --screen-red: #a34e4a; background: radial-gradient(ellipse 60% 46% at 86% 5%, rgba(250, 252, 251, .92), transparent 62%), radial-gradient(ellipse 52% 58% at 3% 97%, rgba(148, 168, 180, .30), transparent 60%), linear-gradient(168deg, #f1f4f1 0%, #e7ece9 48%, #dde4e1 100%); } .yuebai .audience-idle::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; background: repeating-linear-gradient(0deg, rgba(60, 82, 96, .026) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(60, 82, 96, .018) 0 1px, transparent 1px 6px), radial-gradient(ellipse 118% 88% at 50% 50%, transparent 70%, rgba(70, 90, 105, .12) 100%); } /* 竹青 · 淡青绿（水乡清润） */ .zhuqing .audience-home, .zhuqing .audience-detail { --screen-paper: #e8ede5; --screen-ink: #2d4035; --screen-muted: #6f8678; --screen-accent: #6c8f6e; --screen-deep: #214a34; --screen-red: #a2413a; background: radial-gradient(ellipse 60% 46% at 86% 5%, rgba(249, 252, 247, .92), transparent 62%), radial-gradient(ellipse 52% 58% at 3% 97%, rgba(150, 180, 158, .30), transparent 60%), linear-gradient(168deg, #edf1ea 0%, #e3eae0 48%, #d9e2d6 100%); } .zhuqing .audience-home::before, .zhuqing .audience-detail::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; background: repeating-linear-gradient(0deg, rgba(70, 92, 72, .026) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(70, 92, 72, .018) 0 1px, transparent 1px 6px), radial-gradient(ellipse 118% 88% at 50% 50%, transparent 70%, rgba(78, 100, 80, .12) 100%); } .zhuqing .audience-idle { --screen-paper: #e8ede5; --screen-ink: #2d4035; --screen-muted: #6f8678; --screen-accent: #6c8f6e; --screen-deep: #214a34; --screen-red: #a2413a; background: radial-gradient(ellipse 60% 46% at 86% 5%, rgba(249, 252, 247, .92), transparent 62%), radial-gradient(ellipse 52% 58% at 3% 97%, rgba(150, 180, 158, .30), transparent 60%), linear-gradient(168deg, #edf1ea 0%, #e3eae0 48%, #d9e2d6 100%); } .zhuqing .audience-idle::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; background: repeating-linear-gradient(0deg, rgba(70, 92, 72, .026) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(70, 92, 72, .018) 0 1px, transparent 1px 6px), radial-gradient(ellipse 118% 88% at 50% 50%, transparent 70%, rgba(78, 100, 80, .12) 100%); } /* 藕荷 · 淡紫灰（温婉古雅） */ .ouhe .audience-home, .ouhe .audience-detail { --screen-paper: #ece8ec; --screen-ink: #3d3441; --screen-muted: #867c8e; --screen-accent: #8d6f8a; --screen-deep: #3d2e4a; --screen-red: #a3444e; background: radial-gradient(ellipse 60% 46% at 86% 5%, rgba(252, 249, 252, .92), transparent 62%), radial-gradient(ellipse 52% 58% at 3% 97%, rgba(180, 160, 185, .30), transparent 60%), linear-gradient(168deg, #f1edf1 0%, #e8e3e9 48%, #dfd9e1 100%); } .ouhe .audience-home::before, .ouhe .audience-detail::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; background: repeating-linear-gradient(0deg, rgba(90, 72, 94, .026) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(90, 72, 94, .018) 0 1px, transparent 1px 6px), radial-gradient(ellipse 118% 88% at 50% 50%, transparent 70%, rgba(100, 82, 104, .12) 100%); } .ouhe .audience-idle { --screen-paper: #ece8ec; --screen-ink: #3d3441; --screen-muted: #867c8e; --screen-accent: #8d6f8a; --screen-deep: #3d2e4a; --screen-red: #a3444e; background: radial-gradient(ellipse 60% 46% at 86% 5%, rgba(252, 249, 252, .92), transparent 62%), radial-gradient(ellipse 52% 58% at 3% 97%, rgba(180, 160, 185, .30), transparent 60%), linear-gradient(168deg, #f1edf1 0%, #e8e3e9 48%, #dfd9e1 100%); } .ouhe .audience-idle::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; background: repeating-linear-gradient(0deg, rgba(90, 72, 94, .026) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(90, 72, 94, .018) 0 1px, transparent 1px 6px), radial-gradient(ellipse 118% 88% at 50% 50%, transparent 70%, rgba(100, 82, 104, .12) 100%); } /* 赭石 · 暖褐（厚重古卷） */ .zheshi .audience-home, .zheshi .audience-detail { --screen-paper: #ece0cd; --screen-ink: #3d2f21; --screen-muted: #87745f; --screen-accent: #a16b3a; --screen-deep: #4a3624; --screen-red: #a33d2d; background: radial-gradient(ellipse 60% 46% at 86% 5%, rgba(255, 250, 240, .92), transparent 62%), radial-gradient(ellipse 52% 58% at 3% 97%, rgba(192, 166, 128, .36), transparent 60%), linear-gradient(168deg, #f0e8d5 0%, #e9dec9 48%, #e0d3bb 100%); } .zheshi .audience-home::before, .zheshi .audience-detail::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; background: repeating-linear-gradient(0deg, rgba(110, 84, 54, .028) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(110, 84, 54, .02) 0 1px, transparent 1px 6px), radial-gradient(ellipse 118% 88% at 50% 50%, transparent 70%, rgba(118, 92, 58, .13) 100%); } .zheshi .audience-idle { --screen-paper: #ece0cd; --screen-ink: #3d2f21; --screen-muted: #87745f; --screen-accent: #a16b3a; --screen-deep: #4a3624; --screen-red: #a33d2d; background: radial-gradient(ellipse 60% 46% at 86% 5%, rgba(255, 250, 240, .92), transparent 62%), radial-gradient(ellipse 52% 58% at 3% 97%, rgba(192, 166, 128, .36), transparent 60%), linear-gradient(168deg, #f0e8d5 0%, #e9dec9 48%, #e0d3bb 100%); } .zheshi .audience-idle::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; background: repeating-linear-gradient(0deg, rgba(110, 84, 54, .028) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(110, 84, 54, .02) 0 1px, transparent 1px 6px), radial-gradient(ellipse 118% 88% at 50% 50%, transparent 70%, rgba(118, 92, 58, .13) 100%); } /* 版框：双线框 + 角隅线 */ .paper-frame { position: absolute; inset: 2.9% 3.2%; z-index: 2; pointer-events: none; border: 1.5px solid color-mix(in srgb, var(--screen-muted) 34%, transparent); } .paper-frame::before { content: ""; position: absolute; inset: 5px; border: 1px solid color-mix(in srgb, var(--screen-muted) 20%, transparent); } .paper-frame i { position: absolute; width: 16px; height: 16px; border: 0 solid color-mix(in srgb, var(--screen-accent) 70%, transparent); } .paper-frame .tl { left: -2px; top: -2px; border-left-width: 2.5px; border-top-width: 2.5px; } .paper-frame .tr { right: -2px; top: -2px; border-right-width: 2.5px; border-top-width: 2.5px; } .paper-frame .bl { left: -2px; bottom: -2px; border-left-width: 2.5px; border-bottom-width: 2.5px; } .paper-frame .br { right: -2px; bottom: -2px; border-right-width: 2.5px; border-bottom-width: 2.5px; } .shuiyun .paper-frame, .archive .paper-frame { opacity: .5; } /* 回纹缘饰带（上下各一，低调） */ .meander-band { position: absolute; left: 3.2%; right: 3.2%; height: 26px; z-index: 2; pointer-events: none; background-image: var(--meander); background-repeat: repeat-x; background-size: 26px 26px; opacity: .16; } .band-top { top: 2.9%; } .band-bottom { bottom: 2.9%; transform: scaleY(-1); } .shuiyun .meander-band, .archive .meander-band { opacity: .08; } /* 水墨远山 */ .ink-wash { position: absolute; z-index: 1; left: -3%; bottom: -2%; width: 62%; height: 24%; pointer-events: none; color: var(--screen-deep); } .ink-wash path { fill: currentColor; opacity: .08; } .ink-wash .wash-2 { opacity: .055; } .ink-wash .wash-line { stroke: currentColor; stroke-width: 2; opacity: .13; } .shuiyun .ink-wash { color: #63b3a6; } .shuiyun .ink-wash path { opacity: .16; } .archive .ink-wash { color: #d99a4e; } .archive .ink-wash path { opacity: .1; } /* 底部实景「金陵水岸」卷（去底留墨版）—— 观众端全页面共用底带（待机 P01 / 首页 P02 / 详情 P03–P07）。 原 SVG 淡墨远山 .ink-wash 在观众端停用（DOM 保留，display:none），后台 admin-shell 不走 frame() 故不含本卷。 素材：assets/landscape-jinling-ink.png —— 由 scripts/build-landscape-ink.py 从甲方原图 landscape-jinling.png 派生（RGB 写死 --ink-xuan 松烟墨、只 alpha 变、逐列纸底归一化）。 原图直贴已判失败：图自带纸底比页面亮 25 级 → 白带 + x≈47% 竖向接缝。改曲线/换图跑脚本，别手改 png。 几何与取景见 docs/02-design/solution-a-canvas-review-2026-09-19.md §24；收进版框（§25.8）。 详情页山水被半透明 .detail-panel 压着，主要从左右两侧与底部细带露出——内容优先、山水退为氛围底。 */ .audience-home .ink-wash, .audience-detail .ink-wash, .audience-idle .ink-wash { display: none; } .home-scroll { position: absolute; z-index: 1; bottom: 2.9%; left: 3.2%; right: 3.2%; height: 26%; pointer-events: none; opacity: .5; /* 档位实测：.35 发飘 / .85 压成一团灰 */ background: url("assets/landscape-jinling-ink.png") center 40% / 100% auto no-repeat; mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 32%, #000 100%); mask-composite: intersect; } /* 深底两主题：去底后是"深墨+透明纸"，深底上深墨看不见 —— 先反相让 luminosity 抬成淡墨白描 */ .shuiyun .home-scroll, .archive .home-scroll { filter: invert(1); mix-blend-mode: luminosity; opacity: .42; } /* ========================================================================== 首页装置层「挂签成列」（2026-09-19 夜定稿）—— 挂杆 + 两翼挂屏 + 两翼书名签 ------------------------------------------------------------------------- 契约：① 全层 pointer-events:none，五签位置/热区/版式不变； ② 色值全 color-mix 引 token —— 木色随 --screen-accent 派生 （墨韵＝栗木、水韵＝金木杆、档案＝赤褐木杆），签纸/挂屏底随 --screen-paper 派生，深底两主题自动成暗色，无需另写覆盖； ③ 几何：挂杆 left/right 14%、bottom 63.6%、h 5px，五根吊线对齐五签中心 （22/36/50/64/78%，轨内定位 (中心−14)/72）；挂屏两翼 x 7%/89.6%、y 14%、 3.4%×20%、opacity .62；书名签中心 x 8.7%/91.3%（与挂屏同轴）、 y 38.5/51/63.5%、h 10%、统一 opacity .5、无俯仰角； ④ 书名签底边最高到 y 73.5%，左下预留位顶边 82.9%，换书名必须复算互不侵入； ⑤ 吊线/木珠/轴头是刻意出血，三处 BLEED 白名单已登记 （audit-canvas-layout / audit-preview-shell / verify-book-flow）。 琳琅靠层次秩序（同一套"悬挂"语言），不靠数量；取舍过程见 p02-home-options.html， 原委见 docs/02-design/solution-a-canvas-review-2026-09-19.md §20。 */ .home-rail { position: absolute; z-index: 6; left: 14%; right: 14%; bottom: 63.6%; height: 5px; border-radius: 3px; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--screen-accent) 85%, #fff), color-mix(in srgb, var(--screen-accent) 55%, #241a10)); box-shadow: 0 2px 5px color-mix(in srgb, var(--screen-deep) 28%, transparent), inset 0 1px 0 rgba(255, 244, 214, .2); } .home-rail::before, .home-rail::after { content: ""; position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--screen-accent) 88%, #fff), color-mix(in srgb, var(--screen-accent) 45%, #1d1409) 70%); box-shadow: 0 1px 3px rgba(24, 20, 12, .4); } .home-rail::before { left: -5px; transform: translateY(-50%); } .home-rail::after { right: -5px; transform: translateY(-50%); } .home-rail i { position: absolute; top: 5px; width: 1.5px; height: 15px; background: color-mix(in srgb, var(--screen-accent) 60%, var(--screen-deep)); box-shadow: 0 1px 1px rgba(24, 20, 12, .2); } .home-rail i::after { content: ""; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--screen-accent) 88%, #fff), color-mix(in srgb, var(--screen-accent) 45%, #1d1409) 75%); } /* 五根吊线对齐五签中心：签中心在屏宽 22/36/50/64/78%，挂杆占 14%–86%（宽 72%） */ .home-rail i:nth-child(1) { left: 11.11%; } .home-rail i:nth-child(2) { left: 30.56%; } .home-rail i:nth-child(3) { left: 50%; transform: translateX(-50%); } .home-rail i:nth-child(4) { left: 69.44%; } .home-rail i:nth-child(5) { left: 88.89%; } /* 回纹锦挂屏（纯纹样无文字）：顶部也带吊线，与挂杆同一套"悬挂"语言，不再是独立盒子 */ .home-hanging { position: absolute; z-index: 2; top: var(--y); left: var(--x); width: var(--w); height: var(--h); pointer-events: none; opacity: .62; background: linear-gradient(180deg, color-mix(in srgb, var(--screen-paper) 92%, #fff), color-mix(in srgb, var(--screen-paper) 82%, var(--screen-muted))); border: 1px solid color-mix(in srgb, var(--screen-muted) 50%, transparent); box-shadow: 0 6px 14px color-mix(in srgb, var(--screen-deep) 16%, transparent), inset 0 0 0 4px color-mix(in srgb, var(--screen-paper) 85%, transparent), inset 0 0 0 5px color-mix(in srgb, var(--screen-accent) 40%, transparent); } .home-hanging::before { content: ""; position: absolute; inset: 9px; background-image: var(--meander); background-size: 17px 17px; opacity: .24; } .home-hanging::after { content: ""; position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%); width: 58%; height: 7px; border-radius: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--screen-accent) 85%, #fff), color-mix(in srgb, var(--screen-accent) 55%, #241a10)); box-shadow: 0 1px 3px rgba(24, 20, 12, .3); } .home-hanging b { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--screen-accent) 88%, #fff), color-mix(in srgb, var(--screen-accent) 45%, #1d1409) 75%); } /* 挂屏顶部吊线：与挂杆吊线同源 */ .home-hanging b::before { content: ""; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 1.5px; height: 22px; background: color-mix(in srgb, var(--screen-accent) 60%, var(--screen-deep)); } /* 两翼书名签：真实南京旧志名，属"文字纹样"而非居中具象物（口径边界见审查记录 §20.7）—— 统一 opacity .5、无俯仰角，安静成列；深底两主题随 token 自动派生暗色签纸 */ .home-tag-wall { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .home-tag { position: absolute; left: var(--x); top: var(--y); width: 3.1%; height: var(--h); display: flex; align-items: center; justify-content: center; padding: 8px 0; writing-mode: vertical-rl; white-space: nowrap; opacity: .5; font: 11.5px/1 var(--serif); letter-spacing: .2em; color: color-mix(in srgb, var(--screen-ink) 82%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--screen-paper) 92%, #fff), color-mix(in srgb, var(--screen-paper) 82%, var(--screen-muted))); border: 1px solid color-mix(in srgb, var(--screen-muted) 52%, transparent); box-shadow: 0 3px 9px color-mix(in srgb, var(--screen-deep) 16%, transparent), inset 0 0 0 2px color-mix(in srgb, var(--screen-paper) 80%, transparent); } .home-tag.sealed::after { content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 9px; height: 9px; background: var(--screen-red); opacity: .85; } /* ========================================================================== A 方向 · 首页（P02） 首页主语＝五个模块入口本身：标题居中在上，五条签条放大居中在下。 中央不再放具象物——三册线装书、书影、飞鸟与「正在展阅·景定建康志」卷轴签 已移除（理由见 docs/02-design/solution-a-canvas-review-2026-09-19.md）。 这是刻意的设计决定，不要"补"回书函组与卷轴签。 ========================================================================== */ .home-copy { position: absolute; z-index: 4; left: 50%; top: 12%; width: 72%; transform: translateX(-50%); text-align: center; } .kicker-cn { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 16px; color: var(--screen-accent); font-size: 12px; letter-spacing: .34em; } .kicker-rule { display: inline-block; width: 30px; height: 1px; background: color-mix(in srgb, var(--screen-accent) 60%, transparent); } .home-title { display: flex; align-items: center; justify-content: center; gap: 24px; } .home-copy h3 { margin: 0; font: 500 clamp(26px, 3.4vw, 52px)/1.1 var(--serif); letter-spacing: .18em; color: var(--screen-ink); text-shadow: 0 1px 0 rgba(255,252,240,.4); } .home-copy h3 em { margin-left: .34em; color: var(--screen-muted); font-style: normal; } .home-copy .intro { max-width: 640px; margin: 18px auto 0; color: var(--screen-muted); font-size: 13px; letter-spacing: .12em; line-height: 1.95; } /* 朱砂白文印 */ .vermilion-seal { flex: none; display: grid; place-items: center; width: 54px; height: 54px; transform: rotate(-4deg); background: var(--screen-red); color: #f4ead2; font: 500 20px/1.3 var(--serif); letter-spacing: .06em; text-align: center; border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(244,234,210,.55), inset 0 0 0 5px var(--screen-red), inset 0 0 0 6px rgba(244,234,210,.3), 0 6px 18px rgba(160, 60, 40, .32); opacity: .94; } .shuiyun .vermilion-seal { background: var(--screen-accent); color: #1c2833; box-shadow: inset 0 0 0 2px rgba(28,40,51,.4), 0 6px 18px rgba(0,0,0,.35); } .archive .vermilion-seal { background: var(--screen-red); color: #f5ead2; } /* 线装书函组 / 书影 / 飞鸟：已按"首页不放具象物"的决定整体移除。 .book / .book-label / .cover-seal / .ink-birds 在 A 稿中不再有引用； 如需恢复，请从 git 历史取回本段，不要在首页"顺手"补回。 */ /* 右侧「正在展阅」卷轴签：暂停使用（形制保留，暂不挂内容）。 原内容写死《景定建康志》，会在首页把"方志"当成整屏主语；而现场立轴的形制本身 是有依据的（现场参考照片），所以只停用、不废弃——待甲方确认立轴上该出现什么 （展陈题解 / 内容范围 / 本期专题）后再挂回。 恢复方式：把下面这段取消注释，并在模板里放回