/* LITEINK 淡墨｜全站樣式 - 色彩、字體、間距在 theme.json；這裡只放區塊編輯器做不到的細節。選擇器一律 li- 前綴。 - 速度規則（site/FRAMEWORK.md）：裝飾圖用 CSS 背景、動畫只用 CSS；捲動效果用瀏覽器內建的 view()／scroll()，不支援就是靜態畫面。 - 目錄：基礎 → 頁首頁尾 → 共用元件 → 首頁各區（首屏、跑馬燈、理念、服務、流程、作品、方案、聯絡）→ 內頁 → 方案卡 → 捲動動畫 → 手機 */ /* ===== 基礎 ===== */ :root { --li-ease: cubic-bezier(.22,1,.36,1); /* 金粉材質（2026-10-24，按鈕用）：SVG 雜訊只留最亮的少數點，像隨機灑落；gold＝淡金點（墨色底用）、dark＝深金＋白金點（金色底用） */ --li-dust-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.86 0 0 0 0 0.62 22 0 0 0 -15.40'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23s%29' opacity='1'/%3E%3C/svg%3E") 0 0 / 140px 140px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='1' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.82 0 0 0 0 0.66 0 0 0 0 0.3 22 0 0 0 -16.06'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23s%29' opacity='0.85'/%3E%3C/svg%3E") 0 0 / 190px 190px; --li-dust-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.43 0 0 0 0 0.31 0 0 0 0 0.08 22 0 0 0 -15.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23s%29' opacity='0.7'/%3E%3C/svg%3E") 0 0 / 140px 140px, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='1' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.97 0 0 0 0 0.88 22 0 0 0 -15.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23s%29' opacity='1'/%3E%3C/svg%3E") 0 0 / 170px 170px; --li-line: rgba(20,20,20,.12); --li-line-d: rgba(250,250,248,.14); --li-dim: #8C8C86; --li-sec: clamp(88px, 10vw, 130px); --li-wide: var(--wp--style--global--wide-size, 1240px); } body { -webkit-font-smoothing: antialiased; overflow-x: hidden } h1, h2, h3 { text-wrap: balance } :focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 4px } .wp-site-blocks > *, .wp-block-post-content > .alignfull { margin-block: 0 } .is-layout-constrained > .li-w { max-width: var(--li-wide) !important } /* 格狀排列的子項不吃 WordPress 預設的上方間距（否則第一格會比其他格高） */ .li-hero__grid > *, .li-facts > *, .li-head > *, .li-sec-head > *, .li-pair > *, .li-cells > *, .li-steps > *, .li-cta__grid > *, .li-contact > *, .li-alist > *, .li-faq__grid > * { margin-block-start: 0 !important } mark.has-inline-color { background: none } .li-sec-head h2, .li-head h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 14px } /* ===== 頁首 ===== */ .li-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: transparent !important; border-bottom: 1px solid transparent; padding-block: 12px } .li-top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(18,18,18,.92); backdrop-filter: blur(10px) } /* 模糊放底層：放在 header 本身會把手機全螢幕選單關在頁首那一條裡 */ /* 手機選單：墨黑全螢幕，宋體大字依序滑入，最後一項是需求諮詢（桌機不顯示這一項，桌機用右上按鈕） */ .li-nav .li-nav-cta, .li-nav .li-nav-line { display: none } /* 選單裡的「加入 LINE 好友」：放在需求諮詢下面，淡框按鈕（2026-10-25） */ .li-nav .is-menu-open .li-nav-line { display: block; border: 0 !important; margin-top: 12px; animation-delay: .48s !important } .li-nav .is-menu-open .li-nav-line .wp-block-navigation-item__content { box-sizing: border-box; font-family: var(--wp--preset--font-family--sans); font-size: 1rem; font-weight: 700; letter-spacing: .1em; text-align: center; border: 1px solid rgba(250,250,248,.4); padding: 15px 0 !important } .li-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--ink) !important; color: var(--wp--preset--color--paper) !important; padding: 22px 24px 40px } .li-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 64px !important; align-items: stretch !important } .li-nav .is-menu-open .wp-block-navigation__container { gap: 0 !important; width: 100%; align-items: stretch !important } .li-nav .is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--li-line-d); animation: li-menu-in .6s var(--li-ease) both } .li-nav .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: .06s } .li-nav .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: .12s } .li-nav .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: .18s } .li-nav .is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: .24s } .li-nav .is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: .3s } .li-nav .is-menu-open .wp-block-navigation-item:nth-child(7) { animation-delay: .36s } .li-nav .is-menu-open .wp-block-navigation-item:nth-child(8) { animation-delay: .42s } .li-nav .is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: 18px 0 !important; font-family: var(--wp--preset--font-family--serif); font-weight: 900; font-size: 1.7rem; letter-spacing: .08em; background: none } .li-nav .is-menu-open .current-menu-item .wp-block-navigation-item__content { color: var(--wp--preset--color--gold-l) } .li-nav .is-menu-open .li-nav-cta { display: block; border: 0; margin-top: 28px } .li-nav .is-menu-open .li-nav-cta .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--sans); font-size: 1rem; font-weight: 700; letter-spacing: .1em; text-align: center; background: var(--wp--preset--color--gold-l); color: #121212; padding: 16px 0 !important } /* 選單按鈕：三條線垂直置中，展開變 X、收合變回（2026-10-25）。關閉鈕由 mobile.js 放到開啟鈕同位置 */ .li-nav .wp-block-navigation__responsive-container-open, .li-nav .wp-block-navigation__responsive-container-close { width: 44px; height: 44px; padding: 0; margin: 0; position: relative; color: var(--wp--preset--color--paper); background: linear-gradient(currentColor, currentColor) center / 22px 2px no-repeat; transition: background-size .3s var(--li-ease) } .li-nav .wp-block-navigation__responsive-container-close { position: fixed; top: var(--li-bt, 8px); left: var(--li-bl, auto); right: auto; z-index: 2 } .li-nav .wp-block-navigation__responsive-container-open svg, .li-nav .wp-block-navigation__responsive-container-close svg { display: none } .li-nav .wp-block-navigation__responsive-container-open::before, .li-nav .wp-block-navigation__responsive-container-open::after, .li-nav .wp-block-navigation__responsive-container-close::before, .li-nav .wp-block-navigation__responsive-container-close::after { content: ""; position: absolute; left: 11px; top: 21px; width: 22px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .35s var(--li-ease) } .li-nav .wp-block-navigation__responsive-container-open::before { transform: translateY(-7px) } .li-nav .wp-block-navigation__responsive-container-open::after { transform: translateY(7px) } .has-modal-open .li-nav .wp-block-navigation__responsive-container-open, .li-nav .wp-block-navigation__responsive-container-close { background-size: 0 2px } .has-modal-open .li-nav .wp-block-navigation__responsive-container-open::before, .li-nav .wp-block-navigation__responsive-container-close::before { transform: rotate(45deg) } .has-modal-open .li-nav .wp-block-navigation__responsive-container-open::after, .li-nav .wp-block-navigation__responsive-container-close::after { transform: rotate(-45deg) } .li-nav .is-menu-open .wp-block-navigation__responsive-container-close { animation: li-bx-m .35s var(--li-ease) both } .li-nav .is-menu-open .wp-block-navigation__responsive-container-close::before { animation: li-bx-1 .35s var(--li-ease) both } .li-nav .is-menu-open .wp-block-navigation__responsive-container-close::after { animation: li-bx-2 .35s var(--li-ease) both } @keyframes li-bx-m { from { background-size: 22px 2px } } @keyframes li-bx-1 { from { transform: translateY(-7px) } } @keyframes li-bx-2 { from { transform: translateY(7px) } } @media (prefers-reduced-motion: reduce) { .li-nav .wp-block-navigation__responsive-container-open, .li-nav .wp-block-navigation__responsive-container-open::before, .li-nav .wp-block-navigation__responsive-container-open::after { transition: none } .li-nav .is-menu-open .wp-block-navigation__responsive-container-close, .li-nav .is-menu-open .wp-block-navigation__responsive-container-close::before, .li-nav .is-menu-open .wp-block-navigation__responsive-container-close::after { animation: none } } /* 矮螢幕（例 360×640）：選單 7 項＋需求諮詢要一頁看完，縮小間距與字級（2026-10-24 加入建站筆記後） */ @media (max-height: 760px) { .li-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 40px !important } .li-nav .is-menu-open .wp-block-navigation-item__content { padding: 11px 0 !important; font-size: 1.4rem } .li-nav .is-menu-open .li-nav-cta { margin-top: 18px } } @keyframes li-menu-in { from { opacity: 0; transform: translateX(24px) } } .li-top__in { gap: 32px } .li-top .wp-block-site-logo img { height: 46px; width: auto } .li-nav { margin-left: auto !important; font-size: .95rem; gap: 34px } .li-nav .wp-block-navigation__container { gap: 34px } .li-nav a { text-decoration: none; padding-block: 8px; background: linear-gradient(var(--wp--preset--color--gold-l), var(--wp--preset--color--gold-l)) left bottom / 0 1px no-repeat; transition: background-size .45s var(--li-ease) } .li-nav a:hover, .li-nav .current-menu-item a { background-size: 100% 1px; color: inherit } .li-top__cta { flex: none } /* 平板（600–1023px）六個選單項目排不下一行：和手機一樣改用選單按鈕＋墨黑全螢幕選單 */ @media (min-width: 600px) and (max-width: 1023px) { .li-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex } .li-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none } } /* ===== 頁尾 ===== */ .li-foot { padding-block: 72px 26px; position: relative; overflow: hidden } /* 頁尾聯絡區：左邊墨滴＋一句話＋諮詢方式與時段（讀網站資訊），右邊金色大按鈕＋Email；聯絡頁不顯示 */ .li-foot__cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; position: relative; padding-left: 76px } .li-foot__cta::before { content: ""; position: absolute; left: 0; top: 2px; width: 46px; aspect-ratio: 1; background: url(../img/mark-dark.webp) left top / contain no-repeat } /* 深色底用的墨滴（裁自深色版 Logo） */ .li-foot__cta > *, .li-foot__say > *, .li-foot__act > * { margin: 0 !important } .li-foot__title { font-family: var(--wp--preset--font-family--serif); font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.3; color: var(--wp--preset--color--paper); margin-bottom: 14px !important } .li-foot__meta { font-size: .95rem; line-height: 1.8 } .li-foot__act { display: flex; flex-direction: column; align-items: flex-end; gap: 14px } .li-foot__btn .wp-block-button .wp-block-button__link { min-height: 60px; padding: 0 44px; font-size: 1.05rem; font-weight: 700; letter-spacing: .08em } .li-foot__mail a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--li-line-d); padding-block: 10px 2px } .li-foot__mail a:hover { color: var(--wp--preset--color--paper); border-color: var(--wp--preset--color--gold-l) } /* 頁尾：LINE 為主要聯絡，Email 小字備用（2026-10-25） */ .li-foot__act > .li-foot__email { margin-top: -8px !important; font-size: .85rem; opacity: .8 } .li-foot__act > .li-foot__email a { color: inherit; text-underline-offset: 4px } .li-foot__act > p:empty { display: none } /* LINE 加好友卡（聯絡頁）：QR＋說明＋按鈕；手機只留按鈕 */ .li-line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px; background: #fff; border: 1px solid var(--li-line); border-radius: 10px } .li-line > * { margin: 0 !important } .li-line__qrbox { display: grid; justify-items: center; gap: 8px } .li-line__qr { display: block; width: 140px; height: 140px; background: #fff } .li-line__tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border: 1px solid var(--li-line); border-radius: 999px; font-size: 12px; letter-spacing: .06em; color: var(--wp--preset--color--grey); background: #fff; white-space: nowrap } .li-line__tag img { display: block; height: 11px; width: auto } /* 墨暈：墨點由中心往外暈開，只播一次（不支援 @property 的瀏覽器直接顯示） */ @property --li-ink-r { syntax: ""; inherits: false; initial-value: 150% } .li-line__qr { -webkit-mask: radial-gradient(circle at 50% 50%, #000 var(--li-ink-r), transparent calc(var(--li-ink-r) + 12%)); mask: radial-gradient(circle at 50% 50%, #000 var(--li-ink-r), transparent calc(var(--li-ink-r) + 12%)); animation: li-ink-in 1.4s .2s var(--li-ease) both } @keyframes li-ink-in { from { --li-ink-r: 0% } to { --li-ink-r: 150% } } @media (prefers-reduced-motion: reduce) { .li-line__qr { animation: none } } .li-line__body > * { margin: 0 !important } .li-line__k { font-weight: 700; font-size: 1.02rem; color: var(--wp--preset--color--ink) } .li-line__s { font-size: .85rem; color: var(--wp--preset--color--grey); margin-top: 4px !important } .li-line__cta { margin-top: 18px !important } /* 按鈕用全站統一樣式（.wp-block-button），這裡只管間距 */ @media (max-width: 560px) { .li-line { grid-template-columns: minmax(0, 1fr); padding: 18px } .li-line__qrbox { display: none } .li-line__cta .wp-block-button__link { box-sizing: border-box; width: 100%; justify-content: center } } /* 金色細線：捲到頁尾時由左往右描出，收尾落一個金點 */ .li-foot__line { position: relative; height: 4px; margin-block: 52px 10px !important } .li-foot__line svg { display: block; width: 100%; height: 4px; overflow: visible; fill: none; stroke: var(--wp--preset--color--gold-l); stroke-width: 1 } .li-foot__line path { stroke-dasharray: 1; stroke-dashoffset: 0 } .li-foot__line::after { content: ""; position: absolute; right: -4px; top: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--gold-l) } .li-page-contact .li-foot { padding-top: 26px } .li-page-contact .li-foot__cta, .li-page-contact .li-foot__line { display: none } .li-foot::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 30%; background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold-l), transparent); animation: li-sweep 7s linear infinite } .li-foot p { margin: 0 } @keyframes li-sweep { from { transform: translateX(-100%) } to { transform: translateX(400%) } } /* ===== 共用元件 ===== */ .li-label { font-family: var(--wp--preset--font-family--latin); font-size: .78rem; letter-spacing: .32em; text-transform: uppercase; color: var(--wp--preset--color--grey); display: inline-flex; align-items: center; gap: 12px; margin-block: 0 } .is-layout-constrained > .li-label.li-w { display: flex } .li-label::before { content: ""; width: 7px; height: 7px; background: var(--wp--preset--color--gold); transform: rotate(45deg) } .has-ink-background-color .li-label { color: var(--wp--preset--color--mist) } .has-ink-background-color .li-label::before { background: var(--wp--preset--color--gold-l) } .li-muted { color: var(--wp--preset--color--grey) } .has-ink-background-color .li-muted { color: var(--wp--preset--color--mist) } .li-kicker { font-family: "LiteInk Italic", "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 1.3rem; color: var(--wp--preset--color--gold-l); margin: 0 } .li-lead { color: var(--wp--preset--color--mist); max-width: 30em } .li-sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 56px } .li-sec-head > p { max-width: 26em; margin: 0 } .li-ctas { gap: 24px; align-items: center; margin-top: 34px } /* 按鈕：底色由右往左刷入；箭頭用 CSS 畫 */ .wp-block-button .wp-block-button__link { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 26px; border-radius: 10px; transition: color .3s } /* 按鈕（2026-10-24 使用者選「柔角金粉」）：圓角 10px、底色灑金粉、內側一道金色細線；hover 仍是底色由右往左刷入 */ .wp-block-button:not(.li-btn-text) .wp-block-button__link { background: var(--li-dust-gold), linear-gradient(160deg, #262624, #121212 70%); color: var(--wp--preset--color--paper); box-shadow: inset 0 0 0 1px rgba(241, 217, 152, .32), 0 6px 18px -8px rgba(0, 0, 0, .45); --li-fill: var(--li-dust-dark), linear-gradient(160deg, #D8B45E, #B8903A) } .wp-block-button:not(.li-btn-text) .wp-block-button__link:hover { background: var(--li-dust-gold), linear-gradient(160deg, #262624, #121212 70%); color: #161310 } .wp-block-button .wp-block-button__link::before { content: ""; position: absolute; inset: 0; background: var(--li-fill, var(--wp--preset--color--gold)); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--li-ease); z-index: -1 } .wp-block-button .wp-block-button__link:hover::before { transform: scaleX(1); transform-origin: left } .wp-block-button:not(.li-btn-text) .wp-block-button__link::after { content: ""; width: 14px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12M8 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12M8 1l4 4-4 4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .4s var(--li-ease) } .wp-block-button .wp-block-button__link:hover::after { transform: translateX(4px) } .wp-block-button.li-btn-gold .wp-block-button__link, .wp-block-button.li-btn-gold .wp-block-button__link:hover { /* 加 .wp-block-button 才蓋得過通用按鈕規則 */ background: var(--li-dust-dark), linear-gradient(160deg, #DDBB66, #B88F38 75%); color: #161310; box-shadow: inset 0 0 0 1px rgba(255, 248, 224, .5), 0 6px 18px -8px rgba(120, 86, 20, .6); --li-fill: var(--li-dust-gold), linear-gradient(160deg, #23221F, #121212) } .wp-block-button.li-btn-gold .wp-block-button__link:hover { color: #F1D998 } .wp-block-button.li-btn-paper .wp-block-button__link, .wp-block-button.li-btn-paper .wp-block-button__link:hover { background: var(--li-dust-dark), linear-gradient(160deg, #FFFFFF, #F1EFEA); color: var(--wp--preset--color--ink); box-shadow: inset 0 0 0 1px rgba(201, 162, 74, .45) } .wp-block-button.li-btn-paper .wp-block-button__link:hover { color: #161310 } .li-btn-text .wp-block-button__link, .li-btn-text .wp-block-button__link:hover { background: none; color: inherit; padding: 0; border-bottom: 1px solid currentColor; border-radius: 0; box-shadow: none } .li-btn-text .wp-block-button__link:hover { color: var(--wp--preset--color--gold); border-bottom-color: var(--wp--preset--color--gold) } .has-ink-background-color .li-btn-text .wp-block-button__link:hover, .li-foot .li-btn-text .wp-block-button__link:hover { color: #F1D998; border-bottom-color: #C9A24A } .li-btn-text .wp-block-button__link::before { display: none } /* ===== 首屏 ===== */ .li-hero { padding-block: 60px 0; overflow: hidden } .li-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 64px; gap: 40px; align-items: center } .li-hero__grid > * { margin: 0 !important } .li-hero__title { font-size: clamp(3rem, 7.8vw, 7.2rem); line-height: 1.12; letter-spacing: .02em; margin-top: 18px } .li-hero .li-lead { margin-top: 26px; font-size: 1.08rem } .li-vert { writing-mode: vertical-rl; letter-spacing: .5em; font-family: var(--wp--preset--font-family--serif); font-size: 1.2rem; color: var(--li-dim); justify-self: end } .li-geo { height: auto !important; width: 100%; max-width: 460px; aspect-ratio: 1; justify-self: center; position: relative; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Ccircle cx='200' cy='200' r='188' fill='none' stroke='%23C9A24A' stroke-width='.8' stroke-dasharray='2 9'/%3E%3C/svg%3E") center / 100% no-repeat; animation: li-in 1.6s var(--li-ease) both } .li-geo::before, .li-geo::after { content: ""; position: absolute; border-radius: 50% } .li-geo::before { inset: 0; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Crect x='70' y='70' width='260' height='260' fill='none' stroke='%233A3A38'/%3E%3Cpath d='M0 200h400M200 0v400' stroke='%232C2C2A'/%3E%3Ccircle cx='200' cy='12' r='5' fill='%23C9A24A'/%3E%3C/svg%3E") center / 100% no-repeat; animation: li-spin 60s linear infinite reverse } .li-geo::after { inset: 8%; background: url(../img/enso-dark.webp) center / contain no-repeat; mix-blend-mode: lighten; animation: li-spin 80s linear infinite } @keyframes li-spin { to { transform: rotate(360deg) } } @keyframes li-in { from { opacity: 0; transform: scale(.85) rotate(-20deg) } } .li-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--li-line-d); margin-top: 72px !important } .li-fact { padding: 26px 0 32px 28px; position: relative } .li-fact + .li-fact { border-left: 1px solid var(--li-line-d); padding-left: 56px } .li-fact::before { content: ""; position: absolute; left: 0; top: 36px; width: 10px; height: 10px; background: var(--wp--preset--color--gold-l); transform: rotate(45deg); animation: li-pulse 3.2s ease-in-out infinite } .li-fact + .li-fact::before { left: 28px; animation-delay: 1s } .li-fact:last-child::before { animation-delay: 2s } .li-fact p { margin: 0 } .li-fact__b { font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 900; line-height: 1.3 } .li-fact__s { color: var(--wp--preset--color--mist); font-size: .9rem } @keyframes li-pulse { 50% { transform: rotate(45deg) scale(1.18); opacity: .4 } } /* ===== 跑馬燈 ===== */ .li-marq { border-block: 1px solid var(--li-line); overflow: hidden; padding-block: 16px } .li-marq__track { width: max-content; margin: 0; white-space: nowrap; font-family: var(--wp--preset--font-family--latin); font-size: .82rem; letter-spacing: .34em; text-transform: uppercase; color: var(--wp--preset--color--grey); word-spacing: .6em; animation: li-slide 60s linear infinite } @keyframes li-slide { to { transform: translateX(-50%) } } /* ===== 理念：淡／墨 ===== */ .li-creed { padding-block: var(--li-sec); position: relative; overflow: clip } /* 底圖：首尾可無縫相接的長卷（1100×538），排 4 張寬、每次移動 1 張的距離，無限循環。 理念區山水向左飄、流程區河流與小橋向右飄。 */ .li-creed::before, .li-flow::before { --li-mh: clamp(240px, 37vw, 540px); content: ""; position: absolute; left: 0; bottom: 0; height: var(--li-mh); width: calc(var(--li-mh) * 1100 / 538 * 4); background: url(../img/mountain-loop.webp) left bottom / auto 100% repeat-x; mix-blend-mode: multiply; opacity: .5; pointer-events: none; will-change: transform; animation: li-scroll-l 90s linear infinite } @keyframes li-scroll-l { from { transform: translateX(0) } to { transform: translateX(-25%) } } @keyframes li-scroll-r { from { transform: translateX(-25%) } to { transform: translateX(0) } } .li-creed > *, .li-flow > * { position: relative } .li-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 64px } .li-head > p { max-width: 28em; margin: 0 } .li-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px } .li-pair__item { display: flex; gap: 28px; align-items: flex-start } .li-pair__item > * { margin: 0 !important } .li-big { flex: none; font-family: var(--wp--preset--font-family--serif); font-weight: 900; font-size: 7.5rem; line-height: 1; position: relative } .is-light .li-big { color: var(--wp--preset--color--mist) } .li-big.is-ink::before, .li-big.is-ink::after { content: ""; position: absolute; inset: -12%; border: 1px solid var(--wp--preset--color--gold); border-radius: 50%; opacity: 0; animation: li-ripple 6s var(--li-ease) infinite } .li-big.is-ink::after { animation-delay: 3s } @keyframes li-ripple { 0% { transform: scale(.3); opacity: 0 } 20% { opacity: .9 } 100% { transform: scale(1.15); opacity: 0 } } .li-pair h3 { font-family: var(--wp--preset--font-family--sans); font-size: 1rem; font-weight: 700; letter-spacing: .3em; color: var(--wp--preset--color--gold); margin: 0 0 14px } .is-light h3 { color: var(--wp--preset--color--grey) } .li-list { list-style: none; padding: 0; display: grid; gap: 10px; margin: 0 } .li-list li { display: flex; gap: 14px; align-items: baseline } .li-list li::before { content: ""; flex: none; width: 14px; height: 1px; background: var(--wp--preset--color--gold); transform: translateY(-5px) } .li-list.is-struck li { color: var(--wp--preset--color--grey); text-decoration: line-through; text-decoration-color: rgba(161,98,7,.6) } /* ===== 服務 ===== */ .li-svc { padding-block: var(--li-sec); position: relative; overflow: clip } .li-svc::before { content: ""; position: absolute; right: -120px; top: 40px; width: 520px; aspect-ratio: 1; opacity: .5; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23141414' stroke-width='.5'%3E%3Ccircle cx='200' cy='200' r='198'/%3E%3Ccircle cx='200' cy='200' r='140'/%3E%3Ccircle cx='200' cy='200' r='80'/%3E%3Cpath d='M200 2v396M2 200h396M60 60l280 280M340 60L60 340'/%3E%3C/g%3E%3Crect x='194' y='54' width='12' height='12' fill='%23A16207' transform='rotate(45 200 60)'/%3E%3C/svg%3E") center / contain no-repeat; animation: li-spin 120s linear infinite } .li-svc > * { position: relative } .li-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--wp--preset--color--ink); background: var(--wp--preset--color--paper) } .li-cell { padding: 110px 26px 40px; border-right: 1px solid var(--li-line); position: relative; transition: background .5s var(--li-ease) } .li-cell:first-child { padding-left: 0 } .li-cell:last-child { border-right: 0 } .li-cell:hover { background: var(--wp--preset--color--paper-2) } .li-cell > * { margin: 0 0 14px !important } .li-cell::before { content: ""; position: absolute; left: 26px; top: 34px; width: 64px; height: 64px; background: var(--li-ico) center / contain no-repeat } .li-cell:first-child::before { left: 0 } .li-cell__k { position: absolute; right: 26px; top: 34px; font-family: var(--wp--preset--font-family--latin); font-size: .8rem; color: var(--wp--preset--color--grey); letter-spacing: .2em } .li-cell h3 { font-size: 1.45rem } .li-cell .li-muted { font-size: .96rem } .li-tag { font-size: .85rem; font-weight: 700; color: var(--wp--preset--color--gold); letter-spacing: .1em } .li-ico-a { --li-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke-width='1.2' stroke-linecap='square'%3E%3Cg stroke='%23141414'%3E%3Crect x='6' y='10' width='52' height='38'/%3E%3Cpath d='M6 20h52M24 56h16M32 48v8'/%3E%3C/g%3E%3Cpath stroke='%23A16207' d='M16 30h20M16 37h12'/%3E%3C/svg%3E") } .li-ico-b { --li-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke-width='1.2' stroke-linecap='square'%3E%3Cg stroke='%23141414'%3E%3Ccircle cx='32' cy='32' r='24'/%3E%3Cpath d='M8 32h48'/%3E%3Crect x='22' y='22' width='20' height='20'/%3E%3C/g%3E%3Cpath stroke='%23A16207' d='M32 8v48'/%3E%3C/svg%3E") } .li-ico-c { --li-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke-width='1.2' stroke-linecap='square'%3E%3Cpath stroke='%23141414' d='M6 12h8l6 30h30l6-20H18'/%3E%3Cg stroke='%23A16207'%3E%3Ccircle cx='24' cy='52' r='4'/%3E%3Ccircle cx='46' cy='52' r='4'/%3E%3C/g%3E%3C/svg%3E") } .li-ico-d { --li-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke-width='1.2' stroke-linecap='square'%3E%3Cpath stroke='%23141414' d='M50 22a20 20 0 1 0 3 14M24 32l6 6 12-12'/%3E%3Cpath stroke='%23A16207' d='M52 10v12H40'/%3E%3C/svg%3E") } /* ===== 流程 ===== */ .li-flow { padding-block: var(--li-sec); position: relative; overflow: clip } .li-flow::before { background-image: url(../img/river-loop.webp); opacity: .55; animation-name: li-scroll-r } .li-track { height: 2px !important; background: var(--li-line); margin-top: 10px !important; position: relative } .li-track::before { content: ""; position: absolute; inset: 0; background: var(--wp--preset--color--ink); transform-origin: left } .li-track::after { content: ""; position: absolute; right: -6px; top: -5px; width: 12px; height: 12px; background: var(--wp--preset--color--gold); transform: rotate(45deg) } .li-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0 !important } .li-step { padding: 30px 26px 0 0 } .li-step > * { margin: 0 0 10px !important } .li-step__n { font-family: var(--wp--preset--font-family--latin); font-size: 2.6rem; font-weight: 300; line-height: 1 } .li-step h3 { font-size: 1.3rem } .li-step .li-muted { font-size: .95rem } .li-ai-note { margin-top: 64px !important; max-width: 720px !important; background: var(--wp--preset--color--paper); padding: 22px 26px 22px 102px; border-left: 2px solid var(--wp--preset--color--gold); position: relative } .li-ai-note::before { content: ""; position: absolute; left: 26px; top: 50%; width: 56px; height: 56px; margin-top: -28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56' fill='none' stroke-width='1.2'%3E%3Cg stroke='%23141414'%3E%3Crect x='10' y='10' width='36' height='36'/%3E%3Cpath d='M28 2v8M28 46v8M2 28h8M46 28h8'/%3E%3C/g%3E%3Ccircle cx='28' cy='28' r='8' stroke='%23A16207'/%3E%3C/svg%3E") center / contain no-repeat } .is-layout-constrained > .li-ai-note.li-w { max-width: 720px !important; margin-left: max(0px, calc((100% - var(--li-wide)) / 2)) !important; margin-right: auto !important } /* ===== 作品 ===== */ .li-works-sec { padding-block: var(--li-sec) } .li-works { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px } .li-work { text-decoration: none; display: grid; gap: 14px; align-content: start; color: inherit } .li-work:nth-child(4n+1) { grid-column: 1 / span 7 } .li-work:nth-child(4n+2) { grid-column: 8 / span 5; margin-top: 110px } .li-work:nth-child(4n+3) { grid-column: 2 / span 5 } .li-work:nth-child(4n+4) { grid-column: 7 / span 6; margin-top: 60px } .li-work__im { overflow: hidden; position: relative; aspect-ratio: 4 / 3; background: var(--wp--preset--color--paper-2) } .li-work__im img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .9s var(--li-ease), transform 1.2s var(--li-ease) } .li-work:hover .li-work__im img { filter: grayscale(0); transform: scale(1.04) } .li-work__im::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(250,250,248,.7); pointer-events: none; transform: scale(1.04); opacity: 0; transition: .6s var(--li-ease) } .li-work:hover .li-work__im::after { transform: none; opacity: 1 } .li-work__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--li-line); padding-bottom: 12px } .li-work__meta h3 { font-size: 1.3rem; margin: 0 } .li-work__meta span { color: var(--wp--preset--color--grey); font-size: .88rem } /* ===== 首頁方案區（深色） ===== */ .li-plans-sec { padding-block: var(--li-sec) } .li-more { margin-top: 32px !important } .li-more a { color: var(--wp--preset--color--paper); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px } .li-more a:hover { color: var(--wp--preset--color--gold-l) } /* ===== 聯絡 ===== */ .li-cta { padding-block: var(--li-sec) 120px; overflow: clip } .li-cta__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center } .li-cta__grid > * { margin: 0 !important } .li-cta__title { font-size: clamp(2.6rem, 6vw, 5.4rem); line-height: 1.15; margin-top: 14px } .li-cta__title.is-sm { font-size: clamp(2.2rem, 4.4vw, 4rem) } .li-cta .li-muted { margin-top: 22px; max-width: 28em } .li-brush { height: auto !important; aspect-ratio: 2 / 1.25; position: relative; background: url(../img/brush.webp) center top / 100% auto no-repeat; mix-blend-mode: multiply } .li-brush::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 110px; margin-left: -55px; aspect-ratio: 240 / 232; background: url(../img/mark.webp) center / contain no-repeat; animation: li-float 6s ease-in-out infinite } @keyframes li-float { 50% { transform: translateY(-8px) } } .li-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--li-line); margin-top: 80px !important } .li-contact > div { padding: 22px 0 } .li-contact > div + div { padding-left: 26px; border-left: 1px solid var(--li-line) } .li-contact p { margin: 0 } .li-dt { font-family: var(--wp--preset--font-family--latin); font-size: .74rem; letter-spacing: .3em; color: var(--wp--preset--color--grey) } .li-dd { font-size: 1.05rem; margin-top: 4px !important; user-select: all } .li-note { color: var(--wp--preset--color--grey); font-size: .88rem } .has-ink-background-color .li-note { color: var(--li-dim) } /* 淺色底的首屏：英文小標改用白底專用的深金（淺金在白底對比不足） */ .li-wk-hero .li-kicker, .li-pr-hero .li-kicker, .li-ab-hero .li-kicker { color: var(--wp--preset--color--gold) } /* ===== 方案卡 block liteink/plans（放在深色區塊內） ===== */ .li-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch } .li-plan { border: 1px solid var(--li-line-d); padding: 40px 32px 34px; display: flex; flex-direction: column; gap: 16px; position: relative; isolation: isolate; color: var(--wp--preset--color--paper) } .li-plan.is-featured { border-color: transparent } .li-plan.is-featured::before { content: ""; position: absolute; inset: -1px; z-index: -2; background: conic-gradient(from var(--li-a, 0deg), transparent 0 70%, var(--wp--preset--color--gold-l) 85%, transparent 100%); animation: li-rot 6s linear infinite } .li-plan.is-featured::after { content: ""; position: absolute; inset: 0; background: #1B1B1A; z-index: -1 } @property --li-a { syntax: ""; initial-value: 0deg; inherits: false } @keyframes li-rot { to { --li-a: 360deg } } .li-plan h3 { font-size: 1.7rem; margin: 0 } .li-plan p, .li-plan ul { margin: 0 } .li-plan__code { font-family: var(--wp--preset--font-family--latin); font-size: .8rem; letter-spacing: .3em; color: var(--li-dim) } .li-plan__badge { position: absolute; right: 28px; top: 36px; font-size: .78rem; color: var(--wp--preset--color--gold-l); letter-spacing: .2em } .li-plan__for { color: var(--wp--preset--color--mist); font-size: .96rem } .li-plan__price { font-family: var(--wp--preset--font-family--serif); font-size: 2.2rem; font-weight: 900; line-height: 1.2; padding-top: 6px } .li-plan__price small { font-family: var(--wp--preset--font-family--sans); font-size: .85rem; font-weight: 400; color: var(--wp--preset--color--mist) } .li-plan__meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: .85rem; color: var(--wp--preset--color--mist) } .li-plan__meta span { display: inline-flex; gap: 8px; align-items: center } .li-plan__meta span::before { content: ""; width: 14px; height: 1px; background: var(--wp--preset--color--gold-l) } .li-plan ul { list-style: none; padding: 18px 0 0; display: grid; gap: 9px; font-size: .95rem; border-top: 1px solid var(--li-line-d) } .li-plan li { display: flex; gap: 12px; align-items: baseline } .li-plan li::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--wp--preset--color--gold-l); transform: rotate(45deg) translateY(-3px) } .li-plan__gap { flex: 1 } .li-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 26px; margin-top: auto; font-weight: 700; font-size: .95rem; text-decoration: none; position: relative; overflow: hidden; isolation: isolate; color: var(--wp--preset--color--paper); border: 1px solid rgba(250,250,248,.4); border-radius: 10px } /* 2026-10-24 柔角 */ .li-btn::before { content: ""; position: absolute; inset: 0; background: var(--wp--preset--color--paper); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--li-ease); z-index: -1 } .li-btn:hover::before { transform: scaleX(1); transform-origin: left } .li-btn:hover { color: var(--wp--preset--color--ink) } .li-btn svg { width: 16px; height: 16px; transition: transform .4s var(--li-ease) } .li-btn:hover svg { transform: translateX(4px) } .li-plan.is-featured .li-btn { background: var(--li-dust-dark), linear-gradient(160deg, #DDBB66, #B88F38 75%); color: #161310; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(255, 248, 224, .5), 0 6px 18px -8px rgba(120, 86, 20, .6) } .li-plan.is-featured .li-btn::before { background: var(--li-dust-gold), linear-gradient(160deg, #23221F, #121212) } .li-plan.is-featured .li-btn:hover { color: #F1D998 } /* ===== 內頁共用元件（方案頁起；首頁不使用，改這裡不會動到首頁） ===== */ .li-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0 !important } .li-plan__head { display: grid; gap: 16px } .li-plan__head > * { margin: 0 } .li-rows { display: grid; gap: 16px; margin-top: 24px } .li-plan.is-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; grid-template-areas: "head price btn" "head feat btn"; column-gap: 40px; row-gap: 12px; align-items: start; padding: 28px 32px } .li-plan.is-row .li-plan__head { grid-area: head } .li-plan.is-row .li-plan__price { grid-area: price; font-size: 1.6rem; padding-top: 0 } .li-plan.is-row ul { grid-area: feat; border-top: 0; padding-top: 0 } .li-plan.is-row .li-plan__meta, .li-plan.is-row .li-plan__gap { display: none } .li-plan.is-row .li-btn { grid-area: btn; align-self: center; margin-top: 0 } .li-plan.is-row .li-plan__badge { position: static } .li-custom { padding-block: var(--li-sec) } /* 比較表 */ .li-compare { padding-block: var(--li-sec) } .li-tbl { margin: 0 } @media (min-width: 561px) { .li-tbl.wp-block-table { overflow-x: visible } } /* 電腦版不需要左右滑；auto 會讓表格變捲動容器、每列的捲動動畫失效 */ .li-tbl table { border-collapse: collapse; width: 100%; font-size: .96rem } .li-tbl th, .li-tbl td { padding: 15px 14px; border: 0; border-bottom: 1px solid var(--li-line); text-align: center; vertical-align: middle } .li-tbl th:first-child, .li-tbl td:first-child { text-align: left; padding-left: 0; width: 34% } .li-tbl thead th { border-bottom: 1px solid var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--serif); font-weight: 900; font-size: 1.05rem; padding-block: 18px 14px } .li-tbl thead th:first-child { color: var(--wp--preset--color--grey); font-family: var(--wp--preset--font-family--sans); font-weight: 400; font-size: .85rem } .li-tbl th:nth-child(3), .li-tbl td:nth-child(3) { background: rgba(161,98,7,.05) } .li-tbl tr:has(td:nth-child(2):empty) td { font-family: var(--wp--preset--font-family--latin); font-size: .78rem; font-weight: 700; letter-spacing: .25em; color: var(--wp--preset--color--gold); padding-top: 34px; border-bottom-color: var(--wp--preset--color--ink); background: none } .li-tbl td { color: var(--wp--preset--color--ink-2) } .li-tbl figcaption { text-align: left; font-size: .85rem; color: var(--wp--preset--color--grey); margin-top: 18px } /* 加購 */ .li-addon { padding-block: var(--li-sec); position: relative; overflow: clip } .li-alist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; border-top: 1px solid var(--wp--preset--color--ink) } .li-aitem { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "n t pr" "n d u"; column-gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--li-line); transition: padding .5s var(--li-ease) } .li-aitem:hover { padding-left: 8px } .li-aitem > * { margin: 0 !important } .li-aitem__n { grid-area: n; font-family: var(--wp--preset--font-family--latin); font-size: .8rem; color: var(--wp--preset--color--grey); letter-spacing: .15em; padding-top: 4px } .li-aitem h3 { grid-area: t; font-family: var(--wp--preset--font-family--sans); font-size: 1.05rem; font-weight: 700 } .li-aitem .li-muted { grid-area: d; font-size: .9rem } .li-aitem__pr { grid-area: pr; font-family: var(--wp--preset--font-family--serif); font-weight: 900; text-align: right; white-space: nowrap } .li-aitem__u { grid-area: u; font-size: .78rem; color: var(--wp--preset--color--grey); text-align: right } .has-ink-background-color .li-tag { color: var(--wp--preset--color--gold-l) } /* 常見問題 */ .li-faq { padding-block: var(--li-sec) } .li-faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px } .li-faq__grid > * { margin: 0 !important } .li-faq__grid h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 14px } .li-qa { border-top: 1px solid var(--wp--preset--color--ink) } .li-qa details { border-bottom: 1px solid var(--li-line) } .li-qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 20px; align-items: center; padding: 22px 0; min-height: 48px; font-family: var(--wp--preset--font-family--serif); font-weight: 900; font-size: 1.12rem } .li-qa summary::-webkit-details-marker { display: none } .li-qa__pm { position: relative; width: 16px; height: 16px; justify-self: end } .li-qa__pm::before, .li-qa__pm::after { content: ""; position: absolute; left: 0; top: 7.5px; width: 16px; height: 1px; background: var(--wp--preset--color--ink); transition: transform .4s var(--li-ease) } .li-qa__pm::after { transform: rotate(90deg) } .li-qa details[open] .li-qa__pm::after { transform: rotate(0) } .li-qa details[open] summary { color: var(--wp--preset--color--gold) } .li-qa__a { padding: 0 44px 24px 0; color: var(--wp--preset--color--grey) } .li-qa__a p { margin: 0 0 .8em } /* =================================================================== 頁面專屬（每頁主題不重複，對照 site/DESIGN-MOTIFS.md） =================================================================== */ /* 共用小零件：方印（方案頁、作品頁才用） */ .li-seal { display: inline-grid; place-items: center; width: 64px; height: 64px; border: 2px solid var(--wp--preset--color--gold); color: var(--wp--preset--color--gold); font-family: var(--wp--preset--font-family--serif); font-weight: 900; font-size: 1.05rem; line-height: 1.1; writing-mode: vertical-rl; letter-spacing: .08em; transform: rotate(-4deg); margin: 0 } .li-seal.is-gold { border-color: var(--wp--preset--color--gold-l); color: var(--wp--preset--color--gold-l); width: 84px; height: 84px; font-size: 1.25rem } .li-back { font-size: .88rem; margin: 0 } .li-back a { text-decoration: none; color: var(--wp--preset--color--grey) } .li-back a:hover { color: var(--wp--preset--color--gold) } /* ── 方案與價格：帳冊與收據 ── */ .li-pl-hero { padding-block: 72px 96px } .li-pl-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center } .li-pl-hero__grid > * { margin: 0 !important } .li-pl-hero__title { font-size: var(--wp--preset--font-size--huge); line-height: 1.15; margin-top: 12px } .li-pl-board { border: 1px solid var(--li-line-d); padding: 30px 32px 26px; background: rgba(250,250,248,.025) } .li-pl-board > * { margin: 0 !important } .li-pl-board__title { font-family: var(--wp--preset--font-family--serif); font-weight: 900; letter-spacing: .5em; color: var(--wp--preset--color--gold-l); padding-bottom: 14px; border-bottom: 1px solid var(--li-line-d) } .li-pl-board__note { font-size: .82rem; color: var(--li-dim); padding-top: 16px } .li-ledger { margin: 0; padding: 6px 0 } .li-ledger__row { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px dashed var(--li-line-d) } .li-ledger dt { display: flex; align-items: baseline; flex: 1; min-width: 0; gap: 12px } .li-ledger dt::after { content: ""; flex: 1; border-bottom: 1px dotted rgba(250,250,248,.35); transform: translateY(-5px); transform-origin: left; animation: li-leader 1.1s var(--li-ease) both } .li-ledger__row:nth-child(2) dt::after { animation-delay: .12s } .li-ledger__row:nth-child(3) dt::after { animation-delay: .24s } .li-ledger__row:nth-child(4) dt::after { animation-delay: .36s } @keyframes li-leader { from { transform: translateY(-5px) scaleX(0) } } .li-ledger__code { font-family: var(--wp--preset--font-family--latin); font-size: .72rem; letter-spacing: .2em; color: var(--li-dim); flex: none } .li-ledger dd { margin: 0; font-family: var(--wp--preset--font-family--serif); font-weight: 900; white-space: nowrap } .li-pl-cards { padding-block: var(--li-sec) } .is-receipt .li-plan { background: #FFFFFF; color: var(--wp--preset--color--ink); border: 0; padding: 48px 34px 42px; -webkit-mask: radial-gradient(circle at 9px 0, transparent 6px, #000 6.5px) top / 18px 51% repeat-x, radial-gradient(circle at 9px 100%, transparent 6px, #000 6.5px) bottom / 18px 51% repeat-x; mask: radial-gradient(circle at 9px 0, transparent 6px, #000 6.5px) top / 18px 51% repeat-x, radial-gradient(circle at 9px 100%, transparent 6px, #000 6.5px) bottom / 18px 51% repeat-x } .is-receipt .li-plan.is-featured::before, .is-receipt .li-plan.is-featured::after { display: none } .is-receipt .li-plan__code { color: var(--wp--preset--color--grey) } .is-receipt .li-plan__for, .is-receipt .li-plan__meta, .is-receipt .li-plan__price small { color: var(--wp--preset--color--grey) } .is-receipt .li-plan__meta span::before { background: var(--wp--preset--color--gold) } .is-receipt .li-plan ul { border-top: 1px dashed rgba(20,20,20,.25) } .is-receipt .li-plan li::before { background: var(--wp--preset--color--gold) } .is-receipt .li-plan .li-btn { color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink) } .is-receipt .li-plan .li-btn::before { background: var(--wp--preset--color--ink) } .is-receipt .li-plan .li-btn:hover { color: var(--wp--preset--color--paper) } .is-receipt .li-plan.is-featured .li-btn { background: var(--li-dust-gold), linear-gradient(160deg, #262624, #121212 70%); color: var(--wp--preset--color--paper); border-color: transparent; box-shadow: inset 0 0 0 1px rgba(241, 217, 152, .32), 0 6px 18px -8px rgba(0, 0, 0, .45) } .is-receipt .li-plan.is-featured .li-btn::before { background: var(--li-dust-dark), linear-gradient(160deg, #D8B45E, #B8903A) } .is-receipt .li-plan.is-featured .li-btn:hover { color: #161310 } .is-receipt .li-plan__badge { top: 30px; right: 26px; width: 66px; height: 66px; display: grid; place-items: center; border: 2px solid var(--wp--preset--color--gold); color: var(--wp--preset--color--gold); font-family: var(--wp--preset--font-family--serif); font-weight: 900; font-size: .9rem; writing-mode: vertical-rl; letter-spacing: .06em; line-height: 1.15; transform: rotate(-6deg) } .is-receipt.li-rows { margin-top: 28px } .is-receipt .li-plan.is-row { padding: 40px 34px } .li-pl-scope { padding-block: var(--li-sec) } .li-stub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #FFFFFF; box-shadow: 0 1px 0 var(--li-line); -webkit-mask: radial-gradient(circle at 9px 0, transparent 6px, #000 6.5px) top / 18px 51% repeat-x, radial-gradient(circle at 9px 100%, transparent 6px, #000 6.5px) bottom / 18px 51% repeat-x; mask: radial-gradient(circle at 9px 0, transparent 6px, #000 6.5px) top / 18px 51% repeat-x, radial-gradient(circle at 9px 100%, transparent 6px, #000 6.5px) bottom / 18px 51% repeat-x } .li-stub > * { margin: 0 !important } .li-stub__part { padding: 56px 48px; position: relative } .li-stub__part.is-in { border-right: 2px dashed rgba(20,20,20,.22) } .li-stub__part h3 { font-size: 1.3rem; margin: 0 0 20px; letter-spacing: .1em } .li-stub__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px } .li-stub__list li { display: flex; gap: 14px; align-items: baseline } .is-in .li-stub__list li::before { content: "✓"; color: var(--wp--preset--color--gold); font-weight: 700 } .is-out .li-stub__list li { color: var(--wp--preset--color--grey) } .is-out .li-stub__list li::before { content: "＋"; color: var(--wp--preset--color--grey) } .li-seal.is-stamp { position: absolute; right: 40px; top: 44px } .li-pl-pay { padding-block: var(--li-sec) } .li-pl-seals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; position: relative } /* 三印三形（2026-10-24）：SVG 印＋金色暈光持續「呼吸」；三印之間金色虛線，金點由報價走到尾款循環 */ .li-pl-seals::before { content: ""; position: absolute; left: 122px; right: calc((100% - 96px) / 3 + 12px); top: 55px; /* 從第一枚印右緣到第三枚印左緣 */ height: 1px; background: repeating-linear-gradient(90deg, rgba(201, 162, 74, .45) 0 6px, transparent 6px 12px) } .li-pl-seals::after { content: ""; position: absolute; left: 122px; top: 52px; width: 7px; height: 7px; border-radius: 50%; background: #F1D998; box-shadow: 0 0 10px 2px rgba(241, 217, 152, .7); animation: li-seal-travel 6s var(--li-ease) infinite } @keyframes li-seal-travel { 0% { left: 122px; opacity: 0 } 8% { opacity: 1 } 45%, 52% { left: calc((100% - 96px) / 3 + 100px) } 92% { left: calc((100% - 96px) / 3 * 2 + 82px); opacity: 1 } 100% { left: calc((100% - 96px) / 3 * 2 + 82px); opacity: 0 } } .li-seal.is-svg { position: relative; z-index: 1; width: 110px; height: 110px; border: 0; padding: 0 } .li-seal.is-svg svg { width: 100%; height: 100%; overflow: visible } .li-seal.is-svg::before { content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(201, 162, 74, .28), transparent 70%); animation: li-breathe 4.8s ease-in-out infinite } .li-pl-seal-step:nth-child(2) .li-seal.is-svg::before { animation-delay: 1.6s } .li-pl-seal-step:nth-child(3) .li-seal.is-svg::before { animation-delay: 3.2s } @keyframes li-breathe { 0%, 100% { transform: scale(.82); opacity: .35 } 50% { transform: scale(1.06); opacity: 1 } } .li-pl-seals > * { margin: 0 !important } .li-pl-seal-step > * { margin: 0 0 12px !important } .li-pl-seal-step .li-seal { margin-bottom: 26px !important } .li-pl-seal-step h3 { font-size: 1.3rem } .li-pl-pay .li-tag { color: var(--wp--preset--color--gold-l) } .li-pl-payinfo { margin-top: 72px !important; border-top: 1px solid var(--li-line-d) } .li-pl-payinfo > div { display: flex; align-items: baseline; gap: 14px; padding: 16px 0; border-bottom: 1px dashed var(--li-line-d); margin: 0 !important } .li-pl-payinfo > div > * { margin: 0 !important } .li-pl-payinfo .li-dt { color: var(--li-dim); flex: none; width: 13em } .li-pl-payinfo .li-dd { color: var(--wp--preset--color--paper) } .li-pl-tear { padding-block: 88px 96px; background: #FFFFFF; position: relative } .li-pl-tear::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 12px; background: linear-gradient(135deg, var(--wp--preset--color--paper-2) 6px, transparent 0) 0 0 / 14px 12px repeat-x, linear-gradient(225deg, var(--wp--preset--color--paper-2) 6px, transparent 0) 0 0 / 14px 12px repeat-x } .li-pl-tear::after { content: "✂"; position: absolute; left: max(16px, calc((100% - var(--li-wide)) / 2)); top: 30px; font-size: 1.1rem; color: var(--wp--preset--color--grey); padding-right: 12px; background: #FFFFFF } .li-pl-tear__in { display: flex; justify-content: space-between; align-items: center; gap: 32px 56px; flex-wrap: wrap; border-top: 1px dashed rgba(20,20,20,.3); padding-top: 52px } .li-pl-tear__in > * { margin: 0 !important } .li-pl-tear__title { font-size: clamp(1.8rem, 3.4vw, 2.8rem) } /* ── 作品案例：畫軸與裱框 ── */ .li-wk-hero { padding-block: 72px 40px } .li-wk-scroll { max-width: 880px !important; margin-inline: auto !important; text-align: center; padding: 96px 64px 90px; position: relative; isolation: isolate } /* 畫心：底色＋淡錦紋（菱格方勝）＋上下回紋飾帶＋四角雲紋＋雙框線；只有這一層做展開動畫，文字不受影響 */ .li-wk-paper { position: absolute !important; inset: 0; height: auto !important; margin: 0 !important; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23A16207' stroke-width='1.2' stroke-linecap='round' stroke-opacity='.75'%3E%3Cg%3E%3Cpath d='M4 60V4h56'/%3E%3Cpath d='M12 52C12 30 22 14 40 13c10 0 14 8 9 13-4 4-11 2-10-4 1-4 6-4 7-1'/%3E%3Cpath d='M12 34c4-6 12-7 15-2 3 4 0 9-5 8-3-1-3-5 0-6'/%3E%3C/g%3E%3C/svg%3E") left 22px top 22px / 64px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23A16207' stroke-width='1.2' stroke-linecap='round' stroke-opacity='.75'%3E%3Cg transform='matrix(-1 0 0 1 64 0)'%3E%3Cpath d='M4 60V4h56'/%3E%3Cpath d='M12 52C12 30 22 14 40 13c10 0 14 8 9 13-4 4-11 2-10-4 1-4 6-4 7-1'/%3E%3Cpath d='M12 34c4-6 12-7 15-2 3 4 0 9-5 8-3-1-3-5 0-6'/%3E%3C/g%3E%3C/svg%3E") right 22px top 22px / 64px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23A16207' stroke-width='1.2' stroke-linecap='round' stroke-opacity='.75'%3E%3Cg transform='matrix(1 0 0 -1 0 64)'%3E%3Cpath d='M4 60V4h56'/%3E%3Cpath d='M12 52C12 30 22 14 40 13c10 0 14 8 9 13-4 4-11 2-10-4 1-4 6-4 7-1'/%3E%3Cpath d='M12 34c4-6 12-7 15-2 3 4 0 9-5 8-3-1-3-5 0-6'/%3E%3C/g%3E%3C/svg%3E") left 22px bottom 22px / 64px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23A16207' stroke-width='1.2' stroke-linecap='round' stroke-opacity='.75'%3E%3Cg transform='matrix(-1 0 0 -1 64 64)'%3E%3Cpath d='M4 60V4h56'/%3E%3Cpath d='M12 52C12 30 22 14 40 13c10 0 14 8 9 13-4 4-11 2-10-4 1-4 6-4 7-1'/%3E%3Cpath d='M12 34c4-6 12-7 15-2 3 4 0 9-5 8-3-1-3-5 0-6'/%3E%3C/g%3E%3C/svg%3E") right 22px bottom 22px / 64px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='none' stroke='%23A16207' stroke-opacity='.13'%3E%3Cpath d='M18 2l16 16-16 16L2 18z'/%3E%3Ccircle cx='18' cy='18' r='2.4'/%3E%3C/svg%3E") center / 36px 36px repeat, var(--wp--preset--color--paper-2); box-shadow: inset 0 0 0 10px var(--wp--preset--color--paper-2), inset 0 0 0 11px rgba(161,98,7,.45), inset 0 0 0 15px var(--wp--preset--color--paper-2), inset 0 0 0 16px rgba(161,98,7,.25); animation: li-unroll 1.4s var(--li-ease) both } .li-wk-paper::before, .li-wk-paper::after { content: ""; position: absolute; left: 96px; right: 96px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 23V1h22v22H7V7h10v10h-4v-4' fill='none' stroke='%23A16207' stroke-width='1.1' stroke-opacity='.7'/%3E%3C/svg%3E") center / 24px 24px round no-repeat } .li-wk-paper::before { top: 30px } .li-wk-paper::after { bottom: 30px } /* 金色畫軸＋兩端軸頭 */ .li-wk-scroll::before, .li-wk-scroll::after { content: ""; position: absolute; left: -34px; right: -34px; height: 18px; z-index: 1; background: radial-gradient(circle at 9px 50%, #E3C77A 0 3px, #8C5A0A 7px, #5E3A04 9px, transparent 9.5px) left / 18px 18px no-repeat, radial-gradient(circle at 9px 50%, #E3C77A 0 3px, #8C5A0A 7px, #5E3A04 9px, transparent 9.5px) right / 18px 18px no-repeat, linear-gradient(180deg, #E6CF8C, var(--wp--preset--color--gold) 55%, #7A4B05) center / calc(100% - 26px) 11px no-repeat; filter: drop-shadow(0 2px 3px rgba(20,20,20,.22)) } .li-wk-scroll::before { top: -9px; animation: li-rod-top 1.4s var(--li-ease) both } .li-wk-scroll::after { bottom: -9px; animation: li-rod-bottom 1.4s var(--li-ease) both } @keyframes li-unroll { from { clip-path: inset(50% 0 50% 0) } to { clip-path: inset(0) } } @keyframes li-rod-top { from { top: calc(50% - 9px) } } @keyframes li-rod-bottom { from { bottom: calc(50% - 9px) } } .li-wk-scroll > * { margin-inline: auto !important } .li-wk-hero__title { font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: 1.15; margin-top: 14px } .li-wk-hero__lead { color: var(--wp--preset--color--grey); max-width: 30em; margin-top: 24px !important } .li-wk-wall { padding-block: 40px var(--li-sec) } .li-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 48px } .li-chips a { text-decoration: none; font-size: .92rem; padding: 10px 18px; min-height: 44px; display: inline-flex; align-items: center; border: 1px solid var(--li-line); color: var(--wp--preset--color--ink-2) } .li-chips a:hover { border-color: var(--wp--preset--color--gold) } .li-chips a[aria-current] { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); border-color: var(--wp--preset--color--ink) } .li-empty { text-align: center; color: var(--wp--preset--color--grey) } .li-works.is-frame { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 36px } .li-works.is-frame:has(> :last-child:nth-child(3n+1)) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1000px; margin-inline: auto } /* 3 欄會剩 1 件落單時改 2 欄 */ .is-frame .li-work { display: grid; gap: 16px; align-content: start; text-decoration: none; color: inherit; margin: 0 !important; grid-column: auto !important; transition: transform .6s var(--li-ease) } .is-frame .li-work__im { padding: 18px; background: #FFFFFF; box-shadow: 0 1px 0 var(--li-line), 0 10px 30px rgba(20,20,20,.06); transition: box-shadow .6s var(--li-ease) } .is-frame .li-work__im img { aspect-ratio: 4 / 3; filter: none; transform: none !important; outline: 1px solid rgba(20,20,20,.55); outline-offset: 0 } .is-frame .li-work__im::after { inset: 9px; border: 1px solid var(--li-line); opacity: 1; transform: none; transition: border-color .6s var(--li-ease) } .is-frame .li-work:hover { transform: translateY(-6px) } .is-frame .li-work:hover .li-work__im { box-shadow: 0 1px 0 var(--li-line), 0 22px 44px rgba(20,20,20,.12) } .is-frame .li-work:hover .li-work__im::after { border-color: var(--wp--preset--color--gold) } .is-frame .li-work__meta { border: 0; padding: 0; justify-content: center; flex-direction: column; align-items: center; gap: 4px; text-align: center } .li-work__tag { position: absolute; left: 28px; top: 28px; font-size: .75rem; letter-spacing: .1em; background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); padding: 4px 10px; border: 1px solid var(--wp--preset--color--gold) } .li-work__sum { margin: 0; text-align: center; font-size: .9rem; color: var(--wp--preset--color--grey) } .li-wk-sign { padding-block: 140px 150px } .li-wk-sign__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; gap: 48px; align-items: center } /* 落款大印（2026-10-24 放大＋透明底）：直書寫完後，印泥由中心向外滲進宣紙，由淡而濃、由糊而清，印章微轉落定 */ @property --li-seal { syntax: ''; inherits: false; initial-value: 100% } .li-wk-bigseal { height: auto !important; width: min(260px, 100%); aspect-ratio: 284 / 292; justify-self: center; margin: 0 !important; background: url(../img/seal-liteink.webp) center / contain no-repeat; transform: rotate(-3deg); -webkit-mask: radial-gradient(circle at 46% 54%, #000 var(--li-seal), transparent calc(var(--li-seal) + 22%)); mask: radial-gradient(circle at 46% 54%, #000 var(--li-seal), transparent calc(var(--li-seal) + 22%)) } .li-wk-sign__in > * { margin: 0 !important } .li-wk-sign__title { font-size: clamp(2.2rem, 4.4vw, 3.8rem); line-height: 1.2 } .li-wk-sign__text .li-muted { margin-top: 18px; max-width: 26em } .li-wk-sign__vert { writing-mode: vertical-rl; font-family: var(--wp--preset--font-family--serif); font-size: 1.5rem; letter-spacing: .45em; color: var(--wp--preset--color--ink-2); border-right: 1px solid var(--wp--preset--color--gold); padding-right: 18px } /* ── 案例頁：展開的卷軸 ── */ .li-cs-hero { padding-block: 64px 48px } .li-cs-hero__grid { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 48px; align-items: start } .li-cs-hero__grid > * { margin: 0 !important } .li-wd-vert { writing-mode: vertical-rl; font-family: var(--wp--preset--font-family--serif); font-size: 1.05rem; letter-spacing: .35em; color: var(--wp--preset--color--grey); border-right: 1px solid var(--wp--preset--color--gold); padding-right: 14px; margin: 0; justify-self: center } .li-cs-hero__main > * { margin: 0 0 18px !important } .li-cs-hero__title { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.15 } .li-cs-hero .li-wd-head__tags > span:not(.li-wd-tag) { display: none } .li-wd-head > * { margin: 0 0 14px } .li-wd-tag { display: inline-block; font-size: .78rem; letter-spacing: .1em; border: 1px solid var(--wp--preset--color--gold); color: var(--wp--preset--color--gold); padding: 3px 10px } .li-wd-head__sum { font-size: 1.12rem; color: var(--wp--preset--color--grey); max-width: 34em } .li-cs-img { padding-block: 8px 72px } .li-cs-img .wp-block-post-featured-image { padding: 22px; background: var(--wp--preset--color--paper-2); position: relative; margin: 0 auto } .li-cs-img .wp-block-post-featured-image::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(20,20,20,.35); pointer-events: none; animation: li-frame-in 1.6s var(--li-ease) both } @keyframes li-frame-in { from { clip-path: inset(50% 50%) } to { clip-path: inset(-1px) } } .li-cs-body { counter-reset: li-h; padding-bottom: 32px } .li-cs-body > h2 { font-size: 1.55rem; margin-top: 56px; counter-increment: li-h } .li-cs-body > h2::before { content: counter(li-h, cjk-ideographic) "、"; color: var(--wp--preset--color--gold) } .li-cs-body > p:first-of-type::first-letter { float: left; font-family: var(--wp--preset--font-family--serif); font-weight: 900; font-size: 3.4em; line-height: .95; margin: .08em .14em 0 0 } .li-cs-foot { padding-bottom: 96px } .li-wd-extras { display: grid; gap: 40px } .li-wd-box { border: 1px solid var(--wp--preset--color--ink); padding: 30px 32px } .li-wd-box__h { font-size: 1.15rem; letter-spacing: .2em; margin: 0 0 16px } .li-wd-box__note { font-size: .82rem; color: var(--wp--preset--color--grey); margin: 16px 0 0 } .li-wd-quote { margin: 0; position: relative; padding: 24px 0 0 64px } .li-wd-quote::before { content: "「"; position: absolute; left: 0; top: -10px; font-family: var(--wp--preset--font-family--serif); font-weight: 900; font-size: 5rem; line-height: 1; color: var(--wp--preset--color--gold) } .li-wd-quote blockquote { margin: 0; font-family: var(--wp--preset--font-family--serif); font-size: 1.35rem; line-height: 1.7 } .li-wd-quote figcaption { margin-top: 12px; color: var(--wp--preset--color--grey); font-size: .9rem } .li-wd-actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin: 0 } .li-wd-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); text-decoration: none; font-weight: 700 } .li-wd-btn:hover { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--paper) } .li-wd-link { min-height: 48px; display: inline-flex; align-items: center; border-bottom: 1px solid currentColor; text-decoration: none } .li-cs-more { padding-block: 72px 96px; border-top: 1px solid var(--li-line) } .li-cs-more__title { font-size: 1.4rem; letter-spacing: .2em } .li-works.is-row { grid-template-columns: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 30%); gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 16px; scrollbar-width: thin } .is-row .li-work { scroll-snap-align: start; margin: 0 !important; grid-column: auto !important; border-top: 2px solid var(--wp--preset--color--gold); padding-top: 14px; gap: 12px } .is-row .li-work__im img { aspect-ratio: 3 / 2; filter: none; transform: none !important } .is-row .li-work__im::after { display: none } .is-row .li-work__meta { border: 0; padding: 0; flex-direction: column; gap: 2px } .is-row .li-work__meta h3 { font-size: 1.1rem } /* ── 合作流程：一筆到底 ── */ .li-pr-hero { padding-block: 96px 0; text-align: center; position: relative } .li-pr-hero__in > * { margin-inline: auto !important } .li-pr-hero__title { font-size: clamp(3rem, 7vw, 6.2rem); line-height: 1.15; margin-top: 14px } .li-pr-hero__lead { color: var(--wp--preset--color--grey); max-width: 30em; margin-top: 24px !important } .li-pr-hero::after { content: ""; display: block; width: 3px; height: 120px; margin: 56px auto 0; background: linear-gradient(transparent, var(--wp--preset--color--ink)); border-radius: 2px } .li-pr-line { padding-block: 0 120px; position: relative; margin-top: 0 !important; overflow-x: clip } .li-pr-line::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 120px; width: 3px; margin-left: -1.5px; background: var(--wp--preset--color--ink); border-radius: 2px; transform-origin: top } .li-pr-line::after { content: ""; position: absolute; left: 50%; bottom: 104px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--wp--preset--color--ink) } .li-pr-steps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 140px; padding-top: 40px } .li-pr-steps > * { margin: 0 !important } .li-pr-step { position: relative; padding-block: 24px } .li-pr-step:nth-child(odd) { grid-column: 1; text-align: right } .li-pr-step:nth-child(even) { grid-column: 2; margin-top: 180px !important } .li-pr-step::before { content: ""; position: absolute; top: 64px; width: 56px; height: 1px; background: var(--wp--preset--color--ink) } .li-pr-step::after { content: ""; position: absolute; top: 58px; width: 13px; height: 13px; background: var(--wp--preset--color--gold); transform: rotate(45deg) } .li-pr-step:nth-child(odd)::before { right: -70px } .li-pr-step:nth-child(odd)::after { right: -77px } .li-pr-step:nth-child(even)::before { left: -70px } .li-pr-step:nth-child(even)::after { left: -77px } .li-pr-step > * { margin: 0 0 12px !important } .li-pr-step__n { font-family: var(--wp--preset--font-family--serif); font-weight: 900; font-size: 4rem; line-height: 1; color: var(--wp--preset--color--grey) } .li-pr-step h3 { font-size: 1.7rem } .li-pr-step__row { color: var(--wp--preset--color--grey); font-size: .96rem } .li-pr-step__row strong { display: block; color: var(--wp--preset--color--gold); font-size: .78rem; letter-spacing: .3em; font-weight: 700 } .li-pr-step__t { font-size: .85rem; font-weight: 700; color: var(--wp--preset--color--ink) } .li-pr-slips-sec { padding-block: var(--li-sec) } .li-pr-slips-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center } .li-pr-slips-grid > * { margin: 0 !important } .li-pr-slips-grid h2 { font-size: var(--wp--preset--font-size--x-large); margin: 14px 0 18px } .li-pr-slips-grid .li-note { margin-top: 18px } .li-slips { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: row-reverse; justify-content: center; gap: 12px } .li-slips li { writing-mode: vertical-rl; width: 60px; height: 320px; padding: 46px 0; display: flex; align-items: center; justify-content: flex-start; font-family: var(--wp--preset--font-family--serif); font-weight: 600; font-size: 1.08rem; letter-spacing: .3em; border-radius: 3px; background: linear-gradient(var(--wp--preset--color--ink-2), var(--wp--preset--color--ink-2)) 0 24px / 100% 2px no-repeat, linear-gradient(var(--wp--preset--color--ink-2), var(--wp--preset--color--ink-2)) 0 calc(100% - 24px) / 100% 2px no-repeat, repeating-linear-gradient(90deg, #FFFFFF 0 5px, #F6F4EE 5px 7px); box-shadow: inset 0 0 0 1px var(--li-line), 0 6px 14px rgba(20,20,20,.06) } .li-pr-split { --li-cut: 52%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: linear-gradient(102deg, var(--wp--preset--color--paper-2) 0 var(--li-cut), var(--wp--preset--color--ink) var(--li-cut) 100%); margin-block: 0 !important } @property --li-cut { syntax: ""; initial-value: 52%; inherits: false } .li-pr-split > * { margin: 0 !important } .li-pr-split__half { padding: 120px max(24px, 8vw) } .li-pr-split__half h2 { font-size: var(--wp--preset--font-size--x-large); margin: 14px 0 28px } .li-pr-split__half.is-dark { color: var(--wp--preset--color--paper); padding-left: max(40px, 9vw) } .li-pr-split__half.is-dark .li-label { color: var(--wp--preset--color--mist) } .li-pr-split__half.is-dark .li-label::before { background: var(--wp--preset--color--gold-l) } .li-pr-split__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; font-size: 1.05rem } .li-pr-split__list li { padding-bottom: 14px; border-bottom: 1px solid var(--li-line) } .is-dark .li-pr-split__list li { border-bottom-color: var(--li-line-d) } .li-pr-rules { padding-block: var(--li-sec) } .li-pr-rules__title { font-size: clamp(1.8rem, 3.6vw, 3rem) !important; margin-bottom: 56px !important } .li-pr-rules__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px } .li-pr-rules__cols > * { margin: 0 !important } .li-pr-rule { position: relative; padding-top: 34px } .li-pr-rule::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 6px; background: var(--wp--preset--color--ink); transform-origin: left } .li-pr-rule > * { margin: 0 0 12px !important } .li-pr-rule h3 { font-size: 1.8rem } .li-pr-faq { padding-block: var(--li-sec); background: var(--wp--preset--color--paper-2) } .li-pr-faq > h2 { font-size: var(--wp--preset--font-size--x-large); margin: 14px 0 40px } .li-pr-faq__sub { font-size: 1.25rem !important; letter-spacing: .2em; margin-block: 72px 20px !important } .li-dialog { margin: 0 } .li-dialog__item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px 48px; padding: 28px 0; border-top: 1px solid var(--li-line) } .li-dialog dt { font-family: var(--wp--preset--font-family--serif); font-weight: 900; font-size: 1.15rem; display: flex; gap: 14px; align-items: baseline } .li-dialog dd { margin: 0; color: var(--wp--preset--color--grey); display: flex; gap: 14px; align-items: baseline } .li-dialog dd p { margin: 0 } .li-dialog__mark { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); font-family: var(--wp--preset--font-family--serif); font-size: .9rem; transform: translateY(-2px) } .li-dialog__mark.is-a { background: none; color: var(--wp--preset--color--gold); border: 1px solid var(--wp--preset--color--gold) } .li-pr-end { padding-block: 0 130px; text-align: center } .li-pr-end::before { content: ""; display: block; width: 3px; height: 110px; margin: 0 auto 26px; background: linear-gradient(var(--wp--preset--color--paper), rgba(250,250,248,.2)) } .li-pr-end > * { margin-inline: auto !important } .li-pr-end__title { font-size: clamp(2.4rem, 5.4vw, 4.6rem); line-height: 1.2 } .li-pr-end__lead { color: var(--wp--preset--color--mist); margin-top: 20px !important } .li-pr-end__btns { justify-content: center } /* ── 關於淡墨：墨滴與墨色 ── */ .li-ab-hero { padding-block: 72px 110px } .li-ab-center { text-align: center; margin-inline: auto !important } .li-ab-drop { height: auto !important; width: 150px; aspect-ratio: 240 / 232; margin: 0 auto 26px !important; position: relative; background: url(../img/mark.webp) center / contain no-repeat } .li-ab-drop::before { content: ""; position: absolute; left: 50%; top: 78%; width: 240px; height: 70px; margin: -35px 0 0 -120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(20,20,20,.22), rgba(20,20,20,0)); z-index: -1; animation: li-bleed 6s ease-in-out infinite } @keyframes li-bleed { 0% { transform: scale(.4); opacity: 0 } 40% { opacity: 1 } 100% { transform: scale(1.6); opacity: 0 } } .li-ab-hero__title { font-size: clamp(2.8rem, 6.6vw, 6rem); line-height: 1.15; margin-top: 12px } .li-ab-hero__lead { color: var(--wp--preset--color--grey); max-width: 32em; margin-top: 24px !important } .li-ab-vert { padding-block: var(--li-sec); position: relative; overflow: hidden; background: radial-gradient(ellipse 55% 60% at 18% 30%, rgba(201,162,74,.10), transparent 70%), radial-gradient(ellipse 50% 70% at 85% 60%, rgba(250,250,248,.05), transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), #151514 !important } /* 淡墨在水中化開：白色淡墨兩層，各自緩慢放大旋轉、交錯淡入淡出 */ .li-ab-vert__ink { position: relative; height: auto !important; width: min(380px, 100%); aspect-ratio: 1; margin: 0 0 8px !important; pointer-events: none } .li-ab-vert__ink::before, .li-ab-vert__ink::after { content: ""; position: absolute; inset: 0; background: url(../img/ink-bloom-light.webp) center / contain no-repeat; mix-blend-mode: screen; opacity: 0; animation: li-diffuse 14s ease-in-out infinite } .li-ab-vert__ink::after { transform: rotate(140deg); animation-delay: -7s } @keyframes li-diffuse { 0% { transform: scale(.35) rotate(0); opacity: 0; filter: blur(8px) } 25% { opacity: .26 } 60% { opacity: .2; filter: blur(2px) } 100% { transform: scale(1.12) rotate(35deg); opacity: 0; filter: blur(3px) } } .li-ab-vert__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 64px; align-items: end } .li-ab-vert__grid > * { margin: 0 !important } .li-ab-vert__note { max-width: 22em } .li-ab-vert__note .li-muted { margin-top: 16px } .li-ab-vert__big { writing-mode: vertical-rl; font-family: var(--wp--preset--font-family--serif); font-weight: 900; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.55; letter-spacing: .12em; margin: 0 } .li-ab-tones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 0 !important } .li-ab-tones > * { margin: 0 !important } .li-ab-tone { padding: 72px 44px 80px; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end } .li-ab-tone > * { margin: 0 0 14px !important } .li-ab-tone__ch { font-family: var(--wp--preset--font-family--serif); font-weight: 900; font-size: 6.4rem; line-height: 1; margin-bottom: auto !important } .li-ab-tone h3 { font-size: 1.5rem } .li-ab-tone.is-light { background: #E9E8E3; color: var(--wp--preset--color--ink) } .li-ab-tone.is-light .li-ab-tone__ch { color: var(--wp--preset--color--grey) } .li-ab-tone.is-mid { background: #5E5E5B; color: var(--wp--preset--color--paper) } .li-ab-tone.is-mid .li-ab-tone__ch { color: #D4D4CF } .li-ab-tone.is-dark { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper) } .li-ab-tone.is-dark .li-ab-tone__ch { color: #8C8C86 } .li-ab-person { padding-block: var(--li-sec) } .li-ab-person__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center } .li-ab-person__grid > * { margin: 0 !important } .li-ab-person__name { font-family: var(--wp--preset--font-family--serif); font-weight: 900; font-size: 1.3rem; margin-top: 14px } .li-ab-person h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 14px } .li-ab-nums { padding-block: var(--li-sec) } .li-ab-nums__head { margin-bottom: 40px !important } .li-ab-nums__head h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 14px } .li-ab-num { display: grid; grid-template-columns: 140px minmax(0, 280px) minmax(0, 1fr); gap: 24px; align-items: baseline; padding-block: 30px; border-top: 1px solid var(--li-line); margin-block: 0 !important } .li-ab-num > * { margin: 0 !important } .li-ab-num__n { font-family: var(--wp--preset--font-family--serif); font-weight: 900; font-size: 4.2rem; line-height: 1; color: var(--wp--preset--color--gold) } .li-ab-num h3 { font-size: 1.5rem } .li-ab-end { padding-block: var(--li-sec) } .li-ab-end__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; align-items: center } .li-ab-end__grid > * { margin: 0 !important } .li-ab-end__title { font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.2 } .li-ab-end .li-muted { margin-top: 18px } /* 墨滴落紙：0～24% 墨滴加速落下（拉長）→ 24% 落紙瞬間濺灑炸開 → 24～78% 墨在宣紙上由模糊到清晰慢慢暈開 → 淡出循環 */ .li-ab-fall { height: 360px; position: relative; --li-t: 4.8s } /* 2026-10-24：循環由 6.5s 縮短，空白時間更短 */ .li-ab-fall > * { margin: 0 !important } .li-ab-fall::before { content: ""; position: absolute; left: 50%; top: 58%; width: 34px; height: 48px; margin: -24px 0 0 -17px; z-index: 2; /* 墨滴放大 1.7 倍 */ border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: radial-gradient(circle at 38% 62%, #5a5a58 0 3px, transparent 6px), radial-gradient(ellipse at 50% 70%, #262626, #050505 70%); clip-path: polygon(50% 0, 64% 34%, 100% 62%, 100% 100%, 0 100%, 0 62%, 36% 34%); animation: li-drop var(--li-t) cubic-bezier(.55,0,1,.45) infinite } .li-ab-fall__bloom, .li-ab-fall__splash { position: absolute !important; height: auto !important; aspect-ratio: 1; mix-blend-mode: multiply; pointer-events: none; opacity: 0 } .li-ab-fall__bloom { width: 300px; left: calc(50% - 150px); top: calc(58% - 150px); background: url(../img/ink-bloom.webp) center / contain no-repeat; animation: li-bloom var(--li-t) cubic-bezier(.2,.7,.3,1) infinite } .li-ab-fall__splash { width: 340px; left: calc(50% - 170px); top: calc(58% - 170px); background: url(../img/ink-splash.webp) center / contain no-repeat; animation: li-burst var(--li-t) cubic-bezier(.1,.9,.2,1) infinite } @keyframes li-drop { 0% { transform: translateY(-230px) scaleY(1); opacity: 0 } 2% { opacity: 1 } 22% { transform: translateY(-8px) scaleY(1.35) } 24% { transform: translateY(0) scale(1.4, .5); opacity: 1 } 25%, 100% { transform: translateY(0) scale(.2); opacity: 0 } } @keyframes li-burst { 0%, 23.5% { transform: scale(.12) rotate(-8deg); opacity: 0 } 25% { opacity: 1 } 31% { transform: scale(1) rotate(0) } 86% { transform: scale(1.03); opacity: .9 } 99%, 100% { transform: scale(1.04); opacity: 0 } } @keyframes li-bloom { 0%, 24% { transform: scale(.08); opacity: 0; filter: blur(10px) } 30% { opacity: .55 } 70% { transform: scale(1); opacity: .85; filter: blur(0) } 88% { opacity: .85 } 99%, 100% { transform: scale(1.06); opacity: 0; filter: blur(2px) } } /* ── 需求諮詢：信箋 ── */ .li-ct-hero { padding-block: 72px 64px } .li-ct-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: center } .li-ct-hero__grid > * { margin: 0 !important } .li-ct-hero__title { font-size: clamp(2.6rem, 5.8vw, 5rem); line-height: 1.15; margin-top: 12px } .li-ct-hero__lead { color: var(--wp--preset--color--grey); max-width: 30em; margin-top: 22px !important } .li-ct-hero .li-kicker { color: var(--wp--preset--color--gold) } .li-postmark { height: auto !important; width: 220px; aspect-ratio: 1; justify-self: center; position: relative; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cdefs%3E%3Cpath id='r' d='M100 100m-74 0a74 74 0 1 1 148 0a74 74 0 1 1-148 0'/%3E%3C/defs%3E%3Cg fill='none' stroke='%233A3A38' stroke-opacity='.8'%3E%3Ccircle cx='100' cy='100' r='96' stroke-width='2.2'/%3E%3Ccircle cx='100' cy='100' r='60' stroke-width='1.2'/%3E%3C/g%3E%3Ctext font-family='Archivo,Arial,sans-serif' font-size='13' letter-spacing='3.2' fill='%233A3A38' fill-opacity='.85'%3E%3CtextPath href='%23r'%3ELITEINK DIGITAL %E2%80%A2 WRITE TO US %E2%80%A2 TAIWAN %E2%80%A2%3C/textPath%3E%3C/text%3E%3Ctext x='100' y='96' text-anchor='middle' font-family='serif' font-weight='900' font-size='26' fill='%233A3A38' fill-opacity='.85'%3E%E6%B7%A1%E5%A2%A8%3C/text%3E%3Ctext x='100' y='120' text-anchor='middle' font-family='Archivo,Arial,sans-serif' font-size='11' letter-spacing='2' fill='%233A3A38' fill-opacity='.8'%3EPOST%3C/text%3E%3C/svg%3E") center / contain no-repeat; animation: li-spin 50s linear infinite } .li-postmark::before { content: ""; position: absolute; right: 92%; top: 22%; width: 120px; height: 56%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%233A3A38' stroke-opacity='.55' stroke-width='2'%3E%3Cpath d='M0 20q15-10 30 0t30 0t30 0t30 0M0 44q15-10 30 0t30 0t30 0t30 0M0 68q15-10 30 0t30 0t30 0t30 0M0 92q15-10 30 0t30 0t30 0t30 0'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; animation: li-spin 50s linear infinite reverse; transform-origin: calc(100% + 110px) 50% } .li-ct-main { padding-block: 96px var(--li-sec) } .li-ct-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start } .li-ct-grid > * { margin: 0 !important } .li-ct-side { position: sticky; top: 110px } .li-ct-side > * { margin: 0 0 22px !important } .li-ct-side__title { font-size: 1.4rem } .li-ct-info { border-top: 1px solid var(--li-line); padding-top: 14px } .li-ct-info > * { margin: 0 !important } .li-letter { position: relative; background: #FFFFFF; padding: 56px 56px 48px 84px; box-shadow: 0 1px 0 var(--li-line), 0 18px 44px rgba(20,20,20,.07) } .li-letter::before { content: ""; position: absolute; left: 52px; top: 0; bottom: 0; width: 5px; border-inline: 1px solid rgba(161,98,7,.35) } .li-letter::after { content: ""; position: absolute; right: 0; top: 0; width: 64px; height: 64px; background: linear-gradient(225deg, var(--wp--preset--color--paper-2) 50%, #E9E5DA 50%); box-shadow: -3px 3px 6px rgba(20,20,20,.08) } .li-letter__to { font-family: var(--wp--preset--font-family--serif); font-weight: 900; font-size: 1.25rem; letter-spacing: .2em; margin: 0 0 30px; padding-bottom: 12px; border-bottom: 1px solid var(--wp--preset--color--gold); display: inline-block } .li-letter__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 32px } .li-field { margin: 0 0 14px; display: grid; gap: 4px } .li-field.is-wide { grid-column: 1 / -1 } .li-field label { font-size: .86rem; color: var(--wp--preset--color--grey); display: flex; gap: 8px; align-items: center } .li-req, .li-opt { font-size: .7rem; letter-spacing: .1em; padding: 1px 6px } .li-req { color: var(--wp--preset--color--gold); border: 1px solid var(--wp--preset--color--gold) } .li-opt { color: var(--wp--preset--color--grey) } /* 格線：每個欄位底線由左往右依序畫出（信箋的格線） */ .li-field input, .li-field select, .li-field textarea { font: inherit; font-size: 1rem; color: var(--wp--preset--color--ink); border: 0; border-radius: 0; padding: 10px 2px; min-height: 46px; width: 100%; background: linear-gradient(rgba(161,98,7,.55), rgba(161,98,7,.55)) left bottom / 100% 1px no-repeat, transparent; animation: li-line-in .9s var(--li-ease) both } .li-letter__grid > :nth-child(2) :is(input, select, textarea) { animation-delay: .08s } .li-letter__grid > :nth-child(3) :is(input, select, textarea) { animation-delay: .16s } .li-letter__grid > :nth-child(4) :is(input, select, textarea) { animation-delay: .24s } .li-letter__grid > :nth-child(5) :is(input, select, textarea) { animation-delay: .32s } .li-letter__grid > :nth-child(6) :is(input, select, textarea) { animation-delay: .4s } .li-letter__grid > :nth-child(n+7) :is(input, select, textarea) { animation-delay: .5s } @keyframes li-line-in { from { background-size: 0 1px, auto } } .li-field textarea { resize: vertical; line-height: 26px; background: linear-gradient(rgba(161,98,7,.55), rgba(161,98,7,.55)) left bottom / 100% 1px no-repeat, repeating-linear-gradient(transparent 0 25px, rgba(161,98,7,.12) 25px 26px) } .li-field input:focus, .li-field select:focus, .li-field textarea:focus { outline: none; background-size: 100% 2px, auto; background-image: linear-gradient(var(--wp--preset--color--ink), var(--wp--preset--color--ink)), none } .li-field textarea:focus { background-image: linear-gradient(var(--wp--preset--color--ink), var(--wp--preset--color--ink)), repeating-linear-gradient(transparent 0 25px, rgba(161,98,7,.12) 25px 26px) } .li-field input:focus-visible, .li-field select:focus-visible, .li-field textarea:focus-visible { outline: 1px dashed var(--wp--preset--color--gold); outline-offset: 4px } .li-field.is-error input, .li-field.is-error select, .li-field.is-error textarea { background-image: linear-gradient(#B42318, #B42318); background-size: 100% 2px; animation: none } .li-field.is-error textarea { background-image: linear-gradient(#B42318, #B42318), repeating-linear-gradient(transparent 0 25px, rgba(161,98,7,.12) 25px 26px); background-size: 100% 2px, auto } .li-field__err { color: #B42318; font-size: .85rem } .li-field--check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 10px } .li-field--check input { width: 20px; height: 20px; min-height: 0; margin-top: 3px; accent-color: var(--wp--preset--color--ink) } .li-field--check label { color: var(--wp--preset--color--ink-2); font-size: .92rem; display: block } .li-field--check .li-field__err { grid-column: 2 } .li-letter__errors { border-left: 3px solid #B42318; background: #FDF3F2; padding: 14px 18px; margin: 0 0 26px; color: #7A1A12 } .li-letter__errors p, .li-letter__errors ul { margin: 0 } .li-letter__errors ul { padding-left: 1.2em; margin-top: 6px } .li-letter__errors a { color: inherit } .li-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden } .li-letter__send { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 28px 0 0 } .li-letter__btn { min-height: 50px; padding: 0 40px; border: 0; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); font: inherit; font-weight: 700; letter-spacing: .3em; cursor: pointer; transition: background .4s var(--li-ease) } .li-letter__btn:hover { background: var(--wp--preset--color--gold) } .li-letter__btn:disabled { opacity: .6; cursor: progress } .li-letter__note { font-size: .85rem; color: var(--wp--preset--color--grey) } .li-sent { background: #FFFFFF; padding: 64px 56px; text-align: center; box-shadow: 0 1px 0 var(--li-line), 0 18px 44px rgba(20,20,20,.07) } .li-sent > * { margin: 0 auto 16px } .li-sent p { max-width: 30em; color: var(--wp--preset--color--grey) } .li-sent__title { font-size: 2.2rem } .li-sent__env { display: block; width: 150px; height: 96px; position: relative; margin-bottom: 30px; background: var(--wp--preset--color--paper-2); border: 1px solid rgba(20,20,20,.35) } .li-sent__env::before { content: ""; position: absolute; inset: -1px -1px auto; height: 62px; background: #F6F3EC; border: 1px solid rgba(20,20,20,.35); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; animation: li-flap 1.2s .3s var(--li-ease) both } .li-sent__env::after { content: ""; position: absolute; left: 50%; top: 44px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: var(--wp--preset--color--gold); animation: li-wax .5s 1.3s var(--li-ease) both } @keyframes li-flap { from { transform: scaleY(-1) } } @keyframes li-wax { from { transform: scale(0) } } .li-sent__links { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap } .li-sent__links a { color: var(--wp--preset--color--ink); text-decoration: none; border-bottom: 1px solid currentColor; min-height: 44px; display: inline-flex; align-items: center } /* ── 隱私權政策、服務條款：書冊條文（兩頁共用） ── */ .li-lg-hero { padding-block: 72px 56px; border-bottom: 1px solid var(--li-line) } .li-lg-hero__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 56px; align-items: center } .li-lg-hero__grid > * { margin: 0 !important } .li-lg-label { writing-mode: vertical-rl; font-size: 2rem; letter-spacing: .35em; padding: 26px 16px; background: #FFFFFF; border: 1px solid var(--wp--preset--color--ink); box-shadow: inset 0 0 0 5px #FFFFFF, inset 0 0 0 6px rgba(20,20,20,.35), 8px 10px 0 var(--wp--preset--color--paper-2) } .li-lg-hero .li-kicker { color: var(--wp--preset--color--gold) } .li-lg-hero__lead { color: var(--wp--preset--color--grey); max-width: 32em; margin-top: 14px !important } .li-lg-ver { font-size: .85rem; color: var(--wp--preset--color--grey); margin-top: 10px !important } .li-lg { padding-block: 64px var(--li-sec); position: relative } .li-lg::before { content: ""; position: absolute; left: max(10px, calc((100% - var(--li-wide)) / 2 - 36px)); top: 64px; bottom: 64px; width: 8px; background: radial-gradient(circle, rgba(20,20,20,.45) 0 2px, transparent 2.5px) center top / 8px 64px repeat-y } .li-lg__grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 72px; align-items: start } .li-lg__grid > * { margin: 0 !important } .li-lg-toc { position: sticky; top: 110px; border-top: 2px solid var(--wp--preset--color--ink); padding-top: 14px } .li-lg-toc > * { margin: 0 !important } .li-lg-toc__title { font-family: var(--wp--preset--font-family--serif); font-weight: 900; letter-spacing: .4em; margin-bottom: 10px !important } .li-lg-toc__list { list-style: none; padding: 0; font-size: .9rem; display: grid; gap: 2px } .li-lg-toc__list a { text-decoration: none; color: var(--wp--preset--color--grey); display: block; padding: 6px 0 } .li-lg-toc__list a:hover { color: var(--wp--preset--color--gold) } .li-lg-body { max-width: 760px } .li-lg-body > h2 { font-size: 1.35rem; margin: 52px 0 14px; scroll-margin-top: 100px; padding-bottom: 10px; border-bottom: 1px solid var(--li-line) } .li-lg-body > h2:first-child { margin-top: 0 } .li-lg-body > p, .li-lg-body li { color: var(--wp--preset--color--ink-2) } .li-lg-body > ul { padding-left: 1.3em } /* ── 404：留白，一筆寫到一半斷了 ── */ .li-404 { padding-block: 150px 170px; min-height: 72vh; text-align: center } .li-404 > * { margin-inline: auto !important } .li-404__stroke { height: auto !important; width: min(560px, 88%); aspect-ratio: 640 / 183; background: url(../img/stroke-broken.webp) left center / 100% auto no-repeat; mix-blend-mode: darken; animation: li-halfway 2.6s cubic-bezier(.2,.75,.25,1) .2s both } @keyframes li-halfway { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } } .li-404__title { font-size: clamp(2rem, 4.4vw, 3.4rem); margin-top: 56px !important } .li-404__lead { color: var(--wp--preset--color--grey); margin-top: 16px !important } .li-404__links { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 36px !important } .li-404__links a { color: var(--wp--preset--color--ink); text-decoration: none; border-bottom: 1px solid currentColor; min-height: 44px; display: inline-flex; align-items: center } .li-404__links a:hover { color: var(--wp--preset--color--gold) } /* ── 付款與憑證說明：符節合契（左淡右墨兩半，鋸齒縫對上、金圓合成一枚） ── */ .li-tally { height: auto !important; position: relative; width: 210px; aspect-ratio: 210 / 330; justify-self: center } .li-tally::before, .li-tally::after { content: ""; position: absolute; top: 0; bottom: 0; width: 55% } .li-tally::before { left: 0; clip-path: polygon(0 0, 100% 0, 82% 12.5%, 100% 25%, 82% 37.5%, 100% 50%, 82% 62.5%, 100% 75%, 82% 87.5%, 100% 100%, 0 100%); background: radial-gradient(circle at 90.9% 50%, var(--wp--preset--color--gold) 0 9px, transparent 10px 30px, var(--wp--preset--color--gold) 31px 33px, transparent 34px), repeating-linear-gradient(180deg, transparent 0 22px, rgba(20,20,20,.06) 22px 23px), var(--wp--preset--color--paper-2) } .li-tally::after { left: 45%; clip-path: polygon(18.18% 0, 100% 0, 100% 100%, 18.18% 100%, 0 87.5%, 18.18% 75%, 0 62.5%, 18.18% 50%, 0 37.5%, 18.18% 25%, 0 12.5%); background: radial-gradient(circle at 9.09% 50%, var(--wp--preset--color--gold-l) 0 9px, transparent 10px 30px, var(--wp--preset--color--gold-l) 31px 33px, transparent 34px), repeating-linear-gradient(180deg, transparent 0 22px, rgba(250,250,248,.05) 22px 23px), #34322F } .li-pay-hero { padding-block: 72px 96px; overflow: hidden } .li-pay-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: center } .li-pay-hero__grid > * { margin: 0 !important } .li-pay-hero__grid > div > * { margin-block: 0 } .li-pay-hero__title { font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: 1.18; margin-top: 18px !important } .li-pay-hero .li-lead { margin-top: 24px !important; max-width: 34em } .li-pay-hero .li-tally { animation: li-tally-glow 2.2s var(--li-ease) .25s both } .li-pay-hero .li-tally::before { animation: li-tally-l 1.6s var(--li-ease) .25s both } .li-pay-hero .li-tally::after { animation: li-tally-r 1.6s var(--li-ease) .25s both } @keyframes li-tally-l { from { transform: translateX(-46px) } } @keyframes li-tally-r { from { transform: translateX(46px) translateY(14px) } } @keyframes li-tally-glow { 0%, 65% { filter: none } 80% { filter: drop-shadow(0 0 18px rgba(201,162,75,.5)) } 100% { filter: none } } .li-pay-method { padding-block: var(--li-sec); overflow-x: clip } .li-halves { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch } .li-halves > * { margin: 0 !important } .li-halves__part { padding: 44px 56px 44px 44px } .li-halves__part > * { margin: 0 } .li-halves__part h3 { font-size: 1.05rem; letter-spacing: .3em; margin-bottom: 20px } .li-halves__part ul { list-style: none; padding: 0; display: grid; gap: 12px } .li-halves__part li { display: flex; gap: 12px; align-items: baseline } .li-halves__part.is-yes { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 12.5%, 100% 25%, calc(100% - 16px) 37.5%, 100% 50%, calc(100% - 16px) 62.5%, 100% 75%, calc(100% - 16px) 87.5%, 100% 100%, 0 100%) } .li-halves__part.is-yes h3 { color: var(--wp--preset--color--gold-l) } .li-halves__part.is-yes li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--gold-l); transform: translateY(-2px) } .li-halves__part.is-no { margin-left: -16px !important; padding-left: 60px; background: var(--wp--preset--color--paper-2); color: var(--wp--preset--color--ink-2); clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 87.5%, 16px 75%, 0 62.5%, 16px 50%, 0 37.5%, 16px 25%, 0 12.5%) } .li-halves__part.is-no h3 { color: var(--wp--preset--color--grey) } .li-halves__part.is-no li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--wp--preset--color--grey); transform: translateY(-2px) } .li-pay-note { max-width: 46em; border-left: 2px solid var(--wp--preset--color--gold); padding: 4px 0 4px 20px; color: var(--wp--preset--color--grey); font-size: .95rem; margin-top: 40px !important } .is-layout-constrained > .li-pay-note.li-w { max-width: 46em !important; margin-left: max(0px, calc((100% - var(--li-wide)) / 2)) !important; margin-right: auto !important } .li-pay-docs { padding-block: var(--li-sec) } .li-pay-docs__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start } .li-pay-docs__grid > * { margin: 0 !important } .li-pay-docs__grid h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 14px } .li-doc { position: relative; padding: 30px 0 30px 74px; border-top: 1px solid var(--li-line); margin: 0 !important } .li-doc > * { margin: 0 } .li-doc h3 { font-size: 1.2rem; margin-bottom: 10px } .li-doc p { color: var(--wp--preset--color--ink-2) } .li-doc::before { content: ""; position: absolute; left: 0; top: 30px; width: 32px; height: 50px; background: radial-gradient(circle at 100% 50%, var(--wp--preset--color--gold) 0 6px, transparent 7px), #D8D2C5; clip-path: polygon(0 0, 100% 0, 78% 25%, 100% 50%, 78% 75%, 100% 100%, 0 100%) } .li-doc.is-right::before { left: 14px; background: radial-gradient(circle at 0 50%, var(--wp--preset--color--gold-l) 0 5px, transparent 6px), var(--wp--preset--color--ink); clip-path: polygon(22% 0, 100% 0, 100% 100%, 22% 100%, 0 75%, 22% 50%, 0 25%) } .li-pay-docs .li-pay-note { margin-top: 28px !important; max-width: none } .li-pay-faq { padding-block: var(--li-sec) } .li-qgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px } .li-qgrid__card { position: relative; background: var(--wp--preset--color--paper-2); padding: 46px 36px 34px; clip-path: polygon(0 0, calc(50% - 16px) 0, 50% 14px, calc(50% + 16px) 0, 100% 0, 100% 100%, 0 100%) } .li-qgrid__card::before { content: ""; position: absolute; left: calc(50% - 4px); top: 22px; width: 8px; height: 8px; background: var(--wp--preset--color--gold); border-radius: 50% } .li-qgrid__card h3 { font-size: 1.15rem; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--li-line) } .li-qgrid__card p { margin: 0 0 10px; color: var(--wp--preset--color--ink-2) } .li-qgrid__card p:last-child { margin-bottom: 0 } .li-pay-end { padding-block: 40px var(--li-sec); text-align: center } .li-pay-end > * { margin-inline: auto !important } .li-tally.is-small { width: 92px; margin-bottom: 44px !important } .li-tally.is-small::before { background: radial-gradient(circle at 90.9% 50%, var(--wp--preset--color--gold) 0 4px, transparent 5px 13px, var(--wp--preset--color--gold) 14px 15px, transparent 16px), var(--wp--preset--color--paper-2) } .li-tally.is-small::after { background: radial-gradient(circle at 9.09% 50%, var(--wp--preset--color--gold-l) 0 4px, transparent 5px 13px, var(--wp--preset--color--gold-l) 14px 15px, transparent 16px), #34322F } .li-pay-end__title { font-size: clamp(1.8rem, 3.6vw, 2.8rem) } .li-pay-end__lead { color: var(--wp--preset--color--grey); max-width: 32em; margin-top: 18px !important } .li-pay-end__btns { justify-content: center; flex-wrap: wrap } .li-pay-end__btns .li-btn-text .wp-block-button__link { min-height: 44px; display: inline-flex; align-items: center } /* 方案頁付款區、聯絡頁的付款說明連結 */ .li-pay-link { margin-top: 36px !important; font-size: .92rem; color: var(--li-dim) } .li-pay-link a { color: var(--wp--preset--color--gold-l); text-underline-offset: 4px } .li-ct-side .li-note a { color: inherit; text-underline-offset: 4px; text-decoration-color: var(--wp--preset--color--gold) } /* 網站資訊沒填的項目（例如還沒申請的 LINE）整列不顯示；條文頁的必要表格 */ .li-ct-info:has(> .li-dd:empty), .li-contact > div:has(> .li-dd:empty) { display: none } .li-dd a { color: inherit; text-underline-offset: 4px; text-decoration-color: var(--wp--preset--color--gold) } .li-lg-tbl { margin: 18px 0 22px } .li-lg-tbl table { border-collapse: collapse; width: 100%; font-size: .92rem } .li-lg-tbl th, .li-lg-tbl td { border: 0; border-bottom: 1px solid var(--li-line); padding: 12px 14px 12px 0; text-align: left; vertical-align: top; color: var(--wp--preset--color--ink-2) } .li-lg-tbl th { font-weight: 700; color: var(--wp--preset--color--ink); border-bottom: 2px solid var(--wp--preset--color--ink) } /* 品牌設計與影片頁的專用樣式在 page-brand-design.css（只有該頁載入）；以下兩個動畫全站共用（頁尾描線等） */ @keyframes li-draw { from { stroke-dashoffset: 1 } } @keyframes li-swatch { from { transform: scaleX(0) } } /* 頁尾連結 */ .li-foot__links { display: flex; gap: 22px; flex-wrap: wrap } .li-foot__links a { color: inherit; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center } .li-foot__links a:hover { color: var(--wp--preset--color--paper) } /* ===== 捲動動畫（瀏覽器內建；不支援就是靜態，內容永遠看得到） ===== 注意（2026-10-24）：外框不能用 overflow:hidden/auto（會變成捲動容器，區內 view() 動畫抓錯對象、一開始就跑完），要裁切請用 overflow:clip。 本身就要左右滑的列（案例頁其他案例、手機作品列與方案卡），子元素改用列本身宣告的具名時間軸 --li-row。 */ @supports (animation-timeline: view()) { .li-works.is-row, .li-cards { view-timeline: --li-row block } .is-row .li-work, .is-row .li-work__im { animation-timeline: --li-row !important; animation-range: entry 0% entry 60% !important } .is-row .li-work:nth-child(2), .is-row .li-work:nth-child(2) .li-work__im { animation-range: entry 8% entry 68% !important } .is-row .li-work:nth-child(3), .is-row .li-work:nth-child(3) .li-work__im { animation-range: entry 16% entry 76% !important } .li-top { animation: li-hdr linear both; animation-timeline: scroll(); animation-range: 0 40px } @keyframes li-hdr { to { border-bottom-color: var(--li-line-d) } } .li-sec-head, .li-head, .li-pair__item, .li-cell, .li-step, .li-plan, .li-cta__title, .li-aitem, .li-tbl tbody tr, .li-qa details { animation: li-up linear both; animation-timeline: view(); animation-range: entry 0% entry 45% } @keyframes li-up { from { clip-path: inset(-80px -80px 100% -80px); transform: translateY(48px) } to { clip-path: inset(-80px) } } /* 用遮罩不用透明度：文字不會半透明（對比檢測與閱讀都穩定） */ .li-cell::before { animation: li-wipe linear both; animation-timeline: view(); animation-range: entry 20% cover 35% } @keyframes li-wipe { from { clip-path: inset(0 100% 0 0) } } .li-work__im { animation: li-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 60% } @keyframes li-reveal { from { clip-path: inset(100% 0 0 0) } } .li-track { view-timeline: --li-track block } .li-track::before { animation: li-grow linear both; animation-timeline: --li-track; animation-range: cover 10% cover 60% } .li-track::after { animation: li-dot linear both; animation-timeline: --li-track; animation-range: cover 10% cover 60% } @keyframes li-grow { from { transform: scaleX(0) } } @keyframes li-dot { from { right: 100% } } .li-brush { animation: li-wipe linear both; animation-timeline: view(); animation-range: entry 10% cover 45% } /* 方案頁：收據由上往下印出、印章蓋下 */ .is-receipt .li-plan, .li-stub { animation: li-print linear both; animation-timeline: view(); animation-range: entry 0% entry 60% } @keyframes li-print { from { clip-path: inset(0 0 100% 0); transform: translateY(-24px) } to { clip-path: inset(-20px) } } .li-pl-seal-step .li-seal, .li-seal.is-stamp, .li-wk-bigseal { animation: li-stamp linear both; animation-timeline: view(); animation-range: entry 30% entry 70% } .li-pl-seal-step:nth-child(2) .li-seal { animation-range: entry 45% entry 85% } .li-pl-seal-step:nth-child(3) .li-seal { animation-range: entry 60% entry 100% } @keyframes li-stamp { from { transform: scale(1.9) rotate(-16deg) } 80% { transform: scale(.94) rotate(-3deg) } to { transform: scale(1) rotate(-4deg) } } /* 流程頁：墨線往下畫、步驟從兩側掛上、竹簡依序展開、斜線移動、粗墨線畫出 */ .li-pr-line { view-timeline: --li-line block } .li-pr-line::before { animation: li-draw-down linear both; animation-timeline: --li-line; animation-range: cover 10% cover 75% } .li-pr-line::after { animation: li-dot-in linear both; animation-timeline: --li-line; animation-range: cover 70% cover 78% } @keyframes li-draw-down { from { transform: scaleY(0) } } @keyframes li-dot-in { from { transform: scale(0) } } .li-pr-step { animation: li-side-l linear both; animation-timeline: view(); animation-range: entry 0% entry 55% } .li-pr-step:nth-child(even) { animation-name: li-side-r } @keyframes li-side-l { from { clip-path: inset(-40px -120px -40px 100%); transform: translateX(-40px) } to { clip-path: inset(-40px -120px) } } @keyframes li-side-r { from { clip-path: inset(-40px 100% -40px -120px); transform: translateX(40px) } to { clip-path: inset(-40px -120px) } } .li-slips li { animation: li-slip linear both; animation-timeline: view(); animation-range: entry 20% entry 60% } .li-slips li:nth-child(2) { animation-range: entry 26% entry 66% } .li-slips li:nth-child(3) { animation-range: entry 32% entry 72% } .li-slips li:nth-child(4) { animation-range: entry 38% entry 78% } .li-slips li:nth-child(5) { animation-range: entry 44% entry 84% } .li-slips li:nth-child(6) { animation-range: entry 50% entry 90% } @keyframes li-slip { from { clip-path: inset(0 0 0 100%) } to { clip-path: inset(-10px) } } .li-pr-split { animation: li-cut linear both; animation-timeline: view(); animation-range: cover 0% cover 100% } @keyframes li-cut { from { --li-cut: 44% } to { --li-cut: 58% } } .li-pr-rule::before { animation: li-bar linear both; animation-timeline: view(); animation-range: entry 30% entry 90% } @keyframes li-bar { from { transform: scaleX(0) } } .li-dialog__item, .li-pr-rule, .li-pr-slips-grid > div:first-child { animation: li-up linear both; animation-timeline: view(); animation-range: entry 0% entry 45% } /* 作品頁、案例頁 */ .is-frame .li-work { animation: li-hang linear both; animation-timeline: view(); animation-range: entry 0% entry 50% } @keyframes li-hang { from { clip-path: inset(0 0 100% 0); transform: translateY(-30px) } to { clip-path: inset(-40px) } } .li-wk-sign__vert { animation: li-vert-in linear both; animation-timeline: view(); animation-range: entry 20% entry 80% } .li-wk-bigseal { animation: li-seep linear both; animation-timeline: view(); animation-range: entry 85% cover 50% } /* 先題字、後用印 */ @keyframes li-seep { from { --li-seal: -22%; opacity: .3; filter: blur(4px); transform: rotate(-7deg) scale(1.04) } 55% { opacity: .9; filter: blur(1px) } to { --li-seal: 100%; opacity: 1; filter: blur(0); transform: rotate(-3deg) } } @keyframes li-vert-in { from { clip-path: inset(0 0 100% 0) } to { clip-path: inset(-10px) } } .li-wd-box, .li-wd-quote, .is-row .li-work, .li-lg-body > h2 { animation: li-up linear both; animation-timeline: view(); animation-range: entry 0% entry 45% } /* 關於頁：直書由上而下寫出、色塊浮起、數字寫出 */ .li-ab-vert__big { animation: li-vert-in linear both; animation-timeline: view(); animation-range: entry 10% cover 50% } .li-ab-tone { animation: li-up linear both; animation-timeline: view(); animation-range: entry 0% entry 50% } .li-ab-tone.is-mid { animation-range: entry 8% entry 58% } .li-ab-tone.is-dark { animation-range: entry 16% entry 66% } .li-ab-num { animation: li-up linear both; animation-timeline: view(); animation-range: entry 0% entry 45% } .li-ab-num__n { animation: li-write linear both; animation-timeline: view(); animation-range: entry 20% entry 70% } @keyframes li-write { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(-10px) } } /* 付款頁：方法兩半從左右合上、文件符節滑入、問答卡浮起、結尾符節合上 */ .li-halves { view-timeline: --li-halves block } .li-halves__part.is-yes { animation: li-half-l linear both; animation-timeline: --li-halves; animation-range: entry 10% cover 45% } .li-halves__part.is-no { animation: li-half-r linear both; animation-timeline: --li-halves; animation-range: entry 10% cover 45% } @keyframes li-half-l { from { transform: translateX(-36px) } } @keyframes li-half-r { from { transform: translateX(36px) } } .li-doc::before { animation: li-doc-in linear both; animation-timeline: view(); animation-range: entry 30% entry 90% } .li-doc.is-right::before { animation-name: li-doc-in-r } @keyframes li-doc-in { from { transform: translateX(-22px) } } @keyframes li-doc-in-r { from { transform: translateX(22px) } } .li-qgrid__card { animation: li-up linear both; animation-timeline: view(); animation-range: entry 0% entry 45% } .li-qgrid__card:nth-child(even) { animation-range: entry 8% entry 53% } /* 品牌設計頁：估價列、步驟與權利欄上浮，套準標記轉正 */ .li-bd-rate__row, .li-bd-step, .li-bd-col, .li-bd-cut { animation: li-up linear both; animation-timeline: view(); animation-range: entry 0% entry 45% } .li-reg [pathLength] { animation: li-draw linear both; animation-timeline: view(); animation-range: entry 30% cover 45% } .li-reg__dot { animation: li-dot-in linear both; animation-timeline: view(); animation-range: cover 40% cover 50% } .li-reg__dot { transform-box: fill-box; transform-origin: center } .li-foot { view-timeline: --li-foot block } /* 以整個頁尾進入畫面的進度來畫線；頁尾在最底，entry 100% 一定捲得到 */ .li-foot__line path { animation: li-draw linear both; animation-timeline: --li-foot; animation-range: entry 25% entry 95% } .li-foot__line::after { animation: li-dot-in linear both; animation-timeline: --li-foot; animation-range: entry 90% entry 100% } .li-bd-step__line rect { animation: li-draw linear both; animation-timeline: view(); animation-range: entry 0% cover 35% } .li-bd-col + .li-bd-col::before { animation: li-draw-down linear both; animation-timeline: view(); animation-range: entry 10% cover 40% } .li-bd-cuts::after { animation: li-swatch linear both; animation-timeline: view(); animation-range: entry 40% cover 60% } .li-tally.is-small::before { animation: li-tally-l linear both; animation-timeline: view(); animation-range: entry 40% cover 40% } .li-tally.is-small::after { animation: li-tally-r linear both; animation-timeline: view(); animation-range: entry 40% cover 40% } } /* ===== 平板、手機 ===== */ @media (max-width: 960px) { .li-nav { margin-left: 0 } .li-hero__grid, .li-head, .li-cta__grid { grid-template-columns: minmax(0, 1fr); gap: 36px } .li-geo { justify-self: start; max-width: 320px } .li-vert { writing-mode: horizontal-tb; letter-spacing: .3em; justify-self: start; font-size: 1rem } .li-pair { grid-template-columns: minmax(0, 1fr); gap: 44px } .li-big { font-size: 4.6rem } .li-cells { grid-template-columns: repeat(2, minmax(0, 1fr)) } .li-cell, .li-cell:first-child { padding: 104px 20px 32px; border-bottom: 1px solid var(--li-line) } .li-cell:first-child::before { left: 20px } .li-cell:nth-child(2n) { border-right: 0 } .li-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px } .li-works { grid-template-columns: minmax(0, 1fr) } .li-work:nth-child(n) { grid-column: auto; margin-top: 0 } .li-cards { grid-template-columns: minmax(0, 1fr); max-width: 560px } .li-plan.is-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "price" "feat" "btn"; padding: 28px 24px } .li-plan.is-row .li-btn { justify-self: start } .li-alist, .li-faq__grid { grid-template-columns: minmax(0, 1fr); gap: 36px } .li-pl-hero__grid, .li-pr-slips-grid, .li-ab-person__grid, .li-ab-end__grid { grid-template-columns: minmax(0, 1fr); gap: 44px } .li-ct-hero__grid, .li-ct-grid, .li-lg__grid { grid-template-columns: minmax(0, 1fr); gap: 40px } .li-ct-side, .li-lg-toc { position: static } .li-postmark { width: 170px; justify-self: start; margin-left: 110px !important } .li-lg::before { display: none } .li-pl-seals { grid-template-columns: minmax(0, 1fr); gap: 40px } .li-pl-seals::before, .li-pl-seals::after { display: none } .li-works.is-frame { grid-template-columns: repeat(2, minmax(0, 1fr)) } .li-wk-sign__in { grid-template-columns: minmax(0, 1fr) auto; } .li-wk-bigseal { width: min(220px, 100%) } .li-wk-sign__text { grid-column: 1 / -1 } .li-wk-bigseal { width: 180px; justify-self: start } .li-wk-scroll::before, .li-wk-scroll::after { left: -14px; right: -14px } /* 平板：金軸外伸 34px 會超出畫面 10px（ACCEPTANCE A01） */ .li-pr-steps { grid-template-columns: minmax(0, 1fr); padding-left: 48px } .li-pr-line::before, .li-pr-line::after { left: 34px } .li-pr-step:nth-child(n) { grid-column: 1; text-align: left; margin-top: 0 !important } .li-pr-step:nth-child(n)::before { left: -40px; right: auto; width: 28px } .li-pr-step:nth-child(n)::after { left: -47px; right: auto } .li-pr-split { grid-template-columns: minmax(0, 1fr); background: none } .li-pr-split__half.is-light { background: var(--wp--preset--color--paper-2) } .li-pr-split__half.is-dark { background: var(--wp--preset--color--ink); clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%); margin-top: -40px !important; padding-top: 140px } .li-pr-rules__cols { grid-template-columns: minmax(0, 1fr); gap: 40px } .li-dialog__item { grid-template-columns: minmax(0, 1fr) } .li-ab-tones { grid-template-columns: minmax(0, 1fr) } .li-ab-tone { min-height: 300px } .li-ab-num { grid-template-columns: 80px minmax(0, 1fr) } .li-ab-num .li-muted { grid-column: 2 } .li-ab-vert__grid { grid-template-columns: minmax(0, 1fr) } .li-ab-vert__big { order: -1; justify-self: center } } @media (max-width: 560px) { .li-top .wp-block-site-logo img { height: 40px } .li-foot { padding-top: 56px } .li-foot__cta { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 58px 0 0 } .li-foot__cta::before { top: 0; width: 40px } .li-foot__title { font-size: 1.55rem } .li-foot__act { align-items: stretch } .li-foot__btn .wp-block-button { width: 100% } .li-foot__btn .wp-block-button .wp-block-button__link { width: 100%; justify-content: center } .li-foot__line { margin-block: 36px 6px !important } .li-top__cta .wp-block-button__link { padding: 0 16px; font-size: .88rem } .li-facts, .li-contact { grid-template-columns: minmax(0, 1fr) } .li-fact + .li-fact { border-left: 0; border-top: 1px solid var(--li-line-d); padding-left: 28px } .li-fact + .li-fact::before { left: 0 } .li-contact > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--li-line) } .li-cells, .li-steps { grid-template-columns: minmax(0, 1fr) } .li-cell { border-right: 0 } .li-svc::before { width: 320px; right: -140px } .li-ai-note { padding-left: 26px; padding-top: 96px } .li-ai-note::before { top: 22px; margin-top: 0 } .li-plan { padding: 34px 24px 28px } .li-pair__item { flex-direction: column; gap: 14px } .li-big { font-size: 4rem } .li-brush { aspect-ratio: 2 / 1.6 } .li-tbl table { font-size: .82rem } .li-tbl th, .li-tbl td { padding: 12px 4px } .li-tbl th:first-child, .li-tbl td:first-child { width: 40% } .li-tbl thead th { font-size: .8rem; line-height: 1.35 } .li-aitem { grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "n t" "n d" "n pr" "n u" } .li-aitem__pr, .li-aitem__u { text-align: left } .li-qa__a { padding-right: 0 } .li-pl-board { padding: 24px 20px 20px } .li-ledger__row { flex-wrap: wrap; row-gap: 4px } .li-ledger dt::after { display: none } .li-ledger dd { width: 100%; text-align: right } .li-stub { grid-template-columns: minmax(0, 1fr) } .li-stub__part { padding: 44px 26px } .li-stub__part.is-in { border-right: 0; border-bottom: 2px dashed rgba(20,20,20,.22) } .li-seal.is-stamp { right: 22px; top: 34px } .is-receipt .li-plan { padding: 44px 24px 38px } .li-pl-payinfo > div { flex-direction: column; gap: 2px } .li-wk-scroll { padding: 84px 26px 78px } .li-wk-scroll::before, .li-wk-scroll::after { left: -12px; right: -12px } .li-wk-paper { background-size: 44px, 44px, 44px, 44px, 30px 30px, auto; background-position: left 16px top 16px, right 16px top 16px, left 16px bottom 16px, right 16px bottom 16px, center, center } .li-wk-paper::before, .li-wk-paper::after { left: 66px; right: 66px; height: 18px; background-size: 18px 18px } .li-wk-paper::before { top: 24px } .li-wk-paper::after { bottom: 24px } .li-works.is-frame { grid-template-columns: minmax(0, 1fr) } .li-wk-sign__in { gap: 28px } .li-wk-bigseal { width: min(180px, 100%) } .li-cs-hero__grid { grid-template-columns: 36px minmax(0, 1fr); gap: 20px } .li-wd-vert { font-size: .9rem; padding-right: 8px } .li-cs-img .wp-block-post-featured-image { padding: 12px } .li-works.is-row { grid-auto-columns: 78% } .li-slips { gap: 8px } .li-slips li { width: 44px; height: 260px; padding: 40px 0; font-size: .98rem; letter-spacing: .16em } .li-ab-tone__ch { font-size: 4.6rem } .li-ab-vert__big { font-size: 2.2rem } .li-ab-fall { height: 300px } .li-letter { padding: 44px 22px 36px 40px } .li-letter::before { left: 20px } .li-letter::after { width: 44px; height: 44px } .li-letter__grid { grid-template-columns: minmax(0, 1fr) } .li-sent { padding: 48px 24px } .li-lg-hero__grid { grid-template-columns: auto minmax(0, 1fr); gap: 24px } .li-lg-label { font-size: 1.4rem; padding: 18px 10px } .li-404 { padding-block: 100px 120px } .li-ab-fall__bloom { width: 240px; left: calc(50% - 120px); top: calc(58% - 120px) } .li-ab-fall__splash { width: 280px; left: calc(50% - 140px); top: calc(58% - 140px) } .li-ab-vert__ink { width: 260px; margin-inline: auto !important } .li-pay-hero__grid, .li-pay-docs__grid { grid-template-columns: minmax(0, 1fr); gap: 40px } .li-pay-hero .li-tally { justify-self: start; width: clamp(110px, 20vw, 150px) } .li-halves__part { padding: 36px 40px 36px 32px } .li-halves__part.is-no { padding-left: 44px } } @media (max-width: 560px) { .li-lg-tbl thead { display: none } .li-lg-tbl tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--li-line) } .li-lg-tbl td { display: block; border: 0; padding: 2px 0 } .li-lg-tbl td:first-child { font-weight: 700; color: var(--wp--preset--color--ink) } .li-halves { grid-template-columns: minmax(0, 1fr) } .li-halves__part, .li-halves__part.is-no { padding: 30px 24px } .li-halves__part.is-yes { padding-bottom: 42px; clip-path: polygon(0 0, 100% 0, 100% 100%, 87.5% calc(100% - 14px), 75% 100%, 62.5% calc(100% - 14px), 50% 100%, 37.5% calc(100% - 14px), 25% 100%, 12.5% calc(100% - 14px), 0 100%) } .li-halves__part.is-no { margin-left: 0 !important; margin-top: -14px !important; padding-top: 44px; clip-path: polygon(0 0, 12.5% 14px, 25% 0, 37.5% 14px, 50% 0, 62.5% 14px, 75% 0, 87.5% 14px, 100% 0, 100% 100%, 0 100%) } .li-qgrid { grid-template-columns: minmax(0, 1fr); gap: 20px } .li-qgrid__card { padding: 42px 24px 28px } .li-doc { padding-left: 56px } } /* ===== 手機從簡（2026-10-22 使用者：手機一切從簡，比電腦更說重點；動態保留但更簡單）===== 只影響 560px 以下；電腦版與後台內容不變。收起的是重複或次要的說明，價格、費用與限制都留著。 */ @media (max-width: 560px) { :root { --li-sec: 56px } .li-sec-head { margin-bottom: 28px; gap: 12px } .li-sec-head h2, .li-head h2, .li-ab-nums__head h2 { font-size: 1.75rem } .li-sec-head > p { font-size: .92rem } /* 首頁 */ .li-hero { padding-top: 36px } .li-hero__grid { gap: 24px } .li-geo { max-width: 160px; justify-self: end; margin-top: -8px !important } /* 比首屏說明文字小，手機 LCP 改由文字決定（ACCEPTANCE A02） */ .li-vert, .li-svc::before, .li-ai-note, .li-cell .li-muted, .li-step .li-muted { display: none } .li-facts { margin-top: 32px !important } .li-fact { padding: 16px 0 18px 28px } .li-pair { gap: 28px } .li-big { font-size: 3rem } .li-list li:nth-child(n+3) { display: none } .li-cells { grid-template-columns: repeat(2, minmax(0, 1fr)) } .li-cell, .li-cell:first-child { padding: 70px 14px 20px; border-right: 1px solid var(--li-line) } .li-cell:nth-child(2n) { border-right: 0 } .li-cell::before, .li-cell:first-child::before { left: 14px; top: 20px; width: 40px; height: 40px } .li-cell h3 { font-size: 1.1rem } .li-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px } .li-step { padding: 18px 0 0 } .li-step h3 { font-size: 1.1rem } .li-works-sec .li-works, .li-cards { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; max-width: none } .li-works-sec .li-works { view-timeline: --li-row block } .li-works-sec .li-work, .li-works-sec .li-work__im, .li-cards .li-plan { animation-timeline: --li-row !important; animation-range: entry 0% entry 70% !important } .li-works-sec .li-work, .li-cards > .li-plan { scroll-snap-align: start; margin: 0 !important; grid-column: auto !important } .li-plans-sec .li-plan ul li:nth-child(n+5) { display: none } .li-cta { padding-bottom: 64px } .li-cta__grid { gap: 8px } .li-brush { aspect-ratio: 2 / 1 } .li-contact { margin-top: 32px !important } .li-contact > div { padding: 14px 0 } /* 方案頁 */ .li-pl-hero { padding-block: 40px 56px } .li-tbl { overflow-x: auto } .li-tbl tbody tr { animation: none !important } /* 手機左右滑的表格，列不做捲動動畫 */ .li-tbl table { min-width: 560px } .li-tbl th:first-child, .li-tbl td:first-child { position: sticky; left: 0; z-index: 1; background: var(--wp--preset--color--paper); width: 132px } .li-tbl th, .li-tbl td { padding: 9px 6px } .li-alist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px } .li-aitem { display: block; padding: 14px 0 } .li-aitem__n, .li-aitem .li-muted, .li-aitem__u, .li-custom .li-plan.is-row ul { display: none } /* 維護方案的費用明細不收 */ .li-aitem h3 { font-size: 1rem; margin-bottom: 4px !important } .li-pl-seals { gap: 22px } .li-pl-seal-step { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 16px } .li-pl-seal-step > * { grid-column: 2; margin-bottom: 4px !important } .li-pl-seal-step .li-seal { grid-column: 1; grid-row: 1 / span 3; width: 52px; height: 52px; font-size: .85rem; margin: 0 !important } .li-pl-seal-step .li-muted { display: none } .li-pl-payinfo { margin-top: 36px !important } .li-stub__part { padding: 30px 22px } .li-seal.is-stamp { width: 46px; height: 46px; font-size: .8rem; right: 14px; top: 16px } .li-stub__part h3 { padding-right: 56px } .li-tbl th:first-child, .li-tbl td:first-child { width: 118px } .li-tbl tr:has(td:nth-child(2):empty) td { padding-top: 18px } .li-creed::before, .li-flow::before { --li-mh: 130px } .li-flow { padding-bottom: 110px } /* 合作流程 */ .li-pr-step__row { font-size: .9rem; line-height: 1.7 } /* 2026-10-24：手機也顯示「你提供／我們做／怎麼確認」三列（付款、修改回報、驗收資訊不能藏） */ .li-pr-hero { padding-top: 48px } .li-pr-hero__title { font-size: 2.6rem } .li-pr-hero::after { height: 56px; margin-top: 28px } .li-pr-steps { padding-top: 8px } .li-pr-step { padding-block: 14px } .li-pr-step > * { margin-bottom: 6px !important } .li-pr-step__n { font-size: 2.4rem } .li-pr-step h3 { font-size: 1.35rem } .li-pr-step::before, .li-pr-step::after { top: 36px } .li-pr-step:nth-child(n)::after { top: 30px } .li-pr-line { padding-bottom: 56px } .li-pr-split__half { padding: 56px 24px } .li-pr-split__half.is-dark { padding-top: 96px } .li-pr-split__half h2 { margin-bottom: 16px } .li-pr-rules__title { margin-bottom: 28px !important } .li-pr-rule h3 { font-size: 1.35rem } .li-dialog__item { padding: 16px 0; gap: 8px } .li-dialog dt { font-size: 1.05rem } .li-dialog dd { font-size: .92rem } .li-slips li { height: 200px; padding: 26px 0 } /* 關於 */ .li-ab-tone { min-height: 170px } .li-ab-hero { padding-block: 40px 56px } .li-ab-vert__grid { gap: 20px } .li-ab-vert__ink { width: 160px !important; margin: -12px 0 0 auto !important } .li-ab-fall { height: 220px } .li-ab-fall__bloom { width: 180px; left: calc(50% - 90px); top: calc(58% - 90px) } .li-ab-fall__splash { width: 210px; left: calc(50% - 105px); top: calc(58% - 105px) } .li-ab-nums { display: flex; flex-wrap: wrap; column-gap: 16px; align-items: flex-start } .li-ab-nums > * { flex: 0 0 100%; margin-inline: 0 !important } .li-ab-nums > .li-ab-num { display: block; flex-basis: calc(50% - 8px); padding-block: 18px } .li-ab-num .li-muted { display: none } .li-ab-num__n { font-size: 2.6rem } .li-ab-num h3 { font-size: 1.15rem; margin-top: 6px !important } } /* 手機的捲動動畫只留簡單的上浮：流程頁的左右擺盪、墨線往下畫改成一般上浮 */ @supports (animation-timeline: view()) { @media (max-width: 560px) { .li-pr-step:nth-child(n) { animation-name: li-up } .li-pr-line::before, .li-pr-line::after { animation: none } } } /* ===== 進場動畫：看到就播一次（2026-10-24 使用者要求）===== 原本跟著捲動進度，區塊剛從畫面底部冒出來就播完，看不到。現在改成：assets/js/inview.js（寫在 head）在區塊進到畫面時加 .is-in， 進來之前先用透明度藏起來（不能停在動畫起點：起點是裁切成 0 高度，瀏覽器會判定看不見、永遠不觸發），進來後同一組動畫用時間播放約 1 秒， 同層依序錯開（--li-i）。沒有 JS／不支援／減少動態時沒有 html.li-js，內容照常顯示。 跟著捲動「畫出來」的效果（流程墨線、關於頁素描與字帖、頁首）維持原本做法。新增進場元素時要和 inview.js 的 HOSTS 一起改。 */ html.li-js :is(.li-sec-head, .li-head, .li-pair__item, .li-cell, .li-step, .li-plan, .li-cta__title, .li-aitem, .li-tbl tbody tr, .li-qa details, .li-work__im, .li-brush, .li-stub, .li-seal, .li-wk-bigseal, .li-pr-step, .li-slips li, .li-dialog__item, .li-pr-rule, .li-pr-slips-grid > div:first-child, .is-frame .li-work, .is-row .li-work, .li-wk-sign__vert, .li-wd-box, .li-wd-quote, .li-lg-body > h2, .li-ab-tone, .li-ab-num, .li-ab-num__n, .li-halves__part, .li-qgrid__card, .li-bd-rate__row, .li-bd-step, .li-bd-col, .li-bd-cut):not(.is-in), html.li-js .li-cell:not(.is-in)::before, html.li-js .li-track:not(.is-in)::before, html.li-js .li-track:not(.is-in)::after, html.li-js .li-pr-rule:not(.is-in)::before, html.li-js .li-doc:not(.is-in)::before, html.li-js .li-tally.is-small:not(.is-in)::before, html.li-js .li-tally.is-small:not(.is-in)::after, html.li-js .li-bd-col + .li-bd-col:not(.is-in)::before, html.li-js .li-bd-cuts:not(.is-in)::after, html.li-js .li-foot:not(.is-in) .li-foot__line::after, html.li-js .li-foot:not(.is-in) .li-foot__line path, html.li-js .li-reg:not(.is-in) svg > :not(.li-reg__dot), html.li-js .li-reg:not(.is-in) .li-reg__dot, html.li-js .li-bd-step__line:not(.is-in) rect { animation: none !important; opacity: 0 } html.li-js :is(.li-sec-head, .li-head, .li-pair__item, .li-cell, .li-step, .li-plan, .li-cta__title, .li-aitem, .li-tbl tbody tr, .li-qa details, .li-work__im, .li-brush, .li-stub, .li-seal, .li-wk-bigseal, .li-pr-step, .li-slips li, .li-dialog__item, .li-pr-rule, .li-pr-slips-grid > div:first-child, .is-frame .li-work, .is-row .li-work, .li-wk-sign__vert, .li-wd-box, .li-wd-quote, .li-lg-body > h2, .li-ab-tone, .li-ab-num, .li-ab-num__n, .li-halves__part, .li-qgrid__card, .li-bd-rate__row, .li-bd-step, .li-bd-col, .li-bd-cut).is-in, html.li-js .li-cell.is-in::before, html.li-js .li-track.is-in::before, html.li-js .li-track.is-in::after, html.li-js .li-pr-rule.is-in::before, html.li-js .li-doc.is-in::before, html.li-js .li-tally.is-small.is-in::before, html.li-js .li-tally.is-small.is-in::after, html.li-js .li-bd-col + .li-bd-col.is-in::before, html.li-js .li-bd-cuts.is-in::after, html.li-js .li-foot.is-in .li-foot__line::after, html.li-js .li-foot.is-in .li-foot__line path, html.li-js .li-reg.is-in svg > :not(.li-reg__dot) /* 不用 [pathLength]：Chrome 加上 is-in 後不會重算 SVG 屬性選擇器 */, html.li-js .li-reg.is-in .li-reg__dot, html.li-js .li-bd-step__line.is-in rect { animation-timeline: auto !important; animation-range: normal !important; animation-duration: var(--li-dur, 1.6s) !important; animation-timing-function: cubic-bezier(.45, .05, .25, 1) !important; animation-delay: calc(var(--li-i, 0) * 180ms) !important; /* 2026-10-24 使用者覺得太快：1.6s、錯開 .18s、緩進緩出 */ animation-iteration-count: 1 !important } html.li-js .li-track.is-in::before, html.li-js .li-track.is-in::after { --li-dur: 2.4s } html.li-js .li-foot.is-in .li-foot__line path, html.li-js .li-foot.is-in .li-foot__line::after { --li-dur: 2.2s } html.li-js .li-foot.is-in .li-foot__line::after { animation-delay: 2s !important } html.li-js .li-wk-bigseal.is-in { animation-delay: 1.5s !important } /* 先題字、後用印 */ html.li-js .li-reg.is-in .li-reg__dot { animation-delay: 1.4s !important } html.li-js .li-bd-cuts.is-in::after { --li-dur: 2.4s } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }