:root { –sea: #65b8b0; –sea-dark: #3d8f8a; –sand: #fff8ea; –ink: #33444a; –muted: #7b8b8d; –card: #ffffff; –line: #e7eeee; –coral: #f39a7b; –shadow: 0 12px 35px rgba(55,90,90,.10); –radius: 22px; } /* 全網站 */ * { box-sizing: border-box; } body { margin: 0; background: linear-gradient( #effbf9 0 340px, #f8faf9 340px ); color: var(–ink); font-family: system-ui, -apple-system, BlinkMacSystemFont, “Noto Sans TC”, “PingFang TC”, sans-serif; line-height: 1.7; } /* 網站最大寬度 */ .container { max-width: 1100px; margin: auto; padding: 0 18px; } /* 首頁 */ .hero { padding: 28px 0 25px; } /* 品牌名稱 */ .brand { font-weight: 900; letter-spacing: .08em; color: var(–sea-dark); } /* 首頁大卡片 */ .hero-card { background: rgba(255,255,255,.88); border: 1px solid #e4f0ee; border-radius: 32px; padding: 34px; box-shadow: var(–shadow); overflow: hidden; position: relative; } /* 小標 */ .kicker { color: var(–sea-dark); font-weight: 800; letter-spacing: .15em; font-size: 13px; } /* 主標題 */ h1 { font-size: clamp(32px, 6vw, 60px); line-height: 1.08; margin: 9px 0 15px; letter-spacing: -.04em; } /* 副標題 */ .subtitle { font-size: 17px; color: #607477; max-width: 720px; } /* 四個旅行資訊 */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; } /* 單一資訊卡 */ .stat { background: #fff; border-radius: 18px; padding: 15px; } /* 數字 */ .stat b { display: block; font-size: 20px; color: var(–sea-dark); } /* 小文字 */ .stat span { font-size: 12px; color: var(–muted); } /* 分頁導覽 */ .tabs { position: sticky; top: 0; z-index: 10; background: rgba(248,250,249,.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(–line); } /* 按鈕排列 */ .tabbar { display: flex; gap: 8px; overflow-x: auto; padding: 11px 0; } /* 分頁按鈕 */ .tabs button { white-space: nowrap; border: 1px solid var(–line); background: white; color: var(–ink); border-radius: 999px; padding: 9px 14px; cursor: pointer; } /* 被選取的按鈕 */ .tabs button.active { background: var(–sea); color: white; border-color: var(–sea); } /* 一般區塊 */ .section { padding: 38px 0; } /* 白色卡片 */ .card { background: var(–card); border: 1px solid var(–line); border-radius: var(–radius); box-shadow: var(–shadow); padding: 22px; } /* 手機版 */ @media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } .hero-card { padding: 25px; } h1 { font-size: 38px; } }

function showSection(id, button) { // 隱藏所有區塊 document .querySelectorAll(“main .section”) .forEach(section => { section.style.display = “none”; }); // 顯示指定區塊 document .getElementById(id) .style.display = “block”; // 移除所有 active document .querySelectorAll(“.tabs button”) .forEach(btn => { btn.classList.remove(“active”); }); // 加上 active button.classList.add(“active”); }