/* CTC Separate Stylesheet Updated: 2026-06-17 17:25:12 */ /* 物件詳情頁價格顯示：總價紅字大數字，單位（萬）稍小；單價加 /坪 */ .houzez-child-total-price { color: #e03131 !important; font-size: 32px !important; font-weight: 900 !important; line-height: 1.2; } .houzez-child-total-price .houzez-child-wan-unit { font-size: 0.6em !important; font-weight: 600; color: #e03131 !important; margin-left: 1px; } .houzez-child-unit-price { font-size: 0.95rem; color: #666; font-weight: 500; } /* 物件詳情頁總覽區塊：隱藏內建圖示，僅保留數值與文字標籤 注意：頂部樣式為 v7（houzez_option('prop-top-area') = 'v7'）時， 總覽區塊實際輸出的是 overview-data-v3.php，外層沒有 #property-overview-wrap 這個 id，只有 .property-overview-data 這個 class，因此改用 class 選擇器， 同時涵蓋 v1（property-details/overview.php）與 v3 兩種輸出結構。 */ .property-overview-data .property-overview-item i, .property-overview-data .property-overview-item img { display: none; } /* 物件類型項目原本是標籤在上、值在下（overview-data-v3.php 的 type 特例）， 與其他項目（值在上、標籤在下）不一致，用 :has() 把這個區塊的兩行 顯示順序倒過來，統一成值在上、標籤在下。 */ .property-overview-data ul:has(> .property-overview-type) { display: flex; flex-direction: column-reverse; } /* 總覽區塊字體：値與標籤全部加粗，値的字體比標籤大，並統一置中 値的顏色用溫暨珊瑚橘 #E07A5F（新品牌主色方向），對白色背景對比度約 3.4:1（大字粗體達 WCAG AA）。 標籤用灰色 #666，與現有單價 .houzez-child-unit-price 顏色一致。 */ .property-overview-data li { text-align: center; } .property-overview-data strong, .property-overview-data .hz-meta-label { font-weight: 700; } .property-overview-data li > strong { font-size: 32px; color: #E07A5F; } .property-overview-data .hz-meta-label { font-size: 18px; color: #666; } /* 物件詳情頁字體統一：標題原本用 Noto Serif TC（襬線）與內文 Noto Sans TC 不一致， 中文襬線字體容易偏傳統報紙感，改統一用無襬線。標題改接近黑色，內文淺一階灰色。 只影響物件詳情頁（.single-property），不包括總覽區塊（總覽已有自己的顏色設定， .property-overview-data 的選擇器特異性更高，不會被這裡覆蓋）。 */ .single-property { color: #555555; } .single-property h1, .single-property h2, .single-property h3, .single-property h4, .single-property h5, .single-property h6 { font-family: 'Noto Sans TC', sans-serif; color: #1a1a1a; } /* 詳情頁每個區塊的標題(物件描述、鄰近生活機能、詳細資訊等 .block-title-wrap 裡的 h2/h3)統一改成 18px， 與上面詳細資訊分組的小標題字素一致。 */ .single-property .block-title-wrap h2, .single-property .block-title-wrap h3 { font-size: 18px !important; } /* 物件標題(如「好漂亮透天」)改用深藍綠，呼應頁首/頁尾主色，與其他黑色內文拉開視覺層次； 手機版本(實際上是 d-md-none 區塊，property-details/mobile-view.php)用的是別一套 .page-title-mobile 對 div，不是 h1，必須別外處理，不然手機版會停留在 Houzez 預設字體，與電腦版不一致。 */ .single-property .page-title h1 { color: #0F5257; font-size: 32px !important; } .single-property .page-title .page-title-mobile { font-family: 'Noto Sans TC', sans-serif; color: #0F5257; font-weight: 700; } @media (max-width: 767.98px) { .single-property .page-title .page-title-mobile { font-size: 22px !important; } } /* 鄰近生活機能板塊（v2：分類按鈕切換，參考樂屋網機能地圖） */ #nearby-amenities-wrap .nearby-amenities-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } #nearby-amenities-wrap .nearby-amenities-tab { border: 1px solid #0F5257; background: #fff; color: #0F5257; border-radius: 20px; padding: 8px 18px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color .2s, color .2s; } #nearby-amenities-wrap .nearby-amenities-tab:hover { background: #eef4f3; } #nearby-amenities-wrap .nearby-amenities-tab.active { background: #0F5257; color: #fff; } #nearby-amenities-wrap .nearby-amenities-tab-count { opacity: .75; font-weight: 400; } #nearby-amenities-wrap .nearby-amenities-placeholder { color: #999; font-size: 14px; padding: 6px 0 2px; } #nearby-amenities-wrap .nearby-amenities-subgroup { border-bottom: 1px solid #eee; padding: 4px 0; } #nearby-amenities-wrap .nearby-amenities-subgroup:last-child { border-bottom: none; } #nearby-amenities-wrap .nearby-amenities-subgroup summary { cursor: pointer; font-weight: 700; color: #0F5257; font-size: 14px; padding: 8px 4px; list-style: none; display: flex; align-items: center; gap: 6px; } #nearby-amenities-wrap .nearby-amenities-subgroup summary::-webkit-details-marker { display: none; } #nearby-amenities-wrap .nearby-amenities-subgroup summary::before { content: '\25B8'; display: inline-block; transition: transform .2s; color: #E07A5F; } #nearby-amenities-wrap .nearby-amenities-subgroup[open] summary::before { transform: rotate(90deg); } #nearby-amenities-wrap .nearby-amenities-subgroup ul { padding-left: 4px; } #nearby-amenities-wrap .nearby-amenities-poi-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #e6e6e6; font-size: 14px; cursor: pointer; } #nearby-amenities-wrap .nearby-amenities-index { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #E07A5F; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; } #nearby-amenities-wrap .nearby-amenities-name { flex-grow: 1; color: #333; } #nearby-amenities-wrap .nearby-amenities-distance { color: #999; white-space: nowrap; flex-shrink: 0; } #nearby-amenities-wrap .nearby-amenities-map-wrap { position: relative; margin: 15px 0; } #nearby-amenities-wrap .nearby-amenities-streetview { position: absolute; top: 10px; right: 10px; z-index: 10; } #nearby-amenities-wrap .nearby-amenities-streetview .btn-primary-outlined { color: #0F5257; border-color: #0F5257; background-color: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(0,0,0,.25); font-size: 14px; padding: 7px 16px; letter-spacing: 2px; } #nearby-amenities-wrap .nearby-amenities-streetview .btn-primary-outlined:hover { background-color: #0F5257; color: #fff; } /* 地圖上的編號圓圈標記與物件本身的家圖示（Leaflet divIcon，非 scoped 到 #nearby-amenities-wrap 內， 因為 Leaflet 會把這些 icon 插到地圖自己的 pane 裡，不在 #nearby-amenities-wrap 內部） */ .nearby-amenities-marker { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(180deg, #E9876C 0%, #E07A5F 60%, #C96548 100%); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.06); } .nearby-amenities-home-marker { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #2A6E67 0%, #0F5257 60%, #0A3A3E 100%); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.06); } /* 地圖彈窗樣式：手寬平圓角卡片 + 浮起陰影 + 地點名稱/距離主副層次（非 scoped 到 #nearby-amenities-wrap， 因為 Leaflet 彈窗 DOM 插在地圖自己的 pane，不在 wrap 內部） */ .leaflet-popup-content-wrapper { border-radius: 14px !important; box-shadow: 0 4px 12px rgba(0,0,0,.15) !important; padding: 2px !important; } .leaflet-popup-content { margin: 10px 16px !important; min-width: 150px !important; line-height: 1.3 !important; } .leaflet-popup-tip-container { width: 24px !important; height: 14px !important; } .leaflet-popup-tip { box-shadow: 0 4px 8px rgba(0,0,0,.1) !important; } .nearby-amenities-popup-name { font-size: 15px !important; font-weight: 700 !important; color: #222 !important; white-space: nowrap !important; } .nearby-amenities-popup-distance { font-size: 12px !important; color: #888 !important; margin-top: 3px !important; white-space: nowrap !important; } /* 詳細資訊板塊分組：每筆資料自己已經有 border-bottom(list-lined)，分組不另外加線，只靠小標題文字 + 間距做區隔， 避免線跡太多顯得亂。整個區塊維持原本 .detail-wrap 的邊框框線。 */ #property-detail-wrap .houzez-child-detail-group-title { font-size: 18px; font-weight: 700; color: #0F5257; margin: 0 0 12px; } #property-detail-wrap .houzez-child-detail-group-title-spaced { margin-top: 28px; } /* 物件詳情頁頂部滏動導覽列：字體放大，hover 改用珇瑚橘主題色（原本沒有 hover 效果，只有 .active 狀態會變顏色，這裡補上 hover） */ .property-navigation-wrap { font-size: 15px !important; } .property-navigation-wrap a:hover { color: #E07A5F !important; } /* 房貸計算機圓餅圖中心數字：原本 .mortgage-calculator-monthly-payment-wrap 的 top:calc(50% - 15px) 是為單行大數字設計的， 我們加了寬限期的兩行顯示後高度變高，因而偷定位公式變得不準，整體偏下。改用 top:50% + transform 絕對置中，不管內容高度多少都能真正垂直置中。 */ .mortgage-calculator-monthly-payment-wrap { top: 50% !important; transform: translateY(-50%); } /* 房貸計算機：細項前面的圓圈改成實心，跟左邊圓餅圖有關的用對應顏色(與圖表切片顏色一致)， 無關的(頭期款、貸款金額，不是每月總額的組成部分)用黑色。 */ .houzez-child-calc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background-color: #000; } .houzez-child-calc-dot-mortgage { background-color: #ff6384; } .houzez-child-calc-dot-tax { background-color: #36a2eb; } .houzez-child-calc-dot-insurance { background-color: #ffce56; } .houzez-child-calc-dot-pmi { background-color: #4bc0c0; } .houzez-child-calc-dot-hoa { background-color: #c2d500; } /* 圓餅圖中心的每月負擔金額加粗，與上方/下方的「寬限期內」「寬限期後」標籤文字(正常粗細)拉開層次 */ .mortgage-calculator-monthly-payment { font-weight: 700 !important; } /* 物件詳情頁影片區塊：支援 Instagram/Facebook 直式短影片(9:16)嵌入， 不用原本適合樫寬 YouTube 的 padding-bottom:56.25% 盒子，避免直式影片被拉扁/裁切。 */ .block-video-wrap-vertical { max-width: 380px; margin: 0 auto; } .block-video-wrap-vertical iframe, .block-video-wrap-vertical .wp-video, .block-video-wrap-vertical video { width: 100% !important; height: auto !important; aspect-ratio: 9 / 16; display: block; } .block-video-wrap-vertical .instagram-media { max-width: 100% !important; min-width: 0 !important; } /* 格局圖區塊（放在物件描述下方）：不管原始比例，固定在一個相同大小的方塊裡，object-fit:contain 保證圖片不被裁切，不提供點擊放大。 */ .houzez-child-floorplan-fixed-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .houzez-child-floorplan-fixed-item img { display: block; max-width: 100%; height: auto; max-height: 520px; margin: 0 auto; } /* 手機/平板頁首 logo 真正置中：原本 Houzez 靠 .header-mobile-left/.header-mobile-right 的寬度平衡來間接置中 logo， 但右側登入/註冊/發布按鈕都沒開(右側是空的)導致左右寬度不對稱，logo 偷偏左。 改用絕對定位相對 .header-mobile 置中，不再依賴左右寬度平衡，保證在任何手機/平板寬度都真正置中。 */ /* 手機/平板頁首 logo 真正置中：發現全站(除首頁外)的頁首其實是用 Elementor(Houzez Studio) 自建的 Header 模板(fts_builder #18468)， 不是 Houzez 原生的 header-mobile.php 。那個 Elementor 模板裡的 logo 小組件(elementor 元素 ID 0e2fe61)， 在手機/平板斷點都是用固定像素偏移(_offset_x_mobile: 120px、_offset_x_tablet: 293px)來模擬置中， 只會在特定實际螢幕寬度下巧合看起來置中，換一台尺寸不同的手機/平板就會偏移。 這裡直接覆蓋掉 Elementor 自己輸出的固定偏移 inline CSS，改用真正的 left:50%+transform 置中， 不再依賴固定 px 數字。斷點數值參考目前 Elementor 缺設斷點(md=768, lg=1025)。 */ @media (max-width: 1024px) { .elementor-element-c2a0182 { position: relative !important; } .elementor-element-0e2fe61.elementor-element { position: absolute !important; left: 50% !important; right: auto !important; top: 50% !important; bottom: auto !important; transform: translate(-50%, -50%) !important; } } /* Site header (template 18468): pin a stable min-height so the custom web font (Noto Sans TC) loading late can't reflow the header's box height and shift the hero image below it */ .elementor-18468 .elementor-element-c2a0182{min-height:74px;} .elementor-18468 .elementor-element-0e2fe61{top:50% !important;transform:translateY(-50%);} /* Homepage hero (區塊掛 CSS 類別 cgh-home-hero；2026-09-27 前用元素編號 4cc2ba0): hero section uses Elementor's native JS-based "Stretch Section" which flashes boxed-width (white side margins) until JS runs on load. Force pure-CSS full-bleed instead so it's correct from first paint. */ .elementor-section.cgh-home-hero{width:100vw !important;max-width:100vw !important;margin-left:calc(-50vw + 50%) !important;margin-right:calc(-50vw + 50%) !important;left:auto !important;right:auto !important;} /* Site-wide: unify size of property status/label/featured tags (精選/新上架/獨家/降價...). Colors stay controlled via Houzez's own admin settings (theme options + taxonomy term color); this only touches size, and only these specific tag classes — not the generic .label class used elsewhere in the theme. */ .label-featured, .label-status, .hz-label{font-size:13px !important;padding:6px 12px !important;line-height:1.2 !important;} /* Homepage (194): 獨家房源 section — full-bleed, single large banner-style property card instead of small carousel cards */ /* 獨家房源 (194): reverted to boxed width to match 精選房源's layout, no longer full-bleed */ .elementor-194 .cgh-home-exclusive-carousel .property-carousel-module-v5-1cols{max-width:100%;} .elementor-194 .cgh-home-exclusive-carousel .item-wrap-v5{width:100%;} .elementor-194 .cgh-home-exclusive-carousel .listing-image-wrap, .elementor-194 .cgh-home-exclusive-carousel .listing-thumb, .elementor-194 .cgh-home-exclusive-carousel .listing-featured-thumb.image-wrap{width:100% !important;height:600px !important;max-width:none !important;} .elementor-194 .cgh-home-exclusive-carousel .listing-featured-thumb.image-wrap img{width:100% !important;height:100% !important;object-fit:cover !important;} .elementor-194 .cgh-home-exclusive-carousel .item-body{padding:30px 40px !important;} /* 768-1024px: the section itself is still boxed (Elementor's own .elementor-section-boxed>.elementor-container * caps at 1140px, and the theme's Bootstrap .container wrapper caps at 750-970px) which is why widening the * image alone had no effect -- break the SECTION out of both ancestor width caps so the photo can actually * reach near the screen edges, matching how it reads on desktop. */ @media(min-width:768px) and (hover:none) and (pointer:coarse){ .elementor-194.elementor-194 .cgh-home-exclusive-section.cgh-home-exclusive-section{ width:100vw !important; max-width:100vw !important; margin-left:calc(-50vw + 50%) !important; margin-right:calc(-50vw + 50%) !important; } .elementor-194.elementor-194 .cgh-home-exclusive-section.cgh-home-exclusive-section>.elementor-container{ max-width:100% !important; width:100% !important; padding-left:16px !important; padding-right:16px !important; } .elementor-194.elementor-194 .cgh-home-exclusive-section.cgh-home-exclusive-section>.elementor-container>.cgh-home-exclusive-inner{ max-width:100% !important; width:100% !important; flex-basis:100% !important; } } @media(min-width:768px) and (hover:none) and (pointer:coarse){ .elementor-194 .cgh-home-exclusive-carousel .listing-image-wrap, .elementor-194 .cgh-home-exclusive-carousel .listing-thumb, .elementor-194 .cgh-home-exclusive-carousel .listing-featured-thumb.image-wrap{height:auto !important;aspect-ratio:4/3;} } @media(max-width:767px){ .elementor-194 .cgh-home-exclusive-carousel .listing-image-wrap, .elementor-194 .cgh-home-exclusive-carousel .listing-thumb, .elementor-194 .cgh-home-exclusive-carousel .listing-featured-thumb.image-wrap{height:320px !important;} } /* Homepage (194): 獨家房源 banner — overlay title/price/tag on top of the photo instead of stacking below it */ .elementor-194 .cgh-home-exclusive-carousel .item-header{position:relative;} .elementor-194 .cgh-home-exclusive-carousel .item-body{ position:absolute !important; left:0; right:0; bottom:0; width:100%; z-index:3; background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0) 90%); padding:36px 40px 28px !important; align-items:flex-start !important; text-align:left; pointer-events:none; } .elementor-194 .cgh-home-exclusive-carousel .item-body a{pointer-events:auto;} /* unified typography for the overlay text — two-tier hierarchy: title=price, type=amenities. Forced left alignment + zero margin/width constraints so every line starts flush at the same left edge. */ .elementor-194 .cgh-home-exclusive-carousel .item-title, .elementor-194 .cgh-home-exclusive-carousel .item-v5-price, .elementor-194 .cgh-home-exclusive-carousel .item-v5-type, .elementor-194 .cgh-home-exclusive-carousel .item-amenities{ width:100% !important; max-width:none !important; text-align:left !important; margin-left:0 !important; margin-right:0 !important; justify-content:flex-start !important; } .elementor-194 .cgh-home-exclusive-carousel .item-title{ font-family:"Noto Sans TC", sans-serif !important; font-size:40px !important; font-weight:700 !important; line-height:1.3 !important; letter-spacing:2px !important; margin-bottom:4px !important; } .elementor-194 .cgh-home-exclusive-carousel .item-title a{font-family:inherit !important;font-size:inherit !important;font-weight:inherit !important;letter-spacing:inherit !important;} .elementor-194 .cgh-home-exclusive-carousel .item-v5-price{ font-family:"Noto Sans TC", sans-serif !important; font-size:40px !important; font-weight:700 !important; letter-spacing:2.5px !important; margin-bottom:22px !important; } .elementor-194 .cgh-home-exclusive-carousel .item-v5-type{ font-family:"Noto Sans TC", sans-serif !important; font-size:18px !important; font-weight:600 !important; letter-spacing:1.5px !important; margin-bottom:4px !important; } .elementor-194 .cgh-home-exclusive-carousel .item-amenities, .elementor-194 .cgh-home-exclusive-carousel .item-amenities li, .elementor-194 .cgh-home-exclusive-carousel .item-amenities span{ font-family:"Noto Sans TC", sans-serif !important; font-size:18px !important; font-weight:500 !important; letter-spacing:0.3px !important; } .elementor-194 .cgh-home-exclusive-carousel .item-amenities{ padding:0 !important; margin:0 !important; list-style:none !important; } .elementor-194 .cgh-home-exclusive-carousel .item-amenities li{ padding-left:0 !important; margin-left:0 !important; } /* single-property banner: the preview/favorite/compare icons are for grid browsing, not needed on a single hero card, and they were conflicting with the text overlay */ .elementor-194 .cgh-home-exclusive-carousel .item-tools{display:none !important;} .elementor-194 .cgh-home-exclusive-carousel .item-title, .elementor-194 .cgh-home-exclusive-carousel .item-title a{color:#ffffff !important;} .elementor-194 .cgh-home-exclusive-carousel .item-v5-price{color:#A8432B !important;} .elementor-194 .cgh-home-exclusive-carousel .item-v5-type, .elementor-194 .cgh-home-exclusive-carousel .item-amenities, .elementor-194 .cgh-home-exclusive-carousel .item-amenities li, .elementor-194 .cgh-home-exclusive-carousel .item-amenities span{color:#ffffff !important;} .elementor-194 .cgh-home-exclusive-carousel .item-amenities{justify-content:flex-start !important;} /* 房/廣/衛/坪數該列的內建圖示（.item-amenities 裡的 或 ）， 之前已在物件詳情頁總覽區塊拿掉過，但這張首頁「獨家物件」卡片用的是不同的標記（.item-amenities）， 並沒有被那次修改涵蓋到，所以圖示一直都在。這裡同樣直接隱藏。 */ .elementor-194 .cgh-home-exclusive-carousel .item-amenities i, .elementor-194 .cgh-home-exclusive-carousel .item-amenities img{ display:none; } /* 底層 PHP 輸出的是「標籤:數字」(例如「房:3」)，但希望當歸「數字+單字」格式（3房2廣2衛50坪）， 因為標籤文字已經帶了冒號，無法直接用 CSS 排序從前接到後面，改成把原本標籤文字藏起來， 改用 CSS ::after 在數字後面插一個單字。坪數(.h-area)本來就是「50坪」格式，不需要改。 */ .elementor-194 .cgh-home-exclusive-carousel .item-amenities-text{ display:none !important; } .elementor-194 .cgh-home-exclusive-carousel .h-beds .hz-figure::after{ content:"房"; margin-left:1px; } .elementor-194 .cgh-home-exclusive-carousel .h-baths .hz-figure::after{ content:"衛"; margin-left:1px; } .elementor-194 .cgh-home-exclusive-carousel .h-living-room span:not(.item-amenities-text)::after{ content:"廳"; margin-left:1px; } /* 獨家 tag: overlay badge top-left, scaled up to match the banner size */ .elementor-194 .cgh-home-exclusive-carousel .labels-wrap{ position:absolute !important; top:28px; left:28px; z-index:4; } .elementor-194 .cgh-home-exclusive-carousel .labels-wrap .hz-label{ font-size:20px !important; padding:10px 20px !important; } /* 參考「精選物件」(74b4576) 那區未被客製化的原生 Houzez 排法：.label-featured 釘左上角， .labels-wrap 釘右上角，兩邊分開。之前「獨家物件」把兩組都推到左邊才撠在一起，現在改回左右分開， 並且不需要依賴是否有精選標籤、未來新增其他狀態/標籤也不會撠到。 */ .elementor-194 .cgh-home-exclusive-carousel .label-featured{ position:absolute !important; top:28px; left:28px; z-index:4; font-size:20px !important; padding:10px 20px !important; } .elementor-194 .cgh-home-exclusive-carousel .labels-wrap{ position:absolute !important; top:28px; right:28px; left:auto; z-index:4; flex-wrap:wrap; justify-content:flex-end; max-width:calc(100% - 180px); } /* 新上架(label-status) 之前沒被放大，跟獨家(hz-label) 大小不一致，一起補上； 也一併涵蓋以後可能新增的其他狀態/標籤，保證都是同一個字型大小。 */ .elementor-194 .cgh-home-exclusive-carousel .labels-wrap .hz-label, .elementor-194 .cgh-home-exclusive-carousel .labels-wrap .label-status{ font-size:20px !important; padding:10px 20px !important; } @media(max-width:767px){ .elementor-194 .cgh-home-exclusive-carousel .item-title{font-size:22px !important;} .elementor-194 .cgh-home-exclusive-carousel .item-v5-price{font-size:22px !important;} .elementor-194 .cgh-home-exclusive-carousel .item-v5-type{font-size:13px !important;} .elementor-194 .cgh-home-exclusive-carousel .item-amenities, .elementor-194 .cgh-home-exclusive-carousel .item-amenities li, .elementor-194 .cgh-home-exclusive-carousel .item-amenities span{font-size:13px !important;} } /* 手機實測發現：精選/新上架/獨家那套 20px 字體+10px×20px 內距在手機窄寬寬下放不下、會自動換行變成竖向疊在一起。 手機改用接近 Houzez 原生大小，確保新上架跟獨家能排回同一列。 */ @media(max-width:767px){ .elementor-194 .cgh-home-exclusive-carousel .label-featured{ top:16px; left:16px; font-size:14px !important; padding:6px 12px !important; } .elementor-194 .cgh-home-exclusive-carousel .labels-wrap{ top:16px; right:16px; max-width:calc(100% - 100px); } .elementor-194 .cgh-home-exclusive-carousel .labels-wrap .hz-label, .elementor-194 .cgh-home-exclusive-carousel .labels-wrap .label-status{ font-size:14px !important; padding:6px 12px !important; } } /* Site-wide: .hover-effect-flat (used by taxonomy grid cards etc.) fades its dark overlay fully to 0 on hover, leaving white text unreadable against the now-bright photo. Keep a light tint so text stays legible in both states. */ .hover-effect-flat:hover:before{ opacity:1 !important; background-color:transparent !important; background-image:linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 30%, rgba(0,0,0,0.08) 55%, rgba(0,0,0,0) 75%) !important; } /* /properties/ (44345): hide the raw, un-shortened price-range text until our JS has reformatted it, to avoid a flash of the original numbers/icons on load. */ body.page-id-44345 .range-wrap[data-price-range-id] .range-text{opacity:0;transition:opacity 0.15s ease;} body.page-id-44345 .range-wrap[data-price-range-id] .range-text.prices-ready{opacity:1;} /* /properties/ (44345): search + clear buttons in the theme's dark green, with hover effects. */ body.page-id-44345 .btn-search{ background-color:#0F5257 !important; border:2px solid #0F5257 !important; color:#ffffff !important; border-radius:6px !important; transition:background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } body.page-id-44345 .btn-search:hover{ background-color:#04262A !important; border-color:#04262A !important; color:#ffffff !important; transform:none !important; box-shadow:none !important; } body.page-id-44345 .reset-search-btn{ background-color:#ffffff !important; border:2px solid #0F5257 !important; color:#0F5257 !important; padding-left:22px !important; padding-right:22px !important; font-weight:600 !important; border-radius:6px !important; white-space:nowrap !important; transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } body.page-id-44345 .reset-search-btn:hover{ background-color:#0F5257 !important; border-color:#0F5257 !important; color:#FFFFFF !important; transform:none !important; box-shadow:none !important; } /* /properties/ (44345): hide the search fields grid until bootstrap-select has finished converting every native