/* ========================================================== life-travel.css — 旅行 (Travel) 模块 + Life-Collage 残余兜底 ------------------------------------------------------------ 从原 lifeCollage.css 物理拆出 (Backlog #25), 不使用 CSS @import, 在 file:// 协议下零跨域错误。在 index.html 中按顺序引入, 加载顺序 (Backlog #25, #27): 9. life-layout.css (兴趣骨架 + 4 张核心卡 + 散落扑克牌) 10. life-modal.css (通用模态 + 4 主题色 + 流体特效 + 模态响应式) 11. life-marathon.css (Marathon 列表 + 总结 + 占位 + 响应式) 12. life-travel.css ← 本文件 (Travel 地图 + 时间轴 + 全局兜底 + 残余响应式) 13. life-photography.css (Photography 骨架位, Backlog #27 待实现) 14. life-finance.css (Finance 骨架位, Backlog #27 待实现) 15. responsive.css (全局响应兜底) 包含: 1. Travel 模态 Body — 默认左右两栏 + ≤900px 切上下两栏 2. Travel 顶部 3D 地球舞台 (.travel-globe-stage + canvas + tooltip + legend) 3. Travel 底部时间轴外框 (.travel-bottom + .travel-timeline) 4. Travel 时间轴 — 静态 (.timeline-*) + 动态 DOM (.travel-*) 5. 历史占位选择器 (非马拉松) — .life-collage-outer-wrapper / -dom-layer / .collage-tag-btn / .tag-hash / #life-collage-tip / .tip-title / .tip-desc 6. 模态框 Pointer-events 终极兜底 7. 响应式 (Life-Collage 通用兜底 + Travel 兜底) · 1600+ 大屏 → 主标题 3.2rem / 容器 max-width 1320px · 1200-1599 标准桌面 → 主标题 2.8rem / gap 18px · 1025-1199 大平板 → 卡片 240×340 / gap 14px · 1024 平板横屏 → 主标题 2.2rem / 模态 92vw · 900 ⭐ Travel 模态 T-B ↔ L-R 切换 (本会话锁定) + Marathon card.result 落到第二行 · 768 手机横屏 → 模态全屏 / 卡片压缩 / Travel 时间轴高度降到 180px · 480 手机竖屏 → 主标题 1.8rem / 卡片 200×300 · 360 小屏兜底 → 主标题 1.4rem / 卡片 180×280 · 横屏 h≤500 强制 L-R (覆盖 900 以下) + 卡片更扁 220×260 【深海纸雕铁律】 - 不透明: Travel 模态 + 时间轴 100% 不透明卡纸底色杜绝 backdrop-filter, 仅用纯色 + 物理投影呈现层叠 - 硬边: 时间轴 + 城市标签切角 (clip-path polygon 12px), 默认无 border-radius 城市图例 swatch 改用 rotate(45deg) 菱形硬边 - 物理投影: 模态 3px 4px 0 + 0 6px 14px + inset 0 1px 0 Hover 抬升 4px + 4px 6px 0 + 0 10px 20px - 纸带厚度: Travel 副带 3px, 城市色块 6px ========================================================== */ /* ========================================================== 1. Travel 模态 Body — 左右两栏布局 (地球 + 时间轴) ------------------------------------------------------------ grid-template-columns: 1fr 240px, grid-template-rows: 1fr 左栏 = .travel-globe-stage (3D 地球, 占满) 右栏 = .travel-bottom (时间轴容器) 取消通用 body 的 padding, 让地球占满整个左栏横屏时改 220px, 留更多空间给地球 ========================================================== */ .travel-modal-body { /* 默认 (宽屏 / 桌面): 左右两栏 — 地图 | 时间轴窄屏 (<=900px) 时切回上下两栏 (见下) */ display: grid; grid-template-columns: 1fr 240px; grid-template-rows: 1fr; overflow: hidden !important; padding: 0 !important; } /* 窄屏 (<=900px): 上下两栏 — 地图 / 时间轴 */ @media (max-width: 900px) { .travel-modal-body { grid-template-columns: 1fr; grid-template-rows: 1fr 240px; } } /* ========================================================== 2. Travel 顶部 3D 地球舞台 ------------------------------------------------------------ 径向暗蓝渐变背景 (海洋感), canvas 接收拖拽事件 is-dragging / is-zooming 状态改变 cursor 提示交互 ========================================================== */ .travel-globe-stage { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse at center, rgba(0, 50, 80, 0.3) 0%, rgba(0, 3, 5, 0.6) 70%, rgba(0, 0, 0, 0.9) 100%); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; } .travel-globe-stage.is-dragging { cursor: grabbing !important; } .travel-globe-stage.is-zooming { cursor: ns-resize !important; } .travel-globe-canvas { display: block; width: 100%; height: 100%; touch-action: none; -webkit-user-select: none; user-select: none; pointer-events: auto !important; cursor: grab; } /* 拖拽/缩放提示文字 */ .travel-globe-hint { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(0, 242, 254, 0.55); background: rgba(0, 3, 5, 0.4); border: 1px solid rgba(0, 242, 254, 0.18); padding: 4px 14px; border-radius: 2px; pointer-events: none; z-index: 4; white-space: nowrap; transition: opacity 0.3s; } .travel-globe-stage.is-dragging .travel-globe-hint, .travel-globe-stage.is-zooming .travel-globe-hint { opacity: 0; } /* 鼠标悬停城市时的气泡 */ .travel-tooltip { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -8px); background: rgba(0, 3, 5, 0.92); border: 1px solid rgba(0, 242, 254, 0.4); color: rgba(245, 247, 250, 0.95); padding: 6px 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 12px; letter-spacing: 0.05em; border-radius: 3px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 10; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); } .travel-tooltip[aria-hidden="false"] { opacity: 1; } .travel-tooltip .tooltip-city { color: #00f2fe; font-weight: 600; margin-right: 8px; } .travel-tooltip .tooltip-cn { color: rgba(245, 247, 250, 0.6); font-size: 11px; } /* 日期 / 大本营标签行 (TD-1 修复: JS 现在生成 .tooltip-date) */ .travel-tooltip .tooltip-date { color: rgba(0, 242, 254, 0.55); font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; font-size: 9px; letter-spacing: 0.1em; margin-top: 2px; text-transform: uppercase; } /* 图例: 浮在地图右上角, 拖拽时消隐 */ .travel-legend-overlay { position: absolute; top: 12px; right: 12px; background: rgba(0, 3, 5, 0.6); border: 1px solid rgba(0, 242, 254, 0.2); border-radius: 4px; padding: 10px 14px; z-index: 5; transition: opacity 0.3s; } .travel-globe-stage.is-dragging .travel-legend-overlay { opacity: 0.3; } .travel-legend-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; } .travel-legend-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .travel-legend-swatch--home { background: #ff5e5e; box-shadow: 0 0 6px rgba(255, 94, 94, 0.7); } .travel-legend-swatch--city { background: #e0f7fa; transform: rotate(45deg); } .travel-legend-swatch--land { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); } .travel-legend-label { font-size: 10px; letter-spacing: 0.1em; line-height: 1.2; color: rgba(245, 247, 250, 0.85); } .travel-legend-label .legend-en { display: inline; } .travel-legend-label .legend-cn { margin-left: 6px; color: rgba(245, 247, 250, 0.45); font-size: 9px; font-style: italic; } .travel-legend-stats-overlay { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(0, 242, 254, 0.2); display: flex; flex-direction: column; gap: 3px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; } .stat-item { display: flex; align-items: baseline; gap: 6px; font-size: 10px; color: rgba(245, 247, 250, 0.55); letter-spacing: 0.05em; } .stat-num { color: #00f2fe; font-weight: 600; font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; font-size: 12px; min-width: 24px; text-align: right; } .stat-en { color: rgba(245, 247, 250, 0.55); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; } /* ========================================================== 3. Travel 底部时间轴 — 外框 + 滚动 ------------------------------------------------------------ .travel-bottom: 上边框 + 暗色背景, 装下 timeline .travel-timeline: 内部滚动容器, 自带 overflow-y: auto ========================================================== */ .travel-bottom { display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; /* 不让 body 自己滚动, 把滚动权交给 timeline */ border-top: 1px solid rgba(0, 242, 254, 0.15); background: rgba(0, 3, 5, 0.4); } .travel-timeline { flex: 1 1 0; min-height: 0; overflow-y: auto !important; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 8px 14px 12px; user-select: text; -webkit-user-select: text; /* 原生 wheel 滚动, 不拦截默认行为 */ touch-action: pan-y; overscroll-behavior: contain; } /* ========================================================== 4. Travel 时间轴 — 静态 / 动态两种 DOM 样式 ------------------------------------------------------------ (A) 静态样式 (.timeline-year / .timeline-city-row): 用于静态初始结构, 也被 .timeline-city-row.is-focused 高亮 (B) 动态样式 (.travel-year-block / .travel-year-header / .travel-date-row .travel-base-row / .travel-city-tag): 由 JS 动态注入, 必须定义否则默认黑色文字看不清 ========================================================== */ /* ---- (A) 静态样式 ---- */ .timeline-year-group { margin-bottom: 8px; } .timeline-year { font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 11px; color: #00f2fe; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 4px; padding-bottom: 3px; border-bottom: 1px solid rgba(0, 242, 254, 0.12); cursor: pointer; transition: color 0.2s; } .timeline-year:hover { color: #00d4e0; } .timeline-city-row { display: flex; align-items: center; gap: 8px; padding: 3px 4px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 11px; color: rgba(245, 247, 250, 0.7); cursor: pointer; border-radius: 2px; transition: all 0.2s; } .timeline-city-row:hover { background: rgba(0, 242, 254, 0.08); color: rgba(245, 247, 250, 0.95); transform: translateX(2px); } .timeline-city-row.is-focused { background: rgba(0, 242, 254, 0.15); color: #ffffff; } .timeline-city-row .timeline-city-date { color: rgba(0, 242, 254, 0.55); font-size: 10px; min-width: 56px; font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; } .timeline-city-row .timeline-city-name-en { color: inherit; font-weight: 500; } .timeline-city-row .timeline-city-name-cn { color: rgba(245, 247, 250, 0.4); font-size: 10px; font-style: italic; margin-left: 4px; } .timeline-city-row .timeline-city-tag { margin-left: auto; font-size: 9px; color: rgba(245, 247, 250, 0.35); text-transform: uppercase; letter-spacing: 0.1em; } .timeline-city-row .timeline-city-tag.tag-home { color: #ff5e5e; font-weight: 600; } /* ---- (B) 动态样式 (JS 注入的 DOM) ---- */ .travel-year-block { margin-bottom: 10px; } .travel-year-header { display: flex; align-items: center; justify-content: space-between; font-family: 'Cinzel', 'Playfair Display', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 11px; color: #00f2fe !important; letter-spacing: 0.18em; text-transform: uppercase; padding: 4px 2px; margin-bottom: 4px; border-bottom: 1px solid rgba(0, 242, 254, 0.18); cursor: default; } .travel-header-cn { color: rgba(0, 242, 254, 0.55); font-size: 10px; margin-left: 6px; font-style: italic; text-transform: none; letter-spacing: 0.05em; } .travel-year-tag { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 9.5px !important; color: rgba(245, 247, 250, 0.45) !important; font-weight: 400 !important; text-transform: none; letter-spacing: 0.06em; font-style: italic; } /* 大本营行 */ .travel-base-row { display: flex; align-items: center; padding: 4px 4px; border-radius: 2px; transition: background 0.2s; } .travel-base-row:hover { background: rgba(0, 242, 254, 0.06); } .travel-base-tag-wrap { display: flex; align-items: center; gap: 8px; } .travel-base-period { font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; font-size: 10px; color: rgba(0, 242, 254, 0.6); letter-spacing: 0.04em; } /* 日期行: "Aug 2024 [city-tag] [city-tag]" */ .travel-date-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; padding: 4px 4px; border-bottom: 1px dashed rgba(255, 255, 255, 0.04); } .travel-date-label { font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace; font-size: 10px; color: rgba(0, 242, 254, 0.55); letter-spacing: 0.06em; min-width: 56px; } /* 城市标签 chip: emoji + EN + CN */ .travel-city-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 2px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, 'PingFang SC', sans-serif; font-size: 11px; color: rgba(245, 247, 250, 0.85) !important; cursor: pointer; transition: all 0.2s; user-select: none; -webkit-user-select: none; } .travel-city-tag:hover { background: rgba(0, 242, 254, 0.12); border-color: rgba(0, 242, 254, 0.4); color: #ffffff !important; transform: translateY(-1px); } .travel-city-tag--home { background: rgba(255, 94, 94, 0.1); border-color: rgba(255, 94, 94, 0.35); color: #ff8a8a !important; } .travel-city-tag--home:hover { background: rgba(255, 94, 94, 0.18); border-color: rgba(255, 94, 94, 0.55); color: #ffffff !important; } .travel-city-emoji { font-size: 11px; line-height: 1; } .travel-city-text--en { font-weight: 500; color: inherit; letter-spacing: 0.02em; } .travel-city-text--cn { font-size: 10px; color: rgba(245, 247, 250, 0.45) !important; font-style: italic; letter-spacing: 0.03em; } .travel-city-tag--home .travel-city-text--cn { color: rgba(255, 138, 138, 0.55) !important; } /* ========================================================== 5. 历史占位选择器 (旧 style.css 已删除) — 非 Marathon ------------------------------------------------------------ 当前 index.html 中尚未使用以下选择器, 但 JS 可能动态注入或后续补全: - .life-collage-outer-wrapper / #life-collage-dom-layer - .collage-tag-btn / .tag-hash - #life-collage-tip / .tip-title / .tip-desc (Marathon 相关占位选择器已迁入 life-marathon.css §3) ========================================================== */ .life-collage-outer-wrapper { /* 占位段, 历史 style.css 已删除, 此处保留 selector 防止后续误删 */ } #life-collage-dom-layer { /* 占位段, 历史 style.css 已删除 */ } .collage-tag-btn { /* 占位段, 历史 style.css 已删除 */ } .tag-hash { /* 占位段, 历史 style.css 已删除 */ } #life-collage-tip { /* 占位段, 历史 style.css 已删除 */ } .tip-title { /* 占位段, 历史 style.css 已删除 */ } .tip-desc { /* 占位段, 历史 style.css 已删除 */ } /* ========================================================== 6. 模态框 Pointer-events 终极兜底 — 修复鼠标事件被卡牌拦截 ------------------------------------------------------------ 现象: 模态打开后, 旋转的兴趣卡 (.collage-card--interactive 散落扑克牌) transform: rotate 创造额外 hit-area, 即使 z-index 低于模态仍可能拦截鼠标事件. 兜底: 模态激活时, 强制提升 overlay z-index + 关闭所有背景卡的事件. ========================================================== */ /* 模态激活时: 确保 modal 在最顶层, 强制接收所有鼠标事件 */ .collage-modal-overlay.is-active { z-index: 999999 !important; pointer-events: auto !important; } /* 模态激活时: 关闭底部卡片的鼠标事件, 防止 transform 后的 hit-area 干扰 */ body.modal-open .life-collage-card-grid, .collage-modal-overlay.is-active ~ * .life-collage-card-grid { pointer-events: none !important; } body.modal-open .collage-card, .collage-modal-overlay.is-active ~ * .collage-card { pointer-events: none !important; /* 不再让 transform 创造新的 hit-area; 视觉上保留但物理上让位 */ user-select: none !important; } /* ========================================================== 7. 响应式 (Life-Collage 通用兜底 + Travel 兜底) ------------------------------------------------------------ 拆分说明 (Backlog #25): - Marathon 相关断点 (.marathon-race-card / .race-card-* / .marathon-list-axis / .marathon-races-summary) 已迁入 life-marathon.css §4 - 本节只保留: Life-Collage 通用断点 (.life-collage-main-title / .collage-card / .collage-modal-*) + Travel 兜底断点 (.travel-modal-body / .travel-tooltip / .travel-legend-overlay) - 加载顺序保证: life-marathon.css (11) 先于 life-travel.css (12), 同断点 media query 不冲突, 各自生效 ========================================================== */ /* 7.1 大屏幕及以上 (>= 1600px) — 标题更大, 容器更宽 */ @media (min-width: 1600px) { .life-collage-card-grid { max-width: 1320px; gap: 20px; } .life-collage-main-title { font-size: 3.2rem; letter-spacing: 0.3em; } .collage-modal-container { max-width: 1280px; } } /* 7.2 中等桌面 (1200–1599px) — 标题居中 */ @media (min-width: 1200px) and (max-width: 1599px) { .life-collage-card-grid { gap: 18px; } .life-collage-main-title { font-size: 2.8rem; } } /* 7.3 小行宽 / 大平板 (1025–1199px) — 卡片缩小 */ @media (min-width: 1025px) and (max-width: 1199px) { .collage-card { width: 240px; height: 340px; } .life-collage-card-grid { gap: 14px; max-width: 1100px; } } /* 7.4 ≤1024px — 标题缩小 + 模态宽度调整 (Polaroid 已由基础样式全局应用) (Marathon 相关规则已迁入 life-marathon.css §4.1) */ @media (max-width: 1024px) { .life-collage-main-title { font-size: 2.2rem; } .collage-modal-container { width: 92vw; } } /* 7.5 ≤768px — 卡片缩小, 模态全屏 + Travel 模态上下两栏 (合并原 §8.2 + §8.6) (Marathon 相关规则已迁入 life-marathon.css §4.3) */ @media (max-width: 768px) { .collage-card { width: 240px; height: 340px; } .life-collage-card-grid { gap: 16px 8px; padding: 20px 10px 32px; } .collage-modal-container { width: 100vw; height: 100vh; max-height: 100vh; } .collage-modal-container::after { display: none; } .collage-modal-header { padding: 14px 20px 10px; } .collage-modal-body { padding: 14px 20px 20px; } /* Travel 模态: 上下两栏, 地图在上, 时间轴在下 (180px 而非 240px, 留更多空间给地图) */ .travel-modal-body { grid-template-rows: 1fr 180px !important; } .travel-legend-overlay { top: 8px; right: 8px; padding: 6px 10px; } } /* 7.6 ≤480px — 主标题缩小 + 卡片缩小 + Travel tooltip 紧凑化 (Marathon 相关规则已迁入 life-marathon.css §4.4) */ @media (max-width: 480px) { .life-collage-main-title { font-size: 1.8rem; letter-spacing: 0.2em; } .collage-card { width: 200px; height: 300px; } .collage-card-title { font-size: 1.1rem; } .collage-card-philosophy { font-size: 0.78rem; } /* TD-1: Travel tooltip ≤480px 强制 EN/CN 分行 + 紧凑化 (避免超窄屏下城市名 + CN 同行溢出) */ .travel-tooltip { white-space: normal; max-width: 130px; font-size: 11px; padding: 5px 8px; text-align: center; } .travel-tooltip .tooltip-city { display: block; } .travel-tooltip .tooltip-cn { display: block; margin-left: 0; margin-top: 1px; font-size: 10px; } .travel-tooltip .tooltip-date { font-size: 8px; margin-top: 1px; } } /* 7.7 ≤360px — 小屏兜底 (Marathon 相关规则已迁入 life-marathon.css §4.5) */ @media (max-width: 360px) { .life-collage-main-title { font-size: 1.4rem !important; letter-spacing: 0.15em; } .collage-card { width: 180px; height: 280px; } } /* 7.8 横屏模式 (不论宽度, 只要高度 ≤500px) — 卡片更扁 + Travel 强制 L-R 兜底 */ @media (orientation: landscape) and (max-height: 500px) { .collage-card { width: 220px; height: 260px; } .life-collage-card-grid { gap: 10px; } /* Travel 模态: 横屏时改为左右两栏 (地图 + 时间轴) */ .travel-modal-body { grid-template-rows: 1fr !important; grid-template-columns: 1fr 240px !important; } .travel-globe-stage { height: 100% !important; } }