/* ========================================================================== 1896 客製家具 · 方案 C 頂級高定視覺與互動樣式表 (Luxury Bespoke Edition) 風格參照：Poliform / Rimadesio / B&B Italia 意式奢雅私宅美學 ========================================================================== */ :root { --lux-bg: #f8f6f2; --lux-bg-alt: #f1ede5; --lux-surface: #ffffff; --lux-dark: #121212; --lux-dark-elevated: #1a1a1a; --lux-dark-card: #222222; --lux-gold: #c59b48; --lux-gold-light: #e6c57a; --lux-gold-dark: #9a7324; --lux-text: #1a1a1a; --lux-text-muted: #6e6961; --lux-text-light: #a8a39a; --lux-border: rgba(0, 0, 0, 0.08); --lux-border-light: rgba(255, 255, 255, 0.12); --lux-border-gold: rgba(197, 155, 72, 0.35); --lux-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.04); --lux-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.07); --lux-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.12); --font-serif: 'Noto Sans TC', 'Noto Sans SC', 'PingFang TC', 'Microsoft JhengHei', -apple-system, BlinkMacSystemFont, sans-serif; --font-sans: 'Noto Sans TC', 'Noto Sans SC', 'PingFang TC', 'Microsoft JhengHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); } /* 全局重設與字體排印：全站 100% 統一應用思源黑體 (Noto Sans TC)，排除圖標字體 */ *:not(.fa):not([class*="fa-"]):not(.glyphicon):not([class*="icon-"]):not(i) { font-family: 'Noto Sans TC', 'Noto Sans SC', 'PingFang TC', 'Microsoft JhengHei', -apple-system, BlinkMacSystemFont, sans-serif !important; } body.luxury-bespoke-body { font-family: var(--font-sans) !important; background-color: var(--lux-bg); color: var(--lux-text); line-height: 1.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; padding-top: 76px !important; } /* 隱藏舊版 Order 賣場雜亂元素 */ body.luxury-bespoke-body .quickWrap, body.luxury-bespoke-body .fb-root, body.luxury-bespoke-body .seoWrap { display: none !important; } /* ========================================================================== 1. 頂部懸浮毛玻璃導航欄 (Floating Glassmorphism Navbar) ========================================================================== */ .luxury-navbar { position: fixed; top: 0; left: 0; right: 0; height: 76px; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(197, 155, 72, 0.18); z-index: 1000; transition: all 0.4s var(--ease-out-expo); box-shadow: 0 4px 25px rgba(0, 0, 0, 0.03); } .luxury-navbar.scrolled { height: 70px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 30px rgba(0, 0, 0, 0.06); } .luxury-navbar-container { max-width: 1440px; height: 100%; margin: 0 auto; padding: 0; display: flex; align-items: center; justify-content: space-between; } /* 品牌 Logo 區域 - 組合用戶修正版 1896 彈跳動效 + 客製家具 + 副標題 */ .luxury-brand-link { display: flex; align-items: center; text-decoration: none !important; transition: opacity 0.3s ease; } .luxury-brand-link:hover { opacity: 0.92; } .luxury-brand-composite { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; user-select: none; } .luxury-brand-top { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; } .luxury-brand-animated-1896 { height: 40px; width: auto; display: block; position: relative; top: 4px; } .luxury-brand-chinese { font-family: 'Noto Sans TC', 'Noto Sans SC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; font-size: 29px; font-weight: 900; color: #1a1a1a; letter-spacing: 2px; line-height: 1; white-space: nowrap; margin-top: 0; -webkit-text-stroke: 0; } .luxury-brand-bottom { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 5px; gap: 8px; } .luxury-brand-bottom::before, .luxury-brand-bottom::after { content: ''; flex: 1 1 0; height: 1px; background: var(--lux-gold); } .luxury-brand-bottom .lux-sub-text { font-family: 'Noto Sans TC', 'Noto Sans SC', 'PingFang TC', 'Microsoft JhengHei', sans-serif; font-size: 15px; font-weight: 700; color: #222222; white-space: nowrap; flex: 0 0 auto; display: block; line-height: 1.3; text-align: center; } .luxury-footer-brand .luxury-brand-composite { width: max-content; max-width: 100%; align-items: center !important; } .luxury-footer-brand .luxury-brand-bottom { justify-content: center !important; } .luxury-footer-brand .luxury-brand-animated-1896 { filter: invert(1) brightness(1.2); } .luxury-footer-brand .luxury-brand-chinese { color: #ffffff; -webkit-text-stroke: 0; } .luxury-footer-brand .luxury-brand-bottom .lux-sub-text { color: #d5d0c7; } /* 主菜單導航項 */ .luxury-nav-menu { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; } .luxury-nav-item { position: relative; } .luxury-nav-link { display: flex; flex-direction: column; align-items: center; text-decoration: none !important; color: #202020; padding: 8px 0; transition: color 0.3s ease; } .luxury-nav-link .zh { font-size: 15px; font-weight: 600; letter-spacing: 1.5px; line-height: 1.3; } .luxury-nav-link .en { font-family: var(--font-serif); font-size: 9px; letter-spacing: 2px; color: #8c867e; text-transform: uppercase; margin-top: 2px; transition: color 0.3s ease; } /* 懸浮金屬金下劃線 */ .luxury-nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: linear-gradient(90deg, #c59b48, #e6c57a); transition: all 0.35s var(--ease-out-expo); transform: translateX(-50%); } .luxury-nav-link:hover { color: var(--lux-gold-dark); } .luxury-nav-link:hover .en { color: var(--lux-gold); } .luxury-nav-link:hover::after { width: 100%; } .luxury-nav-link.is-current, .luxury-nav-link.is-current .zh, .luxury-nav-link.is-current .en { color: var(--lux-gold) !important; } .luxury-nav-link.is-current .zh { font-weight: 700; } .luxury-nav-link.is-current::after { width: 100%; } /* 導航右側專屬服務通道 */ .luxury-nav-actions { display: flex; align-items: center; gap: 20px; } .luxury-hotline { display: flex; align-items: center; gap: 8px; color: #333333; text-decoration: none !important; font-size: 13px; font-weight: 500; letter-spacing: 0.5px; transition: color 0.3s ease; } .luxury-hotline i { color: var(--lux-gold); font-size: 14px; } .luxury-hotline:hover { color: var(--lux-gold-dark); } .luxury-btn-vip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 40px; background: linear-gradient(135deg, #1c1c1c 0%, #2b2b2b 100%); color: #f7e6c0 !important; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-decoration: none !important; border: 1px solid rgba(197, 155, 72, 0.45); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); transition: all 0.35s var(--ease-out-expo); cursor: pointer; } .luxury-btn-vip:hover { background: linear-gradient(135deg, #c59b48 0%, #aa7e2a 100%); color: #ffffff !important; box-shadow: 0 6px 20px rgba(197, 155, 72, 0.35); transform: translateY(-1px); } /* ========================================================================== 2. 首屏 100vh 影院級巨幕視差輪播 (Cinema Hero Section) ========================================================================== */ .luxury-hero-section { position: relative; width: 100%; height: calc(100vh - 76px); min-height: 640px; max-height: 980px; overflow: hidden; background-color: var(--lux-dark); } .luxury-hero-slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .luxury-hero-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 1.2s var(--ease-out-expo), visibility 1.2s; background-size: cover; background-position: center; transform: scale(1.08); } .luxury-hero-slide.active { opacity: 1; visibility: visible; transform: scale(1); transition: opacity 1.2s var(--ease-out-expo), transform 7s linear; } /* 高定黑金色調遮罩 */ .luxury-hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( to bottom, rgba(18, 18, 18, 0.12) 0%, rgba(18, 18, 18, 0.08) 50%, rgba(18, 18, 18, 0.72) 100% ); z-index: 2; } /* 首屏奢雅文案排版 */ .luxury-hero-content { position: absolute; bottom: 80px; left: 0; right: 0; z-index: 3; max-width: 1440px; margin: 0 auto; padding: 0 40px; color: #ffffff; } .luxury-hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 18px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(10px); border: 1px solid rgba(197, 155, 72, 0.5); border-radius: 30px; font-family: var(--font-serif); font-size: 11px; letter-spacing: 3px; color: #f7e4be; text-transform: uppercase; margin-bottom: 20px; } .luxury-hero-title { font-family: var(--font-serif); font-size: clamp(34px, 4.5vw, 58px); font-weight: 700; letter-spacing: 3px; line-height: 1.25; margin: 0 0 16px 0; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); } .luxury-hero-desc { font-size: clamp(14px, 1.4vw, 17px); color: rgba(255, 255, 255, 0.88); font-weight: 300; letter-spacing: 1.2px; max-width: 680px; line-height: 1.8; margin-bottom: 32px; } .luxury-hero-btn-group { display: flex; align-items: center; gap: 18px; } .luxury-btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 14px 36px; border-radius: 40px; background: linear-gradient(135deg, #c59b48 0%, #aa7e2a 100%); color: #ffffff !important; font-size: 14px; font-weight: 600; letter-spacing: 2px; text-decoration: none !important; box-shadow: 0 8px 25px rgba(197, 155, 72, 0.4); transition: all 0.35s var(--ease-out-expo); border: 1px solid rgba(255, 255, 255, 0.2); } .luxury-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(197, 155, 72, 0.55); } .luxury-btn-outline { display: inline-flex; align-items: center; justify-content: center; padding: 14px 36px; border-radius: 40px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); color: #ffffff !important; font-size: 14px; font-weight: 500; letter-spacing: 2px; text-decoration: none !important; border: 1px solid rgba(255, 255, 255, 0.45); transition: all 0.35s var(--ease-out-expo); } .luxury-btn-outline:hover { background: rgba(255, 255, 255, 0.22); border-color: #ffffff; transform: translateY(-2px); } /* ========================================================================== 輪播進度條控制器 (置中左右居中、進度條滿即自動換頁) ========================================================================== */ .luxury-hero-controls { position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; justify-content: center; gap: 16px; user-select: none; } .luxury-hero-progress-item { position: relative; display: flex; align-items: center; padding: 10px 0; cursor: pointer; } .luxury-hero-progress-track { width: 58px; height: 3px; background: rgba(255, 255, 255, 0.35); border-radius: 2px; overflow: hidden; position: relative; transition: background 0.3s ease, transform 0.3s ease; } .luxury-hero-progress-item:hover .luxury-hero-progress-track { background: rgba(255, 255, 255, 0.6); transform: scaleY(1.3); } .luxury-hero-progress-bar { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(90deg, #c59b48 0%, #e6c57a 100%); border-radius: 2px; box-shadow: 0 0 8px rgba(197, 155, 72, 0.5); } /* 激活狀態下的平滑線性進度條動畫 (5.5 秒滿格) */ @keyframes heroProgressLinear { from { width: 0%; } to { width: 100%; } } .luxury-hero-progress-item.active .luxury-hero-progress-bar { animation: heroProgressLinear 5.5s linear forwards; } /* ========================================================================== 3. 品牌沉澱數據欄 (Brand Heritage & Metrics Strip) ========================================================================== */ .luxury-metrics-strip { background-color: var(--lux-surface); border-bottom: 1px solid var(--lux-border); padding: 48px 0; } .luxury-metrics-container { max-width: 1440px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .luxury-metric-item { text-align: center; position: relative; padding: 0 16px; } .luxury-metric-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 15%; height: 70%; width: 1px; background: var(--lux-border); } .luxury-metric-num { font-family: var(--font-serif); font-size: 40px; font-weight: 700; color: var(--lux-dark); line-height: 1; margin-bottom: 10px; display: flex; align-items: baseline; justify-content: center; } .luxury-metric-num span { color: var(--lux-gold); font-size: 26px; margin-left: 2px; } .luxury-metric-label { font-size: 13px; font-weight: 600; letter-spacing: 1.5px; color: #403e3a; margin-bottom: 4px; } .luxury-metric-desc { font-size: 12px; color: var(--lux-text-muted); letter-spacing: 0.5px; } /* ========================================================================== 4. 畫冊級空間案例展示區 (Editorial Case Gallery) ========================================================================== */ .luxury-section { padding: 100px 0; position: relative; } .luxury-container { max-width: 1440px; margin: 0 auto; padding: 0 32px; } .luxury-section-header { text-align: center; max-width: 760px; margin: 0 auto 60px auto; } .luxury-section-sub { font-family: var(--font-serif); font-size: 12px; letter-spacing: 4px; color: var(--lux-gold); text-transform: uppercase; margin-bottom: 12px; display: block; } .luxury-section-title { font-family: var(--font-serif); font-size: clamp(28px, 3.2vw, 42px); font-weight: 700; letter-spacing: 2px; color: var(--lux-dark); margin: 0 0 16px 0; line-height: 1.35; } .luxury-section-desc { font-size: 15px; color: var(--lux-text-muted); letter-spacing: 0.8px; line-height: 1.8; margin: 0; } /* 案例畫冊非對稱錯落網格 */ .luxury-gallery-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; grid-template-rows: auto auto; gap: 32px; } .luxury-gallery-card { position: relative; border-radius: 8px; overflow: hidden; background-color: #000; box-shadow: var(--lux-shadow-md); text-decoration: none !important; display: block; transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s ease; } .luxury-gallery-card:hover { transform: translateY(-6px); box-shadow: var(--lux-shadow-lg); } .luxury-gallery-card.featured { grid-row: span 2; height: 640px; } .luxury-gallery-card.standard { height: 304px; } .luxury-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out-expo); opacity: 0.9; } .luxury-gallery-card:hover .luxury-card-img { transform: scale(1.06); opacity: 1; } .luxury-card-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(15, 15, 15, 0.88) 0%, rgba(15, 15, 15, 0.2) 60%, transparent 100% ); display: flex; flex-direction: column; justify-content: flex-end; padding: 36px; color: #ffffff; } .luxury-card-tag { display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; color: #fce1a9; background: rgba(197, 155, 72, 0.35); backdrop-filter: blur(8px); padding: 4px 12px; border-radius: 4px; margin-bottom: 12px; border: 1px solid rgba(255, 255, 255, 0.2); } .luxury-card-title { font-family: var(--font-serif); font-size: 24px; font-weight: 700; letter-spacing: 1px; margin: 0 0 8px 0; color: #ffffff; line-height: 1.35; } .luxury-card-meta { font-size: 13px; color: rgba(255, 255, 255, 0.75); letter-spacing: 0.5px; margin: 0; } /* ========================================================================== 5. 高定材質與精工工藝專區 (Craftsmanship & Materials Section) ========================================================================== */ .luxury-craft-section { background-color: var(--lux-dark); color: #ffffff; } .luxury-craft-section .luxury-section-title { color: #ffffff; } .luxury-craft-section .luxury-section-desc { color: rgba(255, 255, 255, 0.65); } .luxury-craft-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 50px; } .luxury-craft-card { background: var(--lux-dark-elevated); border: 1px solid var(--lux-border-light); border-radius: 10px; padding: 40px 28px; position: relative; transition: all 0.4s var(--ease-out-expo); display: flex; flex-direction: column; } .luxury-craft-card:hover { background: var(--lux-dark-card); border-color: var(--lux-border-gold); transform: translateY(-8px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4); } .luxury-craft-num { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--lux-gold); letter-spacing: 2px; margin-bottom: 24px; } .luxury-craft-title { font-family: var(--font-serif); font-size: 20px; font-weight: 700; letter-spacing: 1px; color: #ffffff; margin: 0 0 14px 0; line-height: 1.4; } .luxury-craft-text { font-size: 13.5px; color: rgba(255, 255, 255, 0.68); line-height: 1.8; letter-spacing: 0.5px; margin: 0; } /* ========================================================================== 6. 品牌理念沉思區 (Editorial Quote / Philosophy Banner) ========================================================================== */ .luxury-quote-section { background: linear-gradient(135deg, #ede8df 0%, #e5dfd3 100%); padding: 100px 0; text-align: center; border-top: 1px solid var(--lux-border); border-bottom: 1px solid var(--lux-border); } .luxury-quote-container { max-width: 900px; margin: 0 auto; padding: 0 30px; } .luxury-quote-icon { font-family: var(--font-serif); font-size: 54px; line-height: 1; color: var(--lux-gold); opacity: 0.6; margin-bottom: 16px; } .luxury-quote-text { font-family: var(--font-serif); font-size: clamp(20px, 2.4vw, 30px); font-weight: 600; line-height: 1.7; letter-spacing: 2px; color: #222222; margin: 0 0 24px 0; } .luxury-quote-author { font-size: 14px; font-weight: 600; letter-spacing: 3px; color: var(--lux-gold-dark); text-transform: uppercase; } /* ========================================================================== 7. VIP 私人定製預約沉浸彈窗 (VIP Bespoke Concierge Modal) ========================================================================== */ .luxury-modal-overlay { position: fixed; inset: 0; background: rgba(15, 15, 15, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: all 0.35s var(--ease-out-expo); } .luxury-modal-overlay.active { opacity: 1; visibility: visible; } .luxury-modal-card { background: #1e1e1e; border: 1px solid rgba(197, 155, 72, 0.45); border-radius: 16px; width: 100%; max-width: 600px; padding: 44px; position: relative; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6); transform: translateY(30px) scale(0.96); transition: all 0.4s var(--ease-out-expo); color: #ffffff; } .luxury-modal-overlay.active .luxury-modal-card { transform: translateY(0) scale(1); } .luxury-modal-close { position: absolute; top: 24px; right: 24px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: none; color: #ffffff; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s ease; } .luxury-modal-close:hover { background: rgba(197, 155, 72, 0.4); } .luxury-modal-header { text-align: center; margin-bottom: 32px; } .luxury-modal-title { font-family: var(--font-serif); font-size: 26px; font-weight: 700; letter-spacing: 2px; color: #ffffff; margin: 0 0 10px 0; } .luxury-modal-subtitle { font-size: 13.5px; color: rgba(255, 255, 255, 0.65); letter-spacing: 0.8px; margin: 0; } .luxury-form-group { margin-bottom: 20px; } .luxury-form-label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 1px; color: #e5c378; margin-bottom: 8px; } .luxury-form-input, .luxury-form-select { width: 100%; padding: 13px 18px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.15); color: #ffffff; font-size: 14px; outline: none; transition: all 0.3s ease; box-sizing: border-box; } .luxury-form-input:focus, .luxury-form-select:focus { border-color: var(--lux-gold); background: rgba(255, 255, 255, 0.12); box-shadow: 0 0 12px rgba(197, 155, 72, 0.25); } .luxury-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .luxury-btn-submit { width: 100%; padding: 15px; border-radius: 40px; background: linear-gradient(135deg, #c59b48 0%, #a47822 100%); color: #ffffff; border: none; font-size: 15px; font-weight: 700; letter-spacing: 2px; cursor: pointer; margin-top: 10px; box-shadow: 0 8px 25px rgba(197, 155, 72, 0.35); transition: all 0.35s ease; } .luxury-btn-submit:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(197, 155, 72, 0.5); } /* ========================================================================== 8. 右下角懸浮 VIP 專屬膠囊 (Floating Concierge Capsule) ========================================================================== */ .luxury-float-capsule { position: fixed; bottom: 32px; right: 32px; z-index: 990; display: flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 50px; background: rgba(18, 18, 18, 0.9); backdrop-filter: blur(16px); border: 1px solid rgba(197, 155, 72, 0.5); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); color: #f7e6c0 !important; font-size: 13.5px; font-weight: 600; letter-spacing: 1.5px; text-decoration: none !important; cursor: pointer; transition: all 0.35s var(--ease-out-expo); } .luxury-float-capsule:hover { background: linear-gradient(135deg, #c59b48 0%, #aa7e2a 100%); color: #ffffff !important; transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 35px rgba(197, 155, 72, 0.45); } /* ========================================================================== 9. 高定版頁腳重構 (Luxury Minimalist Footer) ========================================================================== */ .luxury-footer { background-color: #0d0d0d; color: #8c867e; padding: 80px 0 40px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); } .luxury-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 50px; margin-bottom: 60px; } .luxury-footer-brand p { font-size: 13.5px; color: #7a756e; line-height: 1.8; max-width: 380px; margin: 18px 0 0 0; } .luxury-footer-heading { font-family: var(--font-serif); font-size: 15px; font-weight: 700; letter-spacing: 1.5px; color: #ffffff; margin: 0 0 20px 0; } .luxury-footer-links { list-style: none; padding: 0; margin: 0; } .luxury-footer-links li { margin-bottom: 12px; } .luxury-footer-links a { color: #8c867e; text-decoration: none !important; font-size: 13px; letter-spacing: 0.8px; transition: color 0.3s ease; } .luxury-footer-links a:hover { color: var(--lux-gold); } .luxury-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 30px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: 0.8px; color: #5c5750; } /* 響應式適配 */ /* (A) 移動端漢堡按鈕與全屏抽屜選單樣式 */ .luxury-nav-toggle { display: none; flex-direction: column; justify-content: space-between; width: 28px; height: 20px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1002; } .luxury-nav-toggle .luxury-toggle-bar { width: 100%; height: 2px; background-color: #1a1a1a; border-radius: 2px; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .luxury-nav-toggle.active .luxury-toggle-bar:nth-child(1) { transform: translateY(9px) rotate(45deg); background-color: var(--lux-gold); } .luxury-nav-toggle.active .luxury-toggle-bar:nth-child(2) { opacity: 0; } .luxury-nav-toggle.active .luxury-toggle-bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); background-color: var(--lux-gold); } /* 移動端全屏滑出式抽屜選單 (Mobile Drawer) */ .luxury-mobile-drawer { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(18, 18, 18, 0.98); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); z-index: 1001; opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; justify-content: center; padding: 90px 30px 40px 30px; } .luxury-mobile-drawer.active { opacity: 1; visibility: visible; } .luxury-drawer-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; } .luxury-drawer-menu li a { display: flex; align-items: baseline; justify-content: space-between; text-decoration: none !important; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: all 0.3s ease; } .luxury-drawer-menu li a .zh { font-size: 20px; font-weight: 700; color: #ffffff; letter-spacing: 2px; } .luxury-drawer-menu li a .en { font-family: var(--font-serif); font-size: 13px; color: var(--lux-gold); letter-spacing: 2px; text-transform: uppercase; } .luxury-drawer-menu li a:hover, .luxury-drawer-menu li a:active { padding-left: 8px; border-bottom-color: var(--lux-gold); } .luxury-drawer-footer { margin-top: auto; padding-top: 25px; text-align: center; } .drawer-hotline { color: var(--lux-gold); font-size: 16px; font-weight: 700; text-decoration: none !important; letter-spacing: 1px; } /* (B) 首屏輪播左右切換箭頭 (Hero Navigation Arrows) */ .luxury-hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(18, 18, 18, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2); color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; z-index: 6; transition: all 0.3s ease; } .luxury-hero-arrow:hover { background: rgba(197, 155, 72, 0.85); border-color: var(--lux-gold); transform: translateY(-50%) scale(1.08); } .luxury-hero-arrow.prev { left: 24px; } .luxury-hero-arrow.next { right: 24px; } @media (max-width: 1024px) { .luxury-nav-menu { display: none !important; } .luxury-nav-toggle { display: flex !important; } .luxury-gallery-grid { grid-template-columns: 1fr; } .luxury-gallery-card.featured { height: 440px; grid-row: auto; } .luxury-craft-grid { grid-template-columns: repeat(2, 1fr); } .luxury-metrics-container { grid-template-columns: repeat(2, 1fr); gap: 40px; } .luxury-footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { body.luxury-bespoke-body { padding-top: 66px !important; } .luxury-navbar { height: 66px; } .luxury-navbar-container { padding: 0 16px; } .luxury-brand-animated-1896 { height: 30px; } .luxury-brand-chinese { font-size: 22px; } .luxury-brand-bottom .lux-sub-text { font-size: 11.5px; } .luxury-hotline { display: none !important; } /* 手機頁首只保留 Logo 與選單按鈕 */ .luxury-btn-vip { display: none !important; } .luxury-nav-actions { gap: 10px !important; } /* 首屏移動端排版：文案上移、字體優化、避免遮擋翻頁箭頭與進度條 */ .luxury-hero-content { bottom: 85px !important; padding: 0 20px !important; pointer-events: none; /* 讓點擊與滑動事件穿透到背景輪播 */ } .luxury-hero-badge { font-size: 10px !important; padding: 4px 12px !important; margin-bottom: 12px !important; } .luxury-hero-title { font-size: 26px !important; line-height: 1.3 !important; margin-bottom: 10px !important; } .luxury-hero-desc { font-size: 13px !important; line-height: 1.6 !important; margin-bottom: 20px !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .luxury-hero-btn-group { pointer-events: auto; /* 按鈕自身恢復點擊 */ gap: 10px !important; } .luxury-btn-primary, .luxury-btn-outline { padding: 10px 20px !important; font-size: 12.5px !important; } /* 移動端左右箭頭縮小並貼邊，確保輕鬆觸控翻頁 */ .luxury-hero-arrow { width: 38px !important; height: 38px !important; font-size: 18px !important; } .luxury-hero-arrow.prev { left: 10px !important; } .luxury-hero-arrow.next { right: 10px !important; } /* 輪播進度條移至最底部 */ .luxury-hero-controls { bottom: 20px !important; gap: 10px !important; } .luxury-hero-progress-track { width: 40px !important; } .luxury-hero-slide:nth-child(1) { background-position: 46% center; } .luxury-hero-slide:nth-child(2) { background-position: 61% center; } .luxury-hero-slide:nth-child(3) { background-position: 55% center; } .luxury-craft-grid { grid-template-columns: 1fr; } .luxury-metrics-container { grid-template-columns: 1fr; } .luxury-footer-grid { grid-template-columns: 1fr; } .luxury-footer-bottom { flex-direction: column; gap: 12px; text-align: center; } } /* ========================================================================== 10. 全局內頁奢雅風貌一體化適配 (Global Subpage Harmonization) 讓案例、商品、門市、關於等所有內頁與首頁方案 C 達成統一高定美學 ========================================================================== */ /* 全局頁面主容器背景與間距 */ body.luxury-bespoke-body .quality, body.luxury-bespoke-body .about, body.luxury-bespoke-body .goods, body.luxury-bespoke-body .appoint, body.luxury-bespoke-body .blog, body.luxury-bespoke-body .styleBg { background: var(--lux-bg) !important; padding-top: 15px !important; padding-bottom: 70px !important; color: var(--lux-text); } /* 緊湊優化：子頁面通用包裝區塊上邊距收攏 */ body.luxury-bespoke-body .luxury-subpage-hero + div, body.luxury-bespoke-body .luxury-subpage-hero + main, body.luxury-bespoke-body .luxury-subpage-hero + section, body.luxury-bespoke-body .news.styleBg, body.luxury-bespoke-body .quality.styleBg, body.luxury-bespoke-body .location.styleBg, body.luxury-bespoke-body .about.styleBg, body.luxury-bespoke-body .event.styleBg, body.luxury-bespoke-body .service.styleBg, body.luxury-bespoke-body .luxury-bespoke-goods-main, body.luxury-bespoke-body #caseWrap, body.luxury-bespoke-body #locationWrap, body.luxury-bespoke-body #eventWrap, body.luxury-bespoke-body #service { padding-top: 15px !important; } /* 麵包屑導航 */ body.luxury-bespoke-body .page-current { margin: 0 !important; padding: 0 !important; } body.luxury-bespoke-body .breadcrumb { background: transparent !important; padding: 6px 0 10px 0 !important; margin-bottom: 12px !important; font-size: 13px !important; color: #8c867e !important; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } body.luxury-bespoke-body .breadcrumb a { color: #555555 !important; text-decoration: none !important; transition: color 0.3s ease; } body.luxury-bespoke-body .breadcrumb a:hover { color: var(--lux-gold) !important; } /* 內頁大標題：緊湊高雅格局 */ body.luxury-bespoke-body .page-header, body.luxury-bespoke-body .page-header.line, body.luxury-bespoke-body #largeTi { margin: 8px 0 24px 0 !important; padding-top: 0 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; } body.luxury-bespoke-body .page-header.line h1, body.luxury-bespoke-body .page-header.line .h1, body.luxury-bespoke-body #largeTi h1, body.luxury-bespoke-body #largeTi .h1 { font-family: var(--font-serif) !important; font-size: clamp(24px, 3vw, 32px) !important; font-weight: 700 !important; letter-spacing: 2px !important; color: #1a1a1a !important; border: none !important; padding-bottom: 12px !important; float: left !important; margin: 0 !important; line-height: 1.2 !important; } body.luxury-bespoke-body .page-header.line h1 small, body.luxury-bespoke-body .page-header.line .h1 small, body.luxury-bespoke-body #largeTi h1 small, body.luxury-bespoke-body #largeTi .h1 small { font-family: var(--font-serif) !important; font-size: 14px !important; letter-spacing: 2.5px !important; color: var(--lux-gold) !important; text-transform: uppercase !important; margin-left: 12px !important; font-weight: 500 !important; background: none !important; } /* 風格分類標籤篩選器 (Filter) 緊湊優化 */ body.luxury-bespoke-body .filter { background: #ffffff !important; border-radius: 12px !important; padding: 14px 22px !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important; margin: 12px 0 20px 0 !important; } body.luxury-bespoke-body .filter .filter-ti { color: var(--lux-gold-dark) !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: 1.5px !important; } body.luxury-bespoke-body .filter ul li a { border-radius: 20px !important; padding: 6px 16px !important; font-size: 13.5px !important; color: #555555 !important; border: 1px solid transparent !important; transition: all 0.3s ease !important; } body.luxury-bespoke-body .filter ul li.current a, body.luxury-bespoke-body .filter ul li a:hover { background: #181818 !important; color: #f7e6c0 !important; border-color: #181818 !important; } body.luxury-bespoke-body .space20 { display: none !important; } /* ========================================================================== 內頁卡片 (案例、商品、文章) 高奢均勻規格重塑 (Uniform Luxury Bespoke Cards) ========================================================================== */ body.luxury-bespoke-body .picOver { background: #ffffff !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; margin-bottom: 35px !important; display: flex !important; flex-direction: column !important; height: 490px !important; /* 統一卡片總高度，解決參差不齊 */ padding: 0 !important; position: relative !important; } body.luxury-bespoke-body .picOver:hover { transform: translateY(-8px) !important; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1) !important; border-color: rgba(197, 155, 72, 0.35) !important; } /* 圖片容器：統一 16:10 比例裁切，杜絕拉伸或長短不一 */ body.luxury-bespoke-body .picOver .pic { position: relative !important; width: 100% !important; height: 260px !important; overflow: hidden !important; background-color: #1a1a1a !important; flex-shrink: 0 !important; } body.luxury-bespoke-body .picOver .pic img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease !important; display: block !important; } body.luxury-bespoke-body .picOver:hover .pic img { transform: scale(1.08) !important; filter: brightness(0.88) !important; } /* 悬浮遮罩与 VIEW MORE 高奢探索按钮：精准居中 */ body.luxury-bespoke-body .picOver a.btnEnter { display: flex !important; align-items: center !important; justify-content: center !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; background: rgba(18, 18, 18, 0.35) !important; opacity: 0 !important; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; z-index: 5 !important; text-decoration: none !important; } body.luxury-bespoke-body .picOver:hover a.btnEnter { opacity: 1 !important; } body.luxury-bespoke-body .picOver a.btnEnter span, body.luxury-bespoke-body .picOver:hover a.btnEnter span { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: static !important; top: auto !important; left: auto !important; margin: 0 !important; animation: none !important; -webkit-animation: none !important; gap: 8px !important; padding: 10px 24px !important; font-family: var(--font-sans) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 2px !important; color: #1a1a1a !important; background: #ffffff !important; border: 1px solid rgba(197, 155, 72, 0.5) !important; border-radius: 30px !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25) !important; transform: translateY(8px) !important; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; } body.luxury-bespoke-body .picOver:hover a.btnEnter span { transform: translateY(0) !important; } body.luxury-bespoke-body .picOver:hover a.btnEnter span:hover { background: var(--lux-gold) !important; color: #ffffff !important; border-color: var(--lux-gold) !important; } /* 標題與簡介區塊：統一排版與限高 */ body.luxury-bespoke-body #caseWrap .box .title, body.luxury-bespoke-body .picOver .title { padding: 20px 22px 14px 22px !important; background: #ffffff !important; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; } body.luxury-bespoke-body #caseWrap .box .title h2, body.luxury-bespoke-body .picOver .title h2 { font-family: var(--font-sans) !important; font-size: 16px !important; font-weight: 700 !important; color: #1a1a1a !important; line-height: 1.45 !important; margin: 0 0 10px 0 !important; height: 46px !important; /* 精確兩行高度，多餘省略 */ overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; text-overflow: ellipsis !important; letter-spacing: 0.5px !important; } body.luxury-bespoke-body #caseWrap .box .title h3, body.luxury-bespoke-body .picOver .title h3 { margin: 0 !important; font-size: 13px !important; color: #8c867e !important; line-height: 1.5 !important; height: 22px !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; } body.luxury-bespoke-body #caseWrap .box .title h3 span, body.luxury-bespoke-body .picOver .title h3 span { font-size: 12.5px !important; color: #7a756d !important; font-weight: 500 !important; } /* 底部設計師徽章欄位 */ body.luxury-bespoke-body #caseWrap .box .data, body.luxury-bespoke-body .picOver .data { background: #faf8f5 !important; border-top: 1px solid rgba(0, 0, 0, 0.05) !important; padding: 12px 22px !important; margin-top: auto !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } body.luxury-bespoke-body #caseWrap .box .data li, body.luxury-bespoke-body .picOver .data li { list-style: none !important; font-size: 13px !important; color: #555555 !important; font-weight: 500 !important; display: flex !important; align-items: center !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; width: 100% !important; } body.luxury-bespoke-body #caseWrap .box .data li span, body.luxury-bespoke-body .picOver .data li span { color: #1a1a1a !important; font-weight: 700 !important; } body.luxury-bespoke-body #caseWrap .box .data li::before { content: '✦' !important; color: var(--lux-gold) !important; font-size: 12px !important; } /* ========================================================================== 優惠活動列表卡片佈局與高定設計重構 (Event Cards Grid & Bespoke Overhaul) 解決卡片挨在一起、無間距問題，並重塑意式極簡高定視覺 ========================================================================== */ body.luxury-bespoke-body #eventWrap .row { display: flex !important; flex-wrap: wrap !important; gap: 32px !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 25px !important; } body.luxury-bespoke-body #eventWrap .row::before, body.luxury-bespoke-body #eventWrap .row::after { display: none !important; } body.luxury-bespoke-body #eventWrap .visible-992, body.luxury-bespoke-body #eventWrap .row > .clearboth { display: none !important; } body.luxury-bespoke-body #eventWrap .box { width: calc((100% - 64px) / 3) !important; margin: 0 !important; padding: 0 !important; float: none !important; background: #ffffff !important; border-radius: 16px !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; height: 480px !important; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; position: relative !important; } body.luxury-bespoke-body #eventWrap .box:hover { transform: translateY(-8px) !important; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1) !important; border-color: rgba(197, 155, 72, 0.35) !important; } /* 活動圖片高奢裁切與懸浮動效 */ body.luxury-bespoke-body #eventWrap .box .pic { position: relative !important; width: 100% !important; height: 250px !important; overflow: hidden !important; background-color: #1a1a1a !important; flex-shrink: 0 !important; } body.luxury-bespoke-body #eventWrap .box .pic img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease !important; display: block !important; } body.luxury-bespoke-body #eventWrap .box:hover .pic img { transform: scale(1.06) !important; filter: brightness(0.9) !important; } /* 活動卡片內容區塊 (info) 高雅排版 */ body.luxury-bespoke-body #eventWrap .box .info { padding: 22px 24px 20px 24px !important; height: auto !important; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; background: #ffffff !important; overflow: hidden !important; } body.luxury-bespoke-body #eventWrap .box .info h3 { font-family: var(--font-sans) !important; font-size: 16.5px !important; font-weight: 700 !important; color: #1a1a1a !important; line-height: 1.45 !important; margin: 0 0 10px 0 !important; height: 48px !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; text-overflow: ellipsis !important; white-space: normal !important; letter-spacing: 0.5px !important; } body.luxury-bespoke-body #eventWrap .box .info h3 a { color: #1a1a1a !important; text-decoration: none !important; transition: color 0.3s ease !important; } body.luxury-bespoke-body #eventWrap .box:hover .info h3 a { color: var(--lux-gold) !important; } body.luxury-bespoke-body #eventWrap .box .info p { font-size: 13.5px !important; color: #777777 !important; line-height: 1.65 !important; font-weight: 400 !important; margin: 0 !important; height: 44px !important; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; text-overflow: ellipsis !important; } /* 響應式佈局適配：平板 2 欄，手機 1 欄 */ @media (max-width: 992px) { body.luxury-bespoke-body #eventWrap .row { gap: 20px !important; } body.luxury-bespoke-body #eventWrap .box { width: calc((100% - 20px) / 2) !important; height: 460px !important; } body.luxury-bespoke-body #eventWrap .box .pic { height: 230px !important; } } @media (max-width: 640px) { body.luxury-bespoke-body #eventWrap .box { width: 100% !important; height: auto !important; min-height: 400px !important; } body.luxury-bespoke-body #eventWrap .box .pic { height: 220px !important; } } /* ========================================================================== 空間案例列表卡片佈局重構 (Case Cards 3-Column Luxury Grid) 徹底解決舊版浮動/display:flex 覆蓋導致的卡片垂直單列堆疊問題 橫向固定 3 個排列，依次自適應折行，間距 32px 精確對齊 1440px ========================================================================== */ body.luxury-bespoke-body #caseWrap .row { display: flex !important; flex-wrap: wrap !important; gap: 32px !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 30px !important; width: 100% !important; } body.luxury-bespoke-body #caseWrap .row::before, body.luxury-bespoke-body #caseWrap .row::after { display: none !important; } body.luxury-bespoke-body #caseWrap .row > .clearboth { display: none !important; } body.luxury-bespoke-body #caseWrap .box, body.luxury-bespoke-body #caseWrap .box.picOver, body.luxury-bespoke-body #caseWrap .box.col-md-4 { width: calc((100% - 64px) / 3) !important; max-width: calc((100% - 64px) / 3) !important; flex: 0 0 calc((100% - 64px) / 3) !important; margin: 0 !important; padding: 0 !important; float: none !important; display: flex !important; flex-direction: column !important; height: 490px !important; background: #ffffff !important; border-radius: 16px !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important; overflow: hidden !important; position: relative !important; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } body.luxury-bespoke-body #caseWrap .box:hover { transform: translateY(-8px) !important; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1) !important; border-color: rgba(197, 155, 72, 0.35) !important; } /* 平板與手機維持雙欄案例網格 */ @media (max-width: 992px) { body.luxury-bespoke-body #caseWrap .row { gap: 20px !important; } body.luxury-bespoke-body #caseWrap .box, body.luxury-bespoke-body #caseWrap .box.picOver, body.luxury-bespoke-body #caseWrap .box.col-md-4 { width: calc((100% - 20px) / 2) !important; max-width: calc((100% - 20px) / 2) !important; flex: 0 0 calc((100% - 20px) / 2) !important; height: 470px !important; } } @media (max-width: 640px) { body.luxury-bespoke-body #caseWrap .row { gap: 12px !important; } body.luxury-bespoke-body #caseWrap .box, body.luxury-bespoke-body #caseWrap .box.picOver, body.luxury-bespoke-body #caseWrap .box.col-md-4 { width: calc((100% - 12px) / 2) !important; max-width: calc((100% - 12px) / 2) !important; flex: 0 0 calc((100% - 12px) / 2) !important; height: auto !important; min-height: 0 !important; border-radius: 10px !important; } body.luxury-bespoke-body #caseWrap .box .pic { height: auto !important; aspect-ratio: 4 / 3; } body.luxury-bespoke-body #caseWrap .box .title { padding: 10px 10px 8px !important; } body.luxury-bespoke-body #caseWrap .box .title h2 { font-size: 13px !important; line-height: 1.45 !important; height: 38px !important; overflow: hidden; } body.luxury-bespoke-body #caseWrap .box .title h3 { font-size: 10px !important; } body.luxury-bespoke-body #caseWrap .box .data { padding: 8px 10px 10px !important; } body.luxury-bespoke-body #caseWrap .box .data li { font-size: 10px !important; line-height: 1.5 !important; } } /* ========================================================================== 最佳服務設計師列表卡片重構 (Designer Cards 3-Column Luxury Bespoke Grid) 1. 確保人物頭像居上對齊 (object-position: top center)，露出設計師臉龐肖像 2. 卡片高度適度延伸 (510px)，給予人物上半身充足展示空間 3. 統一 3 欄橫向排列，32px 間距，1440px 邊界對齊 ========================================================================== */ body.luxury-bespoke-body #designerWrap .row { display: flex !important; flex-wrap: wrap !important; gap: 32px !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 30px !important; width: 100% !important; } body.luxury-bespoke-body #designerWrap .row::before, body.luxury-bespoke-body #designerWrap .row::after { display: none !important; } body.luxury-bespoke-body #designerWrap .visible-480, body.luxury-bespoke-body #designerWrap .visible-992, body.luxury-bespoke-body #designerWrap .row > .clearboth { display: none !important; } body.luxury-bespoke-body #designerWrap .box { width: calc((100% - 64px) / 3) !important; max-width: calc((100% - 64px) / 3) !important; flex: 0 0 calc((100% - 64px) / 3) !important; margin: 0 !important; padding: 0 !important; float: none !important; display: flex !important; flex-direction: column !important; height: 520px !important; background: #ffffff !important; border-radius: 16px !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important; overflow: hidden !important; position: relative !important; text-decoration: none !important; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } body.luxury-bespoke-body #designerWrap .box:hover { transform: translateY(-8px) !important; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1) !important; border-color: rgba(197, 155, 72, 0.35) !important; } /* 設計師頭像容器：擴大為 390px 高度，並鎖定頭部肖像焦點 (top center) */ body.luxury-bespoke-body #designerWrap .box .pic { position: relative !important; width: 100% !important; height: 400px !important; overflow: hidden !important; background-color: #f7f5f0 !important; flex-shrink: 0 !important; } body.luxury-bespoke-body #designerWrap .box .pic img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: top center !important; /* 核心：聚焦於設計師面部肖像，絕不裁切頭部 */ transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease !important; display: block !important; } body.luxury-bespoke-body #designerWrap .box:hover .pic img { transform: scale(1.05) !important; filter: brightness(0.92) !important; } /* 設計師資訊卡底欄 (txt) 高雅排版 */ body.luxury-bespoke-body #designerWrap .box .txt { background: #ffffff !important; padding: 20px 24px 18px 24px !important; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; justify-content: center !important; border-top: 1px solid rgba(0, 0, 0, 0.04) !important; } body.luxury-bespoke-body #designerWrap .box .txt .h3 { font-family: var(--font-sans) !important; font-size: 16.5px !important; font-weight: 700 !important; color: #1a1a1a !important; margin: 0 0 8px 0 !important; letter-spacing: 0.5px !important; line-height: 1.4 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } body.luxury-bespoke-body #designerWrap .box .txt > div { display: flex !important; align-items: center !important; justify-content: space-between !important; } body.luxury-bespoke-body #designerWrap .box .txt .s-ti { font-size: 13px !important; color: #8c867e !important; font-weight: 500 !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; } body.luxury-bespoke-body #designerWrap .box .txt .s-ti::before { content: '✦' !important; color: var(--lux-gold) !important; font-size: 11px !important; } body.luxury-bespoke-body #designerWrap .box .txt .more { font-family: var(--font-serif) !important; font-size: 11.5px !important; letter-spacing: 1.5px !important; color: var(--lux-gold) !important; font-weight: 600 !important; transition: transform 0.3s ease !important; } body.luxury-bespoke-body #designerWrap .box:hover .txt .more { transform: translateX(4px) !important; color: #1a1a1a !important; } /* 移除舊版藍色 VIEW 偽元素干擾 */ body.luxury-bespoke-body #designerWrap .box .pic::before, body.luxury-bespoke-body #designerWrap .box .pic::after { display: none !important; } /* 平板端 2 欄，手機端 1 欄 */ @media (max-width: 992px) { body.luxury-bespoke-body #designerWrap .row { gap: 20px !important; } body.luxury-bespoke-body #designerWrap .box { width: calc((100% - 20px) / 2) !important; max-width: calc((100% - 20px) / 2) !important; flex: 0 0 calc((100% - 20px) / 2) !important; height: 480px !important; } body.luxury-bespoke-body #designerWrap .box .pic { height: 360px !important; } } @media (max-width: 640px) { body.luxury-bespoke-body #designerWrap .box { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; height: auto !important; min-height: 440px !important; } body.luxury-bespoke-body #designerWrap .box .pic { height: 340px !important; } } /* 內頁底部分頁條 (高對比度奢雅設計 - 確保未選中頁碼與文字100%清晰可見) */ body.luxury-bespoke-body .pagination { margin: 40px 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; } body.luxury-bespoke-body .pagination > li { display: inline-block !important; margin: 0 !important; } body.luxury-bespoke-body .pagination > li > a, body.luxury-bespoke-body .pagination > li > span { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 44px !important; height: 44px !important; padding: 0 16px !important; background-color: #2e3235 !important; border: 1px solid #484d50 !important; color: #ffffff !important; /* 純白高清晰文字，杜絕與背景同色看不清 */ border-radius: 8px !important; font-size: 14px !important; font-weight: 600 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; transition: all 0.3s ease !important; text-decoration: none !important; } /* 鼠標懸停未選中頁 */ body.luxury-bespoke-body .pagination > li > a:hover { background-color: #42474b !important; border-color: var(--lux-gold) !important; color: var(--lux-gold) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important; } /* 當前高亮選中頁 (奢雅高光) */ body.luxury-bespoke-body .pagination > .active > a, body.luxury-bespoke-body .pagination > .active > span, body.luxury-bespoke-body .pagination > .active > a:hover, body.luxury-bespoke-body .pagination > .active > span:hover { background: linear-gradient(135deg, #c59b48 0%, #aa7e2a 100%) !important; border-color: #c59b48 !important; color: #ffffff !important; box-shadow: 0 4px 16px rgba(197, 155, 72, 0.4) !important; cursor: default !important; } /* 禁用按鈕 (例如第 1 頁時的上一頁) */ body.luxury-bespoke-body .pagination > .disabled > a, body.luxury-bespoke-body .pagination > .disabled > span, body.luxury-bespoke-body .pagination > .disabled > a:hover { background-color: #242729 !important; border-color: #383c3e !important; color: rgba(255, 255, 255, 0.35) !important; cursor: not-allowed !important; box-shadow: none !important; transform: none !important; opacity: 0.7 !important; } /* 預約等操作主按鈕 (替代原粗糙 flash 按鈕) */ body.luxury-bespoke-body .newBtn a { background: linear-gradient(135deg, #c59b48 0%, #aa7e2a 100%) !important; color: #ffffff !important; border-radius: 40px !important; padding: 14px 36px !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 2px !important; box-shadow: 0 8px 25px rgba(197, 155, 72, 0.3) !important; border: none !important; transition: all 0.35s ease !important; } body.luxury-bespoke-body .newBtn a:hover { transform: translateY(-2px) !important; box-shadow: 0 12px 30px rgba(197, 155, 72, 0.45) !important; } /* 優勢特色區塊 (bottom-box) */ body.luxury-bespoke-body .bottom-box { background: #ffffff !important; border-radius: 14px !important; padding: 36px !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.03) !important; margin: 40px 0 !important; } body.luxury-bespoke-body .bottom-box h2 { font-family: var(--font-serif) !important; font-size: 22px !important; font-weight: 700 !important; color: #1a1a1a !important; letter-spacing: 1.5px !important; } body.luxury-bespoke-body .bottom-box h2 span { font-size: 12px !important; letter-spacing: 2.5px !important; color: var(--lux-gold) !important; text-transform: uppercase !important; } /* ========================================================================== 10. 全局 1440px 大氣格局與子模組/次級分類選單高定重構 (Subpage 1440px Overhaul) ========================================================================== */ /* (1) 全站中間內容區塊寬度統一擴展至 1440px，徹底清空左右間距 (padding: 0)，頂格對齊 1440px 邊界 */ body.luxury-bespoke-body .container, body.luxury-bespoke-body .styleBg .container, body.luxury-bespoke-body .styleBg.new .container, body.luxury-bespoke-body #caseWrap .container, body.luxury-bespoke-body #locationWrap .container, body.luxury-bespoke-body #eventWrap .container, body.luxury-bespoke-body #service .container, body.luxury-bespoke-body .luxury-bespoke-goods-main .container, body.luxury-bespoke-body .philosophy.container, body.luxury-bespoke-body #adventage.container, body.luxury-bespoke-body #designerWrap .container, body.luxury-bespoke-body #expertWrap .container, body.luxury-bespoke-body #famousWrap .container, body.luxury-bespoke-body #appointWrap .container, body.luxury-bespoke-body #contactWrap .container, body.luxury-bespoke-body #blog.container, body.luxury-bespoke-body #about > #blog.container { max-width: 1440px !important; width: 1440px !important; padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: auto !important; margin-right: auto !important; } @media (min-width: 1440px) { body.luxury-bespoke-body .container, body.luxury-bespoke-body .styleBg .container, body.luxury-bespoke-body .styleBg.new .container, body.luxury-bespoke-body #caseWrap .container, body.luxury-bespoke-body #locationWrap .container, body.luxury-bespoke-body #eventWrap .container, body.luxury-bespoke-body #service .container, body.luxury-bespoke-body .luxury-bespoke-goods-main .container, body.luxury-bespoke-body .philosophy.container, body.luxury-bespoke-body #adventage.container, body.luxury-bespoke-body #designerWrap .container, body.luxury-bespoke-body #expertWrap .container, body.luxury-bespoke-body #famousWrap .container, body.luxury-bespoke-body #appointWrap .container, body.luxury-bespoke-body #contactWrap .container, body.luxury-bespoke-body #blog.container, body.luxury-bespoke-body #about > #blog.container { width: 1440px !important; max-width: 1440px !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: auto !important; margin-right: auto !important; } } @media (max-width: 1439px) { body.luxury-bespoke-body .container, body.luxury-bespoke-body .styleBg .container, body.luxury-bespoke-body .styleBg.new .container, body.luxury-bespoke-body #caseWrap .container, body.luxury-bespoke-body #locationWrap .container, body.luxury-bespoke-body #eventWrap .container, body.luxury-bespoke-body #service .container, body.luxury-bespoke-body .luxury-bespoke-goods-main .container, body.luxury-bespoke-body .philosophy.container, body.luxury-bespoke-body #adventage.container, body.luxury-bespoke-body #designerWrap .container, body.luxury-bespoke-body #expertWrap .container, body.luxury-bespoke-body #famousWrap .container, body.luxury-bespoke-body #appointWrap .container, body.luxury-bespoke-body #contactWrap .container, body.luxury-bespoke-body #blog.container, body.luxury-bespoke-body #about > #blog.container { width: 100% !important; max-width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; } } /* 博客主体使用完整可用宽度；大屏上限保持 1440px。 */ @media (max-width: 1439px) { body.luxury-bespoke-body #blog.container, body.luxury-bespoke-body #about > #blog.container { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } } /* (2) 頁眉次級導航標籤 (#navCategory / #aside / .md-navWrap) 重塑 徹底告別舊版深藍對話氣泡與三角形，升級為高奢膠囊徽標與微光金線 */ body.luxury-bespoke-body #aside { float: right !important; padding: 0 !important; margin-top: 4px !important; } /* 全屋訂製頁專屬：次級選單移至橫幅下方後，改為居中大氣排版 */ body.luxury-bespoke-body .luxury-goods-subnav, body.luxury-bespoke-body .luxury-bespoke-goods-main #aside.luxury-goods-subnav { float: none !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin: 35px auto 40px auto !important; padding: 0 !important; clear: both !important; } body.luxury-bespoke-body .luxury-goods-subnav .md-navWrap { display: flex !important; justify-content: center !important; width: auto !important; } body.luxury-bespoke-body .luxury-goods-subnav #navCategory { display: flex !important; justify-content: center !important; align-items: center !important; gap: 12px !important; } body.luxury-bespoke-body .md-navWrap { display: block !important; background: transparent !important; } body.luxury-bespoke-body #navCategory { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; background: transparent !important; padding: 0 !important; margin: 0 !important; } body.luxury-bespoke-body #navCategory li { display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; border: none !important; } body.luxury-bespoke-body #navCategory li h2 { margin: 0 !important; font-size: 14px !important; line-height: normal !important; font-weight: 500 !important; } /* 消除原版 CSS 畫的下三角形箭頭 ::after */ body.luxury-bespoke-body #navCategory li h2:after, body.luxury-bespoke-body #navCategory li:after, body.luxury-bespoke-body #navCategory li a:after { display: none !important; content: none !important; } /* 導航標籤本體 (未選中狀態) */ body.luxury-bespoke-body #navCategory li a { display: inline-flex !important; align-items: center !important; padding: 8px 18px !important; font-size: 13.5px !important; font-weight: 500 !important; color: #555555 !important; background: rgba(255, 255, 255, 0.9) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 30px !important; line-height: 1.4 !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important; text-decoration: none !important; } body.luxury-bespoke-body #navCategory li a:hover { color: #1a1a1a !important; background: #ffffff !important; border-color: var(--lux-gold) !important; transform: translateY(-2px) !important; box-shadow: 0 4px 14px rgba(197, 155, 72, 0.18) !important; } /* 當前選中標籤 (Active 狀態：黑曜石底 + 奢金高光) */ body.luxury-bespoke-body #navCategory li a.active, body.luxury-bespoke-body #navCategory li h2 a, body.luxury-bespoke-body #navCategory li.current a, body.luxury-bespoke-body #navCategory li.ser a, body.luxury-bespoke-body #navCategory li.ser h2 a { background: #181818 !important; color: #f7e6c0 !important; border: 1px solid #181818 !important; font-weight: 600 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important; transform: translateY(-1px) !important; } /* 移動端展開按鈕 (.navCateBtn) */ body.luxury-bespoke-body .navCateBtn { background: #181818 !important; border: 1px solid rgba(197, 155, 72, 0.3) !important; border-radius: 8px !important; color: #f7e6c0 !important; padding: 10px 16px !important; } /* (3) 全屋訂製 / 商品系列次級導航條 (.pro-top-mune) 重塑 徹底告別舊版深藍 #084783，升級為高雅毛玻璃橫幅與沉浸感交互 */ body.luxury-bespoke-body .pro-top-mune { position: relative !important; top: 0 !important; left: 0 !important; width: 100% !important; max-width: 1440px !important; margin: 20px auto 30px auto !important; padding: 12px 24px !important; text-align: center !important; background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(197, 155, 72, 0.2) !important; border-radius: 50px !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; flex-wrap: wrap !important; z-index: 99 !important; } body.luxury-bespoke-body .pro-top-mune li { display: inline-block !important; } body.luxury-bespoke-body .pro-top-mune li > a { display: inline-block !important; line-height: 1.5 !important; padding: 9px 24px !important; color: #4a453f !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 1px !important; border-radius: 30px !important; background: transparent !important; border: 1px solid transparent !important; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; text-decoration: none !important; } body.luxury-bespoke-body .pro-top-mune li > a:hover { color: #1a1a1a !important; background: rgba(197, 155, 72, 0.12) !important; border-color: rgba(197, 155, 72, 0.3) !important; transform: translateY(-2px) !important; } body.luxury-bespoke-body .pro-top-mune li > a.current { color: #ffffff !important; background: #181818 !important; border-color: #181818 !important; font-weight: 600 !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18) !important; } /* (4) 商品輪播展示區 (.good-list-ban / .gallary-slick) 高定質感化 */ body.luxury-bespoke-body .good-list-ban { max-width: 1440px !important; margin: 0 auto 50px auto !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08) !important; } body.luxury-bespoke-body .gallary-slick .slider-large .slick-slide .banner-txt { background: linear-gradient(135deg, rgba(24, 24, 24, 0.85) 0%, rgba(24, 24, 24, 0.5) 100%) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(197, 155, 72, 0.3) !important; border-radius: 12px !important; padding: 30px 40px !important; } body.luxury-bespoke-body .gallary-slick .slider-large .slick-slide .banner-txt .eName { font-family: var(--font-serif) !important; color: var(--lux-gold) !important; letter-spacing: 3px !important; text-transform: uppercase !important; } body.luxury-bespoke-body .gallary-slick .slider-large .slick-slide .banner-txt .chName { font-family: var(--font-sans) !important; font-weight: 700 !important; letter-spacing: 2px !important; color: #ffffff !important; } body.luxury-bespoke-body .viewmoreBtn { background: linear-gradient(135deg, #c59b48 0%, #aa7e2a 100%) !important; color: #ffffff !important; border-radius: 30px !important; padding: 8px 24px !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 1.5px !important; text-decoration: none !important; display: inline-block !important; transition: all 0.3s ease !important; } body.luxury-bespoke-body .viewmoreBtn:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(197, 155, 72, 0.4) !important; color: #ffffff !important; } body.luxury-bespoke-body .gallary-slick .slider-thumb .slick-current .item { border: 3px solid var(--lux-gold) !important; border-radius: 8px !important; } body.luxury-bespoke-body .gallary-slick .slider-thumb .slick-current:before { border-color: transparent transparent var(--lux-gold) transparent !important; } /* (5) 文章列表 (blogBox) 與側邊欄 (sBox) 高奢重塑 */ body.luxury-bespoke-body .blogBox { background: #ffffff !important; border-radius: 14px !important; padding: 32px !important; border: 1px solid rgba(0, 0, 0, 0.05) !important; box-shadow: 0 6px 25px rgba(0, 0, 0, 0.03) !important; margin-bottom: 35px !important; transition: all 0.35s ease !important; } body.luxury-bespoke-body .blogBox:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 35px rgba(0, 0, 0, 0.07) !important; border-color: rgba(197, 155, 72, 0.25) !important; } body.luxury-bespoke-body .blogBox .title a { font-family: var(--font-sans) !important; font-size: 20px !important; font-weight: 700 !important; color: #1a1a1a !important; line-height: 1.5 !important; transition: color 0.3s ease !important; } body.luxury-bespoke-body .blogBox .title a:hover { color: var(--lux-gold) !important; text-decoration: none !important; } body.luxury-bespoke-body .blogBox .info { color: #8c867e !important; font-size: 13px !important; margin: 10px 0 16px 0 !important; } body.luxury-bespoke-body .blogBox .info .gap { border-right: 1px solid rgba(0, 0, 0, 0.1) !important; padding-right: 12px !important; margin-right: 12px !important; } body.luxury-bespoke-body .blogBox .txt { color: #555555 !important; font-size: 14.5px !important; line-height: 1.8 !important; margin-top: 15px !important; } /* ========================================================================== (5) 文章列表 (blogBox) 與側邊欄 (sBox) 高奢重塑 ========================================================================== */ /* 消除原版約定的黑底背景與強制內縮 padding */ body.luxury-bespoke-body #blog .boxR, body.luxury-bespoke-body .news .boxR, body.luxury-bespoke-body .boxR { background: transparent !important; padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; } /* 1440 大氣佈局：左側內容區與右側側邊欄卡片空間分配 */ @media (min-width: 992px) { body.luxury-bespoke-body #blog > .row { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; margin-left: 0 !important; margin-right: 0 !important; } body.luxury-bespoke-body #blog .boxL { width: calc(100% - 410px) !important; max-width: calc(100% - 410px) !important; float: none !important; padding-left: 0 !important; padding-right: 0 !important; left: -12px; } body.luxury-bespoke-body #blog .boxR { width: 375px !important; max-width: 375px !important; float: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-right: 0 !important; right: -12px; } } @media (max-width: 991px) { body.luxury-bespoke-body #blog .boxL, body.luxury-bespoke-body #blog .boxR { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } body.luxury-bespoke-body #blog .boxR { margin-top: 30px !important; } } /* 側邊欄卡片外層嵌套行重設 */ body.luxury-bespoke-body #blog .boxR .row { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; } /* 側邊欄精緻卡片本體：優雅擴展，與 1440 右邊緣精準切齊 */ body.luxury-bespoke-body #blog .boxR .col-xs-6, body.luxury-bespoke-body #blog .boxR .col-sm-12, body.luxury-bespoke-body .boxR .sBox { width: 100% !important; max-width: 100% !important; float: none !important; background: #ffffff !important; border-radius: 14px !important; padding: 26px 28px !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important; margin-bottom: 24px !important; box-sizing: border-box !important; } /* 卡片頂部標題 */ body.luxury-bespoke-body .boxR .sBox .ti { margin-bottom: 18px !important; padding-bottom: 12px !important; border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important; position: relative !important; } body.luxury-bespoke-body .boxR .sBox .ti .line { font-family: var(--font-sans) !important; font-size: 17px !important; font-weight: 700 !important; color: #1a1a1a !important; border-left: 3.5px solid var(--lux-gold) !important; padding-left: 12px !important; display: inline-block !important; letter-spacing: 0.5px !important; } /* 卡片內列表項目 */ body.luxury-bespoke-body .boxR .sBox ul.list { padding: 0 !important; margin: 0 !important; list-style: none !important; } body.luxury-bespoke-body .boxR .sBox ul.list li { position: relative !important; padding: 9px 0 9px 16px !important; border-bottom: 1px dashed rgba(0, 0, 0, 0.05) !important; line-height: 1.5 !important; margin: 0 !important; } body.luxury-bespoke-body .boxR .sBox ul.list li:last-child { border-bottom: none !important; } body.luxury-bespoke-body .boxR .sBox ul.list li::before { content: "" !important; position: absolute !important; left: 2px !important; top: 17px !important; width: 5px !important; height: 5px !important; border-radius: 50% !important; background-color: #a8a39a !important; transition: background-color 0.25s ease !important; } body.luxury-bespoke-body .boxR .sBox ul.list li:hover::before { background-color: var(--lux-gold) !important; } body.luxury-bespoke-body .boxR .sBox ul.list li a { color: #4a4a4a !important; font-size: 13.8px !important; line-height: 1.6 !important; transition: all 0.25s ease !important; text-decoration: none !important; } body.luxury-bespoke-body .boxR .sBox ul.list li a:hover { color: var(--lux-gold) !important; padding-left: 4px !important; text-decoration: none !important; } body.luxury-bespoke-body .boxR .sBox .people { color: #777777 !important; font-size: 14px !important; margin-top: 8px !important; } /* ========================================================================== 空間案例詳情頁高定雙欄 2:1 排版重構 (Case Detail 2:1 Layout Overhaul) 左邊大圖畫廊佔 2 份，右邊設計案說明與預約佔 1 份 (66.6% : 33.3%) ========================================================================== */ body.luxury-bespoke-body .case-wrap { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; gap: 36px !important; margin: 15px auto 45px auto !important; width: 100% !important; background: transparent !important; } body.luxury-bespoke-body .case-wrap::before, body.luxury-bespoke-body .case-wrap::after { display: none !important; } /* 左側案例大圖輪播/展示區：精確佔比 2/3 (扣除間距後約 65% ~ 66%) */ body.luxury-bespoke-body .case-wrap .pic { width: calc(66.666% - 24px) !important; max-width: calc(66.666% - 24px) !important; flex: 0 0 calc(66.666% - 24px) !important; float: none !important; background: #ffffff !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.05) !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; padding: 0 !important; } body.luxury-bespoke-body .case-wrap .pic .owl-carousel { width: 100% !important; border-radius: 16px !important; overflow: hidden !important; } /* Slick 會依目前畫面計算每張投影片寬度；不要用固定 100% 寬覆蓋它 */ body.luxury-bespoke-body .case-wrap .pic .owl-wrap.slick-slider .slick-track { display: block !important; } body.luxury-bespoke-body .case-wrap .pic .owl-wrap.slick-slider .slick-slide { display: block !important; float: left !important; box-sizing: border-box !important; border-radius: 16px !important; overflow: hidden !important; } body.luxury-bespoke-body .case-wrap .pic .item img { width: 100% !important; height: 580px !important; object-fit: cover !important; object-position: center !important; display: block !important; } /* 右側設計方案詳情與預約區：精確佔比 1/3 (約 33.3% - 12px) */ body.luxury-bespoke-body .case-wrap .cont { width: calc(33.333% - 12px) !important; max-width: calc(33.333% - 12px) !important; flex: 0 0 calc(33.333% - 12px) !important; float: none !important; background: #ffffff !important; border-radius: 16px !important; padding: 32px 30px !important; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.05) !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; box-sizing: border-box !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; } body.luxury-bespoke-body .case-wrap .cont h3 { font-family: var(--font-sans) !important; font-size: 21px !important; font-weight: 700 !important; color: #1a1a1a !important; line-height: 1.45 !important; margin: 0 0 18px 0 !important; padding: 0 0 16px 0 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important; letter-spacing: 0.5px !important; } body.luxury-bespoke-body .case-wrap .cont .data { padding: 10px 0 !important; font-size: 14px !important; color: #555555 !important; border-bottom: 1px dashed rgba(0, 0, 0, 0.06) !important; display: flex !important; align-items: center !important; } body.luxury-bespoke-body .case-wrap .cont .data span { font-weight: 600 !important; color: #8c867e !important; min-width: 80px !important; display: inline-block !important; background: none !important; padding-right: 0 !important; } body.luxury-bespoke-body .case-wrap .cont .data span::after { content: '／' !important; margin: 0 6px !important; color: #d0cbc3 !important; } body.luxury-bespoke-body .case-wrap .cont .detail { width: 100% !important; margin: 20px 0 !important; font-size: 14px !important; line-height: 1.8 !important; color: #4a4a4a !important; text-align: justify !important; } body.luxury-bespoke-body .case-wrap .cont .newBtn { margin-top: auto !important; padding-top: 15px !important; display: flex !important; gap: 12px !important; } body.luxury-bespoke-body .case-wrap .cont .newBtn a { flex: 1 !important; text-align: center !important; padding: 12px 16px !important; font-size: 13.5px !important; border-radius: 30px !important; } body.luxury-bespoke-body .case-wrap .cont .newBtn a:first-child { background: linear-gradient(135deg, #c59b48 0%, #aa7e2a 100%) !important; color: #ffffff !important; } body.luxury-bespoke-body .case-wrap .cont .newBtn a:last-child { background: #f7f5f0 !important; color: #555555 !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: none !important; } body.luxury-bespoke-body .case-wrap .cont .newBtn a:last-child:hover { background: #181818 !important; color: #f7e6c0 !important; border-color: #181818 !important; } /* 響應式：平板與手機端轉為單欄 */ @media (max-width: 991px) { body.luxury-bespoke-body .case-wrap { flex-direction: column !important; gap: 25px !important; } body.luxury-bespoke-body .case-wrap .pic, body.luxury-bespoke-body .case-wrap .cont { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } body.luxury-bespoke-body .case-wrap .pic .item img { height: 420px !important; } } /* ========================================================================== 11. 全屋高定專屬展廳 (goods.html Bespoke Whole House Gallery Styling) ========================================================================== */ .luxury-bespoke-goods-main { padding-bottom: 80px; } /* 品牌哲學引言橫幅 */ .luxury-goods-intro-banner { background: #ffffff; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 6px 28px rgba(0, 0, 0, 0.03); padding: 40px 48px; margin-bottom: 45px; position: relative; overflow: hidden; } .luxury-goods-intro-banner::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: linear-gradient(180deg, var(--lux-gold) 0%, #aa7e2a 100%); } .luxury-tag-gold { display: inline-block; font-family: var(--font-serif); font-size: 12px; font-weight: 600; letter-spacing: 3px; color: var(--lux-gold); text-transform: uppercase; margin-bottom: 10px; } .luxury-goods-intro-content h2 { font-family: var(--font-sans); font-size: 24px; font-weight: 700; color: #1a1a1a; letter-spacing: 1px; margin: 0 0 16px 0; } .luxury-goods-intro-content p { color: #555555; font-size: 15px; line-height: 1.85; max-width: 980px; margin-bottom: 25px; } .luxury-goods-highlights { display: flex; flex-wrap: wrap; gap: 30px; border-top: 1px solid rgba(0, 0, 0, 0.06); padding-top: 20px; } .luxury-goods-highlights .hl-item { display: flex; align-items: center; gap: 10px; } .luxury-goods-highlights .hl-item .num { font-family: var(--font-serif); font-size: 18px; font-weight: 700; color: var(--lux-gold); } .luxury-goods-highlights .hl-item .txt { font-size: 13.5px; color: #333333; font-weight: 600; } /* 區塊標題 */ .section-title-wrap { text-align: center; margin-bottom: 35px; } .section-sub-en { display: block; font-family: var(--font-serif); font-size: 12px; letter-spacing: 3.5px; color: var(--lux-gold); text-transform: uppercase; margin-bottom: 8px; } .section-main-zh { font-family: var(--font-sans); font-size: 26px; font-weight: 700; color: #1a1a1a; letter-spacing: 1.5px; margin: 0 0 8px 0; } .section-desc { font-size: 14px; color: #777777; } /* 五大空間卡片規格 */ body.luxury-bespoke-body .luxury-goods-cards-row { margin-left: 0 !important; margin-right: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 30px !important; width: 100% !important; } body.luxury-bespoke-body .luxury-goods-cards-row > .luxury-goods-col { width: calc((100% - 60px) / 3) !important; max-width: calc((100% - 60px) / 3) !important; flex: 0 0 calc((100% - 60px) / 3) !important; padding: 0 !important; margin: 0 0 30px 0 !important; } .luxury-goods-card { background: #ffffff; border-radius: 14px; border: 1px solid rgba(0, 0, 0, 0.06); overflow: hidden; box-shadow: 0 6px 25px rgba(0, 0, 0, 0.04); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; height: 520px; /* 統一規格高度 */ } .luxury-goods-card:hover { transform: translateY(-8px); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1); border-color: rgba(197, 155, 72, 0.4); } .luxury-goods-card .card-cover { position: relative; width: 100%; height: 220px; overflow: hidden; background: #181818; flex-shrink: 0; } .luxury-goods-card .card-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); } .luxury-goods-card:hover .card-cover img { transform: scale(1.08); } .card-space-badge { position: absolute; top: 14px; left: 14px; background: rgba(18, 18, 18, 0.85); backdrop-filter: blur(8px); color: #f7e6c0; border: 1px solid rgba(197, 155, 72, 0.4); padding: 5px 14px; border-radius: 20px; font-size: 11.5px; font-weight: 600; letter-spacing: 1px; } .luxury-goods-card .card-body { padding: 22px 24px; display: flex; flex-direction: column; flex: 1 1 auto; } .luxury-goods-card .card-en { font-family: var(--font-serif); font-size: 11px; letter-spacing: 2px; color: var(--lux-gold); text-transform: uppercase; margin-bottom: 6px; display: block; } .luxury-goods-card .card-title { font-family: var(--font-sans); font-size: 17px; font-weight: 700; color: #1a1a1a; line-height: 1.4; margin: 0 0 10px 0; height: 48px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .luxury-goods-card .card-desc { font-size: 13.5px; color: #666666; line-height: 1.7; margin-bottom: 14px; height: 46px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .luxury-goods-card .card-features { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .luxury-goods-card .card-features span { font-size: 11.5px; color: #555555; background: #f7f5f1; padding: 4px 10px; border-radius: 4px; font-weight: 500; } .luxury-goods-card .card-footer { margin-top: auto; border-top: 1px solid rgba(0, 0, 0, 0.05); padding-top: 14px; } .luxury-card-btn { font-size: 13.5px; font-weight: 600; color: var(--lux-gold); text-decoration: none !important; display: inline-flex; align-items: center; gap: 6px; transition: all 0.3s ease; } .luxury-card-btn:hover { color: #9a7324; transform: translateX(4px); } /* VIP CTA 卡片 */ .card-cta-vip { background: linear-gradient(135deg, #181818 0%, #262420 100%) !important; border: 1px solid rgba(197, 155, 72, 0.4) !important; color: #ffffff; padding: 36px 30px; display: flex; align-items: center; justify-content: center; text-align: center; } .card-cta-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } .card-cta-vip .vip-crown { font-size: 32px; margin-bottom: 12px; } .card-cta-vip .card-en { color: var(--lux-gold); } .card-cta-vip .card-title { color: #ffffff; font-size: 20px; margin-bottom: 12px; height: auto; } .card-cta-vip .card-desc { color: #cccccc; font-size: 13.5px; line-height: 1.7; margin-bottom: 24px; height: auto; } .vip-btn-wrap { display: flex; flex-direction: column; gap: 12px; width: 100%; } .luxury-btn-gold { background: linear-gradient(135deg, #c59b48 0%, #aa7e2a 100%); color: #ffffff; border: none; border-radius: 30px; padding: 12px 24px; font-size: 14px; font-weight: 600; letter-spacing: 1px; cursor: pointer; transition: all 0.35s ease; } .luxury-btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(197, 155, 72, 0.4); } .luxury-btn-outline { border: 1px solid rgba(255, 255, 255, 0.2); color: #e5e5e5; border-radius: 30px; padding: 10px 24px; font-size: 13px; text-decoration: none !important; transition: all 0.3s ease; } .luxury-btn-outline:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; border-color: #ffffff; } /* 四步工序區塊 */ .luxury-goods-process-section { background: #ffffff; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.06); padding: 45px 36px; margin-top: 30px; } .process-grid .step-box { padding: 20px; border-right: 1px solid rgba(0, 0, 0, 0.06); } .process-grid .step-box:last-child { border-right: none; } @media (max-width: 991px) { .process-grid .step-box { border-right: none; border-bottom: 1px solid rgba(0, 0, 0, 0.06); margin-bottom: 20px; } } .process-grid .step-num { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--lux-gold); line-height: 1; margin-bottom: 14px; } .process-grid .step-box h4 { font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0 0 8px 0; line-height: 1.4; } .process-grid .step-box p { font-size: 13px; color: #666666; line-height: 1.7; margin: 0; } /* ========================================================================== 12. 子頁面統一大氣 Hero 橫幅 (Subpage Unified Cinema Hero) ========================================================================== */ .luxury-subpage-hero { position: relative; width: 100%; min-height: 220px; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; margin-bottom: 0 !important; border-bottom: 1px solid rgba(197, 155, 72, 0.2); box-shadow: inset 0 -40px 60px rgba(0, 0, 0, 0.5); } .luxury-subpage-hero-content { text-align: center; max-width: 860px; margin: 0 auto; padding: 38px 20px 34px 20px; } .subpage-badge { display: inline-block; font-family: var(--font-serif); font-size: 11.5px; font-weight: 600; letter-spacing: 3.5px; color: #f7e4be; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(8px); padding: 5px 16px; border-radius: 30px; border: 1px solid rgba(197, 155, 72, 0.4); margin-bottom: 14px; } .subpage-title { font-family: var(--font-sans); font-size: clamp(28px, 3.5vw, 42px); font-weight: 700; color: #ffffff; letter-spacing: 2px; margin: 0 0 14px 0; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6); } .subpage-desc { font-size: clamp(13.5px, 1.2vw, 15.5px); color: rgba(255, 255, 255, 0.9); line-height: 1.8; letter-spacing: 0.8px; margin: 0 auto; } /* ========================================================================== 13. 全屋定製專屬預約表單 (Bespoke Appointment Studio) ========================================================================== */ .luxury-appoint-steps-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 25px 0 35px 0; } @media (max-width: 768px) { .luxury-appoint-steps-bar { grid-template-columns: 1fr; gap: 15px; } } .step-card { background: #ffffff; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.06); padding: 22px 24px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03); display: flex; align-items: flex-start; gap: 16px; transition: all 0.3s ease; } .step-card:hover { transform: translateY(-4px); border-color: rgba(197, 155, 72, 0.35); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06); } .step-card .step-icon { font-family: var(--font-serif); font-size: 26px; font-weight: 700; color: var(--lux-gold); line-height: 1; flex-shrink: 0; } .step-card .step-info h5 { font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0 0 6px 0; } .step-card .step-info p { font-size: 12.5px; color: #666666; line-height: 1.6; margin: 0; } /* 預約表單卡片 */ .luxury-appoint-form-card { background: #ffffff; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 6px 30px rgba(0, 0, 0, 0.04); padding: 40px; margin-bottom: 40px; } @media (max-width: 768px) { .luxury-appoint-form-card { padding: 24px 18px; } } .form-card-header { border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding-bottom: 22px; margin-bottom: 28px; } .form-card-header .tag-gold { font-family: var(--font-serif); font-size: 11.5px; letter-spacing: 2.5px; color: var(--lux-gold); font-weight: 600; text-transform: uppercase; } .form-card-header h3 { font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 6px 0 8px 0; } .form-card-header p { font-size: 13.5px; color: #777777; margin: 0; } .form-section-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 16px; } .form-section-title .num { font-family: var(--font-serif); font-size: 13px; background: #181818; color: #f7e6c0; padding: 2px 8px; border-radius: 4px; } .lux-label { font-size: 13.5px; font-weight: 600; color: #333333; margin-bottom: 8px; display: block; } .lux-label .req { color: #d9534f; margin-right: 4px; } .lux-input { height: 48px !important; border-radius: 8px !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; background-color: #faf9f7 !important; color: #1a1a1a !important; font-size: 14px !important; padding: 0 16px !important; transition: all 0.3s ease !important; box-shadow: none !important; } textarea.lux-input { height: auto !important; padding: 12px 16px !important; } .lux-input:focus { background-color: #ffffff !important; border-color: var(--lux-gold) !important; box-shadow: 0 0 0 3px rgba(197, 155, 72, 0.15) !important; } /* 全屋定製範圍多選標籤 (Pill Checkboxes) */ .luxury-custom-scope-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .scope-tag { cursor: pointer; margin: 0; } .scope-tag input[type="checkbox"] { display: none; } .scope-tag span { display: inline-block; padding: 8px 18px; border-radius: 30px; border: 1px solid rgba(0, 0, 0, 0.1); background: #faf8f5; color: #555555; font-size: 13px; font-weight: 500; transition: all 0.25s ease; } .scope-tag input[type="checkbox"]:checked + span { background: #181818; color: #f7e6c0; border-color: #181818; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } /* 右側側欄卡片 */ .luxury-appoint-side-card { background: #ffffff; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 6px 30px rgba(0, 0, 0, 0.04); overflow: hidden; margin-bottom: 40px; } .luxury-appoint-side-card .side-cover { position: relative; width: 100%; height: 200px; overflow: hidden; } .luxury-appoint-side-card .side-cover img { width: 100%; height: 100%; object-fit: cover; } .luxury-appoint-side-card .side-badge { position: absolute; bottom: 12px; left: 12px; background: rgba(18, 18, 18, 0.85); backdrop-filter: blur(8px); color: #f7e6c0; border: 1px solid rgba(197, 155, 72, 0.4); padding: 4px 12px; border-radius: 20px; font-size: 11px; letter-spacing: 1px; } .luxury-appoint-side-card .side-body { padding: 24px; } .luxury-appoint-side-card .side-en { font-family: var(--font-serif); font-size: 11px; letter-spacing: 2px; color: var(--lux-gold); display: block; margin-bottom: 6px; } .luxury-appoint-side-card h4 { font-size: 17px; font-weight: 700; color: #1a1a1a; margin: 0 0 16px 0; } .luxury-appoint-side-card .side-list { list-style: none; padding: 0; margin: 0 0 20px 0; } .luxury-appoint-side-card .side-list li { font-size: 13.5px; color: #444444; line-height: 1.8; display: flex; align-items: center; gap: 8px; } .luxury-appoint-side-card .side-list li i { color: var(--lux-gold); font-size: 14px; } .side-tel-box { background: #faf8f5; border-radius: 10px; padding: 16px; text-align: center; border: 1px dashed rgba(197, 155, 72, 0.4); } .side-tel-box .tel-label { display: block; font-size: 12px; color: #777777; margin-bottom: 4px; } .side-tel-box .tel-number { font-size: 22px; font-weight: 700; color: var(--lux-gold); text-decoration: none !important; display: block; letter-spacing: 1px; } .side-tel-box .tel-time { font-size: 11px; color: #888888; margin-top: 4px; display: block; } /* 商品頻道卡片：1440px 內容區桌面三欄，CTA 固定排在當頁最後 */ body.luxury-bespoke-body .luxury-bespoke-goods-main .luxury-goods-cards-row { display: flex !important; flex-wrap: wrap !important; gap: 24px !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; } body.luxury-bespoke-body .luxury-bespoke-goods-main .luxury-goods-cards-row::before, body.luxury-bespoke-body .luxury-bespoke-goods-main .luxury-goods-cards-row::after { display: none !important; } body.luxury-bespoke-body .luxury-bespoke-goods-main .luxury-goods-cards-row > .luxury-goods-col { width: calc((100% - 48px) / 3) !important; max-width: calc((100% - 48px) / 3) !important; flex: 0 0 calc((100% - 48px) / 3) !important; padding: 0 !important; margin: 0 0 24px 0 !important; } body.luxury-bespoke-body .luxury-bespoke-goods-main .luxury-goods-cards-row > .luxury-goods-col[style*="display: none"] { display: none !important; } /* 商品頁分頁 */ .luxury-goods-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 50px; } .luxury-goods-pagination button { min-width: 40px; height: 40px; padding: 0 14px; border: 1px solid #d7d2c8; border-radius: 7px; background: #ffffff; color: #37332d; font: inherit; font-weight: 600; cursor: pointer; transition: all .2s ease; } .luxury-goods-pagination button:hover:not(:disabled), .luxury-goods-pagination button[aria-current="page"] { border-color: var(--lux-gold); background: var(--lux-gold); color: #ffffff; } .luxury-goods-pagination button:disabled { color: #a7a198; background: #f1efeb; cursor: default; } /* 主預約按鈕明確排成兩行 */ body.luxury-bespoke-body .luxury-bespoke-goods-main > .container > .newBtn a { display: inline-block !important; width: 270px; max-width: 100%; white-space: normal !important; text-align: center !important; line-height: 1.55 !important; } /* 浮動按鈕改為 LINE 線上諮詢 */ .luxury-float-capsule.luxury-float-line { gap: 9px; padding: 12px 20px; background: #06c755; border: 1px solid #06c755; color: #ffffff !important; letter-spacing: .4px; } .luxury-float-capsule.luxury-float-line:hover { background: #05a947; border-color: #05a947; color: #ffffff !important; box-shadow: 0 12px 35px rgba(6, 199, 85, .32); } .luxury-float-line-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 35px; height: 24px; padding: 0 4px; border: 1.5px solid currentColor; border-radius: 7px; font-size: 9px; font-weight: 800; letter-spacing: -.5px; line-height: 1; } @media (max-width: 991px) { body.luxury-bespoke-body .luxury-bespoke-goods-main .luxury-goods-cards-row > .luxury-goods-col { width: calc((100% - 20px) / 2) !important; max-width: calc((100% - 20px) / 2) !important; flex-basis: calc((100% - 20px) / 2) !important; } body.luxury-bespoke-body .luxury-bespoke-goods-main .luxury-goods-cards-row { gap: 20px !important; } } @media (max-width: 640px) { body.luxury-bespoke-body .luxury-bespoke-goods-main .luxury-goods-cards-row { gap: 12px !important; } body.luxury-bespoke-body .luxury-bespoke-goods-main .luxury-goods-cards-row > .luxury-goods-col { width: calc((100% - 12px) / 2) !important; max-width: calc((100% - 12px) / 2) !important; flex-basis: calc((100% - 12px) / 2) !important; margin-bottom: 12px !important; } body.luxury-bespoke-body .luxury-bespoke-goods-main .luxury-goods-card { height: 470px; } body.luxury-bespoke-body .luxury-bespoke-goods-main .luxury-goods-card .card-cover { height: 145px; } body.luxury-bespoke-body .luxury-bespoke-goods-main .luxury-goods-card .card-body { padding: 14px 12px; } body.luxury-bespoke-body .luxury-bespoke-goods-main .luxury-goods-card .card-title { font-size: 14px; } body.luxury-bespoke-body .luxury-bespoke-goods-main .luxury-goods-card .card-desc { font-size: 12px; } .luxury-float-capsule.luxury-float-line { padding: 10px 14px; font-size: 12px; } } /* 博客双栏与文章卡片统一 10px 间距 */ body.luxury-bespoke-body .blogBox { margin-bottom: 10px !important; } body.luxury-bespoke-body #blog .boxR .sBox { margin-bottom: 10px !important; } body.luxury-bespoke-body #blog > .row::before, body.luxury-bespoke-body #blog > .row::after { display: none !important; } @media (min-width: 992px) { body.luxury-bespoke-body #blog > .row { justify-content: flex-start !important; column-gap: 10px !important; row-gap: 10px !important; } body.luxury-bespoke-body #blog .boxL { width: calc(100% - 385px) !important; max-width: calc(100% - 385px) !important; left: auto !important; margin: 0 !important; } body.luxury-bespoke-body #blog .boxR { width: 375px !important; max-width: 375px !important; right: auto !important; margin: 0 !important; } } @media (max-width: 991px) { body.luxury-bespoke-body #blog .boxR { margin-top: 10px !important; } } /* LINE 浮動入口採用圓形按鈕 */ .luxury-float-capsule.luxury-float-line { width: 60px; height: 60px; min-width: 60px; padding: 0 !important; border-radius: 50%; justify-content: center; gap: 0; box-shadow: 0 8px 24px rgba(6, 199, 85, .28); } .luxury-float-capsule.luxury-float-line > span:last-child { display: none; } .luxury-float-capsule.luxury-float-line .luxury-float-line-mark { min-width: 38px; height: 26px; font-size: 10px; } @media (max-width: 640px) { .luxury-float-capsule.luxury-float-line { width: 54px; height: 54px; min-width: 54px; padding: 0 !important; } } /* 案例卡片內容總高對齊，避免設計師頭像貼底遭圓角裁切 */ body.luxury-bespoke-body #caseWrap .box, body.luxury-bespoke-body #caseWrap .box.picOver, body.luxury-bespoke-body #caseWrap .box.col-md-4 { box-sizing: border-box !important; height: 442px !important; } body.luxury-bespoke-body #caseWrap .box .title, body.luxury-bespoke-body .picOver .title { box-sizing: border-box !important; flex: 0 0 104px !important; min-height: 104px !important; padding: 10px 20px 4px !important; } body.luxury-bespoke-body #caseWrap .box .data, body.luxury-bespoke-body .picOver .data { box-sizing: border-box !important; flex: 0 0 88px !important; height: 88px !important; min-height: 88px !important; padding: 14px 20px !important; align-items: center !important; } body.luxury-bespoke-body #caseWrap .box .data li::before { flex: 0 0 42px !important; width: 42px !important; height: 42px !important; margin: 0 6px 0 0 !important; } body.luxury-bespoke-body #caseWrap .box, body.luxury-bespoke-body #caseWrap .box.picOver, body.luxury-bespoke-body #caseWrap .box.col-md-4 { height: 454px !important; } @media (max-width: 992px) { body.luxury-bespoke-body #caseWrap .box, body.luxury-bespoke-body #caseWrap .box.picOver, body.luxury-bespoke-body #caseWrap .box.col-md-4 { height: 434px !important; } body.luxury-bespoke-body #caseWrap .box .pic { height: 240px !important; } } @media (max-width: 640px) { body.luxury-bespoke-body #caseWrap .box, body.luxury-bespoke-body #caseWrap .box.picOver, body.luxury-bespoke-body #caseWrap .box.col-md-4 { height: auto !important; } body.luxury-bespoke-body #caseWrap .box .title { flex: 0 0 auto !important; min-height: 0 !important; padding: 10px 10px 8px !important; } body.luxury-bespoke-body #caseWrap .box .data { flex: 0 0 58px !important; height: 58px !important; min-height: 58px !important; padding: 8px 10px !important; } body.luxury-bespoke-body #caseWrap .box .data li::before { flex-basis: 30px !important; width: 30px !important; height: 30px !important; } } /* 案例詳情改為 1440px 單欄：主圖在上，案例資訊與預約區在下 */ body.luxury-bespoke-body #caseWrap > .container { width: 100% !important; max-width: 1440px !important; } body.luxury-bespoke-body .case-wrap { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 24px !important; width: 100% !important; max-width: 1440px !important; margin: 15px auto 45px !important; } body.luxury-bespoke-body .case-wrap .pic, body.luxury-bespoke-body .case-wrap .cont { width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; box-sizing: border-box !important; } body.luxury-bespoke-body .case-wrap .pic .item img { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; } body.luxury-bespoke-body .case-wrap .cont { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(260px, .72fr); column-gap: 28px !important; row-gap: 12px !important; align-items: start !important; padding: 30px 34px !important; } body.luxury-bespoke-body .case-wrap .cont > h3 { grid-column: 1 / -1 !important; margin-bottom: 2px !important; } body.luxury-bespoke-body .case-wrap .cont > .data { grid-row: 2 !important; min-width: 0 !important; padding: 12px 10px !important; } body.luxury-bespoke-body .case-wrap .cont > .detail { grid-column: 1 / span 2 !important; grid-row: 3 / span 2 !important; line-height: 1.9 !important; } body.luxury-bespoke-body .case-wrap .cont > .newBtn { grid-column: 3 !important; grid-row: 3 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; margin: 0 !important; } body.luxury-bespoke-body .case-wrap .cont > .newBtn a { width: 100% !important; margin: 0 !important; } body.luxury-bespoke-body .case-wrap .cont > .shareWrap { grid-column: 3 !important; grid-row: 4 !important; justify-content: flex-start !important; margin-top: 0 !important; } @media (max-width: 767px) { body.luxury-bespoke-body .case-wrap .cont { grid-template-columns: minmax(0, 1fr) !important; padding: 22px 18px !important; gap: 8px !important; } body.luxury-bespoke-body .case-wrap .cont > h3, body.luxury-bespoke-body .case-wrap .cont > .data, body.luxury-bespoke-body .case-wrap .cont > .detail, body.luxury-bespoke-body .case-wrap .cont > .newBtn, body.luxury-bespoke-body .case-wrap .cont > .shareWrap { grid-column: 1 !important; grid-row: auto !important; } } /* 將案例操作按鈕放到詳情卡片標題行右側 */ body.luxury-bespoke-body .case-wrap .cont { position: relative !important; } body.luxury-bespoke-body .case-wrap .cont > div:first-child > h3 { padding-right: 330px !important; } body.luxury-bespoke-body .case-wrap .cont > .newBtn { position: absolute !important; top: 22px !important; right: 34px !important; z-index: 2 !important; flex-wrap: nowrap !important; gap: 10px !important; padding: 0 !important; } body.luxury-bespoke-body .case-wrap .cont > .newBtn a { flex: 0 0 auto !important; min-width: 140px !important; white-space: nowrap !important; } @media (max-width: 900px) { body.luxury-bespoke-body .case-wrap .cont > div:first-child > h3 { padding-right: 0 !important; } body.luxury-bespoke-body .case-wrap .cont > .newBtn { position: static !important; flex-wrap: wrap !important; padding-top: 4px !important; } } @media (min-width: 901px) { body.luxury-bespoke-body .case-wrap .cont { padding-top: 22px !important; } body.luxury-bespoke-body .case-wrap .cont > div:first-child > .newBtn { top: 0 !important; } } /* 活動卡片依實際文字高度收合，移除內容區被拉伸出的底部空白 */ body.luxury-bespoke-body #eventWrap .row { align-items: flex-start !important; } body.luxury-bespoke-body #eventWrap .box { align-self: flex-start !important; height: auto !important; min-height: 0 !important; } body.luxury-bespoke-body #eventWrap .box .info { flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; padding: 18px 22px 22px !important; } body.luxury-bespoke-body #eventWrap .box .info h3 { height: auto !important; min-height: 0 !important; margin-bottom: 10px !important; } body.luxury-bespoke-body #eventWrap .box .info p { height: auto !important; max-height: 44px !important; } /* 活動列表移除重複分類按鈕，麵包屑移至標題列右側 */ body.event-index-page #eventWrap { position: relative !important; } body.event-index-page #eventWrap > .container { position: relative !important; } body.event-index-page #eventWrap > .container > .page-current { position: absolute !important; top: 37px !important; right: 0 !important; z-index: 3 !important; margin: 0 !important; padding: 0 !important; } body.event-index-page #eventWrap > .container > .page-current .breadcrumb { margin: 0 !important; padding: 0 !important; text-align: right !important; } body.event-index-page #eventWrap > .container > .clearboth { height: 20px !important; } body.event-index-page #eventWrap #largeTi > #aside { display: none !important; } @media (max-width: 991px) { body.event-index-page #eventWrap > .container > .page-current { top: 33px !important; right: 12px !important; } } @media (max-width: 767px) { body.event-index-page #eventWrap > .container > .page-current { position: static !important; margin: 0 0 12px !important; } body.event-index-page #eventWrap > .container > .page-current .breadcrumb { text-align: left !important; } body.event-index-page #eventWrap > .container > .clearboth { height: 0 !important; } } /* 專欄首頁移除重複的「設計專欄」按鈕，麵包屑移至標題列右側 */ body.blog-index-page #blog { position: relative !important; } body.blog-index-page #blog > .page-current { position: absolute !important; top: 52px !important; right: 0 !important; z-index: 3 !important; margin: 0 !important; padding: 0 !important; } body.blog-index-page #blog > .page-current .breadcrumb { margin: 0 !important; padding: 0 !important; text-align: right !important; } body.blog-index-page #blog > .clearboth { height: 20px !important; } body.blog-index-page #blog #largeTi > #aside { display: none !important; } @media (max-width: 991px) { body.blog-index-page #blog > .page-current { top: 48px !important; right: 12px !important; } } @media (max-width: 767px) { body.blog-index-page #blog > .page-current { position: static !important; margin: 0 0 12px !important; } body.blog-index-page #blog > .page-current .breadcrumb { text-align: left !important; } body.blog-index-page #blog > .clearboth { height: 0 !important; } } /* 標題列操作按鈕：縮小尺寸，避免壓住標題分隔線 */ body.luxury-bespoke-body .case-wrap .cont > div:first-child > .newBtn { top: 4px !important; align-items: center !important; gap: 10px !important; } body.luxury-bespoke-body .case-wrap .cont > div:first-child > .newBtn a { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 46px !important; min-width: 148px !important; padding: 0 18px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1 !important; letter-spacing: .04em !important; box-shadow: none !important; transition: background-color .2s ease, color .2s ease, transform .2s ease !important; } body.luxury-bespoke-body .case-wrap .cont > div:first-child > .newBtn a:first-child { background: linear-gradient(135deg, #c59b48 0%, #ad812f 100%) !important; color: #fff !important; } body.luxury-bespoke-body .case-wrap .cont > div:first-child > .newBtn a:last-child { background: #f6f4ef !important; color: #4e4a43 !important; border: 1px solid #e8e4dc !important; } body.luxury-bespoke-body .case-wrap .cont > div:first-child > .newBtn a:hover { transform: translateY(-1px) !important; } @media (max-width: 900px) { body.luxury-bespoke-body .case-wrap .cont > div:first-child > .newBtn a { min-width: 0 !important; height: 44px !important; padding: 0 20px !important; } } /* LINE 圓形聊天氣泡：移除內框，放大字樣並加上同色氣泡尾 */ .luxury-float-capsule.luxury-float-line { position: fixed; overflow: visible; border: 0 !important; border-radius: 50%; } .luxury-float-capsule.luxury-float-line::after { content: ''; position: absolute; right: 5px; bottom: 2px; width: 12px; height: 12px; background: #06c755; clip-path: polygon(0 0, 100% 0, 0 100%); transform: translate(3px, 5px); z-index: 1; } .luxury-float-capsule.luxury-float-line:hover::after { background: #05a947; } .luxury-float-capsule.luxury-float-line .luxury-float-line-mark { min-width: 0; height: auto; padding: 0; border: 0 !important; border-radius: 0; font-size: 14px; font-weight: 900; letter-spacing: -.4px; position: relative; z-index: 2; } /* 案例頁風格標題與分類按鈕垂直置中對齊 */ body.luxury-bespoke-body #caseWrap > .container > .filter { align-items: center; } body.luxury-bespoke-body #caseWrap > .container > .filter > .filter-ti { line-height: 1.2 !important; white-space: nowrap; } body.luxury-bespoke-body #caseWrap > .container > .filter > ul { align-items: center; } /* 案例卡片收緊簡介留白，並加強設計師資訊區 */ body.luxury-bespoke-body #caseWrap .box, body.luxury-bespoke-body #caseWrap .box.picOver, body.luxury-bespoke-body #caseWrap .box.col-md-4 { height: 440px !important; } body.luxury-bespoke-body #caseWrap .box .title, body.luxury-bespoke-body .picOver .title { flex: 0 0 120px !important; min-height: 120px !important; padding: 14px 20px 8px !important; } body.luxury-bespoke-body #caseWrap .box .data, body.luxury-bespoke-body .picOver .data { box-sizing: border-box !important; flex: 0 0 76px !important; height: 76px !important; min-height: 76px !important; padding: 12px 20px !important; justify-content: flex-start !important; overflow: visible !important; position: relative !important; z-index: 2 !important; } body.luxury-bespoke-body #caseWrap .box .data li, body.luxury-bespoke-body .picOver .data li { gap: 8px !important; font-size: 15px !important; } body.luxury-bespoke-body #caseWrap .box .data li::before { content: '' !important; display: inline-block !important; flex: 0 0 42px !important; width: 42px !important; height: 42px !important; margin-right: 4px !important; border-radius: 50% !important; background-color: #eee8dc !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='24' fill='%23e7dfd1'/%3E%3Ccircle cx='24' cy='18' r='8' fill='%23a98a55'/%3E%3Cpath d='M8 44c1-10 7-15 16-15s15 5 16 15' fill='%23a98a55'/%3E%3C/svg%3E") !important; background-size: cover !important; } body.luxury-bespoke-body #caseWrap .box .data li span, body.luxury-bespoke-body .picOver .data li span { font-size: 15px !important; } @media (max-width: 992px) { body.luxury-bespoke-body #caseWrap .box, body.luxury-bespoke-body #caseWrap .box.picOver, body.luxury-bespoke-body #caseWrap .box.col-md-4 { height: 420px !important; } } @media (max-width: 640px) { body.luxury-bespoke-body #caseWrap .box, body.luxury-bespoke-body #caseWrap .box.picOver, body.luxury-bespoke-body #caseWrap .box.col-md-4 { height: auto !important; } body.luxury-bespoke-body #caseWrap .box .title { flex: 0 0 auto !important; } body.luxury-bespoke-body #caseWrap .box .data { flex: 0 0 58px !important; height: 58px !important; min-height: 58px !important; padding: 8px 10px !important; } body.luxury-bespoke-body #caseWrap .box .data li::before { flex-basis: 30px !important; width: 30px !important; height: 30px !important; } body.luxury-bespoke-body #caseWrap .box .data li, body.luxury-bespoke-body #caseWrap .box .data li span { font-size: 11px !important; } } /* 案例列表頁使用全站固定導航欄 */ .case-photo-viewer { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 64px 84px; background: rgba(12, 12, 12, .94); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease; } .case-wrap .pic { position: relative !important; } .case-photo-zoom { position: absolute; right: 18px; bottom: 18px; z-index: 12; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid rgba(255, 255, 255, .32); border-radius: 999px; background: rgba(18, 18, 18, .68); color: #fff; font-size: 12px; cursor: zoom-in; backdrop-filter: blur(8px); } .case-photo-zoom span:first-child { font-size: 18px; line-height: 1; } .case-wrap .pic .item img { cursor: zoom-in; } .case-photo-viewer.is-open { opacity: 1; visibility: visible; } body.case-photo-viewer-open { overflow: hidden !important; } .case-photo-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: auto; min-height: 0; } .case-photo-frame { position: relative; width: min(90vw, 1280px); max-height: calc(100vh - 150px); aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #111; box-shadow: 0 18px 70px rgba(0, 0, 0, .45); } .case-photo-frame img { display: block; width: 100%; height: 100%; object-fit: contain; } .case-photo-caption { max-width: 100%; margin-top: 14px; color: rgba(255, 255, 255, .78); font-size: 13px; text-align: center; } .case-photo-close, .case-photo-arrow { position: absolute; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; transition: background .2s ease, transform .2s ease; } .case-photo-close:hover, .case-photo-arrow:hover { background: rgba(255, 255, 255, .22); } .case-photo-close { top: 22px; right: 26px; width: 46px; height: 46px; font-size: 30px; line-height: 1; } .case-photo-arrow { top: 50%; width: 52px; height: 52px; margin-top: -26px; font-size: 42px; line-height: 1; } .case-photo-prev { left: 24px; } .case-photo-next { right: 24px; } .case-photo-count { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .78); font-size: 14px; letter-spacing: 1px; } @media (max-width: 640px) { .case-photo-zoom { right: 10px; bottom: 10px; padding: 8px 10px; font-size: 11px; } .case-photo-viewer { padding: 58px 12px 72px; } .case-photo-frame { width: calc(100vw - 24px); max-height: calc(100vh - 170px); } .case-photo-close { top: 12px; right: 12px; width: 40px; height: 40px; } .case-photo-arrow { top: auto; bottom: 12px; width: 44px; height: 44px; margin: 0; font-size: 36px; } .case-photo-prev { left: calc(50% - 54px); } .case-photo-next { right: calc(50% - 54px); } .case-photo-count { top: auto; bottom: 26px; font-size: 12px; } .case-photo-caption { font-size: 11px; } } /* 使用用戶提供的 LINE 綠底白色對話泡泡圖示 */ .luxury-float-capsule.luxury-float-line { width: 60px !important; height: 60px !important; min-width: 60px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; overflow: hidden !important; background: #06c755 !important; box-shadow: 0 8px 24px rgba(6, 199, 85, .24) !important; } .luxury-float-capsule.luxury-float-line:hover { background: #06c755 !important; box-shadow: 0 12px 30px rgba(6, 199, 85, .34) !important; } .luxury-float-capsule.luxury-float-line::after { content: none !important; } .luxury-float-capsule.luxury-float-line .luxury-float-line-mark { display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: url('../images/line-chat-icon.png') center / contain no-repeat !important; font-size: 0 !important; } @media (max-width: 640px) { .luxury-float-capsule.luxury-float-line { width: 54px !important; height: 54px !important; min-width: 54px !important; } } /* 案例卡片高度需容纳图片、标题和完整的 76px 设计师栏 */ body.luxury-bespoke-body #caseWrap .box, body.luxury-bespoke-body #caseWrap .box.picOver, body.luxury-bespoke-body #caseWrap .box.col-md-4 { box-sizing: border-box !important; height: 458px !important; } @media (max-width: 992px) and (min-width: 641px) { body.luxury-bespoke-body #caseWrap .box, body.luxury-bespoke-body #caseWrap .box.picOver, body.luxury-bespoke-body #caseWrap .box.col-md-4 { height: 438px !important; } } @media (max-width: 640px) { body.luxury-bespoke-body #caseWrap .box, body.luxury-bespoke-body #caseWrap .box.picOver, body.luxury-bespoke-body #caseWrap .box.col-md-4 { height: auto !important; } } /* 案例詳情的標題、資料與說明實際包在第一層 div，改在該層排版 */ body.luxury-bespoke-body .case-wrap .cont { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 16px !important; padding: 30px 34px !important; } body.luxury-bespoke-body .case-wrap .cont > div:first-child { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: start !important; gap: 12px 24px !important; width: 100% !important; min-width: 0 !important; } body.luxury-bespoke-body .case-wrap .cont > div:first-child > h3, body.luxury-bespoke-body .case-wrap .cont > div:first-child > .detail { grid-column: 1 / -1 !important; min-width: 0 !important; } body.luxury-bespoke-body .case-wrap .cont > div:first-child > .data { min-width: 0 !important; margin: 0 !important; } body.luxury-bespoke-body .case-wrap .cont > .newBtn { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: flex-start !important; gap: 12px !important; margin: 0 !important; padding-top: 4px !important; } body.luxury-bespoke-body .case-wrap .cont > .newBtn a { flex: 0 1 220px !important; width: auto !important; margin: 0 !important; } body.luxury-bespoke-body .case-wrap .cont > .shareWrap { justify-content: flex-start !important; margin: 0 !important; } @media (max-width: 767px) { body.luxury-bespoke-body .case-wrap .cont { gap: 12px !important; padding: 22px 18px !important; } body.luxury-bespoke-body .case-wrap .cont > div:first-child { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; } body.luxury-bespoke-body .case-wrap .cont > div:first-child > h3, body.luxury-bespoke-body .case-wrap .cont > div:first-child > .detail { grid-column: 1 !important; } body.luxury-bespoke-body .case-wrap .cont > .newBtn a { flex: 1 1 100% !important; } } /* 最終覆蓋：按實際 DOM 層級，操作按鈕與標題同列 */ body.luxury-bespoke-body .case-wrap .cont > div:first-child { position: relative !important; } body.luxury-bespoke-body .case-wrap .cont > div:first-child > h3 { padding-right: 330px !important; } body.luxury-bespoke-body .case-wrap .cont > div:first-child > .newBtn { position: absolute !important; top: 4px !important; right: 0 !important; z-index: 2 !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 10px !important; padding: 0 !important; } body.luxury-bespoke-body .case-wrap .cont > div:first-child > .newBtn a { flex: 0 0 auto !important; min-width: 148px !important; white-space: nowrap !important; } @media (max-width: 900px) { body.luxury-bespoke-body .case-wrap .cont > div:first-child > h3 { padding-right: 0 !important; } body.luxury-bespoke-body .case-wrap .cont > div:first-child > .newBtn { position: static !important; flex-wrap: wrap !important; padding-top: 4px !important; } } @media (min-width: 901px) { body.luxury-bespoke-body .case-wrap .cont { padding-top: 22px !important; } body.luxury-bespoke-body .case-wrap .cont > div:first-child > .newBtn { top: 0 !important; } } /* LINE 與回到頂部採同一列右下角浮動，間距 20px */ body.luxury-bespoke-body .luxury-float-capsule.luxury-float-line { bottom: 112px !important; } body.luxury-bespoke-body .luxury-back-top { position: fixed; right: 32px; bottom: 32px; z-index: 990; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; padding: 0; border: 1px solid rgba(197, 155, 72, .65); border-radius: 50%; background: #171615; color: #c59b48; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease, background-color .25s ease, color .25s ease, visibility .25s ease; } body.luxury-bespoke-body .luxury-back-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } body.luxury-bespoke-body .luxury-back-top:hover { background: #c59b48; color: #fff; } body.luxury-bespoke-body .luxury-back-top svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 640px) { body.luxury-bespoke-body .luxury-float-capsule.luxury-float-line { right: 20px !important; bottom: 98px !important; } body.luxury-bespoke-body .luxury-back-top { right: 20px; bottom: 24px; width: 54px; height: 54px; } } /* 案例列表麵包屑放在標題下方，並限制在 1440px 內容欄內 */ body.luxury-bespoke-body.case-page #caseWrap > .container > .page-current { display: flex; justify-content: flex-end; width: 100%; max-width: 1440px; margin: 0 auto 8px !important; padding: 0 !important; } body.luxury-bespoke-body.case-page #caseWrap > .container > .page-current .breadcrumb { display: inline-flex; width: auto; max-width: 100%; margin: 0 0 8px auto !important; padding: 4px 0 !important; border-bottom: 0; text-align: right; } @media (max-width: 767px) { body.luxury-bespoke-body.case-page #caseWrap > .container > .page-current .breadcrumb { flex-wrap: wrap; line-height: 1.6; text-align: right; } } /* 設計團隊頻道麵包屑移至標題下方，並對齊 1440px 內容欄 */ body.luxury-bespoke-body #designerWrap > .container > .page-current { display: flex; justify-content: flex-end; width: 100%; max-width: 1440px; margin: 0 auto 8px !important; padding: 0 !important; } body.luxury-bespoke-body #designerWrap > .container > .page-current .breadcrumb { display: inline-flex; width: auto; max-width: 100%; margin: 0 0 8px auto !important; padding: 4px 0 !important; border-bottom: 0; text-align: right; } @media (max-width: 767px) { body.luxury-bespoke-body #designerWrap > .container > .page-current .breadcrumb { flex-wrap: wrap; line-height: 1.6; text-align: right; } } /* 案例頁麵包屑與標題同列，靠右對齊 */ body.luxury-bespoke-body.case-page #caseWrap > .container > #largeTi { display: flex; align-items: center; justify-content: space-between; gap: 24px; } body.luxury-bespoke-body.case-page #caseWrap > .container > #largeTi > h1 { float: none; flex: 0 1 auto; margin: 0; } body.luxury-bespoke-body.case-page #caseWrap > .container > #largeTi > .page-current { display: block; flex: 0 0 auto; width: auto; max-width: 50%; margin: 0 0 0 auto !important; padding: 0 !important; } body.luxury-bespoke-body.case-page #caseWrap > .container > #largeTi > .page-current .breadcrumb { display: flex; justify-content: flex-end; flex-wrap: wrap; margin: 0 !important; padding: 0 !important; text-align: right; } body.luxury-bespoke-body.case-page #caseWrap > .container > #largeTi > .clearboth { display: none; } @media (max-width: 767px) { body.luxury-bespoke-body.case-page #caseWrap > .container > #largeTi { align-items: flex-start; flex-wrap: wrap; gap: 8px 16px; } body.luxury-bespoke-body.case-page #caseWrap > .container > #largeTi > .page-current { max-width: 100%; margin-left: auto !important; } } /* 關於品牌頁：次級頻道按鈕上移並置中 */ @media (min-width: 993px) { body.luxury-bespoke-body #about #largeTi { position: relative; } body.luxury-bespoke-body #about #largeTi > #aside { position: absolute; top: -68px; left: 50%; float: none !important; display: flex !important; justify-content: center; width: max-content; max-width: calc(100% - 32px); margin: 0 !important; transform: translateX(-50%); } body.luxury-bespoke-body #about #largeTi > #aside .md-navWrap { display: block !important; } body.luxury-bespoke-body #about #largeTi > #aside #navCategory { justify-content: center; } } @media (max-width: 992px) { body.luxury-bespoke-body #about #largeTi > #aside { float: none !important; display: flex !important; justify-content: center; margin: 12px auto 0 !important; } } /* 關於品牌頁：麵包屑下移至標題行最右側，按鈕置中 */ @media (min-width: 993px) { body.luxury-bespoke-body #about #largeTi { display: grid; grid-template-columns: minmax(155px, auto) minmax(0, 1fr) auto; align-items: center; column-gap: 18px; } body.luxury-bespoke-body #about #largeTi > h1 { float: none !important; padding-bottom: 0 !important; white-space: nowrap; } body.luxury-bespoke-body #about #largeTi > #aside { position: static; left: auto; top: auto; float: none !important; width: auto; max-width: none; margin: 0 !important; transform: none; justify-self: center; } body.luxury-bespoke-body #about #largeTi > #aside #navCategory { justify-content: center; gap: 6px !important; } body.luxury-bespoke-body #about #largeTi > .page-current { display: block; float: none; width: auto; max-width: 240px; margin: 0 !important; padding: 0 !important; justify-self: end; } body.luxury-bespoke-body #about #largeTi > .page-current .breadcrumb { margin: 0 !important; padding: 0 !important; text-align: right; white-space: nowrap; } body.luxury-bespoke-body #about #largeTi > .clearboth { display: none; } } @media (max-width: 992px) { body.luxury-bespoke-body #about #largeTi > .page-current { float: none; display: flex; justify-content: flex-end; margin: 8px 0 0 auto !important; } } /* 設計團隊頁：麵包屑與標題同列，靠右對齊 */ body.luxury-bespoke-body #designerWrap > .container > #largeTi { display: flex; align-items: center; justify-content: space-between; gap: 24px; } body.luxury-bespoke-body #designerWrap > .container > #largeTi > h1 { float: none !important; flex: 0 1 auto; margin: 0 !important; padding-bottom: 0 !important; } body.luxury-bespoke-body #designerWrap > .container > #largeTi > .page-current { display: block; flex: 0 0 auto; width: auto; max-width: 50%; margin: 0 0 0 auto !important; padding: 0 !important; } body.luxury-bespoke-body #designerWrap > .container > #largeTi > .page-current .breadcrumb { display: flex; justify-content: flex-end; flex-wrap: wrap; margin: 0 !important; padding: 0 !important; text-align: right; } body.luxury-bespoke-body #designerWrap > .container > #largeTi > .clearboth { display: none; } @media (max-width: 767px) { body.luxury-bespoke-body #designerWrap > .container > #largeTi { align-items: flex-start; flex-wrap: wrap; gap: 8px 16px; } body.luxury-bespoke-body #designerWrap > .container > #largeTi > .page-current { max-width: 100%; margin-left: auto !important; } } /* 案例風格篩選：解除舊版固定扣除寬度限制，並精修按鈕排列 */ body.luxury-bespoke-body #caseWrap > .container > .filter > ul#luxury-style-filter { flex: 1 1 0; width: auto; max-width: none !important; min-width: 0; gap: 8px 6px !important; } body.luxury-bespoke-body #caseWrap > .container > .filter > ul#luxury-style-filter li a { min-height: 34px; padding: 7px 13px !important; border: 1px solid rgba(183, 143, 58, .16) !important; border-radius: 999px !important; background: #fff !important; color: #58534b !important; line-height: 1.35 !important; white-space: nowrap; box-shadow: 0 2px 8px rgba(35, 29, 18, .035) !important; transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease !important; } body.luxury-bespoke-body #caseWrap > .container > .filter > ul#luxury-style-filter li a:hover { border-color: rgba(183, 143, 58, .48) !important; background: #fbf8f1 !important; color: #8f6921 !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(35, 29, 18, .07) !important; } body.luxury-bespoke-body #caseWrap > .container > .filter > ul#luxury-style-filter li.current a { border-color: #191919 !important; background: #191919 !important; color: #f7e6c0 !important; box-shadow: 0 4px 12px rgba(25, 25, 25, .15) !important; } @media (max-width: 767px) { body.luxury-bespoke-body #caseWrap > .container > .filter { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 12px !important; padding: 16px !important; } body.luxury-bespoke-body #caseWrap > .container > .filter > .filter-ti { margin: 0 !important; } body.luxury-bespoke-body #caseWrap > .container > .filter > ul#luxury-style-filter { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); width: 100%; max-width: 100% !important; gap: 8px !important; } body.luxury-bespoke-body #caseWrap > .container > .filter > ul#luxury-style-filter li { min-width: 0; } body.luxury-bespoke-body #caseWrap > .container > .filter > ul#luxury-style-filter li a { width: 100%; min-height: 38px; justify-content: center; padding: 8px 5px !important; font-size: 13px !important; text-align: center; } } /* 案例詳情：標題與預約按鈕在資訊卡首列垂直置中 */ body.luxury-bespoke-body .case-wrap .cont > div:first-child { align-items: center !important; } body.luxury-bespoke-body .case-wrap .cont > div:first-child > h3 { display: flex !important; align-items: center !important; min-height: 46px; margin: 0 !important; line-height: 1.45 !important; } body.luxury-bespoke-body .case-wrap .cont > div:first-child > .newBtn { top: 50% !important; transform: translateY(-50%); } @media (max-width: 900px) { body.luxury-bespoke-body .case-wrap .cont > div:first-child > h3 { min-height: 0; } body.luxury-bespoke-body .case-wrap .cont > div:first-child > .newBtn { transform: none; } } /* 麵包屑全站取消底線，案例頁標題與麵包屑底部對齊 */ body.luxury-bespoke-body .breadcrumb { border-bottom: 0 !important; } body.luxury-bespoke-body.case-page #caseWrap > .container > #largeTi { align-items: flex-end; } body.luxury-bespoke-body.case-page #caseWrap > .container > #largeTi > h1 { padding-bottom: 0 !important; line-height: 1.2 !important; } body.luxury-bespoke-body.case-page #caseWrap > .container > #largeTi > .page-current .breadcrumb { align-items: flex-end; line-height: 1.35; } @media (max-width: 767px) { body.luxury-bespoke-body.case-page #caseWrap > .container > #largeTi { align-items: flex-end; } } /* 案例頁室內設計優勢：統一圖示與精品服務卡片 */ body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box { position: relative; margin: 34px 0 48px !important; padding: 38px 34px 34px !important; overflow: hidden; border: 1px solid rgba(174, 137, 70, .15) !important; border-radius: 22px !important; background: linear-gradient(145deg, #fff 0%, #fcfaf6 100%) !important; box-shadow: 0 18px 48px rgba(38, 32, 21, .07) !important; } body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box h2 { margin: 0 0 30px !important; text-align: center; font-size: 20px !important; letter-spacing: 1.2px !important; } body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box h2 span { display: block; margin-top: 7px; font-size: 10px !important; letter-spacing: 3px !important; } body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: strength; } body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box ul > li { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; min-height: 208px; padding: 25px 16px 20px; border: 1px solid rgba(39, 47, 55, .07); border-radius: 16px; background: rgba(255,255,255,.88); box-shadow: 0 5px 18px rgba(39, 35, 27, .035); counter-increment: strength; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box ul > li::before { content: "0" counter(strength); position: absolute; top: 13px; right: 15px; color: #b79a65; font: 600 10px/1 var(--font-serif); letter-spacing: 1px; } body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box ul > li:hover { transform: translateY(-4px); border-color: rgba(184, 139, 61, .28); box-shadow: 0 12px 28px rgba(39, 35, 27, .08); } body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box ul > li .icon-box { display: grid; place-items: center; width: 76px; height: 76px; margin: 4px 0 20px; border: 1px solid rgba(184, 139, 61, .22); border-radius: 22px; background: linear-gradient(145deg, #fff 10%, #f5efe3 100%); box-shadow: inset 0 1px 0 #fff, 0 5px 14px rgba(85, 66, 34, .07); } body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box ul > li .icon-box svg { display: block; width: 44px; height: 44px; } body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box ul > li .ti { max-width: 220px; color: #514e48; font-size: 13px; font-weight: 500; line-height: 1.75; text-align: center; } @media (max-width: 1100px) { body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box { margin: 26px 0 34px !important; padding: 28px 16px 18px !important; border-radius: 18px !important; } body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box h2 { margin-bottom: 20px !important; font-size: 18px !important; } body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box ul > li { min-height: 190px; padding: 23px 10px 16px; border-radius: 14px; } body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box ul > li .icon-box { width: 64px; height: 64px; margin-bottom: 15px; border-radius: 19px; } body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box ul > li .icon-box svg { width: 39px; height: 39px; } body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box ul > li .ti { font-size: 12px; line-height: 1.65; } } /* 案例頁頁腳內容區固定採用 1440px 格局，熱線欄靠右 */ body.luxury-bespoke-body.case-page .luxury-footer > .luxury-container { box-sizing: border-box; width: 1440px; max-width: calc(100% - 48px); padding-right: 0; padding-left: 0; } body.luxury-bespoke-body.case-page .luxury-footer-grid > :last-child { justify-self: end; width: 220px; } @media (max-width: 768px) { body.luxury-bespoke-body.case-page .luxury-footer > .luxury-container { width: calc(100% - 32px); max-width: none; } body.luxury-bespoke-body.case-page .luxury-footer-grid > :last-child { justify-self: stretch; width: auto; } } /* 全站主導航固定於視窗頂部；案例列表頁舊版流式例外已移除 */ body.luxury-bespoke-body .luxury-navbar { position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important; z-index: 1000 !important; } body.luxury-bespoke-body.case-page { padding-top: 76px !important; } body.luxury-bespoke-body.case-page .luxury-navbar.scrolled { height: 70px !important; } @media (max-width: 768px) { body.luxury-bespoke-body.case-page { padding-top: 66px !important; } body.luxury-bespoke-body.case-page .luxury-navbar { height: 66px !important; } body.luxury-bespoke-body.case-page .luxury-navbar.scrolled { height: 66px !important; } } /* 修正優勢卡片被舊版 20% 寬度與文字欄寬規則壓縮的問題 */ body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box ul > li { box-sizing: border-box !important; display: flex !important; width: 100% !important; max-width: none !important; padding: 25px 16px 20px !important; } body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box ul > li .ti { display: block !important; box-sizing: border-box !important; width: 100% !important; max-width: 240px !important; padding: 0 !important; margin: 0 auto !important; white-space: normal !important; word-break: normal !important; overflow-wrap: anywhere; } body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box ul > li .icon-box::after { display: none !important; content: none !important; } @media (max-width: 640px) { body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box ul > li { width: 100% !important; padding: 23px 10px 16px !important; } body.luxury-bespoke-body.case-page #caseWrap > .container > .bottom-box ul > li .ti { max-width: 100% !important; } } /* Hide the pointer-click focus ring while preserving keyboard focus visibility. */ .luxury-nav-link:focus:not(:focus-visible) { outline: none; } /* Mobile footer: center the stacked brand, navigation, and contact blocks. */ @media (max-width: 768px) { .luxury-footer { padding: 52px 0 calc(96px + env(safe-area-inset-bottom)); } .luxury-footer > .luxury-container { box-sizing: border-box; width: 100%; max-width: none; margin: 0 auto; padding: 0 24px; } .luxury-footer-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 34px; margin-bottom: 34px; text-align: center; } .luxury-footer-grid > * { width: 100%; text-align: center; } .luxury-footer-brand .luxury-brand-composite { align-items: center !important; } .luxury-footer-brand .luxury-brand-bottom { justify-content: center !important; } .luxury-footer-brand p { max-width: 360px; margin: 16px auto 0; } .luxury-footer-heading { margin-bottom: 14px; } .luxury-footer-links li { margin-bottom: 10px; } .luxury-footer-bottom { flex-direction: column; gap: 14px; padding-top: 22px; text-align: center; line-height: 1.7; } .luxury-footer-bottom > div:last-child { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; } .luxury-footer-bottom > div:last-child a { margin-right: 0 !important; } body.luxury-bespoke-body .luxury-float-capsule.luxury-float-line { right: 20px !important; bottom: calc(158px + env(safe-area-inset-bottom)) !important; z-index: 1001; } body.luxury-bespoke-body .luxury-back-top { right: 20px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 1001; } } \n /* ========================================================================== 全站點擊無痕體驗：徹底消除所有連結、按鈕點擊與焦點黑框 ========================================================================== */ *, *::before, *::after { -webkit-tap-highlight-color: transparent !important; } a, a:hover, a:focus, a:focus-visible, a:active, button, button:hover, button:focus, button:focus-visible, button:active, [role="button"], [role="button"]:focus, [role="button"]:focus-visible, [role="button"]:active { outline: none !important; outline-width: 0 !important; outline-style: none !important; outline-color: transparent !important; -webkit-focus-ring-color: transparent !important; } a:focus, a:focus-visible, a:active, button:focus, button:focus-visible, button:active { box-shadow: none !important; } *:focus:not(input):not(textarea):not(select), *:focus-visible:not(input):not(textarea):not(select), *:active:not(input):not(textarea):not(select) { outline: none !important; outline-width: 0 !important; outline-style: none !important; outline-color: transparent !important; } /* ========================================================================== 全站點擊無痕體驗：徹底消除所有連結、按鈕點擊與焦點黑框 ========================================================================== */ *, *::before, *::after { -webkit-tap-highlight-color: transparent !important; } a, a:hover, a:focus, a:focus-visible, a:active, button, button:hover, button:focus, button:focus-visible, button:active, [role="button"], [role="button"]:focus, [role="button"]:focus-visible, [role="button"]:active { outline: none !important; outline-width: 0 !important; outline-style: none !important; outline-color: transparent !important; -webkit-focus-ring-color: transparent !important; } a:focus, a:focus-visible, a:active, button:focus, button:focus-visible, button:active { box-shadow: none !important; } *:focus:not(input):not(textarea):not(select), *:focus-visible:not(input):not(textarea):not(select), *:active:not(input):not(textarea):not(select) { outline: none !important; outline-width: 0 !important; outline-style: none !important; outline-color: transparent !important; } /* Mobile VIP reservation: compact card and full-width fields. */ @media (max-width: 767px) { .luxury-modal-overlay { padding: 12px; } .luxury-modal-card { padding: 24px 16px; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; box-sizing: border-box; } .luxury-modal-close { top: 12px; right: 12px; width: 32px; height: 32px; } .luxury-modal-header { margin-bottom: 20px; } .luxury-modal-title { padding: 0 24px; font-size: 22px; letter-spacing: 1px; } .luxury-modal-subtitle { font-size: 13px; line-height: 1.6; } .luxury-modal-card .luxury-form-row { grid-template-columns: minmax(0, 1fr); gap: 0; } .luxury-modal-card .luxury-form-group { min-width: 0; margin-bottom: 14px; } .luxury-modal-card .luxury-form-input, .luxury-modal-card .luxury-form-select { min-height: 48px; padding: 11px 12px; font-size: 16px; } .luxury-modal-card .luxury-btn-submit { min-height: 48px; padding: 12px; margin-top: 4px; font-size: 14px; letter-spacing: 1px; } }