/* 承泰首頁全站進場 = 進場動畫池 01「遮罩上滑」(搭配 ct-reveal.js;出處 ~/Desktop/Eric toolkit/進場動畫池/01-遮罩上滑/選擇器版-嘉誼/reveal.css) 原理:元素往下推一整個自身高度,同時把下半截剪掉 —— 兩者同速同曲線,「底邊」固定在原位,內容像從那條線下面升上來。 進場 1 秒、逐排錯開 0.12 秒(--rvd 由 ct-reveal.js 給);收回 0.6 秒、不錯開。--rvo = 元件自己原本的過場(滑過變色等),抄下來排在前面。 選擇器前面加 html.rv #top:站上按鈕、圓圈箭頭的滑過過場寫成 #top .ct-pill 這種(有 id),不加的話進場的過場會被蓋掉、變成瞬間跳出來(11-14 量到 MORE、最新消息箭頭中招)。 11-14 V18 加:清單分隔線、區塊上方灰線、關於我們數字上方那條線,從左往右畫出來(精華 26「線的出現從左往右滑出」)。 */ :root { --rv-ease: cubic-bezier(.22, 1, .36, 1); } .rv .rv-wait { visibility: hidden; } .rv-l { display: block; } html.rv #top .rv-a { transform: translateY(100%); clip-path: inset(0 0 100% 0); transition: var(--rvo,) transform .6s var(--rv-ease), clip-path .6s var(--rv-ease); } html.rv #top .rv-in .rv-a, html.rv #top .rv-a.rv-in { transform: none; clip-path: inset(0); transition: var(--rvo,) transform 1s var(--rv-ease) var(--rvd, 0s), clip-path 1s var(--rv-ease) var(--rvd, 0s); } html.rv #top .rv-img { clip-path: inset(100% 0 0 0); transition: var(--rvo,) clip-path .6s var(--rv-ease); } html.rv #top .rv-in .rv-img, html.rv #top .rv-img.rv-in { clip-path: inset(0); transition: var(--rvo,) clip-path 1.2s var(--rv-ease) var(--rvd, 0s); } html.rv #top .rv-img.-frame img { transform: translateY(10%) scale(1.12); transition: transform .6s var(--rv-ease); } html.rv #top .rv-in .rv-img.-frame img { transform: none; transition: transform 1.4s var(--rv-ease) var(--rvd, 0s); } /* ── 線從左往右畫出 ── 原本的框線改透明,同一個位置用偽元素畫一條一樣的線,scaleX 0 → 1 */ .rv .rv-ln { position: relative; } .rv .rv-ln + .rv-ln { border-top-color: transparent !important; } .rv .rv-ln + .rv-ln::before, .rv .sv-tanica-linklist > .rv-ln:last-child::after, .rv .ct-nw__list.rv-g::after, .rv #top .ct-ab__in::before, .rv #top .ct-ab__figs::before { content: ""; position: absolute; left: 0; right: 0; height: 0; border-top: var(--ct-rule); pointer-events: none; transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--rv-ease); } .rv .rv-ln + .rv-ln::before { top: -1px; } .rv-in .rv-ln + .rv-ln::before { transform: none; transition: transform 1.2s var(--rv-ease) calc(var(--i, 0) * .12s); } /* 收尾線:服務清單 = 最後一列的下框線;最新消息 = 整個清單的下框線 */ .rv .sv-tanica-linklist > .rv-ln:last-child { border-bottom-color: transparent !important; } .rv .sv-tanica-linklist > .rv-ln:last-child::after { bottom: -1px; } .rv .ct-nw__list.rv-g { position: relative; border-bottom-color: transparent !important; } .rv .ct-nw__list.rv-g::after { bottom: -1px; } .rv .sv-tanica-linklist.rv-in > .rv-ln:last-child::after, .rv .ct-nw__list.rv-in::after { transform: none; transition: transform 1.2s var(--rv-ease) calc(var(--n, 1) * .12s); } /* 服務清單在對標搬來的整包元件裡:它把偽元素的框線寬、li 的定位都用高優先權規則清掉(11-14 量到線寬 0、線對到整個區塊)→ 用同樣的 id 優先權 + !important 補回 */ html.rv #ctp-sv-tanica#ctp-sv-tanica .sv-tanica-linklist > .rv-ln { position: relative !important; } html.rv #ctp-sv-tanica#ctp-sv-tanica .sv-tanica-linklist > .rv-ln + .rv-ln::before, html.rv #ctp-sv-tanica#ctp-sv-tanica .sv-tanica-linklist > .rv-ln:last-child::after { border-top: 1px solid var(--ct-rule-c, #ccc) !important; left: 0 !important; right: 0 !important; width: auto !important; } /* 關於我們:區塊上方那條(ABOUT 標題進來時畫)、數字上方那條(數字那塊進來時畫) */ .rv #top .ct-ab__in { position: relative; border-top-color: transparent; } .rv #top .ct-ab__in::before { top: -1px; } .rv #top .ct-ab__in:has(.c-sectionTitle.rv-in)::before { transform: none; transition: transform 1.4s var(--rv-ease); } .rv #top .ct-ab__figs { position: relative; border-top-color: transparent; } .rv #top .ct-ab__figs::before { top: -1px; } .rv #top .ct-ab__figs.rv-in::before { transform: none; transition: transform 1.4s var(--rv-ease); } /* 服務項目上方那條(原本就是 ::before 畫的,ct-sv.css):SERVICE 小標進來時畫 */ .rv #ctp-sv-tanica#ctp-sv-tanica .sv-tanica-index__products__support::before { transform: scaleX(0); transform-origin: left center; transition: transform .6s var(--rv-ease); } .rv #ctp-sv-tanica#ctp-sv-tanica .sv-tanica-index__products__support:has(.sv-tanica-sectionheading__label.rv-in)::before { transform: none; transition: transform 1.4s var(--rv-ease); } /* 瀏覽途中打開「減少動態」、列印:全部直接顯示 */ .rv-off .rv-a, .rv-off .rv-img, .rv-off .rv-img img, .rv-off .rv-ln::before, .rv-off .rv-ln::after, .rv-off .rv-g::after, .rv-off #top .ct-ab__in::before, .rv-off #top .ct-ab__figs::before { transform: none !important; clip-path: none !important; transition: none !important; } @media print { .rv .rv-wait { visibility: visible; } .rv-a, .rv-img, .rv-img img, .rv-ln::before, .rv-ln::after, .rv-g::after { transform: none !important; clip-path: none !important; } } /* ══ 11-14 V18 頁尾品牌大字 = 進場動畫池 02(build.py ft_word();出處 TBI tbi.css .tbi-ftWord)══════════════════════════ logo 的 ChengTai 字母撐滿版心寬,夾在頁尾選單和底列中間;進畫面 20% 時字母一個接一個從底下升上來(每字慢 .06 秒),離開收回、再進來重播。 顏色 = 頁尾底色混 8% 白(實色,不用透明,字母重疊處才不會變深);--ftw-k 調淡度。 751 以上頁尾是左右兩欄(1024 以上照設計系統、平板照原站比例),大字在右欄裡往左延伸到左版邊: 頁尾設成尺寸容器,100cqw = 頁尾寬;右欄內框右緣 = 頁尾寬 − 版邊 → 大字寬 = 100cqw − 2 版邊、往左延伸 = 100% + 2 版邊 − 100cqw。 手機(≤750)右欄滿版沒有內距 → 左右直接留版邊。 */ #top .ct-ftword { overflow: hidden; margin-top: calc(6.4 * var(--ct-shr)); } #top .ct-ftword svg { display: block; width: 100%; height: auto; overflow: visible; fill: color-mix(in srgb, #fff var(--ftw-k, 8%), var(--ct-ft-bg, #2b2b2b)); } #top .ct-ftword + .c-footer-contentBottom { margin-top: calc(3.2 * var(--ct-shr)); } #top .c-footer { container-type: inline-size; } @media (min-width: 751px) { #top .ct-ftword { width: calc(100cqw - 2 * var(--ct-x)); margin-left: calc(100% + 2 * var(--ct-x) - 100cqw); } } @media (max-width: 750px) { #top .ct-ftword { margin: calc(4.8 * var(--ct-shr)) var(--ct-x) 0; } } .ct-ftl { transform-box: fill-box; transform: translateY(115%); transition: transform .6s cubic-bezier(.2, .85, .3, 1); } .ct-ftword.is-in .ct-ftl { transform: none; transition: transform .95s cubic-bezier(.2, .85, .3, 1) calc(var(--i) * .06s); } @media (prefers-reduced-motion: reduce) { .ct-ftl { transform: none !important; transition: none !important; } } /* ══ 11-15 V19 頁尾一屏 + 資料區對齊 ══════════════════════════════════════════════════════════════════════════════ ① Eric「頁尾想辦法弄到剩一屏 放得下 有點太長了」:原本 1440 寬 1079 高(一屏 790)。左右兩欄外框拆掉(display: contents), 裡面的東西直接排進頁尾內框的格線;上下留白跟視窗高走(min 寬度單位、視窗高 %),寬矮筆電再收一階(最下面那段)。 ② Eric 熱鍵(標註/20261115-011346,從標語畫箭頭到右上角)+ 對話「廚房設備領先者「承泰商業」移到右上角 這樣資料區 可以全部對齊」: 第一排 = logo;(標語先搬右上角,11-15 同晚 Eric「Page Top 按鈕做成右側釘選的按鈕 他那個位置放廚房設備領先者「承泰商業」 但是字體不要這麼粗 這麼大」→ 標語改放底列右邊(原 PAGE TOP 的位置),跟左邊隱私權那組字底切齊;字級字重 --ft-c*,拉桿頁 tune-ftc.html) 第二排 = 資料區五欄:公司據點(左欄,欄寬夠就名稱和地址同一行)、最新消息、服務項目、產品介紹、聯絡我們,五個標題同一列、底線同高。 大字照舊撐滿版心寬;底列(隱私權、網站地圖、版權 / PAGE TOP)在最下面。手機、平板(1023 以下)不動。 欄寬:1360 以上 Eric 選 B(熱鍵 11-15 01:51「資訊列看起來有點不舒服 是因為沒有均分嗎 但是公司據點有點長」): 公司據點欄 = 剛好裝下最長那行(max-content,台北那行;1645 寬 434),其他四欄平分剩下的寬(1645 寬各 200); 原本左欄沿用上面清單的分界線(1645 寬 532),據點字只有 434 → 欄右邊空一截、底線比字長很多;選單第一欄左緣因此不再對上面清單的分界線; 1200–1359 左欄縮成 39 單位,讓四欄選單放得下社群三顆圓鈕; 1024–1199 四欄太窄 → 三欄,聯絡我們接在最新消息下面(其他四個標題照樣同一列)。 */ @media (min-width: 1024px) { #top .c-footer { --ft-pt: min(calc(7.2 * var(--ct-shr)), 8svh); --ft-pb: min(calc(4 * var(--ct-shr)), 5svh); --ft-g1: min(calc(4.8 * var(--ct-shr)), 5svh); --ft-g2: min(calc(3.2 * var(--ct-shr)), 3.5svh); --ft-rg: min(calc(4 * var(--ct-shr)), 5svh); } #top .c-footer-inner { display: grid; box-sizing: border-box; width: auto; height: auto; align-items: start; row-gap: 0; column-gap: calc(3.2 * var(--ct-shr)); grid-template-columns: calc(39 * var(--ct-shr) + 7.5rem - 3.2 * var(--ct-shr)) repeat(3, minmax(0, 1fr)); grid-template-areas: "mark . . ." "offs news svc prod" "offs call svc prod" "word word word word" "legal legal catch catch"; padding: var(--ft-pt) var(--ct-x) var(--ft-pb); } #top .c-footer-head, #top .c-footer-content, #top .c-footer-nav, #top .c-footer-logo { display: contents; } #top .c-footer-logo > .ct-logo { grid-area: mark; } /* 標語在底列右邊:字底跟左邊隱私權、版權同一條(baseline);字級字重比原本(2.6 單位 700)小一階、細(Eric「字體不要這麼粗 這麼大」) */ #top .c-footer { --ft-cs: 1.7; --ft-cw: 400; --ft-cl: .2em; --ft-co: 1; } /* 11-15 Eric 拉桿定(tune-ftc):1.7 單位、400、字距 .2em、白 100% */ #top .c-footer-logo > .catch { grid-area: catch; justify-self: end; align-self: baseline; margin-top: var(--ft-g2); text-align: right; } #top .c-footer-logo .catch, #top .c-footer-logo .catch-text { font-size: max(calc(var(--ft-cs) * var(--ct-shr)), 15px); font-weight: var(--ft-cw); letter-spacing: var(--ft-cl); line-height: 1.5; color: rgb(255 255 255 / var(--ft-co)); } /* 字距 .2em 會在最後一個字後面多留一段空 → 靠右對齊時字停在版心右緣內 4px;最後一個字不留字距,字貼齊右緣 */ #top .c-footer-logo .catch .catch-text:last-child { letter-spacing: 0; } #top .c-footer-nav > .c-footer-navBlock:nth-child(1) { grid-area: news; } #top .c-footer-nav > .c-footer-navBlock:nth-child(2) { grid-area: svc; } #top .c-footer-nav > .c-footer-navBlock:nth-child(3) { grid-area: prod; } #top .c-footer-nav > .c-footer-navBlock.ct-fcall { grid-area: call; margin-top: var(--ft-rg); } #top .c-footer-nav > .c-footer-navBlock.ct-fcontact { grid-area: offs; } /* 資料區五欄同一排起:logo 那排下面留 --ft-rg */ #top .c-footer-nav > .c-footer-navBlock:nth-child(-n+3), #top .c-footer-nav > .c-footer-navBlock.ct-fcontact { margin-top: var(--ft-rg); } /* 公司據點:1359 以下左欄放不下名稱 + 地址一行(1280 寬台北那行會被擠斷、其他兩行沒斷,三個長得不一樣)→ 照原本名稱一行、地址一行 */ #top .ct-ftword { grid-area: word; width: auto; margin: var(--ft-g1) 0 0; } #top .c-footer-headContent { grid-area: legal; align-self: baseline; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.6rem; row-gap: .4em; margin-top: var(--ft-g2); } #top .c-footer-headContent .c-footer-privacyLink + .c-footer-privacyLink { margin-left: 0; } #top .c-footer-privacyLink, #top .c-footer-copyright { white-space: nowrap; } #top .c-footer-content > .c-footer-contentBottom { display: none; } /* PAGE TOP 改成右下角釘選圓鈕(ct.css),這格給標語 */ /* 11-15 V19 Eric「做一版 沒有分隔線的版本我看一下」→ 看過切換頁說「這個版本可以」:欄標題下的白 20% 細線拿掉; 標題到第一個連結原本線上下各留約 23px → 標題下內距 0、連結區上內距 1.6 單位(1645 寬字框差 20px,連結之間 12px,差 1.7 倍) */ #top .c-footer-categoryTitle::before { display: none; } #top .c-footer-categoryTitle { padding-bottom: 0; } #top .c-footer-categoryDescInner { padding-top: calc(1.6 * var(--ct-shr)); } } @media (min-width: 1200px) { /* 11-15 V19 Eric 熱鍵(標註/20261115-020843)「空白間距」「把最新消息 到聯絡我們 均分在這塊 然後不要有分隔線 看看」→「這個版本可以」: 每組只占自己的字寬(max-content);四組選單之間三段空一樣寬(1fr),聯絡我們貼右版邊; 公司據點 → 最新消息那段留白 = 組間空隙的 1.5 倍(1.5fr),一眼看出是兩群(1645 寬:組間 104、據點到最新消息 156)。 (前一版 B:據點欄剛好裝下字、四欄等寬 + 底線;拿掉底線後等寬欄的字寬不同,看起來空隙忽大忽小 → 改成空隙相等) */ #top .c-footer-inner { column-gap: 0; grid-template-columns: max-content 1.5fr max-content 1fr max-content 1fr max-content 1fr max-content; grid-template-areas: "mark . . . . . . . ." "offs . news . svc . prod . call" "word word word word word word word word word" "legal legal legal legal legal catch catch catch catch"; } /* 聯絡我們欄 = 字寬:三顆 44 圓鈕間距最多 8px */ #top .c-footer .ct-fcall .ct-fsoc { gap: min(calc(1 * var(--ct-shr)), 8px); } } @media (min-width: 1360px) { /* 公司據點:左欄夠寬 → 名稱和地址同一行(1366 起三行都放得下) */ #top .c-footer .ct-fcontact .ct-foff a { flex-direction: row; flex-wrap: wrap; column-gap: 1em; row-gap: 0; } #top .c-footer .ct-fcontact .ct-foff b { white-space: nowrap; } } /* 寬而矮的筆電(1536×740、1440×740 這種寬高比 ≥ 1.9)和 1359 以下(公司據點名稱地址分兩行、1024–1199 聯絡我們接在最新消息下面):留白再收一階, 都改成跟視窗高走(上 6.5%、欄間 4%、大字上 4.8%、底列上 3.5%、下 4%) */ @media (min-width: 1024px) and (min-aspect-ratio: 19 / 10), (min-width: 1024px) and (max-width: 1359px) { #top .c-footer { --ft-pt: min(calc(7.2 * var(--ct-shr)), 6.5svh); --ft-rg: min(calc(4 * var(--ct-shr)), 4svh); --ft-g1: min(calc(4.8 * var(--ct-shr)), 4.8svh); --ft-g2: min(calc(3.2 * var(--ct-shr)), 3.5svh); --ft-pb: min(calc(4 * var(--ct-shr)), 4svh); } } /* ══ 11-15 V20 熱鍵(標註/20261115-030419)「這個升起動畫想要在加上這個圓圈有點擠壓後彈跳的小動畫」══ i 的圓點(build.py ft_word() 最後那個 path,ct-ftdot)跟字母一起升上來(延遲 8 × .06 秒),快到定位時接一段: 往下壓扁(蓄力)→ 拉長跳起 → 落地再壓扁一下 → 回正。以圓點底邊中心為軸;用 translate / scale(不用 transform,不跟升起的過場打架)。 跳的高度 = 圓點高的 70%(1645 寬 35px;上方到聯絡我們那組還有 59px)。 大字外框原本 overflow hidden(字母從底下升上來要切掉下半),圓點往上跳會被切 → 改成只切底邊的 clip-path(上面留 1.2 倍字高、左右各 4%,壓扁變寬也不切)。 */ #top .ct-ftword { overflow: visible; clip-path: inset(-120% -4% 0 -4%); } .ct-ftdot { transform-origin: 50% 100%; } .ct-ftword.is-in .ct-ftdot { animation: ctDotBounce 1s cubic-bezier(.3, 0, .3, 1) 1.15s both; } @keyframes ctDotBounce { /* 只有快速移動時拉長,最高點是正圓(11-15 逐格看過:最高點停在拉長的橢圓不自然) */ 0% { translate: 0 0; scale: 1 1; } 14% { translate: 0 0; scale: 1.26 .74; animation-timing-function: cubic-bezier(.4, 0, 1, 1); } /* 壓扁蓄力 → 蹬出去 */ 22% { translate: 0 -24%; scale: .86 1.16; animation-timing-function: cubic-bezier(0, 0, .4, 1); } /* 剛離地,最快、最長 */ 40% { translate: 0 -70%; scale: 1 1; animation-timing-function: cubic-bezier(.6, 0, 1, 1); } /* 最高點,正圓 */ 56% { translate: 0 -22%; scale: .9 1.12; animation-timing-function: linear; } /* 往下掉,拉長 */ 62% { translate: 0 0; scale: .92 1.08; animation-timing-function: cubic-bezier(0, 0, .3, 1); } /* 碰到地 */ 70% { translate: 0 0; scale: 1.16 .84; animation-timing-function: ease-in-out; } /* 落地壓扁 */ 84% { translate: 0 0; scale: .97 1.03; } 100% { translate: 0 0; scale: 1 1; } } } @media (prefers-reduced-motion: reduce) { .ct-ftdot { animation: none !important; } #top .ct-ftword { clip-path: none; overflow: hidden; } }