/* ------------------------------------------------------------------ Travel — Svalbard skeleton Layout: full-bleed map + scrolling sections layered on top ------------------------------------------------------------------ */ :root { --ink: #f8fafc; --ink-dim: #cbd5e1; --paper: #0b1220; --paper-card: rgba(11, 18, 32, 0.78); --accent: #5eead4; --accent-warm: #fcd34d; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Noto Sans TC", "PingFang TC", sans-serif; font-size: 17px; line-height: 1.6; } /* 滾動明確停在每個停點 (mandatory = 一定吸附到斷點, 像按鈕一樣有清楚的停)。 */ html { scroll-snap-type: y mandatory; scroll-behavior: smooth; } .step { scroll-snap-align: center; scroll-snap-stop: always; } #map { /* !important to defeat Google Maps' habit of injecting inline `position:relative` on its container — without this the map gets sucked into normal flow and scrolls away with the page (breaks scrollytelling). */ position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 1; background: #0a0f1a; } #story { position: relative; z-index: 2; width: min(440px, 92vw); margin: 0; /* 靠左, 由 .step padding-left 提供 12px 邊距 (與右側 right:12px 對稱) */ padding: 0; } /* 敘事層只在「實際文字/卡片」上吃點擊; 透空處放行 → 地圖標記 (照片 📷 / 地標) 即使落在文字欄的範圍底下也點得到。修正折疊機/桌機「標記在左側文字欄一帶就點不到」(被整欄覆蓋層吃掉)。 */ #story, .step { pointer-events: none; } .step > * { pointer-events: auto; } /* 調校模式 (?tune): 連卡片也放行 → 整面都能拖地圖/捏合; 各站改用右下 ↑↓ 鈕跳。 */ body.tune .step > * { pointer-events: none; } /* ✋ 探索地圖模式 (一般訪客版的「自由操作地圖」): 敘事層全放行 → 單指拖曳/縮放落到地圖 (gestureHandling 由 JS 切 greedy); 章節改用右下 ↑↓ 鈕。再點 ✋ 一下回「單指捲章節」。 */ body.explore #story, body.explore .step > * { pointer-events: none; } /* ON/OFF 明確區隔: 關=🗺️ 深色 (與其他鈕一樣); 開=✋ 青色實心 + 外圈光暈。outline:none 去掉時有時無的對焦藍圈。 */ .explore-btn { outline: none; } .explore-btn.active { background: var(--accent); color: #0b1220; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.45), 0 4px 14px rgba(0, 0, 0, 0.45); } .step { min-height: 100vh; /* 文字靠上對齊選單頂端; 左邊 12px 與右側選單/按鈕 right:12px 對稱; 下半留給預覽圖 */ padding: 2vh 12px 35vh; display: flex; flex-direction: column; justify-content: flex-start; } /* 停點卡與開頭章節一致: 都靠上 (文字在上, 下方留給預覽圖) */ .step > * + * { margin-top: 0.9em; } /* ---- i18n: 只顯示當前語言的敘事 ---------------------------------- 敘事文字在 HTML 同時放了 lang="zh" / lang="en" 兩份, 由上的 .lang-en class 決定顯示哪一份 (JS 只翻這個開關, 真正藏/顯是 CSS 做的)。預設 (無 class) = 中文; 加 .lang-en = 英文。 */ body:not(.lang-en) [lang="en"] { display: none; } body.lang-en [lang="zh"] { display: none; } /* 標題永遠是 section 第一個內容, 不需要 * + * 帶來的上邊距; 歸零讓中英兩種模式的起始位置對齊 (英文標題在原始碼是第二個 sibling)。 */ .step h1, .step h2 { margin-top: 0; } .step h1 { font-size: 3.2rem; font-weight: 300; letter-spacing: 0.02em; background: var(--paper-card); padding: 0.2em 0.5em; align-self: flex-start; backdrop-filter: blur(6px); } .step h2 { font-size: 2.1rem; font-weight: 400; background: var(--paper-card); padding: 0.3em 0.6em; align-self: flex-start; backdrop-filter: blur(6px); color: var(--accent-warm); } .step .meta { font-size: 0.85rem; color: var(--accent); letter-spacing: 0.08em; text-transform: uppercase; background: var(--paper-card); padding: 0.4em 0.8em; align-self: flex-start; backdrop-filter: blur(6px); } .step p:not(.meta):not(.hint):not(.coda-text) { background: var(--paper-card); padding: 1em 1.1em; backdrop-filter: blur(6px); border-left: 2px solid var(--accent); } .step .lede { font-size: 1.15rem; color: var(--ink-dim); } .step .hint { font-size: 0.85rem; color: var(--accent); margin-top: 3em; align-self: flex-start; animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } .step.coda { min-height: 60vh; padding-top: 25vh; } .coda-text { font-size: 1rem; color: var(--ink-dim); background: var(--paper-card); padding: 1.2em 1.3em; backdrop-filter: blur(6px); font-style: italic; } /* ---- 停點照片卡 -------------------------------------------------- */ .stop-card { display: flex; flex-direction: column; gap: 0.9em; position: relative; } /* relative: 給卡內絕對定位的預覽照片 (#fs-preview) 當定位基準 */ /* 卡內 h2/meta/p 沿用上面既有 .step h2/.meta/p 樣式 (frosted panel) */ /* 橫排照片條: 一列、可橫向捲動 (不佔垂直空間, 不用往下滑) */ .stop-photos { display: none; /* 卡內照片條移除 — 改由底部膠捲呈現 */ gap: 6px; margin-top: 0.2em; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } .stop-photos:empty { display: none; } .stop-photos img { width: 124px; height: 90px; flex: 0 0 auto; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); cursor: zoom-in; transition: transform 0.18s ease, box-shadow 0.18s ease, z-index 0s; position: relative; } .stop-photos img:hover { transform: scale(1.5); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6); z-index: 3; } /* 看圖一律全螢幕疊層 (桌機原本是右半面板 → 會出現「左邊卡片照片 + 右邊 lightbox」兩張很怪, 改成蓋滿)。 */ #lightbox { position: fixed; top: 0; right: 0; width: 100vw; bottom: 0; z-index: 9; background: rgba(4, 8, 16, 0.93); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; border-left: 1px solid rgba(255, 255, 255, 0.12); transform: translateX(102%); opacity: 0; pointer-events: none; transition: transform 0.4s cubic-bezier(.22, 1, .36, 1), opacity 0.3s ease; } #lightbox.open { transform: translateX(0); opacity: 1; pointer-events: auto; } /* 滑動式看圖: stage 裁切, track 橫向 3 張, 拖曳跟手 (JS 設 transform) → 真的滑過去而非瞬間換。 */ .lb-stage { position: absolute; inset: 0; overflow: hidden; z-index: 1; touch-action: none; } /* 自己處理手勢 → 不讓瀏覽器捲動底下頁面 */ .lb-track { display: flex; height: 100%; will-change: transform; } .lb-slide { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .lb-slide img { max-width: 90%; max-height: 90%; border-radius: 8px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6); } .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; /* 要高於 .lb-stage(z-index:1) 否則點不到 */ border: none; background: rgba(255, 255, 255, 0.12); color: #fff; width: 40px; height: 60px; font-size: 30px; line-height: 1; cursor: pointer; border-radius: 8px; backdrop-filter: blur(4px); } .lb-nav:hover { background: rgba(255, 255, 255, 0.24); } .lb-prev { left: 10px; } .lb-next { right: 10px; } /* 關閉鈕同樣擺右下 (與 📷 / 河流 ✕ 同位置, 開關一路同一拇指區); 風格統一。 */ .lb-close { position: absolute; right: 12px; bottom: 18px; top: auto; z-index: 2; width: 42px; height: 42px; border-radius: 12px; cursor: pointer; font-size: 18px; line-height: 1; border: 1px solid rgba(255, 255, 255, 0.18); color: #e7fbf6; background: rgba(10, 15, 26, 0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .lb-close:hover { background: rgba(255, 255, 255, 0.34); } .lb-counter { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); color: #fff; font-family: monospace; font-size: 13px; letter-spacing: 0.1em; background: rgba(0, 0, 0, 0.5); padding: 3px 11px; border-radius: 12px; } /* 觸控: 改用左右滑動翻頁 → 箭頭多餘、且會壓在照片上 → 隱藏。桌機 (有滑鼠) 保留箭頭 + 點擊。 */ @media (hover: none) and (pointer: coarse) { .lb-nav { display: none; } } /* ===== 河流式相簿 (WebGL 全螢幕照片流, 移植自首頁 PhotoStream) ===== */ #river-album { position: fixed; inset: 0; z-index: 8; overflow: hidden; background: #0a0f1a; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; } #river-album.open { opacity: 1; visibility: visible; pointer-events: auto; } #river-album canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity 0.6s ease; cursor: grab; touch-action: none; } #river-album.is-ready canvas { opacity: 1; } #river-album canvas:active { cursor: grabbing; } /* DOM 版型 (只供 WebGL 量測座標, 本身隱藏); 沿用 Codrops demo 的手機變體 */ .ra__gallery { position: absolute; top: 0; left: 0; width: 100%; height: 650em; font-size: calc(100vw / 192); visibility: hidden; z-index: 0; } .ra__figure { position: absolute; overflow: hidden; margin: 0; } .ra__figure img { width: 100%; height: 100%; object-fit: cover; display: block; } .ra__figure:nth-child(1) { height: 60em; width: 100em; } .ra__figure:nth-child(2) { height: 110em; left: auto; right: 0; top: 25em; width: 70em; } .ra__figure:nth-child(3) { height: 80em; left: 12em; top: 80em; width: 89em; } .ra__figure:nth-child(4) { height: 60em; right: 0; top: 153em; width: 60em; } .ra__figure:nth-child(5) { height: 110em; left: 0; top: 180em; width: 70em; } .ra__figure:nth-child(6) { height: 135em; left: 95em; top: 230em; width: 87.5em; } .ra__figure:nth-child(7) { height: 110em; left: 0; top: 310em; width: 80em; } .ra__figure:nth-child(8) { height: 50em; left: auto; right: 0; top: 385em; width: 80em; } .ra__figure:nth-child(9) { height: 100em; left: 110em; top: 450em; width: 70em; } .ra__figure:nth-child(10) { height: 50em; left: 20em; top: 440em; width: 55em; } .ra__figure:nth-child(11) { height: 70em; left: auto; right: 0; top: 570em; width: 70em; } .ra__figure:nth-child(12) { left: 0; top: 515em; height: 100em; width: 90em; } /* 關閉鈕擺在「跟 📷 開啟鈕同一位置」(右下), 開/關拇指不用移動; 風格同其餘控制鈕。 */ #ra-close { position: fixed; right: 12px; bottom: 18px; z-index: 3; width: 42px; height: 42px; border-radius: 12px; cursor: pointer; font-size: 18px; line-height: 1; border: 1px solid rgba(255, 255, 255, 0.18); color: #e7fbf6; background: rgba(10, 15, 26, 0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); } .ra__hint { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 3; color: rgba(255, 255, 255, 0.85); font-size: 12px; letter-spacing: 0.04em; pointer-events: none; background: rgba(0, 0, 0, 0.45); padding: 5px 14px; border-radius: 14px; } /* 膠捲縮圖 hover → 上方浮一張大預覽 (掃看用; 點擊才進右半邊面板) */ /* 卡片第四欄位: 文字正下方的照片 (進站預設首張, hover 膠捲可換); 寬=卡片寬, 與文字對齊。用 absolute (脫離文字流) → 不改卡片高度, 否則會觸發 scroll-snap 重吸附 → 章節無限重播。 */ #fs-preview { display: none; position: absolute; top: calc(100% + 0.6em); left: 0; width: 100%; height: auto; max-height: 38vh; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); } #fs-preview.show { display: block; } /* 觸控裝置 (含折疊機展開): 進站不自動在卡片下鋪一張預覽照 (會直接蓋住內容) → 照片改點膠捲/📷 才看。桌機 (有滑鼠) 仍保留卡片預覽帶。 */ @media (max-width: 640px), (hover: none) and (pointer: coarse) { #fs-preview { display: none !important; } } @media (max-width: 640px) { /* 跟拍時鐘是桌機細節, 直板放它會撐高右上選單、吃掉標題 → 手機隱藏 (!important 蓋過 JS inline display) */ #time-display { display: none !important; } } /* 「📷 看照片」鈕 (右下拇指區): 常駐, 風格同 ⋯ / mini-map, 相機 emoji 大一點。 */ .photo-btn { font-size: 22px; } /* 響應式控制群 (CSS 主導顯隱, 不靠 JS latch 載入寬度 → 桌機開後切手機模擬/折疊轉向也即時正確): 桌機 (>640) 用右上面板 + 膠捲, 隱藏手機專屬鈕; 手機 (≤640) 收掉面板/膠捲, 用 ⋯ 收合 + 📷。 */ @media (min-width: 641px) { .nav-more, .photo-btn, .nav-lang { display: none !important; } /* 桌機不顯示手機專屬鈕 */ } @media (max-width: 640px) { #controls { display: none !important; } /* 手機: 右上面板收掉, 地圖優先 */ .nav-filmstrip { display: none !important; } /* 手機: 🎞️ 膠捲開關用不到 (改河流相簿) */ /* ⋯ 收合鈕: 收起其餘控制 (nav-secondary)。預設 collapsed → 只露 ⋯ + 📷, 畫面最乾淨。僅手機生效。 */ #nav-arrows.collapsed .nav-secondary { display: none; } } /* ---- 地標標記 (Google 景點, 可點開) ----------------------------- */ .map-pin { background: rgba(11, 18, 32, 0.92); color: #fff; padding: 4px 11px; border-radius: 14px; white-space: nowrap; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; border: 2px solid var(--accent); box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.25), 0 3px 10px rgba(0, 0, 0, 0.5); transform: translateY(-50%); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .map-pin:hover { background: rgba(20, 32, 56, 0.98); transform: translateY(-50%) scale(1.08); box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.4), 0 4px 14px rgba(0, 0, 0, 0.55); } /* 藏掉 cooperative 模式滾動時的「use ctrl + scroll to zoom」遮罩提示 (保留拖曳/捲頁, 只去提示) */ .gm-style-moc { display: none !important; } /* 選單內的日期時間 (跟拍時顯示當下時刻, 收進選單最上方而非浮在地圖) */ .ctrl-time { font-family: monospace; font-size: 13px; letter-spacing: 0.06em; color: #0b1220; text-align: center; background: #f1f5f9; border-radius: 5px; padding: 4px 8px; } /* ---- 選單頂端視圖切換 (地圖/相簿/行程, 白色與選單一致) ---------------- */ .ctrl-views { display: flex; gap: 4px; } .ctrl-views .cv-item { flex: 1; text-align: center; padding: 5px 4px; border-radius: 5px; font-size: 12px; text-decoration: none; color: #475569; background: #f1f5f9; cursor: pointer; } .ctrl-views .cv-item:hover:not(.active):not(.disabled) { background: #e2e8f0; color: #0b1220; } .ctrl-views .cv-item.active { background: var(--accent); color: #0b1220; font-weight: 600; } .ctrl-views .cv-item.disabled { opacity: 0.45; cursor: default; } /* ---- 停點導覽: 收進選單 body 的章節清單 (白底深字) + 右下上下鈕 ---------- */ #step-nav { display: flex; flex-direction: column; gap: 2px; max-height: 34vh; overflow-y: auto; border-top: 1px solid #e2e8f0; padding-top: 8px; } .nav-item { display: flex; align-items: center; gap: 8px; max-width: 100%; background: none; border: 0; cursor: pointer; padding: 4px 6px; border-radius: 5px; color: #475569; font: 12px/1.3 -apple-system, system-ui, sans-serif; text-align: left; opacity: 0.85; transition: background 0.15s ease, color 0.15s ease; } .nav-item:hover { background: #f1f5f9; color: #0b1220; opacity: 1; } .nav-item.active { background: #e2e8f0; color: #0b1220; opacity: 1; font-weight: 600; } .nav-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--accent); box-shadow: 0 0 0 1px rgba(11, 18, 32, 0.3); } .nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #nav-arrows { position: fixed; right: 12px; bottom: 18px; z-index: 6; display: flex; flex-direction: column; gap: 6px; } /* 控制鈕統一風格: 深色霧面圓角方, 對齊左下小地圖 (#inset-map) 的框 + 上方文字卡的深色霧面 → 全站一致。 */ .nav-arrow, .photo-btn { width: 42px; height: 42px; border-radius: 12px; cursor: pointer; line-height: 1; font-size: 18px; border: 1px solid rgba(255, 255, 255, 0.18); color: #e7fbf6; background: rgba(10, 15, 26, 0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); } .nav-arrow:hover, .photo-btn:hover { background: rgba(20, 32, 56, 0.92); } @media (max-width: 640px) { #step-nav { display: none; } /* 手機: 只留上下鈕, 點太密 */ } /* ---- 底部照片膠捲 (settle 後自動滑入的照片層) ------------------------ */ #filmstrip { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%) translateY(140%); /* 收起時藏在畫面下方 */ z-index: 7; max-width: min(720px, 78vw); display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 14px; background: rgba(11, 18, 32, 0.86); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: transform 0.45s cubic-bezier(.22, 1, .36, 1), opacity 0.3s ease; } #filmstrip.open { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; } .fs-track { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; } .fs-track img { height: 64px; width: auto; flex: 0 0 auto; border-radius: 6px; cursor: zoom-in; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); transition: transform 0.15s ease; } .fs-track img:hover { transform: scale(1.08); } /* 開 lightbox 時收起膠捲 → 同一張不會在「滿版 lightbox + 膠捲」兩處同時出現 (折疊機尤其明顯)。 */ body.lb-open #filmstrip { opacity: 0 !important; pointer-events: none !important; transform: translateX(-50%) translateY(140%) !important; } /* 觸控 (折疊機/平板) 的膠捲: 最多約 3 張, 其餘靠左右滑 (.fs-track 已 overflow-x:auto) → 不橫向擠到右側按鈕群與左側地圖縮圖。點一張 → 進全螢幕 lightbox (見 #lightbox 的 hover:none 規則)。 */ @media (hover: none) and (pointer: coarse) { #filmstrip { max-width: 332px; } /* 約 3 張, 其餘左右滑; 仍不擠到右側按鈕與左側地圖縮圖 */ } /* 手機: 膠捲整個停用 (改用點 📷 開的全螢幕河流相簿)。即使 JS 因故走桌機分支呼叫 showFilmstrip, 也由此強制隱藏 → 地圖維持全貌、不與文字/定位圖搶位。 */ @media (max-width: 640px) { #filmstrip { display: none !important; } } /* ---- 定位小地圖 (inset locator, 左下角) ------------------------------ 固定區域全圖 + 一個追蹤主地圖中心的點; 不可互動, 只作方位參考。 */ #inset-map { /* !important 同 #map: 打敗 Google Maps 注入容器的 inline position:relative, 並中和可能注入的 top/left, 才能真正固定在左下角。 */ position: fixed !important; bottom: 18px !important; left: 12px !important; top: auto !important; right: auto !important; width: 120px !important; height: 120px !important; z-index: 5; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); background: #0a0f1a; } .inset-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent-warm); border: 2px solid #0b1220; box-shadow: 0 0 0 2px rgba(252, 211, 77, 0.45); } @media (max-width: 640px) { /* 直向手機: 定位小地圖收掉 (螢幕小、會跟文字/控制搶位), 地圖本身已是全貌 → 不需縮圖定位 */ #inset-map { display: none !important; } } /* ---- 跨頁共用視圖切換器 (.view-nav) ---------------------------------- 一致性: 同一個 class (風格) + 同一個左上角 (位置) + 列出所有視圖 + 標出當前頁。地圖頁加 .view-nav--float (fixed + 捲動淡出); 相簿頁放在 header 內常駐。 */ .view-nav { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 20px; background: rgba(11, 18, 32, 0.82); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); transition: opacity 0.35s ease; } .view-nav .item { display: flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 16px; white-space: nowrap; font-size: 13px; color: var(--ink-dim); text-decoration: none; } .view-nav .item:hover:not(.active):not(.disabled) { color: var(--ink); background: rgba(255, 255, 255, 0.08); } .view-nav .item.active { /* 當前頁: 高亮 */ color: #0b1220; background: var(--accent); font-weight: 600; } .view-nav .item.disabled { /* 行程: 灰著佔位 */ opacity: 0.4; cursor: default; } /* 地圖頁: 浮在左上、常駐 (淡出會閃爍反而更搶眼, 故不淡出) */ .view-nav--float { position: fixed; top: 14px; left: 14px; z-index: 8; } /* style switcher control (top-left) */ .style-switcher select { border: none; background: #fff; padding: 6px 10px; font-size: 12px; font-family: inherit; cursor: pointer; color: #0b1220; outline: none; } .style-switcher select:focus { background: #f1f5f9; } /* mobile */ @media (max-width: 640px) { #story { margin-left: 0; width: 96vw; } .step h1 { font-size: 2.4rem; } .step h2 { font-size: 1.6rem; } /* 右上已淨空 (選單收掉、語言移右下), 標題可貼近頂端 → 給最大地圖空間 */ .step { padding: 24px 12px 30vh; } }