/* ============================================================================= 深河出版 提案站 — 共用樣式 site.css 消費 design-tokens.css 的 token；各頁面 link 本檔 + tokens。 ============================================================================= */ *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;background:var(--accent);overscroll-behavior-y:none;} body{position:relative;font-family:var(--font-sans);color:var(--text-primary);background:var(--accent);overflow-x:hidden;-webkit-font-smoothing:antialiased;} /* 白色開場幕：載入初期鋪白(進場動畫在白底更淨)，短暫停留後淡出露出深藍河流。no-js/reduce 一律不顯示，避免白幕卡住 */ /* 首次進站：本工作階段第一個載入的頁面，讓該頁 hero/banner 以「霧化淡入」進場一次。 純 opacity + blur，柔和浮現、無硬邊水面、無獨立屏、無 logo 跳位。 （filter 加在 header.hero 上是安全的：它不是 fixed #water 的祖先。） site-enter class 由各頁 inline script 以 sessionStorage 控制（僅落地頁、非 reduce-motion 才加）。 起始不透明度不為 0，是 LCP 的硬性要求，不是美術偏好：LCP 演算法排除 opacity:0 的元素，而 hero 印章正是本站首頁的 LCP 元素。實測（2026-08-04，30 次量測） 起始為 0 時 LCP 比 FCP 晚約 2.3 秒，且該延遲與動畫時長無關（壓到 0.5s 也一樣）。 起始非零後 LCP 完全等於 FCP。改動這兩層動畫的起始值前必讀 docs/superpowers/evidence/2026-08-04-字型與hero動畫-LCP因子實驗.md。 注意本層與 .hero-content 那層的不透明度會相乘：各 .75／.7 時首幀有效值為 .525。 最初實作用 .4／.4 得到 .16，配上兩層 blur 後首幀幾乎全白，指標過關但使用者看不到 東西；調高起始值對 LCP 無任何損失（資格門檻只要求大於 0），故取較可見的值。 */ html.site-enter header.hero{animation:heroReveal .9s ease both;} @keyframes heroReveal{from{opacity:.75;filter:blur(8px);}to{opacity:1;filter:blur(0);}} #water{position:fixed;inset:0;width:100vw;height:100vh;z-index:1;display:block;pointer-events:none;mix-blend-mode:screen;} /* 全頁細紙紋點綴 */ .grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} /* nav */ nav{position:fixed;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:22px 6vw;z-index:40;transition:background .4s ease,padding .4s ease;} nav.scrolled{background:var(--color-nav-scrolled-bg);backdrop-filter:blur(8px);padding:14px 6vw;} .wordmark{display:inline-flex;align-items:center;color:var(--color-on-river);cursor:pointer;text-decoration:none;} .wordmark img{height:30px;width:auto;display:block;} .nav-right{display:flex;align-items:center;gap:16px;} /* 收合式全螢幕選單（全裝置一致，點擊才展開） */ .nav-links{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;background:var(--color-nav-panel-bg);backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;transform:translateY(-100%);transition:transform .6s cubic-bezier(.16,1,.3,1);z-index:45;} nav.menu-open .nav-links{transform:translateY(0);} .nav-links a{color:var(--color-on-river);text-decoration:none;text-align:center;font-family:var(--font-serif);font-size:22px;letter-spacing:5px;padding:14px 0;opacity:.9;transition:opacity .25s,color .25s;} .nav-links a:hover{opacity:1;} .nav-links a.cur{opacity:1;color:var(--color-river-accent);} /* 展開選單最上方：站內搜尋 */ .nav-search{display:flex;align-items:center;gap:10px;width:min(78vw,360px);color:var(--color-on-river);border-bottom:1px solid rgba(var(--color-on-river-rgb),.3);padding-bottom:12px;margin-bottom:34px;} .nav-search svg{opacity:.7;flex-shrink:0;} .nav-search input{flex:1;background:transparent;border:none;outline:none;color:var(--color-on-river);font-size:15px;letter-spacing:1px;font-family:var(--font-sans);} .nav-search input::placeholder{color:rgba(var(--color-on-river-rgb),.45);} .lang{display:flex;gap:2px;border:none;border-radius:999px;overflow:hidden;background:rgba(var(--color-on-river-rgb),.14);padding:3px;} .lang button{background:transparent;border:none;border-radius:999px;color:var(--color-on-river);font-size:11px;padding:5px 11px;cursor:pointer;letter-spacing:1px;opacity:.6;transition:.25s;font-family:var(--font-sans);white-space:nowrap;} .lang button.active{background:var(--color-on-river);color:var(--color-river-gradient-bottom);opacity:1;} .nav-toggle{display:flex;position:relative;z-index:46;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;background:transparent;border:none;cursor:pointer;padding:8px;} .nav-toggle span{display:block;height:2px;width:100%;background:var(--color-on-river);border-radius:2px;transition:transform .3s ease,opacity .3s ease;} nav.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);} nav.menu-open .nav-toggle span:nth-child(2){opacity:0;} nav.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* 鍵盤 focus 樣式 */ .nav-links a:focus-visible,.lang button:focus-visible, .nav-search input:focus-visible,.nav-toggle:focus-visible,.btn:focus-visible,.more-link:focus-visible, .wordmark:focus-visible,.pub-card:focus-visible, .event-card:focus-visible,.goods-card:focus-visible,.article:focus-visible, .back-link:focus-visible,.detail-cta:focus-visible,.side-feat:focus-visible{ outline:2px solid var(--color-on-river);outline-offset:3px;} .btn:focus-visible,.more-link:focus-visible,.pub-card:focus-visible, .event-card:focus-visible,.goods-card:focus-visible,.article:focus-visible, .back-link:focus-visible,.detail-cta:focus-visible,.side-feat:focus-visible{outline-color:var(--accent);outline-offset:4px;} /* demo：所有列表項目皆可點（帶 data-href 由 page-ripple 過場導頁），顯示可點游標 */ [data-href]{cursor:pointer;} /* 停用狀態 CTA（功能尚未開放的示意） */ .detail-cta.is-disabled{opacity:.5;cursor:not-allowed;} .detail-cta.is-disabled::after{display:none;} /* 首頁活動預覽卡 hover 與活動頁一致（保留上浮）；文章列維持其位移 hover */ /* hero */ .hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--color-on-river);padding:0 24px;overflow:hidden;} /* object-position 置中 50%：對齊 WebGL 水波層(.hero-ripple)的置中取景， 避免靜態底圖(44%)→WebGL(50%)淡入切換時影像往上位移的跳動感。 */ .hero-banner{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center 50%;} .hero-ripple{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;opacity:0;transition:opacity .7s ease;} .hero-ripple.is-on{opacity:1;} .hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(10,30,58,.52) 0%,rgba(15,46,80,.34) 42%,rgba(10,30,58,.66) 100%);} .hero-content{position:relative;z-index:3;} .hero .kicker{font-size:12px;letter-spacing:6px;opacity:.7;margin-bottom:30px;font-weight:300;} .hero h1{font-family:var(--font-serif);font-weight:300;font-size:clamp(56px,11vw,140px);letter-spacing:20px;text-indent:20px;line-height:1.05;} /* 首頁 hero 官方印章 Logo（單色白版，無陰影／效果，遵守手冊 b.07） */ .hero-logo{display:flex;justify-content:center;margin:0;} .hero-logo img{height:clamp(150px,26vh,280px);width:auto;display:block;} /* 子頁 hero（specificity 高於 .hero h1，避免被覆蓋） */ .hero--sub{min-height:74vh;} .hero.hero--sub h1{font-size:clamp(40px,7vw,92px);letter-spacing:12px;text-indent:12px;} /* ---- 河流導引線（走內容區塊「之後」；於水岸縫隙間露出，如岸間流水）---- */ .river-line{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;isolation:isolate;} /* isolate：不與背景水波 blend，避免混色 */ .river-line path{fill:none;stroke:#ffffff;vector-effect:non-scaling-stroke;stroke-linecap:round;} /* 純白，僅以透明度控濃淡 */ .river-base{stroke-width:1;opacity:.55;} .river-draw{stroke-width:1;opacity:.9;stroke-dashoffset:0;} /* 預設全畫好＝降階/無 scroll-timeline 時的靜態樣貌 */ .river-glow{stroke:#ffffff;stroke-width:1.2;opacity:0;} /* 流光預設隱形，下方 @supports 開啟 */ .river-head{stroke:#ffffff;stroke-width:2.2;opacity:0;stroke-linecap:round;} /* 生長最前端的「水頭」亮點（純白），隨捲往下推進 */ /* 生長：隨整頁捲動把線畫出來；流光：一縷亮點沿線流動；水頭：生長前端亮點隨捲下移 */ @keyframes river-grow{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}} @keyframes river-flow{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}} @keyframes river-head-move{0%{stroke-dashoffset:0;opacity:.95;}82%{opacity:.95;}100%{stroke-dashoffset:-1;opacity:0;}} @supports (animation-timeline: scroll()){ /* option 3：生長集中在「入場」前段（0–40% 捲動）畫出，之後靜靜流光 */ .river-draw{stroke-dasharray:1;animation:river-grow linear both;animation-timeline:scroll(root);animation-range:0% 40%;} .river-glow{opacity:.4;stroke-dasharray:0.09 0.91;animation:river-flow 3.6s linear infinite;} .river-head{stroke-dasharray:0.016 0.984;animation:river-head-move linear both;animation-timeline:scroll(root);animation-range:0% 40%;} } /* panels */ .panel{position:relative;z-index:2;background:var(--surface-paper-translucent);padding:130px 8vw;overflow:hidden;} .panel-inner{position:relative;z-index:1;max-width:1180px;margin:0 auto;} /* 區塊襯底：品牌藍圓形柔光漸層，置中淡淡襯於內容底下（客戶 07-10：幾乎不易察覺；.16 為可辨識下限，HD 07-11 定） */ .panel::after{content:"";position:absolute;width:62vw;height:62vw;max-width:780px;max-height:780px;border-radius:50%; background:radial-gradient(circle,rgba(var(--color-accent-primary-rgb),.16),transparent 66%); filter:blur(26px);pointer-events:none;z-index:0;top:50%;left:50%;transform:translate(-50%,-50%);} .sec-label{font-family:var(--font-sans);font-size:13px;letter-spacing:5px;color:var(--accent);margin-bottom:18px;display:flex;align-items:center;gap:14px;} .sec-label::before{content:"";width:34px;height:1px;background:var(--accent);} .sec-title{font-family:var(--font-serif);font-weight:500;font-size:clamp(28px,4vw,46px);color:var(--text-primary);letter-spacing:3px;line-height:1.4;margin-bottom:24px;} .spirit-text{font-size:clamp(16px,1.7vw,19px);line-height:2.4;font-weight:300;color:var(--color-text-emphasis);letter-spacing:1px;} .spirit-text .em{color:var(--accent);} /* 強調只用顏色，字體與大小同內文 */ .body-copy{font-size:16px;line-height:2.05;font-weight:400;color:var(--color-text-body);letter-spacing:.4px;} .body-copy p+p{margin-top:18px;} .more-link{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:14px;letter-spacing:1px;cursor:pointer;text-decoration:none;margin-top:30px;position:relative;padding-bottom:9px;} .more-link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--motion-ease-river);} .more-link:hover::after{transform:scaleX(1);} .reveal{opacity:0;transform:translateY(82px);filter:blur(7px);transition:opacity 1.3s var(--motion-ease-river),transform 1.85s cubic-bezier(.16,.6,.3,1),filter 1.5s var(--motion-ease-river);} .reveal.in{opacity:1;transform:translateY(0);filter:blur(0);} /* 起始不透明度 .7、無延遲：與 heroReveal 同一個 LCP 理由，見該處註解。 */ @keyframes heroSurface{from{opacity:.7;transform:translateY(34px);filter:blur(4px);}to{opacity:1;transform:translateY(0);filter:blur(0);}} .has-js .hero-content{animation:heroSurface .9s var(--motion-ease-river) 0s both;} /* 換頁淡入：用瀏覽器原生跨頁 View Transition，由瀏覽器擷取舊頁 crossfade 進新頁。 舊頁是已完整算好的畫面，故無白閃、不露藍、無 blur 暈亮。不支援的瀏覽器自動降級為一般跳頁。 */ @view-transition{ navigation: auto; } ::view-transition-old(root),::view-transition-new(root){ animation-duration:.4s; animation-timing-function:ease; } @media(prefers-reduced-motion:reduce){ html.site-enter header.hero{animation:none;} .has-js .hero-content{animation:none;} ::view-transition-old(root),::view-transition-new(root){ animation:none !important; } } .grid-tw{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;} .grid-wt{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center;} .img-frame{position:relative;overflow:hidden;background:var(--color-imgph-bg);border-radius:2px;} .img-frame img{width:100%;height:100%;object-fit:cover;display:block;} .img-frame.tall{aspect-ratio:4/5;} /* 周邊明細頁主圖為正方形（v42 用 inline style="aspect-ratio:1/1"） */ .img-frame.square{aspect-ratio:1/1;} .anno{margin-top:34px;font-size:12px;color:var(--accent);background:rgba(var(--color-accent-primary-rgb),.07);border-left:3px solid var(--accent);padding:13px 18px;letter-spacing:.5px;line-height:1.85;} /* 出版理念三柱（關於頁） */ .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:64px;} .pillar{border-top:1px solid rgba(var(--color-accent-primary-rgb),.45);padding-top:28px;} .pillar .pnum{font-family:var(--font-sans);font-size:22px;font-weight:500;color:var(--accent);letter-spacing:3px;line-height:1;} .pillar h3{font-family:var(--font-serif);font-size:22px;font-weight:500;letter-spacing:3px;margin:16px 0 16px;color:var(--text-primary);} .pillar p{font-size:14px;line-height:2;font-weight:300;color:var(--text-secondary);letter-spacing:.5px;} .team-photo{margin-top:54px;border-radius:2px;overflow:hidden;aspect-ratio:10/7;background:var(--color-imgph-bg);} .team-photo img{width:100%;height:100%;object-fit:cover;display:block;} /* book（首頁出版品預覽） */ .book-show{display:flex;justify-content:center;} .book{width:min(300px,80%);aspect-ratio:3/4;border-radius:2px 6px 6px 2px;box-shadow:var(--shadow-book-rest);overflow:hidden;position:relative;background:linear-gradient(135deg,var(--color-river-gradient-mid),var(--color-river-gradient-bottom));} .book img{width:100%;height:100%;object-fit:cover;display:block;} /* 書封色塊示意（缺料佔位）：官方主色實色塊＋直排書名，不使用假封面圖 */ .book-ph{background:var(--color-accent-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--color-on-river);} .book-ph-title{font-family:var(--font-serif);font-size:34px;letter-spacing:10px;writing-mode:vertical-rl;} .book-ph-note{font-size:11px;letter-spacing:2px;opacity:.55;} /* 出版品書籍資訊：清楚階層 — serif 書名（主）＞ sans meta（次）＞ serif 引言（文學註腳），大小graduated */ .book-meta{margin-top:26px;} .book-meta .bk-title{font-family:var(--font-serif);font-weight:500;font-size:22px;letter-spacing:2px;color:var(--text-primary);margin-bottom:6px;} .book-meta .bk-author{font-family:var(--font-sans);font-weight:400;font-size:13px;letter-spacing:1px;color:var(--text-secondary);margin-bottom:18px;} .book-meta .bk-quote{font-family:var(--font-sans);font-weight:400;font-size:15px;line-height:2;color:var(--accent);letter-spacing:1px;} /* 出版品列表 */ /* 篩選列：無分割線；每個篩選＝柔藍膠囊＋箭頭，affordance 清楚 */ .filter-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:0;margin:8px 0 44px;} .filter-bar .fl-label{font-size:13px;color:var(--text-secondary);letter-spacing:1px;margin-right:4px;} .select-fake{border:none;color:var(--accent);background:rgba(var(--color-accent-primary-rgb),.07);font-size:13px;padding:9px 16px;border-radius:20px;letter-spacing:1px;display:inline-flex;align-items:center;gap:10px;cursor:pointer;transition:background .25s;} .select-fake:hover{background:rgba(var(--color-accent-primary-rgb),.14);} .select-fake::after{content:"\25BE";font-size:9px;opacity:.6;transition:transform .25s;} /* 假下拉選單（提案示意；用陰影非框線） */ .select{position:relative;} .select-val{display:inline-block;text-align:left;} /* 可鎖寬度，避免選到短選項時寬度跳動 */ .select.open{z-index:30;} /* 展開時提到書卡等後續內容之上 */ /* 含展開下拉的 reveal 區塊整體提層，蓋過後續的卡片格（跨 reveal 堆疊）*/ .panel-inner > .reveal:has(.select.open){position:relative;z-index:40;} .select.open .select-fake{background:rgba(var(--color-accent-primary-rgb),.14);} .select.open .select-fake::after{transform:rotate(180deg);} .select-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:100%;white-space:nowrap;list-style:none;margin:0;padding:6px;background:#fff;border-radius:12px;box-shadow:0 12px 32px rgba(11,61,146,.18);z-index:20;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s;} .select.open .select-menu{opacity:1;visibility:visible;transform:translateY(0);} .select-menu li{font-size:13px;color:var(--color-text-body);letter-spacing:1px;padding:0;border-radius:8px;cursor:pointer;transition:background .2s,color .2s;} .select-menu li:hover{background:rgba(var(--color-accent-primary-rgb),.08);color:var(--accent);} .select-menu li.sel{color:var(--accent);} .backstage-note{margin-top:32px;font-size:13px;color:var(--text-secondary);font-weight:300;letter-spacing:1px;display:flex;align-items:center;gap:10px;} .backstage-note::before{content:"\2699";color:var(--accent);font-size:15px;} .pub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:50px 40px;} .pub-card{cursor:pointer;text-decoration:none;display:block;perspective:1600px;position:relative;} /* 書身：頁面厚度（掀開時露出，像書而非紙板）*/ .pub-card::before{content:"";position:absolute;top:0;left:0;width:100%;padding-top:133.33%; border-radius:2px 5px 5px 2px; background:linear-gradient(90deg,#eee6d4 0,#fbf7ef 46%,#f3ebda 88%,#e6ddc8 100%); box-shadow:inset -8px 0 14px -6px rgba(0,0,0,.2), 0 12px 26px rgba(16,29,77,.16); z-index:0;pointer-events:none;opacity:0;transition:opacity .35s ease .1s;} .pub-card:hover::before{opacity:1;} .pub-cover{position:relative;z-index:1;aspect-ratio:3/4;border-radius:2px 6px 6px 2px;overflow:hidden;box-shadow:var(--shadow-book-rest);transform-origin:left center;backface-visibility:hidden;transition:transform .62s cubic-bezier(.34,.02,.15,1),box-shadow .62s cubic-bezier(.34,.02,.15,1);} .pub-card:hover .pub-cover:not(.ph){transform:rotateY(-34deg);box-shadow:24px 26px 54px rgba(16,29,77,.36);} .pub-cover img{width:100%;height:100%;object-fit:cover;display:block;} .pub-cover.ph{display:flex;align-items:center;justify-content:center;background:var(--color-imgph-bg);box-shadow:none;color:var(--accent);font-size:13px;letter-spacing:1px;text-align:center;padding:16px;} /* 書封色塊示意（實色官方主色＋直排書名，缺料佔位不用假封面圖） */ .pub-cover.solid{display:flex;align-items:center;justify-content:center;width:100%;background:var(--color-accent-primary);color:var(--color-on-river);} .pub-cover.solid span{font-family:var(--font-serif);font-size:28px;letter-spacing:8px;writing-mode:vertical-rl;} /* 只有文字直排，容器維持正常填滿卡片 */ .pub-card .pc-title{font-family:var(--font-serif);font-size:18px;letter-spacing:1px;margin-top:18px;margin-bottom:5px;color:var(--text-primary);} .pub-card .pc-meta{font-size:12px;color:var(--text-secondary);letter-spacing:1px;} /* 周邊商品 */ .goods-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:44px 36px;} .goods-card{cursor:pointer;text-decoration:none;display:block;} .goods-media{aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:var(--color-imgph-bg);transition:transform .4s var(--motion-ease-river);} .goods-card:hover .goods-media{transform:translateY(-6px);} .goods-media img{width:100%;height:100%;object-fit:cover;display:block;} .goods-card .gc-name{font-family:var(--font-sans);font-size:18px;letter-spacing:1px;margin-top:18px;margin-bottom:8px;color:var(--text-primary);} .goods-card .gc-desc{font-size:13px;line-height:1.8;color:var(--text-secondary);font-weight:300;margin-bottom:10px;} .goods-card .gc-cta{font-size:12px;letter-spacing:1px;color:var(--accent-soft);position:relative;display:inline-flex;align-items:center;padding-bottom:5px;transition:color .3s var(--motion-ease-river);} .goods-card .gc-cta::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--motion-ease-river);} .goods-card:hover .gc-cta{color:var(--accent);} .goods-card:hover .gc-cta::after{transform:scaleX(1);} @media(max-width:560px){.goods-grid{grid-template-columns:repeat(2,1fr);gap:30px 18px;}} /* 周邊彙整頁的卡片格與標題的距離（v42 用 inline style） */ .goods-grid.is-archive{margin-top:48px;} /* events（首頁活動預覽） */ .event-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:56px;} .event-card{display:block;background:var(--surface-card);border:none;border-radius:14px;box-shadow:var(--shadow-card-soft);overflow:hidden;cursor:pointer;text-decoration:none;transition:transform .35s var(--motion-ease-river),box-shadow .35s var(--motion-ease-river);} .event-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-soft-hover);} .event-media{aspect-ratio:16/9;background:var(--color-imgph-bg);overflow:hidden;position:relative;} .event-media img{width:100%;height:100%;object-fit:cover;display:block;} .event-media .tag{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.9);backdrop-filter:blur(6px);color:var(--accent);font-size:11px;letter-spacing:1px;padding:6px 14px;border-radius:999px;} .event-body{padding:24px 26px;} .event-body .date{font-size:11px;letter-spacing:2px;color:var(--accent);margin-bottom:10px;font-family:var(--font-sans);} .event-body h4{font-family:var(--font-serif);font-size:18px;letter-spacing:1px;margin-bottom:12px;font-weight:500;color:var(--text-primary);} .event-body p{font-size:13px;line-height:1.9;color:var(--text-secondary);font-weight:300;} /* journal（首頁專欄預覽 + 專欄列表） */ .journal-list{margin-top:48px;} .article{display:flex;gap:30px;padding:28px 0;border-bottom:1px solid var(--color-border-divider);align-items:baseline;cursor:pointer;transition:padding-left .3s var(--motion-ease-river);text-decoration:none;} .article:first-child{padding-top:0;} .article:hover{padding-left:12px;} .article .a-date{font-size:12px;color:var(--accent);letter-spacing:1px;white-space:nowrap;font-family:var(--font-sans);min-width:90px;} .article .a-main h4{font-family:var(--font-sans);font-size:20px;font-weight:500;letter-spacing:1px;margin-bottom:9px;color:var(--text-primary);} .article .a-main p{font-size:13px;color:var(--text-secondary);font-weight:300;line-height:1.8;} .article .a-cat{margin-left:auto;font-size:11px;letter-spacing:1px;color:var(--accent-soft);border:none;padding:0;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;} .article .a-cat::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;flex-shrink:0;} /* 專欄列表 + 側欄 */ .grid-list-side{display:grid;grid-template-columns:1.7fr 1fr;gap:60px;align-items:start;margin-top:48px;} .grid-list-side .journal-list{margin-top:0;} .side-box{background:var(--surface-card-soft);border:none;border-radius:14px;padding:28px 26px;} .side-box+.side-box{margin-top:24px;} .side-box h5{font-family:var(--font-serif);font-size:15px;letter-spacing:2px;margin-bottom:18px;color:var(--text-primary);} .side-box .cat-row{display:flex;justify-content:space-between;font-size:13px;color:var(--text-secondary);padding:9px 0;border-bottom:1px dashed var(--color-border-divider);cursor:pointer;} .side-box .cat-row:last-child{border-bottom:none;} .side-box .cat-row:hover{color:var(--accent);} .side-feat{display:block;font-family:var(--font-serif);font-size:15px;line-height:1.7;color:var(--text-primary);padding:11px 0;border-bottom:1px dashed var(--color-border-divider);cursor:pointer;text-decoration:none;} .side-feat:last-child{border-bottom:none;} .side-feat:hover{color:var(--accent);} @media(max-width:820px){.grid-list-side{grid-template-columns:1fr;gap:34px;}} /* 聯絡頁 */ .contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:start;margin-top:48px;} .form-row{margin-bottom:22px;} .form-row label{display:block;font-size:13px;color:var(--text-secondary);letter-spacing:1px;margin-bottom:8px;} .field{width:100%;border:1px solid var(--color-form-border);background:var(--surface-card);padding:12px 14px;font-size:14px;border-radius:10px;color:var(--text-primary);font-family:var(--font-sans);} .field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--color-accent-primary-rgb),.15);} textarea.field{min-height:130px;resize:vertical;} select.field{cursor:pointer;} .info-row{display:flex;gap:14px;padding:16px 0;border-bottom:1px dashed var(--color-border-divider);font-size:14px;color:var(--color-text-body);} .info-row .ir-label{color:var(--accent);font-size:13px;letter-spacing:1px;min-width:80px;flex-shrink:0;} .merch-box{background:var(--surface-glaze);border-radius:14px;padding:30px 34px;margin-top:34px;} .merch-box h4{font-family:var(--font-serif);font-size:18px;letter-spacing:2px;margin-bottom:14px;color:var(--accent);} .merch-box p{font-size:13px;color:var(--text-secondary);line-height:2;font-weight:300;margin-bottom:12px;} .merch-box .more-link{color:var(--accent);} /* 內頁（詳細頁） */ .back-link{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:13px;letter-spacing:1px;text-decoration:none;margin-top:44px;position:relative;padding-bottom:9px;} .back-link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .55s var(--motion-ease-river);} .back-link:hover::after{transform:scaleX(1);} .detail-narrow{max-width:var(--reading-max);margin:0 auto;} .detail-banner{aspect-ratio:16/9;border-radius:2px;overflow:hidden;background:var(--color-imgph-bg);margin-bottom:44px;} .detail-banner img{width:100%;height:100%;object-fit:cover;display:block;} .detail-meta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--text-secondary);letter-spacing:1px;margin-bottom:22px;} .detail-title{font-family:var(--font-serif);font-weight:500;font-size:clamp(26px,3.6vw,42px);line-height:1.5;letter-spacing:2px;color:var(--text-primary);margin-bottom:24px;} .detail-body{font-size:16px;line-height:2.05;font-weight:400;color:var(--color-text-body);letter-spacing:.4px;} .detail-body p{margin-bottom:20px;} .detail-tags{margin-top:34px;font-size:12px;color:var(--accent-soft);letter-spacing:1px;} .sub-head{font-family:var(--font-serif);font-size:18px;letter-spacing:2px;color:var(--text-primary);margin:40px 0 16px;} .photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0;} .photo-grid .ph-cell{aspect-ratio:1/1;border-radius:2px;overflow:hidden;background:var(--color-imgph-bg);} .photo-grid .ph-cell img{width:100%;height:100%;object-fit:cover;display:block;} .video-embed{aspect-ratio:16/9;background:var(--color-river-gradient-bottom);border-radius:2px;display:flex;align-items:center;justify-content:center;color:var(--color-on-river);font-size:13px;letter-spacing:2px;opacity:.9;margin:20px 0;} /* 書籍/商品詳細 */ .book-detail{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start;} .book-detail .book{width:100%;max-width:300px;margin:0 auto;} .book-detail .img-frame{border-radius:14px;} /* 商品內頁主圖圓角，與卡片一致的柔化 */ .detail-cta{display:inline-flex;align-items:center;gap:10px;border:none;color:var(--accent);background:none;font-family:var(--font-sans);font-size:14px;letter-spacing:1.5px;text-decoration:none;cursor:pointer;position:relative;padding:0 0 9px;margin-top:26px;} .detail-cta::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--motion-ease-river);} .detail-cta:hover::after{transform:scaleX(1);} .detail-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px;} .detail-thumbs .ph-cell{aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:var(--color-imgph-bg);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:10px;letter-spacing:1px;text-align:center;} .detail-thumbs .ph-cell img{width:100%;height:100%;object-fit:cover;display:block;} /* 明細頁書封：有精選圖片時填滿，無圖時由 .book-ph-inner 呈現官方主色示意塊 */ .book figure.wp-block-post-featured-image{margin:0;width:100%;height:100%;} .book figure.wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover;display:block;} .book-ph-inner{position:absolute;inset:0;background:var(--color-accent-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--color-on-river);} /* 有精選圖片時隱藏缺料佔位塊；無圖時佔位塊照常顯示 */ .book:has(figure.wp-block-post-featured-image img) .book-ph-inner{display:none;} /* v42 的 inline style 改為修飾 class */ .detail-narrow.is-spaced{margin-top:64px;} .anno.is-spaced{margin-top:22px;} @media(max-width:820px){.book-detail{grid-template-columns:1fr;gap:40px;}.photo-grid{gap:12px;}.contact-grid{grid-template-columns:1fr;gap:40px;}} .center-more{text-align:center;margin-top:60px;} /* 送出鈕：實心填色（表單需要明確 affordance，非框線） */ .btn{display:inline-flex;align-items:center;gap:8px;border:none;color:var(--color-on-river);background:var(--accent);font-size:13px;letter-spacing:2px;padding:15px 36px;border-radius:10px;cursor:pointer;font-family:var(--font-sans);transition:background .3s;text-decoration:none;} .btn:hover{background:var(--accent-deep);} /* 無邊界流動 CTA：文字 + 水般填入的底線 + 箭頭流出 */ .link-cta{display:inline-flex;align-items:center;gap:10px;color:var(--accent);background:none;border:none;font-family:var(--font-sans);font-size:14px;letter-spacing:2px;text-decoration:none;cursor:pointer;position:relative;padding:0 0 9px;} .link-cta::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .55s var(--motion-ease-river);} .link-cta:hover::after{transform:scaleX(1);} /* footer */ /* box-shadow 往下墊一屏深藍實底：彈性回彈露出 footer 下方時填滿深藍。 用 box-shadow（ink overflow）而非實體元素，不會增加頁面可捲動高度； footer 在 #water(z1) 之上(z2)，故陰影為純深藍、不被 screen 提亮。 */ footer{position:relative;z-index:2;background:var(--accent);color:var(--color-on-river);padding:130px 8vw 70px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:0 50vh 0 50vh var(--accent);} .foot-mark img{height:60px;width:auto;display:block;margin:0 auto;} .foot-zh{font-size:14px;letter-spacing:6px;opacity:.9;margin-top:6px;} .foot-en{font-size:11px;letter-spacing:5px;opacity:.6;} .foot-note{margin-top:34px;font-size:11px;letter-spacing:1px;opacity:.55;} @media(max-width:960px){ .grid-tw,.grid-wt{grid-template-columns:1fr;gap:40px;} .event-grid{grid-template-columns:1fr;} /* 導覽為全裝置一致的收合式覆蓋層（見上方 .nav-links），此處僅收窄內距與選單字級 */ .nav-links a{font-size:20px;letter-spacing:4px;} .panel{padding:84px 24px;} nav{padding:14px 24px;} .article{flex-direction:column;gap:8px;align-items:flex-start;} .article:hover{padding-left:0;} .article .a-cat{order:-1;} } @media(max-width:820px){ .pillars{grid-template-columns:1fr;gap:34px;} } @media(max-width:560px){ .pub-grid{grid-template-columns:repeat(2,1fr);gap:30px 18px;} /* 手機收窄河流擺幅，避免橫向太寬 */ .river-line{transform:scaleX(.58);transform-origin:center top;} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} #water{display:none;} body{background:var(--bg-canvas-fallback);} .reveal{opacity:1;transform:none;filter:none;transition:none;} /* 河流視覺回靜態：線一次畫好、無流光/水頭 */ .river-draw{animation:none;stroke-dashoffset:0;} .river-glow,.river-head{animation:none;opacity:0;} } /* WebGL/GPU 不可用（軟體算圖）時的效能降階：關掉全頁動態水波與較貴的合成， 改用靜態漸層底；hero 仍為靜態水面圖。避免無 GPU 機器上卡頓。 */ html.no-webgl #water{display:none;} html.no-webgl body{background:var(--bg-canvas-fallback);} html.no-webgl .grain{display:none;} html.no-webgl nav.scrolled, html.no-webgl .nav-links{backdrop-filter:none;} html.no-webgl .hero-ripple{display:none;} /* 河流視覺回靜態（無 GPU 時避免動畫） */ html.no-webgl .river-draw{animation:none;stroke-dashoffset:0;} html.no-webgl .river-glow,html.no-webgl .river-head{animation:none;opacity:0;} /* ============================================================================= 階段二新增：v42 未涵蓋的元件，與 WordPress 結構帶來的必要調整 每一條都對應 docs/superpowers/plans/2026-08-01-...-階段二-... 的偏離清單 ============================================================================= */ /* 明細頁 hero：完整標題比 v42 的縮寫長很多，過長時收字級避免爆版 */ .hero.hero--sub h1.hero-title--long{font-size:clamp(28px,4.4vw,56px);letter-spacing:6px;text-indent:6px;} /* 語言切換改為真實連結：原稿是純視覺的