/* ──────────────────────────────────────────────────────────── 前台動態效果 兩個前提： 1. 初始隱藏狀態一律鎖在 html.fx 之下。這個 class 由 effects.js 加上， 所以在沒有 JS、JS 出錯、或檔案沒載到時，內容維持完整可見。 2. 位移一律用獨立的 translate / scale 屬性，不用 transform。 站上有元素本來就靠 transform 定位（主視覺標題用 translate(-50%,-50%) 置中、bottomText 用 translate(0,50%) 壓在區塊交界上）， 用 transform 做動畫會把它們的定位整個蓋掉而跑版； 獨立屬性則是與既有 transform 疊加。 ──────────────────────────────────────────────────────────── */ /* 舊瀏覽器不支援獨立位移屬性時，只做淡入，一樣不碰 transform */ @supports not (translate: 0 1px){ html.fx .fxReveal{opacity: 0;} html.fx .fxReveal.fxIn{opacity: 1; transition: opacity .7s ease var(--fxDelay, 0ms);} html.fx .bannerBlock h1{opacity: 0;} html.fx .bannerBlock.fxIn h1{opacity: 1; transition: opacity .9s ease .1s;} } @supports (translate: 0 1px){ /* ── 捲動進場 ────────────────────────────────────────── */ html.fx .fxReveal{opacity: 0; translate: 0 26px;} html.fx .fxReveal.fxIn{ opacity: 1; translate: none; transition: opacity .75s cubic-bezier(.16, .84, .44, 1), translate .75s cubic-bezier(.16, .84, .44, 1); transition-delay: var(--fxDelay, 0ms); } /* 卡片進場多帶一點彈性，感覺比較活潑 */ html.fx .fxReveal.fxPop{translate: 0 30px; scale: .96;} html.fx .fxReveal.fxPop.fxIn{ translate: none; scale: none; transition: opacity .6s ease, translate .6s cubic-bezier(.34, 1.56, .64, 1), scale .6s cubic-bezier(.34, 1.56, .64, 1); transition-delay: var(--fxDelay, 0ms); } /* ── 主視覺標題 ──────────────────────────────────────── */ /* 這個 h1 是用 transform 置中的，所以只動 translate 與 opacity， 也不碰 letter-spacing（站上的字距是設計稿定的，不該被動畫改掉）。 */ html.fx .bannerBlock h1{opacity: 0; translate: 0 30px;} html.fx .bannerBlock.fxIn h1{ opacity: 1; translate: none; transition: opacity .9s ease .1s, translate .9s cubic-bezier(.16, .84, .44, 1) .1s; } } /* ── 讀取中畫面 ──────────────────────────────────────────── 蓋在頁面上直到資源載入完成，避免使用者看到圖片還沒進來、 輪播還沒初始化的中間狀態。 兩個保險： 1. .isLoading 由 裡的內嵌腳本加上。沒有 JS 就不會有這個 class， 也就不會有遮罩——絕不會出現「沒有 JS 就整站空白」。 2. 那段腳本自己帶逾時解除，不依賴任何外部檔案； effects.js 就算載不到，遮罩一樣會消失。 用偽元素做，不需要在 17 個頁面各塞一段 HTML。 */ html.isLoading, html.isLoading body{overflow: hidden;} html.isLoading::before{ content: ''; position: fixed; inset: 0; z-index: 99998; background: var(--creamColor, #FBEEC9) url('../img/mainlogo.png') no-repeat center calc(50% - 26px); background-size: min(210px, 52vw) auto; } html.isLoading::after{ content: ''; position: fixed; z-index: 99999; top: calc(50% + 74px); left: 50%; width: 32px; height: 32px; margin-left: -16px; border: 3px solid rgba(64, 92, 129, 0.22); border-top-color: var(--mainColor, #405C81); border-radius: 50%; animation: pageSpin .8s linear infinite; } @keyframes pageSpin{to{transform: rotate(360deg);}} /* 解除時淡出，不要硬切 */ html.isLoading.loaderOut::before, html.isLoading.loaderOut::after{ opacity: 0; pointer-events: none; transition: opacity .28s ease; } @media (prefers-reduced-motion: reduce){ html.isLoading::after{animation-duration: 2s;} html.isLoading.loaderOut::before, html.isLoading.loaderOut::after{transition: none;} } /* ── 頁首 ────────────────────────────────────────────────── */ .mainHeader{transition: box-shadow .3s ease;} .mainHeader.fxStuck{box-shadow: 0 4px 18px rgba(0, 0, 0, .13);} /* 選單底線由左往右掃出 */ @media (hover: hover){ .mainHeader .mainMenu a{position: relative;} .mainHeader .mainMenu a::after{ content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transform: scaleX(0); transform-origin: left center; transition: transform .32s cubic-bezier(.16, .84, .44, 1); } .mainHeader .mainMenu a:hover::after{transform: scaleX(1);} } /* ── 卡片 ────────────────────────────────────────────────── */ .petCard, .productCard, .stepCard{transition: translate .35s cubic-bezier(.16, .84, .44, 1), box-shadow .35s ease;} .petCard .thumb, .productCard .thumb{overflow: hidden;} /* 毛孩卡片的圖改成 object-fit: contain（客戶要求整張看得到、不要裁）， 圖片剛好塞滿框內，所以這裡不能再放大——一放大就超出 .thumb 的 overflow: hidden，hover 的瞬間又被裁掉。義賣商品還是 cover，維持原本的拉近效果。 */ .productCard .thumb img{transition: scale .55s cubic-bezier(.16, .84, .44, 1);} @media (hover: hover){ .petCard:hover, .productCard:hover{translate: 0 -8px; box-shadow: 0 14px 30px rgba(64, 92, 129, .22);} .productCard:hover .thumb img{scale: 1.07;} .stepCard:hover{translate: 0 -6px;} } /* ── 按鈕：滑過時一道光掃過 ───────────────────────────────── */ /* 這裡不能用 overflow: hidden。 它會建立新的區塊格式化環境、擋掉 margin 合併，整頁高度因此多出 4px （認養專區與申請捐款箱實測到）。clip-path 只裁切繪製結果，不影響版面。 */ .petCta, .petActionBtn, .donateCTA a{position: relative; clip-path: inset(0 round 999px); transition: translate .25s ease;} .petCta::after, .petActionBtn::after, .donateCTA a::after{ content: ''; position: absolute; top: 0; left: -140%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); pointer-events: none; } @media (hover: hover){ /* clip-path 會連陰影一起裁掉，所以 hover 只保留上浮與掃光 */ .petCta:hover, .petActionBtn:hover, .donateCTA a:hover{translate: 0 -3px;} .petCta:hover::after, .petActionBtn:hover::after, .donateCTA a:hover::after{animation: fxShine .75s ease;} } .petCta:active, .petActionBtn:active, .donateCTA a:active{translate: none;} @keyframes fxShine{ from{left: -140%;} to{left: 140%;} } /* ── 頁尾社群圖示 ────────────────────────────────────────── */ @media (hover: hover){ footer .buttons a{transition: translate .3s cubic-bezier(.34, 1.56, .64, 1), rotate .3s cubic-bezier(.34, 1.56, .64, 1);} footer .buttons a:hover{translate: 0 -6px; rotate: -6deg;} } /* ── 回到頂端 ────────────────────────────────────────────── */ /* 這顆按鈕與 .goTop.fixed 都是站上原本就有的，這裡只補上浮起時的動畫。 z-index 是為了不被 sticky 的頁首蓋住。 */ /* 手機版的 footer 是 position:relative + z-index:1，會建立堆疊環境， 按鈕的 z-index 被關在裡面，而 article 是 z-index:2，於是內容整片蓋過按鈕。 按鈕浮起時 footer 一定還在畫面外，這時把 footer 的堆疊層拉高不會有副作用； 捲到 footer 出現時浮起狀態會解除，z-index 也跟著還原成 1， 白色膠囊跨在 footer 上緣的疊法不受影響。 */ footer.fxFloating{z-index: 60;} footer .othersBlock .goTop.fixed{ z-index: 50; /* 手機版的 .goTop 帶有 top: 26px，而浮起狀態只設 bottom， 兩者同時存在會把元素上下撐開（實測高度 734px）， 它的 ::after 那層半透明藍就變成畫面右側一條長色塊。 */ top: auto; height: auto; animation: fxRise .35s cubic-bezier(.34, 1.56, .64, 1); } /* 只做淡入，不帶位移：動畫若因分頁節流而卡在起始格， 帶位移會讓按鈕停在偏移的位置上。 */ @keyframes fxRise{ from{opacity: 0;} to{opacity: 1;} } /* ── 使用者要求減少動態時，全部關掉 ──────────────────────── */ @media (prefers-reduced-motion: reduce){ html.fx .fxReveal, html.fx .fxReveal.fxPop, html.fx .bannerBlock h1{opacity: 1 !important; translate: none !important; scale: none !important;} html.fx .fxReveal, .petCard, .productCard, .stepCard, .petCta, .petActionBtn, .donateCTA a, .mainHeader{transition: none !important;} footer .othersBlock .goTop.fixed{animation: none !important;} .petCta::after, .petActionBtn::after, .donateCTA a::after{display: none;} } /* ════════════════════════════════════════════════════════════════ 首頁專屬動效 ──────────────────────────────────────────────────────────────── 全部鎖在 html.fx 之下（由 effects.js 加上），JS 沒載到或出錯時 首頁就是完整可見的原樣。位移一律用獨立的 translate / scale， 只有卡片的 3D 傾斜用 transform——那個元素沒有靠 transform 定位。 ════════════════════════════════════════════════════════════════ */ /* 主視覺的推近、以及背景柔光球，都是「比容器大」的絕對定位元素。 clip-path 只裁畫面、不改變可捲動範圍，頁面照樣會多出橫向捲軸 （實測 scrollWidth 1721 / clientWidth 1585），所以這裡要真的用 overflow。 用 clip 不用 hidden：hidden 會建立捲動容器，頁首的 position: sticky 會失效。 */ .screenWrap.homePage{ overflow-x: clip; } /* ── 主視覺：緩慢推近 + 捲動視差 ───────────────────────────── */ .homePage .homeHero{ clip-path: inset(0); } html.fx .homePage .homeHero::before{ content: ''; position: absolute; inset: 0; background-image: inherit; background-repeat: no-repeat; background-position: center 45%; background-size: cover; transform-origin: center 40%; scale: 1.02; translate: 0 var(--heroShift, 0px); animation: fxHeroZoom 26s ease-out forwards; z-index: 0; } @keyframes fxHeroZoom{ from{ scale: 1.02; } to{ scale: 1.12; } } .homePage .homeHero::after{ z-index: 2; } .homePage .homeHeroText{ z-index: 3; } /* 主視覺文字分三段進場。 刻意不用 animation ... forwards：靠 forwards 撐住終點的話， 動畫只要沒跑（分頁被節流、瀏覽器不支援）文字就永遠停在 opacity:0。 終點交給 .fxHeroIn 這個 class，由 JS 加上，且另有逾時保險。 */ html.fx .homePage .homeHeroText h1, html.fx .homePage .homeHeroText .heroSub, html.fx .homePage .homeHeroText .heroSlogan{ opacity: 0; translate: 0 18px; } html.fx .homePage .homeHero.fxHeroIn .homeHeroText h1, html.fx .homePage .homeHero.fxHeroIn .homeHeroText .heroSub, html.fx .homePage .homeHero.fxHeroIn .homeHeroText .heroSlogan{ opacity: 1; translate: none; transition: opacity .9s cubic-bezier(.16,.84,.44,1), translate .9s cubic-bezier(.16,.84,.44,1); } html.fx .homePage .homeHero.fxHeroIn .homeHeroText h1{ transition-delay: .15s; } html.fx .homePage .homeHero.fxHeroIn .homeHeroText .heroSub{ transition-delay: .3s; } html.fx .homePage .homeHero.fxHeroIn .homeHeroText .heroSlogan{ transition-delay: .45s; } /* ── 入口卡：依序彈入、滑鼠傾斜、光暈與掃光 ─────────────────── */ html.fx .homePage .homeEntry{ opacity: 0; translate: 0 26px; scale: .94; } html.fx .homePage .entryRow.fxIn .homeEntry{ opacity: 1; translate: none; scale: 1; transition: opacity .55s ease, translate .65s cubic-bezier(.34,1.4,.64,1), scale .65s cubic-bezier(.34,1.4,.64,1); } html.fx .homePage .entryRow.fxIn .homeEntry:nth-child(1){ transition-delay: .05s; } html.fx .homePage .entryRow.fxIn .homeEntry:nth-child(2){ transition-delay: .17s; } html.fx .homePage .entryRow.fxIn .homeEntry:nth-child(3){ transition-delay: .29s; } .homePage .homeEntry{ clip-path: inset(0 round clamp(16px, 2.1vw, 40px)); transform: perspective(760px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: translate .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease, transform .25s ease; } .homePage .homeEntry .entryIcon img{ transition: scale .45s cubic-bezier(.34,1.4,.64,1), rotate .45s ease; } /* 掃光：用 clip-path 裁切，不用 overflow:hidden */ .homePage .homeEntry::before{ content: ''; position: absolute; top: 0; left: -150%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-18deg); pointer-events: none; } @media (hover: hover){ .homePage .homeEntry:hover{ translate: 0 -10px; box-shadow: 0 22px 40px rgba(64, 92, 129, .28); } .homePage .homeEntry:hover .entryIcon img{ scale: 1.12; rotate: -4deg; } .homePage .homeEntry:hover::before{ animation: fxSweep .85s ease; } .homePage .homeEntry:hover .entryName{ letter-spacing: 3px; text-indent: 3px; } } .homePage .homeEntry .entryName{ transition: letter-spacing .35s ease, text-indent .35s ease; } @keyframes fxSweep{ from{ left: -150%; } to{ left: 150%; } } /* ── 區塊標題：兩側的線從中間往外畫開 ───────────────────────── */ html.fx .homePage .homeSectionTitle::before, html.fx .homePage .homeSectionTitle::after{ scale: 0 1; } html.fx .homePage .homeSectionTitle::before{ transform-origin: right center; } html.fx .homePage .homeSectionTitle::after{ transform-origin: left center; } html.fx .homePage .homeSectionTitle.fxIn::before, html.fx .homePage .homeSectionTitle.fxIn::after{ scale: 1 1; transition: scale .9s cubic-bezier(.16,.84,.44,1) .1s; } html.fx .homePage .homeSectionTitle h2{ opacity: 0; translate: 0 10px; } html.fx .homePage .homeSectionTitle.fxIn h2{ opacity: 1; translate: none; transition: opacity .6s ease, translate .6s cubic-bezier(.16,.84,.44,1); } /* ── 協會緣起：照片從左、文字從右 ──────────────────────────── */ html.fx .homePage .originCard .originPic{ opacity: 0; translate: -34px 0; } html.fx .homePage .originCard .originText{ opacity: 0; translate: 34px 0; } html.fx .homePage .originCard.fxIn .originPic, html.fx .homePage .originCard.fxIn .originText{ opacity: 1; translate: none; transition: opacity .8s ease .1s, translate .8s cubic-bezier(.16,.84,.44,1) .1s; } .homePage .originPic img{ transition: scale 1.2s cubic-bezier(.16,.84,.44,1); } @media (hover: hover){ .homePage .originCard:hover .originPic img{ scale: 1.06; } } /* ── 行動成果：三格數字依序彈入 ────────────────────────────── */ html.fx .homePage .statBox{ opacity: 0; translate: 0 20px; scale: .94; } html.fx .homePage .resultRow.fxIn .statBox{ opacity: 1; translate: none; scale: 1; transition: opacity .5s ease, translate .6s cubic-bezier(.34,1.4,.64,1), scale .6s cubic-bezier(.34,1.4,.64,1); } html.fx .homePage .resultRow.fxIn .statBox:nth-child(1){ transition-delay: .25s; } html.fx .homePage .resultRow.fxIn .statBox:nth-child(2){ transition-delay: .37s; } html.fx .homePage .resultRow.fxIn .statBox:nth-child(3){ transition-delay: .49s; } .homePage .statBox{ transition: translate .3s ease, box-shadow .3s ease; } @media (hover: hover){ .homePage .statBox:hover{ translate: 0 -4px; box-shadow: 0 10px 22px rgba(64,92,129,.16); } } .homePage .resultPic img{ transition: scale 1.2s cubic-bezier(.16,.84,.44,1); } @media (hover: hover){ .homePage .resultRow:hover .resultPic img{ scale: 1.05; } } /* ── 等家的孩子：照片放大、卡片浮起 ────────────────────────── */ .screenWrap.homePage article .homePets .petGrid .petCard .thumb{ clip-path: inset(0 round clamp(8px, 1vw, 20px)); } /* 首頁的毛孩卡片同上：圖已改成 contain，hover 不再放大，否則會被 .thumb 裁掉 */ /* ── 更多等家孩子：掃光 + 箭頭前推 ─────────────────────────── */ .homePage .petsMoreBtn{ position: relative; clip-path: inset(0 round 50px); } .homePage .petsMoreBtn::before{ transition: translate .3s cubic-bezier(.34,1.4,.64,1); } .homePage .petsMoreBtn::after{ content: ''; position: absolute; top: 0; left: -150%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(64,92,129,.18), transparent); transform: skewX(-18deg); pointer-events: none; } @media (hover: hover){ .homePage .petsMoreBtn:hover::before{ translate: 4px 0; } .homePage .petsMoreBtn:hover::after{ animation: fxSweep .8s ease; } } /* ── 背景漂浮的柔光球：讓大片奶油色不會太空 ──────────────────── */ html.fx .homePage .homeOrigin, html.fx .homePage .homePets{ position: relative; isolation: isolate; /* 柔光球是負位移的絕對定位偽元素，不裁的話整頁會被撐寬而出現橫向捲軸。 用 clip-path 而不是 overflow:hidden——後者會建立 BFC、擋掉邊界合併。 */ clip-path: inset(0); } html.fx .homePage .homeOrigin::before, html.fx .homePage .homePets::before, html.fx .homePage .homePets::after{ content: ''; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(42px); opacity: .5; } html.fx .homePage .homeOrigin::before{ width: 22vw; height: 22vw; max-width: 380px; max-height: 380px; top: 4%; left: -6vw; background: radial-gradient(circle, rgba(207,218,185,.85), rgba(207,218,185,0) 70%); animation: fxDrift 18s ease-in-out infinite; } html.fx .homePage .homePets::before{ width: 26vw; height: 26vw; max-width: 440px; max-height: 440px; top: 8%; right: -8vw; background: radial-gradient(circle, rgba(243,197,122,.7), rgba(243,197,122,0) 70%); animation: fxDrift 22s ease-in-out infinite reverse; } html.fx .homePage .homePets::after{ width: 18vw; height: 18vw; max-width: 300px; max-height: 300px; bottom: 6%; left: -4vw; background: radial-gradient(circle, rgba(199,226,255,.7), rgba(199,226,255,0) 70%); animation: fxDrift 26s ease-in-out infinite; } @keyframes fxDrift{ 0% { translate: 0 0; } 50% { translate: 3vw -4vh; } 100% { translate: 0 0; } } /* ── 發票碼停靠時輕輕呼吸一下 ──────────────────────────────── */ html.fx .homePage .invoiceWrap.isDocked.dockIn .invoiceCode strong{ animation: fxPulse 2.6s ease-in-out 1s infinite; } @keyframes fxPulse{ 0%, 100% { scale: 1; } 50% { scale: 1.045; } } /* ── 減少動態：關掉「動」，保留「狀態」 ────────────────────── */ @media (prefers-reduced-motion: reduce){ html.fx .homePage .homeHero::before{ animation: none !important; scale: 1 !important; translate: none !important; } html.fx .homePage .homeHeroText h1, html.fx .homePage .homeHeroText .heroSub, html.fx .homePage .homeHeroText .heroSlogan{ opacity: 1 !important; translate: none !important; transition: none !important; } html.fx .homePage .homeEntry, html.fx .homePage .statBox{ opacity: 1 !important; translate: none !important; scale: none !important; } html.fx .homePage .homeSectionTitle::before, html.fx .homePage .homeSectionTitle::after{ scale: 1 1 !important; } html.fx .homePage .homeSectionTitle h2, html.fx .homePage .originCard .originPic, html.fx .homePage .originCard .originText{ opacity: 1 !important; translate: none !important; } html.fx .homePage .homeOrigin::before, html.fx .homePage .homePets::before, html.fx .homePage .homePets::after{ animation: none !important; } html.fx .homePage .invoiceWrap.isDocked.dockIn .invoiceCode strong{ animation: none !important; } .homePage .homeEntry{ transform: none !important; } }