/* issue 191（規格 §4.6）：代理與 DevaEye 頁的品牌子選單與頁面區塊（沿用產品頁區段 markup .pp-*）。 只讀官網 token 與 --accent*（色值在 design-tokens.css）；不含色碼、不用產品頁主題變數。 這是子專案 1 的基本版：版面、字級、間距與官網內頁一致；視覺提升在子專案 2。 */ /* ---------- 品牌子選單 ---------- */ .brand-subnav { position: sticky; top: 5.25rem; z-index: 40; margin: 0 0 clamp(1.5rem, 4vw, 3rem); background: color-mix(in srgb, var(--paper) 96%, transparent); border-block: 1px solid var(--line); transition: top .6s var(--ease); } @supports (backdrop-filter: blur(1px)) { .brand-subnav { backdrop-filter: blur(14px) saturate(1.4); } } /* 膠囊頁首往下捲時收起（chrome.css 的 [data-hidden]），子選單跟著貼齊視窗頂端。 */ body:has(.site-header[data-hidden]) .brand-subnav { top: 0; } .brand-subnav-inner { display: flex; align-items: center; gap: clamp(.75rem, 3vw, 2rem); padding: .375rem var(--pad, var(--gutter)); } .brand-subnav-logo { display: block; flex: 0 0 auto; height: 1.75rem; width: auto; } /* issue 213：淺色版 Logo 只在深色底的子選單顯示（下方深色規則），淺色底照舊用原色 Logo。 */ .brand-subnav-logo--light { display: none; } .brand-subnav-title { flex: 0 0 auto; font-weight: 900; color: var(--ink); } .brand-subnav-list { position: relative; display: flex; flex: 1 1 auto; gap: .25rem; min-width: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, transparent 0, var(--ink) .75rem, var(--ink) calc(100% - 1.25rem), transparent 100%); } .brand-subnav-list::-webkit-scrollbar { display: none; } /* 2026-10-06（issue 195 第三批）：橫向捲動時每一項的起點吸附在清單左緣，不會停在半截字上（沒有 JS 也成立）。 */ .brand-subnav-list { scroll-snap-type: x mandatory; scroll-padding-inline: .25rem; } .brand-subnav-list > li { scroll-snap-align: start; } /* 2026-10-06（issue 195，使用者採納建議 5）：清單尾端留一段空白，寬度蓋過右緣的淡出遮罩，捲到底時最後一項完整清楚、不貼邊。 */ .brand-subnav-list::after { content: ""; flex: 0 0 1.5rem; } /* issue 193（v82）：本頁章節列（範例站 .subnav）：固定在品牌子選單正下方、可橫捲；目前章節由 chrome.js 標 aria-current。 跳到章節時，區段上緣讓出兩條固定列的高度。 */ .page-toc { position: sticky; top: calc(5.25rem + 3.6rem); z-index: 39; margin: calc(-1 * clamp(1.5rem, 4vw, 3rem)) 0 clamp(1.5rem, 4vw, 3rem); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--paper) 94%, transparent); transition: top .6s var(--ease); } @supports (backdrop-filter: blur(1px)) { .page-toc { backdrop-filter: blur(14px) saturate(1.4); } } body:has(.site-header[data-hidden]) .page-toc { top: 3.6rem; } .page-toc ul { display: flex; gap: .25rem; margin: 0; padding: 0 var(--pad, var(--gutter)); overflow-x: auto; scrollbar-width: none; list-style: none; } .page-toc ul::-webkit-scrollbar { display: none; } .page-toc a { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: .875rem; color: var(--muted); font-size: .875rem; font-weight: 600; white-space: nowrap; text-decoration: none; } .page-toc a::after { content: ""; position: absolute; left: .875rem; right: .875rem; bottom: 0; height: 2px; background: var(--accent-ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-base) var(--ease); } .page-toc a:hover, .page-toc a[aria-current] { color: var(--ink); } .page-toc a[aria-current]::after { transform: scaleX(1); } .page-toc a:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: -3px; } .page-blocks:has(> .page-toc) > .pp-section[id] { scroll-margin-top: 3rem; } /* 子選單後面直接接區塊時，子選單已無下間距；章節列不再往上收，否則在頁面頂端整條被子選單蓋住（2026-10-05）。 */ .brand-subnav + .page-blocks > .page-toc { margin-top: 0; } /* 窄螢幕放不下時可橫捲：右緣淡出提示還有項目，捲到底淡出消失（捲動時間軸；放得下時時間軸不作用、不淡出）。 */ @supports (animation-timeline: scroll()) { .brand-subnav-list { animation: brand-subnav-fade linear both; animation-timeline: scroll(self inline); } } /* 捲在開頭只淡右側；捲到中間兩側都淡（看得出左右還有頁籤）；捲到底只淡左側。 */ @keyframes brand-subnav-fade { from { mask-image: linear-gradient(90deg, var(--ink) 82%, transparent); } 2%, 98% { mask-image: linear-gradient(90deg, transparent, var(--ink) .75rem, var(--ink) calc(100% - 1.25rem), transparent); } to { mask-image: linear-gradient(90deg, transparent, var(--ink) .75rem); } } /* 代理與 DevaEye 頁的中文大標：不在詞中間斷行（「未知威／脅」），真的放不下才拆字。 */ #main.inner-main .page-head h1 { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; } #main.inner-main .page-head :is(.lead, .hero-lede) { text-wrap: pretty; line-break: strict; } /* 區段與卡片標題同樣不在詞中間斷行（「已允許應／用」）；內文段落避免最後一行只剩一兩個字（「檔。」）。 */ .page-blocks :is(h2, h3, h4) { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; line-break: strict; } .page-blocks :is(p, li, td, th, figcaption) { text-wrap: pretty; } /* 清單項目與卡片／欄位裡的短句改用平衡分行，窄螢幕末行不再只剩兩字（「習期」「暴露」）；長段落維持 pretty。 */ .page-blocks :is(li, .pp-card p, .pp-card span, .pp-column-item p, .pp-split-copy li, .pp-scene p) { text-wrap: balance; } .brand-subnav-list > li > a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: .875rem; border-bottom: 3px solid transparent; color: var(--ink); font-size: .9375rem; text-decoration: none; white-space: nowrap; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .brand-subnav-list > li > a:hover { border-bottom-color: var(--line); } .brand-subnav-list a[aria-current="page"] { border-bottom-color: var(--accent-ink); font-weight: 700; } /* 本頁位置（子選單「名稱｜錨點」項目）：捲到的區段與目前頁同樣畫底線。 */ .brand-subnav-list > li > a[aria-current="location"] { border-bottom-color: var(--accent-ink); font-weight: 700; } .brand-subnav-list > li > a:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: -3px; } .brand-subnav-cta { flex: 0 0 auto; } /* v92（issue 193，使用者選方案三）：子選單只留第一層頁面；有章節的頁面旁邊是展開鈕（與主選單同款箭頭），滑出該頁章節面板。 面板用 position: fixed 且不設 top／left（停在展開鈕下方的原位），才不會被可橫捲的清單裁掉；containing block 是有 backdrop-filter 的子選單本身。 */ .brand-subnav-group { display: flex; align-items: center; } .brand-subnav-more { position: static; } .brand-subnav-toggle { display: grid; place-items: center; width: 1.75rem; height: 2.75rem; margin-left: -.625rem; border-radius: var(--r-pill); color: var(--muted); list-style: none; cursor: pointer; } .brand-subnav-toggle::-webkit-details-marker { display: none; } .brand-subnav-toggle::after { content: ""; width: .4375rem; height: .4375rem; margin-top: -.25rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .35s var(--ease); } .brand-subnav-more[open] > .brand-subnav-toggle { color: var(--accent-ink); } .brand-subnav-more[open] > .brand-subnav-toggle::after { margin-top: .25rem; transform: rotate(225deg); } .brand-subnav-toggle:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: -3px; } .brand-subnav-list:has(.brand-subnav-more[open]) { animation: none; mask-image: none; } .brand-subnav-panel { position: fixed; z-index: 2; box-sizing: border-box; width: 22rem; max-width: calc(100vw - 2rem); max-height: 70vh; overflow-y: auto; margin-top: .375rem; padding: .5rem; border: 1px solid var(--line); border-top: 2px solid var(--accent-ink); border-radius: .25rem .25rem 1rem 1rem; background: var(--paper); box-shadow: 0 1.5rem 3rem color-mix(in srgb, var(--deeper) 22%, transparent); } .brand-subnav-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .25rem .625rem .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .06em; } .brand-subnav-panel-head a { color: var(--accent-ink); letter-spacing: 0; text-decoration: none; } .brand-subnav-panel-head a:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: .2em; } .brand-subnav-chapters { margin: 0; padding: 0; list-style: none; } .brand-subnav-chapters a { position: relative; display: grid; grid-template-columns: 1.75rem 1fr; column-gap: .75rem; padding: .625rem; border-radius: .5rem; color: var(--ink); text-decoration: none; } .brand-subnav-chapters a::before { content: ""; position: absolute; left: 0; top: .625rem; bottom: .625rem; width: 2px; border-radius: 2px; background: var(--accent-ink); opacity: 0; } .brand-subnav-chapters a:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--accent-ink) 8%, transparent); } .brand-subnav-chapters a:is(:hover, :focus-visible)::before { opacity: 1; } .brand-subnav-chapters a:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: -3px; } .brand-subnav-chapter-no { display: inline-grid; grid-row: span 2; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid color-mix(in srgb, var(--accent-ink) 45%, transparent); border-radius: 50%; color: var(--accent-ink); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; } .brand-subnav-chapter-name { font-size: .9375rem; font-weight: 700; line-height: 1.75rem; } .brand-subnav-chapter-heading { color: var(--muted); font-size: .8125rem; line-height: 1.5; text-wrap: pretty; } .brand-subnav-chapters a[aria-current] .brand-subnav-chapter-no { border-color: var(--accent-ink); background: var(--accent-ink); color: var(--paper); } .brand-subnav-chapters a[aria-current] .brand-subnav-chapter-name::after { content: attr(data-now); margin-left: .5rem; padding: .0625rem .4375rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent-ink) 12%, transparent); color: var(--accent-ink); font-size: .6875rem; vertical-align: .1em; } @media (max-width: 47.99rem) { .brand-subnav-panel { left: 1rem; right: 1rem; width: auto; max-width: none; } } /* issue 431：子頁清單的目前頁沒有 data-now（不是「閱讀中」），不顯示標籤小藥丸。 */ .brand-subnav-chapters a[aria-current] .brand-subnav-chapter-name:not([data-now])::after { content: none; } /* 2026-10-04：頁面第一段是深色時（整頁深色的原廠頁），頁首、品牌子選單與第一段連成同一片深色—— 頁首底部與第一段頂部不再各自圓角（轉角露白、像三塊拼接），子選單以上下細線分隔；黑字 logo 不能用濾鏡改色，放在貼合高度的白色小標籤上；預約按鈕品牌色。 */ #main.inner-main:has(> .catalog-content > .page-blocks > .pp-section:first-of-type:is(.pp-section--band, .pp-section--image)) > .page-head { border-radius: 0; } #main.inner-main:has(> .catalog-content > .page-blocks > .pp-section:first-of-type:is(.pp-section--band, .pp-section--image)) > .catalog-content > .page-blocks > .pp-section:first-of-type { border-radius: 0; } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav { background: color-mix(in srgb, var(--deeper) 94%, transparent); border-block: 1px solid color-mix(in srgb, var(--paper) 8%, transparent); } /* issue 299 → 306：品牌子選單一律深色底，同品牌各頁底色、Logo 與項目位置一致；第一個區塊是深色帶時緊貼，淺色時保留下方間距。 */ #main.inner-main:has(> .catalog-content > .page-blocks > .pp-section:first-of-type:is(.pp-section--band, .pp-section--image)) > .catalog-content > .brand-subnav { margin: 0; } #main.inner-main:not(:has(> .catalog-content > .page-blocks > .pp-section:first-of-type:is(.pp-section--band, .pp-section--image))) > .catalog-content > .brand-subnav { margin: 0 0 clamp(1.5rem, 4vw, 3rem); } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav :is(.brand-subnav-title, .brand-subnav-list > li > a) { color: var(--paper); } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav .brand-subnav-list > li > a:hover { border-bottom-color: var(--on-dark-line); } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav .brand-subnav-list a[aria-current="page"] { border-bottom-color: var(--accent-dark); } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav .brand-subnav-list > li > a[aria-current="location"] { border-bottom-color: var(--accent-dark); } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav .brand-subnav-list > li > a:focus-visible { outline-color: var(--paper); } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav .brand-subnav-logo { box-sizing: content-box; height: 1.75rem; padding: .125rem .5rem; border-radius: .375rem; background: var(--paper); } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav:has(.brand-subnav-logo--light) .brand-subnav-logo--base { display: none; } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav .brand-subnav-logo--light { display: block; height: 2.125rem; padding: 0; border-radius: 0; background: none; } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav .brand-subnav-cta { background: var(--accent-fill, var(--accent-dark)); color: var(--accent-on); border-color: var(--accent-dark); } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav .brand-subnav-progress { background: var(--accent-fill, var(--accent-dark)); } /* v92：深色子選單的章節面板（範例站 Check Point：深底、品牌色細線與編號）。 */ #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav .brand-subnav-toggle { color: var(--muted-on-dark); } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav .brand-subnav-more[open] > .brand-subnav-toggle { background: color-mix(in srgb, var(--accent-dark) 16%, transparent); color: var(--accent-dark); } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav .brand-subnav-toggle:focus-visible { outline-color: var(--paper); } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav .brand-subnav-panel { border-color: var(--on-dark-line); border-top-color: var(--accent-dark); background: var(--navy); box-shadow: 0 1.5rem 3rem color-mix(in srgb, var(--deeper) 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent-dark) 8%, transparent); } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav .brand-subnav-panel-head { border-bottom-color: var(--on-dark-line); color: var(--muted-on-dark); } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav .brand-subnav-panel-head a { color: var(--accent-dark); } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav .brand-subnav-chapters a { color: var(--paper); } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav .brand-subnav-chapters a::before { background: var(--accent-fill, var(--accent-dark)); } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav .brand-subnav-chapters a:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--accent-dark) 10%, transparent); } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav .brand-subnav-chapters a:focus-visible { outline-color: var(--paper); } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav .brand-subnav-chapter-no { border-color: color-mix(in srgb, var(--accent-dark) 45%, transparent); color: var(--accent-dark); } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav .brand-subnav-chapter-heading { color: var(--muted-on-dark); } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav .brand-subnav-chapters a[aria-current] .brand-subnav-chapter-no { border-color: var(--accent-dark); background: var(--accent-fill, var(--accent-dark)); color: var(--accent-on); } #main.inner-main:has(> .catalog-content > .brand-subnav) > .catalog-content > .brand-subnav .brand-subnav-chapters a[aria-current] .brand-subnav-chapter-name::after { background: color-mix(in srgb, var(--accent-dark) 18%, transparent); color: var(--accent-dark); } /* 本頁章節列：第一個區段是深底時同樣改深色，並貼齊第一段（不留白縫）。 */ #main.inner-main:has(> .catalog-content > .page-blocks > .pp-section:first-of-type:is(.pp-section--band, .pp-section--image)) > .catalog-content > .page-blocks > .page-toc { margin-bottom: 0; background: color-mix(in srgb, var(--deeper) 94%, transparent); border-bottom-color: color-mix(in srgb, var(--paper) 8%, transparent); } #main.inner-main:has(> .catalog-content > .page-blocks > .pp-section:first-of-type:is(.pp-section--band, .pp-section--image)) > .catalog-content > .page-blocks > .page-toc a { color: var(--muted-on-dark); } #main.inner-main:has(> .catalog-content > .page-blocks > .pp-section:first-of-type:is(.pp-section--band, .pp-section--image)) > .catalog-content > .page-blocks > .page-toc a:is(:hover, [aria-current]) { color: var(--paper); } #main.inner-main:has(> .catalog-content > .page-blocks > .pp-section:first-of-type:is(.pp-section--band, .pp-section--image)) > .catalog-content > .page-blocks > .page-toc a::after { background: var(--accent-fill, var(--accent-dark)); } #main.inner-main:has(> .catalog-content > .page-blocks > .pp-section:first-of-type:is(.pp-section--band, .pp-section--image)) > .catalog-content > .page-blocks > .page-toc a:focus-visible { outline-color: var(--paper); } @media (max-width: 767px) { .brand-subnav { top: 4.75rem; } .page-toc { top: calc(4.75rem + 3.6rem); } .brand-subnav-title { display: none; } /* 手機寬度讓出空間給項目；頁首與區塊 CTA 仍有聯絡入口。 */ #main .brand-subnav .brand-subnav-cta { display: none; } /* 手機上沒有右側按鈕，logo 放大一級（扁長的文字標誌在 1.75rem 高時太小，2026-10-04 審查）。 */ #main.inner-main .catalog-content > .brand-subnav .brand-subnav-logo { height: 2.25rem; } } /* 手機：子選單內的原廠 logo 隱藏（品牌已在麵包屑與英雄區出現），文字項目取得整列寬度。 */ @media (max-width: 30rem) { #main.inner-main .catalog-content > .brand-subnav .brand-subnav-logo { display: none; } .brand-subnav-list > li > a { padding-inline: .75rem; } } @media (max-width: 22.5rem) { .brand-subnav-inner { padding-inline: .75rem; gap: 0; } .brand-subnav-list { gap: 0; } .brand-subnav-list > li > a { padding-inline: .5rem; font-size: .875rem; } } /* ---------- 滿版：子選單與頁面區塊不受內容欄限寬，內容以首屏同一個 --pad 對齊；其餘正文（商標聲明等）維持內容欄（issue 192） ---------- */ #main.inner-main .catalog-content:has(> .page-blocks, > .brand-subnav) { width: auto; max-width: none; margin-inline: 0; } #main.inner-main .catalog-content:has(> .page-blocks, > .brand-subnav) > :not(.page-blocks, .brand-subnav) { width: auto; max-width: none; margin-inline: 0; padding-inline: var(--pad, var(--gutter)); } #main.inner-main .catalog-content > .brand-subnav:first-child { margin-top: 0; } /* 子選單緊接頁面區塊時不留白縫（第一個區段自己有上間距）；最後一個區段是深底且後面沒有其他正文時，與深色頁尾直接相接。 */ .brand-subnav:has(+ .page-blocks) { margin-bottom: 0; } .page-blocks > .pp-section:first-child:is(.pp-section--band, .pp-section--image, .pp-section--cta) { border-radius: var(--r-top) var(--r-top) 0 0; } #main.inner-main:has(> .catalog-content > .page-blocks > .pp-section:last-of-type:is(.pp-section--cta, .pp-section--band, .pp-section--image)) { padding-bottom: 0; } /* 區塊後面的商標聲明與品牌規範：最後一區是深底時改成深色細條，與行動帶、頁尾連成一體。 */ #main.inner-main .catalog-content:has(> .page-blocks > .pp-section:last-of-type:is(.pp-section--cta, .pp-section--band, .pp-section--image)) > :is(.trademark, .brand-guidelines) { margin: 0; padding-block: 1.25rem 0; border-top: 1px solid var(--on-dark-line); background: var(--deeper); color: var(--muted-on-dark); } #main.inner-main .catalog-content:has(> .page-blocks > .pp-section:last-of-type:is(.pp-section--cta, .pp-section--band, .pp-section--image)) > :is(.trademark, .brand-guidelines):last-child { padding-bottom: 1.5rem; } #main.inner-main .catalog-content:has(> .page-blocks > .pp-section:last-of-type:is(.pp-section--cta, .pp-section--band, .pp-section--image)) > .brand-guidelines { border-top: 0; padding-top: .25rem; } #main.inner-main .catalog-content:has(> .page-blocks > .pp-section:last-of-type:is(.pp-section--cta, .pp-section--band, .pp-section--image)) > .brand-guidelines a { color: var(--on-dark-eyebrow); } /* ---------- 頁面區塊：區段外框 ---------- */ .page-blocks { --blocks-pad: clamp(4rem, 8vw, 7.5rem); display: grid; grid-template-columns: minmax(0, 1fr); } .page-blocks .pp-section { position: relative; isolation: isolate; padding-block: var(--blocks-pad); } /* 使用者 2026-10-04：官網區段之間不畫分隔線（原本相鄰區段有 1px 線，連續深色帶上會變成一條亮線）；區段靠底色與間距區分。 */ .page-blocks .pp-section--tight { --blocks-pad: clamp(2rem, 4vw, 3.5rem); } .page-blocks .pp-section--alt { background: var(--surface-sunken); border-top-color: transparent; } .page-blocks .pp-section--band, .page-blocks .pp-section--image { background: var(--deeper); color: var(--paper); border-top-color: transparent; } /* v88：深色帶（藍）——與相鄰深色帶交錯的藍一階底色（區段之間不畫分隔線，靠底色區分）。 */ .page-blocks .pp-section--band-alt { background: var(--navy); } .page-blocks :is(.pp-section-bg, .pp-section--cta::before) { border-radius: inherit; } .page-blocks .pp-section-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .28; } /* 背景圖區段：圖上再疊一層深色漸層（文字所在的左側最深），明亮照片上的小字也維持可讀。 */ .page-blocks .pp-section--image::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--deeper) 88%, transparent) 0%, color-mix(in srgb, var(--deeper) 70%, transparent) 55%, color-mix(in srgb, var(--deeper) 45%, transparent) 100%); } .page-blocks .pp-container { padding-inline: var(--pad, var(--gutter)); } /* 區段標題 */ .page-blocks .pp-head { max-width: 48rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); } .page-blocks .pp-eyebrow { display: inline-flex; align-items: center; gap: .625rem; margin: 0 0 .75rem; color: var(--accent-ink); font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .page-blocks .pp-eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: var(--accent); } .page-blocks .pp-head h2, .page-blocks .pp-cta-copy h2 { margin: 0; font-size: var(--fs-l); font-weight: 900; line-height: 1.2; text-wrap: balance; font-feature-settings: "palt"; } /* issue 278：區塊標題的 *強調* 字（同頁首大標）。淺底用 --accent-ink（淺底文字對比已驗），深色帶用 --accent-dark。 */ .page-blocks .pp-head h2 em { font-style: normal; color: var(--accent-ink); } .page-blocks :is(.pp-section--band, .pp-section--band2, .pp-section--image, .pp-section--cta) .pp-head h2 em { color: var(--accent-dark, var(--soft)); } .page-blocks .pp-kicker { margin: .875rem 0 0; padding-left: .875rem; border-left: 3px solid var(--accent); font-weight: 700; } .page-blocks .pp-intro { margin: 1rem 0 0; color: var(--muted); font-size: var(--fs-lead); line-height: 1.85; } .page-blocks .pp-note { max-width: 64ch; margin: 2rem 0 0; color: var(--muted); font-size: .9375rem; line-height: 1.7; } /* issue 218：全寬區段底下的說明（區段容器的直接子元素）欄寬約 1296px，64ch（中文約 35 字）會把短句折成兩到四行、右側大片空白；放寬到 68rem，仍保留行長上限。窄欄內的說明維持 64ch。 */ .page-blocks .pp-container > .pp-note { max-width: 68rem; } .page-blocks .pp-section--band :is(.pp-intro, .pp-note), .page-blocks .pp-section--image :is(.pp-intro, .pp-note) { color: var(--muted-on-dark); } /* v86：深色區段的小標——文字強調色、前面短線品牌輔色（範例站 Trellix：青綠字＋金線）；權重高於「分欄內文段落一律淡色」。 */ .page-blocks :is(.pp-section--band, .pp-section--image) .pp-head .pp-eyebrow { color: var(--accent-dark); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-head .pp-eyebrow::before { background: var(--accent-spark, var(--accent-dark)); } /* 數字帶 */ .page-blocks .pp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; } .page-blocks .pp-stat { display: grid; gap: .5rem; align-content: start; padding: clamp(1.375rem, 2.4vw, 2rem); background: var(--paper); } .page-blocks .pp-stat-value { color: var(--ink); font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; } .page-blocks .pp-stat-value::after { content: ""; display: block; width: 2rem; height: 3px; margin-top: .75rem; background: var(--accent); } .page-blocks .pp-stat-label { color: var(--muted); } /* 卡片格 */ .page-blocks .pp-cards { display: grid; gap: clamp(1rem, 2vw, 1.5rem); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } @media (min-width: 62rem) { .page-blocks .pp-cards--c2 { grid-template-columns: repeat(2, 1fr); } .page-blocks .pp-cards--c3 { grid-template-columns: repeat(3, 1fr); } .page-blocks .pp-cards--c4 { grid-template-columns: repeat(4, 1fr); } .page-blocks .pp-cards--c5 { grid-template-columns: repeat(3, 1fr); } } /* 剛好五張時排成 3＋2（每張夠寬，標題不被擠斷）；很寬的螢幕才五張一列。 */ @media (min-width: 62rem) { .page-blocks .pp-cards--c5:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); } .page-blocks .pp-cards--c5:has(> :nth-child(5):last-child) > :nth-child(-n + 3) { grid-column: span 2; } .page-blocks .pp-cards--c5:has(> :nth-child(5):last-child) > :nth-child(n + 4) { grid-column: span 3; } } /* issue 373：選 3 欄卻剛好五張時排成 2＋3（前兩張較寬當重點），第二排不留空格。 */ @media (min-width: 62rem) { .page-blocks .pp-cards--c3:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); } .page-blocks .pp-cards--c3:has(> :nth-child(5):last-child) > :nth-child(-n + 2) { grid-column: span 3; } .page-blocks .pp-cards--c3:has(> :nth-child(5):last-child) > :nth-child(n + 3) { grid-column: span 2; } } @media (min-width: 110rem) { .page-blocks .pp-cards--c5, .page-blocks .pp-cards--c5:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, 1fr); } .page-blocks .pp-cards--c5:has(> :nth-child(5):last-child) > * { grid-column: auto; } } .page-blocks .pp-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--elevation-card); transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } .page-blocks .pp-card:hover { transform: translateY(-3px); border-color: var(--accent); } .page-blocks .pp-card-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; } .page-blocks .pp-card-body { display: grid; gap: .625rem; padding: clamp(1.25rem, 2.2vw, 1.75rem); } .page-blocks .pp-card-tag { color: var(--accent-ink); font-size: .75rem; font-weight: 700; letter-spacing: .08em; } .page-blocks .pp-card-title { margin: 0; font-size: var(--fs-m); font-weight: 800; line-height: 1.35; } .page-blocks .pp-card-body p { margin: 0; color: var(--muted); line-height: 1.8; } .page-blocks .pp-link { display: inline-flex; align-items: center; gap: .375rem; min-height: 2.75rem; color: var(--action); font-weight: 700; text-decoration: none; } .page-blocks .pp-link:hover { text-decoration: underline; text-underline-offset: .25em; } /* 圖文並排 */ .page-blocks .pp-split { display: grid; gap: clamp(1.75rem, 4vw, 4rem); align-items: center; } @media (min-width: 62rem) { .page-blocks .pp-split { grid-template-columns: 1fr 1fr; } .page-blocks .pp-split--image-left .pp-split-media { order: -1; } .page-blocks .pp-split--solo { grid-template-columns: minmax(0, 48rem); } } .page-blocks .pp-split-copy p { color: var(--muted); line-height: 1.85; } /* issue 331：按鈕列與上方說明（清單或段落）固定留距，不再貼著清單。 */ .page-blocks .pp-split-copy > .pp-actions { margin-top: clamp(1.5rem, 3vw, 2rem); } .page-blocks .pp-split-media img { display: block; width: 100%; height: auto; border-radius: var(--radius-xl); } .page-blocks .pp-list { display: grid; gap: .875rem; margin: 1.25rem 0 0; padding: 0; list-style: none; } .page-blocks .pp-list li { position: relative; padding-left: 1.5rem; line-height: 1.75; } .page-blocks .pp-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); } /* 資料表 */ .page-blocks .pp-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--paper); } .page-blocks .pp-table { width: 100%; min-width: 40rem; border-collapse: collapse; text-align: left; } .page-blocks .pp-table caption { padding: .875rem 1.25rem; background: var(--table-caption-bg); color: var(--table-cell-text); font-weight: 700; text-align: left; } .page-blocks .pp-table :is(th, td) { padding: 1rem 1.25rem; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.7; text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; } /* issue 212：表頭是短標籤，以完整單字計最小欄寬（anywhere 會把 DLP 拆成 DL／P）；內文儲存格維持 anywhere，避免長中文串撐寬表格。 */ .page-blocks .pp-table thead th { background: var(--table-head-bg); color: var(--ink); border-top: 0; border-bottom: 2px solid var(--accent); overflow-wrap: break-word; } .page-blocks .pp-table td { color: var(--table-cell-text); } /* 常見問題 */ .page-blocks .pp-faq { display: grid; border-top: 1px solid var(--line); } .page-blocks .pp-faq-item { border-bottom: 1px solid var(--line); } .page-blocks .pp-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding-block: 1rem; cursor: pointer; font-weight: 700; list-style: none; } .page-blocks .pp-faq-item summary::-webkit-details-marker { display: none; } .page-blocks .pp-faq-item summary::after { content: "+"; flex: 0 0 auto; color: var(--accent-ink); font-size: 1.5rem; line-height: 1; transition: transform var(--dur-fast) var(--ease); } .page-blocks .pp-faq-item[open] summary::after { transform: rotate(45deg); } .page-blocks .pp-faq-item summary:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; } .page-blocks .pp-faq-item p { margin: 0; padding: 0 0 1.5rem; color: var(--muted); line-height: 1.85; white-space: pre-line; } /* FAQ 裡的誠實聲明標籤是 p，不能繼承答案段落的底部留白（會變成下方空心的圓角框）。 */ .page-blocks .pp-faq-item p.pp-honest-badge { display: inline-flex; margin: 0 0 .75rem; padding: .25rem .75rem; font-size: .8125rem; line-height: 1.4; white-space: normal; } /* 結尾行動帶 */ /* issue 268：結尾行動帶底色可由色票區塊另給 --cta-surface（Netskope 的 --deeper 是偏亮的品牌 Navy，結尾改用近黑底，品牌藍只留在上緣光暈）。 */ .page-blocks .pp-section--cta { background: var(--cta-surface, var(--deeper)); color: var(--paper); border-top-color: transparent; } .page-blocks .pp-cta-box { display: grid; gap: 1.75rem; align-items: center; } @media (min-width: 62rem) { .page-blocks .pp-cta-box { grid-template-columns: minmax(0, 1fr) auto; } } .page-blocks .pp-section--cta .pp-cta-copy p { margin: 1rem 0 0; color: var(--muted-on-dark); line-height: 1.85; white-space: pre-line; } .page-blocks .pp-section--cta .pp-eyebrow { color: var(--accent-dark); } .page-blocks .pp-actions { display: flex; flex-wrap: wrap; gap: .75rem; } .page-blocks .pp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .75rem 1.375rem; border: 1px solid var(--accent); border-radius: var(--r-pill); background: var(--accent); color: var(--accent-on); font-weight: 700; text-decoration: none; transition: filter var(--dur-fast) var(--ease); } .page-blocks .pp-btn:hover { filter: brightness(1.08); } /* 卡片連結（淺底卡片）用墨色填色；深底區段（CTA、色帶、背景圖）改成透明外框。 */ .page-blocks .pp-btn--dark { background: var(--ink); border-color: var(--ink); color: var(--paper); } .page-blocks :is(.pp-section--cta, .pp-section--band, .pp-section--image) .pp-btn--dark { background: transparent; border-color: var(--on-dark-line); color: var(--paper); } .page-blocks .pp-btn:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; } .page-blocks :is(.pp-section--cta, .pp-section--band, .pp-section--image) .pp-btn:focus-visible { outline-color: var(--paper); } /* issue 388：結尾行動帶的主要按鈕與全站深色區一致用琥珀 CTA（issue 382 暖米白配色：--cta 底、--on-accent 字）。 只限官網預設與 DevaEye 青藍色組；代理品牌色組（金、橘、青綠、Netskope…）維持各自的 --accent 填色，不在這條規則內。 */ .page-blocks:is([data-accent=""], [data-accent="cyan"]) .pp-btn--primary { background: var(--cta); border-color: var(--cta); color: var(--on-accent); } /* 聲明框 */ /* 邊界說明（註腳卡）：i 圖示、四邊同圓角、1px 強調色細框、淡底；與內頁的 .scope-notice（inner.css）同一套，不再是單邊粗線。 i 是 CSS 畫的字母圖示（content 後面的 "/ """ 讓讀屏略過），沒有任何中文字寫在樣式裡。 */ .page-blocks .pp-notice { --notice-mark: var(--accent); --notice-mark-on: var(--accent-on); position: relative; display: grid; gap: .5rem; padding: 1.25rem 1.5rem 1.25rem 3.75rem; border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: var(--radius-l); background: var(--notice-bg); color: var(--notice-text); } .page-blocks .pp-notice::before { content: "i" / ""; position: absolute; left: 1.25rem; top: 1.3rem; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--notice-mark); color: var(--notice-mark-on); font: italic 800 .8125rem/1 "Inter Tight", var(--font-body); } .page-blocks .pp-notice strong { color: var(--ink); } /* 並排清單 */ .page-blocks .pp-columns { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); } .page-blocks .pp-column { padding: clamp(1.25rem, 2.4vw, 1.75rem); background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--r-card); } /* 欄標題可能是 h2 或 h3（依頁面層級）；兩者同一級距，項目標題再小一級，不壓過卡片標題。 */ .page-blocks .pp-column > :is(h2, h3) { margin: 0 0 .5rem; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.3; } .page-blocks .pp-column-item { display: grid; gap: .25rem; padding-block: .875rem; border-top: 1px solid var(--line); } .page-blocks .pp-column-item :is(h3, h4) { margin: 0; font-size: 1.0625rem; line-height: 1.45; } .page-blocks .pp-column-item p { margin: 0; line-height: 1.7; } .page-blocks .pp-column-item:first-of-type { border-top: 0; } /* 表格儲存格語氣（[+]／[-]） */ .page-blocks .pp-tone--positive { color: var(--accent-ink); font-weight: 700; } .page-blocks .pp-tone--negative { color: var(--muted); } /* ========================================================================================================================== 子專案 2（issue 192，規格 docs/superpowers/specs/2026-10-03-partner-pages-blocks-visual-design.md）：區塊變體與三種新區塊。 每個變體的預設值等於上面子專案 1 的外觀；只讀官網 token 與 --accent*。 ========================================================================================================================== */ /* ---------- 區段節奏：寬鬆間距、大標題、深色帶 ---------- */ .page-blocks .pp-section--loose { --blocks-pad: clamp(5.5rem, 10vw, 9rem); } /* 結尾行動帶與數字帶內容短，間距收一級；聲明框只有一小塊，沒選寬鬆時自動收窄上下間距。 */ .page-blocks :is(.pp-section--cta, .pp-section--stats):not(.pp-section--loose, .pp-section--tight) { --blocks-pad: clamp(3.5rem, 6.5vw, 6rem); } .page-blocks .pp-section--notice:not(.pp-section--loose, .pp-section--tight) { --blocks-pad: clamp(2.5rem, 5vw, 4rem); } /* issue 217：圖片區段後面緊接、同背景、沒有區段標題的卡片格＝這張圖的說明（例如 ① ② 對應圖上左右半邊），兩段之間只留一小段距離。 :has() 不能巢狀，圖片區段那一側用「後面是卡片」與「後面沒有標題」兩個並列條件。 */ .page-blocks .pp-section--shot:not(.pp-section--alt, .pp-section--band, .pp-section--band2, .pp-section--image):has(+ .pp-section:not(.pp-section--alt, .pp-section--band, .pp-section--band2, .pp-section--image) > .pp-container > .pp-cards):not(:has(+ .pp-section > .pp-container > .pp-head)), .page-blocks .pp-section--shot.pp-section--alt:has(+ .pp-section.pp-section--alt > .pp-container > .pp-cards):not(:has(+ .pp-section > .pp-container > .pp-head)), .page-blocks .pp-section--shot.pp-section--band:has(+ .pp-section.pp-section--band > .pp-container > .pp-cards):not(:has(+ .pp-section > .pp-container > .pp-head)), .page-blocks .pp-section--shot.pp-section--band2:has(+ .pp-section.pp-section--band2 > .pp-container > .pp-cards):not(:has(+ .pp-section > .pp-container > .pp-head)) { padding-bottom: .75rem; } .page-blocks .pp-section--shot:not(.pp-section--alt, .pp-section--band, .pp-section--band2, .pp-section--image) + .pp-section:not(.pp-section--alt, .pp-section--band, .pp-section--band2, .pp-section--image):has(> .pp-container > .pp-cards):not(:has(> .pp-container > .pp-head)), .page-blocks .pp-section--shot.pp-section--alt + .pp-section.pp-section--alt:has(> .pp-container > .pp-cards):not(:has(> .pp-container > .pp-head)), .page-blocks .pp-section--shot.pp-section--band + .pp-section.pp-section--band:has(> .pp-container > .pp-cards):not(:has(> .pp-container > .pp-head)), .page-blocks .pp-section--shot.pp-section--band2 + .pp-section.pp-section--band2:has(> .pp-container > .pp-cards):not(:has(> .pp-container > .pp-head)) { padding-top: 0; } /* issue 260：區段後面緊接、同背景、沒有區段標題的緊密互動場景＝上一段的配圖（例如關於頁公司介紹下的平台架構），兩段之間只留一小段距離。 */ .page-blocks .pp-section:not(.pp-section--alt, .pp-section--band, .pp-section--band2, .pp-section--image):has(+ .pp-section--tight.pp-section--scene:not(.pp-section--alt, .pp-section--band, .pp-section--band2, .pp-section--image)):not(:has(+ .pp-section > .pp-container > .pp-head)) { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); } .page-blocks .pp-section:not(.pp-section--alt, .pp-section--band, .pp-section--band2, .pp-section--image) + .pp-section--tight.pp-section--scene:not(.pp-section--alt, .pp-section--band, .pp-section--band2, .pp-section--image):not(:has(> .pp-container > .pp-head)) { padding-top: 0; } .page-blocks .pp-section--head-large .pp-head { max-width: 60rem; } /* 標題群：小標 → h2 → 鉤子句 → 導言（鉤子放在標題下方，不與小標疊成兩層前導）。 */ .page-blocks .pp-head { display: flex; flex-direction: column; } .page-blocks .pp-head > .pp-eyebrow { align-self: flex-start; } .page-blocks .pp-head > h2 { order: 1; } .page-blocks .pp-head > .pp-kicker { order: 2; margin-top: 1.125rem; } .page-blocks .pp-head > .pp-intro { order: 3; } .page-blocks .pp-section--head-large .pp-head h2, .page-blocks .pp-section--cta .pp-cta-copy h2 { font-size: clamp(2.5rem, 5.5vw, 4.75rem); font-weight: 900; line-height: 1.08; letter-spacing: -.01em; } /* 深色帶：顆粒沿用官網的 grain 紋理；上一區是淺色時，上緣圓角壓疊上去（上一區也是深底時不壓疊）。 */ .page-blocks .pp-section--band::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: .07; mix-blend-mode: overlay; background-image: url("../assets/grain.svg"); } .page-blocks .pp-section:not(.pp-section--band, .pp-section--image, .pp-section--cta) + :is(.pp-section--band, .pp-section--image, .pp-section--cta) { margin-top: calc(-1 * var(--r-top)); padding-top: calc(var(--blocks-pad) + var(--r-top)); border-radius: var(--r-top) var(--r-top) 0 0; } /* 被壓疊的淺色區段：下間距至少比圓角多 1.5rem，內容不會被圓角蓋到（緊湊間距時特別需要）。 */ .page-blocks .pp-section:not(.pp-section--band, .pp-section--image, .pp-section--cta):has(+ :is(.pp-section--band, .pp-section--image, .pp-section--cta)) { padding-bottom: max(var(--blocks-pad), var(--r-top) + 2.5rem); } .page-blocks :is(.pp-section--band, .pp-section--image) :is(h2, h3, h4, strong, .pp-stat-value, .pp-card-title) { color: var(--paper); } .page-blocks :is(.pp-section--band, .pp-section--image) :is(.pp-stat-label, .pp-source, .pp-split-copy p, .pp-faq-item p) { color: var(--muted-on-dark); } .page-blocks :is(.pp-section--band, .pp-section--image) :is(.pp-faq, .pp-faq-item) { border-color: var(--on-dark-line); } .page-blocks :is(.pp-section--band, .pp-section--image, .pp-section--cta) :focus-visible { outline-color: var(--paper); } /* ---------- 數字帶 ---------- */ .page-blocks .pp-source { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); color: var(--muted); font-size: .875rem; line-height: 1.6; } .page-blocks .pp-stats { align-items: start; } .page-blocks .pp-stat-label { font-size: .9375rem; line-height: 1.6; } .page-blocks .pp-stat-value::after { margin-top: .5rem; } .page-blocks .pp-stat-value { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -.02em; text-wrap: balance; } /* 四格以上時每格變窄，數字（常是文字，例如「開放平台」）縮一級，避免被拆成兩行。 */ .page-blocks .pp-stats:has(> :nth-child(4)) .pp-stat-value { font-size: clamp(2rem, 3.4vw, 3rem); } .page-blocks .pp-stats--rule { gap: clamp(1.5rem, 3vw, 2.5rem) 0; background: none; border: 0; border-radius: 0; overflow: visible; } .page-blocks .pp-stats--rule .pp-stat { padding: .25rem clamp(1rem, 2.4vw, 2rem); background: none; border-left: 1px solid var(--line); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-stats--rule .pp-stat { border-left-color: var(--on-dark-line); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-stats--grid { background: var(--on-dark-line); border-color: var(--on-dark-line); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-stats--grid .pp-stat { background: var(--deeper); } .page-blocks .pp-section--alt .pp-stats--rule .pp-stat, .page-blocks .pp-section--alt .pp-stats--grid .pp-stat { background-color: transparent; } .page-blocks .pp-section--alt .pp-stats--grid .pp-stat { background: var(--paper); } /* v87：數字帶「大字＋小標」（範例站 CloudCoffer）——無外框、格間細線；小標在上、數字放大、單位縮小改品牌輔色（淺底用深強調色）、出處在下方。 */ .page-blocks .pp-stats--big { gap: clamp(1.5rem, 3vw, 2.5rem) 0; background: none; border: 0; border-radius: 0; overflow: visible; } .page-blocks .pp-stats--big .pp-stat { gap: .75rem; padding: .25rem clamp(1rem, 2.6vw, 2.5rem); background: none; border-left: 1px solid var(--line); } .page-blocks .pp-stats--big .pp-stat:first-child { border-left: 0; padding-left: 0; } .page-blocks .pp-stats--big .pp-stat-tag { color: var(--muted); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; } .page-blocks .pp-stats--big .pp-stat-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: .12em; min-height: 1em; font-size: clamp(3rem, 6.4vw, 6rem); line-height: 1; } .page-blocks .pp-stats--big .pp-stat-value::after { display: none; } /* 沒有數字的醒目文字（例如「中／日／英」）縮一級且不換行，與數字格同高。 */ .page-blocks .pp-stats--big .pp-stat-value--text > span { font-size: .78em; white-space: nowrap; } .page-blocks .pp-stats--big:has(> :nth-child(4)) .pp-stat-value { font-size: clamp(2.75rem, 5.2vw, 5rem); } .page-blocks .pp-stats--big .pp-stat-unit { color: var(--accent-ink); font-size: .4em; font-style: normal; font-weight: 800; } .page-blocks .pp-stats--big + .pp-source { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; font-size: .8125rem; } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-stats--big .pp-stat { border-left-color: var(--on-dark-line); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-stats--big .pp-stat-tag { color: var(--muted-on-dark); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-stats--big .pp-stat-unit { color: var(--accent-spark, var(--accent-dark)); } @media (max-width: 40rem) { .page-blocks .pp-stats--big .pp-stat { border-left: 0; padding-left: 0; } } /* issue 431：數字帶「卡片」——三張獨立圓角深色卡，內容置中；數字等寬大字（預設強調色、pp-stat--blue＝藍），標籤粗體可換行。≤40rem 一張一列、數字與標籤左右排。 */ .page-blocks .pp-stats--card { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: clamp(.75rem, 1.6vw, 1.5rem); background: none; border: 0; border-radius: 0; overflow: visible; } .page-blocks .pp-stats--card .pp-stat { align-content: center; justify-items: center; gap: .6rem; padding: clamp(1.5rem, 3vw, 2.5rem) 1rem; border: 1px solid var(--rs-line); border-radius: 1.5rem; background: linear-gradient(180deg, var(--rs-card-top), var(--rs-card)); text-align: center; transition: border-color .3s, translate .3s; } .page-blocks .pp-stats--card .pp-stat:hover { border-color: var(--rs-line-hi); translate: 0 -3px; } .page-blocks .pp-stats--card .pp-stat-value { color: var(--accent-dark); font: 700 clamp(3.2rem, 7vw, 6rem) / 1 ui-monospace, "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; letter-spacing: -.02em; text-shadow: 0 0 28px color-mix(in srgb, var(--accent-dark) 35%, transparent); } .page-blocks .pp-stats--card .pp-stat-value::after, .page-blocks .pp-stats--card .pp-stat::after { display: none; } .page-blocks .pp-stats--card .pp-stat--blue .pp-stat-value { color: var(--rs-blue); text-shadow: 0 0 28px rgb(var(--rs-blue-rgb) / .3); } .page-blocks .pp-stats--card .pp-stat-tag { color: var(--rs-muted); font-size: .8125rem; font-weight: 700; letter-spacing: .14em; } .page-blocks .pp-stats--card .pp-stat-label { color: var(--rs-text); font-size: clamp(1rem, 1.5vw, 1.3rem); font-weight: 800; line-height: 1.45; } .page-blocks .pp-stats--card + .pp-source { margin: 1.25rem 0 0; font-size: .95rem; text-align: center; } @media (max-width: 40rem) { .page-blocks .pp-stats--card { grid-template-columns: 1fr; } .page-blocks .pp-stats--card .pp-stat { display: flex; align-items: center; justify-content: center; gap: 1.25rem; padding-block: 1.25rem; } .page-blocks .pp-stats--card .pp-stat-label { text-align: left; } } @media (prefers-reduced-motion: reduce) { .page-blocks .pp-stats--card .pp-stat { transition: none; } .page-blocks .pp-stats--card .pp-stat:hover { translate: none; } } html[data-motion="off"] .page-blocks .pp-stats--card .pp-stat { transition: none; } /* ---------- 卡片：上浮與光暈、整卡可點、圖片標籤、證據卡、圖片遮罩 ---------- */ @media (hover: hover) { .page-blocks .pp-card:hover { transform: translateY(-4px); border-color: var(--accent-ink); box-shadow: var(--elevation-card), 0 1.5rem 3rem -1.5rem color-mix(in srgb, var(--accent) 12%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent); } } @media (hover: none) { .page-blocks .pp-card:hover { transform: none; } } .page-blocks .pp-card--link { position: relative; } .page-blocks .pp-card-stretch::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .page-blocks .pp-card-stretch:focus-visible { outline: none; } .page-blocks .pp-card--link:has(.pp-card-stretch:focus-visible) { outline: 3px solid var(--accent-ink); outline-offset: 3px; } .page-blocks :is(.pp-section--band, .pp-section--image, .pp-section--cta) .pp-card--link:has(.pp-card-stretch:focus-visible) { outline-color: var(--paper); } .page-blocks .pp-card-media { position: relative; } .page-blocks .pp-card-label { position: absolute; top: .75rem; left: .75rem; z-index: 1; padding: .25rem .625rem; border-radius: var(--r-pill); background: var(--deeper); color: var(--paper); font-size: .75rem; font-weight: 700; line-height: 1.5; } .page-blocks .pp-card-body > .pp-btn { justify-self: start; } /* 重點：無圖、左側強調線；步驟：編號膠囊；頂色條：深色卡加頂端強調色；精簡：小卡。 */ .page-blocks .pp-card--point { border-left: 3px solid var(--accent); box-shadow: none; } .page-blocks .pp-card--step .pp-card-tag { display: inline-grid; place-items: center; justify-self: start; min-width: 2.5rem; height: 2.5rem; padding-inline: .875rem; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-on); font-size: .9375rem; font-weight: 800; letter-spacing: .02em; } .page-blocks .pp-card--accent { border: 1px solid var(--on-dark-line); border-top: 3px solid var(--accent); background: var(--deeper); color: var(--paper); } .page-blocks .pp-card--accent .pp-card-title { color: var(--paper); } .page-blocks .pp-card--accent .pp-card-tag { color: var(--accent-dark); } .page-blocks .pp-card--accent .pp-card-body p { color: var(--muted-on-dark); } .page-blocks .pp-card--accent .pp-link { color: var(--accent-dark); } .page-blocks .pp-card--accent:has(.pp-card-stretch:focus-visible) { outline-color: var(--paper); } .page-blocks .pp-card--compact .pp-card-body { gap: .375rem; padding: clamp(1rem, 1.8vw, 1.375rem); } .page-blocks .pp-card--compact .pp-card-title { font-size: 1.125rem; } /* v89：分隔欄（範例站 CloudCoffer 四項原則）——不畫卡片框，上下各一條細線、欄與欄之間直線分隔；標題前一個強調色六角記號，標題放大。 */ .page-blocks .pp-cards--rule { gap: 0; border-block: 1px solid var(--line); } .page-blocks .pp-card--rule { border: 0; border-radius: 0; background: none; box-shadow: none; } .page-blocks .pp-card--rule + .pp-card--rule { border-left: 1px solid var(--line); } .page-blocks .pp-card--rule .pp-card-body { gap: .625rem; padding: 1.875rem clamp(1rem, 2vw, 1.625rem) 2.125rem; } .page-blocks .pp-card--rule:first-child .pp-card-body { padding-left: 0; } .page-blocks .pp-card--rule .pp-card-title { font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1.2; } .page-blocks .pp-card--rule .pp-card-title::before { content: ""; display: block; width: 1rem; height: 1.125rem; margin-bottom: 1rem; background: var(--accent-ink); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } .page-blocks .pp-cards--rule .pp-card--rule:hover { transform: none; box-shadow: none; border-color: var(--line); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-cards--rule .pp-card--rule:hover { border-color: var(--on-dark-line); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-cards--rule, .page-blocks :is(.pp-section--band, .pp-section--image) .pp-card--rule + .pp-card--rule { border-color: var(--on-dark-line); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-cards--rule .pp-card.pp-card--rule { background: none; box-shadow: none; } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-cards--rule .pp-card.pp-card--rule + .pp-card--rule { border-left-color: var(--on-dark-line); } /* 緊接在數字帶後面的分隔欄（範例站把兩者排成同一區）：不再留上方區段間距。 */ .page-blocks .pp-section--stats + .pp-section:has(.pp-cards--rule) { padding-top: 0; } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-card--rule .pp-card-title::before { background: var(--accent-fill, var(--accent-dark)); } @media (max-width: 61.99rem) { .page-blocks .pp-card--rule + .pp-card--rule { border-left: 0; border-top: 1px solid var(--line); } .page-blocks .pp-card--rule .pp-card-body { padding-inline: 0; } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-card--rule + .pp-card--rule { border-top-color: var(--on-dark-line); } } .page-blocks .pp-card--evidence { border-top: 4px solid var(--accent); } .page-blocks .pp-card--evidence .pp-card-body { flex: 1 1 auto; grid-template-rows: auto auto 1fr; } .page-blocks .pp-card--evidence .pp-card-tag { color: var(--ink); font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: -.01em; line-height: 1; font-variant-numeric: tabular-nums; } .page-blocks .pp-card--evidence .pp-card-body p + p { align-self: end; padding-top: .75rem; border-top: 1px solid var(--line); font-size: .875rem; } .page-blocks .pp-card-title { text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; } .page-blocks .pp-cards--c5 .pp-card--evidence .pp-card-tag, .page-blocks .pp-cards--c4 .pp-card--evidence .pp-card-tag { font-size: clamp(1.5rem, 2.2vw, 2.125rem); word-break: keep-all; overflow-wrap: anywhere; } .page-blocks .pp-card--media { position: relative; min-height: clamp(26rem, 38vw, 32rem); justify-content: flex-end; background: var(--deeper); border-color: transparent; color: var(--paper); } .page-blocks .pp-card--media .pp-card-media { position: absolute; inset: 0; } .page-blocks .pp-card--media .pp-card-media img { height: 100%; aspect-ratio: auto; } .page-blocks .pp-card--media .pp-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--deeper) 25%, color-mix(in srgb, var(--deeper) 40%, transparent) 55%, transparent 80%); } /* 文字區固定高度、由上往下排：同一列卡片的標題對齊，按鈕貼底。 */ .page-blocks .pp-card--media .pp-card-body { position: relative; display: flex; flex-direction: column; min-height: 15rem; padding-top: 3.5rem; background: linear-gradient(to bottom, transparent, var(--deeper) 3.5rem); } .page-blocks .pp-card--media .pp-card-body > a { margin-top: auto; } .page-blocks .pp-card--media :is(.pp-card-title, .pp-card-tag) { color: var(--paper); } .page-blocks .pp-card--media .pp-card-tag { color: var(--accent-dark); } .page-blocks .pp-card--media .pp-card-body p { color: var(--muted-on-dark); } .page-blocks .pp-card--media .pp-btn--dark { background: transparent; border-color: var(--on-dark-line); color: var(--paper); } /* 深色帶裡的卡片改成半透明深色卡（白卡壓在黑底上太刺眼）。 */ .page-blocks :is(.pp-section--band, .pp-section--image) .pp-card:not(.pp-card--media, .pp-card--accent) { border-color: var(--on-dark-line); background: color-mix(in srgb, var(--paper) 5%, var(--deeper)); box-shadow: none; } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-card:not(.pp-card--media, .pp-card--accent) :is(.pp-card-title, .pp-card-tag) { color: var(--paper); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-card:not(.pp-card--media, .pp-card--accent) .pp-card-body p { color: var(--muted-on-dark); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-card--evidence .pp-card-body p + p { border-top-color: var(--on-dark-line); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-card--step .pp-card-tag { color: var(--accent-on); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-link { color: var(--accent-dark); } /* ---------- 圖文並排：調色＋顆粒、四角框標、圖說 ---------- */ .page-blocks figure.pp-split-media { position: relative; margin: 0; } .page-blocks .pp-media--tone { isolation: isolate; overflow: hidden; border-radius: var(--radius-xl); } .page-blocks .pp-media--tone::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(160deg, color-mix(in srgb, var(--deeper) 6%, transparent), color-mix(in srgb, var(--deeper) 42%, transparent)); } .page-blocks .pp-media--tone::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .09; mix-blend-mode: overlay; background-image: url("../assets/grain.svg"); } .page-blocks figure.pp-split-media .pp-caption { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; max-width: calc(100% - 2rem); margin: 0; border-color: transparent; background: var(--deeper); color: var(--paper); } .page-blocks .pp-media--frame .pp-caption { left: 1.875rem; bottom: 1.875rem; } .page-blocks .pp-media--frame { padding: .625rem; } .page-blocks .pp-media--frame::before, .page-blocks .pp-media--frame::after { content: ""; position: absolute; width: 1.75rem; height: 1.75rem; border: 2px solid var(--accent); pointer-events: none; } .page-blocks .pp-media--frame::before { top: 0; left: 0; border-right: 0; border-bottom: 0; } .page-blocks .pp-media--frame::after { right: 0; bottom: 0; border-left: 0; border-top: 0; } .page-blocks .pp-section:not(.pp-section--band, .pp-section--image) .pp-media--frame::before, .page-blocks .pp-section:not(.pp-section--band, .pp-section--image) .pp-media--frame::after { border-color: var(--accent-ink); } .page-blocks .pp-caption { display: inline-block; margin-top: .875rem; padding: .25rem .75rem; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--muted); font-size: .8125rem; line-height: 1.5; } /* ---------- 資料表：首欄粗體、語氣符號、窄螢幕堆疊 ---------- */ .page-blocks .pp-table tbody th { width: 28%; min-width: 11rem; color: var(--ink); font-weight: 800; } /* 包含／不包含標記：圓章（包含＝強調色＋、不包含＝深色 ✕），不只靠顏色區分；符號來自字典 blocks.tableIncluded／tableExcluded。 */ .page-blocks .pp-tone-mark { display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem; margin-right: .5rem; border-radius: 50%; font-size: .8125rem; font-weight: 900; line-height: 1; vertical-align: -.2em; } .page-blocks .pp-tone--positive .pp-tone-mark { background: var(--accent); color: var(--accent-on); } .page-blocks .pp-tone--negative .pp-tone-mark { background: var(--ink); color: var(--paper); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-tone--negative .pp-tone-mark { background: var(--paper); color: var(--deeper); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-tone--positive .pp-tone-mark { background: var(--accent-fill, var(--accent-dark)); } @media (max-width: 45rem) { .page-blocks .pp-table-wrap { overflow: visible; border: 0; border-radius: 0; background: none; } .page-blocks .pp-table { min-width: 0; } .page-blocks .pp-table caption { display: block; margin-bottom: .75rem; border-radius: var(--radius-m); } .page-blocks .pp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .page-blocks .pp-table :is(tbody, tr, th, td) { display: block; } .page-blocks .pp-table tr { margin-bottom: 1rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--paper); } .page-blocks .pp-table tbody th { width: auto; min-width: 0; border-top: 0; background: var(--table-head-bg); } .page-blocks .pp-table tbody td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; margin-bottom: .25rem; color: var(--muted); font-size: .75rem; font-weight: 700; letter-spacing: .06em; } /* 卡片內格與格之間不畫框線（只用間距分組），也不留「強調色短橫線」：包含／不包含的區別由底色與符號表達。 */ .page-blocks .pp-table tbody td { padding-block: .75rem 0; border-top: 0; } .page-blocks .pp-table tbody td:last-child { padding-bottom: 1.125rem; } .page-blocks .pp-table tbody td:empty { display: none; } } /* v85：資料表在深色區段（範例站 Trellix 整頁深色）——外框與表頭改用深色面板、文字用深色底的層級色。 */ .page-blocks :is(.pp-section--band, .pp-section--image) .pp-table-wrap { border-color: var(--on-dark-line); background: color-mix(in srgb, var(--paper) 4%, var(--deeper)); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-table :is(th, td) { border-top-color: var(--on-dark-line); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-table thead th { background: color-mix(in srgb, var(--paper) 7%, var(--deeper)); color: var(--muted-on-dark); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-table tbody th { color: var(--paper); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-table td { color: var(--muted-on-dark); } /* v85：強調最後一欄（「導入後多出來的」）——整欄淡強調色底、欄名強調色、左側一條強調色線。 */ .page-blocks .pp-table--hl-last :is(th, td):last-child { background: color-mix(in srgb, var(--accent) 9%, transparent); } .page-blocks .pp-table--hl-last thead th:last-child { color: var(--accent-ink); } .page-blocks .pp-table--hl-last tbody td:last-child { border-left: 2px solid var(--accent); color: var(--ink); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-table--hl-last thead th:last-child { color: var(--accent-dark); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-table--hl-last tbody td:last-child { border-left-color: var(--accent-dark); color: var(--paper); } @media (max-width: 45rem) { .page-blocks :is(.pp-section--band, .pp-section--image) .pp-table tr { border-color: var(--on-dark-line); background: color-mix(in srgb, var(--paper) 4%, var(--deeper)); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-table tbody th { background: color-mix(in srgb, var(--paper) 7%, var(--deeper)); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-table tbody td[data-label]:not([data-label=""])::before { color: var(--muted-on-dark); } .page-blocks .pp-table--hl-last tbody td:last-child { border-left: 0; padding-top: .75rem; } } /* v85：條列樣式。編號＝01、02（decimal-leading-zero）加分隔線；叉號＝兩條斜線畫的 ✕（裝飾，意義由文字傳達）。 數字與叉號用品牌輔色（--accent-spark，Trellix 為金色）；淺底沒有輔色時用可讀的深強調色。 */ .page-blocks :is(.pp-list--number, .pp-list--cross) { gap: 0; margin-top: 1.5rem; border-top: 1px solid var(--line); counter-reset: pp-li; } .page-blocks :is(.pp-list--number, .pp-list--cross) li { padding: 1rem 0 1rem 2.75rem; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 1.0625rem; font-weight: 600; } .page-blocks .pp-list--number li { counter-increment: pp-li; } .page-blocks .pp-list--number li::before { content: counter(pp-li, decimal-leading-zero); top: 1rem; width: auto; height: auto; border-radius: 0; background: none; color: var(--accent-ink); font-size: .9375rem; font-weight: 800; letter-spacing: .1em; line-height: 1.75; } .page-blocks .pp-list--cross li::before { top: 1.375rem; width: 1rem; height: 1rem; border-radius: 0; background: linear-gradient(45deg, transparent calc(50% - 1px), var(--accent-ink) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(-45deg, transparent calc(50% - 1px), var(--accent-ink) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); } .page-blocks :is(.pp-section--band, .pp-section--image) :is(.pp-list--number, .pp-list--cross), .page-blocks :is(.pp-section--band, .pp-section--image) :is(.pp-list--number, .pp-list--cross) li { border-color: var(--on-dark-line); } .page-blocks :is(.pp-section--band, .pp-section--image) :is(.pp-list--number, .pp-list--cross) li { color: var(--paper); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-list--number li::before { color: var(--accent-spark, var(--accent-dark)); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-list--cross li::before { --x: var(--accent-spark, var(--accent-dark)); background: linear-gradient(45deg, transparent calc(50% - 1px), var(--x) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(-45deg, transparent calc(50% - 1px), var(--x) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); } /* v85：無圖分欄的左右版型——寬螢幕標題在左、內文在右（內文左側一條強調色線）；窄螢幕維持上下排列。 */ @media (min-width: 62rem) { .page-blocks .pp-split--solo.pp-split--aside { grid-template-columns: minmax(0, 1fr); } /* 右欄內文相對左欄標題垂直置中：上下各一條彈性空列（::before／::after）夾住內文列。 */ .page-blocks .pp-split--aside .pp-split-copy { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) repeat(10, auto) minmax(0, 1fr); column-gap: clamp(2.5rem, 7vw, 7rem); row-gap: 0; align-items: center; } .page-blocks .pp-split--aside .pp-split-copy::before, .page-blocks .pp-split--aside .pp-split-copy::after { content: ""; grid-column: 2; } .page-blocks .pp-split--aside .pp-split-copy::before { grid-row: 1; } .page-blocks .pp-split--aside .pp-split-copy::after { grid-row: 12; } .page-blocks .pp-split--aside .pp-split-copy > .pp-head { grid-column: 1; grid-row: 1 / 13; margin: 0; } /* 左欄只有約一半寬：標題縮一級，帶「｜」換行點的中文長句才不會在詞中斷開。 */ .page-blocks .pp-split--aside .pp-split-copy > .pp-head h2 { font-size: clamp(2rem, 3.2vw, 3rem); } .page-blocks .pp-split--aside .pp-split-copy > :not(.pp-head) { grid-column: 2; margin: 0; padding-block: .5rem; padding-left: 1.5rem; border-left: 2px solid var(--accent-spark, var(--accent)); } /* issue 407：條列超過 8 項（長清單）時標題靠上並隨捲動停留（比照常見問題），清單排成兩欄，不再浮在整段中間。 */ .page-blocks .pp-split--aside .pp-split-copy:has(> .pp-list > li:nth-child(9)) > .pp-head { align-self: start; position: sticky; top: 8rem; } .page-blocks .pp-split--aside .pp-split-copy > .pp-list:has(> li:nth-child(9)) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; } /* v85：FAQ 左右版型——標題在左（捲動時停在頂部）、問答在右。 */ .page-blocks .pp-faq-layout { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); column-gap: clamp(2.5rem, 7vw, 7rem); align-items: start; } .page-blocks .pp-faq-layout > .pp-head { position: sticky; top: 8rem; margin: 0; } } /* ---------- 常見問題：題號、圓形加號、展開淡入、誠實題 ---------- */ .page-blocks .pp-faq { counter-reset: pp-faq; } .page-blocks .pp-faq-item summary { justify-content: flex-start; padding-block: 1.25rem; } .page-blocks .pp-faq-item summary::before { counter-increment: pp-faq; content: counter(pp-faq, decimal-leading-zero); flex: 0 0 2.5rem; color: var(--accent-ink); font-size: .8125rem; font-weight: 800; font-variant-numeric: tabular-nums; } .page-blocks .pp-faq-item summary::after { display: grid; place-items: center; width: 2rem; height: 2rem; margin-left: auto; border: 1px solid var(--line); border-radius: 50%; font-size: 1.125rem; } .page-blocks .pp-faq-item > p, .page-blocks .pp-faq-honest { padding-left: 3.5rem; } .page-blocks .pp-faq-honest { padding-bottom: 1.5rem; } .page-blocks .pp-faq-item[open] > :not(summary) { animation: pp-fade var(--dur-base) var(--ease); } @keyframes pp-fade { from { opacity: 0; transform: translateY(-.375rem); } to { opacity: 1; transform: none; } } .page-blocks .pp-faq-item--honest { border-top: 2px solid var(--accent-ink); } .page-blocks .pp-faq-item[open] summary::after { border-color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 14%, transparent); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-faq-item summary::before { color: var(--accent-dark); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-faq-item summary::after { border-color: var(--on-dark-line); color: var(--accent-dark); } /* ---------- 誠實聲明（區塊與 FAQ 誠實題共用本體） ---------- */ .page-blocks .pp-honest { max-width: 52rem; padding-top: 1.75rem; border-top: 2px solid var(--accent-ink); } /* 獨立的誠實聲明區塊：帶色底與左側強調線的卡片，和一般段落區隔。 */ .page-blocks .pp-section--honest .pp-honest { padding: clamp(1.75rem, 3.5vw, 3rem); border-top: 0; border-left: 4px solid var(--accent-ink); border-radius: var(--radius-l); background: color-mix(in srgb, var(--accent) 7%, var(--paper)); } .page-blocks .pp-section--honest:is(.pp-section--band, .pp-section--image) .pp-honest { border-left-color: var(--accent-dark); background: color-mix(in srgb, var(--paper) 6%, var(--deeper)); } .page-blocks .pp-honest-badge { display: inline-block; margin: 0 0 1rem; padding: .25rem .75rem; border: 1px solid var(--accent-ink); border-radius: var(--r-pill); color: var(--accent-ink); font-size: .75rem; font-weight: 800; letter-spacing: .06em; } .page-blocks .pp-honest-q { margin: 0 0 .625rem; color: var(--ink); font-weight: 800; } .page-blocks .pp-honest-a { margin: 0; padding: 0; color: var(--ink); font-size: var(--fs-m); line-height: 1.6; white-space: pre-line; } .page-blocks .pp-faq-honest .pp-honest-a { font-size: 1.125rem; } @media (min-width: 62rem) { .page-blocks .pp-section--honest .pp-honest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); grid-template-rows: auto 1fr; column-gap: clamp(2.5rem, 5vw, 5rem); max-width: none; } .page-blocks .pp-section--honest .pp-honest-badge { grid-column: 1; justify-self: start; } .page-blocks .pp-section--honest .pp-honest-q { grid-column: 1; font-size: var(--fs-m); line-height: 1.4; } .page-blocks .pp-section--honest .pp-honest-a { grid-column: 2; grid-row: 1 / span 2; } } .page-blocks :is(.pp-section--band, .pp-section--image) :is(.pp-honest, .pp-faq-item--honest) { border-top-color: var(--accent-dark); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-honest-badge { border-color: var(--accent-dark); color: var(--accent-dark); } .page-blocks :is(.pp-section--band, .pp-section--image) :is(.pp-honest-q, .pp-honest-a) { color: var(--paper); } /* ---------- 結尾行動帶：置中、徑向光暈 ---------- */ .page-blocks .pp-section--cta::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 90% at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); } .page-blocks .pp-cta-box:not(.pp-cta--center) { align-items: end; } .page-blocks .pp-cta--center { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .page-blocks .pp-cta--center .pp-cta-copy { max-width: 64rem; } .page-blocks .pp-cta--center .pp-eyebrow { justify-content: center; } .page-blocks .pp-cta--center .pp-kicker { padding-left: 0; border-left: 0; } .page-blocks .pp-cta--center .pp-actions { justify-content: center; } .page-blocks .pp-cta--center .pp-btn { min-height: 3.5rem; padding-inline: 1.875rem; font-size: 1.0625rem; } /* ---------- 聲明框語氣 ---------- */ .page-blocks .pp-notice-label { color: var(--ink); font-size: .75rem; font-weight: 800; letter-spacing: .08em; } .page-blocks .pp-notice p { margin: 0; } .page-blocks .pp-notice--dashed { --notice-mark: var(--accent-ink); --notice-mark-on: var(--paper); border: 1px dashed var(--accent-ink); background: color-mix(in srgb, var(--accent) 5%, var(--paper)); color: var(--muted); } .page-blocks .pp-notice--dashed .pp-notice-label { color: var(--accent-ink); } .page-blocks .pp-notice--dark { --notice-mark: var(--accent-dark); --notice-mark-on: var(--accent-on); border-color: color-mix(in srgb, var(--accent-dark) 55%, transparent); background: var(--deeper); color: var(--muted-on-dark); } .page-blocks .pp-notice--dark .pp-notice-label { color: var(--accent-dark); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-notice--dashed { --notice-mark: var(--accent-dark); --notice-mark-on: var(--accent-on); border-color: var(--accent-dark); background: none; color: var(--muted-on-dark); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-notice--dashed .pp-notice-label { color: var(--accent-dark); } /* ---------- 並排清單語氣 ---------- */ .page-blocks .pp-column-icon { display: inline-grid; place-items: center; width: 1.625rem; height: 1.625rem; margin-right: .5rem; border-radius: 50%; font-size: .875rem; vertical-align: .125em; } .page-blocks .pp-column--positive { border-top-color: var(--accent-ink); } .page-blocks .pp-column--positive .pp-column-icon { background: var(--accent); color: var(--accent-on); } .page-blocks .pp-column--negative { border-top-color: var(--muted); background: var(--surface-sunken); } .page-blocks .pp-column--negative .pp-column-icon { background: var(--ink); color: var(--paper); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-column :is(h2, h3, h4) { color: var(--ink); } /* 最終審查：欄是白底，深色帶裡整欄改回深色字（內文不吃深色帶的淺色繼承）。 */ .page-blocks :is(.pp-section--band, .pp-section--image) .pp-column { color: var(--ink); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-column-item p { color: var(--muted); } /* ---------- 全幅宣言（沒選背景時 mapper 給深色帶） ---------- */ .page-blocks .pp-section--manifesto { --blocks-pad: clamp(3.5rem, 6vw, 5.5rem); } .page-blocks .pp-manifesto-text::before { content: ""; display: block; width: clamp(3rem, 6vw, 5rem); height: 4px; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); border-radius: 2px; background: var(--accent); } .page-blocks .pp-manifesto-text { max-width: 22ch; margin: 0; font-size: clamp(2.5rem, 9vw, 5.5rem); font-weight: 900; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; font-feature-settings: "palt"; } .page-blocks .pp-manifesto-line { display: block; } /* 編輯用「｜」標出的片語：放得下就整段不斷開，比一行還長時才在片語內換行（不撐出橫向捲軸）。 */ .page-blocks .pp-nowrap { display: inline-block; } .page-blocks .pp-manifesto-text strong { color: var(--accent-ink); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-manifesto-text strong { color: var(--accent-dark); } .page-blocks .pp-manifesto-source { margin: clamp(1.25rem, 3vw, 2rem) 0 0; color: var(--muted); font-size: .875rem; } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-manifesto-source { color: var(--muted-on-dark); } /* ---------- 實機畫面與放大檢視 ---------- */ .page-blocks .pp-shots { display: grid; gap: clamp(1rem, 2.4vw, 2rem); } @media (min-width: 56rem) { .page-blocks .pp-shots--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* issue 304：三欄（例如 MDR 平台畫面三張並排）。 */ @media (min-width: 56rem) { .page-blocks .pp-shots--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .page-blocks .pp-shot { min-width: 0; margin: 0; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--paper); box-shadow: var(--elevation-card); } /* issue 336：單欄實機畫面當縮圖（最寬 46rem 置中），點擊放大看原圖。 */ .page-blocks .pp-shots--c1 .pp-shot { width: 100%; max-width: 46rem; margin-inline: auto; } .page-blocks .pp-shot-badge { align-self: flex-start; display: inline-block; margin: 0 0 .75rem; padding: .25rem .625rem; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-size: .75rem; font-weight: 700; line-height: 1.5; } .page-blocks .pp-shot { display: flex; flex-direction: column; } .page-blocks .pp-shot img { display: block; width: 100%; height: auto; border-radius: var(--radius-m); } .page-blocks :is(.pp-shots--c2, .pp-shots--c3) .pp-shot img { aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; } .page-blocks .pp-shot-zoom { position: relative; } .page-blocks .pp-shot-zoom::after { content: "+"; position: absolute; right: .75rem; bottom: .75rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--deeper); color: var(--paper); font-size: 1.25rem; font-weight: 700; line-height: 1; transition: transform var(--dur-fast) var(--ease); } @media (hover: hover) { .page-blocks .pp-shot-zoom:hover::after { transform: scale(1.1); } } .page-blocks .pp-shot-zoom { display: block; border-radius: var(--radius-m); cursor: zoom-in; } .page-blocks .pp-shot-zoom:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; } .page-blocks .pp-shot figcaption { display: grid; gap: .25rem; margin-top: .875rem; padding-inline: .25rem; color: var(--muted); font-size: .875rem; line-height: 1.7; } .page-blocks .pp-shot figcaption strong { color: var(--ink); } /* 實機畫面的白卡放在深色帶裡時，卡內文字維持深色（不吃深色帶的淺色字規則）。 */ .page-blocks :is(.pp-section--band, .pp-section--image) .pp-shot figcaption strong { color: var(--ink); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-shot figcaption { color: var(--muted); } html.pp-shot-locked { overflow: hidden; } .pp-shot-dialog { width: min(96vw, 90rem); max-width: none; max-height: 94vh; padding: 3.5rem .75rem .75rem; border: 0; border-radius: var(--radius-l); background: var(--deeper); } .pp-shot-dialog::backdrop { background: color-mix(in srgb, var(--deeper) 86%, transparent); } .pp-shot-dialog img { display: block; max-width: 100%; max-height: calc(94vh - 4.5rem); margin-inline: auto; } /* 窄螢幕：實機截圖縮到螢幕寬時文字讀不出來，改為以約 900px 寬顯示、可左右與上下捲動查看。 */ .pp-shot-pan { max-height: calc(94vh - 4.5rem); } @media (max-width: 47.99rem) { .pp-shot-pan { overflow: auto; overscroll-behavior: contain; } .pp-shot-pan img { width: 56rem; max-width: none; max-height: none; margin-inline: 0; } } .pp-shot-close { position: absolute; top: .625rem; right: .625rem; min-height: 2.75rem; padding-inline: 1.125rem; border: 1px solid var(--on-dark-line); border-radius: var(--r-pill); background: transparent; color: var(--paper); font: inherit; font-weight: 700; cursor: pointer; } .pp-shot-close:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; } /* 全站「暫停動態」：區塊自己的動畫也停（進場由 motion.js 判斷）。 */ html[data-motion="off"] .page-blocks .pp-faq-item[open] > :not(summary) { animation: none; } html[data-motion="off"] .page-blocks .pp-card:hover { transform: none; } /* ---------- 第一批特效（issue 192）：卡片游標光暈、圖片捲動視差、閱讀進度條 ---------- */ /* 光暈：motion.js 在可懸停的精確指標下寫入 --mx／--my；沒有 JS 時停在卡片中央且不顯示。 */ .page-blocks .pp-card { position: relative; isolation: isolate; } .page-blocks .pp-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: 0; background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); transition: opacity var(--dur-base) var(--ease); } @media (hover: hover) and (pointer: fine) { .page-blocks .pp-card:is(:hover, :has(:focus-visible))::before { opacity: 1; } } /* overflow: clip（不是 hidden）：hidden 會讓外框變成捲動容器，view() 時間軸就綁到不會捲的外框上而不動。 */ .page-blocks .pp-media--parallax { overflow: clip; border-radius: var(--radius-xl); } .page-blocks .pp-media--parallax.pp-media--frame { border-radius: 0; } .page-blocks .pp-media--parallax img { border-radius: 0; } /* 進度條：子選單底部，寬度隨整頁捲動比例增加。 */ .brand-subnav-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent-ink); transform: scaleX(0); transform-origin: 0 50%; display: none; } @supports (animation-timeline: scroll()) { .brand-subnav-progress { display: block; animation: pp-progress linear both; animation-timeline: scroll(root); } @keyframes pp-progress { to { transform: scaleX(1); } } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { html:not([data-motion="off"]) .page-blocks .pp-media--parallax img { scale: 1.14; animation: pp-parallax linear both; animation-timeline: view(); } @keyframes pp-parallax { from { translate: 0 -6%; } to { translate: 0 6%; } } } } @media (prefers-reduced-motion: reduce) { .brand-subnav, .brand-subnav-list a, .brand-subnav-toggle::after, .page-blocks .pp-card, .page-blocks .pp-btn, .page-blocks .pp-faq-item summary::after { transition: none; } .page-blocks .pp-card:hover { transform: none; } .page-blocks .pp-faq-item[open] > :not(summary) { animation: none; } } /* ========== v91（issue 193）：區塊版面選項 ========== 原本綁在品牌色（data-accent）與錨點上的範例站版面，整理成後台區塊選項的通用 class；任何品牌、任何區段都能用。 */ /* 區段標題左右排（標題排列＝左右）：寬螢幕小標跨欄、大標在左、鉤子句或導言在右。 */ @media (min-width: 62rem) { .page-blocks .pp-section--head-split .pp-container > .pp-head:has(> :is(.pp-kicker, .pp-intro)) { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 3.5rem; align-items: end; max-width: none; } .page-blocks .pp-section--head-split .pp-container > .pp-head > .pp-eyebrow { grid-column: 1 / -1; grid-row: 1; } .page-blocks .pp-section--head-split .pp-container > .pp-head > h2 { grid-column: 1; grid-row: 2; } /* 有鉤子句時鉤子句在右、導言另起一列跨全寬；沒有鉤子句時導言在右。 */ .page-blocks .pp-section--head-split .pp-container > .pp-head > .pp-kicker { grid-column: 2; grid-row: 2; margin-top: 0; } .page-blocks .pp-section--head-split .pp-container > .pp-head > :is(.pp-intro, .pp-note) { grid-column: 1 / -1; grid-row: 3; } .page-blocks .pp-section--head-split .pp-container > .pp-head:not(:has(> .pp-kicker)) > .pp-intro { grid-column: 2; grid-row: 2; margin-top: 0; } .page-blocks .pp-section--head-split .pp-container > .pp-head:not(:has(> .pp-kicker)) > .pp-note { grid-row: 3; } /* issue 195：分欄標題區的章節編號是第一列（整列、靠左），其餘各往下一列。 */ .page-blocks .pp-section--head-split .pp-container > .pp-head > .pp-num { grid-column: 1 / -1; grid-row: 1; } .page-blocks .pp-section--head-split .pp-container > .pp-head:has(> .pp-num) > .pp-eyebrow { grid-row: 2; } .page-blocks .pp-section--head-split .pp-container > .pp-head:has(> .pp-num) > h2 { grid-row: 3; } .page-blocks .pp-section--head-split .pp-container > .pp-head:has(> .pp-num) > .pp-kicker { grid-row: 3; } .page-blocks .pp-section--head-split .pp-container > .pp-head:has(> .pp-num) > :is(.pp-intro, .pp-note) { grid-row: 4; } .page-blocks .pp-section--head-split .pp-container > .pp-head:has(> .pp-num):not(:has(> .pp-kicker)) > .pp-intro { grid-row: 3; } .page-blocks .pp-section--head-split .pp-container > .pp-head:has(> .pp-num):not(:has(> .pp-kicker)) > .pp-note { grid-row: 4; } } /* 卡片：高低錯落。 */ @media (min-width: 62rem) { #main .page-blocks .pp-cards--stagger { align-items: start; } #main .page-blocks .pp-cards--stagger > :nth-child(3n + 2) { margin-top: 3rem; } #main .page-blocks .pp-cards--stagger > :nth-child(3n + 3) { margin-top: 6rem; } /* 直式圖卡片較高，錯落幅度跟著加大。 */ #main .page-blocks .pp-cards--stagger.pp-cards--portrait > :nth-child(3n + 2) { margin-top: 4.5rem; } #main .page-blocks .pp-cards--stagger.pp-cards--portrait > :nth-child(3n + 3) { margin-top: 9rem; } } /* 卡片：圖片直式 4:5（範例站的產品卡標題較小、小標大寫）。 */ #main .page-blocks .pp-cards--portrait .pp-card-media img { aspect-ratio: 4 / 5; } #main .page-blocks .pp-cards--portrait .pp-card-title { font-size: 1.3125rem; } #main .page-blocks .pp-cards--portrait .pp-card-tag { text-transform: uppercase; letter-spacing: .14em; } /* 卡片：連結改文字加箭頭。 */ #main .page-blocks .pp-cards--textlink .pp-card-tag { color: var(--accent-ink); font-size: .8125rem; font-weight: 700; letter-spacing: .2em; } #main .page-blocks .pp-cards--textlink .pp-card-body > .pp-btn { align-self: flex-start; justify-self: start; min-height: 2.75rem; margin-top: auto; padding: .625rem 0 0; border: 0; border-radius: 0; background: none; color: var(--accent-ink); font-weight: 700; } #main .page-blocks .pp-cards--textlink .pp-card-body > .pp-btn::after { content: "→" / ""; margin-left: .5rem; transition: transform var(--dur-fast) var(--ease); } #main .page-blocks .pp-cards--textlink .pp-card:hover .pp-card-body > .pp-btn::after { transform: translateX(.375rem); } #main .page-blocks :is(.pp-section--band, .pp-section--image) .pp-cards--textlink :is(.pp-card-tag, .pp-card-body > .pp-btn) { color: var(--accent-dark); } /* 卡片：直角、不浮起；頂色條卡改深藍底加粗頂線，上圖下文卡的小標用強調色。 */ #main .page-blocks .pp-cards--square .pp-card { border-radius: 0; box-shadow: none; } #main .page-blocks .pp-cards--square .pp-card--accent { background: color-mix(in srgb, var(--paper) 4%, var(--navy)); border-top-width: 4px; } #main .page-blocks .pp-cards--square .pp-card--card .pp-card-tag { color: var(--accent-ink); font-size: .8125rem; font-weight: 800; letter-spacing: .1em; } /* 卡片：大號編號（依卡片順序 01、02…；數字是 CSS 計數，卡片標題才是內容）。 */ #main .page-blocks .pp-cards--numbered { counter-reset: pp-card-n; } #main .page-blocks .pp-cards--numbered .pp-card-body::before { counter-increment: pp-card-n; content: counter(pp-card-n, decimal-leading-zero); color: var(--accent-ink); font-size: clamp(3.5rem, 7vw, 5.5rem); font-weight: 900; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } #main .page-blocks :is(.pp-section--band, .pp-section--image) .pp-cards--numbered .pp-card-body::before { color: var(--accent-dark); } #main .page-blocks .pp-cards--numbered .pp-card--step .pp-card-tag { display: block; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: var(--accent-ink); font-size: .8125rem; font-weight: 800; letter-spacing: .1em; } /* 分隔欄加外框（欄標題不畫六角記號）。 */ #main .page-blocks .pp-cards--framed { border: 1px solid var(--line); } #main .page-blocks .pp-cards--framed .pp-card--rule .pp-card-title::before { display: none; } #main .page-blocks .pp-cards--framed .pp-card--rule .pp-card-title { font-size: clamp(1.25rem, 1.8vw, 1.625rem); } #main .page-blocks .pp-cards--framed .pp-card--rule .pp-card-body, #main .page-blocks .pp-cards--framed .pp-card--rule:first-child .pp-card-body { padding: 1.75rem clamp(1rem, 2vw, 1.75rem) 2rem; } #main .page-blocks :is(.pp-section--band, .pp-section--image) .pp-cards--framed { background: color-mix(in srgb, var(--paper) 3%, transparent); } /* 小標樣式：格線大字頂圖（卡片上方一塊深色格線底，小標放大置中；卡片標題前自動加 01、02）。 */ #main .page-blocks .pp-cards--tag-tile { counter-reset: pp-tile; } #main .page-blocks .pp-cards--tag-tile .pp-card { container-type: inline-size; position: relative; display: flex; flex-direction: column; overflow: hidden; counter-increment: pp-tile; } #main .page-blocks .pp-cards--tag-tile .pp-card-body { position: static; padding-top: calc(66.667cqw + 1.5rem); } #main .page-blocks .pp-cards--tag-tile .pp-card-tag { position: absolute; inset: 0 0 auto 0; display: grid; place-items: center; height: 66.667cqw; margin: 0; padding: 0 .75rem; background-color: var(--deeper); background-image: radial-gradient(14rem 8rem at 70% 20%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), linear-gradient(color-mix(in srgb, var(--accent-dark) 9%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent-dark) 9%, transparent) 1px, transparent 1px); background-size: 1.5rem 1.5rem; color: var(--accent-dark); font-size: clamp(1.875rem, 3.4vw, 2.875rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; text-align: center; } #main .page-blocks .pp-cards--tag-tile .pp-card-title::before { content: "0" counter(pp-tile) / ""; display: block; margin-bottom: .5rem; color: var(--accent-ink); font-size: .8125rem; font-weight: 700; letter-spacing: .2em; } /* 圖片卡滿版面板（blocks-interactions.js 的 enhancePanels 加 is-panels；沒有 JS 時並列、文字全部顯示）。 */ .page-blocks .pp-section:has(.pp-cards--panels) .pp-head { max-width: none; } @media (min-width: 56.25rem) { /* issue 291：面板與區段標題同一條內容邊界（不再 100vw 滿版），外框圓角。 */ #main .page-blocks .pp-cards--panels { display: flex; gap: 0; width: min(var(--max), 100vw - var(--gutter) * 2); height: min(72svh, 42.5rem); margin-left: calc(50% - min(var(--max), 100vw - var(--gutter) * 2) / 2); border-radius: var(--r-card); overflow: hidden; } #main .page-blocks .pp-cards--panels .pp-card--media { flex: 1; min-width: 0; min-height: 0; border: 0; border-left: 1px solid var(--on-dark-line); border-radius: 0; box-shadow: none; overflow: hidden; } #main .page-blocks .pp-cards--panels .pp-card--media:first-child { border-left: 0; } #main .page-blocks .pp-cards--panels .pp-card--media .pp-card-media img { transition: transform 1.2s var(--ease); } #main .page-blocks .pp-cards--panels .pp-card--media .pp-card-body { min-height: 0; padding: clamp(1.25rem, 2.4vw, 2.5rem); background: none; } #main .page-blocks .pp-cards--panels .pp-card--media .pp-card-title { order: 0; font-size: clamp(1.8rem, 3.2vw, 3rem); } #main .page-blocks .pp-cards--panels .pp-card--media .pp-card-tag { order: 1; margin: 0 0 .5rem; color: var(--muted-on-dark); font-size: .875rem; font-weight: 400; letter-spacing: 0; } #main .page-blocks .pp-cards--panels .pp-card--media .pp-card-body p:not(.pp-card-tag) { order: 2; max-width: 26em; } #main .page-blocks .pp-cards--panels .pp-card--media .pp-card-body > a { order: 3; margin-top: 1rem; align-self: flex-start; min-height: 0; padding: 0 0 .125rem; border: 0; border-bottom: 1px solid var(--accent-dark); border-radius: 0; background: none; font-size: .9375rem; } html.js #main .page-blocks .pp-cards--panels.is-panels .pp-card--media { transition: flex .8s var(--ease); } html.js #main .page-blocks .pp-cards--panels.is-panels .pp-card--media.is-on { flex: 2.8; } html.js #main .page-blocks .pp-cards--panels.is-panels .pp-card--media.is-on .pp-card-media img { transform: scale(1.05); } html.js #main .page-blocks .pp-cards--panels.is-panels .pp-card--media:not(.is-on) .pp-card-body p:not(.pp-card-tag) { display: none; } html.js #main .page-blocks .pp-cards--panels.is-panels .pp-card--media:not(.is-on) .pp-card-body > a { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; border: 0; } } /* 卡片樣式「編號列」：大型空心編號（小標）｜標題｜說明，列與列之間細線。 */ #main .page-blocks .pp-cards--rows { display: block; } #main .page-blocks .pp-card--rows { display: grid; grid-template-columns: minmax(clamp(4rem, 11vw, 9rem), max-content) minmax(0, 1fr); column-gap: clamp(1rem, 3vw, 2.5rem); align-items: start; padding: clamp(1.25rem, 2.5vw, 2rem) 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; transform: none; } #main .page-blocks .pp-card--rows:last-child { border-bottom: 1px solid var(--line); } #main .page-blocks .pp-card--rows:hover { transform: none; box-shadow: none; border-color: var(--line); } #main .page-blocks .pp-card--rows .pp-card-body { display: contents; } #main .page-blocks .pp-card--rows .pp-card-tag { grid-column: 1; grid-row: 1 / span 2; margin: 0; color: var(--accent-ink); font-size: clamp(2.25rem, 4.4vw, 3.75rem); font-weight: 900; line-height: 1; letter-spacing: 0; white-space: nowrap; } #main .page-blocks .pp-card--rows .pp-card-title { grid-column: 2; margin: 0; font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.25; } #main .page-blocks .pp-card--rows .pp-card-body p:not(.pp-card-tag) { grid-column: 2; margin: .5rem 0 0; } #main .page-blocks :is(.pp-section--band, .pp-section--image) .pp-card--rows { border-color: var(--on-dark-line); } #main .page-blocks :is(.pp-section--band, .pp-section--image) .pp-card--rows .pp-card-tag { color: var(--accent-dark); } #main .page-blocks :is(.pp-section--band, .pp-section--image) .pp-card--rows .pp-card-title { color: var(--paper); } #main .page-blocks :is(.pp-section--band, .pp-section--image) .pp-card--rows .pp-card-body p:not(.pp-card-tag) { color: var(--muted-on-dark); } /* 編號列＋每列 3 欄：寬螢幕排成 編號｜標題｜說明 三欄（標題縮一級）。 */ @media (min-width: 62rem) { #main .page-blocks .pp-cards--rows.pp-cards--c3 .pp-card--rows { grid-template-columns: minmax(clamp(4rem, 11vw, 9rem), max-content) minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; } #main .page-blocks .pp-cards--rows.pp-cards--c3 .pp-card--rows .pp-card-tag { grid-row: 1; } #main .page-blocks .pp-cards--rows.pp-cards--c3 .pp-card--rows .pp-card-title { grid-column: 2; font-size: 1.5rem; } #main .page-blocks .pp-cards--rows.pp-cards--c3 .pp-card--rows .pp-card-body p:not(.pp-card-tag) { grid-column: 3; margin: 0; } } /* 無圖分欄左右排＋標題尺寸「大」：左欄加寬、標題約 68px（範例站 Trellix「攻擊者把 AI 寫進執行層」）。 */ @media (min-width: 62rem) { .page-blocks .pp-section--head-large .pp-split--aside .pp-split-copy { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } .page-blocks .pp-section--head-large .pp-split--aside .pp-split-copy > .pp-head h2 { font-size: clamp(2.5rem, 4.4vw, 4.25rem); line-height: 1.18; } } @media (max-width: 61.99rem) { .page-blocks .pp-section--head-large .pp-split--aside .pp-split-copy > .pp-head h2 { font-size: clamp(1.75rem, 7.2vw, 2.5rem); line-height: 1.2; } } /* 標題尺寸「小」：寬螢幕收一級（範例站分欄內的標題 52px）。 */ @media (min-width: 62rem) { .page-blocks .pp-section--head-small .pp-head h2 { font-size: clamp(1.75rem, 3.6vw, 3.25rem); } } /* 分隔欄的卡片已有小標（當作欄標籤）時，不再畫六角記號。 */ .page-blocks .pp-card--rule:has(.pp-card-tag) .pp-card-title::before { display: none; } /* 提示框語氣：框線（白底細框＋左側強調線）、深色框（淡底細框＋左側強調線）。 */ .page-blocks .pp-notice--box { --notice-mark: var(--accent-ink); --notice-mark-on: var(--paper); background: var(--paper); border-color: var(--line); } .page-blocks .pp-notice--panel { --notice-mark: var(--accent-dark); --notice-mark-on: var(--accent-on); border-color: var(--on-dark-line); background: color-mix(in srgb, var(--paper) 4%, var(--navy)); color: var(--paper); } .page-blocks .pp-notice--panel .pp-notice-label { color: var(--paper); font-size: 1rem; letter-spacing: 0; } .page-blocks .pp-notice--panel p { color: var(--muted-on-dark); } /* 資料表：深色表頭；「納入／不納入」標記與文字同一行（全站）。 */ .page-blocks .pp-table--darkhead thead th { background: var(--navy); color: var(--paper); border-bottom: 0; } .page-blocks .pp-table--darkhead thead th:nth-child(2) { background: color-mix(in srgb, var(--paper) 9%, var(--navy)); } @media (min-width: 62rem) { .page-blocks td:has(> .pp-tone-mark) { white-space: nowrap; } } /* 並排清單：無卡片樣式（欄標題下強調色粗線、負面欄虛線；項目前菱形記號）。 */ .page-blocks .pp-columns--plain .pp-column { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } .page-blocks .pp-columns--plain .pp-column > :is(h2, h3) { padding-bottom: 1rem; border-bottom: 3px solid var(--accent-ink); } .page-blocks .pp-columns--plain .pp-column--negative > :is(h2, h3) { border-bottom-style: dashed; } .page-blocks .pp-columns--plain .pp-column-icon { background: none; color: var(--accent-ink); box-shadow: inset 0 0 0 2px var(--accent-ink); } .page-blocks .pp-columns--plain .pp-column-item { position: relative; padding: 1.125rem 0 1.125rem 1.75rem; } .page-blocks .pp-columns--plain .pp-column-item::before { content: ""; position: absolute; left: .25rem; top: 1.75rem; width: .5625rem; height: .5625rem; background: var(--accent-ink); transform: rotate(45deg); } .page-blocks .pp-columns--plain .pp-column-item:first-of-type { border-top: 1px solid var(--line); } /* 帳冊：左文右帳冊並排；深色底的帳冊與分類用深色版配色。 */ @media (min-width: 62rem) { .page-blocks .pp-section:has(.pp-ledger--side) > .pp-container { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); grid-template-rows: auto auto auto; column-gap: clamp(1.75rem, 5vw, 5rem); } .page-blocks .pp-ledger--side { display: contents; } /* issue 372：分類已移進帳冊卡片；左欄只剩區段標題，與右邊帳冊上下置中。 */ .page-blocks .pp-section:has(.pp-ledger--side) .pp-head { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin: 0; } .page-blocks .pp-ledger--side .pp-ledger-sheet { grid-column: 2; grid-row: 1 / span 2; align-self: start; } .page-blocks .pp-ledger--side .pp-ledger-foot { grid-column: 2; grid-row: 3; } } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-ledger-sheet { border: 1px solid var(--on-dark-line); background: color-mix(in srgb, var(--paper) 5%, var(--deeper)); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-ledger-foot { color: var(--muted-on-dark); } /* 橫向捲軸：時間軸樣式（六角節點、貫穿線、大型空心編號、最後一點強調；窄螢幕直排）。 */ .page-blocks .pp-track--timeline .pp-track-hint { display: none; } .page-blocks .pp-track--timeline .pp-track-row { counter-reset: pp-node; } .page-blocks .pp-track--timeline .pp-track-item { position: relative; counter-increment: pp-node; padding: 4rem 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; } .page-blocks .pp-track--timeline .pp-track-item::before { content: counter(pp-node); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.75rem; height: 3.125rem; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: color-mix(in srgb, var(--paper) 22%, var(--deeper)); color: var(--paper); font-size: 1rem; font-weight: 800; } .page-blocks .pp-track--timeline .pp-track-item::after { content: ""; position: absolute; left: 0; right: calc(-1 * clamp(1rem, 2vw, 1.5rem)); top: 1.5rem; height: 2px; background: color-mix(in srgb, var(--paper) 45%, transparent); z-index: -1; } .page-blocks .pp-track--timeline .pp-track-item:last-child::before { background: var(--accent-fill, var(--accent-dark)); color: var(--accent-on); } .page-blocks .pp-track--timeline .pp-track-item:last-child::after { right: 0; } .page-blocks .pp-track--timeline .pp-track-item :is(h2, h3) { font-size: clamp(1.3rem, 2.2vw, 1.8rem); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-track--timeline .pp-track-item :is(h2, h3) { color: var(--paper); } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-track--timeline .pp-track-item p { color: var(--muted-on-dark); } html:not([data-motion="off"]) .page-blocks .pp-track--timeline .pp-track-num, .page-blocks .pp-track--timeline .pp-track-num { margin: 0 0 .875rem; color: color-mix(in srgb, var(--paper) 55%, transparent); paint-order: normal; font-size: clamp(4rem, 9vw, 8rem); line-height: .9; letter-spacing: 0; } .page-blocks .pp-track--timeline .pp-track-item:last-child .pp-track-num { color: var(--accent-dark); } @media (max-width: 61.99rem) { .page-blocks .pp-track--timeline .pp-track-viewport { overflow: visible; margin-inline: 0; padding: 0; } .page-blocks .pp-track--timeline .pp-track-row { flex-direction: column; width: auto; gap: 2rem; } .page-blocks .pp-track--timeline .pp-track-item { flex: none; padding-left: 4rem; } .page-blocks .pp-track--timeline .pp-track-item::before { top: 0; } .page-blocks .pp-track--timeline .pp-track-item::after { left: 1.375rem; right: auto; top: 3.125rem; bottom: -2rem; width: 2px; height: auto; } .page-blocks .pp-track--timeline .pp-track-item:last-child::after { display: none; } .page-blocks .pp-track--timeline .pp-track-num { font-size: 3rem; } } /* 結尾行動帶「左右排」：寬螢幕標題在左，說明與按鈕在右。 */ @media (min-width: 62rem) { .page-blocks .pp-cta-box.pp-cta--split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 5rem); row-gap: 1.25rem; align-items: start; text-align: left; } .page-blocks .pp-cta--split .pp-cta-copy { display: contents; } .page-blocks .pp-cta--split .pp-cta-copy > .pp-eyebrow { grid-column: 1; grid-row: 1; } .page-blocks .pp-cta--split .pp-cta-copy > h2 { grid-column: 1; grid-row: 2 / span 2; } .page-blocks .pp-cta--split .pp-cta-copy > p:not(.pp-eyebrow) { grid-column: 2; grid-row: 2; align-self: end; margin: 0; } .page-blocks .pp-cta--split .pp-actions { grid-column: 2; grid-row: 3; align-self: start; } } /* 全站：深色行動帶的次要按鈕透明框；四格分隔線數字帶在窄螢幕排成 2×2；編號清單字級加大。 */ .page-blocks .pp-section--cta .pp-btn--secondary { background: transparent; color: var(--paper); border-color: color-mix(in srgb, var(--paper) 30%, transparent); } @media (max-width: 40rem) { .page-blocks .pp-stats--rule:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0; } .page-blocks .pp-stats--rule:has(> :nth-child(4)) .pp-stat { padding-inline: 1rem; } .page-blocks .pp-stats--rule:has(> :nth-child(4)) .pp-stat:nth-child(odd) { border-left: 0; padding-left: 0; } } .page-blocks .pp-list--number li { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); font-weight: 700; padding-left: 3.25rem; } /* ---------- 招牌動作「章節大編號」（issue 195）：每個有標題、沒有圖片的區段右上角浮出描邊大數字 ---------- 編號是伺服器輸出的 （放在標題區裡、依順序、可在後台逐區關閉）。 標題區直接在內容欄下的區段（寬螢幕）：編號絕對定位在內容欄右上，標題區預留同寬的右內距與同高的最小高度，所以不可能壓到標題、導言或下方內容。 手機（≤ 40rem）、左右分欄標題區、場景把標題區放進自己欄位時：編號是標題上方獨立一列，不與任何東西重疊。 動態：進入視窗時描邊轉填色並由上輕輕落位（捲動時間軸，無 JS）；減少動態、暫停動態、不支援時間軸的瀏覽器維持靜態描邊。 */ .page-blocks .pp-section--numbered > .pp-container { position: relative; --num-size: clamp(4.5rem, 11vw, 10rem); } .page-blocks .pp-num { --pf-nc: var(--accent-ink); display: block; margin: 0 0 .5rem; font: 800 clamp(3rem, 5vw, 4.5rem)/.85 "Inter Tight", var(--font-body); font-variant-numeric: tabular-nums; letter-spacing: -.05em; color: color-mix(in srgb, var(--pf-nc) 16%, transparent); pointer-events: none; user-select: none; } .page-blocks :is(.pp-section--band, .pp-section--image) .pp-num { --pf-nc: var(--accent-dark, var(--accent)); color: color-mix(in srgb, var(--pf-nc) 20%, transparent); } @media (min-width: 40.0625rem) { .page-blocks .pp-section--numbered:not(.pp-section--head-split) > .pp-container > .pp-head { position: relative; box-sizing: border-box; max-width: none; min-height: calc(var(--num-size) * .85); padding-right: calc(var(--num-size) * 1.3); } .page-blocks .pp-section--numbered:not(.pp-section--head-split) > .pp-container > .pp-head > :not(.pp-num) { max-width: 46rem; } .page-blocks .pp-section--numbered:not(.pp-section--head-split) > .pp-container > .pp-head > .pp-num { position: absolute; z-index: 0; top: 0; right: 0; margin: 0; font-size: var(--num-size); line-height: .8; } } /* issue 213：帳冊左右並排時標題在窄欄，絕對定位的大數字佔掉右側內距，標題與導言只剩約 240px。改成編號與小標同列，文字用整欄寬、右緣切齊編號。 */ @media (min-width: 62rem) { .page-blocks .pp-section--numbered:has(.pp-ledger--side) > .pp-container > .pp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; min-height: 0; padding-right: 0; } .page-blocks .pp-section--numbered:has(.pp-ledger--side) > .pp-container > .pp-head > * { grid-column: 1 / -1; max-width: none; } .page-blocks .pp-section--numbered:has(.pp-ledger--side) > .pp-container > .pp-head > .pp-num { position: static; grid-row: 1; grid-column: 2; align-self: end; } .page-blocks .pp-section--numbered:has(.pp-ledger--side) > .pp-container > .pp-head > .pp-eyebrow { grid-row: 1; grid-column: 1; align-self: end; } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { html:not([data-motion="off"]) .page-blocks .pp-num { animation: pp-num-in linear both; animation-timeline: view(); animation-range: entry 15% cover 35%; } } } @keyframes pp-num-in { from { translate: 0 -1rem; -webkit-text-fill-color: transparent; } to { translate: 0 0; -webkit-text-fill-color: color-mix(in srgb, var(--pf-nc) 24%, transparent); } } /* issue 296：Netskope 品牌配色（公司官網配色為底，品牌色依 Netskope 官網規則）。色票在 design-tokens.css 的 [data-accent="netskope"] 區塊（--ns-*）， 這裡只用 token；規則全部限定 Netskope 主題，不加強制優先旗標，特異性等於或高於被覆寫的規則（inner.css 的頁首按鈕、本檔的子導覽按鈕）。 按鈕一律用主題青藍，與標題強調詞同色（issue 297 頁首、之後子導覽與預約諮詢也改，2026-10-14 使用者決定不用 Netskope 橘）；公司頁首「聯絡顧問」與頁尾按鈕不在 .page-head／.page-blocks 內，不受影響。 */ /* 子選單「預約諮詢」：白底子選單（第一區塊為淺底的子頁，如 SASE、SSE）也用主題青藍，不落回預設深藍。 */ #main.inner-main:has(> .catalog-content > .page-blocks[data-accent="netskope"]) > .catalog-content > .brand-subnav .brand-subnav-cta { background: var(--accent-dark); color: var(--accent-on); } /* 淺底標題用 Netskope 深海軍藍（深色帶、結尾帶、場景內的標題維持白色） */ .page-blocks[data-accent="netskope"] .pp-section:not(.pp-section--band, .pp-section--image, .pp-section--cta, .pp-section--scene) :is(h2, h3, .pp-card-title) { color: var(--ns-navy); } /* 淺底連結型按鈕：深青藍（--accent-ink，白底 5.6:1） */ .page-blocks[data-accent="netskope"] .pp-section:not(.pp-section--band, .pp-section--image, .pp-section--cta, .pp-section--scene) .pp-btn--dark { color: var(--accent-ink); } /* 卡片標籤：淡青底＋海軍藍字 */ .page-blocks[data-accent="netskope"] :is(.pp-tag, .pp-card-tag) { background: var(--ns-pale); color: var(--ns-navy); } /* 結尾行動帶：海軍藍到近黑漸層，右上青藍光暈（品牌深色面只在這裡出現） */ .page-blocks[data-accent="netskope"] .pp-section--cta { background: radial-gradient(ellipse 50% 90% at 100% 0%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 70%), linear-gradient(120deg, var(--ns-navy), var(--ns-night)); } /* issue 301：三欄卡片後緊接沒有標題的緊湊表格（例如 DevaEye「風險來源不同」）：表格三欄等寬，欄界落在上方卡片的間隔內；兩者間距拉近，讀起來是同一組。 */ .page-blocks .pp-section:has(> .pp-container > .pp-cards--c3):has(+ .pp-section--tight > .pp-container > .pp-table-wrap:first-child) { padding-bottom: 1.5rem; } .page-blocks .pp-section:has(> .pp-container > .pp-cards--c3) + .pp-section--tight:not(:has(> .pp-container > .pp-head)):has(> .pp-container > .pp-table-wrap) { padding-top: 0; } .page-blocks .pp-section:has(> .pp-container > .pp-cards--c3) + .pp-section--tight:not(:has(> .pp-container > .pp-head)):has(> .pp-container > .pp-table-wrap) .pp-table { table-layout: fixed; } /* issue 328：同背景、下一區沒有標題＝同一段內容的延續；下一區不留上內距，上一區下內距縮成約 64px（原本兩邊各 56–115px）。 */ .page-blocks .pp-section.pp-section--alt + .pp-section--headless.pp-section--alt { padding-top: 0; } .page-blocks .pp-section.pp-section--alt:has(+ .pp-section--headless.pp-section--alt) { padding-bottom: clamp(2.5rem, 5vw, 4rem); } .page-blocks .pp-section.pp-section--band:not(.pp-section--band-alt) + .pp-section--headless.pp-section--band:not(.pp-section--band-alt) { padding-top: 0; } .page-blocks .pp-section.pp-section--band:not(.pp-section--band-alt):has(+ .pp-section--headless.pp-section--band:not(.pp-section--band-alt)) { padding-bottom: clamp(2.5rem, 5vw, 4rem); } .page-blocks .pp-section.pp-section--band.pp-section--band-alt + .pp-section--headless.pp-section--band.pp-section--band-alt { padding-top: 0; } .page-blocks .pp-section.pp-section--band.pp-section--band-alt:has(+ .pp-section--headless.pp-section--band.pp-section--band-alt) { padding-bottom: clamp(2.5rem, 5vw, 4rem); } .page-blocks .pp-section:not(.pp-section--alt, .pp-section--band, .pp-section--image, .pp-section--cta) + .pp-section--headless:not(.pp-section--alt, .pp-section--band, .pp-section--image, .pp-section--cta) { padding-top: 0; } .page-blocks .pp-section:not(.pp-section--alt, .pp-section--band, .pp-section--image, .pp-section--cta):has(+ .pp-section--headless:not(.pp-section--alt, .pp-section--band, .pp-section--image, .pp-section--cta)) { padding-bottom: clamp(2.5rem, 5vw, 4rem); }