/* 單一淺色主題：白底，所有顏色明確指定，不隨檢視者主題反轉 */ :root{ color-scheme:light; --ink:#111519; --ink-2:#404B58; --ink-3:#646F7C; --paper:#FFFFFF; --surface:#FFFFFF; --surface-2:#F5F7FA; --line:#E4E8EE; --line-2:#C6CDD7; --accent:#1769DC; --accent-soft:#E3EDFC; --on-accent:#FFFFFF; /* 新增 token：琥珀（--c-respond #FFA902）的極淡底色，供 IdP 示意節點使用， 標示其位於 Atlassian 組織之外；深淺與 --accent-soft 對齊，僅色相不同。 */ --yes:#1769DC; --yes-ring:#D5E4FB; --no:#C6CDD7; /* 分類階梯保留暖色對比；Public 去飽和為中性灰，避免與 Internal 的藍相混。 四級的相對亮度單調遞減（.176 / .124 / .086 / .055），使機密程度直接讀作 顏色的深淺；四色於白底皆達 4.5:1 以上，可安全用作 h3 的文字色。 */ --c-protect:#1769DC; --c-detect:#8A52C8; --c-respond:#FFA902; /* detect 原為 #BF63F4，是全頁最鮮的一色。降飽和至相對亮度 .156，與 protect（.155） 幾乎等重；作為 .pdr-nav 選中底色時，白字對比 5.10:1（原 3.33:1 不及 AA）。 */ --c-public:#687684; --c-internal:#2A669B; --c-conf:#7D4419; --c-restricted:#792525; /* IdP 節點的淡琥珀底色，深淺對齊 --accent-soft */ --amber-soft:#FFF6E0; /* 場景六組各一色，以及配對的極淡底色。色相分散但飽和度一致， 使六組在導覽列上可一眼區分，底色則淡到不與卡片白底相爭。 */ --g-common:#5E6B7A; --g-common-s:#F3F5F7; --g-finance:#1769DC; --g-finance-s:#EFF5FD; --g-manu:#A85C22; --g-manu-s:#FAF4ED; --g-services:#7B4BC4; --g-services-s:#F5F1FC; --g-public:#1C7A6B; --g-public-s:#EDF6F4; --g-software:#A63A63; --g-software-s:#FBF0F4; /* 採用路徑三分支：同一藍色相由深至淺，讀作由左而右的漸進 */ --p-1:#0F4FA6; --p-1-s:#EEF4FC; --p-1-t:#0E3C78; --p-2:#3D82E2; --p-2-s:#F3F8FD; --p-2-t:#1A57A4; --p-3:#8FB9EE; --p-3-s:#F8FBFE; --p-3-t:#2A6FC0; /* 圓角只有兩種：容器用 --r-card，可互動或標記類元素用 --r-chip */ --measure:760px; /* 內文行寬：所有段落、註記共用同一個右邊界，約 46 個中文字；用 px 而非 ch，小字註記才不會比段落窄 */ --r-card:8px; --r-chip:999px; /* 主卡（定價、防護層次、採用路徑起點、聯絡區）用較大圓角與陰影、無邊框， 與 1px 邊框的列表卡拉開層級；列表卡維持 --r-card。 */ --r-card-lg:12px; /* 字級階梯：全頁僅使用以下級距，不再出現隨手微調的中間值 */ --fs-tag:11px; /* 等寬小標籤：區段標記、方案標記、年份 */ --fs-xs:12.5px; /* 註記、表格內說明、圖說 */ --fs-sm:13.5px; /* 條列、卡片次要文字、表格內容 */ --fs-base:15px; /* 卡片內文、按鈕 */ --fs-body:16px; /* 主要段落 */ --fs-md:17px; /* 卡片標題、表頭方案名 */ --fs-lg:18.5px; /* 區塊標題 h3、導言 */ --fs-panel:clamp(20px,2.2vw,26px); /* 分頁面板標題 */ --fs-h2:clamp(26px,3.2vw,34px); --fs-h1:clamp(31px,4.3vw,45px); --fs-num:27px; /* 首屏統計數字 */ --fs-amt:40px; /* 價格數字 */ --shadow:0 1px 2px rgba(17,21,25,.04), 0 14px 34px -24px rgba(17,21,25,.30); /* 新增 token：卡片 hover 時的下一階陰影。只是把 --shadow 兩層的透明度各加深一階、 擴散拉大，用的仍是既有陰影所使用的 --ink 色（rgba(17,21,25,·)），未引入新色票。 */ --shadow-hover:0 1px 2px rgba(17,21,25,.06), 0 18px 40px -22px rgba(17,21,25,.42); /* 拉丁字用 Plus Jakarta Sans；中文於桌面用 Noto Sans TC， 行動裝置則依序回落至系統內建字型（iOS 蘋方、Android 思源、Windows 微軟正黑） */ --sans:"Plus Jakarta Sans", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans CJK TC", "Microsoft JhengHei", "Segoe UI", sans-serif; --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } *{box-sizing:border-box} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:400; font-size:var(--fs-body); line-height:1.75; -webkit-font-smoothing:antialiased; /* 中文斷行只落在詞界：keep-all 讓瀏覽器不再於任兩字之間換行，換行點由部署時 tools/wbr.py 依 BudouX 詞界插入的 提供；overflow-wrap:anywhere 是保險， 沒有 的長字串（標籤、表格）撐不下時仍可斷開，不會撐破容器。 用 break-word 而非 anywhere：anywhere 會把最小內容寬度縮到一個字，流程圖的 格子因此被擠窄，「Confluence」被硬拆成兩行。 */ word-break:keep-all; overflow-wrap:break-word; } a{color:inherit} :where(a,button):focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-chip)} .wrap{max-width:1080px; margin:0 auto; padding:0 28px} section{padding:76px 0; border-top:1px solid var(--line)} section:first-of-type{border-top:0} /* ---------- 區塊節奏：交替底色的滿版色帶 ---------- */ /* 區塊位於置中欄 .wrap 之內，要讓底色鋪滿視窗寬度而內容仍對齊欄位： 負的 margin 把盒子外推到視窗左右緣（50% 為欄寬的一半、50vw 為視窗的一半， 兩者相減即欄緣到視窗緣的距離），再以等量的 padding 把內容推回原位。 此法不依賴 .wrap 的實際內距值，窄螢幕 .wrap 改為 18px 時仍自動成立。 */ .band{ background:var(--surface-2); margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50%); border-top:0; } /* 色帶的色差本身已是分隔線，緊接其後的白底區塊不再疊一條邊線 */ .band + section{border-top:0} /* 內文型區塊（僅一段導言加時間軸）不需要與主要區塊相同的呼吸空間 */ section.compact{padding:56px 0} @media (max-width:900px){section.compact{padding:44px 0}} /* ---------- sticky 導航列 ---------- */ html{scroll-behavior:smooth} /* 色帶以 50vw 計寬，而 vw 含捲軸寬度：在顯示傳統捲軸的系統上會比可視區寬出 半個捲軸並產生橫向捲動。以 clip 裁掉溢出而不把根元素變成捲動容器， sticky 導航列與錨點捲動皆不受影響；不支援 clip 的舊瀏覽器回落至 hidden。 */ html{overflow-x:hidden; overflow-x:clip} .nav{ position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line); } /* 閱讀進度條：疊在導覽列底框上（bottom:-1px 蓋住那 1px），寬度由指令碼寫入 --read-progress。用 scaleX 而非 width，讓變動落在合成層、不觸發版面重算。 未啟用指令碼時該變數為 0，等於不顯示。 */ .nav::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); transform:scaleX(var(--read-progress, 0)); transform-origin:0 50%; } .nav-in{ max-width:1080px; margin:0 auto; padding:0 28px; height:64px; display:flex; align-items:center; gap:26px; } .nav-brand{ display:flex; align-items:center; gap:10px; flex:none; font-weight:800; font-size:var(--fs-base); letter-spacing:-.02em; color:var(--ink); text-decoration:none; } .nav-brand small{ display:block; font-weight:500; font-size:var(--fs-tag); letter-spacing:0; color:var(--ink-3); margin-top:1px; } .nav-brand img{width:20px; height:20px; border-radius:6px} .nav-links{ display:flex; align-items:center; gap:18px; overflow-x:auto; flex:1; scrollbar-width:none; -ms-overflow-style:none; /* 10 個連結在 1080px 的容器內：22px 間距會超出 40px、最後一項被切掉；18px 剛好放得下 */ } .nav-links::-webkit-scrollbar{display:none} .nav-links a{ white-space:nowrap; font-size:var(--fs-sm); font-weight:500; color:var(--ink-2); text-decoration:none; padding:4px 0; border-bottom:2px solid transparent; transition:color .15s ease, border-bottom-color .15s ease; } .nav-links a:hover{color:var(--accent); border-bottom-color:var(--accent)} /* 目前所在區塊：全頁十餘個區塊，捲到中段時讀者無從判斷位置。沿用 hover 的樣式語彙， 不另造第三種狀態；由指令碼掛上 .is-current，未啟用時只是不高亮，導覽本身不受影響。 */ .nav-links a.is-current{color:var(--accent); border-bottom-color:var(--accent)} .nav-cta{ flex:none; font-size:var(--fs-sm); font-weight:600; padding:8px 18px; border-radius:var(--r-chip); background:var(--accent); color:var(--on-accent); text-decoration:none; transition:opacity .18s ease, transform .12s ease; } .nav-cta:hover{opacity:.88} /* 按下時下沉 1px：transform 不參與版面計算，不會推移周邊元素 */ .nav-cta:active{transform:translateY(1px)} /* 錨點捲動時避開導航列 */ section[id]{scroll-margin-top:72px} /* 九個連結加 CTA 在 1080px 版心內約需 990px；視窗窄於 1180px 起版心開始收縮， 連結列會被 overflow 悄悄裁掉末端而沒有任何提示。此級距縮字級與間距約 100px， 讓 1024px 仍能完整呈現所有連結；連結一律不隱藏。品牌副標比品牌名窄， 隱藏它省不到寬度，故保留。 */ @media (max-width:1180px){ .nav-in{gap:20px} .nav-links{gap:16px} .nav-links a{font-size:var(--fs-xs)} .nav-cta{font-size:var(--fs-xs); padding:7px 14px} } @media (max-width:820px){ .nav-in{gap:16px; padding:0 18px} .nav-cta{display:none} } .eyebrow{ font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:10px; margin:0 0 18px; } .eyebrow::before{content:""; width:22px; height:1px; background:var(--line-2); flex:none} /* 中文可於任意字元間斷行，重點詞組因而常被拆成兩行；標註 .nb 者維持不斷行。 僅用於長度確定不致於窄螢幕溢出的短詞組。 */ .nb{white-space:nowrap} h1,h2,h3{font-family:var(--sans); font-weight:800; text-wrap:balance; margin:0} h1{font-size:var(--fs-h1); line-height:1.24; letter-spacing:-.028em} .h1-brand{display:flex; align-items:center; gap:10px; font-size:var(--fs-xs); font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-family:var(--mono); line-height:1.6; margin-bottom:18px} .h1-brand::before{content:""; width:22px; height:1px; background:var(--line-2); flex:none} h2{font-size:var(--fs-h2); line-height:1.3; letter-spacing:-.02em; margin-bottom:14px} h3{font-size:var(--fs-lg); line-height:1.5; font-weight:700; letter-spacing:-.01em} /* 等寬微標籤的字距分兩級：含中文者 .08em（中文字面已滿格，.12em 以上會鬆成逐字排列）， 純拉丁者（Level 1、Layer 1、Path 1、Guard Standard、Premium）維持 .12em 的小型大寫語感。 */ /* 66ch 在中文約 40 字／行，偏長；60ch 約 36 字，接近中文舒適行長（30–38 字）。 */ p{margin:0 0 16px; max-width:var(--measure); color:var(--ink-2); text-wrap:pretty} .lede{font-size:var(--fs-lg); color:var(--ink-2)} /* 指定斷行只在寬螢幕生效：手機欄寬本來就窄，強制斷行會多出半行空白 */ @media (max-width:820px){ .br-lg{display:none} } /* ---------- hero ---------- */ .hero{padding:64px 0 72px} .hero-grid{display:grid; grid-template-columns:1.08fr .92fr; gap:48px; align-items:center} .hero h1 em{font-style:normal; color:var(--accent); box-shadow:inset 0 -.38em 0 var(--accent-soft)} .hero .lede{margin-top:22px} .cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px} .btn{ display:inline-block; font-family:var(--sans); font-size:var(--fs-base); font-weight:600; padding:12px 26px; border-radius:var(--r-chip); text-decoration:none; border:1px solid var(--accent); background:var(--accent); color:var(--on-accent); transition:opacity .18s ease, transform .12s ease, border-color .18s ease, color .18s ease; } .btn:hover{opacity:.86} .btn:active{transform:translateY(1px)} .btn.ghost{background:transparent; color:var(--ink); border-color:var(--line-2)} .btn.ghost:hover{border-color:var(--accent); color:var(--accent); opacity:1} .facts{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:44px; border-top:1px solid var(--line)} .fact{padding:18px 20px 0 0; border-right:1px solid var(--line)} .fact:last-child{border-right:0} .fact b{display:block; font-family:var(--sans); font-size:var(--fs-num); font-weight:800; letter-spacing:-.02em; line-height:1.2; font-variant-numeric:tabular-nums} .fact span{display:block; font-size:var(--fs-xs); color:var(--ink-3); margin-top:4px; line-height:1.6} /* 四格數字於載入時依序浮現。這是首屏內容，一律在載入當下就看得到，因此用的是 單純的載入動畫，而非捲動驅動——後者對首屏無效，元素在載入時早已「進場完畢」。 也不用 JS＋IntersectionObserver：那得先由指令碼掛上「準備隱藏」的狀態，而 app.js 是 defer，掛上前會有一瞬間先看到內容再被藏起來。 純 CSS 動畫沒有隱形風險：不套用時元素就是原本的完全顯示，且 reduced-motion 的全域 animation:none 也會落在同一個安全狀態。 不做數字滾動：70%、30 天、60+ 的單位混雜，逐位跳動只會變得難讀。 */ .fact{animation:fact-in .45s ease-out both} .fact:nth-child(2){animation-delay:.06s} .fact:nth-child(3){animation-delay:.12s} .fact:nth-child(4){animation-delay:.18s} @keyframes fact-in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}} /* 首屏影片：色塊向右下偏移、播放器浮於其上，與 .pdr-media 使用同一套處理 */ .hero-video{margin:0} .hv-media{position:relative} /* 色塊與其上的媒體若都是 z-index:auto，先後只由 DOM 順序決定；一旦媒體那側 少了 position（如 .hv-frame 的情形）就會被色塊蓋住。兩邊各給明確的 z-index， 先後不再取決於其他屬性是否到位。 */ .hv-media::before{content:""; position:absolute; inset:18px -18px -18px 18px; background:var(--accent); z-index:0} .hv-btn{ position:relative; z-index:1; display:block; aspect-ratio:16/9; overflow:hidden; background:var(--surface-2); box-shadow:0 1px 3px rgba(17,21,25,.12); } .hv-btn img{display:block; width:100%; height:100%; object-fit:cover} .hv-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:62px; height:62px; border-radius:50%; background:rgba(17,21,25,.60); display:grid; place-items:center; transition:background .18s ease, transform .18s ease; } .hv-play svg{width:22px; height:22px; fill:#FFFFFF; margin-left:3px; display:block} .hv-btn:hover .hv-play{background:var(--accent); transform:translate(-50%,-50%) scale(1.07)} .hv-btn:active .hv-play{transform:translate(-50%,-50%) scale(1)} /* 點下播放後由指令碼把 .hv-btn 換成這個 iframe。尺寸與縮圖一致，避免版面位移； z-index 與 position 不可省——少了它 iframe 會落在色塊的 ::before 之下， 畫面上就是一塊藍色蓋住影片（此規則曾在首屏改版時遺漏，導致該狀況）。 */ .hv-frame{position:relative; z-index:1; display:block; width:100%; aspect-ratio:16/9; border:0; background:#000} /* ---------- 資料分類四級 ---------- */ .cls{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; margin-top:28px; } /* 每列以該級色票（--k，由行內 style 指定）調出淡底：左欄 7%、右欄 4%， 讓四級的深淺在整列上就讀得出來，而非只靠左緣 5px 色條。手法沿用 .dg-group 的 color-mix。 */ .cls-row{display:grid; grid-template-columns:5px .78fr 1.22fr; background:var(--surface)} .cls-row i{display:block; background:var(--k); position:relative; z-index:1; transition:box-shadow .18s ease} /* hover 時整列的底色各加深一階，色條由 5px 讀成 7px。色條的加寬同樣以外投陰影完成 （z-index 讓它蓋在 .cls-head 的底色之上），不動格線寬度，兩欄文字因而不會位移。 */ .cls-row:hover i{box-shadow:2px 0 0 var(--k)} .cls-row:hover .cls-head{background:color-mix(in srgb, var(--k) 12%, var(--surface))} .cls-row:hover .cls-detail{background:color-mix(in srgb, var(--k) 7%, var(--surface))} .cls-head{padding:26px 28px 28px; border-right:1px solid var(--line); background:color-mix(in srgb, var(--k) 7%, var(--surface)); transition:background-color .18s ease} .cls-lv{font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)} .cls-head h3{margin:8px 0 9px; font-size:var(--fs-md); color:var(--k)} .cls-head p{margin:0; font-size:var(--fs-base); line-height:1.75} .cls-detail{margin:0; padding:26px 28px 28px; display:grid; gap:14px; background:color-mix(in srgb, var(--k) 4%, var(--surface)); transition:background-color .18s ease} .cls-detail dt{ font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px; } .cls-detail dd{margin:0; font-size:var(--fs-sm); color:var(--ink-2); line-height:1.7} .cls-detail b{font-weight:600; color:var(--ink)} .cls-note{ /* 所在區塊為 --surface-2 色帶，註記改用白底才能自灰底浮出 */ max-width:none; margin-top:24px; padding:20px 24px; background:var(--surface); border-left:3px solid var(--line-2); border-radius:0 var(--r-card) var(--r-card) 0; font-size:var(--fs-sm); color:var(--ink-2); line-height:1.75; } .cls-note b{font-weight:600; color:var(--ink)} .cls-note a{color:var(--accent); text-decoration:underline; text-underline-offset:2px} /* ---------- 資料安全政策（#policy）---------- 資訊框架只有一句：一組政策＝範圍×規則。開頭以一張只標兩個部位的政策示意建立心智模型， 其後兩段都用讀者已熟悉的表格：三種範圍的對照表、站台×政策的疊加矩陣。 */ .pol-h3{font-size:var(--fs-lg); font-weight:700; letter-spacing:-.015em; margin:46px 0 8px} .pol-h3 + p{margin-bottom:18px} .pol-card{margin:26px 0 0; max-width:660px; border:1px solid var(--line); border-radius:var(--r-card-lg); background:var(--surface); box-shadow:var(--shadow); overflow:hidden} .pol-card-hd{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 20px; background:var(--surface-2)} .pol-card-name{font-weight:700; font-size:var(--fs-base)} .pol-card-name small{display:block; font-weight:400; font-size:var(--fs-xs); color:var(--ink-3); margin-top:2px} .pol-status{flex:none; font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); padding:4px 10px; border-radius:var(--r-chip)} .pol-part{display:grid; grid-template-columns:150px 1fr; gap:16px; padding:18px 20px; border-top:1px solid var(--line)} .pol-part-lb b{display:block; font-size:var(--fs-base)} .pol-part-lb small{display:block; font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-top:3px} .pol-q{display:block; font-size:var(--fs-sm); color:var(--ink-3); margin-bottom:8px} .pol-chips{display:flex; flex-wrap:wrap; gap:6px} .pol-chips span{font-family:var(--mono); font-size:var(--fs-xs); padding:3px 10px; border-radius:var(--r-chip); background:var(--surface-2); border:1px solid var(--line)} .pol-part-body > small{display:block; font-size:var(--fs-xs); color:var(--ink-3); margin-top:8px} .pol-part-body ul{margin:0; padding:0; list-style:none; display:grid; gap:7px} .pol-part-body li{font-size:var(--fs-sm); display:flex; align-items:center; gap:9px; flex-wrap:wrap} .pol-part-body li em{font-style:normal; font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)} .pol-x{width:16px; height:16px; border-radius:50%; background:var(--c-restricted); color:#FFFFFF; font-size:10px; line-height:1; display:inline-grid; place-items:center; flex:none} .pol-cap{font-size:var(--fs-xs); color:var(--ink-3); margin:12px 0 0; max-width:660px; line-height:1.7} /* 兩張表沿用全站表格樣式；欄寬改為等分，不用對照表的 168px 值欄 */ /* 加上 .tiers 提高特定性：後面的 .tiers{min-width:0} 否則會蓋掉這裡，表格在手機被壓到 330px、「Confluence」被拆成兩行 */ .tiers.pol-tbl{min-width:640px} .pol-tbl thead th{vertical-align:top; text-align:left} .pol-tbl thead th small{display:block; font-weight:400; color:var(--ink-3); font-size:var(--fs-xs); margin-top:3px; letter-spacing:0; text-transform:none; font-family:var(--sans); line-height:1.5} .pol-tbl th + th, .pol-tbl td + td{border-left:1px solid var(--line)} .pol-tbl td.feat{width:124px; font-weight:600; color:var(--ink)} .pol-tbl td.v{width:150px} .pol-tbl td b{font-weight:600; color:var(--ink)} .pol-matrix td.feat{font-family:var(--mono); font-weight:400; font-size:var(--fs-xs); color:var(--ink-2); width:256px; white-space:nowrap} /* 最長的站台網址 33 字元約 250px，寬度不足會在連字號處折行 */ .pol-matrix td.v{width:150px} .pol-matrix tr.hi td{background:color-mix(in srgb, var(--accent-soft) 45%, transparent)} /* Policy 1／2 各給一枚定色標籤，段落敘述、表頭與該欄勾號同色， 讀者不必再逐字比對「哪一段講的是哪一欄」。兩色取自場景色票的紫與青綠， 與表格既有的藍（.hi 列底、tick）錯開，避免三者混為一談。 */ .ptag{ display:inline-block; font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.08em; padding:2px 9px; border-radius:var(--r-chip); white-space:nowrap; vertical-align:1px; } .ptag-1{color:var(--g-services); background:var(--g-services-s); border:1px solid color-mix(in srgb, var(--g-services) 28%, transparent)} .ptag-2{color:var(--g-public); background:var(--g-public-s); border:1px solid color-mix(in srgb, var(--g-public) 28%, transparent)} .pol-matrix thead th .ptag{margin-bottom:5px} /* 嵌在註記長句中的標籤縮一號：小字段落塞入原尺寸膠囊會撐開行距、打斷閱讀 */ .note .ptag{padding:1px 7px; letter-spacing:.06em; vertical-align:0} /* 勾號的顏色由 --yes／--yes-ring 決定，在欄上改寫這兩個變數即可讓整欄跟著標籤色 */ .pol-matrix tbody td:nth-child(2){--yes:var(--g-services); --yes-ring:color-mix(in srgb, var(--g-services) 20%, transparent)} .pol-matrix tbody td:nth-child(3){--yes:var(--g-public); --yes-ring:color-mix(in srgb, var(--g-public) 20%, transparent)} /* 圖例的勾號泛指兩欄，故取中性灰；沿用欄位的藍會被誤讀成只講其中一欄 */ .pol-legend .tick{--yes:var(--ink-3); --yes-ring:color-mix(in srgb, var(--ink-3) 18%, transparent)} .pol-rules{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; margin:16px 0 0} .pol-rules > div{background:var(--surface); padding:16px 18px 18px} /* 表頭：圖示與文字並排，三個資料欄以 colgroup 等寬 */ .pol-th{display:flex; align-items:center; gap:10px} .pol-th-ico{width:26px; height:26px; flex:none} .pol-cov{table-layout:fixed} .pol-cov .pol-col-h{width:112px} .pol-cov td.feat{width:auto} .pol-plan{display:inline-block; font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); background:var(--surface-2); border-radius:var(--r-chip); padding:3px 10px} .pol-plan.prem{color:var(--accent); background:var(--accent-soft)} /* 規則四格：圖示置左一欄，名稱、英文名與說明共用同一條左緣 */ .pol-rules dt{display:grid; grid-template-columns:30px 1fr; column-gap:12px; align-items:start; margin:0 0 6px; font-size:var(--fs-sm)} .pol-rule-ico{width:30px; height:30px} .pol-rules dt b{font-weight:600} .pol-only{display:inline-block; font-style:normal; font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.06em; color:var(--ink-3); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-chip); padding:1px 8px; margin-left:8px; vertical-align:1px} .pol-rules dt small{display:block; font-weight:400; font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-top:4px} .pol-rules dd{margin:0 0 0 42px; font-size:var(--fs-xs); color:var(--ink-2); line-height:1.65} @media (max-width:900px){ .pol-rules{grid-template-columns:1fr 1fr} .pol-part{grid-template-columns:1fr; gap:8px} } @media (max-width:600px){ .pol-rules{grid-template-columns:1fr} } /* ---------- protect / detect / respond ---------- */ .pdr-in{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none} .pdr-nav{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:34px 0 44px} .pdr-nav label{ cursor:pointer; display:inline-flex; align-items:center; gap:9px; padding:10px 26px; border-radius:var(--r-chip); font-size:var(--fs-base); font-weight:600; letter-spacing:-.01em; background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line-2); transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .pdr-nav label:hover{ background:var(--surface); border-color:var(--ink-3); transform:translateY(-1px); box-shadow:0 3px 10px rgba(17,21,25,.11); } .pdr-nav label:active{transform:translateY(0); box-shadow:none} .pdr-ico{width:17px; height:17px; flex:none; display:block} .pdr-panel{display:none; grid-template-columns:.82fr 1.18fr; gap:54px; align-items:center} .pdr-txt h3{font-size:var(--fs-panel); letter-spacing:-.02em; margin-bottom:12px} .pdr-txt > p{font-size:var(--fs-base); margin:0 0 18px} .pdr-txt ul{margin:0; padding:14px 0 0; list-style:none; border-top:1px solid var(--line)} .pdr-txt li{font-size:var(--fs-sm); color:var(--ink-2); padding:5px 0 5px 16px; position:relative; line-height:1.65} .pdr-txt li::before{content:""; position:absolute; left:0; top:13px; width:6px; height:1px; background:var(--line-2)} .pdr-txt li b{font-weight:600; color:var(--ink)} /* 色塊向右下偏移，操作畫面浮於其上（比照官方版面） */ .pdr-media{position:relative} /* 同上：先後不交給 DOM 順序決定 */ .pdr-media::before{content:""; position:absolute; inset:18px -18px -18px 18px; background:var(--k); z-index:0} .pdr-media video{ position:relative; z-index:1; display:block; width:100%; background:var(--surface); box-shadow:0 1px 3px rgba(17,21,25,.12); } /* 各階段下方的三項具體能力：每張卡片一段實際操作錄影 */ .pdr-caps{grid-column:1/-1; margin-top:52px; padding-top:30px; border-top:1px solid var(--line)} /* 分頁切換在區塊頂端，捲到下方的能力卡時不易察覺其隨分頁變動， 因此以該階段代表色 --k 標示：標籤前的色條與每張卡的頂邊皆用同一色。 --k 僅用於色塊，不用於文字——respond 的琥珀在白底上對比不足（detect 降飽和後已達 5.1:1，仍循同一規則）。 */ .pdr-caps-h{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:0 0 20px; } .pdr-caps-h::before{content:""; width:24px; height:3px; background:var(--k); flex:none; border-radius:2px} .pdr-caps-h b{font-weight:600; color:var(--ink-2)} .pdr-caps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px} .pdr-caps-grid > .capcard.is-playing{grid-column:1/-1} .capcard{ margin:0; display:flex; flex-direction:column; overflow:hidden; background:var(--surface-2); border:1px solid var(--line); border-top:2px solid var(--k); border-radius:var(--r-card); } .capcard video{ display:block; width:100%; aspect-ratio:1100/618; background:var(--surface); border-bottom:1px solid var(--line); } /* 三欄縮圖中的主控台介面過小而不可辨讀，因此播放時展開至整列寬度； 未啟用指令碼時維持原尺寸的內嵌播放，功能不受影響。 */ .capcard{transition:border-color .18s ease, box-shadow .18s ease} .capcard.is-playing{ border-color:var(--line-2); box-shadow:0 4px 16px rgba(17,21,25,.12); animation:capcard-in .18s ease-out; } /* grid-column 本身無法過場，展開時卡片會瞬間從三分之一寬跳到整列。 以短暫的浮現動畫掩飾重排：不動版面、只動 opacity 與 transform， 讓視線把「跳」讀成「浮出」。全域的 reduced-motion 規則會一併停用。 */ @keyframes capcard-in{ from{opacity:.6; transform:translateY(4px)} to{opacity:1; transform:none} } .capcard.is-playing figcaption{max-width:760px} .capcard figcaption{padding:15px 17px 17px} .capcard figcaption .tag{ display:block; font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:7px; } .capcard figcaption .tag.std{color:var(--ink-3)} .capcard figcaption > b{ display:block; font-size:var(--fs-md); font-weight:600; letter-spacing:-.01em; line-height:1.4; margin-bottom:7px; } .capcard figcaption p{font-size:var(--fs-sm); color:var(--ink-2); line-height:1.65; margin:0} .capcard .scr{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--ink-3); } /* 選中的分頁：底色改為該階段代表色 */ #pdr-1:checked ~ .pdr-nav label[for="pdr-1"]{background:var(--c-protect); border-color:var(--c-protect); color:#FFFFFF; box-shadow:0 3px 12px rgba(17,21,25,.20)} #pdr-2:checked ~ .pdr-nav label[for="pdr-2"]{background:var(--c-detect); border-color:var(--c-detect); color:#FFFFFF; box-shadow:0 3px 12px rgba(17,21,25,.20)} #pdr-3:checked ~ .pdr-nav label[for="pdr-3"]{background:var(--c-respond); border-color:var(--c-respond); color:var(--ink); box-shadow:0 3px 12px rgba(17,21,25,.20)} #pdr-1:checked ~ .pdr-body #pdr-p1, #pdr-2:checked ~ .pdr-body #pdr-p2, #pdr-3:checked ~ .pdr-body #pdr-p3{display:grid} /* 鍵盤操作時仍看得見焦點所在 */ #pdr-1:focus-visible ~ .pdr-nav label[for="pdr-1"], #pdr-2:focus-visible ~ .pdr-nav label[for="pdr-2"], #pdr-3:focus-visible ~ .pdr-nav label[for="pdr-3"]{outline:2px solid var(--ink); outline-offset:3px} /* ---------- 產品沿革時間軸 ---------- */ .tl{list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr)} .tl li{position:relative; padding:20px 22px 0 0; border-top:1px solid var(--line-2)} .tl li::before{ content:""; position:absolute; top:-5px; left:0; width:9px; height:9px; border-radius:50%; background:var(--paper); border:2px solid var(--line-2); } .tl li:last-child::before{background:var(--accent); border-color:var(--accent)} /* 時間軸本就是「請逐格讀」的元件：hover 時節點放大填色、該格文字轉深， 給讀者一個目前落在哪一格的著點。位移全靠 transform，不動版面。 */ .tl li::before{transition:transform .18s ease, background-color .18s ease, border-color .18s ease} .tl b,.tl-y{transition:color .15s ease} .tl li:hover::before{transform:scale(1.5); background:var(--accent); border-color:var(--accent)} .tl li:hover b{color:var(--accent)} .tl li:hover .tl-y{color:var(--ink-2)} .tl-y{display:block; font-family:var(--mono); font-size:var(--fs-xs); letter-spacing:.1em; color:var(--ink-3); margin-bottom:8px} .tl b{display:block; font-size:var(--fs-base); font-weight:700; letter-spacing:-.01em; margin-bottom:5px} .tl small{display:block; font-size:var(--fs-xs); color:var(--ink-3); line-height:1.6} .tl li:last-child b{color:var(--accent)} /* ---------- 三個防護層次 ---------- */ .layers-wrap{background:var(--accent-soft); border-radius:var(--r-card-lg); padding:40px 40px 44px; margin-top:30px} .layers-wrap > p{max-width:none; color:var(--ink-2)} /* 三張防護層次卡是主卡：原本以 1px 格線併成一塊，改為各自浮在淡藍底上的無邊框卡片， 與定價卡、採用路徑起點同一層級。 */ .layers{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px} .layer{background:var(--surface); border-radius:var(--r-card-lg); box-shadow:var(--shadow); padding:26px 26px 28px; transition:transform .18s ease, box-shadow .18s ease} /* 三張並排、且本就帶陰影的主卡：以位移加下一階陰影回應。場景卡刻意不做位移是因為 21 張連續排列時位移會互相牽動視線，此處只有三張，不存在該問題。 */ .layer:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover)} .layer-ico{display:block; width:48px; height:48px; margin-bottom:14px} .layer .lv{font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)} .layer h3{font-size:var(--fs-md); margin:10px 0 3px} .layer .sub{font-size:var(--fs-sm); font-weight:700; color:var(--accent); margin:0 0 9px} .layer p{font-size:var(--fs-sm); margin:0; color:var(--ink-2); line-height:1.7} /* ---------- integrations ---------- */ /* IdP 協作示意圖：文字一律由 HTML 盒子承載，inline SVG 只畫圖示與箭頭， 如此文字不隨 viewBox 縮放，行動裝置仍可讀，讀屏軟體亦可取得節點文字。 */ .idp-flow{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:30px} .idp-fig{ display:flex; flex-direction:column; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-card); padding:22px 22px 20px; } .idp-fig h4{margin:0 0 8px; font-size:var(--fs-base); font-weight:700; letter-spacing:-.01em} .dg-desc{font-size:var(--fs-sm); color:var(--ink-2); line-height:1.7; margin:0 0 18px; max-width:none} .dg-desc a{color:var(--accent); text-decoration:underline; text-underline-offset:2px} /* 圖說沿用表格內說明的 --fs-xs／--ink-3 */ .dg-cap{font-size:var(--fs-xs); color:var(--ink-3); line-height:1.6; margin:14px 0 0; max-width:none} /* 流程圖本體：桌面橫排。說明段長短不一，以 margin-top:auto 讓兩張圖沉底對齊。 */ .dg{display:flex; align-items:center; gap:8px; margin-top:auto} .dg-node{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:10px 8px 11px; text-align:center; } .dg-node b{display:block; font-size:var(--fs-sm); font-weight:700; color:var(--ink); line-height:1.4; letter-spacing:-.01em} /* 站台網域等長字串在窄節點內可於任意處斷行，避免撐破盒子 */ .dg-node small{display:block; font-size:var(--fs-xs); color:var(--ink-3); line-height:1.5; overflow-wrap:anywhere} .dg-ico{display:block; width:24px; height:24px; margin-bottom:3px} /* IdP 位於 Atlassian 之外：以琥珀淡底與組織內的白底節點區隔 */ .dg-node.dg-ext{background:var(--amber-soft)} /* 兩張圖並排時，同一個實體（Identity provider）必須同寬同高才對得起來。 .dg 的直接子節點——圖一的「使用者／Identity provider」與圖二的「Identity provider」—— 一律取容器寬的 19%，標題與副標各自撐滿兩行，三個外框因而完全一致； 群組框吃剩餘寬度。最小高度的手法沿用 .integ-col p。 */ @media (min-width:701px){ .dg > .dg-node{flex:0 0 19%} .dg > .dg-node b{min-height:calc(2 * 1.4em); display:flex; align-items:center; justify-content:center} .dg > .dg-node small{min-height:calc(2 * 1.5em)} } /* 箭頭：單色 --ink-3，不參與伸縮；.dg-down 為群組內的向下連接 */ .dg-arrow{flex:none; width:20px; height:20px; color:var(--ink-3)} .dg-arrow.dg-down{transform:rotate(90deg); align-self:center} /* 群組：淡藍底、虛線框與等寬角標，框住屬於同一組織的節點；寬度約為單一節點的 2.3 倍 */ .dg-group{ flex:2.3 1 0; min-width:0; position:relative; display:flex; flex-direction:column; gap:8px; background:color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); border:1px dashed var(--line-2); border-radius:var(--r-card); padding:24px 10px 10px; } .dg-group > i{ position:absolute; top:7px; left:12px; font-style:normal; font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); } .dg-row{display:flex; align-items:center; gap:8px} .dg-col{flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:8px} /* 三個節點加一個群組橫排至少需要約 440px；兩欄並排在 960px 以下即不足，故較 .integ 早一步改為上下 */ @media (max-width:960px){ .idp-flow{grid-template-columns:1fr} } /* 窄螢幕：流程改為垂直堆疊，箭頭旋轉 90°；Jira／Confluence 這類成對節點仍並排以節省高度 */ @media (max-width:700px){ .dg,.dg-row{flex-direction:column; align-items:stretch} .dg-row.dg-pair{flex-direction:row} .dg-node,.dg-group{flex:none} .dg-arrow{transform:rotate(90deg); align-self:center} .idp-fig{padding:18px 16px} } .integ{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; margin-top:28px} .integ-col{background:var(--surface); padding:26px 26px 28px} .integ-col h3{font-size:var(--fs-base); font-weight:700; margin-bottom:6px} .ico{display:block; width:40px; height:40px; margin-bottom:14px} .integ-col p{font-size:var(--fs-sm); margin:0 0 14px; color:var(--ink-3); line-height:1.65} /* 補上縮寫全名後各欄行數不一。僅在三欄並排時以三行的最小高度讓分隔線齊平； 窄螢幕併為單欄後不需要，否則會多出一段空白 */ @media (min-width:901px){ .integ-col p{min-height:calc(3 * 1.65em)} } .integ-col ul{margin:0; padding:14px 0 0; list-style:none; border-top:1px solid var(--line)} .integ-col li{ display:flex; align-items:center; gap:11px; font-size:var(--fs-sm); font-weight:600; color:var(--ink); letter-spacing:-.01em; padding:8px 0; } .integ-col li + li{border-top:1px solid var(--line)} .brand-ico{width:22px; height:22px; flex:none; display:block} /* ---------- table ---------- */ .tbl-note{display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-bottom:20px; font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.08em; color:var(--ink-3)} .tbl-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); box-shadow:var(--shadow)} table{border-collapse:collapse; width:100%; min-width:720px; font-size:var(--fs-sm)} thead th{ background:var(--surface); text-align:left; padding:16px 18px; border-bottom:1px solid var(--line-2); vertical-align:bottom; } /* 表頭跟隨捲動只在寬螢幕啟用。窄螢幕時 .tbl-scroll 為 overflow-x:auto， 依規範 overflow-y 會一併變成 auto，該容器就成了 sticky 的捲動參考框： top:65px 不再是相對視窗，而是相對表格自身頂端，表頭一載入就被推下 65px、 原位留下一個空白框，且視窗捲動時也不會跟隨。改為與 overflow:visible 同一級距啟用。 top 值 = .nav-in 高度 64px + .nav 底框 1px。 */ @media (min-width:900px){ .tbl-scroll{overflow:visible} thead th{position:sticky; top:65px; z-index:2} } thead th.plan{text-align:center; width:168px; border-left:1px solid var(--line)} thead th .pn{display:block; font-family:var(--sans); font-size:var(--fs-md); font-weight:700; letter-spacing:-.01em; color:var(--ink)} thead th .pp{display:block; font-family:var(--mono); font-weight:400; font-size:var(--fs-tag); color:var(--ink-3); margin-top:3px; font-variant-numeric:tabular-nums} thead th.prem{background:var(--accent-soft)} thead th.prem .pn{color:var(--accent)} tbody th{ text-align:left; font-weight:500; font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:22px 18px 8px; background:var(--surface-2); } tbody tr.grp th{border-top:1px solid var(--line)} td{padding:11px 18px; border-top:1px solid var(--line); vertical-align:top; color:var(--ink-2); transition:background-color .15s ease} td.feat{color:var(--ink); font-weight:400} td.feat small{display:block; color:var(--ink-3); font-size:var(--fs-xs); line-height:1.6; margin-top:2px} td.feat details.more{margin-top:8px} td.feat details.more summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); font-weight:600; color:var(--accent); padding:0; } td.feat details.more summary::-webkit-details-marker{display:none} /* 這是表格內唯一的可展開處，原本 hover 無任何回饋，補上與連結一致的底線 */ td.feat details.more summary:hover{text-decoration:underline; text-underline-offset:3px} td.feat details.more summary::after{ content:"+"; font-family:var(--mono); font-size:var(--fs-sm); line-height:1; transition:transform .2s ease; /* 與 FAQ 的收合互動一致 */ } td.feat details.more[open] summary::after{transform:rotate(45deg)} /* 功能名稱後的英文原名：中文譯名不一定直觀，附原文供對照官方文件；用一般字重與淡色，不與粗體中文爭主次 */ td.feat .feat-en{font-weight:400; color:var(--ink-3); font-size:var(--fs-xs); margin-left:2px} td.feat details.more p a{color:var(--accent); text-decoration:underline; text-underline-offset:2px} td.feat details.more p{ font-size:var(--fs-xs); line-height:1.75; color:var(--ink-2); margin:9px 0 2px; max-width:64ch; padding-left:11px; border-left:2px solid var(--line); } td.v{text-align:center; width:168px; border-left:1px solid var(--line); font-family:var(--mono); font-size:var(--fs-sm); color:var(--ink-3); font-variant-numeric:tabular-nums; vertical-align:middle; padding-top:13px; padding-bottom:13px} td.v.prem{background:color-mix(in srgb, var(--accent-soft) 55%, transparent)} /* 長表格掃讀輔助：hover 時整列換底。Premium 欄不改用中性灰，而是把自身底色加深一階， 否則 highlight 會在該欄斷開、也會抹掉欄位的視覺區隔。 tr.grp 只含 th，不會被下列選擇器命中，分組標題維持原樣。 */ tbody tr:hover td{background:var(--surface-2)} tbody tr:hover td.v.prem{background:color-mix(in srgb, var(--accent-soft) 80%, transparent)} /* 文字清單型儲存格（支援產品、內含方案）：td.v 的等寬字體是為勾號與數字設計的， 用在產品名稱上會在窄欄內被逐字拆散。改用無襯線字體，並讓每個項目整體不斷行。 */ td.v.v-list{font-family:var(--sans); font-size:var(--fs-xs); padding-left:12px; padding-right:12px} .v-list ul{list-style:none; margin:0; padding:0; line-height:1.5} .v-list li{white-space:nowrap} .v-list li + li{margin-top:6px} .v-list li .cont{display:block} /* 同一項的續行，不另計間距 */ .v-list .tick{margin-bottom:9px} .tick{ /* 勾號改用 SVG 繪製而非字型 glyph：字型的 ascent/descent 會讓 ✓ 在圓內偏移， 且 web font 載入前後的 fallback 字型偏移量不同，會有視覺跳動 */ display:inline-block; vertical-align:middle; width:22px; height:22px; border-radius:50%; background-color:var(--yes); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.3 10 16.8 18.5 7.4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:62%; box-shadow:0 0 0 3px var(--yes-ring); font-size:0; line-height:0; /* 隱藏 HTML 內既有的 ✓ 文字節點（aria-label 仍保留） */ } .tick.sm{width:18px; height:18px; background-size:64%; box-shadow:0 0 0 2px var(--yes-ring)} /* 嵌在句子裡的勾號（表格圖例）：ring 畫在版面盒之外、左右各佔 2px， 不補外距會貼住相鄰文字 */ p > .tick{margin:0 4px} td.v.yes{color:var(--yes)} .dash{display:inline-block; width:14px; height:2px; background:var(--no); border-radius:1px; vertical-align:middle} .ea{font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.1em; border:1px solid var(--line-2); border-radius:var(--r-chip); padding:2px 7px; color:var(--ink-3); margin-left:6px; vertical-align:1px} /* ---------- #vs 受管帳號示意圖（.ma-*） ---------- */ /* 文字以 HTML 盒子承載、SVG 只畫圖示與箭頭，字型與換行沿用全站規則。 組織框以實線＋淡底表示「納管範圍」，框外以虛線框表示「不在範圍內」， 兩者的差異刻意只用邊框樣式與底色，不另引入顏色。 */ .ma-flow{margin:34px 0 0} .ma-canvas{position:relative} .ma-org{ position:relative; padding:30px 16px 14px; border:1px solid var(--line-2); border-radius:var(--r-card); background:var(--surface-2); } /* 角標沿用 .eyebrow 的等寬小標籤語法，讓「組織／受管帳號」讀作區段標記而非內容 */ .ma-cap{ position:absolute; top:9px; left:16px; font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); line-height:1; white-space:nowrap; } .ma-cap-r{left:auto; right:16px} .ma-row{display:grid; grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr); gap:10px; align-items:center} .ma-row + .ma-row{margin-top:10px} .ma-node{ display:flex; align-items:center; gap:10px; min-width:0; padding:8px 10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); } .ma-ico{display:block; width:24px; height:24px; flex:none} .ma-txt{min-width:0; flex:1} .ma-t{display:block; font-size:var(--fs-sm); font-weight:600; color:var(--ink); line-height:1.3} .ma-d{display:block; font-size:var(--fs-xs); color:var(--ink-3); line-height:1.4; margin-top:1px} .ma-avatars{display:block; width:44px; height:20px; flex:none} /* 箭頭為單色線條，顏色取自次要文字，避免與圖示的雙色系相爭 */ .ma-arrow{display:block; width:44px; height:16px; color:var(--ink-3)} /* 框外的外部網域：寬度精確等於左欄節點（50% 減去組織框內距 16px×2、箭頭欄 44px 與欄距 20px 的一半）， 使其與兩列受管帳號垂直對齊，讀作同一欄的第三列 */ .ma-ext{ display:flex; align-items:center; gap:10px; min-width:0; margin:14px 0 0 16px; width:calc(50% - 48px); padding:8px 10px; border:1px dashed var(--line-2); border-radius:var(--r-card); background:var(--surface); } .ma-tag{ flex:none; font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.1em; border:1px solid var(--line-2); border-radius:var(--r-chip); padding:2px 8px; color:var(--ink-3); line-height:1.5; } .ma-points{display:grid; grid-template-columns:repeat(3,1fr); gap:10px 22px; list-style:none; margin:18px 0 0; padding:0} .ma-points li{font-size:var(--fs-sm); color:var(--ink-2); line-height:1.65; padding-left:15px; position:relative} .ma-points li::before{content:""; position:absolute; left:1px; top:10px; width:5px; height:5px; border-radius:50%; background:var(--accent)} .ma-points b{font-weight:600; color:var(--ink)} .ma-flow figcaption{font-size:var(--fs-xs); color:var(--ink-3); line-height:1.6; margin-top:12px} @media (max-width:700px){ .ma-row{grid-template-columns:minmax(0,1fr); gap:0} /* 直排時箭頭改為朝下；旋轉後視覺高度為 44px，以上下外距補足佈局盒與視覺的差距 */ .ma-arrow{transform:rotate(90deg); margin:14px auto} .ma-cap-r{display:none} .ma-ext{width:auto; margin:14px 16px 0} .ma-points{grid-template-columns:1fr} } /* ---------- capabilities ---------- */ .caps{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; margin-top:28px} .cap{background:var(--surface); padding:26px 28px 28px} .cap-top{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:11px} .cap-ico{display:block; width:36px; height:36px; flex:none} .cap .tag{font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.12em; text-transform:uppercase; color:var(--accent)} .cap .tag.std{color:var(--ink-3)} .cap h3{margin:9px 0 11px; font-size:var(--fs-md)} .cap p{font-size:var(--fs-base); line-height:1.75; margin:0 0 11px} .cap p:last-child{margin-bottom:0} .cap b{font-weight:500; color:var(--ink)} /* 稽核卡的 Standard／Premium 對照：兩欄以 1px 直線分隔，延續 .caps 用細線切格的語彙； 卡片因此變高、右鄰卡片留白屬預期，不另調 .caps */ /* 稽核對照原放在半寬卡片內，兩欄各僅約 200px、逐行折行而顯得雜亂； 改為六張卡下方的全寬區塊，卡片只留結論句。 */ .al-wide{margin-top:28px; padding:26px 28px 26px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card)} .al-wide > h3{font-size:var(--fs-md); margin:0 0 8px} .al-wide > p{font-size:var(--fs-base); margin:0 0 6px; max-width:none} .al-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 28px; margin:14px 0; padding-top:14px; border-top:1px solid var(--line)} .al-col + .al-col{border-left:1px solid var(--line); padding-left:28px} .al-hd{display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 10px; margin:0 0 6px} .al-hd b{font-size:var(--fs-sm); font-weight:600; color:var(--ink)} .al-col > p{font-size:var(--fs-sm); color:var(--ink-2); line-height:1.65; margin:0 0 10px} .al-col ul{margin:0; padding:0; list-style:none} /* 條列沿用 .pdr-txt li 的短橫線 bullet（而非 .price 的圓點）：卡片內文屬說明性質，短橫線較圓點安靜 */ .al-col li{font-size:var(--fs-sm); color:var(--ink-2); padding:4px 0 4px 16px; position:relative; line-height:1.65} .al-col li::before{content:""; position:absolute; left:0; top:13px; width:6px; height:1px; background:var(--line-2)} .al-col .al-meta{margin:10px 0 0} .al-col .al-meta b{font-weight:600} /* 保留期限屬註記層級，字級與墨色再降一階 */ .al-col .al-keep{font-size:var(--fs-xs); color:var(--ink-3); margin:8px 0 0; line-height:1.6} @media (max-width:600px){ .al-grid{grid-template-columns:1fr; gap:18px} .al-col + .al-col{border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:18px} } /* ---------- cases ---------- */ .cases{display:grid; gap:18px} /* 場景卡是列表卡：靜止時只有 1px 邊框、不帶陰影，陰影留給主卡與 hover 提升。 */ .case{border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); overflow:hidden; transition:border-color .18s ease, box-shadow .18s ease} /* 整卡回饋：每張場景卡底部都有可展開的「兩方案的處理程度」，因此整張卡是一個可操作單位。 只加深邊框與陰影，不做位移或縮放——21 張卡連續排列時，任何位移都會在捲動中互相牽動視線。 鍵盤焦點的規則另外拆成一條：:has() 若不被支援只會讓該條失效，不會連帶讓 hover 一起失效。 */ .case:hover{border-color:var(--line-2); box-shadow:var(--shadow)} /* 用 :focus-visible 而非 :focus-within，這樣滑鼠點開卡片後不會殘留「浮起」狀態， 只有鍵盤 tab 進來時才給定位提示。 */ .case:has(:focus-visible){border-color:var(--line-2); box-shadow:var(--shadow)} .case-hd{padding:24px 28px 20px} .case-top{display:flex; align-items:center; gap:9px; margin-bottom:10px} .case-ico{width:28px; height:28px; flex:none; display:block} .chip-ico{width:21px; height:21px; display:inline-block; vertical-align:-5px; margin-right:8px} .case-hd .tag{font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.08em; text-transform:uppercase; color:var(--accent)} .case-hd h3{margin:0 0 10px; font-size:var(--fs-lg)} .case-hd p{font-size:var(--fs-base); margin:0; max-width:var(--measure)} .case-split{display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line)} .case-col{padding:20px 28px 22px} .case-col + .case-col{border-left:1px solid var(--line); background:color-mix(in srgb, var(--accent-soft) 45%, #FFFFFF)} .case-col h4{ margin:0 0 8px; font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.08em; text-transform:uppercase; font-weight:400; color:var(--ink-3); display:flex; align-items:center; gap:8px; } .case-col + .case-col h4{color:var(--yes)} .case-col p{font-size:var(--fs-sm); margin:0; line-height:1.75; max-width:none} .case-col p b{font-weight:500; color:var(--ink)} .stop{display:inline-block; width:14px; height:2px; background:var(--no); border-radius:1px} @media (max-width:900px){ .case-split{grid-template-columns:1fr} .case-col + .case-col{border-left:0; border-top:1px solid var(--line)} } /* 分組導覽：21 則場景橫跨六個產業，先給讀者一份可跳轉的地圖 */ .case-nav{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px} .case-nav a{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-2); border-radius:var(--r-chip); background:var(--surface); padding:6px 15px; font-size:var(--fs-sm); font-weight:500; color:var(--ink-2); text-decoration:none; transition:border-color .15s ease, color .15s ease, transform .12s ease; } /* 晶片與其對應的分組共用 --g／--gs，未指定時回落至原本的中性樣式 */ .case-nav a{border-color:var(--g,var(--line-2)); color:var(--g,var(--ink-2)); background:var(--gs,var(--surface))} .case-nav a:hover{background:var(--g,var(--accent)); border-color:var(--g,var(--accent)); color:#FFFFFF} .case-nav a:active{transform:translateY(1px)} .case-nav a b{font-family:var(--mono); font-size:var(--fs-tag); font-weight:400; color:currentColor; opacity:.6} .case-nav a:hover b{opacity:.8} /* 分組色帶：底色僅取代表色最淡的一階，卡片維持白底浮於其上。 六組改為
：21 則場景在行動版高達 8,700px，佔全頁四分之一， 僅通用場景預設展開，其餘五組收合成六條有色橫條，讀者依產業自行展開。 內距移到 summary 上，讓整條橫條（含左右 20px）都是可點擊區； border-bottom:0 是為了蓋掉全站 details 的底線（與 .case-more 同理）。 */ .case-group{background:var(--gs); border-radius:var(--r-card); padding:0 20px 24px; display:grid; gap:18px; border-bottom:0} .case-group:not([open]){padding-bottom:0} .case-group[id]{scroll-margin-top:96px} #audit-detail{scroll-margin-top:88px} /* 從稽核卡跳過來時不被固定導覽列蓋住 */ .case-group > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:14px; margin:0 -20px; padding:18px 20px; border-radius:var(--r-card); font-family:var(--mono); font-size:var(--fs-tag); font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:var(--g); transition:color .15s ease; } /* 展開時縮小與第一張卡的距離，維持原本組名到卡片約 18–22px 的節奏 */ .case-group[open] > summary{padding-bottom:4px} .case-group > summary::-webkit-details-marker{display:none} .case-group > summary:focus-visible{outline:2px solid var(--accent); outline-offset:-2px} /* 組名後的細線改由 ::before 承擔並以 order 排到文字之後， 讓 ::after 空出來放全站一致的「+ 轉 45° 變 ×」指示 */ .case-group > summary::before{content:""; flex:1; height:1px; background:var(--g); opacity:.28; order:1} .case-group > summary .group-count{order:2; letter-spacing:.1em; color:var(--ink-3); white-space:nowrap; transition:color .15s ease} .case-group > summary::after{ content:"+"; order:3; font-family:var(--mono); font-size:var(--fs-base); line-height:1; letter-spacing:0; color:var(--ink-3); flex:none; transition:transform .2s ease, color .15s ease; } .case-group > summary:hover .group-count, .case-group > summary:hover::after{color:var(--g)} .case-group[open] > summary::after{transform:rotate(45deg)} /* 全站的 details[open] summary::after 是後代選擇器：組展開時會連帶把組內 尚未展開的 .case-more 指示也轉成 ×，此處拉高特異性把它壓回原位 */ .case-group .case-more > summary::after{transform:none} /* 展開／收合已改為文字膠囊，任何狀態都不旋轉 */ /* 比較區收合：標題與情境常駐可見，兩方案的處理程度由讀者自行展開 */ .case-more{border-bottom:0} .case-more > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:12px; padding:13px 28px; border-top:1px solid var(--line); font-size:var(--fs-sm); font-weight:500; color:var(--accent); transition:background .15s ease; } .case-more > summary:hover{background:var(--accent-soft)} .case-more > summary:focus-visible{outline:2px solid var(--accent); outline-offset:-2px} .case-more > summary::-webkit-details-marker{display:none} /* 右側放一顆寫著「展開」的膠囊按鈕：只有加號時讀者看不出這列可以點， 膠囊的邊框與文字把它變成明確的操作元件；hover 時填色、開啟後改為「收合」 */ .case-more > summary::after{ content:"展開 ＋"; margin-left:auto; flex:none; font-size:var(--fs-xs); font-weight:500; letter-spacing:.02em; color:var(--accent); padding:4px 12px; border:1px solid var(--accent); border-radius:var(--r-chip); background:var(--surface); transition:background .15s ease, color .15s ease, transform .15s ease; } .case-more > summary:hover::after{background:var(--accent); color:var(--on-accent)} .case-more[open] > summary{color:var(--ink-3)} .case-more[open] > summary::after{content:"收合 －"; color:var(--ink-3); border-color:var(--line-2)} .case-more[open] > summary:hover::after{background:var(--surface-2); color:var(--ink-2)} /* 收合狀態下仍讓讀者一眼看出這則場景 Standard 是否已能覆蓋 */ .cm-marks{display:flex; align-items:center; gap:16px; margin-left:auto} .cm-mark{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); } .case-more .case-split{border-top:0} .case-more .case-col p{padding-bottom:0} @media (max-width:600px){ .case-more > summary{padding:12px 20px} .cm-label{display:none} .cm-marks{margin-left:0; gap:14px} } /* ---------- paths ---------- */ .paths{display:grid; grid-template-columns:200px 1fr; gap:32px; align-items:start} .path-start{display:grid; gap:10px} .chip{ border:1px solid var(--line-2); border-radius:var(--r-card); background:var(--surface); padding:12px 14px; font-size:var(--fs-sm); } .chip b{display:block; font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.12em; color:var(--ink-3); margin-bottom:3px; font-weight:400} .stage{background:var(--surface); border-radius:var(--r-card-lg); padding:22px 24px; box-shadow:var(--shadow)} .stage-hd{display:flex; align-items:baseline; gap:12px; margin-bottom:8px} .stage-hd h3{font-size:var(--fs-md)} .stage-hd em{font-style:normal; font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.08em; color:var(--accent); text-transform:uppercase} .stage p{font-size:var(--fs-sm); margin:0; max-width:none} .branches{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px} .branch{border:1px solid var(--line); border-left:3px solid var(--p,var(--accent)); border-radius:var(--r-card); padding:16px 18px; background:var(--ps,var(--surface)); transition:box-shadow .18s ease} /* 左緣色條由 3px 讀成 5px。不動 border-width——box-sizing 為 border-box，加寬邊框會 把內文往右推 2px；改以 inset 陰影疊在邊框內側，版面完全不變。 */ .branch:hover{box-shadow:inset 2px 0 0 var(--p,var(--accent)), var(--shadow)} .branch h4{color:var(--pt,var(--ink))} .branch h4{margin:0 0 6px; font-family:var(--sans); font-size:var(--fs-base); font-weight:700} .branch p{font-size:var(--fs-sm); margin:0; line-height:1.7} /* ---------- pricing ---------- */ .price-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:26px} /* 主卡無邊框；保留 2px 透明邊框佈局，讓 .hi 的 accent 邊框亮起時兩張卡尺寸一致 */ .price{background:var(--surface); border:2px solid transparent; border-radius:var(--r-card-lg); padding:26px 26px 24px; box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease} /* 與 .layer 同一組語彙：位移 2px、陰影升一階 */ .price:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover)} .price.hi{border-color:var(--accent)} .price .pl{font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)} .price .amt{font-family:var(--sans); font-size:var(--fs-amt); font-weight:800; letter-spacing:-.02em; line-height:1.15; margin-top:8px; font-variant-numeric:tabular-nums} .price .amt sup{font-size:var(--fs-body); font-weight:500; vertical-align:.9em; margin-right:2px} .price .per{font-size:var(--fs-sm); color:var(--ink-3); margin-top:2px} .price ul{list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--line)} .price li{font-size:var(--fs-sm); color:var(--ink-2); padding:4px 0 4px 17px; position:relative; line-height:1.65} .price li::before{content:""; position:absolute; left:2px; top:11px; width:5px; height:5px; border-radius:50%; background:var(--ink-3)} .price.hi li::before{background:var(--accent)} .tiers{width:100%; min-width:0; font-size:var(--fs-sm)} .tiers td, .tiers th{border-left:0} .note{ border-left:2px solid var(--line-2); padding:2px 0 2px 16px; font-size:var(--fs-sm); color:var(--ink-3); max-width:var(--measure); line-height:1.75; margin-top:22px; } .note b{color:var(--ink-2); font-weight:500} /* ---------- faq ---------- */ .faq{border-top:1px solid var(--line)} .faq-grp{ font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:30px 0 11px; border-bottom:1px solid var(--line); } .faq > .faq-grp:first-child{padding-top:14px} details{border-bottom:1px solid var(--line)} summary{ cursor:pointer; list-style:none; padding:18px 0; font-size:var(--fs-base); font-weight:500; display:flex; justify-content:space-between; gap:20px; align-items:center; } summary::-webkit-details-marker{display:none} summary::after{content:"+"; font-family:var(--mono); color:var(--ink-3); flex:none; transition:transform .2s ease, color .15s ease} /* 全站 summary 的鍵盤焦點：原本只有 :where(a,button):focus-visible 這條通則， summary 完全沒有焦點指示。.case-more > summary:focus-visible 特異性較高，仍維持其原本的 -2px 內縮樣式。 */ summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-card)} /* FAQ 的問題列是 18px 高的可點擊區，原本 hover 毫無回饋； 沿用 .case-nav a:hover 的語彙，文字與 + 號一起轉 accent（不加底色，因為該列沒有左右內距） */ .faq summary{transition:color .15s ease} .faq summary:hover, .faq summary:hover::after{color:var(--accent)} details[open] summary::after{transform:rotate(45deg)} details p{font-size:var(--fs-base); padding-bottom:6px} /* 展開時的內容淡入，取代瞬間出現。位移用 transform（不參與版面計算）， 幅度 4px、180ms ease-out；prefers-reduced-motion 由全域 animation:none!important 關閉。 */ @keyframes reveal{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}} .faq details[open] > p, td.feat details.more[open] > p{animation:reveal .18s ease-out} /* ---------- reading（延伸閱讀） ---------- */ /* 文章卡屬列表卡：1px 邊框、--r-card、無陰影；hover 才加深邊框並給陰影，語彙與 .case:hover 一致。 整張卡是一個 ，故重設連結的顏色與底線，讓標題、副標各自沿用文字色階。 */ .rd-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:32px} .rd-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); overflow:hidden; color:inherit; text-decoration:none; transition:border-color .18s ease, box-shadow .18s ease; } /* 封面沿用 Medium 的 og:image（1200×646），以固定比例保留高度避免載入時位移； 本地轉為 WebP＋JPEG 各約 20–57KB，並 lazy 載入。 */ .rd-cover{display:block; aspect-ratio:1200/646; border-bottom:1px solid var(--line); background:var(--surface-2)} .rd-cover img{display:block; width:100%; height:100%; object-fit:cover} .rd-body{display:flex; flex-direction:column; gap:10px; flex:1; padding:20px 24px 22px} .rd-card:hover{border-color:var(--line-2); box-shadow:var(--shadow)} /* 全域 :where(a):focus-visible 會把焦點框圓角設為 999px，套在矩形卡上會與卡角脫開，改回卡片圓角 */ .rd-card:focus-visible{border-radius:var(--r-card)} .rd-meta{ display:block; font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); } .rd-card h3{font-size:var(--fs-md); line-height:1.5; margin:0; letter-spacing:-.01em} .rd-card p{font-size:var(--fs-sm); color:var(--ink-2); line-height:1.7; margin:0; max-width:none} /* 「閱讀全文」以 margin-top:auto 推至卡底，三張卡的副標長短不一時仍能對齊 */ .rd-more{ margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-sm); font-weight:600; color:var(--accent); } /* 箭頭右移 2px 作為整卡可點的提示；prefers-reduced-motion 由全域 transition:none!important 關閉 */ .rd-more i{font-style:normal; display:inline-block; transition:transform .15s ease} .rd-card:hover .rd-more i{transform:translateX(2px)} @media (max-width:900px){.rd-grid{grid-template-columns:1fr}} /* 段落末的延伸閱讀連結：沿用 .note a 的行內連結語彙；「延伸閱讀：」由 ::before 產生， 設為 inline-block 以阻斷底線向偽元素延伸，只有篇名部分帶底線 */ /* 延伸閱讀獨立成一行：夾在段落句尾會被拆成兩行、標題斷在中間 */ .more-link{display:block; width:fit-content; margin-top:6px; font-size:var(--fs-sm); color:var(--accent); text-decoration:underline; text-underline-offset:2px} .more-link::before{content:"延伸閱讀："; display:inline-block; color:var(--ink-3)} /* ---------- cta ---------- */ .final{background:var(--surface); border-radius:var(--r-card-lg); padding:44px 44px 40px; box-shadow:var(--shadow)} .final-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center} .final-art{display:block; width:100%; max-width:190px; height:auto; margin:0 auto} .final h2{margin-bottom:12px} .card-contact{border-left:1px solid var(--line); padding-left:32px} .card-contact dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 16px; font-size:var(--fs-sm)} .card-contact dt{font-family:var(--mono); font-size:var(--fs-tag); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding-top:3px} .card-contact dd{margin:0; color:var(--ink-2)} /* footer 同時掛著 .wrap，而 .wrap 的 padding:0 28px 是簡寫、特異性也較高， 會把這裡的上下留白歸零——頂線因而幾乎貼著頁尾內容，底部同樣沒有留白。 選擇器提高到 footer.wrap 才蓋得過去。全頁只有
與