/* ========================================================================== 白鹿情感｜網站動態效果樣式 --------------------------------------------------------------------------- 搭配 assets/site-anim.js 使用。四項： A. 數字滾動計數（不需 CSS，由 JS 改文字） B. 卡片進場錯位（.fx-item / .fx-in） C. 顧問照片 hover D. 滾動進度條（.read-progress） 安全前提：初始的「透明＋位移」只在 帶 .fx-ready 時生效， .fx-ready 由 JS 執行成功後才加上 → JS 失敗時內容照常顯示。 ========================================================================== */ /* ========================================================================== B. 卡片進場錯位 ========================================================================== */ .fx-ready .fx-item { opacity: 0; transform: translateY(20px); transition: opacity 760ms cubic-bezier(.22, .61, .36, 1) var(--fx-delay, 0ms), transform 760ms cubic-bezier(.22, .61, .36, 1) var(--fx-delay, 0ms); } .fx-ready .fx-item.fx-in { opacity: 1; transform: none; } /* ========================================================================== C. 顧問照片 hover --------------------------------------------------------------------------- 滑過卡片：卡片微微上浮、照片輕微放大。 觸控裝置（無 hover）由 .fx-no-hover 停用，避免點一下就卡在放大狀態。 ========================================================================== */ .adv { transition: transform 420ms cubic-bezier(.22, .61, .36, 1); } .adv__pic img { transition: transform 700ms cubic-bezier(.22, .61, .36, 1); } @media (hover: hover) { .adv:hover { transform: translateY(-4px); } .adv:hover .adv__pic img { transform: scale(1.045); } } /* 觸控裝置：不做 hover 效果 */ .fx-no-hover .adv:hover { transform: none; } .fx-no-hover .adv:hover .adv__pic img { transform: none; } /* ========================================================================== D. 滾動進度條 ========================================================================== */ .read-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: transparent; z-index: 60; pointer-events: none; } .read-progress__bar { height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent-500), var(--accent-700)); /* 進度條不該有過渡，否則會落後於捲動位置 */ transition: none; } /* ========================================================================== 減少動態：一律顯示、不做位移 （JS 已停用，這裡是雙重保險，也涵蓋使用者中途切換系統設定的情況） ========================================================================== */ @media (prefers-reduced-motion: reduce) { .fx-ready .fx-item { opacity: 1 !important; transform: none !important; transition: none !important; } .read-progress { display: none; } .adv, .adv__pic img { transition: none !important; } .adv:hover { transform: none !important; } .adv:hover .adv__pic img { transform: none !important; } }