標籤，第一個

是 hero，會整條落空。用相鄰選擇器鎖「hero 後面那個內容區」。 */ body[data-center]:has(.page-bg) .hero + .section{padding-top:20px} /* 壓在插畫上的文字要加深。實測（工業頁，取文字框內最暗像素當最壞情況）：說明用 --text-soft #6B615A → 3.32:1，未達 AA 4.5:1 H1 用 --text #3A332E → 5.66:1，及格但不寬裕 ⚠️ 不可改用 --accent-ink：它是為「純淺底」設計的，而這裡底下是同色系插畫，工業頁只剩 2.58:1，反而更糟。要高對比只能往近黑走。 */ body[data-center]:has(.page-bg) .hero h1{color:#241F1B} body[data-center]:has(.page-bg) .hero__lead{color:var(--text)} body[data-center]:has(.page-bg) .breadcrumb{color:var(--text)} body[data-center]:has(.page-bg) .breadcrumb a{color:#241F1B;text-decoration:underline;text-underline-offset:3px} /* ══════════════════════════════════════════════════════════════════════ 中心頁 hero 反白版（2026-08-31 評估後不採用·保留備用·目前不生效）曾於 2026-08-31 全站開啟後撤回：對比不是問題（現行淺色版已 6.75–14.96），差別在視覺份量——反白會把八張淡插畫變成深色 banner，網站調性由輕盈轉厚重，與 §4.5「淺色漸層取代深色塊＝有朝氣」的定調相左。故改回淺色版。要再啟用：在該頁加 data-hero="invert"（逐頁可開，不必全有全無），並同步 build/scaffold.py 的樣板。本區塊留著不生效，刪掉會失去這份量測。 ---------------------------------------------------------------------- 為什麼不是「單純把字轉白」：八張插畫平均亮度 L* 88–96，白字直接壓上去對比只有 1.1–1.3:1，完全不可讀。要讓白字達標，底必須壓到亮度 ≤0.18。既然一定要壓深，就不用中性黑，改用**該中心識別色的深化版**當遮罩—— 插畫仍以底紋透出，同時把「色彩反差」真正做出來（這是純黑做不到的）。深化規則：識別色轉 HSV，明度壓到 .22（上緣）／.34（下緣），彩度 +.18；知識庫是灰階，不硬加彩度，否則會變成假的藍灰。實測白字對比（取字身範圍內最亮像素當最壞情況）：H1 7.18–12.32、說明 6.91–11.91、麵包屑 8.42–12.91，八頁全過 AAA。 ⚠️ 標頭是 rgba(255,252,248,.94)，壓在遮罩上只透 6%，logo 與導覽不受影響；不要為了反白去改標頭底色。 ══════════════════════════════════════════════════════════════════════ */ body[data-center="industrial"] {--accent-deep:#382704;--accent-mid:#573D07} body[data-center="land"] {--accent-deep:#19380D;--accent-mid:#275715} body[data-center="store"] {--accent-deep:#380F06;--accent-mid:#57180A} body[data-center="residential"] {--accent-deep:#38121F;--accent-mid:#571C2F} body[data-center="siting"] {--accent-deep:#0B2738;--accent-mid:#113C57} body[data-center="demographics"]{--accent-deep:#210C38;--accent-mid:#321357} body[data-center="market"] {--accent-deep:#0B382B;--accent-mid:#115743} body[data-center="knowledge"] {--accent-deep:#353638;--accent-mid:#515357} body[data-hero="invert"][data-center]:has(.page-bg) .page-bg::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,var(--accent-deep) 0%,var(--accent-mid) 100%); opacity:.88; } /* hero 自己那層淺色薄紗要關掉，否則會把遮罩again打亮 */ body[data-hero="invert"][data-center]:has(.page-bg) .hero{background:none} body[data-hero="invert"][data-center]:has(.page-bg) .hero h1{color:#FFFFFF} body[data-hero="invert"][data-center]:has(.page-bg) .hero__lead{color:rgba(255,255,255,.92)} body[data-hero="invert"][data-center]:has(.page-bg) .breadcrumb{color:rgba(255,255,255,.82)} body[data-hero="invert"][data-center]:has(.page-bg) .breadcrumb a{color:#FFFFFF} @media (prefers-reduced-motion:reduce){ .page-bg{position:absolute} } /* 內容一律墊高一層，壓在背景之上 */ main,.cta-band,.site-footer{position:relative;z-index:1} /* ⚠️ 標頭不可寫進上面那組——position:relative 會蓋掉它的 sticky，捲動時就不吸頂了。它本來就有 position:sticky + z-index:50，只要不被覆寫即可壓在背景之上。 */ .line-fab{z-index:60} /* 各區塊改半透明，讓背景在捲動時透出來；數值已驗過內文對比仍 ≥7:1 */ body{background:transparent} html{background:var(--bg)} .section{background:rgba(255,252,248,.90)} /* --bg 的 90% 透明版 */ /* hero：文字置中靠下，深色遮罩只在 hero 內，讓照片在此完整露出 */ .hero--photo{position:relative;overflow:hidden;min-height:540px;background:none; display:flex;align-items:flex-end;padding:44px 0 92px} .hero--photo .wrap{width:100%;text-align:center;position:relative;z-index:3} .hero--photo .hero__title{justify-content:center} .hero--photo .hero__lead{margin-left:auto;margin-right:auto} .hero--photo .hero__actions{justify-content:center} /* 霧化接合：hero 下緣模糊漸層，柔和融進下方區塊，不留硬邊 */ .hero--photo::before{ content:"";position:absolute;left:0;right:0;bottom:0;height:110px;z-index:2; pointer-events:none; background:linear-gradient(180deg,rgba(255,252,248,0) 0%,rgba(255,252,248,.50) 55%,rgba(255,252,248,.90) 100%); backdrop-filter:blur(7px); -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 45%,#000 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 45%,#000 100%); } .hero--photo .hero__eyebrow{color:rgba(255,255,255,.88);letter-spacing:.24em} .hero--photo .hero__lead{color:rgba(255,255,255,.93)} .hero--photo .btn--ghost{ background:rgba(255,255,255,.16);color:#fff; border-color:rgba(255,255,255,.60);backdrop-filter:blur(3px); } .hero--photo .btn--ghost:hover{background:rgba(255,255,255,.28);border-color:#fff;color:#fff} .hero--photo::after{ /* 遮罩：手機直向，下濃上淡 */ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; /* 手機遮罩：實算白字在最亮的稻田上、遮罩 0.40 時仍有 6.0:1（門檻 4.5），故大幅減淡讓綠田透出來，只保留足夠壓住文字的量。 */ background:linear-gradient(180deg, rgba(24,20,17,0) 0%, rgba(24,20,17,0) 16%, rgba(24,20,17,.10) 26%, rgba(24,20,17,.34) 38%, rgba(24,20,17,.48) 52%, rgba(24,20,17,.54) 74%, rgba(24,20,17,.56) 100%); } .hero__eyebrow{ font-size:13px;font-weight:600;letter-spacing:.22em; color:var(--text-soft);margin:0 0 14px; } /* 入口級大標：字要大、字要少。以 flex 排列，讓它「以詞為單位」換行——絕不可在詞中間斷成「工業地／產」。 */ .hero__title{ display:flex;flex-wrap:wrap;gap:.06em .46em; font-size:34px;line-height:1.25;letter-spacing:.02em; margin:0 0 16px;font-weight:800; } .hero__title em{font-style:normal;color:var(--action);white-space:nowrap} /* 大標強調用橘·合規 */ .hero__lead{font-size:16px;color:var(--text-soft);max-width:32em;margin:0 0 28px} .hero__actions{display:flex;flex-wrap:wrap;gap:12px} /* ---------- 6. 共用元件（§4.3） ------------------------------------------ */ /* 答案框：文章首段 60–80 字直答容器（AEO 可提取段落） */ .answer-first{ background:var(--surface);border-left:4px solid var(--accent); border-radius:0 var(--radius) var(--radius) 0; padding:16px 18px;margin:0 0 24px;font-size:17px; } .answer-first > :last-child{margin-bottom:0} /* 資料卡：數值＋資料日期＋來源一行（GEO 引用友善） */ .data-card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:18px;box-shadow:var(--shadow); } .data-card__value{font-size:30px;font-weight:800;line-height:1.2;color:var(--accent-ink)} .data-card__label{font-size:14px;color:var(--text-soft);margin-top:2px} .data-card__meta{font-size:13px;color:var(--text-soft);margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)} /* 來源列：公開案例必掛來源＋查詢日＋限制＋非品牌成交（§9 紅線） */ .src-line{ font-size:13px;color:var(--text-soft);line-height:1.6; border-top:1px solid var(--line);padding-top:10px;margin-top:16px; } .src-line strong{color:var(--text);font-weight:600} /* 中心色標籤：淺底＋深字＋細框。原本是白字壓色塊，但實測識別色對白只有 3.15–4.21，13px 小字不合 WCAG；改為 ink 文字（≥4.5:1）配 hero 淺底，任何字級皆合規，也更貼近淺色主題。 */ .tag{ display:inline-block;padding:3px 10px;border-radius:var(--radius-pill); background:var(--accent-bg);color:var(--accent-ink);border:1px solid var(--accent); font-size:13px;font-weight:700;line-height:1.6; } /* ---- 入口層級：主力（重）→ 資料工具（中）→ 其他（輕） ---- */ .section__title{font-size:15px;font-weight:700;letter-spacing:.14em;color:var(--text-soft);margin:0 0 18px} /* 主力方塊：只有名稱與一行短語，靠留白與色條分辨 */ .tiles{display:grid;gap:14px;grid-template-columns:1fr} .tile{ display:block;padding:26px 22px;background:#fff; border:1px solid var(--line);border-left:5px solid var(--tile,var(--line)); border-radius:var(--radius);box-shadow:var(--shadow); transition:transform .15s ease,box-shadow .15s ease; } .tile:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 6px 22px rgba(58,51,46,.10)} .tile__name{display:block;font-size:22px;font-weight:800;line-height:1.3} .tile__desc{display:block;margin-top:6px;font-size:14px;color:var(--text-soft);letter-spacing:.02em} .tile--industrial {--tile:var(--c-industrial)} .tile--land {--tile:var(--c-land)} .tile--store {--tile:var(--c-store)} .tile--residential {--tile:var(--c-residential)} .tile--siting {--tile:var(--c-siting)} /* 資料與工具：無框連結列 */ .linklist{list-style:none;margin:0;padding:0;display:grid;gap:2px;grid-template-columns:1fr} .linklist a{ display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; padding:14px 12px;border-radius:var(--radius);min-height:44px; } .linklist a:hover{background:#fff;text-decoration:none} .linklist b{font-size:16px;font-weight:700} .linklist span{font-size:13px;color:var(--text-soft)} .dot{width:8px;height:8px;border-radius:50%;background:var(--dot,var(--action));flex:0 0 auto;align-self:center} /* 其他：純文字連結 */ .plain-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0} .plain-links a{ font-size:15px;color:var(--text-soft); padding:8px 0;min-height:44px;display:inline-flex;align-items:center; } .plain-links a:hover{color:var(--action-dark)} /* 卡片格（中心頁與內頁用） */ .grid{display:grid;gap:16px;grid-template-columns:1fr} .card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:20px;box-shadow:var(--shadow);border-top:3px solid var(--card-color,var(--line)); } .card:hover{text-decoration:none} .card h3{margin-bottom:.35em} .card p{color:var(--text-soft);margin-bottom:0;font-size:15px} .card--industrial {--card-color:var(--c-industrial)} .card--land {--card-color:var(--c-land)} .card--store {--card-color:var(--c-store)} .card--residential {--card-color:var(--c-residential)} .card--siting {--card-color:var(--c-siting)} .card--demographics {--card-color:var(--c-demographics)} .card--market {--card-color:var(--c-market)} .card--knowledge {--card-color:var(--c-knowledge)} /* 麵包屑（搭配 BreadcrumbList Schema） */ .breadcrumb{font-size:13px;color:var(--text-soft);padding:14px 0 0} .breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0} .breadcrumb li::after{content:"／";margin-left:6px;color:var(--line)} .breadcrumb li:last-child::after{content:""} .breadcrumb a{color:var(--accent-ink)} /* 13px 小字 → 必須用 ink */ /* ---------- 7. 雙向 CTA 條（每頁尾固定·§4.3） ---------------------------- */ .cta-band{background:rgba(255,244,232,.94);border-top:1px solid var(--line);padding:32px 0} .cta-band__inner{display:flex;flex-direction:column;gap:12px;text-align:center} .cta-band__title{font-size:20px;font-weight:700;margin:0} .cta-band__actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} /* LINE 浮動鈕 */ .line-fab{ position:fixed;right:16px;bottom:16px;z-index:60; width:56px;height:56px;border-radius:50%; background:#06C755;color:#fff; display:inline-flex;align-items:center;justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.18);font-weight:700;font-size:13px; } .line-fab:hover{text-decoration:none;filter:brightness(.95)} /* ---------- 8. 頁尾 ------------------------------------------------------ */ .site-footer{background:rgba(255,255,255,.95);border-top:1px solid var(--line);padding:36px 0 96px;font-size:14px} .site-footer__grid{display:grid;gap:24px;grid-template-columns:1fr} .site-footer h4{font-size:15px;margin:0 0 .6em} .site-footer ul{list-style:none;margin:0;padding:0} .site-footer li{margin-bottom:6px} /* 手機上頁尾連結也要達 44px 觸控目標；桌機用滑鼠，維持緊湊 */ .site-footer li a{display:inline-flex;align-items:center;min-height:44px} @media (min-width:1200px){ .site-footer li a{min-height:0} .site-footer li{margin-bottom:8px} } .site-footer a{color:var(--text-soft)} .site-footer a:hover{color:var(--action-dark)} .site-footer__legal{ margin-top:24px;padding-top:16px;border-top:1px solid var(--line); font-size:13px;color:var(--text-soft); } .site-footer__legal p{margin:0 0 .4em} /* ---------- 9. RWD ------------------------------------------------------- */ @media (min-width:768px){ /* 平板 */ .grid{grid-template-columns:repeat(2,1fr)} .tiles{grid-template-columns:repeat(2,1fr)} .linklist{grid-template-columns:repeat(2,1fr);gap:2px 24px} .site-footer__grid{grid-template-columns:repeat(3,1fr)} .cta-band__inner{flex-direction:row;align-items:center;justify-content:space-between;text-align:left} .cta-band__actions{justify-content:flex-end} .section{padding:56px 0} } @media (min-width:1200px){ /* 桌機 */ h1{font-size:32px} .hero__title{font-size:56px} /* 入口網：首頁大標放大 */ .hero__lead{font-size:18px} .hero{padding:80px 0 68px} /* 桌機：文字靠左 → 遮罩改為橫向，右半照片露出來 */ .hero--photo{min-height:620px;padding:56px 0 52px} body:not([data-center]) .page-bg img{object-position:center 18%} /* 首頁：太陽下移 */ .hero--photo::after{ /* 桌機遮罩：同上，減淡到剛好壓住文字即可，讓稻田的綠留在畫面上 */ background:linear-gradient(180deg, rgba(24,20,17,0) 0%, rgba(24,20,17,0) 26%, rgba(24,20,17,.06) 42%, rgba(24,20,17,.30) 56%, rgba(24,20,17,.44) 70%, rgba(24,20,17,.50) 86%, rgba(24,20,17,.52) 100%); } .hero--photo .hero__lead{max-width:34em} .tiles{grid-template-columns:repeat(5,1fr);gap:14px} /* 五大主力並列 */ .tile{padding:28px 20px} .tile__name{font-size:22px} .tile__desc{font-size:13px} .linklist{grid-template-columns:repeat(4,1fr);gap:0} .linklist a{flex-direction:column;align-items:flex-start;gap:4px;padding:16px 14px} .dot{align-self:flex-start;margin-bottom:2px} .grid{grid-template-columns:repeat(4,1fr)} .site-footer__grid{grid-template-columns:2fr 1fr 1fr 1fr} .nav-toggle{display:none} .site-nav{display:block;width:auto;margin-left:auto;padding:0} .site-nav__list{flex-direction:row;gap:2px;align-items:center} .site-nav__link{ padding:8px 12px;font-size:15px;border-left:0; border-bottom:3px solid transparent;border-radius:0; } .site-nav__link[aria-current="page"]{background:transparent;border-bottom-color:var(--accent)} .site-header__cta{display:inline-flex;margin-left:14px} } /* ---------- 10. 列印／動態偏好 -------------------------------------------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none !important;animation:none !important} } @media print{ .site-header,.line-fab,.cta-band,.nav-toggle{display:none} body{background:#fff} }