/** * 動態效果 * * 對照 chenya-vision.com 的動態語彙：捲動進場以 fade-right 為主、 * 延遲以 50ms 遞增錯開、只播一次。這裡自行實作，不引入 AOS 函式庫。 * * 所有效果都必須在 prefers-reduced-motion 下停用——這不是可選項， * 前庭功能障礙的使用者會因為過度動態而不適。 */ :root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --motion-distance: 3.5rem; /* v2.3：再加大——使用者要「更明顯、更多動態」 */ --motion-duration: 0.85s; } /* ===== 捲動進場 ===== 只有在 帶著 js-motion 時才隱藏。這個 class 由 header 的內聯腳本加上， 所以「沒有 JS」或「腳本載入失敗」時內容一律是可見的—— 內容預設隱形、只靠 JS 顯示，是會整頁消失的設計。 */ .js-motion [data-reveal] { opacity: 0; transition: opacity var(--motion-duration) var(--ease-out), transform var(--motion-duration) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } /* 位移＋輕微縮放，進場多一點「彈出」的分量 */ .js-motion [data-reveal="fade-up"] { transform: translateY(var(--motion-distance)) scale(0.97); } .js-motion [data-reveal="fade-down"] { transform: translateY(calc(var(--motion-distance) * -0.6)) scale(0.97); } .js-motion [data-reveal="fade-right"] { transform: translateX(calc(var(--motion-distance) * -1)); } .js-motion [data-reveal="fade-left"] { transform: translateX(var(--motion-distance)); } .js-motion [data-reveal="zoom-in"] { transform: scale(0.9); } .js-motion [data-reveal].is-revealed { opacity: 1; transform: none; will-change: auto; } /* * 保險：加上 .motion-off 後直接跳到可見狀態，不經過渡。 * * is-revealed 只是設定過渡的「終點」——如果過渡因為任何原因沒有推進 * （分頁在背景、頁面被隱藏、瀏覽器節流），元素會永遠停在 opacity:0。 * 內容看不見是比沒有動畫嚴重得多的問題，所以保險路徑必須繞過過渡。 */ .motion-off [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } /* ===== 導覽列捲動狀態 ===== */ .header { transition: box-shadow 0.3s var(--ease-out), background-color 0.3s var(--ease-out); } .header.is-scrolled { box-shadow: 0 6px 20px rgba(2, 27, 72, 0.12); background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(1.6) blur(10px); -webkit-backdrop-filter: saturate(1.6) blur(10px); } .header-nav a { position: relative; } /* 導覽列連結的底線由中間展開 */ @media (min-width: 801px) { .header-nav a::after { content: ""; position: absolute; left: 50%; bottom: -0.35em; width: 0; height: 2px; background: var(--color-primary); border-radius: 2px; transform: translateX(-50%); transition: width 0.3s var(--ease-out); } .header-nav a:hover::after, .header-nav .current-menu-item > a::after { width: 100%; } } /* ===== 主視覺 ===== */ .hero__bg { animation: hero-drift 24s var(--ease-out) infinite alternate; } @keyframes hero-drift { from { transform: scale(1.06) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); } } /* 主視覺內容依序浮現，不等捲動 */ .hero__inner > * { opacity: 0; animation: hero-in 0.9s var(--ease-out) forwards; } .hero__inner > *:nth-child(1) { animation-delay: 0.15s; } .hero__inner > *:nth-child(2) { animation-delay: 0.30s; } .hero__inner > *:nth-child(3) { animation-delay: 0.45s; } @keyframes hero-in { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } } /* 捲動提示 */ .hero__scroll { position: absolute; left: 50%; bottom: 1.5rem; z-index: 2; width: 1.5rem; height: 2.4rem; margin-left: -0.75rem; border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 1rem; } .hero__scroll::after { content: ""; position: absolute; left: 50%; top: 0.45rem; width: 3px; height: 0.5rem; margin-left: -1.5px; background: rgba(255, 255, 255, 0.8); border-radius: 2px; animation: scroll-hint 1.8s ease-in-out infinite; } @keyframes scroll-hint { 0%, 100% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; transform: translateY(0.45rem); } 80% { opacity: 0; transform: translateY(0.8rem); } } /* ===== 數據卡 ===== */ .stat { position: relative; overflow: hidden; transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); } .stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--color-accent), var(--color-primary)); transform: scaleY(0); transform-origin: top; transition: transform 0.5s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .stat.is-revealed::before { transform: scaleY(1); } .stat:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(2, 27, 72, 0.12); } .stat__value { font-variant-numeric: tabular-nums; } /* ===== 卡片 ===== */ .card { transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); } .card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(2, 27, 72, 0.14); } .card__media img { transition: transform 0.6s var(--ease-out); } .card:hover .card__media img { transform: scale(1.06); } .card__title a { transition: color 0.25s var(--ease-out); } /* ===== 條列 ===== 絕對不要在 hover 改 padding／margin／width 這類「會影響版面」的屬性： 元素一位移，游標就可能落到元素外 → hover 解除 → 彈回原位 → 再次 hover， 形成無限抖動。這裡只改背景色與左側標記的高度，兩者都不影響版面。 */ .row-item { position: relative; padding-left: var(--space-2); transition: background-color 0.3s var(--ease-out); } .row-item::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; background: var(--color-accent); transform: translateY(-50%); transition: height 0.3s var(--ease-out); } .row-item:hover { background: var(--color-second-bg); } .row-item:hover::before { height: 60%; } /* ===== 服務與優勢項目 ===== */ .item { transition: transform 0.3s var(--ease-out); } .item__icon { transition: transform 0.4s var(--ease-out), background-color 0.3s var(--ease-out); } .item:hover .item__icon { transform: scale(1.1) rotate(-6deg); background: var(--color-primary-bg); } /* ===== 按鈕 ===== */ .btn, .gc-member-btn, .gc-power__btn { position: relative; overflow: hidden; transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), opacity 0.25s; } .btn:hover, .gc-member-btn:hover, .gc-power__btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(2, 27, 72, 0.18); } .btn:active { transform: translateY(0); } /* 篩選標籤 */ .filter__item { transition: transform 0.25s var(--ease-out), background-color 0.25s, color 0.25s; } .filter__item:hover { transform: translateY(-2px); } /* 連結目錄：同上，hover 不改 padding，避免抖動 */ .linklist li a { padding-inline: var(--space-1); transition: background-color 0.25s var(--ease-out); } .linklist li a:hover { background: var(--color-second-bg); } .linklist__hint { transition: transform 0.25s var(--ease-out); } .linklist li a:hover .linklist__hint { transform: translateX(4px); } /* ===== 區塊標題的裝飾線 ===== */ .section-title { position: relative; padding-bottom: 0.6rem; } .section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--color-accent), var(--color-primary)); border-radius: 3px; transition: width 0.8s var(--ease-out) 0.2s; } .section-header.is-revealed .section-title::after, .cta.is-revealed .section-title::after { width: 3.5rem; } .cta .section-title::after { left: 50%; transform: translateX(-50%); } /* ===== 尊重使用者的動態偏好 ===== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .js-motion [data-reveal] { opacity: 1 !important; transform: none !important; } .hero__inner > * { opacity: 1; animation: none; } .hero__bg { animation: none; } .hero__scroll { display: none; } } /* ===== 新排版的 hover：一律不改版面屬性 ===== */ .media-item, .compact-item__link { position: relative; transition: background-color 0.3s var(--ease-out); } .media-item::before, .compact-item__link::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 0; background: var(--color-accent); transform: translateY(-50%); transition: height 0.3s var(--ease-out); } .media-item:hover, .compact-item__link:hover { background: var(--color-second-bg); } .media-item:hover::before, .compact-item__link:hover::before { height: 60%; } .media-item__media img { transition: transform 0.6s var(--ease-out); } .media-item:hover .media-item__media img { transform: scale(1.06); }