/* ========================================================================== 設計 Token — v0.2 數值全部量自 CO-I.M.C. 定稿 JPG（1920px 寬畫板，1:1） 標註「實測」的是從設計稿像素直接量到的，其餘為推導值。 縮放策略：用 clamp(最小值, N vw, 設計稿值)。 在 1920px 視窗會完全等於設計稿；視窗變窄時等比縮，到手機停在最小值。 ========================================================================== */ :root { /* ---------- 色彩（實測像素） ---------- */ --c-brand: #EB5405; /* 品牌橘 */ --c-brand-dark: #C94503; --c-tint: #FFF0E9; /* 淺橘區塊底 */ --c-ink: #1D1D1F; /* 主文字 */ --c-ink-2: #4A4A4E; --c-ink-3: #8A8A8E; /* 日期、標籤 */ --c-bg: #FFFFFF; --c-field: #EFF0F2; /* 搜尋框底 */ --c-line: #E4E4E6; --c-placeholder: #D8D8DA; /* Galleries 灰 LOGO */ --c-cream: #F1EAE2; /* 首頁主視覺的底色（實測，與素材圖去背後一致） */ /* ---------- 字體 ---------- */ /* AmadejiaQuotes 只覆蓋引號／撇號的碼位（見 main.css 的 @font-face）， 放在最前面，讓英文的 ’ 用拉丁字體的窄版，不要用 Noto Sans TC 的全形版。 */ --f-zh: "AmadejiaQuotes", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", sans-serif; --f-en: "AmadejiaQuotes", "Jost", "Noto Sans TC", -apple-system, sans-serif; /* ---------- 字級（實測：中文字身高度 ≈ font-size） ---------- 內文 23px 字身 / 行距 40px → 24px / 1.67 卡片與文章標題 43px 字身 → 44px 展覽主標 41px 字身 → 42px */ --fs-body: clamp(15px, 1.25vw, 24px); /* 實測 24 */ --fs-small: clamp(13px, 1.04vw, 20px); /* 實測 20 — 側欄項目、Read more */ --fs-meta: clamp(12px, .94vw, 18px); /* 實測 18 — 日期、標籤、footer */ --fs-h1: clamp(22px, 2.29vw, 44px); /* 實測 43 */ --fs-h2: clamp(21px, 2.19vw, 42px); /* 實測 41 */ --fs-h3: clamp(17px, 1.25vw, 24px); /* 實測 23 — 策展人姓名 */ --fs-sub: clamp(16px, 1.46vw, 28px); /* 實測 27 — 英文副標 */ --fs-label: clamp(19px, 2.03vw, 39px); /* CURATORS / LOCATION 等大寫標籤 */ --fs-sidebar-t: clamp(15px, 1.35vw, 26px); /* 實測 25 — 側欄小標 */ --fs-hero-zh: clamp(24px, 2.19vw, 42px); --fs-hero-en: clamp(17px, 1.56vw, 30px); --fs-anchor: clamp(15px, 1.46vw, 28px); /* 實測 27 — 品牌介紹／創辦人介紹 */ /* ---------- 行高 ---------- */ --lh-body: 1.67; /* 實測 40 / 24 */ --lh-title: 1.35; /* ---------- 字距 ---------- */ --ls-zh-title: .25em; --ls-en-title: .06em; --ls-label: .12em; /* ---------- 版面（實測 @1920） ---------- 頁面左右留白 106 · 內容總寬 1708 側欄 380 · 欄間距 68 · 主欄 1260 */ --w-page: 1708px; --w-narrow: 1260px; /* 主欄寬（文章內頁的內文欄） */ --w-text: 1055px; /* 實測：展覽／阿嬤的家的置中文字欄 */ --w-video: 845px; /* 實測：嵌入影片寬度 */ --w-sidebar: clamp(180px, 19.8vw, 380px); --gap-sidebar: clamp(28px, 3.54vw, 68px); --pad-x: clamp(18px, 5.52vw, 106px); /* Header 的左右留白與內容區不同：設計稿實測 logo 左緣 59、右側元件右緣距邊 116 */ --pad-l: clamp(10px, 2.29vw, 44px); /* logo 檔左側自帶 28/1000 留白，扣掉後墨色邊緣落在 59 */ --pad-r: clamp(18px, 6.04vw, 116px); /* ---------- 垂直節奏（實測） ---------- Header 113 · Banner 392 · 區塊上下留白 70 卡片之間 120 · 麵包屑列 197 · 展場名條 50 */ --h-header: clamp(60px, 5.89vw, 113px); --h-hero: clamp(180px, 20.4vw, 392px); --h-breadcrumb: clamp(64px, 10.26vw, 197px); --h-caption: clamp(38px, 2.6vw, 50px); --sp-section: clamp(40px, 3.65vw, 70px); --sp-block: clamp(24px, 2.4vw, 46px); --sp-card: clamp(48px, 6.25vw, 120px); /* ---------- 圖片比例（想調高矮改這裡就好） ---------- */ /* 比例寫成「寬 / 高」，第二個數字越大 → 圖越高。 v0.7 全部改回設計稿實測值（原本 about 16/6、founder 16/8 是刻意加高的， 跟定稿對不起來，這一版改成量到的數字）： ABOUT US 主圖 1260 × 587 → 16 / 7.4 創辦人照片 1260 × 581 → 16 / 7.4 文章卡片 1280 × 567 → 16 / 7.1 */ --ratio-founder: 16 / 7.4; /* 創辦人照片（實測） */ --ratio-about: 16 / 7.4; /* ABOUT US 主圖（實測） */ --ratio-card: 16 / 7.1; /* 文章卡片、文章內頁大圖（實測） */ /* ---------- 首頁：標語疊在圖上的位置 ---------- 數字越大，字越往上。設計稿實測是 135，客戶要求再往上一點 → 190。 */ --home-text-bottom: clamp(34px, 9.9vw, 190px); /* 桌機 */ --home-text-bottom-m: clamp(30px, 14vw, 130px); /* 手機 */ /* 首頁下方多了展覽按鈕之後，整塊標語要往上挪，把底部空間讓給按鈕。 數值量自 0929 設計稿（1920 稿、主視覺 1920×1347）： 按鈕下緣距離主視覺底部 87px、英文標語與按鈕之間 92px。 手機沒有設計稿，抓到主視覺線稿的下緣為止（實測不會壓到圖）。 */ --home-text-bottom-cta: clamp(24px, 4.5vw, 90px); --home-text-bottom-cta-m: 26px; --gap-home-cta: clamp(18px, 4.8vw, 92px); --gap-home-cta-m: 18px; /* ---------- 阿嬤的家：三個特色 icon ---------- */ --size-feature-icon: clamp(88px, 10.4vw, 200px); /* 設計稿實測 200px @1920 */ --gap-feature-icon: clamp(14px, 1.35vw, 26px); /* 品牌介紹／創辦人介紹 兩顆錨點之間的距離（實測中心距 417，扣掉字寬約 294） */ --gap-anchors: clamp(40px, 15.3vw, 294px); /* ---------- ma 輔助圖形（展覽頁左緣出血，會浮動） ---------- 實測 @1920：寬 430、高 100，上緣落在區塊交界上方約 18px。 */ --size-deco-ma: clamp(140px, 22.4vw, 430px); --shift-deco-ma: -20%; /* 相對自身高度往上挪多少，讓它壓在交界線上 */ --float-deco-ma: clamp(6px, .73vw, 14px); /* 浮動幅度 */ --dur-deco-ma: 6s; /* 浮動一個來回的時間 */ /* ---------- 語言切換（國旗下拉） ---------- --size-flag 國旗寬度 --gap-lang-caret 國旗與小箭頭之間 --gap-lang-stack 展開後兩面國旗的上下間距 */ --size-flag: clamp(26px, 2.1vw, 40px); --gap-lang-caret: clamp(8px, .78vw, 15px); --gap-lang-stack: clamp(8px, .73vw, 14px); /* ---------- 回到最上方按鈕 ---------- */ --size-to-top: clamp(44px, 3.6vw, 68px); --pos-to-top-x: clamp(16px, 2.4vw, 46px); --pos-to-top-y: clamp(16px, 2.4vw, 46px); --pos-to-top-x-m: 16px; --pos-to-top-y-m: 16px; /* ---------- 頁尾（全部照設計稿實測 @1920） ---------- */ --size-social: clamp(24px, 1.93vw, 37px); /* icon 直徑 37 */ --gap-social: clamp(9px, .78vw, 15px); /* icon 之間 15 */ --gap-social-below: clamp(16px, 1.77vw, 34px); --gap-contact-below: clamp(10px, 1.15vw, 22px); --fs-footer: clamp(15px, 1.46vw, 28px); /* Contact Information 那行 */ --fs-footer-copy: clamp(13px, 1.25vw, 24px); /* Copyright 那行 */ --pad-footer-top: clamp(48px, 5.7vw, 110px); --pad-footer-bottom: clamp(34px, 3.5vw, 68px); /* ---------- 展覽地圖 ---------- */ --ratio-map: 1920 / 600; /* 桌機，跟設計稿的靜態地圖同比例 */ --ratio-map-m: 4 / 3; /* 手機，太扁會看不清楚 */ /* ---------- Instagram 影片 ---------- ⚠ 想要設計稿那種乾淨的 16:9 播放器，請把影片檔直接上傳到媒體庫、或放 YouTube。 IG 的嵌入一定會帶自己的介面（頭像列、白條、按讚列），那是 IG 畫的，不是主題。 兩頁的行為不一樣，這是客戶確認過的： 展覽頁 → 後台留空＝**整則貼文完整顯示、不裁切**，高度由 IG 自己回報 （assets/js/ig.js 聽 postMessage，540 寬的橫式貼文是 511）。 阿嬤的家頁 → 後台留空＝**原本的做法** 58 / 355 / 540（只留影片、避開白條）。 IG /embed/ 的版面（540px 寬為基準）： y 0 ～ 54 IG 頭像列 y 54 ～ 影片（橫式 16:9 高 304，到 358） y 358 ～ 「View more on Instagram」白條、按讚／留言列 總高 511（IG 回報值，實測與版面吻合） 裁切範圍由後台每支影片自己填（起點／終點／畫面寬度），PHP 會寫成 inline style； 下面三個是「沒填、而且樣板也沒開自動」時的預設值。 --ig-crop-top 從 iframe 頂端切掉多少 --ig-h iframe 本身的高度 --ig-width 顯示寬度（不用寫 px，要拿去做除法） */ --w-ig: 540px; /* iframe 本身的寬度，不要動 */ --ig-crop-top: 58; /* 阿嬤的家頁的預設＝避開白條那一組 */ --ig-h: 355; /* 白條在 358，所以停在 355 */ --ig-pic-w: 540; /* 畫面實際寬度；直式影片是 380 */ --ig-width: 845; /* 展覽頁：跟設計稿的影片同寬 */ --ig-width-about: 845; /* 阿嬤的家：同上 */ /* ---------- 動態（客戶簡報「阿嬤的家 動態建議」） ---------- 全部都尊重系統的「減少動態效果」設定，開了就自動停。 */ /* 開場：白底 + 中央 ma 標誌（首頁，每個瀏覽階段只播一次） */ --dur-intro: .7s; /* 標誌淡入、整片淡出各花多久 */ --hold-intro: .9s; /* 標誌停留多久才開始淡出 */ --size-intro: clamp(150px, 22vw, 380px); /* 首頁進場：畫面慢慢推近，像走進老屋（v0.10 起首頁只有一張線稿，不再輪播） */ --zoom-home: 1.08; /* 推到多近。1 = 不動；1.15 就很明顯了 */ --dur-zoom-home: 6s; /* 推近花多久 */ --ease-zoom: cubic-bezier(.22, .61, .36, 1); /* 先快後慢，像腳步慢下來 */ /* 展覽地圖的黑白處理。要更灰就把 grayscale 留 1、contrast 調低； 想回彩色改成 none 就好。filter 不會擋住觸控，地圖照樣可以拖曳縮放。 */ --filter-map: grayscale(1) contrast(1.06) brightness(1.02); --dur-map-color: .45s; /* 滑鼠移上去恢復彩色的過渡時間 */ /* 首頁兩張主視覺交叉淡入淡出（v0.10 起預設只有一張，這個留著備用） */ --dur-slide: 1.6s; /* 交叉的時間，越長越溫和 */ /* Galleries 的 logo 尺寸上限。 數值是量設計稿量出來的（1920 寬的畫面、內容欄 1708）： 最寬的三個（大河美術／Hiro Hiro／PTT SPACE）都剛好是 296px ← 寬度上限 ROSSI ROSSI 比較方，被高度擋住，約 110px 高 ← 高度上限 換算成 vw：296/1920 = 15.4vw、110/1920 = 5.7vw。 ⚠ 最大值（下面的 104 / 280 / 95）不是隨便設的，是算出來的上限： 內容欄最寬只到 1708px，但 logo 是用 vw（螢幕寬）算的 —— 螢幕超過 1900 左右，logo 還在變大、欄寬卻不會再變，五個就排不下，最後一個 會掉到第二排（客戶遇到的狀況）。 五個 logo 加四個間距 ≈ 5.754 × 寬度上限，要 ≤ 1708 → 上限 ≤ 296px。 取 280 留一點餘裕（實測 1920〜3440 都穩定一排）。 ⚠ 這組數字是為「五家畫廊」算的。實測第六家加進來會換到第二排； 真的加到六家時，把下面三個最大值改成 240 / 89 / 81 就會變回一排 （logo 會小一點，這是必然的取捨）。 */ --h-gallery-logo: clamp(44px, 5.7vw, 104px); --w-gallery-logo: clamp(110px, 15.4vw, 280px); /* logo 與 logo 之間的間距。設計稿上五個 logo 的間距是一樣的（約 110px）， 不是「每個 logo 各佔一格、格子等寬」—— 等寬格子會讓比較窄的 ROSSI 左右空一大塊，跟旁邊的疏密不一致。 */ --gap-gallery: clamp(16px, 5.2vw, 95px); /* 展覽場地手機版自動輪播（桌機維持點標題切換，不輪播） --dur-venues-auto 每一站停留多久才換下一站 --dur-venues-slide 高度變化的過渡時間（左右滑動用瀏覽器原生的平滑捲動） --dur-venues-resume 使用者自己滑過之後，隔多久才恢復自動播放 */ --dur-venues-auto: 5s; --dur-venues-slide: .38s; --dur-venues-resume: 8s; /* 內頁捲動漸出 */ --dur-reveal: .85s; --rise-reveal: 26px; /* 從下方多遠的地方升上來 */ /* 互動（按鈕、標題、連結） */ --dur-hover: .35s; /* 手機版選單的遮罩 —— 偏白的半透明，蓋住整個網頁，選項置中在上面。 想更透就把 .94 調小（例如 .88），想更實就調大（1 = 全白）。 */ --scrim-nav: rgba(255, 255, 255, .94); /* ---------- 其他 ---------- */ --radius: 0px; /* 設計稿的圖片、區塊都沒有圓角 */ --radius-cta: clamp(12px, 1.9vw, 36px); /* 只有 CTA 按鈕是圓角（實測 36） */ --ease: cubic-bezier(.4, 0, .2, 1); } @media (max-width: 768px) { :root { --ls-zh-title: .16em; } }