:root { /* 月光 · 暖中性色系 */ --cream: #f7f3ec; --cream-deep: #f7f3ec; --sand: #d9ccb9; --taupe: #a99a86; --taupe-text: #8a7d6b; --ink: #211d18; --ink-soft: #4a4339; --night: #14110d; --night-2: #1c1813; --moon: #f7f3ec; --moon-blue: #8a99ab; --silver: #c9c2b6; --line: rgba(33, 29, 24, 0.12); --line-light: rgba(247, 243, 236, 0.16); --font-serif-en: "Cormorant Garamond", "Noto Serif TC", serif; --font-serif: "Noto Serif TC", "Cormorant Garamond", serif; --font-sans: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --maxw: 1240px; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { background: var(--cream); color: var(--ink); font-family: var(--font-sans); font-weight: 300; line-height: 1.85; letter-spacing: 0.02em; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; } /* ---------- 共用排版 ---------- */ .eyebrow { font-family: var(--font-sans); font-size: 12px; font-weight: 400; letter-spacing: 0.42em; text-transform: uppercase; color: var(--taupe-text); } .display { font-family: var(--font-serif-en); font-weight: 400; line-height: 1.04; letter-spacing: 0.01em; } .serif { font-family: var(--font-serif); font-weight: 400; } .section { padding: 140px 0; } .section-head { max-width: 720px; margin: 0 auto 80px; text-align: center; } .section-head .eyebrow { display: block; margin-bottom: 26px; } .section-head h2 { font-family: var(--font-serif-en); font-weight: 300; font-size: clamp(34px, 5vw, 58px); line-height: 1.1; color: var(--ink); } .section-head .zh { font-family: var(--font-serif); font-size: clamp(20px, 2.4vw, 27px); font-weight: 400; margin-top: 14px; color: var(--ink-soft); letter-spacing: 0.08em; } .lede { font-size: 17px; line-height: 2.1; color: var(--ink-soft); font-weight: 300; } /* ---------- Reveal 動畫 ---------- 保險：只有在 JS 正常載入（）時才預先隱藏內容並做動畫。 若 JS 未載入 / 載入失敗，.reveal 不會被隱藏，內容一律可見，不會空白。 */ .js .reveal { opacity: 0; transform: translateY(34px); transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); } .js .reveal.in { opacity: 1; transform: none; } /* 尊重「減少動態效果」的系統設定：直接顯示，不做位移動畫 */ @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } } /* 錨點跳轉時，預留固定導覽列的高度，標題才不會被擋住 */ section[id], header[id] { scroll-margin-top: 96px; } /* ---------- 導覽列 ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 26px 40px; transition: background 0.5s ease, padding 0.5s ease, box-shadow 0.5s ease; } .nav.scrolled { background: rgba(243, 236, 226, 0.86); backdrop-filter: blur(14px); padding: 16px 40px; box-shadow: 0 1px 0 var(--line); } .nav .brand { font-family: var(--font-serif-en); font-size: 25px; letter-spacing: 0.16em; font-weight: 500; display: flex; align-items: center; gap: 11px; color: var(--ink); transition: color 0.4s ease; } .nav .brand .moon-mark { width: 17px; height: 17px; border-radius: 50%; background: radial-gradient(circle at 32% 32%, #fff, var(--silver)); box-shadow: inset -4px -3px 5px rgba(120, 110, 95, 0.45); } /* 導覽列 logo 圖：白色去背 logo 在淺色列上轉為深色顯示 */ .nav .brand-logo { height: 46px; width: auto; display: block; filter: brightness(0) saturate(100%); } .nav-links { display: flex; gap: 38px; font-size: 13.5px; letter-spacing: 0.14em; font-weight: 500; color: var(--ink-soft); transition: color 0.4s ease; } .nav-links a { position: relative; padding-bottom: 3px; transition: color 0.3s; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: currentColor; transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .nav-links a:hover { color: var(--ink); } .nav-links a:hover::after { width: 100%; } .nav .cta-mini { border: 1.5px solid var(--ink); border-radius: 100px; padding: 9px 22px; font-size: 12.5px; letter-spacing: 0.16em; font-weight: 500; color: var(--ink); transition: background 0.4s, color 0.4s, border-color 0.4s; } .nav .cta-mini:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); } /* 漢堡按鈕（手機才顯示）；mobile-only 的購買連結桌機隱藏 */ .nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 8px; } .nav-burger span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.3s, opacity 0.3s; } .nav-buy-mobile { display: none; } /* 捲動後：導覽列變實色，文字恢復深色 */ .nav.scrolled .brand { color: var(--ink); } .nav.scrolled .nav-links { color: var(--ink-soft); } .nav.scrolled .nav-links a:hover { color: var(--ink); } .nav.scrolled .cta-mini { border-color: var(--ink); color: var(--ink); } .nav.scrolled .cta-mini:hover { background: var(--ink); color: var(--cream); } /* ---------- Hero（淺色棚拍漸層 + 產品群右側，參考 Atmosphere） ---------- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; /* 暖調棚拍漸層：上方中右有柔和暗袋（聚光），下方較亮（地面） */ background: radial-gradient( 62% 52% at 64% 30%, rgba(92, 82, 67, 0.32) 0%, rgba(92, 82, 67, 0) 60% ), linear-gradient(162deg, #d7cfc2 0%, #e7e0d4 50%, #f2ece2 100%); } /* 產品群放右側，置中對齊、底部投影做出落地感 */ .hero-bg { position: absolute; top: 0; right: 1%; bottom: 0; width: 56%; background: url("images/hero-group.png") center 54% / contain no-repeat; filter: drop-shadow(0 38px 46px rgba(60, 50, 38, 0.24)); } .hero-overlay { display: none; } .hero-inner { position: relative; z-index: 2; width: 100%; } .hero-copy { max-width: 600px; } .hero-copy .eyebrow { display: block; margin-bottom: 30px; color: var(--taupe-text); } .hero-copy h1 { font-family: var(--font-serif-en); font-weight: 300; font-size: clamp(34px, 5vw, 64px); line-height: 1.05; letter-spacing: 0.01em; color: var(--ink); white-space: nowrap; } .hero-copy h1 em { font-style: italic; font-weight: 400; } .hero-copy .sub { margin-top: 30px; max-width: 600px; font-size: 16.5px; line-height: 2.05; color: var(--ink-soft); } .hero-actions { margin-top: 44px; display: flex; align-items: center; gap: 26px; } /* 淺色 Hero：主按鈕用深色（預設 .btn），文字按鈕用深色 */ .hero .btn.ghost { background: transparent; color: var(--ink); } /* 手機版專用產品照（電腦版隱藏） */ .hero-photo { display: none; } .btn { display: inline-flex; align-items: center; gap: 12px; background: var(--ink); color: var(--cream); border-radius: 100px; padding: 16px 34px; font-size: 13.5px; letter-spacing: 0.18em; border: 1px solid var(--ink); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s; } .btn:hover { transform: translateY(-3px); background: var(--night); } .btn.ghost { background: transparent; color: var(--ink); padding: 16px 8px; border: none; } .btn.ghost .arrow { transition: transform 0.4s; } .btn.ghost:hover .arrow { transform: translateX(6px); } .scroll-hint { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 3; font-size: 11px; letter-spacing: 0.4em; color: var(--taupe-text); display: flex; flex-direction: column; align-items: center; gap: 12px; } .scroll-hint .bar { width: 1px; height: 46px; background: linear-gradient(var(--taupe-text), transparent); animation: drop 2.4s infinite; } @keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } /* ---------- Marquee 細條 ---------- */ .strip { background: var(--ink); color: var(--cream); padding: 18px 0; overflow: hidden; } .strip-track { display: flex; gap: 60px; white-space: nowrap; animation: slide 32s linear infinite; font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; } .strip-track span { opacity: 0.78; } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- 品牌理念（夜 · 左圖右文） ---------- */ .philosophy { background: var(--night); color: var(--moon); position: relative; padding: 140px 0; overflow: hidden; } .philosophy .glow { position: absolute; top: 20%; right: 8%; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient( circle, rgba(247, 243, 236, 0.14) 0%, rgba(247, 243, 236, 0) 68% ); } .philosophy-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 0.82fr 1fr; gap: 72px; align-items: center; } .philosophy-photo img { width: 100%; border-radius: 6px; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.7); } .philosophy-text .eyebrow { color: rgba(247, 243, 236, 0.55); display: block; margin-bottom: 32px; } .philosophy-text .body { font-family: var(--font-serif); font-weight: 300; font-size: clamp(17px, 1.5vw, 21px); line-height: 2.35; letter-spacing: 0.06em; color: #e9e2d7; max-width: 520px; } .poem-sign { margin-top: 38px; font-family: var(--font-serif-en); font-style: italic; font-size: 23px; letter-spacing: 0.08em; color: rgba(247, 243, 236, 0.8); } /* ---------- 痛點：不保養的包正在貶值（夜） ---------- */ .problem { background: var(--night); color: var(--moon); } .problem .section-head h2 { color: var(--moon); } .problem .section-head .zh { color: rgba(247, 243, 236, 0.78); } .problem .section-head .eyebrow { color: rgba(247, 243, 236, 0.5); } .problem-tags { display: flex; flex-wrap: wrap; justify-content: center; margin: -44px auto 56px; } .problem-tags span { font-family: var(--font-serif); font-size: 17px; letter-spacing: 0.14em; color: rgba(247, 243, 236, 0.82); padding: 0 24px; border-right: 1px solid rgba(247, 243, 236, 0.2); } .problem-tags span:last-child { border-right: none; } .problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 760px; margin: 0 auto; } .problem-card { position: relative; border-radius: 6px; overflow: hidden; } .problem-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; } .problem-label { position: absolute; left: 14px; bottom: 14px; background: rgba(20, 17, 13, 0.55); backdrop-filter: blur(6px); color: var(--moon); padding: 7px 15px; border-radius: 100px; font-size: 12px; letter-spacing: 0.12em; } /* ---------- 產品（乾淨置中陳列） ---------- */ .products { background: var(--cream); } /* 可擴充的置中網格：現在 2 項置中，未來新增會自動排成多欄並維持置中 */ .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 260px)); justify-content: center; gap: 56px 40px; max-width: 1000px; margin: 0 auto; } .product-item { text-align: center; display: flex; flex-direction: column; align-items: center; } .product-item { cursor: pointer; } .product-photo { position: relative; height: 300px; display: grid; place-items: center; margin-bottom: 18px; width: 100%; } /* 滑到卡片上浮現的「立即購買」按鈕：半透明霧面玻璃，不擋瓶身 */ .product-buy { position: absolute; left: 50%; bottom: 10px; transform: translate(-50%, 12px); background: rgba(247, 243, 236, 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ink); border: 1px solid rgba(255, 255, 255, 0.55); padding: 11px 26px; border-radius: 100px; font-size: 12.5px; letter-spacing: 0.18em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .product-item:hover .product-buy { opacity: 1; transform: translate(-50%, 0); } .product-photo img { max-height: 300px; max-width: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 24px 36px rgba(60, 50, 38, 0.2)); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .product-item:hover .product-photo img { transform: translateY(-8px) scale(1.02); } /* 橫向群組圖（雙件組）：放大以對齊單瓶高度 */ .product-photo-wide { overflow: visible; } .product-photo-wide img { transform: scale(1.22); } .product-item:hover .product-photo-wide img { transform: translateY(-8px) scale(1.26); } .product-item h3 { font-family: var(--font-serif-en); font-weight: 400; font-size: 22px; line-height: 1.2; } .product-item .zh { font-family: var(--font-serif); font-size: 14px; color: var(--ink-soft); margin-top: 5px; letter-spacing: 0.08em; } .product-item .price { margin-top: 14px; font-family: var(--font-serif-en); font-size: 19px; letter-spacing: 0.04em; color: var(--ink); } .product-item .price .vol { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.14em; color: var(--taupe-text); margin-right: 9px; } /* ---------- 三層科技 ---------- */ .tech { background: var(--cream-deep); } .tech-rows { display: flex; flex-direction: column; gap: 0; max-width: 980px; margin: 0 auto; } .tech-row { display: grid; grid-template-columns: 120px 1fr; gap: 48px; padding: 46px 0; border-top: 1px solid var(--line); align-items: start; } .tech-row:last-child { border-bottom: 1px solid var(--line); } .tech-row .layer { font-family: var(--font-serif-en); font-size: 56px; font-weight: 300; color: var(--sand); line-height: 1; } .tech-row h3 { font-family: var(--font-serif); font-size: 23px; font-weight: 500; letter-spacing: 0.06em; } .tech-row .en { font-family: var(--font-serif-en); font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--taupe-text); margin-top: 6px; } .tech-row p { margin-top: 16px; font-size: 15px; line-height: 2; color: var(--ink-soft); max-width: 600px; } /* ---------- 職人情境 ---------- */ .artisan { position: relative; min-height: 88vh; display: flex; align-items: flex-end; background-image: linear-gradient( 180deg, rgba(20, 17, 13, 0.1) 0%, rgba(20, 17, 13, 0.72) 100% ), url("images/artisan.jpg"); background-size: cover; background-position: center 38%; background-attachment: fixed; color: var(--moon); } .artisan .wrap { padding-bottom: 90px; padding-top: 90px; } .artisan .eyebrow { color: rgba(247, 243, 236, 0.7); } .artisan h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.45; margin-top: 22px; max-width: 680px; letter-spacing: 0.06em; } .artisan p { margin-top: 22px; max-width: 460px; font-size: 15.5px; line-height: 2; color: rgba(247, 243, 236, 0.82); } /* ---------- 適用皮革 ---------- */ .leather { background: var(--cream); } .leather-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; max-width: 900px; margin: 0 auto; } .leather-cols h3 { font-family: var(--font-serif); font-size: 19px; font-weight: 500; letter-spacing: 0.08em; padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; } .leather-cols ul { list-style: none; } .leather-cols li { display: flex; align-items: center; gap: 14px; padding: 13px 0; font-size: 15px; color: var(--ink-soft); border-bottom: 1px solid rgba(33, 29, 24, 0.06); } .mark { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 11px; } .mark.yes { background: rgba(138, 153, 171, 0.18); color: var(--moon-blue); } .mark.no { background: rgba(170, 130, 120, 0.16); color: #a8786a; } /* ---------- 使用方式 ---------- */ .steps { background: var(--night); color: var(--moon); } .steps .section-head h2 { color: var(--moon); } .steps .section-head .zh { color: rgba(247, 243, 236, 0.7); } .steps .section-head .eyebrow { color: rgba(247, 243, 236, 0.55); } .step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .step { border-top: 1px solid var(--line-light); padding-top: 26px; } .step .no { font-family: var(--font-serif-en); font-size: 15px; letter-spacing: 0.2em; color: var(--moon-blue); } .step h4 { font-family: var(--font-serif); font-size: 19px; font-weight: 500; margin-top: 18px; letter-spacing: 0.05em; } .step p { margin-top: 12px; font-size: 14px; line-height: 1.95; color: rgba(247, 243, 236, 0.66); } /* ---------- 認證 ---------- */ .trust { background: var(--cream-deep); text-align: center; } .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 920px; margin: 0 auto; } .trust-item { padding: 30px 20px; } .trust-item .big { font-family: var(--font-serif-en); font-size: 46px; font-weight: 300; color: var(--ink); } .trust-item .lbl { margin-top: 12px; font-size: 14px; color: var(--ink-soft); letter-spacing: 0.06em; } /* ---------- 禮盒 ---------- */ .gift { background: var(--cream); } .gift-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .gift-grid img { border-radius: 6px; box-shadow: 0 40px 90px -50px rgba(60, 50, 38, 0.5); } .gift-copy .eyebrow { display: block; margin-bottom: 26px; } .gift-copy h2 { font-family: var(--font-serif-en); font-weight: 300; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.12; } .gift-copy .zh { font-family: var(--font-serif); font-size: 21px; margin-top: 12px; color: var(--ink-soft); letter-spacing: 0.08em; } .gift-copy p { margin-top: 26px; font-size: 15.5px; line-height: 2.05; color: var(--ink-soft); max-width: 460px; } .gift-list { margin-top: 28px; list-style: none; } .gift-list li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-soft); display: flex; gap: 14px; align-items: center; } .gift-list li::before { content: "✦"; color: var(--moon-blue); font-size: 12px; } /* ---------- FAQ ---------- */ .faq { background: var(--cream); } .faq-list { max-width: 800px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; text-align: left; padding: 28px 4px; font-family: var(--font-serif); font-size: 18px; font-weight: 500; color: var(--ink); letter-spacing: 0.04em; transition: color 0.3s; } .faq-item.open .faq-q, .faq-q:hover { color: var(--ink); } .faq-icon { font-family: var(--font-serif-en); font-size: 26px; font-weight: 300; color: var(--taupe-text); flex-shrink: 0; line-height: 1; transition: transform 0.4s, color 0.3s; } .faq-item.open .faq-icon { color: var(--moon-blue); } .faq-a-wrap { overflow: hidden; transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .faq-a { padding: 0 4px 30px; font-size: 15px; line-height: 2; color: var(--ink-soft); max-width: 660px; } /* ---------- CTA ---------- */ .cta { background: var(--night); color: var(--moon); text-align: center; padding: 160px 0; position: relative; overflow: hidden; } .cta .glow { position: absolute; bottom: -200px; left: 50%; transform: translateX(-50%); width: 560px; height: 560px; border-radius: 50%; background: radial-gradient( circle, rgba(247, 243, 236, 0.12) 0%, rgba(247, 243, 236, 0) 70% ); } .cta .eyebrow { color: rgba(247, 243, 236, 0.55); display: block; margin-bottom: 28px; } .cta h2 { font-family: var(--font-serif-en); font-weight: 300; font-size: clamp(38px, 6vw, 76px); line-height: 1.05; position: relative; z-index: 2; } .cta h2 em { font-style: italic; } .cta .price-line { position: relative; z-index: 2; margin-top: 30px; font-family: var(--font-serif); font-size: 19px; color: rgba(247, 243, 236, 0.78); letter-spacing: 0.08em; } .cta .btn { margin-top: 44px; background: var(--cream); color: var(--ink); border-color: var(--cream); position: relative; z-index: 2; } .cta .btn:hover { background: #fff; } /* ---------- Footer ---------- */ .footer { background: var(--night-2); color: rgba(247, 243, 236, 0.7); padding: 70px 0 40px; } .footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--line-light); } .footer .brand { font-family: var(--font-serif-en); font-size: 30px; letter-spacing: 0.16em; color: var(--moon); } .footer .brand .tag { display: block; font-family: var(--font-serif); font-size: 12px; letter-spacing: 0.3em; color: rgba(247, 243, 236, 0.5); margin-top: 8px; } .footer-logo { height: 76px; width: auto; } .footer-cols { display: flex; gap: 64px; } .footer-cols h5 { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(247, 243, 236, 0.5); margin-bottom: 16px; font-weight: 400; } .footer-cols a { display: block; font-size: 14px; padding: 6px 0; transition: color 0.3s; } .footer-cols a:hover { color: var(--moon); } .footer-bottom { margin-top: 30px; display: flex; justify-content: space-between; font-size: 12px; letter-spacing: 0.08em; color: rgba(247, 243, 236, 0.4); } /* ---------- 產品分頁 ---------- */ .pd-hero { background: radial-gradient( 60% 50% at 35% 34%, rgba(92, 82, 67, 0.22) 0%, rgba(92, 82, 67, 0) 60% ), linear-gradient(160deg, #ded7ca 0%, #e9e2d6 52%, #f2ece2 100%); padding: 140px 0 110px; } .pd-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .pd-hero-photo { display: grid; place-items: center; } .pd-hero-photo img { max-height: 540px; width: auto; object-fit: contain; filter: drop-shadow(0 34px 50px rgba(60, 50, 38, 0.24)); } .pd-back { display: inline-block; font-size: 13px; letter-spacing: 0.12em; color: var(--taupe-text); margin-bottom: 26px; transition: color 0.3s; } .pd-back:hover { color: var(--ink); } .pd-hero-info .no { display: block; font-family: var(--font-serif-en); font-size: 14px; letter-spacing: 0.24em; color: var(--taupe-text); } .pd-hero-info h1 { font-family: var(--font-serif-en); font-weight: 400; font-size: clamp(38px, 5vw, 60px); line-height: 1.08; margin-top: 10px; color: var(--ink); } .pd-hero-info .zh { font-family: var(--font-serif); font-size: 20px; color: var(--ink-soft); margin-top: 8px; letter-spacing: 0.08em; } .pd-tagline { margin-top: 22px; font-family: var(--font-serif); font-size: 18px; line-height: 1.8; color: var(--ink); letter-spacing: 0.04em; } .pd-intro { margin-top: 16px; font-size: 15px; line-height: 2; color: var(--ink-soft); max-width: 480px; } .pd-buy-row { margin-top: 40px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .pd-price { font-family: var(--font-serif-en); font-size: 30px; color: var(--ink); } .pd-price .vol { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.16em; color: var(--taupe-text); margin-right: 12px; } .pd-features { background: var(--cream-deep); } .pd-specs { background: var(--cream); } .spec-table { max-width: 720px; margin: 0 auto; } .spec-row { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 22px 4px; border-top: 1px solid var(--line); font-size: 15px; } .spec-row:last-child { border-bottom: 1px solid var(--line); } .spec-k { font-family: var(--font-serif); font-weight: 500; color: var(--ink); letter-spacing: 0.06em; } .spec-v { color: var(--ink-soft); } /* ---------- 擦拭揭示（保養前後示範） ---------- */ .reveal-demo { background: var(--cream-deep); } .reveal-stage { position: relative; width: 100%; max-width: 920px; margin: 0 auto; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; cursor: crosshair; box-shadow: 0 40px 80px -50px rgba(60, 50, 38, 0.55); touch-action: none; } .reveal-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; } /* 乾淨層：只在游標附近的圓形範圍顯示 */ .rv-clean { -webkit-mask-image: radial-gradient( circle var(--r) at var(--x) var(--y), #000 0%, #000 58%, transparent 78% ); mask-image: radial-gradient( circle var(--r) at var(--x) var(--y), #000 0%, #000 58%, transparent 78% ); } .rv-badge { position: absolute; top: 18px; font-size: 11px; letter-spacing: 0.22em; padding: 7px 14px; border-radius: 100px; backdrop-filter: blur(6px); pointer-events: none; } .rv-badge-before { left: 18px; background: rgba(20, 17, 13, 0.5); color: rgba(247, 243, 236, 0.9); } .rv-badge-after { right: 18px; background: rgba(247, 243, 236, 0.6); color: var(--ink); } .rv-hint { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); font-size: 12px; letter-spacing: 0.3em; color: rgba(247, 243, 236, 0.92); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); pointer-events: none; } /* ---------- 品牌故事時間軸 ---------- */ .story { background: var(--cream); } .story-timeline { max-width: 720px; margin: 0 auto; position: relative; padding-left: 44px; } .story-timeline::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; background: var(--line); } .story-node { position: relative; padding-bottom: 54px; } .story-node:last-child { padding-bottom: 0; } .story-node::before { content: ""; position: absolute; left: -44px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--cream); border: 2px solid var(--moon-blue); } .story-node .year { font-family: var(--font-serif-en); font-size: 27px; font-weight: 400; letter-spacing: 0.04em; color: var(--ink); } .story-node h3 { font-family: var(--font-serif); font-size: 19px; font-weight: 500; letter-spacing: 0.05em; margin-top: 4px; } .story-node p { margin-top: 10px; font-size: 15px; line-height: 2; color: var(--ink-soft); max-width: 540px; } .story-node-img img { margin-top: 22px; width: 100%; max-width: 440px; border-radius: 6px; box-shadow: 0 30px 60px -42px rgba(60, 50, 38, 0.5); } /* ---------- 使用前後見證 ---------- */ .beforeafter { background: var(--cream-deep); } .ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 860px; margin: 0 auto; } .ba-item { position: relative; margin: 0; } .ba-item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; display: block; box-shadow: 0 30px 60px -42px rgba(60, 50, 38, 0.55); } .ba-tag { position: absolute; top: 14px; left: 14px; background: rgba(20, 17, 13, 0.5); backdrop-filter: blur(6px); color: var(--moon); padding: 7px 16px; border-radius: 100px; font-size: 12px; letter-spacing: 0.16em; } .ba-tag-after { background: rgba(247, 243, 236, 0.72); color: var(--ink); } .ba-item figcaption { margin-top: 16px; text-align: center; font-size: 14px; color: var(--ink-soft); letter-spacing: 0.04em; } /* ---------- 月桂葉徽章 ---------- */ .trust-badges { display: flex; justify-content: center; gap: 80px; margin: 0 auto 72px; flex-wrap: wrap; } .badge { display: flex; align-items: center; gap: 4px; } .badge-laurel { width: 42px; height: 92px; color: #bfa063; flex-shrink: 0; } .badge-laurel-flip { transform: scaleX(-1); } .badge-text { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 2px; } .badge-text span { font-family: var(--font-serif); font-weight: 500; letter-spacing: 0.1em; color: var(--ink); font-size: 16px; line-height: 1.4; white-space: nowrap; } /* ---------- SGS 證書 ---------- */ .trust-cert { display: grid; grid-template-columns: 0.68fr 1fr; gap: 56px; align-items: center; max-width: 920px; margin: 0 auto; } /* 品牌故事 × 認證 合併：收尾的品質保證區 */ .heritage-trust { margin-top: 86px; padding-top: 64px; border-top: 1px solid var(--line); } /* 合併後 SGS 證書縮小 */ .heritage-cert { grid-template-columns: 0.42fr 1fr; gap: 48px; max-width: 840px; } .trust-cert-img { position: relative; display: block; } .trust-cert-img img { width: 100%; border-radius: 4px; border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(60, 50, 38, 0.5); } .trust-cert-zoom { position: absolute; bottom: 12px; right: 12px; background: rgba(20, 17, 13, 0.6); backdrop-filter: blur(6px); color: var(--moon); padding: 6px 14px; border-radius: 100px; font-size: 11px; letter-spacing: 0.12em; opacity: 0; transition: opacity 0.3s; } .trust-cert-img:hover .trust-cert-zoom { opacity: 1; } .trust-cert-info { text-align: left; } .trust-cert-info .no { font-family: var(--font-serif-en); font-size: 13px; letter-spacing: 0.18em; color: var(--taupe-text); } .trust-cert-info h3 { font-family: var(--font-serif-en); font-weight: 400; font-size: 30px; margin-top: 8px; } .trust-cert-info p { margin-top: 18px; font-size: 15px; line-height: 2; color: var(--ink-soft); max-width: 460px; } .trust-stats { display: flex; gap: 52px; margin-top: 30px; } .trust-stats .big { font-family: var(--font-serif-en); font-size: 42px; font-weight: 300; display: block; color: var(--ink); line-height: 1; } .trust-stats .lbl { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-soft); } /* ---------- About MoonSE 入口 band（左圖右文） ---------- */ .about-band { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } .about-band-photo { overflow: hidden; min-height: 540px; } .about-band-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .about-band-text { display: flex; flex-direction: column; justify-content: center; padding: 80px clamp(40px, 6vw, 110px); background: var(--cream-deep); } .about-band-text .eyebrow { display: block; margin-bottom: 18px; } .about-band-text h2 { font-family: var(--font-serif-en); font-weight: 300; font-size: clamp(34px, 4vw, 56px); line-height: 1.08; color: var(--ink); } .about-band-text p { margin-top: 22px; font-size: 16px; line-height: 2; color: var(--ink-soft); max-width: 420px; } .about-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 30px; font-size: 15px; letter-spacing: 0.08em; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 4px; width: fit-content; } .about-link span { transition: transform 0.3s; } .about-link:hover span { transform: translateX(5px); } /* ---------- About 分頁 主視覺 ---------- */ .about-hero { padding: 150px 0 70px; text-align: center; background: var(--cream); } .about-hero .eyebrow { display: block; margin-bottom: 22px; } .about-hero h1 { font-family: var(--font-serif-en); font-weight: 300; font-size: clamp(40px, 6vw, 76px); line-height: 1.05; color: var(--ink); } .about-hero h1 em { font-style: italic; } .about-intro { max-width: 600px; margin: 28px auto 0; font-size: 16.5px; line-height: 2.1; color: var(--ink-soft); } /* ---------- About 頁：品牌理念（左圖右文，夜色） ---------- */ .about-philosophy { background: var(--night); color: var(--moon); padding: 130px 0; position: relative; overflow: hidden; } .about-philosophy::before { content: ""; position: absolute; top: 18%; right: 6%; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient( circle, rgba(247, 243, 236, 0.12) 0%, rgba(247, 243, 236, 0) 68% ); } .philo-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 0.82fr 1fr; gap: 70px; align-items: center; } .philo-photo img { width: 100%; border-radius: 8px; box-shadow: 0 44px 80px -40px rgba(0, 0, 0, 0.75); } .philo-text .eyebrow { display: block; margin-bottom: 28px; color: rgba(247, 243, 236, 0.55); } .philo-text .manifesto { font-family: var(--font-serif); font-weight: 300; font-size: clamp(18px, 1.7vw, 23px); line-height: 2.15; letter-spacing: 0.05em; color: #efe9df; } .philo-text .poem-sign { margin-top: 34px; } /* ---------- 據點入口（置中連結） ---------- */ .channels-cta { background: var(--cream); text-align: center; } .channels-cta .eyebrow { display: block; margin-bottom: 18px; } .channels-cta h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.3; color: var(--ink); } .channels-cta p { margin: 16px auto 0; max-width: 520px; font-size: 16px; line-height: 1.95; color: var(--ink-soft); } .cta-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 30px; font-size: 15px; font-weight: 500; letter-spacing: 0.06em; color: var(--ink); border-bottom: 1.5px solid var(--ink); padding-bottom: 5px; } .cta-link span { transition: transform 0.3s; } .cta-link:hover span { transform: translateX(5px); } /* ---------- 銷售與養護據點頁 ---------- */ .stores { background: var(--cream); } /* 縣市篩選選單 */ .city-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 760px; margin: 0 auto 64px; } .city-filter button { background: transparent; border: 1px solid var(--line); border-radius: 100px; padding: 9px 20px; font-family: var(--font-sans); font-size: 14px; letter-spacing: 0.04em; color: var(--ink-soft); cursor: pointer; transition: background 0.3s, color 0.3s, border-color 0.3s; } .city-filter button:hover { border-color: var(--ink); color: var(--ink); } .city-filter button.on { background: var(--ink); border-color: var(--ink); color: var(--cream); } /* 可點開地圖的卡片 */ .store-card-link { display: block; } .store-map { display: inline-block; margin-top: 14px; margin-left: 10px; font-size: 12px; letter-spacing: 0.06em; color: var(--moon-blue); } .store-group { max-width: 1000px; margin: 0 auto; } .store-group + .store-group { margin-top: 80px; } .store-group-head { text-align: center; margin-bottom: 42px; } .store-group-head .eyebrow { display: block; margin-bottom: 14px; } .store-group-head h2 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(24px, 3vw, 34px); color: var(--ink); } .store-group-head .zh { margin-top: 10px; font-size: 15px; color: var(--ink-soft); } .store-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .store-card { background: #fffdf8; border: 1px solid var(--line); border-radius: 10px; padding: 28px 26px; transition: transform 0.4s, box-shadow 0.4s; } .store-card:hover { transform: translateY(-5px); box-shadow: 0 28px 50px -40px rgba(60, 50, 38, 0.5); } .store-card h3 { font-family: var(--font-serif); font-size: 18px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink); } .store-card .store-area { display: inline-block; margin-top: 9px; font-size: 12px; letter-spacing: 0.12em; color: var(--moon-blue); } .store-card .store-addr { margin-top: 12px; font-size: 14px; line-height: 1.85; color: var(--ink-soft); } .store-card .store-note { display: inline-block; margin-top: 14px; font-size: 12px; letter-spacing: 0.06em; padding: 4px 13px; border: 1px solid var(--line); border-radius: 100px; color: var(--taupe-text); } /* ---------- RWD ---------- */ @media (max-width: 900px) { .store-grid { grid-template-columns: 1fr; } .about-band { grid-template-columns: 1fr; } .about-band-photo { min-height: 300px; } .about-band-text { padding: 50px 24px; text-align: center; align-items: center; } .about-band-text p { max-width: 100%; } .section { padding: 90px 0; } .nav, .nav.scrolled { padding: 14px 20px; } /* 手機版：漢堡展開下拉選單，取代立即選購按鈕 */ .nav-burger { display: flex; } .nav .cta-mini { display: none; } .nav-links { position: fixed; top: 58px; left: 0; right: 0; flex-direction: column; gap: 0; background: rgba(247, 243, 236, 0.98); backdrop-filter: blur(14px); padding: 8px 22px 20px; box-shadow: 0 14px 30px -18px rgba(60, 50, 38, 0.4); transform: translateY(-140%); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .nav-links.open { transform: translateY(0); } .nav-links a { width: 100%; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 15px; } .nav-links a::after { display: none; } .nav-buy-mobile { display: block; margin-top: 8px; border: 1.5px solid var(--ink); border-radius: 100px; text-align: center; padding: 13px 0 !important; color: var(--ink); } .nav-buy-mobile { border-bottom: 1.5px solid var(--ink) !important; } /* 手機版 Hero：文字置中在上、產品群在下（Atmosphere 概念，淺色棚拍） */ .hero { flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 100vh; background: radial-gradient( 70% 40% at 50% 72%, rgba(92, 82, 67, 0.26) 0%, rgba(92, 82, 67, 0) 62% ), linear-gradient(170deg, #ded7ca 0%, #e9e2d6 45%, #f3ede3 100%); } .hero-bg, .hero-overlay, .scroll-hint { display: none; } /* 提高權重，避免被後面的 .wrap padding shorthand 覆寫 */ .hero .hero-inner { flex: 0 0 auto; padding-top: 15vh; padding-bottom: 8px; text-align: center; } .hero-copy { max-width: 100%; } .hero-copy .eyebrow { margin-bottom: 22px; } .hero-copy .sub { max-width: 100%; margin-left: auto; margin-right: auto; } .hero-actions { justify-content: center; margin-top: 34px; } .hero-photo { display: block; flex: 1 1 auto; min-height: 0; margin-top: 18px; position: relative; } .hero-photo img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 20px 30px rgba(60, 50, 38, 0.2)); } .philosophy-grid, .philo-grid, .leather-cols, .gift-grid, .trust-grid, .trust-cert, .step-grid { grid-template-columns: 1fr; gap: 36px; } .philo-photo img { max-height: 56vh; width: auto; margin: 0 auto; } .trust-cert-img { max-width: 360px; margin: 0 auto; } .trust-badges { gap: 40px; } .problem-grid { gap: 14px; } .philosophy-photo img { max-height: 56vh; width: auto; margin: 0 auto; } .pd-hero { padding: 116px 0 80px; } .pd-hero-grid { grid-template-columns: 1fr; gap: 30px; } .pd-hero-photo img { max-height: 46vh; } .pd-buy-row { gap: 18px; } .spec-row { grid-template-columns: 110px 1fr; gap: 16px; } /* 手機版：The Collection 改為左右滑動 */ .product-grid { display: flex; grid-template-columns: none; max-width: none; justify-content: flex-start; overflow-x: auto; gap: 16px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; } .product-grid::-webkit-scrollbar { display: none; } .product-grid > .reveal { flex: 0 0 78%; scroll-snap-align: start; } .product-photo { height: 320px; } .product-photo img { max-height: 320px; } /* 觸控裝置無 hover，「立即購買」常駐顯示 */ .product-buy { opacity: 1; transform: translate(-50%, 0); } .tech-row { grid-template-columns: 1fr; gap: 14px; } .artisan { background-attachment: scroll; } .footer-top { flex-direction: column; } .footer-cols { gap: 40px; flex-wrap: wrap; } .wrap { padding: 0 22px; } }