/* ========================================================================== Adagio Retreat — 可重用元件庫（案號 20260707-adagio-website / 23-phase3-cards）命名比照 shadcn 慣例：.card / .card-header / .card-title / .card-description / .card-content / .card-footer；Mobile First：手機 1 卡 → 平板 2 卡 → 桌機 3-4 卡。依賴 style.css 的 CSS 變數（--color-*／--font-*／--radius／--shadow-*），於中排在 style.css 之後載入。 ========================================================================== */ /* ------------------------------------------------------------------------- 十勝岳火山警戒公告條（2026-07-22 老闆裁示：首頁要能顯示重要訊息，內容來源自動抓氣象廳等級，見 main.js initVolcanoBanner／server.js /api/volcano-status）。掛在全站共用 nav 上方（見 style.css .site-nav／ body 的 --volcano-banner-h 變數機制），用偏暖橘色系（非品牌紫）區隔「系統安全公告」與一般行銷／互動 UI，避免視覺上被誤認為促銷訊息而忽略。 ------------------------------------------------------------------------- */ .volcano-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 101; display: flex; align-items: center; justify-content: center; gap: 6px 14px; flex-wrap: wrap; padding: 9px 44px 9px 16px; background: #fdf2e2; border-bottom: 1px solid rgba(166, 108, 21, 0.25); color: #7a4e0f; font-size: 0.8rem; line-height: 1.5; text-align: center; } .volcano-banner-label { font-weight: 600; } .volcano-banner-updated { color: #9a7238; font-size: 0.76rem; white-space: nowrap; } .volcano-banner-link { color: inherit; text-decoration: underline; white-space: nowrap; } .volcano-banner-close { /* 2026-07-22 老闆回報手機版重疊字：原本 top:50% 垂直置中是相對「整個公告條的總高度」置中，手機窄螢幕換行變多行時，置中的關閉鈕會疊到中間那行文字上面。改成固定貼齊頂端（不隨總高度置中），不論換幾行都只佔第一行右側的固定位置，不會蓋到後面幾行——搭配 .volcano-banner 的 padding-right:44px 每行都會預留這塊空間，各行文字置中排版本來就不會延伸到這裡。 */ position: absolute; top: 6px; right: 10px; background: none; border: none; color: #7a4e0f; font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 999px; } .volcano-banner-close:hover { background: rgba(166, 108, 21, 0.12); } /* ------------------------------------------------------------------------- 卡片網格容器（Mobile First：預設 1 欄） ------------------------------------------------------------------------- */ .card-grid { display: grid; gap: 20px; grid-template-columns: 1fr; white-space: pre-line; /* 桑拿等多行卡片文案（2026-07-08） */ } @media (min-width: 640px) { .card-grid-2up, .card-grid-3up, .card-grid-4up, .card-grid-5up { grid-template-columns: repeat(2, 1fr); } } /* 案號 20260707-adagio-website 棒55：餐食頁五卡式版面（dining.html #dining-five-cards）。用 auto-fit 而非固定 5 欄 flex，讓桌機依容器寬度自然呈現「一排 5 張」或「2+3／3+2」折行（老闆定案語彙），不需再手算 calc() 等寬公式。 */ @media (min-width: 1024px) { .card-grid-5up { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } } @media (min-width: 1024px) { /* 案號 20260707-adagio-website 棒42：桌機版面整理——CSS Grid 固定欄數在項目數不足整除時（如 1 或 2 張卡落在 3 欄網格），未填滿的欄位軌道仍會保留寬度，卡片被推擠靠左、右側大片留白，桌機顯示「亂」。改用 Flexbox + wrap + justify-content:center 修正；flex-basis 用 calc() 精算成與原本 1fr 網格「完全等寬」（(100% - 間距總和) / 欄數），滿列時每張卡寬度與改動前逐像素相同（驗證：dining/transport 滿列 3 卡在 1024–1920 皆與棒42改動前零尺寸差異），只有卡片數不足整除、留下不滿的最後一列時，才會置中該列、不再偏左留白（首次實作誤用固定 340px/280px 導致 3 欄在 1024–1440 容器寬度下被擠成 2 欄，已修正為 calc() 精算版本，見報告「棒42」節）。僅 ≥1024px 生效，768px 以下（手機／平板既有 2 欄 grid）完全不受影響。 */ .card-grid-3up, .card-grid-4up { display: flex; flex-wrap: wrap; justify-content: center; } .card-grid-3up > * { flex: 0 1 calc((100% - 40px) / 3); } .card-grid-4up > * { flex: 0 1 calc((100% - 60px) / 4); } } /* ------------------------------------------------------------------------- 基礎卡片語彙（沿用 style.css .card 陰影/邊框，補充 header/content/footer 分區） ------------------------------------------------------------------------- */ .card-header { margin-bottom: 10px; } .card-title { font-size: 1.05rem; margin-bottom: 0.3em; color: var(--color-text); } .card-description { color: var(--color-text-softer); font-size: 0.88rem; line-height: 1.65; margin: 0; } .card-content { margin: 10px 0; } .card-footer { margin-top: auto; padding-top: 14px; } /* 2026-07-20 老闆回報：交通接駁「免費接駁」/「包車服務」同排卡片，標籤列（免費/固定班次/住客限定 vs 需預約/多方案可選/車型可選）沒對齊——真因是描述文字（.card-description）行數不同，標籤列緊跟在描述後面自然往下流，描述越長標籤列位置越低。card-footer 已有 margin-top:auto 把「標籤列+ 按鈕」這組整體推到卡片底部，但卡片內部標籤列跟描述之間仍是固定間距，兩張卡標籤列本身高度不同就對不齊。改給 .card-tags 也吃 margin-top:auto （把標籤列自己推到卡片底部），並把緊接在標籤列後面的 .card-footer 改回固定間距（避免兩個 auto margin 互搶剩餘空間，導致標籤列卡在正中央而非貼齊底部）；沒有標籤列的卡片（.card-footer 前面不是 .card-tags）不受影響，維持原本 margin-top:auto 各自撐開行為。 */ .card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; margin-top: auto; } .card-tags + .card-footer { margin-top: 14px; } .card-tag { display: inline-flex; align-items: center; font-size: 0.68rem; background: rgba(91, 62, 155, 0.08); color: var(--color-accent); padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; white-space: nowrap; } .card-note { font-size: 0.78rem; color: var(--color-text-softer); } /* 案號 20260727-roomservice-stock：庫存歸零品項仍顯示卡片但視覺降階＋鎖住游標， footer 的「已售罄」文字沿用既有 .card-note 樣式再加粗變色強調（不點擊，見 components.js renderServiceCards：soldOut 一律不掛 cta，天然沒有 card-clickable）。 */ .card-soldout { opacity: 0.55; cursor: not-allowed; } .card-soldout .card-note-soldout { color: #a3324a; font-weight: 600; } /* 2026-07-17 老闆裁示：暗空觀星（預計 9 月開放）「Coming soon」印章式提示，歷經四輪修正：①斜體酒紅色 ②放大改對角橫幅 ③粗體字重 ④「蓋章印泥」質感—— 邊框改單線＋套用 experiences.html 內 #stamp-ink-rough SVG 濾鏡（feTurbulence +feDisplacementMap），讓文字與邊框邊緣呈現不規則的印泥暈染感，而非電腦繪製的完美邊緣；背景改徑向漸層模擬印泥中心較濃、邊緣暈開的效果，疊上 mix-blend-mode:multiply 讓色塊像印在卡片上而非貼一張不透明貼紙。 */ .card-coming-soon-badge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-22deg); font-style: italic; font-family: var(--font-sans); font-size: 2.1rem; font-weight: 800; color: #a3324a; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; pointer-events: none; z-index: 2; padding: 10px 26px; border: 2.5px solid #a3324a; border-radius: 6px; background: radial-gradient(ellipse at center, rgba(163, 50, 74, 0.1) 0%, rgba(163, 50, 74, 0.03) 65%, transparent 100%); opacity: 0.88; mix-blend-mode: multiply; filter: url(#stamp-ink-rough); } @media (max-width: 640px) { .card-coming-soon-badge { font-size: 1.5rem; padding: 7px 18px; border-width: 2px; } } .card-cta-btn { width: 100%; text-align: center; } /* ------------------------------------------------------------------------- Icon Card（服務特色，圖示 + 標題 + 一句話說明） ------------------------------------------------------------------------- */ .card-icon { text-align: center; padding: 30px 20px; display: flex; flex-direction: column; align-items: center; } .card-icon-glyph { font-size: 2rem; line-height: 1; margin-bottom: 14px; color: var(--color-accent); } /* 棒31：圖標統一改 V3 風格線條 SVG（inline），尺寸交由此處控制，取代原 emoji font-size 撐開的高度；SVG 用 stroke="currentColor" 沿用上方 color 設定。 */ .card-icon-glyph svg { width: 32px; height: 32px; display: block; } .card-icon .card-title { margin-bottom: 0.4em; } .card-icon .card-description { max-width: 26em; } /* ------------------------------------------------------------------------- Service Card（服務方案：標題 / 說明 / 標籤 / CTA） ------------------------------------------------------------------------- */ /* 2026-07-20 老闆裁示：card-grid-3up 在 ≥1024px 桌機（同排 3 卡）發現卡片高度不一致（如遊程頁芬蘭式桑拿/藍染工坊體驗/皆空窯陶藝DIY 描述文字行數不同）。真因：這裡的 height:100% 與 style.css .card 已有的 display:flex; flex-direction:column（同案號較早修復 dining 頁三入口卡不等高時新增，見 style.css .card 註解）互相衝突——height:100% 在父層（flex 容器）無明確高度時會讓 flex 的 align-items:stretch 跨軸拉伸失效，卡片改回依內容自然撐高。 .card 本身的 flex-column + .card-footer{margin-top:auto} 已足夠讓同排卡片靠 stretch 自動等高，此處三行規則整組移除、不留半套（保留 height:100% 會繼續複現同一個 bug）。 */ /* 棒35：卡片圖片區／無圖 fallback（真實照片就顯示照片，沒有就用 paper 漸層＋線條 SVG 圖標，禁止拿無關照片冒充或抓網路圖庫；.card-service 保留 padding，圖片區改用負 margin 頂到卡片邊緣，維持既有卡片內距不動） */ .card-media { /* 2026-07-08 老闆裁示：圖片鎖在卡框內——取消出血式負邊距（部分裝置看似突出破圖），改為內嵌於卡片 padding 內、四角圓角完整包住 */ margin: 0 0 14px; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; max-width: 100%; } .card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .card-media-fallback { display: flex; align-items: center; justify-content: center; background: linear-gradient(155deg, var(--color-paper) 0%, rgba(91, 62, 155, 0.08) 100%); color: var(--color-accent); } .card-media-fallback svg { width: 40px; height: 40px; } /* ------------------------------------------------------------------------- Vehicle Card（車型介紹） ------------------------------------------------------------------------- */ .card-vehicle { display: flex; flex-direction: column; } .vehicle-specs { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 10px; } .vehicle-spec { font-size: 0.78rem; color: var(--color-text); background: rgba(26, 22, 17, 0.05); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 4px 10px; } .vehicle-features { margin: 0 0 12px; padding-left: 1.1em; color: var(--color-text-softer); font-size: 0.85rem; line-height: 1.7; } .vehicle-price { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--color-border); font-size: 0.85rem; color: var(--color-text); } .vehicle-price-label { display: inline-block; min-width: 4.5em; color: var(--color-text-stone); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 6px; } /* ------------------------------------------------------------------------- Timeline（預約流程，Mobile First：垂直時間軸） ------------------------------------------------------------------------- */ .timeline { max-width: 640px; margin: 0 auto; } .timeline-item { position: relative; display: flex; gap: 16px; padding-bottom: 30px; } .timeline-item:last-child { padding-bottom: 0; } .timeline-item::before { content: ''; position: absolute; left: 15px; top: 32px; bottom: -6px; width: 2px; background: var(--color-border); } .timeline-item:last-child::before { display: none; } .timeline-marker { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.9rem; z-index: 1; } .timeline-content { padding-top: 3px; } .timeline-content h4 { font-family: var(--font-serif); font-size: 1.02rem; font-weight: 500; color: var(--color-text); margin: 0 0 0.3em; } .timeline-content p { font-size: 0.85rem; color: var(--color-text-softer); line-height: 1.6; margin: 0; } /* ------------------------------------------------------------------------- Accordion / FAQ（共用結構，class 名不同以利語意區分） ------------------------------------------------------------------------- */ .accordion, .faq { max-width: 720px; margin: 0 auto; border-top: 1px solid var(--color-border); } .accordion-item, .faq-item { border-bottom: 1px solid var(--color-border); } .accordion-trigger, .faq-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: none; border: none; cursor: pointer; text-align: left; padding: 16px 4px; font-family: var(--font-sans); font-size: 0.95rem; font-weight: 500; color: var(--color-text); } .accordion-icon, .faq-icon { flex-shrink: 0; font-size: 1.1rem; color: var(--color-accent); transition: transform 0.25s ease; } .accordion-item.open .accordion-icon, .faq-item.open .faq-icon { transform: rotate(45deg); } .accordion-content, .faq-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .accordion-content-inner, .faq-content-inner { padding: 0 4px 16px; font-size: 0.86rem; color: var(--color-text-softer); line-height: 1.75; white-space: pre-line; /* FAQ 段落換行（2026-07-08 老闆裁示） */ } /* ------------------------------------------------------------------------- 私廚服務：主廚分組（主廚卡＋其方案卡群）（案號 20260707-adagio-website 棒48，整併自棒45的私廚預約區；多位主廚時每組重複同結構，組間以 .chef-group-divider 加分隔線，讓「主廚簡歷 → 其方案卡」的從屬關係清楚）。 ------------------------------------------------------------------------- */ .chef-group-divider { margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--color-border); } .chef-profile { max-width: 720px; margin: 0 auto 30px; text-align: center; } .chef-profile-photo { display: block; width: 120px; height: 120px; margin: 0 auto 16px; border-radius: 50%; object-fit: cover; } .chef-profile-name { font-family: var(--font-serif); font-size: 1.1rem; color: var(--color-text); margin: 0 0 0.5em; } .chef-profile-bio { font-size: 0.88rem; color: var(--color-text-softer); line-height: 1.8; text-align: left; } /* 方案卡內的「查看完整菜單」摺疊區，沿用 .accordion 摺疊機制，但去除通用 .accordion 的獨立分隔線／置中寬度（卡片內已有邊框，不需重複視覺）。 */ .chef-menu-accordion.accordion { max-width: none; margin: 0; border-top: none; } .chef-menu-accordion .accordion-item { border-bottom: none; border-top: 1px dashed var(--color-border); } .chef-menu-accordion .accordion-trigger { padding: 10px 0; font-size: 0.82rem; } .chef-menu-accordion .accordion-content-inner { padding: 0 0 10px; } /* 預約彈窗內的服務說明手風琴（2026-07-15：服務內容/預約說明/時段/注意事項掛入預約流程），沿用同一套摺疊邏輯，僅收窄寬度與間距貼合彈窗欄位密度 */ .booking-modal-info-mount { margin-bottom: 6px; } .booking-modal-info-mount.accordion { max-width: none; margin: 0 0 10px; border-top: none; } .booking-modal-info-mount .accordion-item { border-top: 1px solid var(--color-border); } .booking-modal-info-mount .accordion-item:last-child { border-bottom: 1px solid var(--color-border); } .booking-modal-info-mount .accordion-trigger { padding: 10px 2px; font-size: 0.86rem; } .booking-modal-info-mount .accordion-content-inner { padding: 0 2px 12px; font-size: 0.82rem; } .chef-menu-list { margin: 0; padding-left: 1.1em; color: var(--color-text-softer); font-size: 0.82rem; line-height: 1.75; } .chef-menu-list li { margin-bottom: 4px; } .chef-plan-card { display: flex; flex-direction: column; } /* ------------------------------------------------------------------------- 私廚服務：卡片＋逐步選擇彈窗（案號 20260707-adagio-website 棒50） ①選主廚人員（chef-person-*）②選方案卡＋日期＋人數（chef-plan-radio-*，於 openBookingModal 步驟一內以 plan-radio-cards 欄位型別渲染） ------------------------------------------------------------------------- */ .chef-person-modal-box { max-width: 560px; } .chef-person-list { display: flex; flex-direction: column; gap: 14px; } /* 版型按 1~N 位主廚設計：≥640px 時每位主廚卡改左右並排（照片＋簡歷｜CTA），卡片數量增加時仍逐筆往下疊加，不受影響。 */ .chef-person-card { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); } .chef-person-photo { flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; } .chef-person-photo-fallback { display: flex; align-items: center; justify-content: center; background: linear-gradient(155deg, var(--color-paper) 0%, rgba(91, 62, 155, 0.12) 100%); color: var(--color-accent); font-family: 'Cormorant Garamond', 'Noto Serif TC', serif; font-size: 1.4rem; } .chef-person-info { flex: 1 1 auto; min-width: 0; } .chef-person-name { font-family: var(--font-serif); font-size: 1rem; color: var(--color-text); margin: 0 0 0.35em; } .chef-person-bio { font-size: 0.82rem; color: var(--color-text-softer); line-height: 1.6; margin: 0; /* 簡歷摘要固定顯示 2~3 行，完整簡歷已收斂於方案步驟頂部（booking-modal-subtitle） */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* .card-cta-visual 通用規則會設 width:100%（給整卡佔滿寬的服務卡用），本卡是橫向排列（照片＋簡歷｜CTA），需以更高特異性覆寫回 auto，避免 CTA 撐滿寬度把姓名/簡歷擠壓到近乎 0 寬（曾實測造成中文姓名逐字換行的破版）。 */ .chef-person-list .chef-person-cta { flex-shrink: 0; width: auto; padding: 8px 16px; font-size: 0.8rem; } @media (max-width: 480px) { .chef-person-card { flex-wrap: wrap; } .chef-person-list .chef-person-cta { width: 100%; text-align: center; margin-top: 4px; } } /* 方案單選卡（名稱／價格／摺疊菜單＋單選），沿用 .chef-plan-card 版式但可選取 */ /* 2026-07-08 老闆裁示：方案名稱獨佔一列、價格次行 */ .chef-plan-radio-main { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } .chef-plan-radio-title { display: block; width: 100%; } .chef-plan-radio-price { align-self: flex-start; } .chef-plan-radio-group { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; } .chef-plan-radio-card { position: relative; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; overflow: hidden; } /* 2026-07-21 老闆裁示：參考「北海道 Portal」私廚頁面加入方案配圖，滿版貼齊卡片邊緣（負外距抵銷卡片本身 padding），維持卡片圓角一致。 */ .chef-plan-radio-media { margin: -14px -16px 12px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-border); } .chef-plan-radio-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .chef-plan-radio-card:hover { border-color: var(--color-accent); } .chef-plan-radio-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .chef-plan-radio-card.is-checked { border-color: var(--color-accent); background: rgba(91, 62, 155, 0.06); } .chef-plan-radio-input { position: absolute; top: 16px; right: 16px; width: 16px; height: 16px; accent-color: var(--color-accent); margin: 0; pointer-events: none; } .chef-plan-radio-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 26px; } .chef-plan-radio-title { font-family: var(--font-serif); font-size: 0.95rem; color: var(--color-text); } .chef-plan-radio-card .card-description { margin-top: 8px; } /* 2026-07-21 老闆裁示：菜單常駐展開顯示（原摺疊手風琴 .chef-menu-accordion 已移除，改用 .chef-menu-list-wrap 直接呈現，參考「北海道 Portal」私廚頁一次看到完整菜色的呈現方式）。上方有 1px 虛線分隔，呼應原本手風琴分隔線。 */ .chef-plan-radio-card .chef-menu-list-wrap { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--color-border); } /* 交通「注意事項」費用說明面板：手機單欄、桌機兩欄並排（案號 25-phase4-modal 併入棒12） */ .transport-notice-cols { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 640px) { .transport-notice-cols { grid-template-columns: 1fr 1fr; } } /* ------------------------------------------------------------------------- CTA Band（區塊結尾 / 全頁底部行動呼籲） ------------------------------------------------------------------------- */ .cta-band { background: var(--color-ink); color: rgba(250, 248, 245, 0.92); text-align: center; padding: 52px 24px; border-radius: var(--radius); } .cta-band .eyebrow { color: rgba(250, 248, 245, 0.6); } .cta-band h3 { color: rgba(250, 248, 245, 1); margin-bottom: 0.5em; } .cta-band p { color: rgba(250, 248, 245, 0.75); max-width: 560px; margin: 0 auto 1.6em; font-size: 0.92rem; line-height: 1.7; } .cta-band .btn { background: rgba(250, 248, 245, 0.95); } .cta-band-sm { padding: 28px 20px; margin-top: 20px; } .cta-band-sm p { margin-bottom: 1.2em; } /* ------------------------------------------------------------------------- Picker Modal（點卡片加購的精簡選配彈層，共用 style.css 的 .modal-overlay/.modal-box） ------------------------------------------------------------------------- */ #picker-modal-overlay .modal-box h3 { margin-bottom: 0.8em; } .picker-field-note { font-size: 0.8rem; color: var(--color-text-softer); margin: -6px 0 14px; white-space: pre-line; } /* 棒41：固定班次時刻說明改多行呈現（transport_fixed_schedule_note 字串內含 \n）， pre-line 讓換行生效同時仍摺疊多餘空白；既有單行 note 文字不受影響（無 \n 即無變化）。*/ /* 棒37：場次剩餘名額提示，≤3 位時改用 accent 色強調（沿用既有 --color-accent，非新配色），一般時仍是預設灰階，避免整頁到處紫色 */ .picker-field-note.is-accent { color: var(--color-accent); font-weight: 600; } /* ------------------------------------------------------------------------- 可點擊卡片（案號 25-phase4-modal：整卡點擊開預約彈窗，而非僅按鈕） ------------------------------------------------------------------------- */ .card-clickable { cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease; } /* 案號 20260728-card-double-tap-fix：老闆回報「點卡片畫面卡住，要點兩次才跳轉預約畫面」——根因是 iOS Safari／多數行動瀏覽器的經典行為：非原生互動元素（

，非 /