/* ========================================================================== 案例頁｜排版變體用法：在上加 class 即可切換排版。同一份內容、同一組圖片，只換排列方式，方便並排比較。依賴：main.css + case-demo.css 的 token ========================================================================== */ /* ========================================================================== 第一批：基本排列 ========================================================================== */ /* V1 左右對照：左文右圖，圖固定不動 */ body.v-current .pair { display: grid; grid-template-columns: 1fr 400px; gap: var(--sp-8) var(--sp-9); align-items: start; } body.v-current .pair__shot { position: sticky; top: 92px; } /* V2 左右交錯：圖與文左右互換，Z 字動線 */ body.v-zigzag .pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; } body.v-zigzag .pair:nth-child(even) .pair__text { order: 2; } body.v-zigzag .pair:nth-child(even) .pair__shot { order: 1; } body.v-zigzag .pair:nth-child(odd) .pair__text { justify-self: end; } body.v-zigzag .pair__text { max-width: 460px; } body.v-zigzag .pair__shot { position: sticky; top: 92px; } /* V3 圖上文字下：窄欄居中，先圖後文 */ body.v-stack .pair { display: block; max-width: 620px; margin: 0 auto; } body.v-stack .pair__shot { position: static; margin: 0 0 var(--sp-6); } body.v-stack .pair__shot img { max-height: 640px; width: auto; max-width: 100%; margin: 0 auto; } body.v-stack .pair__text { max-width: none; } body.v-stack .pair__no, body.v-stack .pair__title { text-align: center; } /* V4 小圖文檔感：文字為主，圖片縮小 */ body.v-compact .pair { display: grid; grid-template-columns: 1fr 260px; gap: var(--sp-7) var(--sp-8); align-items: start; } body.v-compact .pair__text { max-width: 580px; } body.v-compact .pair__shot { position: sticky; top: 92px; } body.v-compact .pair__shot img { border-radius: 22px; box-shadow: var(--sh-sm); } /* V5 卡片化：每則一張白卡 */ body.v-card .case-doc { background: var(--paper-100); } body.v-card .pair { display: grid; grid-template-columns: 400px 1fr; gap: var(--sp-7); align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-7); margin-bottom: var(--sp-7); border-top: 1px solid var(--line); box-shadow: var(--sh-sm); } body.v-card .pair:first-child { padding-top: var(--sp-7); } body.v-card .pair__shot { position: sticky; top: 92px; } body.v-card .pair__shot img { border-radius: 26px; box-shadow: none; } body.v-card .pair__text { max-width: none; } /* V6 大圖海報感：圖放到最大 */ body.v-poster .pair { display: block; max-width: 1100px; margin: 0 auto var(--sp-8); } body.v-poster .pair__shot { position: static; margin: 0 0 var(--sp-6); } body.v-poster .pair__shot img { width: 100%; border-radius: 40px; max-height: 760px; object-fit: cover; object-position: top center; } body.v-poster .pair__text { max-width: 640px; margin: 0 auto; } body.v-poster .pair__no, body.v-poster .pair__title { text-align: center; } /* ========================================================================== 第二批：卡片系 —— 外框與質感 ========================================================================== */ /* 卡片的共同基礎：柔和陰影、圓角、內距 */ body.v-card-soft .case-doc, body.v-card-grid .case-doc, body.v-card-h .case-doc { background: var(--paper-100); } /* ---------- C1 柔卡：最乾淨，只有淡淡陰影，hover 微抬 ---------- */ body.v-card-soft .pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7) var(--sp-8); align-items: center; background: var(--card); border-radius: 20px; padding: var(--sp-8); margin-bottom: var(--sp-8); border-top: 0; box-shadow: 0 2px 4px rgba(27,29,34,.03), 0 12px 32px rgba(27,29,34,.05); transition: transform .5s var(--ease), box-shadow .5s var(--ease); } body.v-card-soft .pair:hover { transform: translateY(-3px); box-shadow: 0 4px 8px rgba(27,29,34,.04), 0 20px 48px rgba(27,29,34,.09); } body.v-card-soft .pair:nth-child(even) .pair__text { order: 2; } body.v-card-soft .pair:nth-child(even) .pair__shot { order: 1; } body.v-card-soft .pair__text { max-width: 480px; } body.v-card-soft .pair__shot { position: sticky; top: 100px; } body.v-card-soft .pair__shot img { border-radius: 16px; box-shadow: 0 10px 30px rgba(27,29,34,.10); transition: transform .7s var(--ease); } body.v-card-soft .pair:hover .pair__shot img { transform: scale(1.015); } /* ---------- C2 格線卡：一則一張卡，排成兩欄，像作品集 ---------- */ body.v-card-grid .case-doc { padding-top: var(--sp-7); } body.v-card-grid .wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-7); align-items: start; } body.v-card-grid .pair { display: block; background: var(--card); border-radius: 18px; padding: 0 0 var(--sp-6); margin: 0; border-top: 0; overflow: hidden; box-shadow: 0 1px 3px rgba(27,29,34,.04), 0 10px 28px rgba(27,29,34,.05); transition: transform .45s var(--ease), box-shadow .45s var(--ease); } body.v-card-grid .pair:hover { transform: translateY(-4px); box-shadow: 0 3px 8px rgba(27,29,34,.05), 0 18px 44px rgba(27,29,34,.09); } body.v-card-grid .pair__shot { position: static; margin: 0 0 var(--sp-5); overflow: hidden; background: #8BACD9; } body.v-card-grid .pair__shot img { border-radius: 0; box-shadow: none; max-height: 420px; object-fit: cover; object-position: top center; transition: transform .8s var(--ease); } body.v-card-grid .pair:hover .pair__shot img { transform: scale(1.04); } body.v-card-grid .pair__text { padding: 0 var(--sp-6); max-width: none; } body.v-card-grid .pair__title { font-size: 22px; } body.v-card-grid .pair__text p { font-size: 15px; line-height: 1.95; } /* ---------- C3 橫幅卡：整頁一張張橫卡，圖左文右固定不換邊 ---------- */ body.v-card-h .pair { display: grid; grid-template-columns: 320px 1fr; gap: var(--sp-7); align-items: start; background: var(--card); border-radius: 18px; padding: var(--sp-6); margin-bottom: var(--sp-7); border-top: 0; box-shadow: 0 1px 3px rgba(27,29,34,.04), 0 8px 24px rgba(27,29,34,.05); transition: box-shadow .45s var(--ease); } body.v-card-h .pair:hover { box-shadow: 0 3px 8px rgba(27,29,34,.05), 0 16px 40px rgba(27,29,34,.09); } body.v-card-h .pair__shot { position: sticky; top: 100px; } body.v-card-h .pair__shot img { border-radius: 14px; box-shadow: none; } body.v-card-h .pair__text { max-width: none; padding-top: var(--sp-3); } /* ---------- C4 編號卡：大編號在文字上方，右側放圖 ---------- */ body.v-card-num .case-doc { background: var(--paper-100); } body.v-card-num .pair { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-7) var(--sp-8); align-items: start; background: var(--card); border-radius: 20px; padding: var(--sp-7); margin-bottom: var(--sp-8); border-top: 0; box-shadow: 0 1px 3px rgba(27,29,34,.04), 0 10px 28px rgba(27,29,34,.05); transition: transform .45s var(--ease), box-shadow .45s var(--ease); } body.v-card-num .pair:hover { transform: translateY(-3px); box-shadow: 0 3px 8px rgba(27,29,34,.05), 0 20px 48px rgba(27,29,34,.09); } /* 大編號：當作視覺錨點，hover 時變成主色 */ body.v-card-num .pair__no { font-family: var(--font-latin); font-size: 54px; line-height: .85; letter-spacing: .01em; color: var(--paper-300); margin: 0 0 var(--sp-4); transition: color .45s var(--ease); } body.v-card-num .pair:hover .pair__no { color: var(--accent-500); } body.v-card-num .pair__text { max-width: none; min-width: 0; } body.v-card-num .pair__title { font-size: 24px; } body.v-card-num .pair__shot { position: sticky; top: 100px; } body.v-card-num .pair__shot img { border-radius: 16px; box-shadow: none; } /* ---------- C5 全幅卡：大圖滿版，文字疊在下方白底區 ---------- */ body.v-card-wide .case-doc { background: var(--paper-100); padding-top: var(--sp-7); } body.v-card-wide .pair { display: block; max-width: 1000px; margin: 0 auto var(--sp-8); background: var(--card); border-radius: 22px; overflow: hidden; border-top: 0; padding: 0; box-shadow: 0 2px 6px rgba(27,29,34,.05), 0 16px 40px rgba(27,29,34,.07); transition: transform .5s var(--ease), box-shadow .5s var(--ease); } body.v-card-wide .pair:hover { transform: translateY(-4px); box-shadow: 0 4px 10px rgba(27,29,34,.06), 0 24px 56px rgba(27,29,34,.11); } body.v-card-wide .pair__shot { position: static; margin: 0; background: #8BACD9; max-height: 460px; overflow: hidden; } body.v-card-wide .pair__shot img { border-radius: 0; box-shadow: none; width: 100%; object-fit: cover; object-position: top center; max-height: 460px; transition: transform .9s var(--ease); } body.v-card-wide .pair:hover .pair__shot img { transform: scale(1.035); } body.v-card-wide .pair__shot figcaption { display: none; } body.v-card-wide .pair__text { padding: var(--sp-7) var(--sp-8) var(--sp-8); max-width: none; } body.v-card-wide .pair__text p { font-size: 15.5px; line-height: 2; } body.v-card-wide .pair__title { font-size: 24px; } /* ========================================================================== 動態：只在 body.fx 生效策略：觀察「整個區塊」而不是每一張卡，避免多張卡時延遲累積。卡片本身用 nth-child 做固定錯位，形成波浪式進場。 ========================================================================== */ /* 區塊淡化：整段在視窗下方時先不出現 */ body.fx [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } body.fx [data-reveal].is-in { opacity: 1; transform: none; } /* 區塊內的每一則卡片各自錯位進場（最多錯到第 6 張，之後不再增加） */ body.fx [data-reveal] .pair { opacity: 0; transform: translateY(26px); transition: opacity .75s var(--ease), transform .75s var(--ease); } body.fx [data-reveal].is-in .pair { opacity: 1; transform: none; } body.fx [data-reveal].is-in .pair:nth-child(1) { transition-delay: .00s; } body.fx [data-reveal].is-in .pair:nth-child(2) { transition-delay: .09s; } body.fx [data-reveal].is-in .pair:nth-child(3) { transition-delay: .18s; } body.fx [data-reveal].is-in .pair:nth-child(4) { transition-delay: .27s; } body.fx [data-reveal].is-in .pair:nth-child(5) { transition-delay: .36s; } body.fx [data-reveal].is-in .pair:nth-child(n+6) { transition-delay: .45s; } /* 文字與圖片再各自微錯位，讓卡片內也有層次 */ body.fx [data-reveal] .pair__text { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease) .08s, transform .7s var(--ease) .08s; } body.fx [data-reveal].is-in .pair__text { opacity: 1; transform: none; } /* 閱讀進度：頂部細線 */ .read-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: transparent; z-index: 60; pointer-events: none; } .read-progress__bar { height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent-500), var(--accent-700)); } /* 圖片視差容器 */ [data-parallax] { overflow: hidden; } [data-parallax] img { will-change: transform; } /* 尊重系統的「減少動態」設定 */ @media (prefers-reduced-motion: reduce) { body.fx [data-reveal], body.fx [data-reveal] .pair, body.fx [data-reveal] .pair__text { opacity: 1 !important; transform: none !important; transition: none !important; } .read-progress { display: none; } } /* ========================================================================== 平板微調 ========================================================================== */ @media (max-width: 1100px) { body.v-current .pair { grid-template-columns: 1fr 320px; } body.v-zigzag .pair { gap: var(--sp-7); } body.v-card .pair { grid-template-columns: 300px 1fr; } body.v-compact .pair { grid-template-columns: 1fr 220px; } body.v-card-soft .pair { grid-template-columns: 1fr 1fr; gap: var(--sp-6); padding: var(--sp-7); } body.v-card-h .pair { grid-template-columns: 260px 1fr; gap: var(--sp-6); } body.v-card-num .pair { grid-template-columns: minmax(0, 1fr) 260px; gap: var(--sp-5); } body.v-card-num .pair__no { font-size: 40px; } } /* ========================================================================== 手機：所有變體一律退回單欄，圖在文字上方 ========================================================================== */ @media (max-width: 820px) { body.v-current .pair, body.v-zigzag .pair, body.v-compact .pair, body.v-card .pair, body.v-card-soft .pair, body.v-card-h .pair, body.v-card-num .pair { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); } body.v-card-grid .wrap { grid-template-columns: 1fr; } body.v-zigzag .pair:nth-child(even) .pair__text, body.v-zigzag .pair:nth-child(even) .pair__shot, body.v-zigzag .pair:nth-child(odd) .pair__text, body.v-card-soft .pair:nth-child(even) .pair__text, body.v-card-soft .pair:nth-child(even) .pair__shot { order: 0; justify-self: stretch; } body.v-current .pair__shot, body.v-zigzag .pair__shot, body.v-compact .pair__shot, body.v-card .pair__shot, body.v-card-soft .pair__shot, body.v-card-h .pair__shot, body.v-card-num .pair__shot { position: static; max-width: 340px; margin: 0 auto; } body.v-card .pair, body.v-card-soft .pair, body.v-card-h .pair { padding: var(--sp-5); } /* 編號卡：手機把編號移到文字上方，橫向排列 */ body.v-card-num .pair { padding: var(--sp-5); } body.v-card-num .pair__no { font-size: 40px; text-align: left; } body.v-card-wide .pair__shot { max-height: 300px; } body.v-card-wide .pair__shot img { max-height: 300px; } body.v-card-wide .pair__text { padding: var(--sp-6) var(--sp-5) var(--sp-6); } body.v-card-grid .pair__text { padding: 0 var(--sp-5); } body.v-compact .pair__text, body.v-zigzag .pair__text, body.v-card-soft .pair__text { max-width: none; } body.v-poster .pair__shot img { border-radius: 24px; max-height: none; } }