/* ============================================================================= * 項目地圖 — 樣式（所有地區共用，一套程式） * ----------------------------------------------------------------------------- * 骨架 token 整段取自 shared/skins/design-tokens.css（改標準＝改那個檔再同步）。 * 皮膚（顏色／字型）定義在骨架下方。所有顏色一律走 CSS 變數，不寫死 hex。 * ========================================================================== */ /* ===== 骨架：design tokens（跨項目不變）===== */ :root{ --fs-eyebrow:clamp(13px,1.25vw,15px); --fs-h1:clamp(36px,5vw,62px); --fs-h2:clamp(30px,4.2vw,50px); --fs-h3:clamp(21px,2.4vw,28px); --fs-lead:clamp(18px,1.8vw,21px); --fs-body:clamp(17px,1.5vw,18px); --fs-small:14px; --fs-stat:clamp(30px,4vw,46px); --fw-body:400; --fw-med:600; --fw-bold:700; --fw-black:850; --lh-tight:1.1; --lh-snug:1.16; --lh-body:1.5; --space-section:clamp(72px,10vw,128px); --space-block:clamp(34px,5vw,56px); --space-stack:1.15em; --space-head:22px; --measure:680px; } /* ===== 皮膚：顏色角色（命名依 lp-design 規格）===== */ :root{ --bg-primary:#FBFBFD; --bg-section-a:#FBFBFD; /* 與 bg-primary 同色（規格）*/ --bg-section-b:#F3F2F7; --bg-card:#FFFFFF; --accent:#6A47F5; --accent-light:#1E9BF0; --text-primary:#0A0A0E; --text-secondary:#39393F; --text-dim:#67676F; --text-faint:#9A9AA4; --status-active:#14C29A; --status-warning:#F2A33C; --bad:#E74C3C; --good:#14C29A; --badge-bg:rgba(106,71,245,.08); --badge-border:rgba(106,71,245,.22); --accent-halo:rgba(106,71,245,.06); /* CTA 卡外圈薄光 */ --accent-glow:rgba(106,71,245,.42); /* CTA 卡下方擴散光 */ --line:rgba(0,0,0,.09); --line-soft:rgba(0,0,0,.055); --shadow-card:0 1px 2px rgba(10,10,14,.04),0 12px 32px rgba(10,10,14,.06); /* 地標（深色底圖下的預設值；淺色底圖在 [data-map-theme="light"] 覆寫）*/ --lmk-chip:rgba(14,14,22,.72); --lmk-line:rgba(255,255,255,.22); --lmk-ink:rgba(255,255,255,.78); --lmk-halo:0 1px 8px rgba(0,0,0,.85); /* 地圖專用（深色底圖 — 對齊 Ryan 影片的視覺語言）*/ --map-bg:#0B0D12; --map-tint-a:#6A47F5; /* 色調覆蓋層漸層兩端＝品牌紫 → 品牌青 */ --map-tint-b:#1E9BF0; --d-ink:#FFFFFF; --d-soft:rgba(255,255,255,.72); --d-muted:rgba(255,255,255,.5); --d-line:rgba(255,255,255,.14); --d-panel:rgba(18,18,26,.82); --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Hiragino Sans","Microsoft JhengHei",sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace; --maxw:1140px; --gutter:clamp(20px,5vw,52px); --radius:20px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--bg-primary);color:var(--text-primary);font-family:var(--sans); font-size:var(--fs-body);font-weight:var(--fw-body);line-height:var(--lh-body); letter-spacing:-.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } ::selection{background:var(--accent);color:#fff} a{color:inherit} h1,h2,h3,h4{text-wrap:pretty} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative} .section{padding:var(--space-section) 0} /* ⚠️ 第一個 section 的頂部收窄（Edwind 2026-08-14：「第二個 section 跟第一個 section 之間留白太多」——其實是頂條和內容之間）。--space-section 是 LP 的 間距尺（LP 首屏是 Hero、需要呼吸），資料頁第一屏是麵包屑＋標題，128px 的 頂距只是把內容往下推。只收第一個，section 之間的節奏不動。 */ main > .section:first-child{padding-top:clamp(28px,4vw,48px)} /* 對比頁的表格三欄並排，1140px 在寬螢幕上兩側留白過多（Edwind 同日）。 放寬到 1320：小螢幕不受影響（max-width），大螢幕表格每欄多 60px。 */ body[data-page="compare"] .wrap{max-width:1320px} .section--b{background:var(--bg-section-b)} .sechead{margin-bottom:var(--space-block)} .sechead h2{font-size:var(--fs-h2);font-weight:780;line-height:var(--lh-snug);letter-spacing:-.02em} /* ⚠️ 不鎖 --measure（2026-08-14 Edwind 指出跑位）。design-rules 硬規則：同一 section 內標頭／內文／卡片共用欄寬、左右緣對齊；Oxley 前例＝全寬。這裡原本 引言 680、卡片 1140，一頁三種右緣。同族教訓第二次（第一次 2026-08-11 官網）。 */ .sechead p{margin-top:var(--space-head);color:var(--text-secondary)} .em{font-weight:900} strong{font-weight:720} /* kicker 藥丸 */ .kicker{ display:inline-flex;align-items:center;gap:8px; font-size:var(--fs-eyebrow);font-weight:var(--fw-med);letter-spacing:.02em; padding:7px 14px;border-radius:100px; background:var(--badge-bg);border:1px solid var(--badge-border);color:var(--accent); margin-bottom:16px; } .kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none} /* ===== 頂條 ===== */ /* 深色——首屏就是深色地圖，頂條跟著深才不會在接縫處斷開 */ .topbar{ position:sticky;top:0;z-index:100; /* 高於地圖(0)、低於詳情面板(900+) */ background:rgba(10,10,14,.82);backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--d-line); } .topbar-in{max-width:var(--maxw);margin:0 auto;padding:12px var(--gutter); display:flex;align-items:center;justify-content:space-between;gap:16px} .brandmark{display:block;flex:none;text-decoration:none;line-height:0} .brandmark img{display:block;height:42px;width:auto;transition:opacity .2s} .brandmark:hover img{opacity:.82} .topbar nav{display:flex;gap:6px;flex-wrap:wrap} .topbar nav a{ font-size:var(--fs-small);font-weight:var(--fw-med);color:var(--d-muted); text-decoration:none;padding:7px 12px;border-radius:100px;transition:.2s; } .topbar nav a:hover{background:rgba(255,255,255,.1);color:var(--d-ink)} /* 「認識 Ryan」跟其他 nav 不同類：其他是在地圖裡換頁，它是離開地圖去官網。 給一圈框讓它看起來像可以按的東西，但不做成主按鈕（它不是這一頁的主要動作）。 */ .to-home{color:var(--d-ink);border:1px solid rgba(255,255,255,.22)} .to-home:hover{border-color:rgba(255,255,255,.4)} /* ===== 草稿橫幅（preview 模式）===== */ .draftbar{ background:var(--bad);color:#fff;font-size:var(--fs-small);font-weight:var(--fw-med); padding:10px var(--gutter);text-align:center;line-height:1.45; } .draftbar code{font-family:var(--mono);background:rgba(255,255,255,.18);padding:1px 6px;border-radius:5px} /* ===== Hero ===== */ .hero{padding:clamp(48px,7vw,84px) 0 clamp(28px,4vw,44px)} .hero h1{font-size:clamp(32px,4.4vw,54px);font-weight:760;line-height:var(--lh-snug);letter-spacing:-.03em} .hero h1 .en{color:var(--text-faint);font-weight:var(--fw-med)} .hero .lead{margin-top:var(--space-head);font-size:var(--fs-lead);color:var(--text-secondary);max-width:var(--measure); text-align:justify;text-justify:inter-character} .hero .meta{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px} .chip{ display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-small); padding:6px 12px;border-radius:100px;background:var(--bg-card); border:1px solid var(--line);color:var(--text-dim); } .chip .dot{width:7px;height:7px;border-radius:50%;background:var(--text-faint);flex:none} .chip.ok .dot{background:var(--status-active)} .chip.warn .dot{background:var(--status-warning)} /* ===== 地圖 hero（滿版深色真底圖）===== */ .maphero{ position:relative;background:var(--map-bg); height:clamp(460px,78vh,820px); border-bottom:1px solid rgba(0,0,0,.14); /* isolation 很重要：Leaflet 內部的控制項用到 z-index:1000，不關進獨立的堆疊脈絡 就會跑到詳情面板上面去。這一行把整張地圖的 z-index 世界關在自己家裡。 */ z-index:0;isolation:isolate; } #map{position:absolute;inset:0;background:var(--map-bg)} /* Dark Matter 原圖太黑，街道幾乎看不見——先把圖磚提亮、降飽和， 再交給下面的色調層上色。只套在圖磚層，pin 與控制項不受影響。 ⚠️ 只給深色底圖用。Voyager／Positron 本來就是設計好的淺色圖， 再提亮會把道路分級的顏色洗掉——那正是「像地圖」的關鍵。 */ [data-map-brighten="on"] .leaflet-tile-pane{filter:brightness(1.62) saturate(.62) contrast(.96)} /* 品牌色調覆蓋層：用 mix-blend-mode:color 只換色相、保留亮度， 所以街名照樣看得見——這就是 Ryan 影片裡那種雙色調的做法。 pointer-events:none 才不會擋住地圖拖曳。 */ .map-tint{ position:absolute;inset:0;z-index:400;pointer-events:none; background:linear-gradient(160deg,var(--map-tint-a) 0%,var(--map-tint-b) 100%); mix-blend-mode:color;opacity:var(--tint,.5); } /* 上下暗角：純粹是為了讓疊在上面的白字有對比，不是裝飾 */ .map-vignette{ position:absolute;inset:0;z-index:401;pointer-events:none; background: linear-gradient(to bottom,rgba(8,8,12,.74) 0%,rgba(8,8,12,0) 30%), linear-gradient(to top,rgba(8,8,12,.5) 0%,rgba(8,8,12,0) 16%); } /* 疊在地圖上的東西統一在這一層；子元素各自打開 pointer-events */ .map-ui{position:absolute;inset:0;z-index:500;pointer-events:none; display:flex;flex-direction:column;justify-content:space-between; padding:clamp(18px,2.4vw,30px) var(--gutter)} .map-ui > *{pointer-events:auto} .map-ui .row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap} .map-title{color:var(--d-ink);text-shadow:0 2px 20px rgba(0,0,0,.6);max-width:640px} .map-title h1{font-size:clamp(28px,3.6vw,46px);font-weight:800;line-height:var(--lh-snug);letter-spacing:-.03em} .map-title h1 .en{color:var(--d-muted);font-weight:var(--fw-med)} .map-title p{margin-top:10px;color:var(--d-soft);font-size:var(--fs-small)} .map-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .map-chips .chip{background:rgba(12,12,18,.6);border-color:var(--d-line);color:var(--d-soft); backdrop-filter:blur(8px)} .map-btn{ display:inline-flex;align-items:center;gap:8px;cursor:pointer; font-size:var(--fs-small);font-weight:var(--fw-bold);letter-spacing:-.01em; color:var(--d-ink);background:rgba(12,12,18,.66);border:1px solid var(--d-line); border-radius:100px;padding:11px 18px;backdrop-filter:blur(10px); text-decoration:none;transition:background .2s,border-color .2s,transform .2s; } .map-btn:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)} .map-btn[hidden]{display:none} /* 右邊留出 Leaflet 縮放鈕的位置，免得跟滾動提示疊在一起 */ .map-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px; flex-wrap:wrap;padding-right:56px} .map-note{font-size:12.5px;color:var(--d-muted);background:rgba(12,12,18,.6); border:1px solid var(--d-line);border-radius:100px;padding:5px 12px;backdrop-filter:blur(8px)} .map-scroll{font-size:12.5px;color:var(--d-muted);animation:nudge 2.4s ease-in-out infinite} @keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}} /* Leaflet 內建控制項配深色 */ .leaflet-container{background:var(--map-bg);font-family:var(--sans)} .leaflet-control-zoom a{ background:rgba(12,12,18,.72)!important;color:var(--d-ink)!important; border-color:var(--d-line)!important;backdrop-filter:blur(8px); } .leaflet-control-zoom a:hover{background:var(--accent)!important} .leaflet-control-attribution{ background:rgba(12,12,18,.6)!important;color:var(--d-muted)!important;font-size:10.5px; } .leaflet-control-attribution a{color:var(--d-soft)!important} .leaflet-bar{border:none!important;box-shadow:0 2px 12px rgba(0,0,0,.4)!important} /* ===== 發光 pin ===== */ .pin{position:relative;cursor:pointer} .pin .ring{ position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px; border:2px solid var(--accent-light);border-radius:50%;opacity:.85; animation:pulse 2.8s ease-out infinite; } .pin.provisional .ring{border-style:dashed} .pin .dot{ position:absolute;left:50%;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px; border-radius:50%;background:var(--accent-light); box-shadow:0 0 0 4px rgba(30,155,240,.28),0 0 22px 5px rgba(30,155,240,.65); } .pin .name{ position:absolute;left:34px;top:50%;transform:translateY(-50%);white-space:nowrap; color:#fff;font-weight:800;letter-spacing:-.02em;font-size:clamp(15px,1.5vw,22px); text-shadow:0 2px 14px rgba(0,0,0,.85),0 0 30px rgba(0,0,0,.6); } .pin .name small{display:block;font-size:12.5px;font-weight:var(--fw-med);color:var(--d-soft);letter-spacing:0} .pin.flip .name{left:auto;right:34px;text-align:right} .pin:hover .dot,.pin.active .dot{background:#fff;box-shadow:0 0 0 5px rgba(106,71,245,.4),0 0 26px 7px rgba(106,71,245,.8)} .pin.active .ring{border-color:#fff;opacity:1} /* 已建成的盤（tier＝已建成）：灰色、小一號、不脈動、不可點。 它們在地圖上的作用是「這一區已經有多少房子」的背景，不是要人點進去的商品。 視覺上必須一眼跟在售盤分得開——這是整張地圖的主要訊息（Edwind 2026-08-18）。 */ /* 項目密集的地區把在售 pin 的字級收一號——原尺寸是為三個 pin 的 Bangsar 訂的 */ .pin.dense .name{font-size:clamp(14px,1.15vw,18px)} .pin.dense .name small{font-size:11.5px} .pin.built{cursor:default} .pin.built .ring{animation:none;border-color:rgba(255,255,255,.34);width:30px;height:30px;margin:-15px 0 0 -15px;opacity:.6} .pin.built .dot{width:11px;height:11px;margin:-5.5px 0 0 -5.5px;background:rgba(255,255,255,.72);box-shadow:0 0 0 3px rgba(0,0,0,.35)} .pin.built .name{font-weight:700;font-size:clamp(12px,1vw,14px);color:rgba(255,255,255,.78);left:22px;text-shadow:0 1px 8px rgba(0,0,0,.9)} .pin.built.flip .name{left:auto;right:24px} .pin.built .name small{font-size:11px;color:rgba(255,255,255,.55);font-weight:var(--fw-med)} .pin.built:hover .dot{background:rgba(255,255,255,.72);box-shadow:0 0 0 3px rgba(0,0,0,.35)} /* 被別的標籤蓋到的：只留圓點，滑過去（或選中）才把字叫回來。 字疊在一起等於兩個都讀不到——寧可先藏一個。 ⚠️ 用 visibility 不用 opacity：opacity 帶轉場，而 declutter 會在每次 zoomend／moveend 重跑並重設 class，轉場被反覆重啟就永遠停在中間值—— 手機上實測是標籤根本沒消失（2026-08-18 踩到）。visibility 沒有中間態。 */ .pin .name.crowded{visibility:hidden;pointer-events:none} .pin:hover .name.crowded,.pin.active .name.crowded{visibility:visible;z-index:5} /* 地標讓路時只收字、圖示留著——圖示本身就有資訊（車站／商場／醫院） */ /* ===== 兩層項目的開關 ===== */ .tier-toggle{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .tiertog{ display:inline-flex;align-items:center;gap:8px;cursor:pointer; padding:7px 14px;border-radius:100px;font-size:13px;font-weight:var(--fw-med); background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff; backdrop-filter:blur(8px);transition:opacity .15s,background .15s,border-color .15s; } .tiertog b{font-weight:var(--fw-bold);opacity:.75;font-size:12px} .tiertog-dot{width:9px;height:9px;border-radius:50%;background:var(--accent-light);flex:none} .tiertog.built .tiertog-dot{background:rgba(255,255,255,.72)} .tiertog:hover{background:rgba(255,255,255,.2)} .tiertog.off{opacity:.42;background:transparent} .tiertog.off .tiertog-dot{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor} [data-map-theme="light"] .tiertog{ background:rgba(255,255,255,.82);border-color:var(--line);color:var(--text); box-shadow:0 2px 10px rgba(0,0,0,.08); } [data-map-theme="light"] .tiertog.built .tiertog-dot{background:var(--text-faint)} [data-map-theme="light"] .tiertog:hover{background:#fff} /* ===== 預約一對一：諮詢區的主按鈕 ===== */ .book-cta{ display:flex;align-items:center;justify-content:center;gap:10px; margin:26px 0 30px;padding:17px 26px;border-radius:var(--radius); background:var(--accent);color:#fff;text-decoration:none; font-size:var(--fs-h3);font-weight:720;letter-spacing:-.01em; box-shadow:0 10px 30px rgba(106,71,245,.26); transition:transform .18s,box-shadow .18s; } .book-cta:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(106,71,245,.34)} .book-cta span{font-size:.9em} /* 主按鈕之後，渠道列整體降一級——它是次出口，不該跟主按鈕搶 */ .book-cta + .ch-lead{margin-top:0;font-size:var(--fs-small);color:var(--text-dim)} .lmk-name.crowded{visibility:hidden} .lmk:hover .lmk-name.crowded{visibility:visible} .pin:hover .name,.pin.active .name{z-index:5} [data-map-theme="light"] .pin.built .dot{background:var(--text-faint);box-shadow:0 0 0 3px rgba(255,255,255,.7)} [data-map-theme="light"] .pin.built .ring{border-color:var(--text-faint);opacity:.4} [data-map-theme="light"] .pin.built .name{color:var(--text-dim)} @keyframes pulse{ 0%{transform:scale(.55);opacity:.9} 70%{transform:scale(1.5);opacity:0} 100%{transform:scale(1.5);opacity:0} } /* ===== 周邊決策錨點（地標）===== * 刻意比建案 pin 弱一階：小圓底＋細標籤、不發光、不會動、不可點。 * 它們的工作是給距離感當參照物，不是搶注意力——一旦跟建案 pin 一樣搶眼， * 使用者就得先分辨「哪個是要賣的」，那正是我們要避免的。 */ .lmk{position:relative;display:flex;align-items:center;gap:6px;transform:translate(-11px,-11px);white-space:nowrap} .lmk-ico{ width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center; background:var(--lmk-chip);border:1px solid var(--lmk-line);color:var(--lmk-ink); } .lmk-ico svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .lmk-name{ font-size:11.5px;font-weight:var(--fw-med);letter-spacing:-.01em;color:var(--lmk-ink); text-shadow:var(--lmk-halo);line-height:1.25; } .lmk-name small{display:block;font-size:10px;font-weight:var(--fw-body);opacity:.72;letter-spacing:0} /* 靠右的地標把標籤翻到左邊，不然「KL Sentral」會被地圖右緣切掉 */ .lmk.flip{flex-direction:row-reverse;transform:translate(calc(-100% + 11px),-11px)} .lmk.flip .lmk-name{text-align:right} /* 手機上把地標字縮小、砍掉附註那一行。 ⚠️ 試過整個隱藏只留圖示——不行：一個購物袋圖示不會告訴你那是 Mid Valley， 而「那是什麼」正是這些標記唯一的價值。寧可小，不要沒有。 */ @media (max-width:600px){ .lmk{gap:4px;transform:translate(-9px,-9px)} .lmk-ico{width:18px;height:18px} .lmk-ico svg{width:11px;height:11px} .lmk-name{font-size:10px} .lmk-name small{display:none} } /* ===== 點 pin 出的卡片（peek）===== */ .peek{ position:absolute;z-index:600;left:var(--gutter);bottom:clamp(58px,7vw,86px); width:min(360px,calc(100vw - var(--gutter) * 2)); background:var(--d-panel);border:1px solid var(--d-line);border-radius:18px; backdrop-filter:saturate(160%) blur(18px);box-shadow:0 20px 60px rgba(0,0,0,.5); color:var(--d-ink);padding:20px; opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .22s,transform .22s; } .peek.show{opacity:1;transform:none;pointer-events:auto} .peek h3{font-size:20px;font-weight:750;letter-spacing:-.02em;padding-right:26px} .peek .peek-price{margin-top:10px;font-size:22px;font-weight:var(--fw-black);letter-spacing:-.03em} .peek .peek-price.pending{font-size:17px;color:var(--status-warning)} .peek .peek-kind{font-size:12.5px;color:var(--d-muted);margin-top:2px} .peek dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px} .peek dt{font-size:11.5px;color:var(--d-muted)} .peek dd{font-size:13.5px;font-weight:var(--fw-med);margin-top:2px;line-height:1.35} .peek .peek-act{display:flex;gap:8px;margin-top:18px} .peek .peek-act > *{flex:1;text-align:center;border-radius:100px;padding:11px 12px; font-size:13.5px;font-weight:var(--fw-bold);text-decoration:none;cursor:pointer;border:1px solid var(--d-line); background:transparent;color:var(--d-ink);transition:.2s} .peek .peek-act .go{background:var(--accent);border-color:var(--accent)} .peek .peek-act > *:hover{background:var(--accent);border-color:var(--accent)} .peek-close{position:absolute;right:12px;top:12px;width:28px;height:28px;border-radius:50%; border:1px solid var(--d-line);background:transparent;color:var(--d-soft);cursor:pointer; font-size:15px;line-height:1;display:grid;place-items:center} .peek-close:hover{background:var(--bad);border-color:var(--bad);color:#fff} /* ============================================================================= * 淺色底圖主題（Voyager／Positron） * ----------------------------------------------------------------------------- * Edwind 2026-08-12：「現在是藍黑色，感覺上有點壓迫感」「改到比較像 Google Map * 那種 style」。**底色一動就要重做對比**——白色大標、上下暗角、發光 pin、深色 * peek 卡片全都是為深色底設計的，直接換 url 會整組壞掉。所以整包收在這裡， * 由 切換（值來自 config.js 各底圖的 theme 欄位）。 * * 品牌識別改由**建案 pin 的顏色**承擔，不再染整張地圖： * 地圖是工具不是海報，染色讓它變成海報，代價就是 Edwind 感覺到的壓迫感。 * ========================================================================== */ [data-map-theme="light"]{ --map-bg:#E8E9EC; --lmk-chip:rgba(255,255,255,.94); --lmk-line:rgba(0,0,0,.14); --lmk-ink:#4A4A55; --lmk-halo:0 1px 6px rgba(255,255,255,.95),0 0 12px rgba(255,255,255,.8); } /* 品牌染色層整個關掉——那層紫青漸層正是「藍黑色」的來源 */ [data-map-theme="light"] .map-tint{display:none} /* 暗角翻成亮角：作用不變（給疊在上面的字撐對比），只是方向反過來 */ [data-map-theme="light"] .map-vignette{ background: linear-gradient(to bottom,rgba(255,255,255,.92) 0%,rgba(255,255,255,.55) 16%,rgba(255,255,255,0) 34%), linear-gradient(to top,rgba(255,255,255,.78) 0%,rgba(255,255,255,0) 18%); } /* 標題與說明字改成深色，光暈也跟著翻白 */ [data-map-theme="light"] .map-title{color:var(--text-primary);text-shadow:0 1px 12px rgba(255,255,255,.9)} [data-map-theme="light"] .map-title h1 .en{color:var(--text-faint)} [data-map-theme="light"] .map-title p{color:var(--text-dim)} [data-map-theme="light"] .map-chips .chip{ background:rgba(255,255,255,.9);border-color:var(--line);color:var(--text-secondary)} [data-map-theme="light"] .map-btn{ background:rgba(255,255,255,.92);border-color:var(--line);color:var(--text-primary); box-shadow:0 2px 10px rgba(10,10,20,.08)} [data-map-theme="light"] .map-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff} [data-map-theme="light"] .map-note{ background:rgba(255,255,255,.9);border-color:var(--line);color:var(--text-dim)} [data-map-theme="light"] .map-scroll{color:var(--text-faint)} /* Leaflet 內建控制項 */ [data-map-theme="light"] .leaflet-control-zoom a{ background:rgba(255,255,255,.94)!important;color:var(--text-primary)!important; border-color:var(--line)!important} [data-map-theme="light"] .leaflet-control-zoom a:hover{background:var(--accent)!important;color:#fff!important} [data-map-theme="light"] .leaflet-control-attribution{ background:rgba(255,255,255,.78)!important;color:var(--text-faint)!important} [data-map-theme="light"] .leaflet-control-attribution a{color:var(--text-dim)!important} [data-map-theme="light"] .leaflet-bar{box-shadow:0 2px 12px rgba(10,10,20,.16)!important} /* pin：發光在淺色底上完全不成立（光暈需要暗背景才看得見）。 改成實心圓＋白外圈＋投影——同樣醒目，但靠的是對比不是發光。 */ [data-map-theme="light"] .pin .dot{ background:var(--accent); box-shadow:0 0 0 3.5px #fff,0 2px 10px rgba(10,10,20,.4)} [data-map-theme="light"] .pin .ring{border-color:var(--accent);opacity:.5} [data-map-theme="light"] .pin:hover .dot,[data-map-theme="light"] .pin.active .dot{ background:#fff;box-shadow:0 0 0 4px var(--accent),0 3px 14px rgba(106,71,245,.5)} [data-map-theme="light"] .pin.active .ring{border-color:var(--accent);opacity:1} [data-map-theme="light"] .pin .name{ color:var(--text-primary); text-shadow:0 1px 6px rgba(255,255,255,.95),0 0 16px rgba(255,255,255,.9)} [data-map-theme="light"] .pin .name small{color:var(--text-dim)} @media (max-width:768px){ /* 手機上標籤加底色墊著（深色主題本來就有這條）。 ⚠️ 淺色主題這裡**不用 backdrop-filter**——理由同 .modal 那條：那個屬性會讓 合成器出問題，實測會畫錯。改用接近不透明的白底，效果一樣夠。 */ [data-map-theme="light"] .pin .name{ background:rgba(255,255,255,.9);color:var(--text-primary);backdrop-filter:none; box-shadow:0 1px 6px rgba(10,10,20,.14)} } /* peek 卡片：深色玻璃 → 白卡 */ [data-map-theme="light"] .peek{ background:rgba(255,255,255,.96);border-color:var(--line);color:var(--text-primary); box-shadow:0 20px 60px rgba(10,10,20,.22)} [data-map-theme="light"] .peek .peek-kind{color:var(--text-faint)} [data-map-theme="light"] .peek dt{color:var(--text-faint)} [data-map-theme="light"] .peek .peek-act > *{border-color:var(--line);color:var(--text-primary)} [data-map-theme="light"] .peek .peek-act .go{background:var(--accent);border-color:var(--accent);color:#fff} [data-map-theme="light"] .peek .peek-act > *:hover{background:var(--accent);border-color:var(--accent);color:#fff} [data-map-theme="light"] .peek-close{border-color:var(--line);color:var(--text-dim)} /* 項目頁的小地圖框 */ [data-map-theme="light"] .minimap-wrap{background:var(--map-bg)} /* ===== 地區索引（站台首頁）===== */ .areas{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:var(--space-block)} .area-card{ display:block;text-decoration:none;background:var(--bg-card);border:1px solid var(--line); border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-card); border-left:3px solid transparent;transition:transform .22s,border-color .22s; } .area-card:hover{transform:translateY(-4px);border-left-color:var(--accent)} .area-card h3{font-size:var(--fs-h3);font-weight:720;letter-spacing:-.02em} .area-card .en{color:var(--text-faint);font-weight:var(--fw-med)} .area-card p{margin-top:10px;font-size:var(--fs-small);color:var(--text-dim)} .area-card[aria-disabled="true"]{opacity:.5;pointer-events:none} /* ===== 精簡清單（地區頁）—— 一盤一行，項目再多也不會變成一面牆 ===== */ .plist{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; background:var(--bg-card);box-shadow:var(--shadow-card)} .prow{ display:grid;grid-template-columns:minmax(0,2.2fr) repeat(3,minmax(0,1fr)) 28px; align-items:center;gap:16px;padding:18px clamp(18px,2.2vw,26px); border-bottom:1px solid var(--line-soft);text-decoration:none;color:inherit; border-left:3px solid transparent;transition:background .18s,border-color .18s; } .prow:last-child{border-bottom:none} .prow:hover{background:var(--bg-section-b);border-left-color:var(--accent)} .prow-main{min-width:0} .prow-name{display:block;font-size:var(--fs-h3);font-weight:720;letter-spacing:-.02em;line-height:1.25} .prow-name .cardtag{margin:0 0 0 8px;font-style:normal;vertical-align:3px;padding:3px 9px;font-size:12.5px} .prow-sub{display:block;margin-top:6px;font-size:var(--fs-small);color:var(--text-dim)} .prow-cell{min-width:0} .prow-cell b{display:block;font-size:var(--fs-small);font-weight:var(--fw-bold);letter-spacing:-.01em} .prow-cell i{display:block;margin-top:3px;font-size:12px;font-style:normal;color:var(--text-faint)} .prow-cell .dim{color:var(--status-warning);font-weight:var(--fw-med)} .prow-go{font-size:19px;color:var(--text-faint);text-align:right} .prow:hover .prow-go{color:var(--accent)} /* 清單分兩區：興建中在上（可點進獨立頁）、已交付在下（只有戶數，不可點） */ .plist-group + .plist-group{margin-top:44px} .plist-head{ margin:0 0 14px;font-size:var(--fs-small);font-weight:var(--fw-bold); letter-spacing:.04em;color:var(--text-dim); } .plist-head.built{color:var(--text-faint)} .prow-built,.prow-nopage{cursor:default} .prow-built{grid-template-columns:minmax(0,2.2fr) repeat(3,minmax(0,1fr));color:var(--text-dim)} .prow-built .prow-name{font-weight:640;font-size:var(--fs-body)} .prow-built:hover{background:transparent;border-left-color:var(--line)} .prow-nopage:hover{border-left-color:var(--line)} @media (min-width:769px){.prow-built,.prow-nopage{cursor:pointer}} .list-foot{margin-top:18px;font-size:var(--fs-small);color:var(--text-dim)} .list-foot a{color:var(--accent);font-weight:var(--fw-med)} /* ===== 項目頁 ===== */ .crumb{font-size:var(--fs-small);color:var(--text-faint);margin-bottom:18px} .crumb a{color:var(--text-dim);text-decoration:none} .crumb a:hover{color:var(--accent)} .ph1{font-size:clamp(30px,4vw,46px);font-weight:780;letter-spacing:-.03em;line-height:var(--lh-snug)} .ph-lead{margin-top:14px;font-size:var(--fs-lead);color:var(--text-secondary);max-width:var(--measure)} .project-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,3vw,44px); margin-top:var(--space-block);align-items:start} .project-side{position:sticky;top:84px;display:grid;gap:18px} .minimap-wrap{position:relative;height:220px;border-radius:var(--radius);overflow:hidden; background:var(--map-bg);border:1px solid var(--line);z-index:0;isolation:isolate} .minimap-wrap #map{position:absolute;inset:0} .side-cta{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius); padding:22px;box-shadow:var(--shadow-card)} .side-cta h3{font-size:var(--fs-h3);font-weight:720;letter-spacing:-.02em} .side-cta .actions{margin-top:16px;flex-direction:column} .side-cta .actions > *{width:100%} /* 側欄空間窄：渠道列縮一階，圖示與文字都不動，只收 padding 與字級 */ .side-cta .chs{margin-top:12px;gap:6px} .side-cta .ch{padding:11px 13px;font-size:var(--fs-small)} .side-cta .ch-hint{margin-top:12px} .side-links{margin-top:16px;font-size:var(--fs-small);line-height:1.9} .side-links a{color:var(--accent);font-weight:var(--fw-med)} /* 規格內容（項目頁） * ⚠️ 選擇器打 h2 不是 h4（2026-08-14 SEO 審計 P2-9）：標籤代表**階**、字級歸 CSS， * 所以這裡刻意把 h2 壓成小灰標——視覺一個像素都沒變，變的只是文件結構。*/ #projectHost h2{font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--text-faint); letter-spacing:.04em;margin:30px 0 12px} .unit-tbl{width:100%;border-collapse:collapse;font-size:13.5px} .unit-tbl th,.unit-tbl td{padding:9px 10px;text-align:left; border-bottom:1px solid var(--line-soft);white-space:nowrap} .unit-tbl thead th{color:var(--text-faint);font-weight:var(--fw-med);font-size:12.5px} .detail-scroll-x{overflow-x:auto} /* ===== 勾選要比哪幾盤（對比頁）===== */ .picker{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:20px} .picker-label{font-size:var(--fs-small);color:var(--text-faint);margin-right:4px} .pick{display:inline-flex;align-items:center;gap:7px;cursor:pointer; font-size:var(--fs-small);font-weight:var(--fw-med); padding:8px 14px;border-radius:100px;border:1px solid var(--line);background:var(--bg-card); transition:.18s;user-select:none} .pick:hover{border-color:var(--accent)} .pick.on{background:var(--badge-bg);border-color:var(--badge-border);color:var(--accent)} .pick input{accent-color:var(--accent);margin:0} /* ===== 共用小件 ===== */ .cardtag{ display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-small);font-weight:var(--fw-med); padding:5px 11px;border-radius:100px;background:var(--badge-bg);border:1px solid var(--badge-border); color:var(--accent);margin-bottom:12px; } .cardtag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none} .cardtag.warn{background:rgba(231,76,60,.08);border-color:rgba(231,76,60,.24);color:var(--bad)} .cardtag.good{background:rgba(20,194,154,.09);border-color:rgba(20,194,154,.26);color:#0E8E71} .price{margin:18px 0 4px;font-size:clamp(24px,2.6vw,32px);font-weight:var(--fw-black);letter-spacing:-.03em;white-space:nowrap} .price small{font-size:var(--fs-small);font-weight:var(--fw-med);color:var(--text-dim);letter-spacing:0} .price.pending{font-size:var(--fs-h3);color:var(--status-warning)} .price-kind{font-size:var(--fs-small);color:var(--text-dim)} .kv{margin-top:20px;border-top:1px solid var(--line-soft)} .kv div{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:var(--fs-small)} .kv dt{flex:0 0 88px;color:var(--text-faint)} .kv dd{flex:1;color:var(--text-secondary);line-height:var(--lh-body)} .src{margin-top:12px;font-size:12.5px;color:var(--text-faint);line-height:1.45} ul.plain{list-style:none;padding:0} ul.plain li{padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:var(--fs-small)} ul.plain li:last-child{border-bottom:none} /* ===== 比較表 ===== */ .tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-card); box-shadow:var(--shadow-card)} table.cmp{border-collapse:collapse;width:100%;min-width:720px;font-size:var(--fs-small)} table.cmp th,table.cmp td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)} table.cmp thead th{ position:sticky;top:0;background:var(--bg-card);z-index:1; font-size:var(--fs-body);font-weight:720;letter-spacing:-.02em;border-bottom:1px solid var(--line); } table.cmp thead th:first-child{color:var(--text-faint);font-size:var(--fs-small);font-weight:var(--fw-med)} table.cmp tbody th{font-weight:var(--fw-med);color:var(--text-faint);white-space:nowrap;width:110px} table.cmp tbody tr:last-child td,table.cmp tbody tr:last-child th{border-bottom:none} table.cmp tr.row-tension th,table.cmp tr.row-tension td{background:var(--bg-section-b);vertical-align:top} /* ⚠️ 字級跟表格其他列一致（2026-08-14 Edwind：原本放大到 --fs-body「違和感非常重」）。 這一列的份量靠底色與每欄自己的 CTA 撐，不靠字級。 */ table.cmp tr.row-tension td{font-size:var(--fs-small);line-height:var(--lh-body);color:var(--text-primary)} /* 按鈕置中（Edwind 2026-08-14）：取捨句維持靠左好讀，按鈕單獨置中—— 跟問句框、缺口格、表尾 CTA 同一套語言。display:table 讓它收縮到內容寬 再吃 margin:auto。 */ table.cmp tr.row-tension td .inline-cta.big{margin:12px auto 0;display:table} /* 表格下的總 CTA：想深入了解「這幾盤的對比」本身 */ .cmp-cta{ margin:26px 0 0;padding:20px 18px;border-radius:16px;text-align:center; background:rgba(106,71,245,.05);border:1px solid var(--line-soft); } .cmp-cta p{ margin:0 auto;font-size:var(--fs-small);font-weight:var(--fw-med); color:var(--text-primary);line-height:var(--lh-body);max-width:62ch; } .cmp-cta .inline-cta.big{margin-top:12px} .tension-empty{color:var(--text-faint);font-weight:var(--fw-body);font-size:var(--fs-small)} /* ===== CTA ===== */ /* 光暈用 box-shadow，不用 ::before + z-index:-1。 ⚠️ 舊做法有兩個 bug（2026-08-08 Edwind 回報後查出）： ① 淡入時 .reveal 的 opacity<1／transform 會讓卡片自己變成堆疊脈絡， z-index:-1 的偽元素就從「背景後面」跳到「背景上面」→ 整張卡閃一下紫色； ② 動畫結束後偽元素退到卡片背景後面，但也退到了 section 的不透明背景後面 → 光暈根本看不見。也就是說那個效果只在「出 bug 的那一瞬間」看得到。 box-shadow 畫在 border-box 外、背景之後，不吃堆疊脈絡，兩個問題一起沒了。 */ .cta-card{ background:var(--bg-card);border:1px solid var(--badge-border);border-radius:var(--radius); padding:clamp(26px,3.4vw,48px);position:relative; box-shadow:0 0 0 5px var(--accent-halo), 0 22px 54px -26px var(--accent-glow), var(--shadow-card); } .cta-card h2{font-size:var(--fs-h3);font-weight:780;line-height:var(--lh-snug);letter-spacing:-.02em} .cta-card .prose{margin-top:var(--space-head);color:var(--text-secondary); text-align:justify;text-justify:inter-character} .cta-card .prose p + p{margin-top:var(--space-stack)} /* 四個事實：改成「圖示＋文字」，不再用小方框——方框看起來像表單欄位， 圖示才讓人一眼知道在講哪一件事。兩欄，值比較長也不會擠成一團。 */ .facts{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:clamp(24px,3vw,32px)} .facts > div{display:flex;align-items:flex-start;gap:14px} .fact-ico{ flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center; background:var(--badge-bg);border:1px solid var(--badge-border);color:var(--accent); transition:background .2s,color .2s; } .fact-ico svg{ width:23px;height:23px;fill:none;stroke:currentColor; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; } .cta-card:hover .fact-ico{background:var(--accent);color:#fff} .fact-txt{min-width:0} .facts dt{font-size:12.5px;color:var(--text-faint);letter-spacing:.02em} .facts dd{font-size:var(--fs-small);font-weight:var(--fw-med);margin-top:4px;line-height:1.45; color:var(--text-primary)} .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px} .btn{ display:inline-block;text-align:center;text-decoration:none; padding:15px 26px;border-radius:100px;font-weight:var(--fw-bold);font-size:var(--fs-body); letter-spacing:-.01em;transition:transform .2s,box-shadow .2s,background .2s; } .btn-primary{background:var(--accent);color:#fff;animation:breathe 3s ease-in-out infinite} .btn-primary:hover{animation:none;box-shadow:0 10px 30px rgba(106,71,245,.34);transform:translateY(-2px)} .btn-ghost{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--line)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} .btn[aria-disabled="true"]{opacity:.42;pointer-events:none} @keyframes breathe{ 0%,100%{box-shadow:0 0 0 0 rgba(106,71,245,.34)} 50%{box-shadow:0 0 0 14px rgba(106,71,245,0)} } .trust{margin-top:14px;font-size:var(--fs-small);color:var(--text-faint)} /* ===== 外觀示意圖（項目頁頂端）===== * 只有一張、而且只放外觀。caption 一定要標「示意圖」——那是誠信， * 也是 Ryan 跟一般代理的差別；效果圖冒充實景是這個行業最省事的謊。 */ .phero{margin-bottom:18px} .pshot{ display:block;width:100%;padding:0;border:none;cursor:zoom-in;line-height:0;position:relative; border-radius:14px;overflow:hidden;background:var(--bg-section-b); } .pshot img{width:100%;height:100%;display:block;object-fit:cover} .phero-main .pshot img{aspect-ratio:1600/1234} /* 說明壓在圖上，不佔額外高度；由下往上的暗角讓白字在任何底圖上都讀得到 */ .pshot-cap{ position:absolute;left:0;right:0;bottom:0;padding:18px 10px 7px; font-size:11.5px;line-height:1.3;color:#fff;text-align:left; background:linear-gradient(to top,rgba(8,8,12,.72),rgba(8,8,12,0)); } .phero-main .pshot-cap{font-size:13px;padding:26px 14px 11px} .pshots{ margin-top:8px;display:grid;gap:8px; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); } .pshots .pshot{border-radius:10px} .pshots .pshot img{aspect-ratio:4/3} .phero figcaption{ margin-top:8px;font-size:12.5px;color:var(--text-faint);line-height:1.45; } /* 搬到內文區塊的圖組（設施圖、特別戶型露台）。註腳跟著圖走——圖離開頁首之後， * 「示意圖」那句聲明也要跟過去，不然搬走的圖就沒有聲明了。*/ .pshots-block{margin:14px 0 0} .pshots-block figcaption{ margin-top:8px;font-size:12.5px;color:var(--text-faint);line-height:1.45; } /* ===== 區塊文案 section_copy（2026-08-14）===== * Edwind：資料頁不能只有硬事實，每一塊要有「為什麼該讀」＋一個出口。 * 層次：sec-h（標題／給角度）→ sec-lead（一句切入）→ sec-desc（怎麼讀這張表） * → 原本的資料 → sec-ask（缺口型問句＋就地出口）。 * ⚠️ 各層不得複述下一層已經印出的數字（正典 3.8：相鄰層各答各的問題）。*/ #projectHost h2.sec-h{ font-size:var(--fs-h3);font-weight:var(--fw-bold);color:var(--text-primary); letter-spacing:0;margin:44px 0 10px;line-height:var(--lh-snug); } .sec-lead{ margin:0 0 10px;font-size:var(--fs-body);font-weight:var(--fw-med); color:var(--text-primary);line-height:var(--lh-body);max-width:var(--measure); } .sec-desc{ margin:0 0 16px;font-size:var(--fs-small);color:var(--text-secondary); line-height:var(--lh-body);max-width:var(--measure); } /* ===== 換匯（2026-08-15）===== * 幣別列刻意做得比價格輕：主角是 RM 那個大數字，這一排是輔助工具。 * 換算結果不是第二個報價，所以不給它價格的字級與字重——它只比註腳大一點。 * ⚠️ 版面上要一眼看出那是「換算」不是「另一個 offer」（雷區：頁面只出一組價格）。*/ .fx{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px} .fx-lb{font-size:12.5px;color:var(--text-faint)} /* 箭頭自己畫（appearance:none 之後原生箭頭會消失）。用 span 包住是為了 把箭頭疊在 select 上，而不是塞進 select 裡面——那在各家瀏覽器長得都不一樣。 */ .fx-sel-wrap{position:relative;display:inline-flex;align-items:center} .fx-sel-wrap::after{ content:"";position:absolute;right:11px;pointer-events:none; width:7px;height:7px;border-right:1.6px solid var(--text-faint); border-bottom:1.6px solid var(--text-faint);transform:translateY(-2px) rotate(45deg); } .fx-sel{ font:inherit;font-size:13px;font-weight:var(--fw-med);color:var(--text-primary); background:var(--bg-card);border:1px solid var(--line);border-radius:9px; padding:6px 30px 6px 11px;cursor:pointer; -webkit-appearance:none;appearance:none; transition:border-color var(--dur); } .fx-sel:hover{border-color:var(--badge-border)} .fx-out{ margin:9px 0 0;font-size:var(--fs-small);font-weight:var(--fw-med); color:var(--text-secondary);line-height:1.5; } .fx-src{display:block;margin-top:2px;font-size:11.5px;font-weight:var(--fw-body);color:var(--text-faint)} /* ===== 常見問題（SEO/AEO 第二波，2026-08-14）===== * 這一區是頁面唯一「答案給滿」的地方，版型的工作是讓人**掃得到自己那一題**： * 問句深、粗、獨佔一行；答案淺一階、鎖版寬。分隔線讓八題不糊成一片。 * ⚠️ 不做摺疊，理由見 map.js renderFaq() 的註解（摺疊會讓抓取器讀不到答案）。*/ .faq{margin:6px 0 0;border-top:1px solid var(--line-soft);counter-reset:faq} .faq-item{padding:18px 0;border-bottom:1px solid var(--line-soft);counter-increment:faq} .faq-q{ margin:0 0 8px;font-size:var(--fs-body);font-weight:var(--fw-bold); color:var(--text-primary);line-height:var(--lh-snug);max-width:var(--measure); } .faq-a{ margin:0;font-size:var(--fs-small);color:var(--text-secondary); line-height:var(--lh-body);max-width:var(--measure); } /* Q1／A1 標記（Edwind 2026-08-14：「讓觀眾比較理解什麼是 Question、什麼是 Answer」）。 * ⚠️ 用 ::before 產生，**不寫進文字內容**：`.faq-a` 的文字會原封不動進 FAQPage schema， * 標記混進去的話 AI 引擎抓走的答案就變成「A1 Parkside Residences 預計⋯⋯」， * 訪客複製出去也會黏著一個 A1。偽元素不算 innerText，兩邊都乾淨。 * ⚠️ 編號用 CSS counter 不用手填——題目增刪時不必回頭改號碼。 * 兩欄格線讓 Q 與 A 的標記對齊、內文左緣也對齊；baseline 對齊是因為 * 問句 18px、答案 14px，用頂端對齊標記會浮起來。 */ .faq-q,.faq-a{display:grid;grid-template-columns:30px 1fr;gap:0 8px;align-items:baseline} .faq-q::before,.faq-a::before{ font-size:12px;font-weight:var(--fw-bold);letter-spacing:.02em; font-variant-numeric:tabular-nums; } .faq-q::before{content:"Q" counter(faq);color:var(--accent)} .faq-a::before{content:"A" counter(faq);color:var(--text-faint)} /* 答案之後那一句缺口（Edwind 2026-08-14：「在隔壁放一個小小的字」）。 * 刻意比答案再小一階、再淡一階：它不是答案的一部分，是答案講完之後的下一句話。 * 那顆 .inline-cta 本身是品牌紫，在這個淡底上自己會跳出來，不需要再加重。 * ⚠️ 只有部分題目有這一欄——七個區塊已經打過的鉤子不重複掛（正典 3.8）。*/ .faq-cta{ /* 左邊 38px＝Q／A 標記欄（30px）＋ 欄距（8px）：這一句是接在答案後面的， 左緣要跟答案文字對齊，不能自己跑回最左邊。 */ margin:8px 0 0 38px;font-size:13px;color:var(--text-dim); line-height:1.55;max-width:var(--measure); } /* 合併後的戶型區塊裡，「完整戶型表」是子標，不能跟區塊標題同一階 */ .sec-sub{ margin:26px 0 10px;font-size:12.5px;font-weight:var(--fw-med); color:var(--text-faint);letter-spacing:.04em; } /* 問句框：整頁六到七個，要一眼認得出「這裡在問我」，但不能重到變成廣告。 * ⚠️ 置中（Edwind 2026-08-14 指定，對齊戶型圖缺口格那張卡的樣子）。 * 置中的代價是**長句會不好讀**（design-rules 那條「置中長文不好讀」仍然成立）， * 所以這個框裡的句子必須短。版寬鎖 44ch，句子一長就會自己爆出兩三行， * 那就是句子該改短的訊號，不是把框放寬。*/ .sec-ask{ margin:18px 0 0;padding:20px 18px;border-radius:16px; background:rgba(106,71,245,.05);border:1px solid var(--line-soft); text-align:center; } .sec-ask p{ margin:0 auto;font-size:var(--fs-small);font-weight:var(--fw-body); color:var(--text-secondary);line-height:var(--lh-body);max-width:62ch; } /* 層次感靠字重拉開：**標粗的那半句**深、粗；其餘淺、細（Edwind 要的 bold／非 bold 對比）*/ .sec-ask p strong{font-weight:var(--fw-bold);color:var(--text-primary)} /* 問句與按鈕之間那一小句：比問句小一階、淺一階，不能跟問句搶 */ .sec-ask .ask-note{ margin:8px auto 0;font-size:13px;font-weight:var(--fw-body); color:var(--text-faint);line-height:var(--lh-body);max-width:62ch; } .sec-ask .ask-note strong{font-weight:var(--fw-med);color:var(--text-secondary)} .sec-ask .inline-cta.big{margin-top:14px} /* ===== 價格註腳 ＋ 內文行內 CTA ===== * 「聯絡 Ryan」四個字本身要能點。讀到那句被勾起來的人不該還要自己去找按鈕—— * 中間每多一步就掉一批人。用