/* 平台 landing 頁（多過一個 active venue 先顯示，見 functions/_middleware.js）。 色板照跟 theme.css「街市暖木」，唔開新色值。 */ /* ---------- 頂欄（2026-08-11）---------- landing 特登唔用 #site-nav：嗰個喺 ≤480px 會變成底部 tab bar，但呢一頁淨係得一粒 登入掣，變咗 tab bar 會好怪。所以自己寫一條輕頂欄。 */ /* .platform-top／.platform-brand／.platform-login 已經搬咗去 nav.css（共用）， 唔好喺呢度重新定義——第啲頁面唔引呢個檔。 */ /* ---------- 香港舊區街景線畫（2026-08-11）---------- 全闊橫幅，坐喺頂欄同 hero 之間。底部用 mask 淡出溶入紙色底，等下面文字讀得清。 所有色值嚟自 theme.css，冇開新色。 */ .platform-scene { position: relative; width: 100%; overflow: hidden; background: linear-gradient(180deg, var(--panel) 0%, var(--bg) 78%); border-bottom: 1px solid var(--line); line-height: 0; } .ps-svg { display: block; width: 100%; height: auto; max-height: 300px; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 99%); mask-image: linear-gradient(180deg, #000 62%, transparent 99%); } /* 線畫零件——用 theme.css 變數，唔另創色值 */ .ps-svg .ps-face { fill: var(--panel); } .ps-svg .ps-face2 { fill: var(--card); } .ps-svg .ps-glass { fill: var(--card); stroke: var(--text); stroke-width: 2; } .ps-svg .ps-win { fill: var(--bg); stroke: var(--text); stroke-width: 1.4; } .ps-svg .ps-lit { fill: var(--accent); opacity: .82; } .ps-svg .ps-ink { fill: none; stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .ps-svg .ps-ink-thin { fill: none; stroke: var(--text); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; opacity: .82; } .ps-svg .ps-ground { stroke: var(--text); stroke-width: 2.6; } .ps-svg .ps-tank { fill: var(--card); stroke: var(--text); stroke-width: 2; } .ps-svg .ps-ac { fill: var(--card); stroke: var(--text); stroke-width: 1.6; } .ps-svg .ps-shutter { fill: var(--card); stroke: var(--text); stroke-width: 2; } .ps-svg .ps-sign { fill: var(--panel); stroke: var(--text); stroke-width: 2; } .ps-svg .ps-signv { fill: var(--panel); stroke: var(--text); stroke-width: 2; } .ps-svg .ps-awn { fill: var(--card); stroke: var(--text); stroke-width: 2; } .ps-svg .ps-gold { fill: var(--accent); } .ps-svg .ps-red { fill: var(--red); } .ps-svg .ps-green { fill: var(--green); } .ps-svg .ps-blue { fill: var(--blue); } .ps-svg .ps-glow { fill: var(--accent); opacity: .16; } /* ---------- 內容 ---------- */ .platform-wrap { padding-top: 24px; } .platform-wrap h1 { margin-bottom: 6px; font-size: 26px; line-height: 1.3; } .platform-wrap h2 { font-size: 17px; margin: 30px 0 10px; color: var(--accent); } .platform-wrap p { line-height: 1.75; } .platform-hero .platform-tagline { color: var(--muted); font-size: 15px; font-weight: 600; margin: 0 0 16px; } .platform-count { font-size: 14px; font-weight: 600; color: var(--muted); } .platform-join { margin-top: 30px; } .platform-join a { color: var(--accent); font-weight: 700; } .platform-foot { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--line); } .platform-foot p { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 0; } @media (min-width: 1024px) { .platform-wrap h1 { font-size: 30px; } } .venue-cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 18px; } @media (min-width: 640px) { .venue-cards { grid-template-columns: 1fr 1fr; } } .venue-card { position: relative; overflow: hidden; display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; text-decoration: none; color: var(--text); box-shadow: 0 1px 4px rgba(58,46,32,.12); } .venue-card:active { transform: scale(0.98); } /* 商場卡加一抹冷藍調，同街舖卡（暖木）分得開 */ .venue-card--mall { background: linear-gradient(135deg, var(--panel) 60%, rgba(74,107,138,.10)); } /* 角落主題線畫 */ .venue-motif { position: absolute; top: 12px; right: 12px; width: 74px; height: 58px; opacity: .9; } .venue-motif--street .vm-face { fill: var(--card); stroke: var(--text); stroke-width: 2; } .venue-motif--street .vm-win { fill: var(--bg); stroke: var(--text); stroke-width: 1.4; } .venue-motif--street .vm-ac { fill: var(--bg); stroke: var(--text); stroke-width: 1.4; } .venue-motif--street .vm-sign, .venue-motif--street .vm-signv { fill: var(--panel); stroke: var(--text); stroke-width: 1.8; } .venue-motif--street .vm-awn { fill: var(--card); stroke: var(--text); stroke-width: 1.8; } .venue-motif--street .vm-dot { fill: var(--accent); } .venue-motif--mall .vm-tower { fill: var(--card); stroke: var(--blue); stroke-width: 2; } .venue-motif--mall .vm-line { stroke: var(--blue); stroke-width: 1.4; opacity: .7; } .venue-motif--mall .vm-lit { fill: var(--blue); opacity: .5; } .venue-motif--mall .vm-esc { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; } /* 卡片內文字要企喺線畫之上，右邊留位唔好撞到 icon */ .venue-card-name, .venue-card-meta, .venue-card-stats { position: relative; } .venue-card-name { padding-right: 66px; } .venue-card-name { font-size: 18px; font-weight: 800; color: var(--accent); margin-bottom: 4px; } .venue-card-meta { font-size: 13px; color: var(--muted); margin-bottom: 10px; } .venue-card-stats { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; color: var(--text); } .venue-card-stats span { background: var(--card); border-radius: 999px; padding: 4px 10px; } .venue-cards .empty-state, .venue-cards .lead { padding: 6px 2px; } /* ---------- F2 大地圖（2026-08-13） ---------- */ .platform-mapsec h2 { margin-bottom: 10px; } .platform-map-wrap { position: relative; } #platform-map { height: 420px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); z-index: 0; /* z-index:0 開新 stacking context，Leaflet 內部 400 唔會爬出嚟遮住場域選單 */ } .pm-layers { position: absolute; top: 10px; right: 10px; z-index: 1000; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; box-shadow: 0 3px 12px rgba(58,46,32,.18); max-width: 200px; } .pm-layers-title { font-size: 12px; font-weight: 800; color: var(--muted); margin-bottom: 4px; } .pm-layer-row { display: flex; align-items: center; gap: 7px; min-height: 32px; font-size: 13.5px; font-weight: 600; cursor: pointer; } .pm-layer-row input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--accent); margin: 0; } .pm-nopos { font-style: normal; font-size: 12px; color: var(--muted); margin-left: 3px; } /* 商場場域喺平台大地圖上嘅標記。呢度個色**一定要寫死**，唔可以用 var(--accent)—— 平台頁本身係街舖主題，var(--accent) 會攞到街舖嘅銅金色，而呢粒標記要代表商場。 ⚠️ 所以改商場主題嗰陣要記得一齊改呢度（2026-08-21 就係咁漏咗， theme.css 改晒但呢粒仲係舊嘅 #1F6E63）。值跟 .venue-mall 嘅 --accent。 */ .pm-mall-mk { width: 34px; height: 34px; border-radius: 10px; box-sizing: border-box; background: #146258; color: #fff; border: 2.5px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 900; } @media (max-width: 480px) { #platform-map { height: 320px; } .pm-layers { max-width: 160px; padding: 6px 8px; } } /* popup 內容樣式：同 survey.css 嘅 .sv-pop-* 同名同款（landing 冇載 survey.css，要自備一份）。 改嗰邊記得改埋呢邊。 */ .sv-pop-code { font-size: 15px; font-weight: 800; } .sv-pop-name { color: var(--muted); font-size: 13px; margin: 2px 0 8px; } .sv-pop-btn { display: block; width: 100%; min-height: 44px; border: none; border-radius: 10px; background: var(--accent); color: var(--on-solid); font-weight: 800; font-size: 15px; cursor: pointer; } a.sv-pop-btn { color: var(--on-solid); } /* F4「附近幫手」（2026-08-13）。跟 theme token，唔另定色值。 */ .nearby-box { margin-top: 14px; } .nearby-btn { width: 100%; margin-bottom: 0; } .nearby-status { font-size: 13px; color: var(--muted); margin: 8px 0 6px; min-height: 1em; } .nearby-list { display: flex; flex-direction: column; gap: 8px; } .nearby-item { display: block; text-decoration: none; color: var(--text); background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: 11px 13px; min-height: 44px; } .nearby-item:hover { background: var(--panel); } .nb-name { font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 8px; } .nb-type { font-size: 12px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; } .nb-meta { font-size: 13px; margin-top: 2px; } .nb-meta b { color: var(--accent); } .nb-sub { font-size: 12px; color: var(--muted); margin-top: 1px; } /* F7 首頁「街坊想記錄」預覽（2026-08-14） */ .platform-wishes-lead { color: var(--muted); font-size: 14px; margin-bottom: 12px; } .wish-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; } .wp-item { display: block; text-decoration: none; color: var(--text); background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: 11px 13px; min-height: 44px; } .wp-item:hover { background: var(--panel); } .wp-name { font-weight: 800; font-size: 15px; } .wp-text { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.5; } .join-wish { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); } .join-wish .btn { margin-bottom: 0; width: auto; flex: 0 0 auto; } .join-wish .muted { font-size: 13px; margin-top: 2px; } /* F8 首頁「本月最活躍」（2026-08-17） */ .lb-top { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .lbt-item { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px; min-height: 44px; } .lbt-item:hover { background: var(--panel); } .lbt-rank { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: #fff; background: var(--muted); } .lbt-rank.r1 { background: var(--medal-gold); } .lbt-rank.r2 { background: var(--medal-silver); } .lbt-rank.r3 { background: var(--medal-bronze); } .lbt-name { flex: 1 1 auto; font-weight: 700; } .lbt-pts { flex: 0 0 auto; font-weight: 800; color: var(--accent); } /* 首頁頂欄導覽（2026-08-19）：四個下拉（揀場域先入去）＋ 貢獻榜直連。 ⚠️ 2026-08-21：`.pnav` / `.pnav-item` 嘅樣式**已經搬咗去 nav.css**。 原因同 nav.css:370 嗰段講嘅一模一樣，只係嗰次搬漏咗呢兩條： `slInjectPlatformNav()` 係 common.js 嘅共用函數，邊個頁 call 都會注入 .pnav， 但樣式喺 platform.css 就變成「唔載 platform.css 嗰啲頁頂欄爛晒」—— /start 上線之後即刻中招（裸