/* --navh / --sab 是「發佈版比嵌入版多出來的兩塊空間」：頂部導覽列的高度， 與 iOS 底部橫條。用變數而不是在 standalone 區塊裡逐條蓋 top/bottom —— 蓋的寫法踩過兩次同一個雷：覆寫區塊排在基礎規則**前面**，同權重後者贏， 整排控制列就被壓在導覽列底下看不見（2026-08-14 讀者回報「沒有日期」）。 變數只宣告這一次，先後順序就不再是正確性的一部分。 */ /* 顏色一律走 token。深色主題原本是「把用到的選擇器一條一條列出來覆寫」， 結果漏了 .hd 與 .price —— 清單標頭在深色下是白底、房價是 #1a1a1a 的黑字， 等於整份清單看不見（2026-08-14 回報）。漏一條就是壞一塊，而且要有人剛好 打開那一塊才會發現。改成一組 token：淺色在這裡、深色在檔尾整組覆寫， 新增元件只要用 token 就自動兩種主題都對。 */ :root{--sf:#fff;--sf2:#f1f3f5;--sf-h:#f5f9ff; --ink:#1a1a1a;--ink2:#666;--ink3:#888;--ink-dis:#ccc; --line:#eceef1;--line2:#e3e3e3; --good:#2e7d32;--goodbg:#f1f7f1;--goodsolid:#2e7d32; --tagbg:#eef3ff;--imgbg:#eef1f4;--scrim:rgba(255,255,255,.93);--score:#1a73e8; --sh:0 2px 10px rgba(0,0,0,.18);--sh-lg:0 8px 30px rgba(0,0,0,.24);--sh-pin:0 2px 7px rgba(0,0,0,.3); --pin:#fff;--pin-ink:#1a1a1a;--pin-w:#8a8a8a;--pin-line:transparent; --pin-sel:#1a1a1a;--pin-sel-ink:#fff;--pin-sel-w:#bbb; --dot:#5b6b7c;--dot-line:#fff;--vpl:#111;--vpl-ink:#fff; --badge-bg:rgba(17,18,20,.82);--badge-ink:rgba(255,255,255,.78); --glass:rgba(255,255,255,.72);--glass-line:rgba(255,255,255,.55);--glass-hi:rgba(255,255,255,.9); --glass-strong:rgba(255,255,255,.86); --navh:calc(52px + env(safe-area-inset-top)); --sab:env(safe-area-inset-bottom)} *{box-sizing:border-box} html,body{margin:0;height:100%;font:14px/1.5 -apple-system,"Noto Sans TC",system-ui,sans-serif;color:var(--ink)} /* 版面：地圖鋪滿，控制列與清單都疊在上面（對標 Owen 提供的 Stay22 embed 截圖）。 原本是「左清單 310px + 右地圖」—— 那讓地圖在 iframe 裡只剩一半寬度， 而地圖才是這個產品的主體。 */ #map{position:absolute;inset:0} /* 頂部導覽列：發佈版是獨立頁面，讀者需要知道「這是什麼活動的地圖」、 能改日期人數、也能把它轉給同行的人。嵌入版不需要標題與分享 —— 主辦方的頁面本來就有標題，控制列直接浮在地圖上。 發佈版把控制列**收進導覽列裡**（#bar 變成 nav 的一個 flex 子元素）： 兩排各自浮在地圖上會互相蓋，而且兩排白底看起來就是兩個不同的產品。 */ #nav{position:absolute;top:0;left:0;right:0;z-index:1004;min-height:52px; padding:8px 12px 8px 16px;padding-top:calc(8px + env(safe-area-inset-top)); display:flex;align-items:center;gap:10px;flex-wrap:wrap; background:var(--sf);border-bottom:1px solid var(--line)} .nav-t{font-size:15px;font-weight:700;max-width:26%; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* 導覽列裡的控制項用 Base UI 的尺度（36px 高、圓角 8、1px 邊框）， 不是浮在地圖上的藥丸 —— 白底上再打陰影會髒 */ #nav #bar{position:static;flex:1;min-width:0;margin:0;gap:8px} #nav .ctl{border-radius:999px;height:36px;padding:0 14px;font-size:13.5px} /* 玻璃是「浮在地圖上」的語言 —— 進了實心白色導覽列，玻璃底、blur、 外陰影全部拿掉，否則每顆按鈕在白底上都拖一團灰（2026-09-01 Owen 手機截圖， 「按鈕跟按鈕之間都有灰色影子」）。改成安靜的填色膠囊（--sf2、無框線）。 ⚠️ :not(.on)：啟用態是藍底白字，同特異性後寫的會把它洗掉 —— 這雷踩過。 */ #nav .ctl:not(.on){background:var(--sf2);border-color:transparent;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none} #nav .ctl.on{box-shadow:none} /* 藍底保留，但白面上不投影 */ #nav .ctl.venue{display:none} /* 標題已經寫在導覽列左邊了 */ #nav .cta-main{border-radius:999px;height:36px;padding:0 16px;font-size:13.5px;box-shadow:none} #shareBtn{background:var(--sf2);border:1px solid transparent;border-radius:999px;height:36px; padding:0 14px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ink);flex:none} #shareBtn:active{background:var(--line2)} /* 發佈版是獨立分享頁，不是 iframe —— 手機 Safari 要真的滿版。 100vh 在 iOS 會被網址列吃掉一截（捲動時工具列收合，高度才對得上）， 所以用 100dvh，並留 -webkit-fill-available 給舊版。 */ html,body{height:100%;overflow:hidden;overscroll-behavior:none} body{height:100dvh;min-height:-webkit-fill-available} .leaflet-control-zoom{margin-bottom:calc(10px + env(safe-area-inset-bottom))!important} @media(max-width:640px){ /* 手機：標題與分享一排，控制列自己一排。 原本的控制項是 36px 的框線盒子 —— 三個並排像表單不像 app（實測回報）。 改成安靜的填色膠囊：無框線、32px、圓角 999，分享同款；只留一條底線分隔。 （填色與去陰影的規則在上面的 #nav .ctl:not(.on) —— 全寬度共用，這裡只縮尺寸。） */ #nav{gap:8px;row-gap:9px;padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top))} .nav-t{flex:1;max-width:none;font-size:16px;letter-spacing:-.01em} #nav #bar{flex-basis:100%;order:3;gap:6px} #nav .ctl{height:32px;padding:0 12px;font-size:12.5px;font-weight:600} #nav .ctl.icon{width:32px;padding:0;justify-content:center} #nav .cta-main{height:32px;border-radius:999px;padding:0 14px;font-size:12.5px} #shareBtn{height:32px;padding:0 13px;font-size:12.5px} :root{--navh:calc(90px + env(safe-area-inset-top))} } /* 頂部控制列：地點 · 日期 · 人數 · 篩選 ┈┈ 主要動作靠右 */ #bar{position:absolute;top:calc(12px + var(--navh));left:12px;right:12px;z-index:1000;display:flex;gap:8px;align-items:center} /* 玻璃膠囊（嵌入版浮在地圖上、發佈版收在導覽列裡，同一套）。 玻璃的辨識特徵不是 blur，是「邊緣高光 + 內部亮度層次」： · 半透明底色（不是實色）讓地圖透過來，saturate 讓透過來的顏色更活 · 1px 半透明邊 + inset 頂部 1px 高光 = 光從上面來 只做 backdrop-filter 就是「粗糙的玻璃」（實測回報）。 */ .ctl{background:var(--glass);color:var(--ink);border-radius:999px; border:1px solid var(--glass-line); box-shadow:inset 0 1px 0 var(--glass-hi),0 2px 12px rgba(0,0,0,.18); -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4); padding:9px 16px;font-size:13.5px;display:flex;align-items:center;gap:7px;white-space:nowrap} .ctl.venue{font-weight:600;max-width:38%;overflow:hidden;text-overflow:ellipsis;display:block} /* 焦點環（2026-09-01 Owen 兩次回報）：預設的 outline 按一下就留在那裡， 但**不能只寫 outline:none** —— 只用鍵盤的人會完全找不到自己在哪一顆按鈕上。 兩件事分開處理： ① 只靠 :focus-visible 擋不住滑鼠 —— 它的啟發式各家瀏覽器不同 （Safari 對按鈕比 Chrome 寬鬆），實際上滑鼠點完環還是會留著。 所以另外追蹤「最後一次互動是滑鼠還是鍵盤」（html.using-mouse）， 滑鼠時一律不畫環。這是確定性的，不依賴瀏覽器的判斷。 ② 用 outline 不用 box-shadow：box-shadow 會蓋掉 .ctl 自己的玻璃陰影； 而且先前那圈「2px 白 + 2px 藍」疊在 32px 的小膠囊上太厚， 套在啟用態的藍底按鈕上會變成兩層藍。單圈 + offset 就夠了。 */ #bar button:focus,#bar a:focus,#nav button:focus,#nav a:focus{outline:none} #bar button:focus-visible,#bar a:focus-visible, #nav button:focus-visible,#nav a:focus-visible{ outline:2px solid var(--ink);outline-offset:2px} html.using-mouse :focus-visible{outline:none} .spacer{flex:1} /* 嵌入版的「查看住宿」是 （真連結才右鍵得動、也不會被彈出視窗阻擋擋掉）， 獨立頁是