@charset "UTF-8"; /* =============================================================================================================================== 內頁共用標題區（所有內頁統一） ============================================================================================================================ */ .inner .page-hero{ padding: 4px 0 14px; background: #f9f9fb; border-bottom: 1px solid #e5e5e5; } .page-kicker{ font-size: 12px; letter-spacing: .20em; text-transform: uppercase; color: #999; margin-bottom: 4px; } .page-title{ font-size: clamp(24px, 2.6vw, 30px); margin: 0 0 6px; } .page-subtitle{ margin: 0; font-size: 14px; color: #555; line-height: 1.6; max-width: none; } /* 手機：標題區稍微高一點＋允許換行 */ @media (max-width:768px){ .inner .page-hero{ padding: 4px 0 14px; } .page-subtitle{ white-space: normal; } } /* ============================================================================================================================ 內頁通用內容卡 ================================================================================================================ */ .content-section{ background:#fff; border-radius: 12px; padding: 24px 20px; margin-bottom: 24px; box-shadow: 0 8px 20px rgba(0,0,0,0.03); } .content-section-title{ font-size: 20px; margin: 0 0 16px; } /* ========================================================================================================= 最新消息列表 ======================================================================================================= */ .news-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction: column; gap: 16px; } .news-item{ background:#fff; border-radius: 12px; padding: 16px 18px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); } .news-meta{ display:flex; align-items:center; gap: 12px; font-size: 13px; color:#777; margin-bottom: 4px; } .news-tag{ padding: 2px 8px; border-radius: 999px; background:#f1ecd8; color:#8a6a00; font-size: 12px; } .news-title{ font-size: 17px; margin: 4px 0 6px; } .news-excerpt{ margin:0; color:#555; font-size: 14px; } /* ============================================================================================================== 內頁卡片 grid（經典業績 / 規劃團隊可共用） =========================================================================================================== */ .cards-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; } @media (max-width:768px){ .cards-grid{ grid-template-columns: 1fr; } } /* 卡片樣式（通用） */ .card-page{ background:#fff; border-radius: 16px; overflow:hidden; box-shadow: 0 10px 26px rgba(0,0,0,0.06); display:flex; flex-direction: column; } .card-page img{ width:100%; height: 200px; object-fit: cover; } .card-body{ padding: 16px 18px 18px; } .card-title{ font-size: 18px; margin: 0 0 4px; } .card-meta{ font-size: 13px; color:#777; margin: 0 0 6px; } .card-desc{ font-size: 14px; color:#555; margin:0; } /* ========================================================================================================== 工程進度表 ========================================================================================================= */ .progress-table{ width:100%; border-collapse: collapse; font-size: 14px; margin-bottom: 16px; } .progress-table th, .progress-table td{ padding: 8px 10px; border-bottom: 1px solid #e5e5e5; text-align:left; } .progress-table th{ background:#f1f1f5; font-weight: 700; } .progress-photos{ display:flex; flex-wrap: wrap; gap: 12px; } .photo-item{ flex: 1 1 220px; } .photo-item img{ width:100%; border-radius: 10px; } .photo-item figcaption{ font-size: 12px; color:#666; margin-top: 4px; } /* =========================================================================================================== Projects List Page (projects.html) ============================================================================================================= */ body.page-projects{ background-color:#f2f4f8; } .projects-hero{ padding: 72px 0 32px; background:#f5f7fb; border-bottom: 1px solid var(--border-soft); } .page-eyebrow{ letter-spacing: .18em; font-size: 12px; text-transform: uppercase; color:#888; margin:0 0 8px; } .projects-hero .page-title{ font-size: 32px; font-weight: 800; letter-spacing: .06em; margin:0 0 12px; color:#111; } .projects-hero .page-subtitle{ max-width: 720px; font-size: 15px; line-height: 1.7; color:#555; } .page-section{ padding: 40px 0 80px; } .project-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; } .project-card{ display:flex; flex-direction: column; background:#fff; border-radius: 20px; overflow:hidden; box-shadow: 0 12px 30px rgba(0,0,0,0.06); transition: transform .2s ease, box-shadow .2s ease; } .project-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,0.10); } .project-card-image{ position: relative; overflow:hidden; background:#000; } .project-card-image img{ width:100%; height: 210px; object-fit: cover; transition: transform .3s ease; } .project-card:hover .project-card-image img{ transform: scale(1.04); } .project-card-tag{ position:absolute; left:16px; bottom:14px; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,0.72); color:#fff; font-size: 11px; letter-spacing: .06em; } .project-card-body{ padding: 16px 18px 16px; display:flex; flex-direction: column; gap: 6px; } .project-card-title{ font-size: 18px; font-weight: 800; margin:0; color:#111; } .project-card-meta{ font-size: 13px; color:#777; margin:0; } .project-card-desc{ font-size: 14px; line-height: 1.7; color:#444; margin: 4px 0 0; } .project-card-link-label{ margin-top: 10px; font-size: 12px; color: var(--secondary); letter-spacing: .12em; text-transform: uppercase; } /* RWD */ @media (max-width:1024px){ .projects-hero{ padding: 60px 0 26px; } .project-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; } .project-card-image img{ height: 200px; } } @media (max-width:768px){ .projects-hero{ padding: 48px 0 22px; } .projects-hero .page-title{ font-size: 26px; } .projects-hero .page-subtitle{ font-size: 14px; } .page-section{ padding: 28px 0 56px; } .project-grid{ grid-template-columns: 1fr; gap: 14px; } .project-card{ border-radius: 16px; } .project-card-image img{ height: 210px; } .project-card-body{ padding: 14px 16px 14px; } } /* ======================================================================================================== Project Detail (page-project-detail) ==================================================================================================== */ /* ===================================================================================================================== Contact Page (page-contact) =================================================================================================================== */ body.page-contact{ background-color:#f5f5f7; } /* 讓 contact 內容區寬度一致 */ .page- { max-width: 1100px; margin: 16px auto; padding: 16px 16px; display:flex; gap: 24px; align-items:flex-start; } .contact-card{ background:#fff; border-radius: 18px; box-shadow: 0 12px 30px rgba(0,0,0,0.06); padding: 24px 28px; } .contact-info-card{ flex: 0 0 40%; } .contact-form-card{ flex: 1; } .contact-card-title{ font-size: 18px; font-weight: 700; margin: 0 0 12px; } .contact-card-desc{ font-size: 14px; color:#666; margin: 0 0 18px; } .page-contact .contact-info-list{ list-style:none; padding:0; margin:0 0 16px; } .page-contact .contact-info-list li{ font-size: 14px; line-height: 1.6; display:flex; margin-bottom: 6px; } .page-contact .contact-info-list .label{ min-width: 70px; color:#777; } .page-contact .contact-info-list .value{ color:#333; } .contact-note{ font-size: 13px; color:#888; margin-top: 8px; } /* 表單 */ .contact-form .form-row{ margin-bottom: 14px; } .contact-form .two-col{ display:flex; gap: 16px; } .contact-form .form-field{ flex:1; } .contact-form label{ display:block; font-size: 13px; margin-bottom: 4px; color:#555; } .contact-form input, .contact-form select, .contact-form textarea{ width:100%; border-radius: 8px; border: 1px solid var(--border-soft); padding: 9px 11px; font-size: 14px; font-family: inherit; outline:none; transition: border-color .2s, box-shadow .2s; background:#fff; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ border-color: var(--primary); box-shadow: 0 0 0 2px rgba(13,59,102,0.16); } .contact-form textarea{ resize: vertical; min-height: 120px; } .checkbox-field{ font-size: 13px; color:#666; display:flex; align-items:flex-start; gap: 6px; } .checkbox-field input{ margin-top: 2px; } .form-actions{ text-align:right; } .btn-contact-primary{ display:inline-flex; align-items:center; justify-content:center; padding: 10px 28px; border-radius: 999px; border:none; cursor:pointer; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; background: linear-gradient(135deg, var(--primary), #111827); color:#fff; transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; } .btn-contact-primary:hover{ transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0,0,0,0.18); opacity:.95; } /* map card */ .map-responsive{ position: relative; padding-bottom: 56.25%; height: 0; overflow:hidden; border-radius: 16px; margin-top: 12px; } .map-responsive iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } /* contact RWD */ @media (max-width:960px){ .page-contact .contact-layout{ flex-direction: column; } .contact-info-card, .contact-form-card{ flex: 1 1 auto; } } @media (max-width:600px){ .contact-card{ padding: 18px 16px; border-radius: 14px; } .contact-form .two-col{ flex-direction: column; } .form-actions{ text-align:center; } .btn-contact-primary{ width:100%; } } /* ========================================================= 品牌色階套用（覆蓋 pages.css 內部可能寫死的顏色） ========================================================= */ .page-title{ color: var(--wt-blue-900); } .page-subtitle{ color: var(--wt-text-sub); } /* ===================================================================================================================================================== 聯絡我們 ================================================================================================================================================= */ /* ========================================================= Contact Page (page-contact) - FINAL (只保留這一份) ========================================================= */ body.page-contact{ background:#f5f5f7; } /* 兩欄：左(聯絡+交通) / 右(表單) */ .page-contact .contact-layout{ max-width: 1100px; margin: 16px auto; padding: 16px 16px; display: grid; grid-template-columns: 50% 50%; gap: 32px; align-items: stretch; /* ✅ 左右欄等高 */ } /* 卡片共用 */ .page-contact .contact-card{ background:#fff; border-radius: 18px; box-shadow: 0 12px 30px rgba(0,0,0,0.06); padding: 24px 28px; } /* 左欄：上下兩張卡 */ .page-contact .contact-left{ height: 100%; /* ✅ 吃滿左欄高度 */ display:flex; flex-direction: column; gap: 24px; } /* 右欄表單卡：撐滿高度 + 按鈕貼底 */ .page-contact .contact-form-card{ height: 100%; display:flex; flex-direction: column; } .page-contact .contact-form{ flex: 1; display:flex; flex-direction: column; } .page-contact .form-actions{ margin-top:auto; text-align:right; } /* 交通資訊卡：用 flex:1 補齊高度差 */ .page-contact .contact-map-card{ flex: 1; display:flex; flex-direction: column; } /* 地圖容器：改成可撐高（不要用 padding-bottom 的 16:9 法） */ .page-contact .contact-map-card .map-responsive{ flex: 1; min-height: 240px; /* 可調 220~320 */ border-radius: 16px; overflow:hidden; margin-top: 12px; position: relative; height: auto; padding-bottom: 0; } /* iframe 填滿 */ .page-contact .contact-map-card .map-responsive iframe{ width:100%; height:100%; border:0; display:block; } /* RWD：一欄 */ @media (max-width: 900px){ .page-contact .contact-layout{ grid-template-columns: 1fr; } .page-contact .form-actions{ text-align:center; } } .contact-layout { display: flex; gap: 32px; } /* 左右互換：讓表單在左、資訊在右 */ .contact-left { order: 2; } .contact-form-card { order: 1; } /* 表單送出區塊：按鈕置中 */ .contact-form .form-actions { display: flex; justify-content: center; } .btn-contact-primary { background: #fff; color: #0d3b66; border: 2px solid #0d3b66; border-radius: 999px; padding: 11px 34px; font-weight: 600; transition: all .25s ease; } .btn-contact-primary:hover { background: #0d3b66; color: #fff; } /* Contact｜送出表單按鈕（金色正式版） */ .contact-form .btn-contact-primary { display: inline-flex; align-items: center; justify-content: center; padding: 12px 38px; border-radius: 999px; border: none; cursor: pointer; font-size: 15px; font-weight: 600; letter-spacing: .12em; color: #fff; background: linear-gradient(135deg, #c99700, #b88900); box-shadow: 0 8px 22px rgba(201, 151, 0, 0.35); transition: background .2s ease, transform .15s ease, box-shadow .15s ease; } .contact-form .btn-contact-primary:hover { background: linear-gradient(135deg, #d6ab2f, #c99700); box-shadow: 0 10px 26px rgba(201, 151, 0, 0.45); transform: translateY(-1px); } .contact-form .btn-contact-primary:active { transform: translateY(0); box-shadow: 0 6px 18px rgba(201, 151, 0, 0.35); } /* =============================== Contact｜成功送出 Toast =============================== */ .form-toast { position: fixed; right: 20px; bottom: 24px; z-index: 9999; min-width: 240px; padding: 14px 18px; border-radius: 12px; background: linear-gradient(135deg, #c99700, #b88900); color: #fff; font-size: 14px; line-height: 1.5; box-shadow: 0 10px 30px rgba(201, 151, 0, 0.35); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; } .form-toast span { font-size: 12px; opacity: .9; } .form-toast.is-show { opacity: 1; transform: translateY(0); } .form-toast { position: fixed; right: 20px; bottom: 24px; z-index: 9999; min-width: 240px; padding: 14px 18px; border-radius: 12px; background: linear-gradient(135deg, #c99700, #b88900); color: #fff; font-size: 14px; line-height: 1.5; box-shadow: 0 10px 30px rgba(201, 151, 0, 0.35); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; } .form-toast span { font-size: 12px; opacity: .9; } .form-toast.is-show { opacity: 1; transform: translateY(0); } .contact-form .btn-contact-primary.is-sent{ background: linear-gradient(135deg, #c99700, #b88900); opacity: .92; cursor: default; } /* 成功狀態：按鈕置中、浮起來 */ .btn-contact-primary.is-success { display: block; margin: 24px auto 0; padding: 14px 36px; font-size: 16px; font-weight: 600; letter-spacing: 1px; background: linear-gradient(135deg, #c99700, #b88900); color: #fff; border-radius: 999px; box-shadow: 0 10px 30px rgba(201, 151, 0, .35); } #thankYouBlock { animation: fadeIn .5s ease forwards; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .form-toast { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .35s ease; } /* 真正的提示卡片 */ .form-toast::before { content: ""; } .form-toast.is-show { opacity: 1; } /* 卡片本體 */ .form-toast > * { display: none; } .form-toast.is-show { pointer-events: auto; } .form-toast.is-show::after { content: none; } .form-toast.is-show { background: rgba(0,0,0,.35); } /* 卡片內容 */ .form-toast { --card-bg: linear-gradient(135deg, #c99700, #b88900); } .form-toast-inner { background: var(--card-bg); color: #fff; padding: 26px 36px; border-radius: 18px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.35); animation: toastPop .45s ease; } @keyframes toastPop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } } /* 完成狀態卡片 */ .thankyou-card { max-width: 520px; margin: 40px auto 0; padding: 36px 32px; text-align: center; background: linear-gradient( 180deg, #fff8e6 0%, #ffffff 100% ); border-radius: 18px; border: 1px solid rgba(201, 151, 0, .25); box-shadow: 0 12px 30px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.6); } /* 標題 */ .thankyou-card h2 { margin: 0 0 12px; font-size: 22px; font-weight: 600; color: #c99700; letter-spacing: .05em; } /* 內文 */ .thankyou-card p { margin: 0; font-size: 15px; color: #555; line-height: 1.6; } /* ========================================= 聯絡我們頁：左邊界切齊（僅此頁） ========================================= */ body.page-contact .page-hero .container, body.page-contact .contact-section .inner-container{ max-width: 1180px; /* 跟你下面白色區一致 */ margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } /* 手機版 */ @media (max-width: 980px){ body.page-contact .page-hero .container, body.page-contact .contact-section .inner-container{ padding-left: 16px; padding-right: 16px; } } /* ========================================================= Pages：內頁統一留白保險（News / Contact / Team / Development…） ========================================================= */ @media (max-width: 1024px){ body.inner .container{ padding-left: var(--wt-gutter, 16px); padding-right: var(--wt-gutter, 16px); } } /*------------------------------------------------------------------------------------------------------------*/ /*--用規劃團隊當模板---------------------------------------------------------------------------------------------------------------*/ :root{ --team-max: 1120px; --team-radius: 18px; --team-border: rgba(13,59,102,.14); --team-shadow: 0 12px 30px rgba(0,0,0,.08); --team-shadow-hover: 0 16px 42px rgba(0,0,0,.12); --team-bg: #f2f4f8; --team-card: #ffffff; --team-ink: #101820; --team-muted: rgba(16,24,32,.70); /* 品牌色（若 base.css 有就吃它，沒有就用 fallback） */ --team-primary: var(--primary, #0d3b66); --team-secondary: var(--secondary, #c99700); --team-gold: var(--wt-gold-700, #c9a85d); --team-blue: var(--wt-blue-900, #0d3b66); } /* ======================== Page base / container ======================== */ .inner { background: var(--team-bg); } .inner .container{ max-width: var(--team-max); margin: 0 auto; padding-left: var(--wt-gutter, 16px); padding-right: var(--wt-gutter, 16px); } .inner .section{ padding: 10px 0 20px; } /* ========================================================= Page Hero（薄型、穩定，不重複） ========================================================= */ .inner .page-hero{ padding: 8px 0 0; background: #f1f3f6; border-bottom: 1px solid #dee2e6; } .inner .page-hero .container{ padding-top: 8px; padding-bottom: 6px; } .page-hero-content{ display: flex; align-items: baseline; flex-wrap: wrap; gap: 14px; margin: 0; } .page-title{ margin: 0; display: inline-flex; align-items: baseline; gap: 10px; font-size: 22px; font-weight: 800; color: var(--team-blue); } .page-kicker{ font-size: 14px; font-weight: 800; color: var(--team-gold); letter-spacing: 0; text-transform: none; font-family: Arial, sans-serif; } .page-subtitle{ margin: 0; font-size: 13px; color: #666; border-left: 1px solid #ddd; padding-left: 14px; line-height: 1.2; } @media (max-width: 768px){ .inner .page-hero{ padding: 14px 0 0; } .page-hero-content{ flex-direction: column; gap: 6px; } .page-title{ font-size: 20px; } .page-kicker{ font-size: 13px; } .page-subtitle{ border-left: none; padding-left: 0; color: #888; line-height: 1.45; } }