/* ============================================================ 舰桥首页（bridge-home） 整页一套暗色 HUD 仪表盘体系。每张卡片形状不同（切角 / 六边形 / 斜切 / 凹口），装饰也不同（刻度尺 / 准星 / 扫描光条 / 数据条）， 不再是一个模子刻出来的方块。 骨子是严格 grid；卡片形态、角标、坐标尺全是装饰层。 ============================================================ */ .bh-page { /* 色板（2026-10-19 提亮一档：欢哥「整体有点暗，费视力」） 原则：底色只提一点点（保住暗色气质），文字与卡片底提得多一些， 让「字/背景」的对比拉开，而不是把整页洗灰。 */ --bh-bg: #0C1219; --bh-bg2: #121A28; --bh-line: #38D9FF; --bh-line-dim: rgba(56, 217, 255, 0.35); --bh-ink: #DDEAF5; --bh-dim: #95AEBF; --bh-green: #2FBF9B; --bh-green-deep: #7FD4BC; --bh-green-line: rgba(47, 191, 155, 0.32); --bh-card-bg: rgba(19, 27, 41, 0.92); --bh-card-ink: #EAF4FC; --bh-card-dim: #B6C9D8; --bh-card-line: rgba(56, 217, 255, 0.24); --bh-card-link: #38D9FF; /* 琥珀（2026-10-19 欢哥问「要不要加点金黄」）：全站只给**时间**用。 青=结构/链接、绿=在线/正常、金=时间/当前，三色各管一件事； 金一旦铺开（按钮、链接、正文）就成花屏，所以上限锁在四处： 时钟、本周读数、日期印章、本期主打标签。 */ --bh-gold: #F0B429; --bh-gold-dim: rgba(240, 180, 41, 0.72); --bh-gold-line: rgba(240, 180, 41, 0.32); --bh-arc-bg: #0C1219; --bh-arc-ink: #DDEAF5; --bh-arc-dim: #9AAAB8; --bh-arc-line: rgba(56, 217, 255, 0.14); --bh-mono: "Cascadia Code", "Cascadia Mono", ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace; padding-top: 0; /* 页头已散点化，不再占文档流 */ } /* ============ 舰桥态 ============ */ .bh-bridge { position: relative; height: 100vh; /* 下限从 760 收到 680：760 是当年网格还是固定行高时留的保险，现在 .bh-deck 的卡片是 fr 行，实测 680 时内容仍完整（1440×680 下最低一张卡 底边 638）。留着 760 的后果是 1440×720 的笔记本上**首屏比视口高 40px**， 滚一下会露出首屏尾巴，"首页正好两屏"就破了 —— 2.09 屏。 */ min-height: 680px; overflow: hidden; background: radial-gradient(1000px 700px at 57% 48%, rgba(56, 217, 255, 0.085), transparent 62%), radial-gradient(1200px 620px at 82% 12%, rgba(56, 217, 255, 0.05), transparent 64%), radial-gradient(900px 520px at 14% 86%, rgba(47, 191, 155, 0.05), transparent 62%), radial-gradient(circle at 50% 50%, #0F1622 0%, #0A0F18 55%, #06090F 100%); color: var(--bh-ink); } /* 背景网格：中心清晰、向外渐隐 —— 不渐隐就是一张平铺壁纸，渐隐才有球面纵深 */ .bh-bridge::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(56, 217, 255, 0.032) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 217, 255, 0.032) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask: radial-gradient(ellipse 78% 88% at 57% 48%, #000 0%, rgba(0, 0, 0, 0.5) 48%, transparent 88%); mask: radial-gradient(ellipse 78% 88% at 57% 48%, #000 0%, rgba(0, 0, 0, 0.5) 48%, transparent 88%); } .bh-bridge::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--bh-line), transparent); opacity: 0.6; } /* ---- 四角舷窗（页头品牌职能已并入左上） ---- */ .bh-porthole { position: absolute; z-index: 6; font-family: var(--bh-mono); font-size: 12.5px; } .bh-ph-tl { top: 24px; left: 24px; } /* 右上角是与 bridge-chrome.css 里那条状态条拼在一起的： 宽 202 固定、高 34、单行（读数在左、时钟在右），右边紧接「账户 / 搜索」两格。 以前它是个两行的独立小面板，和上面两个图标按钮各排各的，所以显得散。 */ .bh-ph-tr { top: 24px; right: 24px; width: 202px; box-sizing: border-box; text-align: right; } /* 左下角：系统读数（BUILD / POSTS / SIGNAL）。 1.7.7 从右下挪过来 —— 右下角那个位置留给「02 档案室」切屏入口， 两块一左一右夹住底部的坐标横尺，底边才成立。 行高压到 1.5、字号 10px：甲板底部只剩 90 来像素，三行读数按原来的 行高会顶到周报卡的下边框上（1440×900 实测只差 4px，矮视口直接压上去）。 */ .bh-ph-br { bottom: 12px; left: 24px; width: 168px; box-sizing: border-box; text-align: left; } .bh-ph-br .bh-ph-box { padding: 8px 12px; box-sizing: border-box; } .bh-ph-box { position: relative; background: rgba(14, 20, 32, 0.82); border: 1px solid var(--bh-line-dim); padding: 10px 14px; backdrop-filter: blur(6px); } .bh-ph-tl .bh-porthole-brand-anchor { display: block; } .bh-ph-tl .bh-brand { display: block; font-size: 15px; font-weight: 600; color: #EAF6FF; letter-spacing: 0.06em; } .bh-ph-tl .bh-brand b { color: var(--bh-line); font-weight: 600; } .bh-ph-tl .bh-brand:hover b { text-shadow: 0 0 10px rgba(56, 217, 255, 0.8); } .bh-ph-tl .bh-tagline { font-size: 11.5px; color: var(--bh-dim); margin-top: 3px; max-width: 260px; } .bh-ph-tr .bh-ph-box { display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 34px; padding: 0 12px; box-sizing: border-box; background: rgba(10, 15, 24, 0.86); } .bh-ph-tr .bh-row { display: inline-flex; align-items: center; gap: 7px; color: var(--bh-dim); font-size: 10.5px; letter-spacing: 0.16em; white-space: nowrap; } .bh-ph-tr .bh-clock { margin: 0; font-size: 13px; letter-spacing: 0.08em; /* 时间用琥珀：这一块是首屏唯一的"活"读数，冷底上有个暖点才不闷 */ color: var(--bh-gold); text-shadow: 0 0 14px rgba(240, 180, 41, 0.22); font-variant-numeric: tabular-nums; white-space: nowrap; } .bh-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bh-green); margin-right: 6px; animation: bh-pulse 2s infinite; } @keyframes bh-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } .bh-ph-br .bh-row { color: var(--bh-dim); font-size: 11px; line-height: 1.5; } .bh-ph-br .bh-row b { color: var(--bh-ink); font-weight: 400; } /* ---- 中央全息孔：网格中间那一格（第 4-6 行 × 第 6-8 列） ---- */ /* ============================================================ 全息层（bh-halo） 它不是"中间放一个雷达图标"，而是一整套同心环铺满整个甲板： 最外圈刻度齿、虚线中环、两条错角的轨道弧、扫描扇、准星、光点。 z-index 压在卡片之下，mix-blend-mode:screen 只做加法发光； 卡片本身是半透明的，环会从卡片底下穿过去 —— 这才是全息投影。 ============================================================ */ .bh-halo { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; pointer-events: none; overflow: hidden; } /* 放射层：从核心向外 24 条极细光线，铺满整个视口。 它压在卡片底下，被卡片挡住的部分自然断开 —— 于是画面读起来是「线从卡片下面穿过去」，这是全息投影的层次来源。 */ .bh-halo::before { content: ""; position: absolute; left: 57%; top: 50%; width: 170vmax; height: 170vmax; transform: translate(-50%, -50%); border-radius: 50%; background: repeating-conic-gradient( from 0deg, rgba(56, 217, 255, 0.1) 0deg 0.14deg, transparent 0.14deg 15deg ); -webkit-mask: radial-gradient(circle, transparent 0 6%, #000 11%, rgba(0, 0, 0, 0.55) 42%, transparent 70%); mask: radial-gradient(circle, transparent 0 6%, #000 11%, rgba(0, 0, 0, 0.55) 42%, transparent 70%); } /* 同心背景环：比锚体更大的几道圈，只在中心外圈露一点，给画面兜底 */ .bh-halo::after { content: ""; position: absolute; left: 57%; top: 50%; width: 118vmax; height: 118vmax; transform: translate(-50%, -50%); border-radius: 50%; background: repeating-radial-gradient( circle, transparent 0 96px, rgba(56, 217, 255, 0.055) 96px 97px, transparent 97px 192px ); -webkit-mask: radial-gradient(circle, transparent 0 16%, #000 34%, rgba(0, 0, 0, 0.4) 58%, transparent 82%); mask: radial-gradient(circle, transparent 0 16%, #000 34%, rgba(0, 0, 0, 0.4) 58%, transparent 82%); } .bh-anchor { position: relative; width: min(84vh, 90vmin); aspect-ratio: 1 / 1; flex: 0 0 auto; pointer-events: none; mix-blend-mode: screen; opacity: 0.52; /* 环心往左挪到「频道卡下方、两张下排卡之间」的空当上， 否则核心正好被卡片压住，整页就只剩几段莫名其妙的弧 */ left: -4%; top: 7%; } /* ---- 环系：由外到内 6 层，比例跟锚体走（百分比），换视口不会散架 ---- */ /* 方框锁定：把全息核心框成一个"读数窗"，中间那格空当才有落点。 用方框而不是圆框 —— 整页都是方的，这里也不破例。 */ .bh-anchor::after { content: ""; position: absolute; left: 50%; top: 50%; width: 148px; height: 148px; transform: translate(-50%, -50%); pointer-events: none; --c: rgba(56, 217, 255, 0.72); --l: 16px; background: linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--l) no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--l) no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--l) no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--l) no-repeat, /* 四条边只留中段一小截，形成"断续的锁定框" */ linear-gradient(90deg, transparent 40%, rgba(56, 217, 255, 0.46) 40%, rgba(56, 217, 255, 0.46) 60%, transparent 60%) 0 0 / 100% 1px no-repeat, linear-gradient(90deg, transparent 40%, rgba(56, 217, 255, 0.46) 40%, rgba(56, 217, 255, 0.46) 60%, transparent 60%) 0 100% / 100% 1px no-repeat, linear-gradient(180deg, transparent 40%, rgba(56, 217, 255, 0.46) 40%, rgba(56, 217, 255, 0.46) 60%, transparent 60%) 0 0 / 1px 100% no-repeat, linear-gradient(180deg, transparent 40%, rgba(56, 217, 255, 0.46) 40%, rgba(56, 217, 255, 0.46) 60%, transparent 60%) 100% 0 / 1px 100% no-repeat; } /* 八向辐射分割线：从核心射到外环，把圆切成扇区 —— 少了这个，它只是个圈 */ .bh-anchor::before { content: ""; position: absolute; inset: 5%; border-radius: 50%; background: repeating-conic-gradient( from 0deg, rgba(56, 217, 255, 0.15) 0deg 0.2deg, transparent 0.2deg 45deg ); -webkit-mask: radial-gradient(circle, transparent 0 14%, #000 14.4% 95.6%, transparent 96%); mask: radial-gradient(circle, transparent 0 14%, #000 14.4% 95.6%, transparent 96%); } .bh-ring-scale, .bh-ring-tier, .bh-ring, .bh-ring2, .bh-ring3, .bh-orbit { position: absolute; border-radius: 50%; } /* 最外圈：90 根刻度齿，用 conic 渐变画 + radial mask 只留最外一条 */ .bh-ring-scale { inset: -1.5%; background: repeating-conic-gradient( from 0deg, rgba(56, 217, 255, 0.8) 0deg 0.24deg, transparent 0.24deg 2.2deg ); -webkit-mask: radial-gradient(circle, transparent 0 96.2%, #000 96.6% 99.1%, transparent 99.5%); mask: radial-gradient(circle, transparent 0 96.2%, #000 96.6% 99.1%, transparent 99.5%); animation: bh-spin-slow 120s linear infinite; } .bh-ring-tier { inset: 5.5%; border: 1px solid rgba(56, 217, 255, 0.36); } .bh-ring { inset: 0; border: 1px solid rgba(56, 217, 255, 0.42); } .bh-ring2 { inset: 17%; border: 1px dashed rgba(56, 217, 255, 0.28); animation: bh-spin-slow 160s linear infinite reverse; } .bh-ring3 { inset: 32%; border: 1px solid rgba(56, 217, 255, 0.24); } /* 两条错角轨道弧：只亮一条边，转起来像在自转的环 */ .bh-orbit { border: 1px solid transparent; } .bh-orbit.o1 { inset: 9.5%; border-top-color: rgba(56, 217, 255, 0.9); border-right-color: rgba(56, 217, 255, 0.3); animation: bh-spin-slow 46s linear infinite; } .bh-orbit.o2 { inset: 23%; border-bottom-color: rgba(47, 191, 155, 0.8); border-left-color: rgba(47, 191, 155, 0.24); animation: bh-spin-slow 32s linear infinite reverse; } .bh-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(56, 217, 255, 0.22), transparent 68deg, transparent 360deg); animation: bh-spin 12s linear infinite; } @keyframes bh-spin { to { transform: rotate(360deg); } } @keyframes bh-spin-slow { to { transform: rotate(360deg); } } .bh-cross-h, .bh-cross-v { position: absolute; background: rgba(56, 217, 255, 0.16); } .bh-cross-h { left: 2%; right: 2%; top: 50%; height: 1px; } .bh-cross-v { top: 2%; bottom: 2%; left: 50%; width: 1px; } /* 核心：实心点 + 一圈呼吸光环 */ .bh-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 50%; background: var(--bh-line); box-shadow: 0 0 18px rgba(56, 217, 255, 0.95), 0 0 60px rgba(56, 217, 255, 0.45); } .bh-core::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(56, 217, 255, 0.5); animation: bh-breathe 3.4s ease-in-out infinite; } /* 核心外一对反向旋转的短弧 —— 贾维斯那圈永远在转的东西 */ .bh-core::before { content: ""; position: absolute; inset: -30px; border-radius: 50%; border: 1px solid transparent; border-top-color: rgba(56, 217, 255, 0.75); border-bottom-color: rgba(56, 217, 255, 0.45); animation: bh-spin 7s linear infinite; } @keyframes bh-breathe { 0%, 100% { transform: scale(0.72); opacity: 0.9; } 50% { transform: scale(1.35); opacity: 0.15; } } /* 读数标签贴在核心下方，不跟着环走 */ .bh-anchor-label { position: absolute; left: 50%; top: calc(50% + 30px); transform: translateX(-50%); font-family: var(--bh-mono); font-size: 11px; color: rgba(56, 217, 255, 0.72); white-space: nowrap; letter-spacing: 0.3em; padding: 3px 10px; background: rgba(8, 12, 19, 0.55); border-left: 1px solid rgba(56, 217, 255, 0.4); border-right: 1px solid rgba(56, 217, 255, 0.4); } .bh-blip { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--bh-green); box-shadow: 0 0 10px rgba(47, 191, 155, 0.9); } .bh-blip::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(47, 191, 155, 0.45); animation: bh-breathe 3s ease-in-out infinite; } .bh-blip.b1 { left: 38%; top: 22%; animation: bh-pulse 3s infinite 0.4s; } .bh-blip.b2 { left: 66%; top: 58%; animation: bh-pulse 3s infinite 1.2s; } .bh-blip.b3 { left: 30%; top: 66%; animation: bh-pulse 3s infinite 2s; } /* ---- 观察窗：4-6 行 × 6-8 列 ---- 这一格必须空着 —— 全息核心就在它中央，压一张卡片上去等于把核心埋了。 但"空"也要有边界：左右各一道中间亮两头散的竖边，加一个顶标， 读起来就是"这里是个窗口"，而不是"这块没填"。 */ .bh-void { grid-area: 4 / 6 / 6 / 9; position: relative; z-index: 2; pointer-events: none; } .bh-void__edge { position: absolute; top: 8%; bottom: 8%; width: 1px; background: linear-gradient(180deg, transparent, rgba(56, 217, 255, 0.26), transparent); } .bh-void__edge.l { left: 0; } .bh-void__edge.r { right: 0; } /* ---- 环绕卡片：非对称仪表盘网格 ---- 12 列 × 8 行，块的大小刻意拉开差距： ┌─────────────┬───────┬─────────┐ │ 主屏 5×5 │频道 3 │ 雷达 4 │ │ ├───┬───┤ │ │ │ 孔 3 │ │ ├──────┬──────┴───┴───┼─────────┤ │ 周报 5 │ 工具 4 │ └──────┴──────────────┴─────────┘ 中间那格是空的，专门留给全息雷达。 */ .bh-deck { position: relative; z-index: 3; box-sizing: border-box; height: 100%; max-width: 1240px; width: 100%; margin: 0 auto; /* 右边多留一条：右侧频道柱贴在视口右缘（right:26px 起）， 若不留这条，1280 这类视口下导航会压在雷达卡右边缘上。 */ padding: 128px 194px 92px 32px; display: grid; gap: 26px; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 1fr); } .bh-deck > * { transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.2), filter 0.3s; } /* 坐标标尺：左边一道竖尺、底下一道横尺。 两层齿（短齿 14px / 长齿 70px）+ 一条基线，画出来就是"仪表边框"， 比再加几张卡片更能把画面从"几个方块"变成"一个界面"。 */ .bh-deck::before, .bh-deck::after { content: ""; position: absolute; z-index: 2; pointer-events: none; } .bh-deck::before { left: 14px; top: 96px; bottom: 76px; width: 10px; background: repeating-linear-gradient(180deg, rgba(56, 217, 255, 0.42) 0 1px, transparent 1px 14px) left top / 5px 100% no-repeat, repeating-linear-gradient(180deg, rgba(56, 217, 255, 0.72) 0 1px, transparent 1px 70px) left top / 10px 100% no-repeat, linear-gradient(180deg, rgba(56, 217, 255, 0.18), rgba(56, 217, 255, 0.18)) left top / 1px 100% no-repeat; } .bh-deck::after { left: 200px; /* 让开左下角的读数舷窗（宽 168 + 外边距 24） */ right: 200px; /* 让开右下角的「02 档案室」面板 */ bottom: 22px; height: 10px; background: repeating-linear-gradient(90deg, rgba(56, 217, 255, 0.38) 0 1px, transparent 1px 14px) left bottom / 100% 5px no-repeat, repeating-linear-gradient(90deg, rgba(56, 217, 255, 0.66) 0 1px, transparent 1px 70px) left bottom / 100% 10px no-repeat, linear-gradient(90deg, rgba(56, 217, 255, 0.16), rgba(56, 217, 255, 0.16)) left bottom / 100% 1px no-repeat; } /* ---- 切屏入口：右下角，造型与左下角读数舷窗完全同款 ---- （同一套底色 / 边框 / 圆角 / backdrop blur / 内边距，只是内容换成了两个文本行） 它既是"下面还有一屏"的指示，也是滚轮被接管之后的兜底入口。 */ .bh-scroll-hint { position: absolute; right: 24px; bottom: 12px; z-index: 6; width: 168px; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px; min-height: 63px; /* = 左下读数舷窗的高度（3 行 ×15 + 上下 8 + 边框 2），两块顶边齐平 */ padding: 8px 12px; font-family: var(--bh-mono); text-align: right; color: var(--bh-dim); background: rgba(14, 20, 32, 0.82); border: 1px solid var(--bh-line-dim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; transition: border-color 0.18s, background 0.18s, color 0.18s, box-shadow 0.18s; } .bh-scroll-hint:hover, .bh-scroll-hint:focus-visible { color: var(--bh-ink); background: rgba(14, 20, 32, 0.96); border-color: var(--bh-line); box-shadow: 0 0 0 1px rgba(56, 217, 255, 0.14), 0 0 22px rgba(56, 217, 255, 0.16); outline: none; } .bh-scroll-hint__tag { font-size: 10.5px; letter-spacing: 0.16em; color: var(--bh-card-link); opacity: 0.85; } .bh-scroll-hint__tx { display: inline-flex; align-items: baseline; gap: 6px; font-size: 11.5px; letter-spacing: 0.06em; color: var(--bh-ink); } .bh-scroll-hint__tx b { font-weight: 400; color: var(--bh-line); animation: bh-hint-bob 1.9s ease-in-out infinite; } @keyframes bh-hint-bob { 0%, 100% { transform: translateY(-1px); opacity: 0.5; } 50% { transform: translateY(2px); opacity: 1; } } /* 通用卡身：**正正方方的矩形，没有闭合边框**。 位置严格对齐网格（不旋转、不位移）——歪斜错位那套试过，出来的效果是"没对齐" 而不是"刻意"，已经全部撤掉。 冲击力靠另外两件事：一是去掉四边那圈完整边框，只留四角 L 括号 + 两条断开的半边线； 二是卡片半透明，底下那层全息环从卡面里透出来。 */ .bh-card { position: relative; background: /* 顶部一层往下衰减的薄光，让区块有"被照亮的面"，而不是一块平玻璃 */ linear-gradient(180deg, rgba(56, 217, 255, 0.09), transparent 46%), linear-gradient(160deg, rgba(17, 25, 39, 0.93), rgba(9, 13, 21, 0.88)); color: var(--bh-card-ink); border: 0; overflow: hidden; backdrop-filter: blur(3px) saturate(1.1); -webkit-backdrop-filter: blur(3px) saturate(1.1); filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.55)); /* 1px 极淡的全边框（用 box-shadow 画，不占布局）： 没有它，方正的矩形在深底上根本"看不出是方的"，只剩一团浮着的字。 */ box-shadow: 0 0 0 1px rgba(56, 217, 255, 0.18), inset 0 1px 0 rgba(56, 217, 255, 0.3), inset 0 0 90px rgba(56, 217, 255, 0.045); } /* 角标画在 ::after 上：::before 被各卡自己的装饰（刻度条/准星/扫描光）占着， 放在 ::before 会被逐卡覆盖掉 —— 这就是"卡片边界感忽然没了"的原因。 */ .bh-card::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; --c: rgba(56, 217, 255, 0.85); --d: rgba(56, 217, 255, 0.3); --l: 26px; background: linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--l) no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--l) no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--l) no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--l) no-repeat, /* 上边左起 66% 渐隐、下边右起 42% 渐隐 —— 两条断开的半边线。 有它们，区块边界一眼能认出来；断开，就不会退回成"卡片框"。 */ linear-gradient(90deg, var(--d), transparent) 0 0 / 66% 1px no-repeat, linear-gradient(270deg, var(--d), transparent) 100% 100% / 42% 1px no-repeat, /* 左侧中段一道"脊" */ linear-gradient(var(--d), transparent) 0 50% / 1px 38% no-repeat; } .bh-card:hover { transform: translateY(-5px); filter: drop-shadow(0 18px 46px rgba(0, 0, 0, 0.66)); box-shadow: 0 0 0 1px rgba(56, 217, 255, 0.46), inset 0 1px 0 rgba(56, 217, 255, 0.46), inset 0 0 110px rgba(56, 217, 255, 0.09); z-index: 10; } .bh-card:hover::after { --c: #6FE6FF; --d: rgba(56, 217, 255, 0.55); } /* 各自的错位：不共享网格线，边缘刻意错开 —— 规整对齐本身就是"不科幻" */ .bh-card .bh-tag { display: block; font-family: var(--bh-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--bh-card-link); } /* 本期主打那一张的标签单独走琥珀：一眼能分出手里这张是"这一期"的， 而不是又一条频道名。 */ .bh-card-feat .bh-tag { /* 这行压在封面照片上，而这批照片偏亮（内存条是浅蓝）， 只给字加投影还是糊 —— 补一条「左实右虚」的暗衬，不破坏裸文字的轻盈感 */ display: inline-block; margin-left: -8px; padding: 3px 34px 3px 8px; color: var(--bh-gold); background: linear-gradient(90deg, rgba(6, 10, 16, 0.88), rgba(6, 10, 16, 0)); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } .bh-card h3 { font-size: 16px; font-weight: 600; line-height: 1.45; margin: 8px 0 6px; color: var(--bh-card-ink); } .bh-card p { font-size: 13px; color: var(--bh-card-dim); line-height: 1.6; } .bh-card .bh-meta { font-family: var(--bh-mono); font-size: 11px; color: var(--bh-arc-dim); margin-top: 10px; display: flex; justify-content: space-between; } /* —— 主屏：封面铺满整块，文字压在左下角，底部一条刻度条 —— */ .bh-card-feat { grid-area: 1 / 1 / 6 / 6; position: relative; display: block; background: #0E1420; } /* 底部刻度条挂在 .bh-txt 上（卡片的 ::after 留给角标） */ .bh-card-feat .bh-txt::after { content: ""; position: absolute; left: 0; bottom: -26px; width: 42%; height: 5px; background: repeating-linear-gradient(90deg, rgba(56, 217, 255, 0.65) 0 2px, transparent 2px 7px); opacity: 0.8; pointer-events: none; z-index: 3; } .bh-card-feat .bh-txt { position: relative; z-index: 2; box-sizing: border-box; height: 100%; padding: 24px 26px 26px; display: flex; flex-direction: column; justify-content: flex-end; } .bh-card-feat h3 { font-size: 25px; line-height: 1.34; margin: 9px 0 8px; } .bh-card-feat .bh-txt p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; line-height: 1.6; color: #A9BFCD; max-width: 34em; } .bh-card-feat .bh-cover { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0E1420; } /* 封面是 1200×630 的成图（左下角烤了标题），按右半幅取图： 避开烤进图里的标题被横向裁成碎字形，只留照片 */ .bh-card-feat .bh-cover img { width: 100%; height: 100%; object-fit: cover; object-position: right center; opacity: 0.95; /* 封面色调必须并进 HUD 的冷色里。 一张原色照片放在全息界面中央，整个幻觉就破了 —— 先去饱和、再 sepia + hue-rotate 拉成青蓝，明暗层次保留。 */ filter: grayscale(0.72) sepia(0.32) hue-rotate(158deg) saturate(2.1) brightness(0.82) contrast(1.12); } /* 再叠一层青色，把暖色彻底压住（之前封面偏黄褐，和整体青调打架） */ .bh-card-feat .bh-cover::after { content: ""; position: absolute; inset: 0; z-index: 0; /* 压在照片之上、暗角遮罩之下，否则会把遮罩的明度一起抬起来 */ pointer-events: none; background: linear-gradient(158deg, rgba(56, 217, 255, 0.22), rgba(8, 12, 19, 0.4)); mix-blend-mode: color; } /* 左下角压暗，保证压在照片上的标题可读，同时吃掉成图烤进去的字。 底下那条横向暗带是 1.7.8 补的：封面成图（1200×630）右下角本来烤了一行 「日期 · 域名」，卡片按右半幅取图之后那行字会留在卡底，跟卡脚这行读数叠在一起。 与其把读数挪开，不如让成图的烤字沉进暗带里 —— 日期卡上角本来就有个日期戳。 */ .bh-card-feat .bh-cover::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(8, 12, 19, 0.97) 0%, rgba(8, 12, 19, 0.9) 8%, rgba(8, 12, 19, 0.5) 19%, transparent 38%), radial-gradient(ellipse 132% 104% at 0% 116%, rgba(8, 12, 19, 0.98) 0%, rgba(8, 12, 19, 0.92) 42%, transparent 82%), linear-gradient(180deg, rgba(8, 12, 19, 0.5) 0%, transparent 22%); pointer-events: none; } .bh-card-feat .bh-cover .bh-stamp { position: absolute; right: 14px; top: 14px; z-index: 2; font-family: var(--bh-mono); font-size: 11px; color: var(--bh-gold); background: rgba(11, 15, 23, 0.78); border: 1px solid var(--bh-gold-line); padding: 4px 8px; letter-spacing: 0.16em; } /* 主屏卡脚：左边「阅读全文」，紧跟一行读数（正文字数 / 阅读时长）。 两个都压左边 —— 封面成图的右下角本来就烤了一行日期和域名， 卡脚铺到右端就会跟它叠字。 */ .bh-card-feat .bh-feat-foot { margin-top: 12px; display: flex; align-items: baseline; justify-content: flex-start; gap: 16px; } .bh-readout { font-family: var(--bh-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--bh-dim); font-variant-numeric: tabular-nums; white-space: nowrap; } .bh-card-feat .bh-cta { font-family: var(--bh-mono); font-size: 12.5px; color: var(--bh-card-link); display: inline-flex; align-items: center; gap: 6px; } .bh-card-feat .bh-cta::after { content: "→"; transition: transform 0.2s; } .bh-card-feat:hover .bh-cta::after { transform: translateX(4px); } /* —— 雷达：右侧一列读数，右上角准星 —— */ .bh-card-radar { grid-area: 1 / 9 / 6 / 13; padding: 22px; min-height: 0; display: flex; flex-direction: column; border-color: var(--bh-green-line); } .bh-card-radar .bh-radar-head { display: flex; flex: 1; flex-direction: column; justify-content: center; color: inherit; } .bh-card-radar .bh-radar-head p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* 读数区上面一条虚线，把「说明」和「数据」分开 */ .bh-card-radar .bh-rows { padding-top: 14px; border-top: 1px dashed var(--bh-green-line); } /* 右上准星（圆 + 竖线）—— 竖线并进 background，把 ::after 让给角标 */ .bh-card-radar::before { content: ""; position: absolute; right: 16px; top: 16px; width: 13px; height: 13px; border: 1px solid rgba(47, 191, 155, 0.55); border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(47, 191, 155, 0.12); background: linear-gradient(rgba(47, 191, 155, 0.45), rgba(47, 191, 155, 0.45)) 50% -12px / 1px 21px no-repeat; pointer-events: none; z-index: 6; } .bh-card-radar .bh-tag { color: var(--bh-green); } .bh-card-radar h3 { color: #DFF5EC; } .bh-card-radar .bh-rows { margin-top: auto; } .bh-card-radar .bh-rrow { display: flex; justify-content: space-between; font-family: var(--bh-mono); font-size: 11.5px; color: var(--bh-green-deep); padding: 5px 0; border-bottom: 1px dashed var(--bh-green-line); } .bh-card-radar .bh-rrow:hover { color: #DFF5EC; } /* —— 频道：带数据条的通道表 —— 原来就是"名字 …… 40 篇"两列右对齐，六行看下来像一张没写完的目录。 现在每行底下压一条按篇数归一化的淡光条，右端一道亮边收口， 左边加两位通道号 —— 同样的六行，读起来是仪表上的通道读数。 */ .bh-card-chan { grid-area: 1 / 6 / 4 / 9; padding: 18px 20px 16px; display: flex; flex-direction: column; } .bh-card-chan .bh-chan-list { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; } .bh-card-chan .bh-ch { position: relative; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; padding: 5px 8px 5px 10px; font-family: var(--bh-mono); font-size: 12px; color: var(--bh-card-dim); transition: color 0.18s; } /* 底衬数据条：宽度来自模板里的 --w（篇数 / 最多那个频道）。 用绝对定位铺在文字底下，不占栅格 —— 名字长到缩短号也不会被挤走。 */ .bh-card-chan .bh-ch__bar { position: absolute; left: 0; top: 1px; bottom: 1px; width: var(--w, 0%); background: linear-gradient(90deg, rgba(56, 217, 255, 0.22), rgba(56, 217, 255, 0.05)); border-right: 1px solid rgba(56, 217, 255, 0.45); transition: background 0.2s, border-color 0.2s; pointer-events: none; } .bh-card-chan .bh-ch__no { position: relative; font-size: 10.5px; letter-spacing: 0.06em; /* 0.4 在深底上只有 2.7:1，编号是导航不是装饰，得读得出来 */ color: rgba(56, 217, 255, 0.72); transition: color 0.18s; } .bh-card-chan .bh-ch__name { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bh-card-chan .bh-ch__n { position: relative; color: var(--bh-card-link); font-weight: 400; font-variant-numeric: tabular-nums; } .bh-card-chan .bh-ch:hover { color: var(--bh-card-ink); } .bh-card-chan .bh-ch:hover .bh-ch__no { color: var(--bh-card-link); } .bh-card-chan .bh-ch:hover .bh-ch__bar { background: linear-gradient(90deg, rgba(56, 217, 255, 0.34), rgba(56, 217, 255, 0.08)); border-color: rgba(56, 217, 255, 0.85); } /* —— 周报：顶部一条来回扫过的光 —— */ .bh-card-week { grid-area: 6 / 1 / 9 / 6; padding: 20px 22px; display: flex; flex-direction: column; } .bh-card-week::before { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 2px; background: linear-gradient(90deg, transparent, var(--bh-line), transparent); animation: bh-sweep-line 4.5s linear infinite; pointer-events: none; } @keyframes bh-sweep-line { 0% { left: -40%; } 100% { left: 100%; } } /* 右上角超大水印期号：跟雷达卡的 TARGET: W42 是同一个数字， 两处对上了，才知道"这一周"指的就是同一周。只做水印，不抢标题。 */ .bh-week-mark { position: absolute; right: 16px; top: 10px; font-family: var(--bh-mono); font-size: 56px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; color: rgba(56, 217, 255, 0.075); pointer-events: none; user-select: none; } /* —— 发射记录：底部中间那格的 12 周柱状图 —— 放这张表之前，这一格（6-8 行 × 6-8 列）是完全空的：左下有周报卡、 右下有工具卡、中间塌下去一个 234×215 的洞，整块甲板看着没排完。 现在用近 12 周的真实发文量补上 —— 洞补平了，还多了一处"时间轴"。 柱子由下往上长出来，并且错峰入场，这一屏就自带一口气。 */ .bh-card-log { grid-area: 6 / 6 / 9 / 9; padding: 16px 16px 13px; display: flex; flex-direction: column; min-height: 0; } .bh-card-log .bh-log { flex: 1; display: flex; align-items: flex-end; gap: 4px; min-height: 0; margin-top: 12px; padding-bottom: 1px; border-bottom: 1px solid rgba(56, 217, 255, 0.16); } .bh-card-log .bh-log__col { position: relative; flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; } .bh-card-log .bh-log__bar { display: block; width: 100%; height: var(--h, 4%); min-height: 2px; background: linear-gradient(180deg, rgba(56, 217, 255, 0.62), rgba(56, 217, 255, 0.1)); transform-origin: bottom center; animation: bh-bar-grow 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.25) both; animation-delay: calc(var(--i, 1) * 45ms); } .bh-card-log .bh-log__col.is-now .bh-log__bar { background: linear-gradient(180deg, #8BEFFF, rgba(56, 217, 255, 0.34)); box-shadow: 0 0 12px rgba(56, 217, 255, 0.45); } @keyframes bh-bar-grow { from { transform: scaleY(0); opacity: 0.2; } to { transform: scaleY(1); opacity: 1; } } /* 本周那根柱子头顶的读数 —— 只有它带标签，其余柱子只留高度 */ .bh-card-log .bh-log__now { position: absolute; left: 50%; bottom: calc(var(--h, 0%) + 4px); transform: translateX(-50%); font-family: var(--bh-mono); font-size: 10.5px; letter-spacing: 0.08em; /* 柱状图上只有"本周"这根带头标，它指时间，所以是金的 */ color: var(--bh-gold); white-space: nowrap; font-weight: 400; } .bh-card-log .bh-log-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; font-family: var(--bh-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--bh-dim); white-space: nowrap; } .bh-card-log .bh-log-foot b { color: var(--bh-card-ink); font-weight: 400; } /* —— 工具：右下角双向交叉线 —— */ .bh-card-tools { grid-area: 6 / 9 / 9 / 13; padding: 20px 22px; display: flex; flex-direction: column; } /* 两张文字卡：日期行压在卡片底部，别让下半截空着 */ .bh-card-week .bh-meta, .bh-card-tools .bh-meta { margin-top: auto; } .bh-card-tools::before { content: ""; position: absolute; right: 8px; bottom: 8px; width: 15px; height: 15px; opacity: 0.5; background: linear-gradient(45deg, transparent 46%, rgba(56, 217, 255, 0.75) 46%, rgba(56, 217, 255, 0.75) 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, rgba(56, 217, 255, 0.55) 46%, rgba(56, 217, 255, 0.55) 54%, transparent 54%); pointer-events: none; } /* ---- 档案室态（同套暗色 HUD） ---- */ .bh-archive { position: relative; isolation: isolate; /* 转盘让第二屏比一屏还矮时，整页最大滚动量不够、首屏会永远露出下面一截 （实测 1440×900：内容 852、视口 900，滚到底首屏还剩 48px） */ min-height: 100vh; background: var(--bh-arc-bg); color: var(--bh-arc-ink); border-top: 1px solid var(--bh-arc-line); padding: 0 0 80px; } /* 第二屏的背景也是仪表的一部分：顶部一层从中间散开的冷光，加一组 48px 的 细网格往下渐隐。原来这里是纯色 #0B0F17，从首屏翻下来等于从驾驶舱掉进一张 普通网页 —— 全靠这一层把两屏接成同一艘船。 */ .bh-archive::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(1000px 520px at 50% 0%, rgba(56, 217, 255, 0.12), transparent 72%), linear-gradient(rgba(56, 217, 255, 0.042) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 217, 255, 0.042) 1px, transparent 1px); background-size: auto, 48px 48px, 48px 48px; -webkit-mask: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.55) 52%, transparent 88%); mask: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.55) 52%, transparent 88%); } /* 第二屏自己的页头：常驻（sticky）。 首屏那套页头是散点式的、随首屏滚走了，到第二屏完全没有导航可点， 所以这条必须做成真正能用的顶栏：品牌 / 频道 / 检索 / 读数 / 返回。 */ .bh-arc-bar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 18px; box-sizing: border-box; height: 56px; padding: 0 24px; background: rgba(9, 13, 21, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--bh-arc-line); font-size: 13px; } /* 底边一道从中间亮起来的线，和首屏那条顶线同一套语言 */ .bh-arc-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(56, 217, 255, 0.5), transparent); pointer-events: none; } .bh-arc-logo { font-weight: 600; font-size: 14.5px; font-family: var(--bh-mono); letter-spacing: 0.06em; color: #EAF6FF; white-space: nowrap; } .bh-arc-logo b { color: var(--bh-card-link); font-weight: 600; } .bh-arc-mode { font-family: var(--bh-mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--bh-card-link); padding: 4px 8px; border: 1px solid rgba(56, 217, 255, 0.24); white-space: nowrap; /* 频道轴搬去右侧之后，顶栏的弹性由它承担：检索框 / 篇数 / 返回靠右 */ margin-right: auto; } /* ---- 第二屏的频道菜单：还是首屏那根竖轴，只是搬到了本屏右侧中部 ---- 菜单的 DOM 与 class 跟首屏一模一样（`.site-nav--inline > .nav-list`）， 所以主轴那一整套皮肤（竖轴 / 分支刻度 / `counter()` 两位编号 / 二级菜单） 一个字不用重写就自动生效，这里只改"它待在哪儿"： 一条铺满整屏高度的绝对定位轨道，菜单自己在轨道里 sticky 粘在视口中线。 ⚠ 覆盖必须带 `:is(body.bridge-home, .bridge-home)` 前缀 —— 同特异性下 bridge-chrome.css 比本文件后加载，光写 `.bh-arc-rail .site-nav--inline` 抢不过 它那条 `position:absolute`，菜单会掉到轨道顶部、随内容滚走。 */ .bh-arc-shell { position: relative; /* 右侧 200 是给频道竖轴让的位；让位放在这一层，内层用 margin:auto 才能居中 */ padding-right: 200px; } .bh-arc-rail { position: absolute; top: 0; right: 0; bottom: 0; width: 200px; z-index: 2; /* 轨道本身不吃鼠标事件：它铺满整屏高，否则会挡住列表右侧那一条的点击 */ pointer-events: none; } :is(body.bridge-home, .bridge-home) .bh-arc-rail .site-nav--inline { position: sticky; right: auto; /* 落点跟首屏同一个变量（bridge-chrome.css 里的 --hud-nav-top = 27vh）： 两屏菜单必须停在视口里同一个高度，否则翻过屏就往下跳 164px。 以前这里按"56~100vh 这一带居中"算成 50vh-44px，位置本身就比首屏低， 欢哥 10-19 直接点出来了 —— 以首屏为准，不再自己算一套。 */ top: var(--hud-nav-top, 27vh); width: 152px; /* 到达第二屏时菜单就落在这个点上，之后一直不动（margin 比 top 少一个 顶栏高度 57px —— 顶栏 sticky 在 0、含 1px 下边框，shell 从 57 起算）。 两个值不这么配的话，进屏那一刻它会比落点低 50 多像素，一滚动再"跳"上去。 */ margin: calc(var(--hud-nav-top, 27vh) - 57px) 26px 0 auto; } /* 901~1180 这一档顶栏下面还压着一条 34px 的横带切换器（.bh-lay--strip）， shell 从 91 起算而不是 57 —— margin 要多退这 34，否则菜单落点比首屏低 35px （1024×768 实测 265 vs 230，sticky 还没到落点，一屏就这么高，永远补不上）。 */ @media (min-width: 901px) and (max-width: 1180px) { :is(body.bridge-home, .bridge-home) .bh-arc-rail .site-nav--inline { margin-top: calc(var(--hud-nav-top, 27vh) - 91px); } } .bh-arc-search { display: flex; align-items: center; gap: 8px; width: 176px; height: 30px; padding: 0 10px; box-sizing: border-box; background: rgba(14, 20, 32, 0.9); border: 1px solid var(--bh-arc-line); transition: border-color 0.15s; } .bh-arc-search:focus-within { border-color: var(--bh-line); } .bh-arc-search__pre { font-family: var(--bh-mono); font-size: 11px; color: var(--bh-line); opacity: 0.8; } .bh-arc-search__input { flex: 1; min-width: 0; height: 100%; padding: 0; font-family: var(--bh-mono); font-size: 12px; color: var(--bh-arc-ink); background: none; border: 0; outline: none; } .bh-arc-search__input::placeholder { color: var(--bh-arc-dim); } /* 这一格现在是按钮（2026-10-19）：点它开首屏那个搜索弹窗，不再自带输入框。 外形必须与原来的输入框一模一样 —— 两屏看到的是同一个检索口， 只是点下去的反应从"就地打字"变成"弹出搜索层"。 */ .bh-arc-search--btn { cursor: pointer; text-align: left; font-family: var(--bh-mono); color: var(--bh-arc-dim); transition: border-color 0.15s, background-color 0.15s; } .bh-arc-search--btn:hover { border-color: var(--bh-line); background: rgba(18, 27, 42, 0.95); } .bh-arc-search--btn:focus-visible { outline: 2px solid rgba(56, 217, 255, 0.55); outline-offset: 2px; } .bh-arc-search__ph { font-size: 12px; letter-spacing: 0.04em; color: var(--bh-arc-dim); } .bh-arc-search--btn:hover .bh-arc-search__ph { color: var(--bh-arc-ink); } .bh-arc-count { font-family: var(--bh-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--bh-arc-dim); white-space: nowrap; } .bh-arc-count b { color: var(--bh-arc-ink); font-weight: 400; } .bh-arc-back { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; font-family: var(--bh-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--bh-card-link); background: rgba(56, 217, 255, 0.06); border: 1px solid rgba(56, 217, 255, 0.32); cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s; } .bh-arc-back:hover { background: rgba(56, 217, 255, 0.14); border-color: var(--bh-card-link); } .bh-arc-inner { position: relative; z-index: 1; max-width: 980px; /* 让位交给 .bh-arc-shell 的 padding-right，这里才能整体居中。 早先写的是 margin-left:auto —— 那只会把整块内容顶到最右边， 看着就是"第二屏的内容跑到右边去了"。 */ margin: 0 auto; padding: 36px 32px 0; } /* 桌面端：顶栏 / 内容 / 底部读数条三段式，整屏正好一份 100vh。 标题 + 转盘 + 分页作为一组在中间那段里垂直居中。 */ /* 136 = 顶栏 56 + .bh-archive 的 padding-bottom 80。 */ @media (min-width: 901px) { /* 底部那 80px 本来是为长列表留的呼吸位，转盘只占一屏之后就成了"内容整体偏上"： 实测顶部空 26、底部空 100。底部读数条接手这个位置，所以 padding 归零， 由 .bh-foot 自己占 46px。 */ .bh-archive { display: flex; flex-direction: column; padding-bottom: 0; } .bh-arc-bar { flex: 0 0 auto; } .bh-arc-shell { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .bh-foot { flex: 0 0 auto; } /* 居中交给 inner 自己的 `margin: auto`，不用 justify-content 也不用 min-height:100%： ① `min-height:100%` 是百分比，父级高度又由 flex 协商得出 —— 首屏那次布局 会算出 1827（多 28px 空白，滚到底能看到页尾下面一条空带），要等任意一次 样式失效才纠正回 1800，等于每个访客首访都吃这个 bug； ② `justify-content:center` 在内容超高时会把顶部顶出容器外且滚不回来， 而 flex 子项的 `margin:auto` 溢出时会自动退化成 0，是"安全的居中"。 */ .bh-arc-inner { display: flex; flex-direction: column; margin: auto; /* ⚠ width:100% 是必需的，不是可有可无的兜底。 横向的 `margin:auto` 会顶掉 flex 的 `align-self:stretch`（跨轴自动外边距 优先于拉伸），内层于是变成"收缩到内容宽"：转盘那套因为盘面有固定宽度 还能到 756，换成书架/星图这类没有固有宽度的布局就只剩标题那 192px —— 表现是「最新文章」被挤成竖排、右上角读数折成三行。 显式给满宽 + border-box（本文件没有全局 border-box，忘了会多出 64px 内边距）。 */ width: 100%; box-sizing: border-box; } } /* 标题 + 读数原来各占一行，把转盘挤小了 60 多像素。改成绝对定位浮在 转盘外接矩形的上方两角（圆形盘面的角本来就是空的），高度全让给转盘。 */ .bh-arc-hd { position: absolute; top: 0; left: 32px; right: 32px; z-index: 3; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; pointer-events: none; } .bh-arc-hd > * { pointer-events: auto; } .bh-arc-hd h2 { font-size: 20px; font-weight: 600; color: var(--bh-arc-ink); } .bh-arc-hd__rd { font-family: var(--bh-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--bh-arc-dim); font-variant-numeric: tabular-nums; } .bh-arc-empty { color: var(--bh-arc-dim); padding: 40px 0; } .bh-pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 36px; font-family: var(--bh-mono); font-size: 12.5px; } .bh-pager__btn { color: var(--bh-card-link); padding: 8px 14px; border: 1px solid var(--bh-arc-line); } .bh-pager__btn:hover { border-color: var(--bh-card-link); } .bh-pager__num { color: var(--bh-arc-dim); } /* 转盘居中，分页再左右甩开就对不上了：整条收成居中的一组 */ .bh-flow + .bh-pager { justify-content: center; gap: 26px; margin-top: 22px; } /* 换页是 fetch 就地替换，不整页刷新 —— 等的这一小段里不能毫无反馈， 又不能让盘面塌掉，只压一点透明度并锁住点击。 */ .bh-arc-body.is-loading { opacity: 0.42; pointer-events: none; transition: opacity 0.18s linear; } /* ============================================================ 底部读数条（1.8.0） 原来第二屏下面还接着父主题那条波浪页脚，整页 2.2 屏，滚到底多出一截。 现在首页只有两屏：页脚里真正有用的三行（站点名 / 描述 / 版权）压缩成 这一条，跟顶栏 .bh-arc-bar 一上一下对称。样式沿用第二屏那套等宽小字。 ============================================================ */ .bh-foot { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 32px; border-top: 1px solid var(--bh-arc-line); background: rgba(8, 12, 19, 0.55); font-family: var(--bh-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--bh-arc-dim); font-variant-numeric: tabular-nums; } .bh-foot__brand { color: var(--bh-arc-ink); letter-spacing: 0.04em; white-space: nowrap; } .bh-foot__brand b { color: var(--bh-card-link); font-weight: 600; } /* 描述可能很长，宁可省略也不换行 —— 一换行这条就变高，整屏比例跟着乱 */ .bh-foot__desc { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .bh-foot__fill { flex: 1 1 auto; } .bh-foot__meta { white-space: nowrap; } .bh-foot__sep { color: rgba(56, 217, 255, 0.22); } /* 首页只要两屏：父主题那条波浪页脚不在首页出现（内容已并进 .bh-foot）。 ⚠