/* ========================================================================== WEICHEN-YEN Portfolio — 視覺參考 Squarespace Foundations Grotesque 無襯線、大字級、大量留白、編輯感；深色沉浸、每章一色。 ========================================================================== */ /* 2026-07-12：全站改白底深字（原深色主題常數留在下面註解供未來參考） */ @font-face{ font-family:'Playfair Display'; font-style:normal; font-weight:600; src:url('../assets/fonts/PlayfairDisplay-600.woff2') format('woff2'); font-display:swap; } @font-face{ font-family:'Playfair Display'; font-style:italic; font-weight:600; src:url('../assets/fonts/PlayfairDisplay-600Italic.woff2') format('woff2'); font-display:swap; } :root{ --bg: #ffffff; --fg: #111113; --muted: rgba(17,17,19,.46); --hairline: rgba(17,17,19,.14); --ease: cubic-bezier(.22,.61,.36,1); /* 平滑、不彈跳 */ --ease-io: cubic-bezier(.65,0,.35,1); --bg-dur: .9s; --edge: clamp(20px, 3.4vw, 52px); /* 版心邊距 */ /* Index 英文章節標題用字（開關變數，之後要擴大套用範圍改這裡即可） */ --font-display-en: 'Playfair Display', Georgia, 'Times New Roman', serif; } *{ margin:0; padding:0; box-sizing:border-box; } html,body{ height:100%; } body{ background: var(--bg); color: var(--fg); font-family:'Inter','PingFang TC','Noto Sans TC','Hiragino Sans','Microsoft JhengHei',sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden; transition: background-color var(--bg-dur) var(--ease), color var(--bg-dur) var(--ease); letter-spacing: -0.01em; } body.light{ --fg:#111113; --muted:rgba(17,17,19,.46); --hairline:rgba(17,17,19,.14); } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; } img{ display:block; max-width:100%; -webkit-user-drag:none; user-select:none; } /* ---------- 常駐外框 chrome ---------- */ #chrome{ position:fixed; inset:0; z-index:40; pointer-events:none; transition:opacity .3s var(--ease); } #chrome > *{ pointer-events:auto; } /* lightbox 開啟時外框整組退場，避免與 Back／進度數字重疊 */ html.lb-active #chrome{ opacity:0; } html.lb-active #chrome > *{ pointer-events:none; } /* 2026-07-14：角落常駐元素改用明確的深／淺切換（不再靠 mix-blend-mode，白底/黑底都會直接失準）； 由 JS 在切頁當下對 加／拿掉 .corner-dark，四個角落元素統一跟著這顆 class 走 */ .chrome-name, .chrome-index, .chrome-chnum, .chrome-nav button{ color:#111113; transition: color .4s var(--ease), opacity .5s var(--ease), transform .35s var(--ease); } html.corner-dark .chrome-name, html.corner-dark .chrome-index, html.corner-dark .chrome-chnum, html.corner-dark .chrome-nav button{ color:#f3f2ef; } .chrome-name{ position:fixed; top:var(--edge); left:var(--edge); display:flex; gap:.6em; align-items:baseline; font-size:19px; font-weight:600; letter-spacing:-.01em; } .chrome-name .zh{ font-size:13px; opacity:.6; } .chrome-index{ position:fixed; top:var(--edge); right:var(--edge); font-size:15px; font-weight:500; } .chrome-index:hover{ opacity:.55; } .chrome-chnum{ position:fixed; bottom:var(--edge); left:var(--edge); font-size:15px; font-weight:500; letter-spacing:0; opacity:0; } .chrome-chnum.show{ opacity:.9; } /* 2026-07-19 第四輪：Yen 拍板——右下角切章 ←→ 跟專案圖輪播的 ←→ 長得一樣容易混淆，改純文字 Prev／Next；字級／字重比照右上角 .chrome-index（15px／500），hover 比照站內既有連結慣例 （opacity 淡入＋方向性位移，跟改版前箭頭的 hover 手感一致）。按鈕另外用 padding 撐出實際可按 範圍（不只是文字本身大小），手機另外在 @media(max-width:760px) 保證 ≥44px 觸控高度。 */ .chrome-nav{ position:fixed; bottom:var(--edge); right:var(--edge); display:flex; gap:18px; font-size:15px; font-weight:500; line-height:1; opacity:0; transition: opacity .5s var(--ease); } .chrome-nav.show{ opacity:.9; } .chrome-nav button{ opacity:.85; padding:10px 4px; display:inline-flex; align-items:center; justify-content:center; } .chrome-nav button:hover{ opacity:1; } .chrome-nav #prev-ch:hover{ transform:translateX(-4px); } .chrome-nav #next-ch:hover{ transform:translateX(4px); } .chrome-nav button:disabled{ opacity:.2; cursor:default; } /* ---------- 舞台 ---------- */ #stage{ position:fixed; inset:0; z-index:10; } .view{ position:absolute; inset:0; } /* ============ Landing 環形漂浮牆（3D 圓筒） ============ */ /* 2026-07-12：Landing 黑封面（整站白底裡的例外，含滿版預覽狀態）；--fg/--muted/--hairline 局部覆寫，讓底下沿用這些變數的元件（ring-center 文字、chrome 由 mix-blend-mode 另外處理）自動變淺色 */ .landing{ background:#0a0a0b; color:#f3f2ef; overflow:hidden; --fg:#f3f2ef; --muted:rgba(243,242,239,.55); --hairline:rgba(243,242,239,.16); } .landing.grabbing{ } .ring-scene{ position:absolute; inset:0; perspective: 1500px; perspective-origin: 50% 46%; } .ring-space{ position:absolute; top:50%; left:50%; width:0; height:0; transform-style: preserve-3d; } .ring-rotator{ position:absolute; top:0; left:0; width:0; height:0; transform-style: preserve-3d; will-change: transform; } .ring-tile{ position:absolute; transform-style: preserve-3d; overflow:hidden; border-radius:2px; box-shadow: 0 20px 46px rgba(17,17,19,.16), 0 0 0 1px rgba(17,17,19,.07); transition: opacity .5s var(--ease), transform .55s var(--ease), box-shadow .5s var(--ease); cursor:none; } .ring-tile img{ width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; } .ring-tile.is-dim{ opacity:.25; } .ring-tile.is-focus{ box-shadow: 0 40px 100px rgba(0,0,0,.7); z-index:9; } /* 點擊放大滿版的克隆 */ .ring-zoom{ position:fixed; z-index:70; overflow:hidden; border-radius:2px; box-shadow:0 30px 90px rgba(17,17,19,.22), 0 0 0 1px rgba(17,17,19,.06); transition: all .72s cubic-bezier(.7,.02,.2,1); pointer-events:none; } .ring-zoom img{ width:100%; height:100%; object-fit:cover; } .ring-center{ position:absolute; left:0; top:0; transform:translate(-50%,-50%) translateZ(0); z-index:5; text-align:center; pointer-events:none; color:var(--fg); width:min(88vw,560px); } .ring-center .lead{ font-size: clamp(16px, 1.8vw, 22px); font-weight:400; line-height:1.7; letter-spacing:-.005em; opacity:.9; } @keyframes fadeIn{ to{ opacity:1; } } /* ============ Landing 封面輪播（滿版章節封面） ============ */ .cover-stage{ position:absolute; inset:0; z-index:8; opacity:0; visibility:hidden; pointer-events:none; transition: opacity .7s var(--ease); } .landing.cover-on .cover-stage{ opacity:1; visibility:visible; pointer-events:auto; } .landing.cover-on .ring-scene{ opacity:0; transition:opacity .7s var(--ease); } .cover-media{ position:absolute; inset:0; overflow:hidden; cursor:none; } .cover-media img{ width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); transition: opacity .8s var(--ease), transform 6.4s linear; } .cover-media.show img{ opacity:1; transform:scale(1); } .cover-media::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 62%, rgba(0,0,0,.5) 100%); } .cover-num{ position:fixed; left:var(--edge); bottom:var(--edge); z-index:9; font-size:15px; font-weight:600; color:#fff; mix-blend-mode:difference; } .cover-title{ position:fixed; left:50%; bottom:var(--edge); transform:translateX(-50%); z-index:9; font-size:15px; font-weight:500; letter-spacing:.02em; color:#fff; mix-blend-mode:difference; } .cover-nav{ position:fixed; right:var(--edge); bottom:var(--edge); z-index:9; display:flex; gap:22px; font-size:20px; line-height:1; } .cover-nav button{ color:#fff; mix-blend-mode:difference; transition:transform .3s var(--ease); } .cover-nav .cv-prev:hover{ transform:translateX(-4px); } .cover-nav .cv-next:hover{ transform:translateX(4px); } /* Small Graphic 封面：深底＋滑鼠軌跡生圖（Landing 本身已是黑底，這裡沿用同色，避免淡出瞬間露出色差） */ .cover-media.is-trail{ background:#0a0a0b; } .cover-media.is-trail img{ opacity:0 !important; } .cover-trail{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; } .cover-trail .trail-img{ position:absolute; height:auto; border-radius:2px; opacity:0; transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(.62); transition:opacity .5s var(--ease), transform .6s var(--ease); box-shadow:0 24px 60px rgba(0,0,0,.5); } .cover-trail .trail-img.in{ opacity:1; transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1); } .cover-trail .trail-img.out{ opacity:0; transition:opacity .7s var(--ease); } /* Landing 手機版（2026-07-19 改版）：不再是獨立的簡化版視圖，.landing.is-mobile 是同一顆 renderLanding() 產生的同一份 DOM（.ring-scene/.ring-space/.ring-rotator/.ring-tile/.cover-stage 全部共用），只差 JS 那邊疊的 CFG.ringMobileOverride 尺寸／手感，和這裡幾條觸控必要的 CSS 覆寫。 手機專屬的 .landing-m／.lm-card／.ring-scene-m／.rt-cap 那套「迷你環形牆」實作已整個拆除， 避免跟這套「完全比照桌機」的新做法兩套並存。*/ .landing.is-mobile{ touch-action:none; } /* 12 面環角度間隔較密，轉到背面時理論上桌機也會有「圖片鏡像」，但桌機螢幕大、很少人會盯著背面看； 手機環貼臉看得更清楚，限定在 .is-mobile 底下隱藏背面，桌機 .ring-tile 完全不受影響 */ .landing.is-mobile .ring-tile{ backface-visibility:hidden; -webkit-backface-visibility:hidden; } /* ============ 章節：直向編輯頁 ============ */ .chapter-v{ overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; } /* 進場動效：fade + 上移，一次性 */ .reveal{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease); } .reveal.in{ opacity:1; transform:none; } /* 章節開場（滿版） */ .chv-open{ min-height:100vh; padding: calc(var(--edge) + 40px) var(--edge) var(--edge); display:flex; flex-direction:column; justify-content:center; position:relative; max-width:1500px; margin:0 auto; } .chv-open .big-num{ font-size: clamp(96px, 24vw, 360px); font-weight:600; line-height:.82; letter-spacing:-.04em; } .chv-open .ch-label{ margin-top:.25em; font-size: clamp(20px, 2.6vw, 38px); font-weight:400; } .chv-open .ch-label .paren{ opacity:.5; } .chv-open .ch-label .zh{ opacity:.75; margin-left:.5em; } .chv-open .ch-intro{ margin-top:2em; max-width:70ch; display:grid; grid-template-columns:1fr 1fr; gap: clamp(24px,4vw,64px); } .chv-open .ch-intro .zh{ font-size: clamp(15px,1.5vw,19px); line-height:1.9; opacity:.82; } .chv-open .ch-intro .en{ font-size:14px; line-height:1.85; opacity:.5; } .chv-open .ch-scroll-hint{ margin-top:2.6em; font-size:12px; letter-spacing:.14em; color:var(--muted); } /* 專案區塊 */ .proj{ position:relative; } .proj-hero{ width:100%; height: clamp(70vh, 92vh, 100vh); overflow:hidden; background:rgba(17,17,19,.05); } .proj-hero img{ width:100%; height:100%; object-fit:cover; } .proj-text{ max-width:1500px; margin:0 auto; padding: clamp(40px,7vh,86px) var(--edge) clamp(24px,4vh,48px); display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(24px,5vw,90px); align-items:start; } .proj-text .idx{ font-size:13px; color:var(--muted); letter-spacing:.05em; } .proj-text .t-en{ font-size: clamp(28px,3.4vw,54px); font-weight:600; line-height:1.02; letter-spacing:-.02em; margin-top:.5em; } .proj-text .t-zh{ font-size: clamp(15px,1.5vw,20px); opacity:.7; margin-top:.5em; } .proj-text .t-year{ font-size:13px; color:var(--muted); margin-top:.7em; letter-spacing:.05em; } .proj-text .desc{ font-size:15px; line-height:1.9; opacity:.78; white-space:pre-line; } /* 2026-07-19：標題左欄（.col-l）現在是進專案子頁的入口，包成 ——grid item 會自動 blockify，不用另外設 display，這裡明講一次求保險。↗ 提示常駐半透明可見（觸控沒有 hover 也看得到能點），hover／:active 一起變亮位移。 */ .proj-text a.col-l{ display:block; } .proj-text a.col-l:hover, .proj-text a.col-l:active{ opacity:.7; } .proj-text .t-en .pp-go{ display:inline-block; font-size:.5em; opacity:.35; margin-left:.35em; transition:opacity .25s, transform .25s; } .proj-text a.col-l:hover .pp-go, .proj-text a.col-l:active .pp-go{ opacity:1; transform:translate(3px,-3px); } /* 版式：滿版單圖 / 兩欄 */ .pfull{ width:100%; padding: clamp(6px,1.2vh,16px) 0; background:rgba(17,17,19,.05); } /* 2026-07-19 複驗修正：圖片跑 lazyImg（IntersectionObserver 進視窗才給 src），沒有 src 期間 img 沒有內建尺寸、盒子直接塌成 0 高，捲到那裡再彈出一塊圖片高度，scrollHeight 一路跳動。site-data 沒有圖片寬高資料（不能算精準 aspect-ratio），改用合理 min-height 佔位先撐住空間；載入後 height:auto 讓真實比例接手，min-height 只當地板不強制裁切； 淡入靠既有 img.lazy/.loaded opacity transition（見下方），兩者合起來讓「捲到哪裡都不會 憑空跳出一塊」。 */ .pfull img{ width:100%; height:auto; display:block; min-height: clamp(240px, 42vh, 640px); } .pcols{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(6px,1vw,16px); padding: clamp(28px,5vh,64px) 0; align-items:stretch; } .pcols .cell{ height: clamp(46vh,58vh,64vh); overflow:hidden; background:rgba(17,17,19,.05); } /* 2026-07-19 二期「版面控制」：left——圖靠左一欄，右側留白（桌機約 50% 寬）； 手機退整欄，見 @media(max-width:760px) 覆寫。 */ .pleft{ padding: clamp(40px,9vh,110px) var(--edge); } .pleft-inner{ width:50%; min-width:280px; max-width:800px; } .pleft-inner img{ width:100%; height:auto; display:block; min-height: clamp(220px, 38vh, 560px); background:rgba(17,17,19,.05); } .pcols .cell img{ width:100%; height:100%; object-fit:cover; } /* 影片 */ .proj-video{ width:100%; padding: clamp(10px,2vh,24px) 0; background:#000; } .proj-video .box{ width:100%; max-width:1500px; margin:0 auto; aspect-ratio:16/9; } .proj-video iframe{ width:100%; height:100%; border:0; display:block; } /* 行內橫向廊（圖 ≥ 10） */ .hgallery{ position:relative; height:72vh; margin: clamp(24px,4vh,48px) 0; } .hgallery-track{ height:100%; display:flex; align-items:center; gap: clamp(14px,2vw,34px); overflow-x:auto; overflow-y:hidden; padding: 0 var(--edge); scrollbar-width:none; scroll-behavior:auto; } .hgallery-track::-webkit-scrollbar{ display:none; } .hgallery-track.grabbing{ cursor:none; } .hgallery .g-fig{ flex:0 0 auto; height:82%; display:flex; align-items:center; } .hgallery .g-fig img{ height:100%; width:auto; object-fit:contain; box-shadow:0 0 0 1px rgba(17,17,19,.07); } .hgallery .g-bar{ position:absolute; left:var(--edge); right:var(--edge); bottom:4px; display:flex; align-items:center; justify-content:space-between; pointer-events:none; font-size:13px; letter-spacing:.06em; color:var(--muted); } .hgallery .g-arrows{ display:flex; gap:18px; pointer-events:auto; } .hgallery .g-arrows button{ font-size:22px; line-height:1; opacity:.8; transition:opacity .25s, transform .3s var(--ease); cursor:none; } .hgallery .g-arrows button:hover{ opacity:1; } .hgallery .g-prog .cur{ color:var(--fg); font-weight:600; } /* 章尾 Next Chapter（2026-07-19 第四輪：Yen 真機回饋——份量太客氣，整組放大成「章節收尾大招牌"， 小字標籤／大字章名／中文說明／箭頭全組等比放大；手機的字級另外在 @media(max-width:760px) 覆寫， 因為手機最長章名「Small Graphic」＋中文＋箭頭要另外算安全上限，不能直接沿用桌機 clamp，見下方。） */ .chv-next{ min-height:62vh; display:flex; flex-direction:column; justify-content:center; padding: var(--edge) var(--edge) calc(var(--edge) + 72px); max-width:1600px; margin:0 auto; } .chv-next .lbl{ font-size:15px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:.6em; } .chv-next a.nx{ font-size: clamp(52px,11vw,168px); font-weight:600; letter-spacing:-.03em; line-height:.95; display:inline-flex; align-items:center; gap:.2em; width:max-content; cursor:none; transition: opacity .3s; } .chv-next a.nx .zh{ font-size:.28em; opacity:.6; align-self:flex-end; margin-bottom:.4em; } .chv-next a.nx:hover{ opacity:.6; } .chv-next a.nx .arw{ transition: transform .4s var(--ease); } .chv-next a.nx:hover .arw{ transform:translateX(16px); } /* ============ 專案獨立子頁（2026-07-19 新增） ============ 標題區／中文說明是子頁專屬的新區塊；圖片主體沿用上面已有的 .proj-hero／ .proj-loose／.pcols／.pfull，頁尾沿用 .chv-next，不重複定義。 */ .proj-page-head{ max-width:1500px; margin:0 auto; padding: clamp(40px,7vh,86px) var(--edge) clamp(20px,3vh,32px); } .proj-page-head .pp-back{ display:inline-flex; align-items:baseline; gap:.5em; font-size:13px; letter-spacing:.05em; color:var(--muted); transition:opacity .25s; } .proj-page-head .pp-back .zh{ opacity:.85; } .proj-page-head .pp-back:hover, .proj-page-head .pp-back:active{ opacity:.55; } .proj-page-head .pp-en{ font-size: clamp(40px,7vw,120px); font-weight:600; letter-spacing:-.03em; line-height:.98; margin-top:.5em; } .proj-page-head .pp-zh{ font-size: clamp(17px,1.8vw,24px); opacity:.7; margin-top:.4em; } .proj-page-head .pp-meta{ font-size:13px; color:var(--muted); letter-spacing:.03em; margin-top:.9em; } .proj-page-desc{ max-width:1500px; margin:0 auto; padding: 0 var(--edge) clamp(40px,6vh,72px); } .proj-page-desc .ppd-zh{ font-size:16px; line-height:1.95; opacity:.82; white-space:pre-line; max-width:70ch; } .proj-page-desc .ppd-en{ font-size:14px; line-height:1.85; opacity:.5; white-space:pre-line; max-width:70ch; margin-top:1.4em; } /* 頁尾：借用 .chv-next 的招牌樣式，.pp-return 是子頁多加的「回到章節」小字連結 */ .proj-foot .pp-return{ display:inline-flex; align-items:baseline; gap:.5em; font-size:14px; color:var(--muted); opacity:.85; transition:opacity .25s; margin-bottom:2.2em; } .proj-foot .pp-return .zh{ opacity:.85; } /* 2026-07-19：.chv-next a.nx 原本只給 6 個固定短章名用（Branding／Identity…）， width:max-content 保證單行不換行沒問題；換成專案標題後長度變化很大（實測撞到 「eslite songyan DM design」「Rotary Satellite Club of Hwa Jen Brand Leadership」 這種長標題，桌機也會被裁到看不見），這裡窄化字級上限＋放行自動換行當安全網， 短標題視覺上跟章節頁 NEXT CHAPTER 還是同一個量級，只是不再賭「絕對不會太長」。 */ .proj-foot a.nx{ font-size: clamp(26px, 4.6vw, 68px); width:auto; max-width:100%; white-space:normal; overflow-wrap:break-word; flex-wrap:wrap; row-gap:.15em; } .proj-foot .pp-return:hover, .proj-foot .pp-return:active{ opacity:.55; } /* ============ Small Graphic 散落圖牆 ============ */ /* 2026-07-12：06 章跟 Landing／Index 一樣黑底（其餘章節維持白） */ .scatter{ background:#0a0a0b; color:#f3f2ef; overflow:hidden; cursor:grab; --fg:#f3f2ef; --muted:rgba(243,242,239,.55); --hairline:rgba(243,242,239,.16); } .scatter.grabbing{ cursor:grabbing; } .scatter-field{ position:absolute; top:0; left:0; will-change:transform; transform-origin:0 0; } .sg-tile{ position:absolute; left:0; top:0; box-shadow:0 14px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(243,242,239,.1); transition: opacity .6s var(--ease); opacity:0; } .sg-tile img{ width:100%; height:auto; display:block; pointer-events:none; } .scatter-hint{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:25; font-size:15px; letter-spacing:.04em; color:var(--fg); display:flex; align-items:center; gap:.5em; pointer-events:none; transition:opacity .5s; opacity:.85; } .scatter-hint .dot{ width:8px;height:8px;border-radius:50%;background:var(--fg);display:inline-block; } .scatter-tools{ position:fixed; left:var(--edge); bottom:calc(var(--edge) + 38px); z-index:30; display:flex; gap:26px; font-size:14px; } .scatter-tools button{ display:flex; align-items:center; gap:.5em; opacity:.85; transition:opacity .25s, background .2s; /* 2026-07-19：桌機 Reset／Shuffle 之前是素文字，Yen 真機回饋要跟手機一致的圓形 pill 外框 可按提示（手機那組樣式見下方 @media(max-width:760px) .scatter-tools button，這裡直接沿用 同一組數值，讓兩邊按鈕感一致；手機那邊的宣告保留不動，數值相同疊加無副作用）。 */ padding:.5em .95em; border:1px solid var(--hairline); border-radius:999px; background:rgba(243,242,239,.06); } .scatter-tools button:hover{ opacity:1; } .scatter-tools button:active{ background:rgba(243,242,239,.16); } /* 目前陣型小字標示（繁中＋英文） */ .scatter-tools .sg-fmt-label{ display:flex; align-items:center; font-size:12px; letter-spacing:.04em; color:var(--muted); opacity:1; cursor:default; } /* ============ About ============ */ /* 2026-07-14：About 改黑底淺字（跟 Landing／06／Index 同一套暗色變數覆寫，見 .overlay 的寫法） */ .about{ overflow-y:auto; -webkit-overflow-scrolling:touch; background:#0b0d10; color:#f3f2ef; --fg:#f3f2ef; --muted:rgba(243,242,239,.55); --hairline:rgba(243,242,239,.16); } .about-inner{ min-height:100%; padding: calc(var(--edge) + 60px) var(--edge) calc(var(--edge) + 40px); display:grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: clamp(32px, 6vw, 100px); align-items:start; max-width:1400px; margin:0 auto; } .about-photo img{ width:100%; border-radius:2px; } .about-photo .paren{ margin-top:1.2em; font-size:13px; color:var(--muted); } .about-body h1{ font-size: clamp(32px,5vw,68px); font-weight:600; line-height:1.02; letter-spacing:-.03em; margin-bottom:.7em; } .about-sec{ margin-bottom:2.6em; } .about-sec h2{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:1em; font-weight:600; } .about-sec p{ font-size:15px; line-height:1.9; opacity:.82; white-space:pre-line; } .about-sec ul{ list-style:none; } .about-sec li{ font-size:14px; line-height:1.7; opacity:.78; padding:.5em 0; border-bottom:1px solid var(--hairline); display:flex; gap:1.2em; } .about-sec li .yr{ flex:0 0 auto; width:7em; white-space:nowrap; color:var(--muted); } .about-links{ display:flex; flex-wrap:wrap; gap:1.4em; margin-top:.4em; } .about-links a{ font-size:14px; border-bottom:1px solid var(--hairline); padding-bottom:2px; transition:border-color .25s, opacity .25s; } .about-links a:hover{ border-color:var(--fg); } /* ============ Index 目錄浮層 ============ */ /* 2026-07-12：Index 黑底淺字（跟 Landing 同一套暗色變數覆寫） */ .overlay{ position:fixed; inset:0; z-index:60; background: rgba(10,10,11,.94); color:#f3f2ef; --fg:#f3f2ef; --muted:rgba(243,242,239,.55); --hairline:rgba(243,242,239,.16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s; } .overlay.open{ opacity:1; visibility:visible; } .index-inner{ position:absolute; inset:0; padding: clamp(80px,12vh,160px) var(--edge); display:flex; flex-direction:column; justify-content:center; gap:.1em; } .index-row{ display:flex; align-items:baseline; gap:1.2em; padding:.18em 0; color:var(--fg); opacity:.55; transition:opacity .3s var(--ease), transform .4s var(--ease); cursor:pointer; width:max-content; max-width:100%; } .index-row:hover{ opacity:1; transform:translateX(14px); } .index-row .n{ font-size: clamp(14px,1.4vw,17px); color:var(--muted); width:2.4em; flex:0 0 auto; } .index-row .en{ position:relative; font-family:inherit; font-size: clamp(34px,6vw,76px); font-weight:600; letter-spacing:-.01em; line-height:1.02; transition: color .2s var(--ease); } /* 預設無襯線（現有黑體體系）；hover 才交叉淡入 Playfair Display 斜體（::after 絕對定位疊字，不佔版面、不會頂到別行） */ .index-row .en::after{ content: attr(data-en); position:absolute; left:0; top:0; white-space:nowrap; pointer-events:none; font-family: var(--font-display-en); font-style:italic; font-weight:600; letter-spacing:-.01em; color:var(--fg); opacity:0; transition: opacity .2s var(--ease); } .index-row:hover .en{ color:transparent; } .index-row:hover .en::after{ opacity:1; } .index-row .zh{ font-size: clamp(14px,1.4vw,18px); opacity:.6; } /* .idx-title 包住 en+zh：讓 zh 換行時對齊 en 的左緣（跟 .n 這個編號欄無關）， 桌機寬度夠不會觸發換行，這條規則本身無感；換行行為只在手機媒體查詢裡開 flex-wrap */ .index-row .idx-title{ display:flex; align-items:baseline; gap:1.2em; } .index-close{ position:fixed; top:var(--edge); right:var(--edge); font-size:28px; line-height:1; color:var(--fg); opacity:.8; transition:opacity .25s, transform .3s var(--ease); z-index:61; } .index-close:hover{ opacity:1; transform:rotate(90deg); } /* ============ Loading 轉場 ============ */ .loader{ position:fixed; inset:0; z-index:80; background:var(--bg); opacity:0; visibility:hidden; transition:background-color var(--bg-dur) var(--ease); } .loader.show{ opacity:1; visibility:visible; transition:none; } .loader-pct{ position:absolute; left:var(--edge); bottom:calc(var(--edge) - 20px); font-size: clamp(90px,18vw,240px); font-weight:600; letter-spacing:-.04em; line-height:.8; color:var(--fg); } .loader-word{ position:absolute; right:var(--edge); bottom:calc(var(--edge) - 20px); font-size: clamp(90px,18vw,240px); font-weight:600; letter-spacing:-.04em; line-height:.8; color:var(--muted); } /* 手機版兩組字原本各佔左右角、字級一樣大（clamp 最小值 90px），窄螢幕塞不下疊在一起—— 見 @media(max-width:760px) 裡的 .loader-pct/.loader-word 覆寫，改成同一個左下角上下疊放 */ .loader-next{ position:fixed; top:calc(var(--edge) + 40px); right:var(--edge); font-size:13px; color:var(--muted); letter-spacing:.06em; } /* ============ 章節節奏區塊（宣言頁／呼吸頁／更多作品） ============ */ /* 大字宣言頁（紙白） */ .chv-statement{ min-height:82vh; display:flex; align-items:center; padding: 10vh var(--edge); } .chv-statement .stmt{ font-size: clamp(30px, 5.4vw, 76px); font-weight:600; letter-spacing:-.03em; line-height:1.08; max-width: 20ch; color:var(--fg); } /* 留白呼吸頁（紙白） */ .chv-breather{ min-height:60vh; display:flex; align-items:center; justify-content:center; padding: 8vh var(--edge); } .chv-breather .brl{ font-size: clamp(14px, 1.5vw, 18px); letter-spacing:.06em; color:var(--muted); text-align:center; } /* 更多作品（未精選純文字清單） */ .chv-more{ padding: 12vh var(--edge) 8vh; max-width:1200px; margin:0 auto; } .chv-more .more-h{ font-size: clamp(20px,2.4vw,32px); font-weight:600; letter-spacing:-.02em; margin-bottom:1.4em; } .chv-more .more-h .zh{ font-size:.5em; opacity:.55; margin-left:.5em; font-weight:400; } .chv-more .more-row{ display:flex; align-items:baseline; gap:1em; padding:1.05em 0; border-top:1px solid var(--hairline); cursor:pointer; transition:opacity .2s; } .chv-more .more-row:last-child{ border-bottom:1px solid var(--hairline); } .chv-more .more-row:hover, .chv-more .more-row:active{ opacity:.6; } .chv-more .more-row.open{ opacity:1; } .chv-more .mr-en{ font-size: clamp(17px,2vw,26px); font-weight:500; letter-spacing:-.01em; } .chv-more .mr-zh{ font-size:14px; opacity:.55; } .chv-more .mr-year{ margin-left:auto; font-size:13px; color:var(--muted); letter-spacing:.04em; } /* 2026-07-19 第五輪回饋：點列＝行內展開圖組、點 ↗＝進子頁，兩個目標並存（見 app.js buildMoreList）。第六輪：↗ 提示不夠明顯，Yen 拍板改「View ↗」藥丸——沿用 Reset/Shuffle 建立的「pill＝可按」慣例（hairline 框），預設就看得見，不再等 hover 才現身。 .more-row 的 click/keydown 對這顆按鈕 stopPropagation，兩邊互不誤觸（見 buildMoreList）。 */ .chv-more .mr-go{ font-size:13px; letter-spacing:.04em; opacity:.75; margin-left:.6em; transition:opacity .25s, background-color .2s; display:inline-flex; align-items:center; justify-content:center; gap:.35em; padding:.45em .9em; border:1px solid var(--hairline); border-radius:999px; } .chv-more .mr-go .mr-go-arrow{ transition:transform .25s; } .chv-more .more-row:hover .mr-go{ opacity:1; } .chv-more .mr-go:hover, .chv-more .mr-go:focus-visible{ opacity:1; background:rgba(17,17,19,.06); } .chv-more .mr-go:hover .mr-go-arrow{ transform:translate(2px,-2px); } .chv-more .mr-go:active{ background:rgba(17,17,19,.12); } /* 滑鼠跟隨的作品縮圖（lerp 跟隨，見 app.js） */ .more-thumb-float{ position:fixed; top:0; left:0; width:220px; height:150px; z-index:15; pointer-events:none; overflow:hidden; border-radius:2px; opacity:0; box-shadow:0 20px 50px rgba(17,17,19,.18), 0 0 0 1px rgba(17,17,19,.07); transition:opacity .25s var(--ease); will-change:transform; } .more-thumb-float.show{ opacity:1; } .more-thumb-float img{ width:100%; height:100%; object-fit:cover; } /* 點擊展開：該作品完整圖組（行內攤開） */ .more-expand{ overflow:hidden; max-height:0; opacity:0; transition:max-height .42s var(--ease), opacity .34s var(--ease); display:flex; gap:12px; flex-wrap:nowrap; overflow-x:auto; padding:0 0 0; scrollbar-width:none; cursor:grab; } .more-expand::-webkit-scrollbar{ display:none; } .more-expand.open{ max-height:34vh; opacity:1; padding:14px 0 22px; } .more-expand.grabbing{ cursor:grabbing; } .more-expand .me-fig{ flex:0 0 auto; height:30vh; display:flex; align-items:center; } .more-expand .me-fig img{ height:100%; width:auto; object-fit:contain; box-shadow:0 0 0 1px rgba(17,17,19,.07); } /* ============ Small Graphic lightbox（右側縮圖直欄） ============ */ .lightbox{ position:fixed; inset:0; z-index:90; background:rgba(6,6,7,.94); opacity:0; visibility:hidden; transition:opacity .32s var(--ease); } .lightbox.open{ opacity:1; visibility:visible; } .lightbox .lb-stage{ position:absolute; left:0; top:0; bottom:0; right:132px; display:flex; align-items:center; justify-content:center; padding: calc(var(--edge) + 22px) var(--edge) calc(var(--edge) + 34px); } .lightbox .lb-media{ display:flex; } .lightbox .lb-media img{ max-width:100%; max-height:78vh; width:auto; height:auto; object-fit:contain; box-shadow:0 40px 120px rgba(0,0,0,.6); } .lightbox .lb-back{ position:fixed; top:var(--edge); left:var(--edge); z-index:2; font-size:14px; letter-spacing:.02em; color:#f3f2ef; opacity:.85; transition:opacity .25s; } .lightbox .lb-back:hover{ opacity:1; } .lightbox .lb-foot{ position:fixed; left:var(--edge); bottom:var(--edge); z-index:2; display:flex; align-items:center; gap:1.5em; color:#f3f2ef; } .lightbox .lb-prog{ font-size:13px; letter-spacing:.05em; color:rgba(243,242,239,.6); font-variant-numeric:tabular-nums; } .lightbox .lb-prog .cur{ color:#f3f2ef; font-weight:600; } .lightbox .lb-arrows{ display:flex; gap:16px; } .lightbox .lb-arrows button{ font-size:24px; line-height:1; color:#f3f2ef; opacity:.75; transition:opacity .25s, transform .3s var(--ease); } .lightbox .lb-arrows button:hover{ opacity:1; } .lightbox .lb-prev:hover{ transform:translateX(-3px); } .lightbox .lb-next:hover{ transform:translateX(3px); } .lightbox .lb-thumbs{ position:absolute; top:0; right:0; bottom:0; width:132px; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:8px; padding: var(--edge) 14px var(--edge); background:rgba(0,0,0,.32); } .lightbox .lb-thumbs::-webkit-scrollbar{ width:6px; } .lightbox .lb-thumbs::-webkit-scrollbar-thumb{ background:rgba(243,242,239,.22); border-radius:3px; } .lightbox .lb-thumb{ flex:0 0 auto; width:100%; aspect-ratio:1/1; overflow:hidden; border-radius:2px; opacity:.42; outline:1px solid transparent; outline-offset:-1px; transition:opacity .25s, outline-color .25s; background:#161618; } .lightbox .lb-thumb img{ width:100%; height:100%; object-fit:cover; } .lightbox .lb-thumb:hover{ opacity:.8; } .lightbox .lb-thumb.active{ opacity:1; outline-color:#f3f2ef; } /* lightbox 開啟時，游標可見（散落牆平時 cursor:none） */ html.lb-active .scatter{ cursor:default; } /* ============ 章節新版式：留白大圖／純文字塊／Shuffle Sets ============ */ /* 留白大圖：置中、四周大留白（不滿版） */ .proj-loose{ display:flex; align-items:center; justify-content:center; padding: clamp(40px,9vh,110px) var(--edge); } /* 2026-07-19 複驗修正：同 .pfull img，lazyImg 載入前給地板高度防塌陷（見上方註解）， min(62vw,900px) 寬度不變，不影響原本置中留白的版式。 */ .proj-loose img{ width: min(62vw, 900px); height:auto; display:block; min-height: clamp(220px, 38vh, 560px); } /* 純文字區塊（紙白底、大量留白） */ .chv-para{ min-height:70vh; display:flex; flex-direction:column; justify-content:center; padding: 12vh clamp(28px,10vw,180px); } .chv-para .para-k{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; opacity:.5; margin-bottom:1.4em; } .chv-para .para-b{ font-size: clamp(20px,2.6vw,34px); line-height:1.7; max-width:20em; letter-spacing:-.01em; } /* Shuffle Sets 橫向輪播 */ .chv-shuffle{ position:relative; height:46vh; margin: clamp(14px,3vh,40px) 0; overflow:hidden; } .chv-shuffle .shf-viewport{ position:absolute; inset:0; overflow:hidden; } .chv-shuffle .shf-track{ display:flex; gap:18px; height:100%; align-items:center; padding:0 18px; width:max-content; will-change:transform; transition:opacity .34s var(--ease); } .chv-shuffle.swap .shf-track{ opacity:0; } .chv-shuffle .shf-fig{ flex:0 0 auto; height:80%; display:flex; align-items:center; } .chv-shuffle .shf-fig img{ height:100%; width:auto; object-fit:contain; box-shadow:0 0 0 1px rgba(17,17,19,.07); } .chv-shuffle .shf-label{ position:absolute; left:var(--edge); top:14px; z-index:2; display:flex; align-items:baseline; gap:.6em; pointer-events:none; transition:opacity .34s var(--ease); } .chv-shuffle.swap .shf-label{ opacity:0; } .chv-shuffle .shf-label .en{ font-size:14px; font-weight:600; letter-spacing:.02em; } .chv-shuffle .shf-label .zh{ font-size:12px; opacity:.55; } .chv-shuffle .shf-reload{ position:absolute; right:calc(var(--edge) - 8px); top:2px; z-index:2; width:40px; height:40px; display:flex; align-items:center; justify-content:center; /* 2026-07-19 第三輪：Yen 附截圖回饋——上一輪對齊箭頭的 20px 桌機還是看起來太小， 他要的是「跟手機版一樣放大的明顯程度」（手機版 44px 觸控件／30px 圖示，見下方 手機 media query），不是跟箭頭字級對齊。桌機沒有觸控精度限制，用 40px 點擊範圍／ 32px 圖示做同等量級的放大，視覺份量跟右下 ←→ 箭頭相稱、不再是小不點。 */ font-size:32px; line-height:1; opacity:.8; transition:opacity .25s, transform .5s var(--ease); } .chv-shuffle .shf-reload:hover{ opacity:1; transform:rotate(180deg); } /* ============ Index 底部資訊列（時間＋社群） ============ */ .index-foot{ position:fixed; left:0; right:0; bottom:0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding: 0 var(--edge) calc(var(--edge) - 2px); font-size:12px; letter-spacing:.04em; color:var(--muted); pointer-events:none; } .index-foot > *{ flex:1 1 0; } .index-foot .if-left{ display:none; } /* 時間移到左下，與類別清單左緣（版心邊距）對齊 */ .index-foot .if-time{ order:-1; flex:0 0 auto; text-align:left; font-variant-numeric:tabular-nums; } .index-foot .if-social{ flex:1 1 auto; display:flex; gap:1.2em; justify-content:flex-end; pointer-events:auto; } .index-foot .if-social a{ transition:color .25s, opacity .25s; opacity:.75; } .index-foot .if-social a:hover{ opacity:1; color:var(--fg); } /* ============ 進場淡入 ============ */ .view{ animation: viewIn .6s var(--ease); } @keyframes viewIn{ from{ opacity:0; } to{ opacity:1; } } /* lazy 圖片載入 */ img.lazy{ opacity:0; transition:opacity .6s var(--ease); } img.lazy.loaded{ opacity:1; } /* ============ 自訂游標（全站） ============ */ #cursor{ position:fixed; top:0; left:0; z-index:200; pointer-events:none; width:10px; height:10px; border-radius:999px; background:#fff; mix-blend-mode:difference; transform:translate(-50%,-50%); transition: width .28s var(--ease), height .28s var(--ease), padding .28s var(--ease), background-color .2s, opacity .2s; display:flex; align-items:center; justify-content:center; gap:.5em; white-space:nowrap; overflow:hidden; font-size:14px; font-weight:500; letter-spacing:0; color:#0a0a0b; will-change: transform; } #cursor .c-dot{ width:8px; height:8px; border-radius:50%; background:#0a0a0b; flex:0 0 auto; opacity:0; transition:opacity .2s; } #cursor .c-label{ max-width:0; opacity:0; transition:max-width .3s var(--ease), opacity .2s; } #cursor.hidden{ opacity:0; } /* 一般互動元素：放大成圓 */ #cursor.grow{ width:44px; height:44px; background:#fff; } /* 環形縮圖：展開膠囊 ● Explore 章名 */ #cursor.explore{ width:auto; height:38px; padding:0 18px; border-radius:999px; background:#fff; } #cursor.explore .c-dot{ opacity:1; } #cursor.explore .c-label{ max-width:240px; opacity:1; } html.cursor-on, html.cursor-on *{ cursor:none !important; } /* ============ 行動版（直向堆疊） ============ */ @media (max-width: 760px){ :root{ --edge: 18px; /* 2026-07-18：手機版文字整體盤點放大一階（Yen 真機閱讀回饋：現在都偏小）。 常用的幾檔字級集中定義在這裡，各元件盡量引用，避免散點各自調、大小失衡； clamp() 已隨版寬縮放的大標題不在此列，這組只管小字／說明／meta。 */ --fs-m-meta: 14px; /* 極小輔助字：年份、index-foot 時間/社群連結、about 連結、小標籤 */ --fs-m-num: 18px; /* 編號類：Index 左側 01-06 */ --fs-m-zh: 17px; /* 中文說明／內文段落：index 說明、desc、about 內文、breather 類別標籤 */ } .chrome-name .zh{ display:none; } /* 2026-07-18：Yen 真機驗收回饋——原本的漸層墊底方案（上下都淡出）改掉： 上方 bar（站名／Index）改用「跟頁面底色一致的實色」直接蓋住捲過去的內文，不要漸層、不要淡出； 下方（章節編號／←→）不加任何墊底，直接浮在內容上（Yen 說不用）。 深底頁（Landing／06 Small Graphic／About，對應 html.corner-dark）比照該頁底色，避免出現突兀白色色塊。 （原本這裡 #chrome::after 蓋在 .chrome-chnum/.chrome-nav 之上把「01」「→」蓋糊的 bug， 隨這次直接刪除下方墊底一併解決，不用再修 stacking。） */ /* 2026-07-19：Yen 真機回饋——80px 太高、遮到太多內文。實量站名列（.chrome-name， top:18px＋文字高 23px，bottom≈41px）跟右上 Index（bottom≈37px），縮到 52px， 剛好墊住站名列＋留一點餘裕，不多蓋內容。 */ #chrome::before{ content:""; position:fixed; top:0; left:0; right:0; height:52px; background: var(--bg); pointer-events:none; } html.corner-dark #chrome::before{ background:#0a0a0b; } /* 2026-07-19：手機 Index 目錄開啟時，#chrome::before 這條實色 bar 會透過 overlay 的 94% 不透明＋blur 隱約透出來——比照 lightbox 開啟時的 html.lb-active 做法，把整組 #chrome 藏掉，關閉時 idx-active 移除即自動恢復（見 js/app.js openIndex/closeIndex）。 */ html.idx-active #chrome{ opacity:0; } html.idx-active #chrome > *{ pointer-events:none; } /* 左下章節編號（01／05…）手機字級太小，加大方便辨識（Yen 2026-07-18 真機驗收回饋，之後可再手調） */ .chrome-chnum{ font-size:22px; } /* 章節內頁右下角切章按鈕太貼螢幕邊緣，往內多留一點邊距（Yen 2026-07-19 真機回饋） */ .chrome-nav{ right: calc(var(--edge) + 6px); bottom: calc(var(--edge) + 10px); gap:20px; font-size:16px; } /* Prev／Next 改文字後，手機觸控範圍比照外框元素規格、不小於 44px 觸控高度 （Yen 2026-07-19 第四輪回饋：右下角切章改文字）；padding 撐出點擊範圍，文字仍維持左右對齊邊緣視覺 */ .chrome-nav button{ padding:14px 6px; min-height:44px; } /* Landing 首頁：手機沿用桌機的環形牆＋idle 封面輪播（見 js/app.js renderLanding + CFG.ringMobileOverride）， 這裡只補觸控／窄螢幕必要的排版：中央引言字級跟著手機字級系統走，封面數字／標題別讓 mix-blend-mode 在窄螢幕上難以辨認太多，維持原樣即可，暫不需要額外覆寫。 */ .ring-center .lead{ font-size: var(--fs-m-zh); line-height:1.75; } /* Loading 轉場：桌機「47%」「Loading」分踞左右下角、字級一樣大，窄螢幕會疊在一起—— 手機改成同一個左下角、由上到下疊放（大數字在上、Loading 小字在下），保證不重疊 （Yen 2026-07-19 真機截圖回饋） */ .loader-pct{ font-size: clamp(64px,24vw,120px); bottom: calc(var(--edge) + 30px); } .loader-word{ left:var(--edge); right:auto; bottom:var(--edge); font-size:16px; letter-spacing:.08em; text-transform:uppercase; } .proj-text{ grid-template-columns:1fr; gap:1.4em; padding-top: clamp(30px,6vh,54px); } .proj-hero{ height: 56vh; } .pcols{ grid-template-columns:1fr; } .pcols .cell{ height:auto; } /* 2026-07-19 複驗修正：手機單欄改 height:auto 讓圖片維持原比例（不裁切）是對的， 但拿掉高度也拿掉了 lazyImg 載入前的地板高度，捲動時一樣會塌陷再彈出。用 min-height 補地板，height:auto 不變——不裁切的決定沒被推翻，只是不再塌成 0。 */ .pcols .cell img{ height:auto; min-height: clamp(200px, 46vh, 480px); } .chv-open .ch-intro{ grid-template-columns:1fr; gap:1.2em; } .hgallery{ height:52vh; } .about-inner{ grid-template-columns:1fr; } /* Index 目錄：章名、編號、中文說明手機字級一起放大（Yen 2026-07-18 真機截圖回饋） */ .index-row .en{ font-size:40px; } .index-row .n{ font-size: var(--fs-m-num); } .index-row .zh{ font-size: var(--fs-m-zh); } /* 2026-07-17：章名字夠長（如 Small Graphic）在窄寬度換行時，中文括號說明的空間被擠壓， 斷行斷在括號中間、只剩「）」孤伶伶浮在下一行——中文說明整組不能拆、擠不下就整組 掉到下一行（只有這種長名字才會觸發，短名字的排版不受影響）。 2026-07-19 修正：換行的容器改成 .idx-title（只包 en+zh），不是整個 .index-row（還包含 左邊 .n 編號欄）——這樣 .zh 掉到下一行時對齊的是 .en 的左緣，不會貼齊整列最左邊 （Yen 真機截圖回饋：「（日常小圖）」之前貼在螢幕最左，應該對齊 Small Graphic 的 S）。 */ .index-row .idx-title{ flex-wrap:wrap; row-gap:.1em; } .index-row .zh{ white-space:nowrap; } .chv-statement{ min-height:64vh; padding:8vh var(--edge); } .chv-statement .stmt{ font-size: clamp(26px,8vw,40px); max-width:none; } .chv-breather{ min-height:44vh; } /* 章節封面收尾類別標籤「（ Branding｜品牌識別 ）」字級太小（Yen 2026-07-18 真機驗收回饋） */ .chv-breather .brl{ font-size: var(--fs-m-zh); } .chv-more{ padding:8vh var(--edge) 6vh; } .chv-more .more-row{ flex-wrap:wrap; gap:.4em 1em; } .chv-more .mr-year{ margin-left:0; font-size: var(--fs-m-meta); } .chv-more .mr-zh{ font-size:15px; } /* 2026-07-19 第五輪回饋：↗ 手機觸控規格照站內標準（≥44px），margin-left:auto 讓它 固定貼右緣，跟左邊「點列展開」的範圍視覺上分開，不會手滑誤觸。 第六輪改「View ↗」藥丸後字級跟手機 pill 按鈕一致。 */ .chv-more .mr-go{ min-height:44px; font-size:14px; margin-left:auto; padding:10px 16px; } .proj-loose{ padding: 5vh var(--edge); } .proj-loose img{ width: 88vw; } /* left 手機退整欄，跟 proj-loose 手機規格一致 */ .pleft{ padding: 5vh var(--edge); } .pleft-inner{ width:100%; min-width:0; max-width:none; } .chv-para{ min-height:56vh; padding: 8vh var(--edge); } .chv-para .para-b{ font-size: clamp(20px,6vw,28px); } /* 2026-07-19：Yen 真機回饋——左上專案名／右上 ⟳ 離圖片太近，圖片區塊往下讓出間距。 容器加高＋圖片視窗（.shf-viewport）top 往下推，標籤／⟳ 維持原位置，兩者中間就空出 明顯間距；圖片視窗只改 top，right/bottom/left 仍吃 .shf-viewport 的 inset:0。 */ .chv-shuffle{ height:40vh; } .chv-shuffle .shf-viewport{ top:60px; } /* ⟳ 換組小圖示手機上太小點不到，放大圖示跟點擊範圍（Yen 2026-07-19 真機回饋） */ .chv-shuffle .shf-reload{ width:44px; height:44px; top:2px; right: calc(var(--edge) - 10px); font-size:30px; } /* 手機內文段落整體放大一階：章節專案說明、章節開場說明、about 內文（Yen 2026-07-18 真機閱讀回饋） */ .proj-text .desc{ font-size: var(--fs-m-zh); } .proj-text .t-year, .proj-text .idx{ font-size: var(--fs-m-meta); } .chv-open .ch-intro .zh{ font-size: var(--fs-m-zh); } .chv-open .ch-intro .en{ font-size:16px; } .about-sec p{ font-size: var(--fs-m-zh); } .about-sec li{ font-size:15px; } .about-links a{ font-size: var(--fs-m-meta); } .about-sec h2{ font-size: var(--fs-m-meta); } /* 全大寫小標籤（次要 eyebrow），輕微跟著放大，但刻意不比內文大，維持階層 */ .chv-para .para-k{ font-size:13px; } /* 章尾 Next Chapter 手機版（2026-07-19 第四輪）：小字標籤跟著放大，跟桌機一樣有份量； 大字章名改用手機專用 clamp，不沿用桌機那組（桌機 clamp 最小 52px，手機最長章名「Small Graphic」＋中文說明「日常小圖」＋箭頭三段拼起來會超版寬爆版換行——這裡用較低的 vw 與上限， 實機／375 寬量過「Small Graphic 日常小圖 →」整行都留在安全邊距內，不觸發 flex-wrap。 */ .chv-next{ min-height:56vh; padding: var(--edge) var(--edge) calc(var(--edge) + 56px); } .chv-next .lbl{ font-size:14px; } .chv-next a.nx{ font-size: clamp(30px,9.6vw,54px); gap:.16em; } .chv-next a.nx .zh{ margin-bottom:.3em; } /* 專案子頁（2026-07-19 新增）：字級一起接手機系統；.pp-back／.pp-return 是純文字 連結，額外補 padding 撐出 ≥44px 觸控高度（跟 .chrome-nav button 同一個規格）。 */ .proj-page-head{ padding-top: clamp(30px,6vh,54px); } .proj-page-head .pp-back{ padding:12px 2px; min-height:44px; } .proj-page-head .pp-en{ font-size: clamp(32px,11vw,64px); } .proj-page-head .pp-zh{ font-size: var(--fs-m-zh); } .proj-page-head .pp-meta{ font-size: var(--fs-m-meta); } .proj-page-desc .ppd-zh{ font-size: var(--fs-m-zh); } .proj-page-desc .ppd-en{ font-size:13px; } .proj-foot .pp-return{ font-size: var(--fs-m-meta); padding:12px 2px; min-height:44px; } /* 2026-07-19 複驗修正：.pp-return 補了 min-height 但 .nx（真正的 NEXT PROJECT 連結） 漏補，實測手機觸控高度只有 34.2px，低於 44px 標準。min-height + align-items:center 撐高整顆連結，不動字級與排版，視覺上只是行距多一點呼吸。 */ .proj-foot a.nx{ min-height:44px; align-items:center; } /* Small Graphic 控制列：Reset／Shuffle 是真按鈕，陣型標籤（散落／螺旋…）只是狀態顯示—— 手機上兩者長得太像分不出哪個能按（Yen 2026-07-18 真機回饋）。按鈕加 pill 外框／底色， 文字一起放大；標籤維持素面、只放大文字不加框，避免看起來也能點。 */ .scatter-tools{ font-size:16px; gap:10px; flex-wrap:wrap; row-gap:8px; } .scatter-tools button{ padding:.5em .95em; border:1px solid var(--hairline); border-radius:999px; background:rgba(243,242,239,.06); opacity:1; } .scatter-tools button:active{ background:rgba(243,242,239,.16); } /* 2026-07-19：Yen 真機回饋——陣型狀態標籤（「散落 Scatter」）之前用 var(--fs-m-zh)＝17px， 比左邊真的可以點的 Reset／Shuffle 按鈕（16px，見上方 .scatter-tools font-size）還大， 主客反了。改成明顯小於按鈕字級的 13px，維持「只是狀態顯示、不能點」的層級。 */ .scatter-tools .sg-fmt-label{ font-size:13px; } .lightbox .lb-stage{ right:0; bottom:150px; padding: calc(var(--edge) + 30px) var(--edge) var(--edge); } .lightbox .lb-foot{ bottom: calc(96px + var(--edge)); } .lightbox .lb-media img{ max-height:60vh; } .lightbox .lb-thumbs{ top:auto; left:0; right:0; bottom:0; width:auto; height:96px; flex-direction:row; padding:10px var(--edge); } .lightbox .lb-thumb{ width:auto; height:100%; aspect-ratio:1/1; } /* 左下時間／右下 Instagram·Behance 原本手機上比桌機還小（11px），改放大（Yen 2026-07-18 真機截圖回饋） */ .index-foot{ font-size: var(--fs-m-meta); flex-wrap:wrap; gap:.4em .8em; } .index-foot .if-time{ order:-1; flex-basis:auto; text-align:left; } .index-foot .if-social{ flex:1 1 auto; } }