/* ===== INGOLDENSHIP 共用樣式系統（所有頁面共用）===== 組件速查： .wrap 內容容器 | .ph 圖片佔位 | section 區塊 .eyebrow 小標籤 | h2 標題 | .lead 引言 | .btn 按鈕 .page-hero 內頁標題區 | .pgrid 商品格 | .pd-* 產品詳情 .ggrid 情境相簿格 | .stores/.region 據點分區 | .reveal 滾動浮現 */ :root{ --cream:#F5F1E9; --cream-2:#FBF9F4; --ink:#3B352E; --muted:#8C8378; --faint:#B0A794; --sage:#A6B29E; --sand:#D8C6AE; --grey:#8F877C; --line:#E7E0D3; --block:#EAE3D5; /* 次要資訊用的深色（頁尾連結等）。--muted 在近白底上對比只有 3.5:1、--faint 只有 2.3:1， 兩個都低於 WCAG AA 的 4.5:1。本色在 #FBF9F4 上是 6.8:1，與 KINTO 頁尾的 7.5:1 同級。 */ --ink-soft:#5E574D; --serif-cjk:'Noto Serif TC',serif; --serif-latin:'Cormorant Garamond',serif; --sans:'Noto Sans TC',sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} .wrap{max-width:1180px;margin:0 auto;padding:0 40px} .ph{background:var(--block);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:12px;letter-spacing:2px;text-align:center} section{padding:100px 0} section.wrap{padding:100px 40px} .eyebrow{font-size:11px;letter-spacing:5px;color:var(--faint)} h2{font-family:var(--serif-cjk);font-weight:400;font-size:30px;letter-spacing:1px} h3{font-family:var(--serif-cjk);font-weight:400} .lead{color:var(--muted);font-size:15px;max-width:520px;margin-top:14px;line-height:2} .center{text-align:center} .center .lead{margin-left:auto;margin-right:auto} .btn{display:inline-block;border:.5px solid var(--muted);color:var(--ink);padding:13px 28px;border-radius:6px;font-size:13px;letter-spacing:2px;transition:.25s} .btn:hover{background:var(--ink);color:var(--cream)} .btn-light{border-color:#6E6857;color:#F3ECDD} .btn-light:hover{background:#F3ECDD;color:var(--ink)} /* ---- Header ---- */ header{position:sticky;top:0;background:rgba(245,241,233,.9);backdrop-filter:blur(10px);border-bottom:.5px solid var(--line);z-index:50; transition:background .35s ease,border-color .35s ease} /* ── 置頂透明 header（2026-08-10 §6x-5，Max：「置頂區域與 Banner 融為一體， 滑鼠移上去才顯示出不同顏色」＝KINTO 的做法）── .hd-hero＝本頁有滿版 hero（menu.js 偵測 main>.hero-full:first-child 加上）； .hd-clear＝目前捲在頁面最頂（scrollY<10，menu.js 維護）。 透明態只在「clear 且沒有 hover／鍵盤焦點／商品面板開啟／行動抽屜開啟」時成立， 其餘一律回實色——白字壓在奶油色內容上會看不見，這些守門條件一個都不能拆。 */ /* 【§6x-7，Max：「KINTO 的 header 一直置頂，不管滑到哪，只有滑鼠移上去才變色」】 hero 頁的 header＝sticky 永遠置頂＋**背景永遠透明**（字直接浮在內容上，KINTO 同款）； 實色只在 hover／鍵盤焦點／商品面板／行動抽屜時出現（後三個是可用性保底，不能拆）。 字色分兩段：還壓在 hero 圖上（.hd-clear，門檻＝捲過 hero 底）→ 奶油白； 捲過 hero 到奶油色內容上 → 回一般灰（白字在奶油底上看不見）。 非 hero 頁維持 sticky 實色不變。 */ body:not(.mnav-open) header.hd-hero:not(:hover):not(:focus-within):not(.shop-open){ background:transparent;border-bottom-color:transparent; backdrop-filter:none;-webkit-backdrop-filter:none} body:not(.mnav-open) header.hd-hero.hd-clear:not(:hover):not(:focus-within):not(.shop-open) :is(.brand,.menu,.menu a,.ubtn,.langbtn,.lang-code){color:#F5EFE3} body:not(.mnav-open) header.hd-hero.hd-clear:not(:hover):not(:focus-within):not(.shop-open) .nav-toggle i{background:#F5EFE3} body:not(.mnav-open) header.hd-hero.hd-clear:not(:hover):not(:focus-within):not(.shop-open) .cart-n{background:#F5EFE3} /* header 走**滿版**、左右各留 5vw（＝商品面板同一套節奏，見下方 megamenu 註解）。 ⚠️ 這裡要覆蓋 .wrap 的 max-width:1180 與 padding:0 40px——本元素是 `.wrap.nav`， 同分特異性靠「寫在後面」取勝，這條不能搬到 .wrap 前面去。 改滿版的效果：品牌字對齊到 x=5vw，正好與商品面板左欄的 CATEGORY 同一條垂直線； 右上三顆 icon 也才真的落在視窗的右上角（2026-07-26 Max：「像 KINTO 一樣」）。 */ .nav{display:flex;align-items:center;justify-content:space-between;height:66px; max-width:none;padding:0 clamp(22px,5vw,96px)} /* 品牌字與頂層選單同一個灰（2026-08-10 §6x-3，Max：「KINTO 的 logo 跟頂層字顏色一致」） ——整條 header 收成一個色調才安靜；22px 屬大字級，--muted 對比 3.1:1 合規（≥3:1）。 hover 變深＝這是回首頁的連結，給一點可按的暗示。圓標圖案保持原色。 */ .brand{font-family:var(--serif-latin);font-size:22px;letter-spacing:4px;font-weight:500; display:flex;align-items:center;gap:11px;color:var(--muted);transition:color .2s} .brand:hover{color:var(--ink)} .brand-logo{width:34px;height:34px;display:block} /* 頂層選單 KINTO 式（2026-08-10 §6x，Max：「怎麼樣才能做出 KINTO 的感覺」）： ① 字樣隨語系（§6x-2）：zh 中文／en 英文，小號、字距 2px ② 有子面板的項目帶細 chevron（∨），開啟時轉向 ③ 12.5px／--muted 灰，hover 才變深 ⚠️ 位置＝**置中**（§6x-4，Max：「我覺得這些置中」）——KINTO 本家是靠 logo 左對齊， 曾照做過一輪，Max 看過後拍板改回置中；.nav 是 space-between，中項自然置中， **不要再加 margin-right:auto 推回左邊**。 */ .menu{display:flex;gap:34px;font-size:12.5px;letter-spacing:2px;color:var(--muted)} /* 真置中：space-between 只會把選單放在品牌與 icon 群「之間」的中點， 品牌（~315px）比 icon 群（~110px）寬，實測整組往右偏 63px。 ≥1140px 改用絕對定位對齊**視窗中線**；861–1139px 退回彈性排列—— EN 語系的選單較寬，在窄桌面絕對置中會壓到品牌字。 */ @media (min-width:1140px){ .nav{position:relative} .menu{position:absolute;left:50%;transform:translateX(-50%)} } .menu>a:hover,.has-sub:hover>a{color:var(--ink)} .has-sub{position:relative} .menu .has-sub>a{display:inline-flex;align-items:center;gap:7px} /* chevron：5px 小方塊借右下兩邊框轉 45°＝細 ∨；開啟（SHOP 點開／ABOUT hover）轉成 ∧ */ .menu .has-sub>a::after{content:"";width:5px;height:5px;flex:none; border-right:1px solid currentColor;border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-2px);transition:transform .25s} header.shop-open .hs-shop>a::after, header:has(.hs-about:hover) .hs-about>a::after{transform:rotate(225deg) translateY(-2px)} /* KINTO 式全幅橫向展開面板 */ .megamenu{position:absolute;left:0;right:0;top:100%;background:var(--cream-2);border-top:.5px solid var(--line);border-bottom:.5px solid var(--line);box-shadow:0 16px 30px rgba(59,53,46,.07);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .35s ease,transform .35s ease,visibility .35s;z-index:60} header:has(.hs-about:hover) .mm-about,.mm-about:hover{opacity:1;visibility:visible;transform:translateY(0)} header.shop-open .mm-shop{opacity:1;visibility:visible;transform:translateY(0)} header.shop-open .hs-shop>a{color:var(--ink)} .mm-row{display:flex;justify-content:center;align-items:stretch;padding:34px 40px} .mm-row a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:6px 0;flex:0 1 196px;position:relative} .mm-row a+a::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:30px;width:1px;background:var(--line)} .mm-row a b{font-family:var(--serif-cjk);font-weight:400;font-size:16px;letter-spacing:1px;line-height:1.3;color:var(--muted);transition:color .2s} .mm-row a span{font-family:var(--serif-latin);font-size:10.5px;letter-spacing:2.5px;line-height:1.3;color:var(--faint)} .mm-row a:hover b{color:var(--ink)} /* 右上角那一群，順序是**會員 → 購物袋 → 語言**（Max 2026-07-27 指定）。 三顆 icon 一定要放在同一個 .util 裡， 才會整群貼著視窗右緣（.nav 是 space-between，散開放會被平均攤開）。 */ .util{display:flex;gap:2px;align-items:center;font-size:13px;color:var(--muted)} /* ⚠️ gap 是**盒子**的間距，不是看得到的空白。圖示只有 20px、置中在 34px 的按鈕裡， 所以兩顆圖示之間的視覺空白 = 7 + gap + 7。 舊值 gap:10 → 視覺 24px，跟導覽列文字之間的 30px 太接近，那三顆不像「一組」。 改成 gap:2 → 視覺 **16px**，約導覽列的一半，讀起來才是一個工具群組。 （Max 2026-07-27：「是不是靠近一點就好」） */ /* 舊的 .util .lang（中 · EN · 日 · 한 純文字列）已由 .langbtn 取代，規則一併移除 */ /* ---- 內頁標題區 ---- */ .page-hero{text-align:center;padding:90px 0 20px} .page-hero h1{font-family:var(--serif-cjk);font-weight:400;font-size:38px;letter-spacing:3px;margin:16px 0 14px} .page-hero p{color:var(--muted);font-size:14.5px;max-width:460px;margin:0 auto;line-height:2} /* ---- 首頁 Hero ---- */ section.hero{text-align:center;padding:110px 0 40px} .hero h1{font-family:var(--serif-cjk);font-weight:400;font-size:46px;letter-spacing:3px;margin:22px 0 18px} .hero p{color:var(--muted);font-size:15px;line-height:2;max-width:420px;margin:0 auto} .hero-img{height:460px;margin:56px 40px 0;overflow:hidden;border-radius:10px} .hero-img .ph{height:118%;width:100%;border-radius:0} .hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 58%} /* ---- 商品列表格 ---- */ .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .pcard .ph{height:320px;transition:opacity .3s} .pcard:hover .ph{opacity:.85} .pcard h3{font-size:18px;margin:16px 0 3px} .pcard .en{font-size:11px;letter-spacing:3px;color:var(--faint)} .pcard .price{font-size:13px;color:var(--muted);margin-top:6px} /* ---- 全幅產品段（首頁用）---- */ .pband{max-width:1180px;margin:0 auto 36px;padding:0 40px} .pband img{width:100%;border-radius:10px;display:block} .pcap{display:flex;align-items:baseline;gap:14px;margin-top:16px} .pcap h3{font-size:20px} .pcap span{font-size:11px;letter-spacing:3px;color:var(--faint)} /* ---- 產品詳情頁 ---- */ .pd{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;padding-top:20px} .pd-img img,.pd-img .ph{width:100%;border-radius:10px} .pd-img .ph{height:520px} .pd-info .eyebrow{display:block;margin-bottom:14px} .pd-info h1{font-family:var(--serif-cjk);font-weight:400;font-size:34px;margin-bottom:6px} .pd-info .en{font-size:11px;letter-spacing:4px;color:var(--faint)} .pd-info .desc{color:var(--muted);font-size:15px;line-height:2;margin:26px 0} .pd-spec{border-top:.5px solid var(--line);margin-top:8px} .pd-spec .row{display:flex;gap:16px;padding:12px 0;border-bottom:.5px solid var(--line);font-size:14px} .pd-spec .row b{color:var(--ink);font-weight:400;min-width:72px} .pd-spec .row span{color:var(--muted)} /* .swatches（商品頁的三顆大色票）已於 2026-07-27 移除，規則一併刪除。 ⚠️ 原因（Max）：「KINTO 有這種顏色是因為可以有多種顏色選擇，我們沒有」—— 圓形色票在電商是「可選色」的通用語彙，我們每一款只有一種配色，放了會讓人 以為點得下去。而且那三顆用的是 --grey／--sand／--sage，是**概念圖時代的品牌配色** （暖灰·沙米·鼠尾草綠），棒身早已定案單一奶茶 greige 7530 C，資訊本身也過期了。 同時移除的還有規格表裡那一列「顏色：暖灰 · 沙米 · 鼠尾草綠」（原 §8-D-18 待決事項，就此結案）。 ⚠️ 列表頁的 .plp-dots **沒有一起拿掉**：那是各款商品的真實配色，而且是「顏色」篩選器的 視覺索引，拿掉的話篩選條件會失去對照。要不要一起拿掉是另一個決定。 */ /* ---- 情境相簿 ---- */ .tabs{display:flex;gap:22px;justify-content:center;font-size:13px;letter-spacing:1px;color:var(--muted);margin:8px 0 44px;flex-wrap:wrap} .tabs span{cursor:pointer;transition:color .25s} .tabs span:hover{color:var(--ink)} .tabs span:focus-visible{outline:1px solid var(--ink);outline-offset:4px} .tabs .on{color:var(--ink);border-bottom:.5px solid var(--ink);padding-bottom:4px} /* ---- 情境頁＝KINTO Journal 版式（量測 kinto.co.jp/blogs/journal @1440： 容器兩側 72、基準 4 欄各 309、欄距 20、列距 60；圖箱一律 425 高， 橫圖跨 2 欄、直圖 1 欄；圖下 10px 接分類 12px 灰＋標題 14px）---- */ .gj-sec{padding:100px 0} .gj-tabs{gap:0;margin:14px 0 56px} .gj-tabs span{position:relative;padding:0 20px} .gj-tabs span+span::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:.5px;height:11px;background:var(--faint)} .gjgrid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:clamp(12px,1.4vw,20px);row-gap:clamp(40px,4.2vw,60px);padding:0 clamp(24px,4.7vw,96px)} .gj{margin:0;grid-column:span 1} .gj-l{grid-column:span 2} /* 留白「右、左、右」輪流：中間留空列推右（後面的橫圖自動跟進、右緣貼齊右邊線）。 只在「全部」檢視生效——篩選時 gallery.js 給 #ggrid 加 .gf 解除， 否則會打亂各分類算好的列組合。行動版 2 欄下 grid-column:2 一樣成立（單獨直圖靠右）。 */ .gjgrid:not(.gf) .gj-push{grid-column:2/3} .gj[hidden]{display:none} .gj-img{display:block;height:clamp(260px,33vw,425px);overflow:hidden} .gj-img img{width:100%;height:100%;object-fit:cover} .gj figcaption{margin-top:10px} .gj figcaption em{display:block;font-style:normal;font-size:12px;letter-spacing:1.4px;color:var(--grey);line-height:2.1} .gj figcaption b{font-weight:400;font-size:14px;letter-spacing:1.6px;color:var(--ink-soft);line-height:1.9} .gcap{font-size:12px;color:var(--muted);letter-spacing:1px;margin-top:10px} /* ---- 情境敘事段（首頁）---- */ .scene{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:70px} .scene:nth-child(even){direction:rtl} .scene:nth-child(even) *{direction:ltr} .scene .ph{height:380px} .scene img{width:100%;height:380px;object-fit:cover;border-radius:8px} .scene .t .eyebrow{margin-bottom:12px;display:block} .scene .t h3{font-size:26px;margin-bottom:14px} .scene .t p{color:var(--muted);font-size:14.5px;line-height:2} /* ---- 深色區塊（企業洽詢 / CTA）---- */ .dark{background:var(--ink);color:#EFE8DC} .dark .eyebrow{color:#A79C86} .dark h2,.dark h1{color:#F3ECDD} .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:12px} .card3{background:var(--cream-2);border-radius:10px;padding:2rem 1.6rem;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:340px} .card3 h3{font-size:19px;margin-bottom:10px} .card3 p{font-size:13.5px;color:var(--muted);line-height:1.9;margin-bottom:18px} /* KINTO 式圖片導流卡（圖上壓白字） */ .card3-img{position:relative;overflow:hidden;padding:0} .card3-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease} .card3-img::after{content:"";position:absolute;inset:0;background:rgba(43,38,32,.34);transition:background .3s} .card3-img:hover img{transform:scale(1.05)} .card3-img:hover::after{background:rgba(43,38,32,.22)} .card3-label{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:9px;color:#F5EFE3;font-family:var(--serif-cjk);font-weight:400;font-size:20px;letter-spacing:4px;text-shadow:0 1px 14px rgba(30,26,21,.45)} .card3-label small{font-family:var(--serif-latin);font-size:10.5px;letter-spacing:3px;color:rgba(245,239,227,.8)} /* ---- 表單 ---- */ /* 表單卡片：用面板底色框出「表單範圍」（比照 KINTO） */ form.inquiry{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px;max-width:860px;margin:0 auto;background:var(--cream-2);border:.5px solid var(--line);border-radius:16px;padding:48px 52px;box-shadow:0 16px 40px rgba(59,53,46,.06)} .f-full{grid-column:1/-1} form.inquiry label{display:block;font-size:12px;letter-spacing:1px;color:var(--muted);margin-bottom:8px} form.inquiry input,form.inquiry select,form.inquiry textarea{width:100%;background:var(--cream);border:.5px solid var(--line);border-radius:8px;color:var(--ink);padding:12px 13px;font-family:var(--sans);font-size:14px;font-weight:300;transition:border-color .2s,background .2s} form.inquiry input:focus,form.inquiry select:focus,form.inquiry textarea:focus{outline:none;border-color:var(--muted);background:#fff} form.inquiry select{color:var(--ink)}form.inquiry option{color:var(--ink)} form.inquiry ::placeholder{color:var(--faint)} form.inquiry textarea{resize:vertical;min-height:96px} .submit{background:var(--ink);color:var(--cream);border:none;border-radius:8px;padding:16px;font-size:14px;letter-spacing:3px;cursor:pointer;transition:.25s;margin-top:6px} .submit:hover{background:#2B2620} /* ---- 據點 / 哪裡買 ---- */ /* ---- 通路頁（stores.html）-------------------------------------------------- ⚠️⚠️ 清單那一段是 `tools/build-stores.py` 從 `js/stores.js` 產生的， **不要手改 stores.html 的 HTML**——下次跑工具就被蓋掉。 結構借 KINTO stores 頁的 LOCATIONS：頂端一排區域跳轉，下面依區域分段。 ⚠️ 但我們比他們**多一層「縣市」**：KINTO 只有 4 家直營店，一層就夠； 我們是會一直長的零售通路（Max 2026-07-27：「將來資料會很多」）， 少了縣市這層，北部一長就變成一坨沒有結構的清單。 ⚠️ 每個區域標題右邊有「回頂端」（沿用購物須知那顆 .totop）， 因為清單一長，捲到南部時要回到跳轉列會很遠。 */ .st-hero{margin-top:30px} .st-hero img{width:100%;height:300px;object-fit:cover;object-position:center 45%;border-radius:8px} section.wrap.st-wrap{padding-top:56px} /* ⚠️ 這裡原本有一排「區域跳轉列」（.st-jump），2026-07-27 Max 要求區域可收合之後**整組移除**： 全部收合以後，那排鈕跟收合列在做的是同一件事——同一頁放兩套「選區域」的控制項， 只會讓人猶豫該按哪個。收合列本身就是目錄，而且還帶家數。 */ /* 區域收合：原生
，不需要 JS。＋／－ 的畫法與商品頁 .pdp-acc 同一套 （兩道 linear-gradient 疊成十字，展開時把直線的 background-size 收成 0）。 ⚠️ 這裡的十字比商品頁大一點（13px vs 11px），因為標題字級是 20px 不是 13px。 ⚠️ 那個 [open] 狀態**用 getComputedStyle(el,'::after') 量不出來**（虛擬元素在 Browser pane 讀回來的值不會更新），只能截圖目視驗證——不要因為量不到就以為沒生效。 */ .st-region{border-top:.5px solid var(--line)} .st-region[open]{padding-bottom:34px} .st-region>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px; padding:26px 0;scroll-margin-top:88px} .st-region>summary::-webkit-details-marker{display:none} .st-region>summary:hover h2{color:var(--muted)} .st-region>summary h2{display:flex;align-items:baseline;gap:14px;margin:0; font-family:var(--serif-cjk);font-weight:400;font-size:20px;letter-spacing:2px;color:var(--ink); transition:color .25s} .st-region>summary::after{content:"";position:relative;width:13px;height:13px;flex:none; margin-left:auto;margin-right:2px; background: linear-gradient(var(--muted),var(--muted)) center/13px 1px no-repeat, linear-gradient(var(--muted),var(--muted)) center/1px 13px no-repeat; transition:background-size .25s} .st-region[open]>summary::after{background-size:13px 1px, 1px 0} .st-count{font-family:var(--sans);font-weight:300;font-size:12px;letter-spacing:1px;color:var(--ink-soft)} /* 區域展開後，最後面放一條回頂端——收合列本身就是目錄，回到最上面等於回到目錄 */ .st-back{display:block;text-align:right;margin-top:26px; font-size:12.5px;letter-spacing:1px;color:var(--ink-soft);transition:color .25s} .st-back:hover{color:var(--ink)} /* 縣市標籤放**左邊直欄**，店家在右邊流動。 ⚠️ 一開始把縣市當成橫向小標、店家在下面排兩欄——但只有一家店的縣市（新竹市、 新北市）右半排就空掉，一路看下來很破碎。改成左標籤右內容後， 縣市少的時候不會開天窗，縣市多的時候也還是一眼看得出分組。 */ .st-city{display:grid;grid-template-columns:104px 1fr;gap:0 36px;margin-top:22px} .st-city:first-child{margin-top:2px} .st-city h3{font-size:12px;font-weight:400;letter-spacing:2.5px;color:var(--ink-soft); margin:0;padding-top:15px} /* 兩欄：1180px 的版面放一欄的話，一家店右邊會空掉半頁；三欄則地址會被擠斷行。 */ .st-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 56px} /* 一家店排成三行（店名／地址／備註）而不是「店名靠左、地址靠右」一行： 地址長度差很多（「台北市大安區」vs 完整門牌），排成一行時右欄會參差不齊。 */ .st-shop{padding:13px 0;border-bottom:.5px solid var(--line)} .st-shop b{display:block;font-weight:400;font-size:14.5px;letter-spacing:.5px;color:var(--ink)} .st-addr{display:block;font-size:13px;line-height:1.75;color:var(--ink-soft);margin-top:3px} .st-note{display:block;font-size:11.5px;letter-spacing:.5px;color:var(--ink-soft);margin-top:2px} /* 示意資料一定要標出來——不標的話客人會白跑一趟（§8-A-2 等真實名單） */ .st-demo{display:inline-block;font-style:normal;font-size:10px;letter-spacing:1.5px; color:var(--ink-soft);border:.5px solid var(--line);border-radius:3px; padding:1px 6px;margin-left:9px;vertical-align:1.5px} /* 收尾那段「通路持續增加中／歡迎企業洽詢」2026-07-27 Max 指示拿掉，.st-more 規則一併移除 */ @media (max-width:760px){ .st-city{grid-template-columns:1fr;gap:0} .st-city h3{padding-top:0;margin-bottom:2px} .st-list{grid-template-columns:1fr} .st-hero img{height:210px} .st-region h2{font-size:18px;margin-top:44px} } /* ---- 品牌故事 / 一般內文 ---- */ .prose{max-width:680px;margin:0 auto} .prose p{color:var(--muted);font-size:15.5px;line-height:2.1;margin-bottom:22px} .prose h2{margin:44px 0 18px} .quote{font-family:var(--serif-cjk);font-size:24px;line-height:1.8;color:var(--ink);text-align:center;margin:44px 0} .dmc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px} .dmc-grid h4{font-family:var(--serif-latin);font-size:20px;font-weight:500;margin-bottom:14px} .dmc-grid .rule{height:1px;background:var(--line);margin-bottom:18px} .dmc-grid p{color:var(--muted);font-size:14px} /* ---- 首頁賣點三格（沿用 .dmc-grid）與品牌引言帶 ---- */ .why-grid h4{font-family:var(--serif-cjk);font-size:18px;font-weight:400;letter-spacing:2px;display:flex;align-items:baseline;gap:10px} .why-grid h4 small{font-family:var(--serif-latin);font-size:11px;letter-spacing:3px;color:var(--faint);font-weight:500} section.quoteband{padding:30px 40px 120px} .quoteband .quote{font-size:26px;letter-spacing:2px;margin:24px auto 0;max-width:640px} /* .dots 也是色點語彙，全站已無任何頁面使用（2026-07-27 清點確認），規則刪除。 */ /* ---- Footer ---- */ /* ---- 頁尾（KINTO 式三欄：品牌／資訊／電子報 ＋ 底部法務列）---- 2026-07-26 改：舊版是「品牌→連結→法務→版權」四行置中堆疊，Max 說「有點粗糙」。 KINTO 的作法是**三欄橫向**、左右邊界與 header 對齊（同樣的 5vw）， 底部再拉一條細線放法務連結與版權。留白大、層次清楚，資訊量反而放得更多。 */ /* 2026-07-26 再改：原本一欄 INFORMATION 同時裝「逛」（商品／情境／品牌故事／社會責任／ 據點）與「買了之後要問」（購物須知／退換貨／常見問題）共 8 條——兩種完全不同的意圖 混在一起，使用者要在同一串裡自己分類。KINTO 的頁尾導覽是**純服務與法務**（お問い合わせ／ ご利用ガイド／ギフト／法人／三份政策），商品瀏覽全部留在 header。照這個原則拆成兩欄。 */ footer{background:var(--cream-2);border-top:.5px solid var(--line)} .fwrap{display:grid;grid-template-columns:1.15fr .8fr .8fr 1.25fr;gap:52px; padding:72px clamp(22px,5vw,96px) 64px;max-width:1560px;margin:0 auto} .fcol em{display:block;font-style:normal;font-family:var(--serif-latin);font-size:12.5px; letter-spacing:1.6px;color:var(--muted);margin-bottom:20px} /* ⚠️ 這裡原本是「字更大但顏色更淡」，兩個效果互相抵銷：字大顯笨重、色淡顯糊。 KINTO 的作法相反——**小而深**（12px / #555），資訊密度高且每個字都清楚。 */ /* ⚠️ 選擇器要限定 nav.fcol：品牌欄的 也是 .fcol 的直接子元素， 用 `.fcol>a` 會連品牌那顆一起吃到 padding 與字級（量行距時才發現）。 */ nav.fcol>a{display:block;font-size:12.5px;letter-spacing:1.5px;color:var(--ink-soft); padding:5.5px 0;transition:color .2s} nav.fcol>a:hover{color:var(--ink)} /* 品牌欄 */ /* 左欄要「輕」：KINTO 只放一個小 wordmark，社群緊貼在下，其餘全是留白。 我們的圓標＋大字＋標語原本視覺重量太大，會把三欄的天平壓向左邊。 */ .fmark{display:flex;align-items:center;gap:9px;margin-bottom:10px} .fmark img{width:26px;height:26px;display:block} .fmark span{font-family:var(--serif-latin);font-size:16px;letter-spacing:3px;font-weight:500;color:var(--ink)} .ftag{font-size:12px;letter-spacing:1px;color:var(--muted);margin-bottom:20px} .fsocial{display:flex;gap:14px} /* KINTO 的社群 icon 是**裸的**（沒有圓框），比較輕。圖形一律用內嵌 SVG＋currentColor， 才吃得到 hover 變色；PNG／JPG 做不到，而且在奶油底上會露出白邊。 */ .fsocial{gap:18px} .fsocial a{display:flex;align-items:center;justify-content:center; color:var(--muted);transition:color .2s} .fsocial a:hover{color:var(--ink)} .fsocial svg{width:19px;height:19px;display:block} /* 電子報欄 */ /* KINTO 在 NEWSLETTER 左側有一條細直線，把「導覽」與「動作」分開。 */ .fnews{border-left:.5px solid var(--line);padding-left:56px} .fnews p{font-size:12.5px;line-height:1.9;color:var(--ink-soft);margin-bottom:18px} .fnews-form label{display:block;font-size:11.5px;letter-spacing:1px;color:var(--faint);margin-bottom:7px} .fnews-form input[type=email]{width:100%;max-width:340px;background:#fff;border:.5px solid var(--line); border-radius:6px;padding:11px 13px;font-family:var(--sans);font-size:13.5px;font-weight:300;color:var(--ink)} .fnews-form input[type=email]:focus{outline:none;border-color:var(--muted)} .fnews-consent{display:flex!important;align-items:flex-start;gap:9px;margin:14px 0 0!important; font-size:11.5px!important;line-height:1.8;color:var(--muted)!important;letter-spacing:0!important;cursor:pointer} .fnews-consent input{width:14px;height:14px;flex:none;margin-top:3px;accent-color:var(--ink)} .fnews-consent a{border-bottom:.5px solid} /* 按鈕靠右對齊輸入框右緣（KINTO 的 Send 就是這樣），視覺上收得住 */ .fnews-form{max-width:340px} .fnews-form button{display:block;margin:16px 0 0 auto;cursor:pointer;font:inherit; font-size:12.5px;letter-spacing:2px;padding:10px 26px} /* 底部細線列 */ .fbar{border-top:.5px solid var(--line);display:flex;align-items:center;justify-content:space-between; gap:20px;flex-wrap:wrap;padding:22px clamp(22px,5vw,96px);max-width:1560px;margin:0 auto} .fbar .flegal{display:flex;gap:13px;flex-wrap:wrap;font-size:10.5px;letter-spacing:1.2px;color:var(--ink-soft)} .fbar .flegal a:hover{color:var(--ink)} .fbar .flegal span{color:var(--line)} .fcopy{font-size:10.5px;letter-spacing:1.2px;color:var(--muted)} .fcopy b{font-weight:400;color:var(--muted)} /* 中間寬度：四欄會把電子報欄壓到放不下輸入框，改 2×2（品牌｜探索 / 服務｜電子報）。 861px 下限是為了不跟下面的手機規則打架。 */ @media (max-width:1080px) and (min-width:861px){ .fwrap{grid-template-columns:1fr 1fr;gap:44px 52px} .fnews{border-left:none;padding-left:0} } @media (max-width:860px){ /* 兩欄導覽並排，不要四欄直接疊成四段——疊起來頁尾會長到要捲三次才到版權列。 */ .fwrap{grid-template-columns:1fr 1fr;gap:34px 26px;padding:52px 22px 44px} .fbrand,.fnews{grid-column:1/-1} .fnews{border-left:none;padding-left:0} .fbar{flex-direction:column;align-items:flex-start;gap:12px;padding:20px 22px} } .cue{position:absolute;left:50%;transform:translateX(-50%);bottom:24px;color:var(--faint);font-size:20px;animation:bob 2s ease-in-out infinite} @keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}} /* ---- 響應式 ---- */ @media(max-width:860px){ /* ⚠️ 手機不能把整個 .util 藏掉——會員與購物袋在裡面，藏了就沒有入口了。 只藏語言（語言列本來就已經放進行動版抽屜底部的 .mn-lang）。 */ .menu,.megamenu{display:none} .util .langbtn{display:none} .wrap{padding:0 22px} section.wrap{padding:64px 22px} .card3{min-height:260px} .hero h1{font-size:32px}.page-hero h1{font-size:28px} .pgrid,.dmc-grid,.cards3,form.inquiry,.stores{grid-template-columns:1fr;gap:28px} .gj-sec{padding:64px 0} .gj-tabs span{padding:0 12px} .gjgrid{grid-template-columns:1fr 1fr;column-gap:10px;row-gap:34px;padding:0 16px} .gj-img{height:clamp(150px,53vw,300px)} .gj-l .gj-img{height:clamp(170px,60vw,340px)} .gj figcaption b{font-size:13px;letter-spacing:1px} .scene img{height:260px} .pd{grid-template-columns:1fr;gap:28px}.pd-img .ph{height:360px} section.quoteband{padding:10px 22px 80px} .quoteband .quote{font-size:20px} .scene{grid-template-columns:1fr;gap:24px;direction:ltr}.scene:nth-child(even){direction:ltr} .hero-img,.hero-img .ph{height:280px} .pband{padding:0 22px} section{padding:64px 0} } /* ---- 商品分類頁兩大卡（products.html，沿用 .card3-img 語彙）---- */ .cat2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:12px} .cat2 .card3{min-height:420px} @media(max-width:860px){ .cat2{grid-template-columns:1fr} .cat2 .card3{min-height:300px} } /* ---- 商品 megamenu（KINTO SHOP 式：左分類清單＋右情境照，hover 切換）---- */ /* 幾何全部照 KINTO 實測。⚠️ 一定要「打開他們的選單、量活的 DOM」， 不可以拿截圖等比換算（前三輪就是這樣估錯的，見 HANDOFF §6c-7、§6c-8）。 他們的圖是 background-image 不是 ，querySelectorAll('img') 抓不到。 四個視窗寬實測（1280 / 1366 / 1500 / 1910）歸納出來的規則： 左欄 固定 301px（四個寬度都一樣） 橫向留白 5vw（1280→64、1500→75、1910→95.5） 縱向留白 3vw（大圖與下半部之間、以及面板底部） 大圖 寬＝面板寬－301，高＝max(280px, 寬/4) → 1280:979×280｜1366:1065×280｜1500:1199×300｜1910:1609×402 推薦卡 3:2、間距 20px，數量由「填滿剩下的寬」決定 → KINTO 無子分類的頁面是 4 張（1910 時 340×226） ⚠️ 面板本身不能有 padding，否則大圖貼不到頂與右緣——留白改由各區塊自己負責。 ⚠️ 下半部不能給固定 max-width，否則寬螢幕會像 2026-07-26 那樣左邊空一大片。 */ .mms{display:flex;gap:0;padding:0;align-items:stretch} .mms-head{display:block;font-style:normal;font-family:var(--serif-latin);font-size:10.5px;letter-spacing:3px;color:var(--faint);margin-bottom:12px} .mms-cats{display:flex;flex-direction:column;width:301px;flex:0 0 301px;padding:38px 40px 38px min(5vw,96px);border-right:.5px solid var(--line)} .mms-cats a{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-bottom:.5px solid var(--line)} .mms-cats a:last-child{border-bottom:none} .mms-cats a b{font-family:var(--serif-cjk);font-weight:400;font-size:16px;letter-spacing:1px;line-height:1.3;color:var(--muted);transition:color .2s} .mms-cats a span{font-family:var(--serif-latin);font-size:10.5px;letter-spacing:2.5px;line-height:1.3;color:var(--faint)} .mms-cats a:hover b{color:var(--ink)} .mms-right{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr)} .mms-pane{grid-area:1/1;display:flex;flex-direction:column;gap:0;opacity:0;pointer-events:none;transition:opacity .35s} .mms-pane.mp-wands{opacity:1;pointer-events:auto} .mms:has(.mc-parts:hover) .mp-wands{opacity:0;pointer-events:none} .mms:has(.mc-parts:hover) .mp-parts{opacity:1;pointer-events:auto} /* 大圖：比例 4:1 但高度不低於 280px、貼齊面板頂與右緣（四個視窗寬都對得上，見上方註解） ⚠️ 這裡**不能寫 `aspect-ratio:4/1; min-height:280px`**：min-height 會經由比例 反推出 1120px 的最小寬度，把整個面板撐爆（實測 1280 視窗 scrollWidth 變 1421， 橫向溢出）。改成「窄視窗直接給固定高」——1420px 正好是兩式相等的交界，不會跳動。 */ .mms-hero{position:relative;display:block;aspect-ratio:4/1;height:auto;overflow:hidden} @media (max-width:1420px){.mms-hero{aspect-ratio:auto;height:280px}} .mms-hero img{width:100%;height:100%;object-fit:cover;display:block} .mms-hero::before{content:"";position:absolute;inset:0;background:rgba(43,38,32,.32)} .mms-label{position:absolute;left:min(5vw,96px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;color:#fff} .mms-label b{font-family:var(--serif-cjk);font-weight:400;font-size:24px;letter-spacing:2px} .mms-label i{font-style:normal;font-size:13px;letter-spacing:1px;opacity:.92} .mms-label u{font-family:var(--serif-latin);font-size:12px;letter-spacing:2px;text-decoration:underline;text-underline-offset:4px;margin-top:6px} /* 大圖以下才給留白。推薦區＝KINTO 沒有子分類的那種頁面：整條橫跨到底， 左右各留 5vw、上下各留 3vw，卡片 4 張填滿剩下的寬（1910 時剛好 340×226， 與 KINTO 實測同一個數字）。⚠️ 不可以再回去用固定 max-width，見上方註解。 */ .mms-below{display:flex;padding:3vw 0} .mms-reco{flex:1 1 0;min-width:0;padding:0 5vw} .mms-reco .mms-head{margin-bottom:18px} .mms-reco-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} .mms-reco-row a{display:flex;flex-direction:column;gap:9px} /* 推薦縮圖的框原本是 7:5（橫），但商品圖是 4:5（直）——直圖塞橫框， 只能縮到高度剛好，左右空一大片，商品看起來偏小。改成接近正方形讓它站得起來。 */ /* 卡片比照 KINTO 的 3:2 橫式（330×221 @1910 面板 → 我們 ~224×149 @1280）。 ⚠️ 直照片放橫框不能用 contain（會縮到只剩高度、變超小），也不能用 cover （去背圖四周是透明的，cover 會裁到商品本體）。做法是：讓圖以「寬度 100%」 自然溢出，再用 overflow:hidden 從中央裁一條——商品的重心本來就被正規化到 畫布正中央（unify.swift 的 CENTER=0.50），所以裁掉的正好是上下的留白。 */ .mms-reco-row a>.thumb{display:block;width:100%;aspect-ratio:3/2;overflow:hidden;position:relative} .mms-reco-row img{position:absolute;top:50%;left:0;width:100%;height:auto;transform:translateY(-50%);display:block;background:transparent} .mms-reco-row a span{font-size:12.5px;letter-spacing:1.5px;color:var(--muted);transition:color .2s} .mms-reco-row a:hover span{color:var(--ink)} /* ---- KINTO 式商品列表頁（products-wands / products-parts） ---- */ .plp-head{border-bottom:.5px solid var(--line)} /* ⚠️ 這一條同時套 h1 與 span：2026-07-26 稽核發現 products-wands／products-parts 是全站 33 頁裡**僅有的兩頁沒有

**（其餘 31 頁都有），螢幕報讀器的標題導覽會落空、 搜尋引擎也拿不到與 title 對應的頁內標題。改成 h1 後**視覺完全不變**： font-weight 用 inherit（不是寫死 300），才不會破壞低解析度螢幕那條字重補償。 */ /* ⚠️ 選擇器只寫 h1、**不要**留 `.plp-head span`：h1 裡面還有一個 .sr-only 的 span， 後代選擇器會連它一起吃到 display:block 與 34px 內距（實測它被撐成 1×58px）。 雖然 .sr-only 的 position/clip 仍讓它看不見，但那是「剛好沒出事」，不是對的寫法。 兩頁的裸 span 已全部改成 h1，這個舊選擇器沒有其他使用者了。 */ .plp-head h1{display:block;font-family:var(--serif-latin);font-weight:inherit; font-size:15px;letter-spacing:3.5px;color:var(--ink);padding:34px 0 24px} /* v2 用語地圖的列表頁前言（品類——口號）：h1 底距收 24→10，由這行接手收尾 */ .plp-head h1:has(+ .plp-sub){padding-bottom:10px} .plp-sub{font-size:13px;letter-spacing:1.5px;color:var(--muted);padding-bottom:24px} /* 視覺隱藏但報讀器讀得到——標題的英文字樣是設計語彙，中文語意靠這個補 */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .plp-sec{padding-top:26px} .plp-bar{display:flex;align-items:center;gap:34px;font-size:12.5px;letter-spacing:1.5px;color:var(--muted)} /* 款數由 js/filter.js 在載入時填入（頁面上的 是空的，不寫死數字——見 §6g）。 min-width 是為了讓數字填進來時不會把「ITEMS」推一下。 */ .plp-count b{display:inline-block;min-width:.85em;font-weight:500;font-size:15px;color:var(--ink);margin-right:4px} .plp-filters{display:flex;gap:28px} .plp-sort{cursor:default} .plp-filters>.plp-f::after,.plp-sort::after{content:"";display:inline-block;width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);vertical-align:3px;margin-left:7px} .plp-sort{margin-left:auto} .plp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:46px 26px;margin-top:40px} .plp-card{display:flex;flex-direction:column} .plp-card img{width:100%;aspect-ratio:4/5;object-fit:contain;display:block;background:transparent;transition:opacity .3s} .plp-card:hover img{opacity:.85} .plp-tag{align-self:flex-start;font-size:10px;letter-spacing:1.5px;color:var(--faint);border:.5px solid var(--line);border-radius:3px;padding:2px 7px;margin:14px 0 9px} .plp-card h3{font-size:14.5px;font-weight:400;letter-spacing:1px;margin:0 0 3px} .plp-en{font-size:10.5px;letter-spacing:2.5px;color:var(--faint)} /* .plp-dots（列表卡片下方的小色點）已於 2026-07-27 移除，規則一併刪除。 ⚠️ 與商品頁的 .swatches 同一個理由（Max：「這種地方的顏色也要拿掉啊」）： 圓形色點在電商是「可選色」的語彙，我們每一款只有一種配色，放了就是在暗示可以選。 ⚠️ 卡片上的 data-colors 屬性**沒有移除**——「顏色」篩選器靠它運作（見 js/filter.js）。 色點是視覺呈現，data-colors 是資料，兩者無關。 */ /* 去背商品直接浮在頁面上（KINTO 式，無白框）。 2026-07-25：整支逗貓棒也做了去背 PNG，白底已改成全域透明，下面兩條成為冗餘（留著不影響） */ .plp-flat .plp-card img{background:transparent} .mp-parts .mms-reco-row img{object-fit:contain;background:transparent} @media (max-width:860px){.plp-grid{grid-template-columns:repeat(2,1fr)}.plp-bar{flex-wrap:wrap;gap:16px}} /* ---- 篩選下拉面板（KINTO 式）＋ NARROW DOWN 標籤列 ---- */ .plp-f{position:relative;cursor:pointer} .plp-panel{position:absolute;left:-16px;top:calc(100% + 18px);width:300px;background:#fff;border:.5px solid var(--line);box-shadow:0 16px 34px rgba(59,53,46,.1);padding:16px 22px 24px;display:none;z-index:70;cursor:default} .plp-panel.open{display:block} .pp-reset{display:block;width:100%;text-align:right;background:none;border:none;border-bottom:.5px solid var(--line);font:inherit;font-size:11.5px;letter-spacing:2px;color:var(--muted);cursor:pointer;padding:4px 0 14px} .pp-reset:hover{color:var(--ink)} .pp-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 14px;padding-top:20px} .pp-opt{display:flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:1px;color:var(--muted);cursor:pointer;transition:color .2s} .pp-opt:hover,.pp-opt.on{color:var(--ink)} .pp-opt.on{font-weight:500} .pp-color .pp-opt i{width:18px;height:18px;border-radius:50%;border:.5px solid rgba(59,53,46,.2);flex:none} .pp-mat .pp-opt i{width:15px;height:15px;border:.5px solid var(--muted);border-radius:3px;background:#fff;flex:none;position:relative} .pp-mat .pp-opt.on i::after{content:"";position:absolute;inset:3px;background:var(--ink)} .plp-narrow{display:none;align-items:center;gap:12px;margin-top:20px} .plp-narrow em{font-style:normal;font-family:var(--serif-latin);font-size:11px;letter-spacing:2.5px;color:var(--faint)} .plp-narrow button{background:#fff;border:.5px solid var(--line);border-radius:15px;padding:5px 13px;font:inherit;font-size:12px;letter-spacing:1px;color:var(--muted);cursor:pointer} .plp-narrow button:hover{color:var(--ink)} /* ---- 低解析度（1x 非 Retina）螢幕字體補償 ---- macOS 無次像素平滑後，300 細體＋antialiased 在 1x 螢幕筆畫不足 1px 會暈灰； 僅低密度螢幕改標準字重與預設平滑，Retina（2x 以上）完全不受影響 */ @media (max-resolution: 1.25dppx){ body{font-weight:400;-webkit-font-smoothing:auto} form.inquiry input,form.inquiry select,form.inquiry textarea{font-weight:400} } /* ---- 行動版導覽（≤860px）：漢堡鈕＋右側抽屜（比照 KINTO 手機版）---- ≤860px 桌面 .menu 與 megamenu 皆隱藏，這裡補上手機／平板唯一的導覽入口。 抽屜「內容」由 js/menu.js 依既有 megamenu DOM 生成，不在 33 頁各寫一份連結—— 本站無 include，另寫一份日後必定漏改其一（見 HANDOFF §3）。 抽屜掛在 而非
：header 有 backdrop-filter，會成為 fixed 子元素的 容器塊（containing block），掛在裡面 top/right 會以 header 盒為基準而不是視窗。 */ .nav-toggle{display:none;position:relative;flex:none;width:44px;height:44px;margin-right:-11px; background:none;border:none;padding:0;cursor:pointer;color:var(--muted);transition:color .2s} .nav-toggle i{position:absolute;left:11px;width:22px;height:1px;background:currentColor; transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .18s} .nav-toggle i:nth-child(1){top:16px} .nav-toggle i:nth-child(2){top:22px} .nav-toggle i:nth-child(3){top:28px} body.mnav-open .nav-toggle{color:var(--ink)} body.mnav-open .nav-toggle i:nth-child(1){transform:translateY(6px) rotate(45deg)} body.mnav-open .nav-toggle i:nth-child(2){opacity:0} body.mnav-open .nav-toggle i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} /* 遮罩與抽屜都從 header 下緣開始（--hdr 由 menu.js 依實際 header 高度寫入） z-index 需高於吉祥物 launcher 的 9000（chuanchuan/neko-corner.js） */ .mnav-scrim{position:fixed;left:0;right:0;bottom:0;top:var(--hdr,66px); background:rgba(43,38,32,.34);opacity:0;visibility:hidden; transition:opacity .32s ease,visibility .32s;z-index:9400} body.mnav-open .mnav-scrim{opacity:1;visibility:visible} .mnav{position:fixed;top:var(--hdr,66px);right:0;bottom:0;width:min(86vw,380px); background:var(--cream-2);border-left:.5px solid var(--line); box-shadow:-16px 0 38px rgba(59,53,46,.10);overflow-y:auto;overscroll-behavior:contain; transform:translateX(100%);visibility:hidden;z-index:9500; transition:transform .34s cubic-bezier(.4,0,.2,1),visibility .34s} body.mnav-open .mnav{transform:none;visibility:visible} body.mnav-lock{overflow:hidden} .mn-row{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%; padding:17px 26px;border:none;border-bottom:.5px solid var(--line);background:none; font:inherit;text-align:left;color:inherit;cursor:pointer} .mn-row b{display:block;font-family:var(--serif-cjk);font-weight:400;font-size:16.5px; letter-spacing:2px;line-height:1.35;color:var(--ink)} .mn-row i{display:block;font-style:normal;font-family:var(--serif-latin);font-size:10.5px; letter-spacing:2.5px;line-height:1.3;color:var(--faint)} .mn-caret{flex:none;width:8px;height:8px;margin-right:4px; border-right:1px solid var(--muted);border-bottom:1px solid var(--muted); transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s ease} .mn-row[aria-expanded="true"] .mn-caret{transform:rotate(-135deg) translate(-3px,-3px)} .mn-sub{max-height:0;overflow:hidden;visibility:hidden;background:var(--cream); transition:max-height .32s cubic-bezier(.4,0,.2,1),visibility .32s} .mn-sub.open{visibility:visible} .mn-sub a{display:block;padding:13px 26px 13px 40px;border-bottom:.5px solid var(--line)} .mn-sub a:last-child{border-bottom:none} .mn-sub a b{font-family:var(--serif-cjk);font-weight:400;font-size:15px;letter-spacing:1.5px; line-height:1.35;color:var(--muted)} .mn-sub a i{display:block;font-style:normal;font-family:var(--serif-latin);font-size:10px; letter-spacing:2.5px;line-height:1.3;color:var(--faint)} .mn-foot{padding:30px 26px 44px;display:flex;flex-direction:column;gap:22px} .mn-cta{display:block;text-align:center;background:var(--ink);color:var(--cream); border-radius:8px;padding:15px 18px;font-size:13.5px;letter-spacing:2.5px} .mn-lang{display:flex;justify-content:center;gap:4px} /* ---- 四語清單（抽屜底部與頁尾共用）------------------------------------ header 那顆是「點一下換下一個」的精簡版；這裡是攤開的四個，可以直接跳到指定語言。 兩邊都吃同一支 js/menu.js 的 setLang()，狀態用 aria-current 標。 */ .flang{display:inline-flex;gap:2px;vertical-align:-2px} .flang button{border:none;background:none;font:inherit;cursor:pointer; padding:4px 6px;border-radius:3px;color:var(--muted);transition:color .2s} .flang button:hover{color:var(--ink-soft)} .flang button[aria-current="true"]{color:var(--ink)} .mn-lang .flang button{font-size:13px;letter-spacing:1px;padding:11px 12px} /* 11 → 觸控高剛好 44 */ .fcopy .flang{margin-left:4px} .fcopy .flang button{font-size:10.5px;letter-spacing:1.2px} /* 觸控目標：頁尾那組字只有 10.5px，靠 padding 撐到 44px 以上 */ @media (pointer:coarse){.fcopy .flang button{padding:13px 10px}} @media(max-width:860px){.nav-toggle{display:block}} /* 保險（不依賴任何 JS 事件）：只要抽屜是開的，漢堡／✕ 鈕一定看得見。 否則萬一「拉寬到桌面斷點」的 resize/matchMedia 事件沒送到（實測自動化工具就不送）， 會變成抽屜開著、body 鎖著捲動、卻沒有任何鈕可以關的死狀態。 */ body.mnav-open .nav-toggle{display:block} /* ---- 首頁商品卡列（沿用 .plp-card 語彙，取代原本三段全幅 .pband）---- 原本三段 .pband 用 width:100% 直接吃圖片原生比例，六張 sku 母檔有 3:2／4:5／3:4 三種比例，實測三段高度 784/1425/782px（中間比視窗還高，節奏斷裂）， 且主體只佔畫面約 12%、其餘是 #FEFEFE 白底壓在 cream 上，像未完成的佔位。 改用 .plp-card（aspect-ratio:4/5 + object-fit:contain）統一比例， 商品段 3063px → 約 520px，B2B 洽詢 CTA 也隨之上移。 */ .home-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 26px;margin-top:46px} .home-pgrid .plp-card h3{margin-top:18px;font-size:15.5px} .home-pgrid .plp-card .plp-en{font-size:11px} .hero-cta{margin-top:30px} @media(max-width:860px){.home-pgrid{grid-template-columns:repeat(2,1fr);gap:32px 14px}} /* ---- business.html 主要動作卡 ---- 三張卡裡「洽詢」是唯一的主要動作，但 .card3 的 --cream-2 壓在頁面 --cream 上 對比僅約 1.04:1（看不出是一張卡），旁邊兩張次要的照片卡反而最搶眼—— 視覺權重與優先序相反。給它實心邊界，並把按鈕改實心深色，把重量還給動作本身。 */ .card3-lead{border:.5px solid var(--line)} .btn-solid{background:var(--ink);color:var(--cream);border-color:var(--ink)} .btn-solid:hover{background:#2B2620;border-color:#2B2620;color:var(--cream)} /* ---- 法務頁（privacy.html / terms.html）---- 全域 *{margin:0;padding:0} 會吃掉清單縮排，法務頁大量使用清單，這裡補回來。 */ .prose h3{font-family:var(--serif-cjk);font-weight:400;font-size:17px;letter-spacing:1px; margin:30px 0 10px;color:var(--ink)} .prose ul,.prose ol{margin:0 0 22px 22px;color:var(--muted);font-size:15px;line-height:2} .prose li{margin-bottom:5px} .prose strong{color:var(--ink);font-weight:500} .prose .updated{font-size:12.5px;letter-spacing:2px;color:var(--faint);margin-bottom:34px} .prose .pd-spec .row{font-size:14px} /* 重點框：把「不賣金流資料」「七日猶豫期」這類關鍵告知框出來，別讓它埋在段落裡 */ .legal-note{background:var(--cream-2);border:.5px solid var(--line);border-left:2px solid var(--sand); border-radius:8px;padding:18px 22px;margin:22px 0;font-size:14.5px;color:var(--muted);line-height:1.95} /* 運送方式對照表（購物須知）——把「方式／地區／天數／運費／免運」一眼看完， 比條列清楚很多（資訊設計參照 abaopet 的購物須知）。窄螢幕橫向捲動不壓縮欄位。 */ .tablewrap{overflow-x:auto;margin:6px 0 24px;-webkit-overflow-scrolling:touch} .ship-table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px} .ship-table th,.ship-table td{border-bottom:.5px solid var(--line);padding:13px 14px;text-align:left; vertical-align:middle} .ship-table thead th{font-weight:400;font-size:12px;letter-spacing:1.5px;color:var(--faint); border-bottom:.5px solid var(--muted);white-space:nowrap} .ship-table td{color:var(--muted)} .ship-table td:first-child{color:var(--ink)} .ship-table td[rowspan]{color:var(--ink);background:var(--cream-2)} .prose ol{margin:0 0 22px 22px;color:var(--muted);font-size:15px;line-height:2} /* footer 法務列（比照 KINTO 頁尾把政策連結獨立成一排小字） */ /* 舊的置中版 .flegal 已由上方 .fbar .flegal 取代（2026-07-26 頁尾改版） */ /* 洽詢表單的「同意隱私權政策」勾選（有政策頁之後才加，見 HANDOFF 5c-4） 注意 form.inquiry input 是 width:100%，checkbox 必須覆寫回 auto，否則會被撐成整欄 */ form.inquiry .consent label{display:flex;align-items:flex-start;gap:10px;margin-bottom:0; font-size:13px;line-height:1.75;letter-spacing:0;color:var(--muted);cursor:pointer} form.inquiry .consent input[type=checkbox]{width:auto;flex:none;margin-top:3px;padding:0; accent-color:var(--ink);cursor:pointer} form.inquiry .consent a{color:var(--ink);text-decoration:underline;text-underline-offset:3px} /* 小螢幕品牌字收窄，避免與漢堡鈕相撞（320px 亦成立） */ @media(max-width:400px){ /* ⚠️ 2026-07-26 右上角多了「會員」一顆之後，320px 時品牌字會擠到跟 icon 貼在一起 （實測間距 0）。品牌再縮一級、icon 群再收緊，320 才留得出約 14px 的呼吸。 */ .brand{font-size:17px;letter-spacing:2px;gap:8px} .brand-logo{width:28px;height:28px} /* 舊有 .util{gap:4px}：基礎值已改成 2px，比它更緊，這條留著反而讓手機比桌機鬆，故移除 */ .ubtn{width:30px} } /* 320px（iPhone SE 一代）光縮一級還不夠：品牌自然寬 182 > 可用的 179， space-between 會把間距壓成 0、品牌字被擠扁。再縮一級才留得出間距。 */ @media(max-width:360px){ .brand{font-size:15px;letter-spacing:1px;gap:7px} .brand-logo{width:25px;height:25px} } /* ---- 價格（2026-07-25 電商軌第一階段）-------------------------------------- 刻意克制：不用紅字、不加粗、不放大。Japandi 低彩度調性下，價格是資訊不是叫賣。 數字用拉丁襯線（與品牌字同一套），與中文品名並置時比無襯線好看。 */ .plp-price{font-family:var(--serif-latin);font-size:15px;letter-spacing:.6px;color:var(--ink);margin-top:9px} .pd-price{font-family:var(--serif-latin);font-size:26px;letter-spacing:1px;color:var(--ink);margin-top:18px} .pd-price .pd-ship{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.3px;color:var(--faint);margin-top:7px} /* 整支⇄配件互相導流（詳情頁底部） */ /* B2B 開場定位段（顧問室 2026-08-04 總稿・單元五 §4） ⚠️ 這頁**零情感句**：定位陳述用中等字級、正文用一般內文，不做成口號帶。 */ .b2b-lead{max-width:720px} .b2b-pos{font-family:var(--serif-cjk);font-size:20px;letter-spacing:1.5px;line-height:1.85; color:var(--ink);margin-bottom:16px} .b2b-lead p:not(.b2b-pos){font-size:14.5px;line-height:2.05;color:var(--ink-soft)} @media (max-width:860px){.b2b-pos{font-size:17px}} /* 副標 .sub-flag：「換一顆頭，開啟一場新的狩獵」（Max 2026-07-27 拍板，逐字） ⚠️ 部署圖把它派在「商品頁 ×6 開頭段」＝半熱崗位（點進來的人已經有興趣，該開想像了）。 ⚠️ **刻意不放購買欄**：同一份部署圖要求「商品頁・購買欄（價格旁）零口號」 （「價格旁邊放詩，價格會臉紅」）。我們的版型把商品描述跟價格併在同一欄， 所以副標改落在左欄 PRODUCT DETAIL 的開頭——那正是「開想像」的位置，也離錢夠遠。 ⚠️ 配件頁不放這句（配件頁的崗位是旗句本尊＝成交）。 */ .sub-flag{margin:-14px 0 30px;font-family:var(--serif-cjk);font-size:17px;letter-spacing:2px; line-height:1.9;color:var(--ink)} @media (max-width:860px){.sub-flag{font-size:15.5px;margin:-8px 0 24px}} /* ---- 旗句 .flag（顧問室 2026-07-29 部署圖）------------------------------------ 旗句＝「壞了、膩了，換個頭就好。」全站只出現在三個崗位，**三次三種身份**： ① 配件頁開場 ＝ 成交（唯一「口號就是購買理由」的頁面）→ 要看得見 ② 品牌故事頁 ONE WAND 段尾 ＝ 簽名 → 要安靜 ③ 首頁 hero ＝ 指令 → ⚠️ **我們沒有那個崗位**（首頁沒有輪播），見 HANDOFF §6n-7q ⚠️ 上限就是 3 次、單頁一次、同屏永不兩次。要再加位置前先讀部署圖第五節。 */ .pdp-buy .flag{margin:18px 0 0;font-family:var(--serif-cjk);font-size:17px;letter-spacing:1.5px; line-height:1.9;color:var(--ink)} .pdp-buy .flag + .desc{margin-top:10px} /* 段尾簽名：小、退一階、與正文拉開距離——它不索取注意力 */ .story-lead .flag{margin-top:26px;font-size:13px;letter-spacing:2px;color:var(--ink-soft)} .pd-cross{margin-top:26px;padding-top:20px;border-top:.5px solid var(--line);font-size:13px;color:var(--muted);line-height:1.9} .pd-cross a{color:var(--ink);text-decoration:underline;text-underline-offset:3px} /* ============================================================ 商品詳情頁 KINTO 式版型（2026-07-27） ------------------------------------------------------------ 全部照 KINTO 實測（https://kinto.co.jp/products/20361，視窗 1280）： 內容寬 1050 置中｜左欄 515｜右欄 426｜欄間距 109（比例 1.209 : 1） 主圖 515×515（1:1）＋ 縮圖 50×50 一列 賣點區 6 段，每段：圖 515×343（**3:2**）→ 小標 12px → 內文 12px/行高1.8/#555 每段整塊高 442、段與段之間靠內距不靠 margin 右欄購買區順序：系列 → 品名 → 價格 → 尺寸/數量 → ADD TO CART → 配送（摺疊）→ 規格（摺疊）→ 注意事項（摺疊） 右欄會跟著左欄一路捲（sticky） ⚠️ 他們的內文是 12px/#555——**我們不照抄字級與顏色**：12px 中文太小， #555 在奶油底上雖然過得了 AA，但與全站語彙不合。字級用 14px、色用 --ink-soft。 抄的是**結構與比例**，不是排版參數（同 §6k 的教訓）。 ============================================================ */ .pdp{display:grid;grid-template-columns:1.209fr 1fr;gap:clamp(36px,7vw,109px);align-items:start} /* 左欄：主圖 → 縮圖 → 賣點區 */ .pdp-hero{aspect-ratio:1/1;overflow:hidden;background:var(--cream-2);border-radius:10px; display:flex;align-items:center;justify-content:center} .pdp-hero img{width:100%;height:100%;object-fit:contain;display:block} .pdp-thumbs{display:flex;gap:10px;margin-top:14px} .pdp-thumb{width:56px;height:56px;flex:none;padding:0;border:.5px solid var(--line);border-radius:6px; background:var(--cream-2);overflow:hidden;cursor:pointer;transition:border-color .2s} .pdp-thumb img{width:100%;height:100%;object-fit:contain;display:block} .pdp-thumb.on{border-color:var(--ink)} .pdp-thumb:hover{border-color:var(--muted)} /* 尚未拍攝的縮圖位：看得出是空位，不要假裝有照片 */ .pdp-thumb.todo{cursor:default;border-style:dashed;display:flex;align-items:center;justify-content:center; font-size:9px;letter-spacing:.5px;color:var(--faint);line-height:1.3;text-align:center;padding:4px} /* 右欄購買區：跟著左欄捲，但不要黏過頭（header 66 + 24 呼吸） */ .pdp-buy{position:sticky;top:90px} .pdp-series{display:block;font-family:var(--serif-latin);font-size:11px;letter-spacing:3.5px;color:var(--faint)} .pdp-buy h1{font-family:var(--serif-cjk);font-weight:400;font-size:30px;letter-spacing:2px;margin:12px 0 5px} .pdp-buy .en{font-family:var(--serif-latin);font-size:11px;letter-spacing:4px;color:var(--faint)} .pdp-buy .desc{color:var(--muted);font-size:14.5px;line-height:2;margin:22px 0 0} .pdp-qty{display:flex;align-items:center;gap:14px;margin:26px 0 0; font-size:12px;letter-spacing:2px;color:var(--muted)} .pdp-qty .cl-qty{margin:0} .pdp-add{width:100%;margin-top:16px;cursor:pointer;font:inherit;font-size:13.5px;letter-spacing:3px;padding:15px 0;text-align:center} /* 摺疊區：用原生
，不需要 JS */ .pdp-acc{border-top:.5px solid var(--line)} .pdp-acc:last-of-type{border-bottom:.5px solid var(--line)} .pdp-acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between; padding:16px 0;font-size:13px;letter-spacing:1.5px;color:var(--ink)} .pdp-acc>summary::-webkit-details-marker{display:none} /* KINTO 的摺疊用 ＋／－ 不是箭頭（Max 2026-07-27 附圖）。 用兩條線疊出來：橫線常駐，直線在展開時縮成 0 → ＋ 變 －，過程有動畫。 */ .pdp-acc>summary::after{content:"";position:relative;width:11px;height:11px;flex:none;margin-right:2px; background: linear-gradient(var(--muted),var(--muted)) center/11px 1px no-repeat, linear-gradient(var(--muted),var(--muted)) center/1px 11px no-repeat; transition:background-size .25s} .pdp-acc[open]>summary::after{ background-size:11px 1px, 1px 0} .pdp-acc-body{padding:0 0 20px;font-size:13px;line-height:1.95;color:var(--ink-soft)} .pdp-acc-body .row{display:flex;gap:14px;padding:7px 0;border-bottom:.5px solid var(--line)} .pdp-acc-body .row:last-child{border-bottom:none} .pdp-acc-body .row b{font-weight:400;color:var(--ink);flex:0 0 68px} .pdp-acc-body ul{margin:0 0 0 18px} .pdp-acc-body li{margin-bottom:4px} /* 賣點區：一段一張圖、一句小標、一段說明 */ .pdp-detail{margin-top:64px} .pdp-detail-label{display:block;font-style:normal;font-family:var(--serif-latin); font-size:13px;letter-spacing:3.5px;color:var(--ink); padding-bottom:18px;border-bottom:.5px solid var(--line);margin-bottom:34px} .pdp-feat{margin-bottom:46px} .pdp-feat:last-child{margin-bottom:0} /* 3:2 —— KINTO 實測 515×343。拍照時照這個比例拍，換圖才不會破版。 */ /* ⚠️ 一定要寫 display:block：這是個 ，inline 元素吃不到 aspect-ratio， 實測會變成 553×574（比例 0.96）而不是 3:2。 */ .pdp-feat-img{display:block;aspect-ratio:3/2;width:100%;border-radius:8px;overflow:hidden} .pdp-feat-img img{width:100%;height:100%;object-fit:cover;display:block} .pdp-feat h3{font-family:var(--serif-cjk);font-weight:400;font-size:17px;letter-spacing:1.5px; margin:20px 0 9px;color:var(--ink)} .pdp-feat p{font-size:14px;line-height:1.95;color:var(--ink-soft);margin:0} /* 佔位框：寫清楚「這裡要放什麼照片」，等於順便當拍攝清單 */ .pdp-feat-img.ph{border-radius:8px;flex-direction:column;gap:7px;padding:20px} .pdp-feat-img.ph b{display:block;font-weight:400;font-size:12.5px;letter-spacing:2px;color:var(--muted)} .pdp-feat-img.ph i{font-style:normal;font-size:11px;letter-spacing:.5px;color:var(--faint);line-height:1.7} @media (max-width:860px){ .pdp{grid-template-columns:1fr;gap:30px} .pdp-buy{position:static} .pdp-detail{margin-top:44px} .pdp-feat{margin-bottom:36px} } /* ---- 商品頁下方兩段：情境 ＋ 其他款式（2026-07-27，補 §6m-6 的缺口）-------- KINTO 商品頁在賣點區之後還有 STYLING GALLERY／JOURNAL／RECOMMENDED PRODUCTS 三段。 我們補頭尾兩段；**JOURNAL 不做**——那需要新的內容型態（文章），沒有內容就不該先立空殼。 ⚠️⚠️ 情境那段用的是 gallery.html 的圖庫氛圍照，**畫面裡沒有我們的商品**。 所以標題只能講「與貓相處的日常」，**不可以**寫成「商品使用情境／實際使用照」—— 那等於拿別人的照片替自家商品背書。同 §6m-3 的規則：氛圍可以借，產品主張不可以借。 ⚠️ 也**刻意不取 material 那一類**（羊毛、麻纖維的特寫）：放在商品頁上， 材質特寫會被讀成「這就是我們用的材質」，那是誤導。只取 hunt／home 兩類。 ⚠️ 推薦卡直接沿用列表頁的 .plp-grid / .plp-card，不另立一套卡片語彙。 但**不帶 data-colors / data-materials**——那兩個屬性只有列表頁的篩選器在用， 複製過來會變成沒有人讀的死資料。 */ .pdp-more{padding-top:0} .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px; padding-bottom:18px;border-bottom:.5px solid var(--line);margin-bottom:30px} .sec-head em{font-style:normal;font-family:var(--serif-latin); font-size:13px;letter-spacing:3.5px;color:var(--ink)} .sec-head em span{font-family:var(--sans);font-size:12px;letter-spacing:1px; color:var(--ink-soft);margin-left:16px} /* 觸控目標：連結本身只有 17px 高。用 ::before 撐出約 45px 的可點範圍（同 .totop 的做法）。 ⚠️ 這裡不能改用 padding——它是 baseline 對齊的 flex 子項，加 padding 會把基線推歪。 */ .sec-head a{position:relative;flex:none;font-size:12.5px;letter-spacing:1px; color:var(--ink-soft);transition:color .25s} .sec-head a::before{content:"";position:absolute;inset:-14px -16px} .sec-head a:hover{color:var(--ink)} .pdp-more .plp-grid{margin-top:0} .pdp-more .pdp-gal + .sec-head{margin-top:92px} .pdp-gal{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} /* 3:2 —— 跟同一頁上方的 .pdp-feat-img 同比例，版面才是一套的。 ⚠️ 只取橫幅照（比例 ≥1.2）：情境庫裡有 4 張直幅（最窄 0.59）， 塞進橫幅框會被裁掉一半以上，貓頭常常就沒了。挑圖的規則寫在腳本裡，別手挑。 */ .pdp-gal img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px} @media (max-width:860px){ .pdp-gal{grid-template-columns:repeat(2,1fr);gap:10px} .pdp-more .pdp-gal + .sec-head{margin-top:60px} } /* 據點：地址可點開 Google 地圖（2026-07-25 首家實際通路上站） */ .shop-map{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:.5px;transition:color .25s} .shop-map:hover{color:var(--ink)} /* 原本有一顆 ↗ 表示「開新分頁」，Max 2026-07-26 指定拿掉——底線已經看得出是連結了。 ⚠️ 連結本身仍是 target="_blank"，無障礙提示改由 aria-label 帶（見 stores.html）。 */ /* ---- 置中長文排版（.letter）—— about-brand.html 的開場情境在用 ---------------- ⚠️⚠️ 2026-07-27 曾把 Max 的小花故事（Threads 原文）逐字放進 about-brand.html， **同日撤下**。Max：「官網又不是我的社群媒體，我只是告訴你我的故事而已，全部放不好吧？」 —— 他是對的，而且**他給的原文檔第 4 行就寫了用途**： 「『盒內故事信』的原始素材與語氣基準。此文實測感動過讀者（**暖受眾**）」 那份文字是**寫給暖受眾看的**（已經在追蹤他的人），官網來的是**冷受眾**； 而且它是「素材」不是「文案」。把素材直接當文案貼上去是我判斷錯誤。 ⚠️ **不要再把整篇放回官網。** 完整版的歸宿是盒內故事信（拆盒的人已經買單了， 那時候讀才不會像在用私事賣東西）。官網只適合放一句話等級的濃縮版。 規則留著，因為濃縮版（或日後真的要做長文頁）還會用到。原本的註記： ⚠️ 引用 Max 的文字時**一個字都不要改、不要「潤稿」、不要換成文案腔**。 原文檔：`INGOLDENSHIP/Athena/nuwa-darwin/小花故事-threads原文.md` 它已經在真實受眾身上驗證過會打動人——改掉就是把驗證過的東西換成沒驗證過的。 ⚠️ 原文用「換行」當節奏（每行結尾沒有標點），那個節奏就是情緒本身，所以用
硬斷行， **不可以讓它自己流動斷行**。代價是窄螢幕要縮字級，見下方 media query： 最長一行 23 個字，375px 可用寬 331px → 字級要 ≤14px 才不會二次折行。 ⚠️ 全篇置中、不配圖、不加引號框：這種文字旁邊放任何裝飾都會變得廉價。 */ .letter{max-width:600px;margin:0 auto;text-align:center} .letter h2{font-family:var(--serif-cjk);font-weight:400;font-size:23px;letter-spacing:3px; line-height:1.9;margin:14px 0 46px;color:var(--ink)} .letter p{font-family:var(--serif-cjk);font-size:16px;line-height:2.45;letter-spacing:.6px; color:var(--ink-soft);margin:0 0 36px} .letter p:last-of-type{margin-bottom:0} /* 最後一段是全篇的轉折（「不是我想創業才選了寵物業，是我想做一間這樣的公司，才創業」）， 給它深一階的顏色就夠了——不放大、不加粗，文字本身撐得住。 */ .letter p.turn{color:var(--ink)} /* 名字由來那段：跟開場同一套字，但**刻意調小一階、行距收緊**—— 兩段置中長文連著出現，一模一樣的字級會變得單調而且分不出主次。 開場是情境（詩），這段是敘事（散文），視覺上要讀得出差別。 */ .letter-name{max-width:560px} .letter-name .eyebrow{display:block;margin-bottom:26px} .letter-name p{font-size:15px;line-height:2.3;margin-bottom:30px} @media (max-width:640px){.letter-name p{font-size:13.5px;line-height:2.2}} .letter .sign{margin-top:52px;font-family:var(--sans);font-size:12px;letter-spacing:2.5px; color:var(--muted);line-height:2} /* ⚠️ 斷點是算出來的，不是猜的。實測：容器 295px／字級 13px 時最寬一行 294px → **最寬行 ≈ 22.6 × 字級**，而容器 = 視窗 − 80（.wrap 左右各 40）。 所以：14px 需要視窗 ≥397、13px 需要視窗 ≥374。 舊版寫 380 會在 **381–396px 之間折行**（iPhone 12/13/14/15 的 390、393 正好中槍）， 改成 400 才蓋得住。 ⚠️ 視窗 <374px（例如第一代 iPhone SE 的 320）**一定會折行**， 再縮字級就到 10px 以下、不能讀了。那個寬度接受折行——文字置中，折下來還是能讀。 */ @media (max-width:640px){ .letter h2{font-size:19px;letter-spacing:2px;margin-bottom:34px} .letter p{font-size:14px;line-height:2.3;letter-spacing:0;margin-bottom:30px} } @media (max-width:400px){.letter p{font-size:13px}} /* ⚠️ 名字由來那段在窄螢幕**改成流動的散文**，不硬斷行。 它最長一行 25 個字，375px 的容器只有 295px → 要 11.8px 才不折行，那已經不能讀了。 **但這段是散文不是詩**：每一行都是完整句子、句尾有句號，拿掉
之後 句子自然接續、語意完全不受影響，而且不會出現「折了一半的置中行」。 ⚠️ 開場那段**不可以**這樣做——那是詩，換行就是節奏本身（見上方 .letter 的註解）。 ⚠️ 順便改成左對齊：置中的長散文每行起點都不一樣，讀起來很累。 ⚠️⚠️ HTML 那邊 `
` **前後不可以留換行縮排**——br 被隱藏之後， 那個換行會被算成一個空白字元，句號後面就會多出一個空格。已在 about-brand.html 併掉。 */ @media (max-width:640px){ .letter-name{text-align:left} .letter-name br{display:none} .letter-name .eyebrow{display:block;text-align:center} .letter-name p{text-align:justify;text-justify:inter-ideograph} } /* ---- 品牌故事／社會責任：KINTO 式圖文交錯（2026-07-25）------------------ 量測 KINTO about 頁得到的節奏：英文 eyebrow → 中文小標 → 30–100 字短文， 圖與文左右交替、圖片比例刻意混用（直幅／橫幅／方形）不統一成同一格。 分項小節一律「圖在前 → 短標題 → 38–50 字說明」——圖先講故事，文字補充。 */ .story{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;max-width:1060px;margin:0 auto} .story.rev .story-img{order:2} .story-img img{width:100%;display:block;border-radius:10px} .story-text .eyebrow,.story-lead .eyebrow{display:block;margin-bottom:14px} .story-text h2,.story-lead h2{font-family:var(--serif-cjk);font-weight:400;font-size:26px;letter-spacing:2px;line-height:1.6;margin:0 0 20px} .story-text p,.story-lead p{color:var(--muted);font-size:15px;line-height:2.1;margin-bottom:18px} .story-text p:last-child,.story-lead p:last-child{margin-bottom:0} .story-lead{max-width:600px;margin:0 auto 54px;text-align:center} /* 六款配件橫排（用去背 PNG，直接浮在奶油底上） */ /* 三欄分項加圖（Design/Material/Craft、社會責任的三項事實） */ .dmc-img img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px;display:block;margin-bottom:20px} @media(max-width:860px){ .story{grid-template-columns:1fr;gap:26px} .story.rev .story-img{order:0} .story-text h2,.story-lead h2{font-size:22px} } /* ============================================================ header 右上角三顆 icon（語言／會員／購物袋）＋購物車抽屜＋cart.html icon 是 Google Material Symbols（Apache 2.0，Max 提供，登記在 images/SOURCES.md）。 ⚠️ SVG 走**內嵌**不是 ：內嵌才吃得到 currentColor，hover 才會跟著變色。 原始 .svg 留在 images/icons/ 備查，頁面沒有引用它們。 ============================================================ */ .ubtn{position:relative;flex:none;width:34px;height:34px; display:flex;align-items:center;justify-content:center; background:none;border:none;padding:0;color:var(--muted);cursor:pointer;transition:color .2s} .ubtn svg{width:20px;height:20px;display:block;fill:currentColor} button.ubtn:hover{color:var(--ink)} /* 語言切換：地球 ＋ **目前語言的代碼**，點一下換下一個（Max 2026-07-27 指定，附圖）。 舊版是「🌐 中 · EN · 日 · 한」一整排純文字：四個都看得到、但沒有一個能點， 而且佔掉的寬度是現在的三倍多，在 400px 以下會擠掉品牌字。 */ .langbtn{width:auto;gap:5px;padding:0 6px;color:var(--ink-soft);cursor:pointer} .langbtn svg{width:17px;height:17px} /* ⚠️ `top:.3px` 不是隨手調的，是量出來的（Max 2026-07-27 回報「文字偏上」）： 地球圖案的**墨水**中心實測落在按鈕的 17.00（＝正中心）， 但文字用 line-height:1 置中時，**墨水**中心落在 16.70（中）／16.70（EN）／ 16.91（日）／16.43（한）——一律偏高約 0.3px。 數字看起來很小，但眼睛比的是上下留白的**比例**：EN 上方 2.49px、下方 3.08px，差 24%， 所以看起來就是浮在上面。下移 0.3px 之後 中／EN 剛好落在 17.00。 ⚠️ 用 position/top 不用 transform：transform 會另開合成層，小字反而可能糊掉。 ⚠️ 這個值綁定「Noto Sans TC ＋ 12px」，**換字體或改字級就要重量一次**（量法見 HANDOFF §6n-7j）。 */ .langbtn .lang-code{position:relative;top:.3px; font-weight:400;font-size:12px;letter-spacing:1.5px;line-height:1; min-width:1.55em;text-align:left} .langbtn:hover{color:var(--ink)} /* 購物袋標記：2026-07-27 由「數字徽章」改成**一個點**（Max：「顯示一個點就好了，不用數字」）。 件數改由 .cart-btn 的 aria-label 帶（見 js/cart.js 的 renderBadge 註解）。 ⚠️ 點要壓在袋子右上角外緣，且不要因為沒有文字就塌掉——寬高寫死。 ⚠️⚠️ 2026-07-27 第二版：**改成從按鈕正中心定位，不要再用 right/top 貼按鈕邊** （Max：「這個點能不能離的近一點？」）。舊寫法 `top:1px;right:0` 是貼**按鈕外框**， 但按鈕 34px、圖示只有 20px，圖示裡真正畫到的袋身更只有 13.3px 寬—— 實測點到袋身右上角的視覺間隙是 **6.65px**，比袋子的一半還寬，看起來像兩個不相干的東西。 ⚠️ 而且貼按鈕邊會**跟著按鈕寬度跑**：`@media(max-width:400px)` 想把 .ubtn 收成 30px， 那時 `right:0` 會讓點直接**壓到袋子上**。從中心定位就跟按鈕寬度無關了。 推導（按鈕中心為原點，圖示固定 20×20 置中）： 袋身（不含提把）右上角 = 中心 +(6.67, −5) ← viewBox 的 x800／y−720 換算 點直徑 d、要讓圓周離那個角 g → 圓心 = 該角 +((d/2+g)/√2)×(1, −1) → margin-left = 圓心x − 6.67 − d/2 ；margin-top = 圓心y − 5 − d/2（相對中心） ⚠️ 要調鬆緊／大小就改 `width`／`height` 與這兩個 margin，**不要改回 right/top**。 ⚠️ 2026-07-27 第三版（Max：「點能不能小一點然後再靠近一點？」）： 直徑 **7px → 5px**、間隙 **1.69px → 1.09px**（margin 7／−12 → 6.75／−10）。 袋身畫面上只有 13.3px 寬，7px 的點佔了它 53%，比例上太重；5px 是 37%。 ⚠️ 這顆點是**購物車有東西的唯一提示**（沒有數字，件數只在 aria-label 裡）， 再小下去就會開始看不見——**5px 已經接近下限，不要再縮**。 ⚠️ 2026-07-27 第四版（Max：「顏色能不能接近點？」）： `--ink`(#3B352E) → **`--ink-soft`(#5E574D)**。袋子是 `--muted`(#8C8378)， 原本的 --ink 跟它差 3.19:1，在這個低對比的版面裡是整條 header 最重的東西； 改 --ink-soft 之後差距降到 **1.88:1**，看得出是個標記，但不再像貼上去的異物。 對比（#F5F1E9 底）**6.32:1**，遠高於非文字元件要求的 3:1。 ⚠️ **不要直接用 currentColor**：那會跟袋子完全同色，點就變成圖示的一部分， 失去「有東西了」的提示作用。要再淡也不要越過 --muted。 ⚠️ hover 時袋子會變 --ink（比點更深），深淺關係會反過來—— 5px 這個尺寸下看不太出來，是刻意接受的取捨。 */ .cart-n{position:absolute;left:50%;top:50%;margin-left:6.75px;margin-top:-10px; width:5px;height:5px;padding:0; border-radius:50%;background:var(--ink-soft); opacity:0;transform:scale(.4);transition:opacity .2s,transform .2s} .cart-n.on{opacity:1;transform:none} /* 小提示（會員中心還沒做，點了不能沒反應）*/ .igs-toast{position:fixed;left:50%;top:calc(var(--hdr,66px) + 16px); transform:translateX(-50%) translateY(-8px); background:var(--ink);color:var(--cream);font-size:13px;letter-spacing:1px; padding:11px 20px;border-radius:6px;box-shadow:0 10px 26px rgba(59,53,46,.18); opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;z-index:9800} .igs-toast.on{opacity:1;visibility:visible;transform:translateX(-50%)} /* 抽屜——沿用行動選單那套幾何（從 header 下緣開始、右側滑入）。 z-index 要比行動選單的 9500 高：兩個都開的話購物車必須在上面。 */ .cartd-scrim{position:fixed;left:0;right:0;bottom:0;top:var(--hdr,66px); background:rgba(43,38,32,.34);opacity:0;visibility:hidden; transition:opacity .32s ease,visibility .32s;z-index:9600} body.cart-open .cartd-scrim{opacity:1;visibility:visible} .cartd{position:fixed;top:var(--hdr,66px);right:0;bottom:0;width:min(92vw,420px); background:var(--cream-2);border-left:.5px solid var(--line); box-shadow:-16px 0 38px rgba(59,53,46,.10);z-index:9700; display:flex;flex-direction:column; transform:translateX(100%);visibility:hidden; transition:transform .34s cubic-bezier(.4,0,.2,1),visibility .34s} body.cart-open .cartd{transform:none;visibility:visible} .cartd-head{flex:none;display:flex;align-items:center;gap:12px; padding:20px 22px 16px;border-bottom:.5px solid var(--line)} .cartd-head em{font-style:normal;font-family:var(--serif-latin);font-size:13px; letter-spacing:3.5px;color:var(--ink)} .cartd-n{font-size:11.5px;letter-spacing:1.5px;color:var(--faint)} .cartd-x{margin-left:auto;background:none;border:none;padding:0 2px; font-size:24px;line-height:1;color:var(--muted);cursor:pointer} .cartd-x:hover{color:var(--ink)} .cartd-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 22px} .cartd-empty{padding:40px 0;text-align:center;font-size:13.5px;color:var(--muted);line-height:2.2} .cartd-empty a{border-bottom:.5px solid;color:var(--ink)} .cartd-foot{flex:none;padding:18px 22px 22px;border-top:.5px solid var(--line);background:var(--cream)} .cartd-hint{font-size:12px;letter-spacing:1px;color:var(--muted);margin:0 0 12px} .cartd-hint:empty{display:none} .cartd-sum{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px} .cartd-sum b{font-weight:400;font-size:13px;letter-spacing:2px;color:var(--muted)} .cartd-sum span{font-family:var(--serif-latin);font-size:22px;letter-spacing:1px;color:var(--ink)} .cartd-go{display:block;text-align:center} .cartd-note{font-size:11px;letter-spacing:.5px;color:var(--faint);text-align:center;margin:10px 0 0} /* 品項列（抽屜與 cart.html 共用；cart.html 版加 .cl-big 放大） */ .cl{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:.5px solid var(--line)} .cl:last-child{border-bottom:none} .cl-img{flex:none;width:74px} .cl-img img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block;background:transparent} .cl-main{flex:1;min-width:0} .cl-name{display:block;font-size:13.5px;letter-spacing:1px;color:var(--ink);line-height:1.5} .cl-name:hover{opacity:.7} .cl-unit{display:block;font-size:12px;letter-spacing:1px;color:var(--muted);margin-top:3px} .cl-unit i{font-style:normal;font-size:10px;letter-spacing:1px;color:var(--faint); border:.5px solid var(--line);border-radius:3px;padding:1px 5px;margin-left:7px} .cl-qty{display:inline-flex;align-items:center;margin-top:10px;border:.5px solid var(--line);border-radius:4px;background:#fff} .cl-qty button{width:28px;height:28px;background:none;border:none;padding:0; font-size:14px;line-height:1;color:var(--muted);cursor:pointer} .cl-qty button:hover{color:var(--ink)} /* 數量到上限（js/cart.js 的 MAX_QTY）時「＋」停用——按了沒反應會被讀成網站壞了 */ .cl-qty button[disabled]{opacity:.3;cursor:not-allowed} .cl-qty button[disabled]:hover{color:var(--muted)} .cl-qty span{min-width:26px;text-align:center;font-size:13px;color:var(--ink)} .cl-right{flex:none;text-align:right} .cl-sum{display:block;font-size:13.5px;letter-spacing:1px;color:var(--ink)} .cl-x{background:none;border:none;padding:0;margin-top:10px; font:inherit;font-size:11.5px;letter-spacing:1px;color:var(--faint);cursor:pointer} .cl-x:hover{color:var(--ink)} .cl-big{padding:24px 0} .cl-big .cl-img{width:104px} .cl-big .cl-name{font-size:15px} /* cart.html */ .cart-empty{text-align:center;padding:60px 0 20px} .cart-empty p{color:var(--muted);font-size:15px;margin-bottom:26px} .cart-grid{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start} .cart-lines-head{display:flex;align-items:center;justify-content:space-between; padding-bottom:14px;border-bottom:.5px solid var(--line); font-size:12.5px;letter-spacing:1.5px;color:var(--muted)} .cart-clear{background:none;border:none;padding:0;font:inherit;font-size:12px; letter-spacing:1px;color:var(--faint);cursor:pointer} .cart-clear:hover{color:var(--ink)} .cart-side{background:var(--cream-2);border:.5px solid var(--line);border-radius:8px;padding:26px 24px;position:sticky;top:90px} .cart-side h2{font-size:17px;letter-spacing:2px;margin:0 0 20px} .cs-head{display:block;font-style:normal;font-family:var(--serif-latin);font-size:10.5px; letter-spacing:3px;color:var(--faint);margin-bottom:10px} .ship-opt{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px; padding:12px 13px;border:.5px solid var(--line);border-radius:6px;background:#fff; margin-bottom:8px;cursor:pointer;transition:border-color .2s} .ship-opt:hover{border-color:var(--muted)} .ship-opt.on{border-color:var(--ink)} .ship-opt.off{cursor:not-allowed;background:transparent;opacity:.72} .ship-opt.off:hover{border-color:var(--line)} .ship-opt input{margin:0;accent-color:var(--ink)} .so-main b{display:block;font-weight:400;font-size:13.5px;letter-spacing:1px;color:var(--ink)} .so-main i{display:block;font-style:normal;font-size:11px;letter-spacing:.5px;color:var(--faint);margin-top:2px} /* 金額上面標「運費」——沒有標籤時，右邊孤零零一個 NT$100 讓人不確定那是什麼 （Max 2026-07-27）。標籤小而淡、數字深，層級才對：數字才是答案。 */ .so-fee{font-size:13.5px;letter-spacing:1px;color:var(--ink);text-align:right;line-height:1.35} .so-fee em{display:block;font-style:normal;font-size:10px;letter-spacing:2px; color:var(--muted);margin-bottom:2px} /* 不能用的方式：只有「不適用」三個字，沒有運費標籤（見 cart.js 註解） */ .so-fee.so-na{color:var(--muted);font-size:13px} /* 每個配送方式底下的免運門檻（兩種方式都要顯示，見 cart.js 的 freeLine 註解）。 用 --ink-soft 而不是 --faint：這是客人拿來做決定的資訊，不是裝飾。 */ .so-free{grid-column:1/-1;font-size:11.5px;line-height:1.65;color:var(--ink-soft); border-top:.5px solid var(--line);padding-top:7px;margin-top:3px} .ship-opt.off .so-free{color:var(--muted)} .so-why{grid-column:1/-1;font-size:11px;line-height:1.7;color:#A8664A; border-top:.5px solid var(--line);padding-top:8px;margin-top:2px} /* 門檻列與理由列相鄰時不要畫兩條線 */ .so-free + .so-why{border-top:none;padding-top:4px} /* 「超商只收配件」的常駐說明——車上沒有逗貓棒時，.so-why 不會出現，靠這行補 */ .ship-note{font-size:11.5px;line-height:1.75;color:var(--ink-soft);margin:12px 0 0; padding-left:11px;border-left:2px solid var(--sand)} .ship-note b{font-weight:500;color:var(--ink)} .cart-tot{margin-top:22px;padding-top:16px;border-top:.5px solid var(--line)} .cart-tot .row{display:flex;align-items:baseline;justify-content:space-between;padding:7px 0; font-size:13px;letter-spacing:1px;color:var(--muted)} .cart-tot .row b{font-weight:400} .cart-tot .grand{padding-top:14px;margin-top:8px;border-top:.5px solid var(--line);color:var(--ink)} .cart-tot .grand b{font-size:14px;letter-spacing:2px} .cart-tot .grand span{font-family:var(--serif-latin);font-size:24px;letter-spacing:1px} .cart-hint{font-size:12px;letter-spacing:1px;color:var(--muted);margin:12px 0 0} /* text-align：cart.html 版 2026-08-07 起是 （結帳頁那顆仍是