/* ============================================================================ * Narsil Private Batch Intelligence 牌價頁樣式 * 公開版與內部版共用（原本兩頁各內嵌一份完全相同的副本）。 * ---------------------------------------------------------------------------- * 色彩系統：OKLCH 方法論 * * OKLCH 是感知均勻的色彩空間：L 是感知亮度、C 是彩度、H 是色相。 * 同一個 L 值在不同色相下看起來一樣亮——這是 hex／HSL 做不到的， * 也是本色票系統改用它重建的原因。 * * 四條規則： * * 1. 錨點鎖死 * 以下四個品牌色的 hex 逐位元不變，色階繞著它們重建： * dawn-500 #CC9E6C Narsil Gold（品牌金） * stone-200 #E2DDD7 Cream * stone-900 #151410 Ink * steel-700 #36393C Graphite（品牌深灰） * * 2. L 階梯感知均勻 * 在錨點之間線性內插 L。重建前後的步距離散度： * dawn 3.7x -> 1.8x stone 4.0x -> 2.9x steel 2.3x -> 1.3x * （亮端步距刻意較細：canvas / surface / sunken 三個近白表面需要更高解析度。） * * 3. 色相收斂 * 每個家族只用一個色相；有兩個錨點的 stone 則在兩者之間單調內插， * 不再出現手挑 hex 造成的來回抖動。擺幅： * dawn 13.0° -> 0° steel 30.5° -> 0° stone 抖動 -> 單調 * * 4. 彩度平滑 * C 以正弦弧線分布，峰值落在家族的品牌階，兩端收斂，並夾在 sRGB 色域內 * （保留 6% 餘裕，避免在廣色域螢幕上溢出）。 * * color-mix 的取捨（實測後的結論，不是預設值）： * - 不透明混色一律 `in oklab`。不可用 `in oklch`——它沿最短弧內插色相， * 而近中性底色的「色相」本質上是雜訊，會把語意色的色相拉走： * 實測 info-subtle 在 oklch 下偏移 148.8°（藍色調混成米色）， * oklab 只偏 2.2°，且比 srgb 多保留 8–16% 的彩度。 * - 含 transparent 的混色維持 `in srgb`：那裡只有 alpha 在變， * 換色彩空間沒有好處，卻多了跨瀏覽器的邊界情況。 * * 對比度：所有語意配對都以 WCAG 相對亮度（sRGB）實測過，重建後沒有新增 * 任何低於 AA 的文字配對；text-accent／link 反而各提升 +0.54。 * * 完整稽核數據見 docs/design_system_oklch/。 * ========================================================================== */ :root { --narsil-pricing-dawn-50: #FAF4ED; --narsil-pricing-dawn-100: #F5E2CD; --narsil-pricing-dawn-200: #EED0AF; --narsil-pricing-dawn-300: #E6BE94; --narsil-pricing-dawn-400: #DAAD7D; --narsil-pricing-dawn-500: #CC9E6C; --narsil-pricing-dawn-600: #A9855F; --narsil-pricing-dawn-700: #886D51; --narsil-pricing-dawn-800: #6A5640; --narsil-pricing-dawn-900: #4E3F2E; --narsil-pricing-dawn-950: #36291A; --narsil-pricing-stone-50: #F7F5F2; --narsil-pricing-stone-100: #EDE9E4; --narsil-pricing-stone-200: #E2DDD7; --narsil-pricing-stone-300: #C2BCB4; --narsil-pricing-stone-400: #A29D95; --narsil-pricing-stone-500: #827E78; --narsil-pricing-stone-600: #64615C; --narsil-pricing-stone-700: #484641; --narsil-pricing-stone-800: #2D2C28; --narsil-pricing-stone-900: #151410; --narsil-pricing-stone-950: #090806; --narsil-pricing-steel-50: #F3F5F7; --narsil-pricing-steel-100: #D6D9DD; --narsil-pricing-steel-200: #BABEC3; --narsil-pricing-steel-300: #9EA4A9; --narsil-pricing-steel-400: #80868B; --narsil-pricing-steel-500: #63696E; --narsil-pricing-steel-600: #4C5055; --narsil-pricing-steel-700: #36393C; --narsil-pricing-steel-800: #25282B; --narsil-pricing-steel-900: #16181A; --narsil-pricing-steel-950: #08090B; --narsil-pricing-limestone: var(--narsil-pricing-stone-200); --narsil-pricing-dawn-gold: var(--narsil-pricing-dawn-500); --narsil-pricing-obsidian: var(--narsil-pricing-stone-900); --narsil-pricing-forged-bronze: var(--narsil-pricing-dawn-700); --narsil-pricing-steel-mist: var(--narsil-pricing-steel-500); --narsil-pricing-graphite: var(--narsil-pricing-steel-700); --narsil-pricing-dawn-light: var(--narsil-pricing-dawn-300); --narsil-pricing-success: #419D48; --narsil-pricing-warning: #E3AE27; --narsil-pricing-danger: #D15C56; --narsil-pricing-info: #308ADC; --narsil-pricing-gradient-dawn: linear-gradient(180deg, #E6BE94 0%, #886D51 100%); --narsil-pricing-gradient-dawn-3: linear-gradient(180deg, var(--narsil-pricing-dawn-300) 0%, var(--narsil-pricing-dawn-500) 48%, var(--narsil-pricing-dawn-700) 100%); } /* ============================================================================ * OKLCH 精確層 * ---------------------------------------------------------------------------- * 上面的 hex 是相容性後備；支援 oklch() 的瀏覽器改用下面這一組。 * 兩者在 sRGB 下是同一個顏色，差別在於： * 1. oklch() 不受 8-bit hex 量化誤差影響，色階的 L 間距是精確的； * 2. 在 P3 等廣色域螢幕上，瀏覽器能算繪出比 sRGB hex 更準的顏色。 * ========================================================================== */ @supports (color: oklch(0 0 0)) { :root { /* dawn —— 品牌金屬色階（錨點 dawn-500 = Narsil Gold #CC9E6C） */ --narsil-pricing-dawn-50: oklch(0.9699 0.0113 68.15); /* #FAF4ED */ --narsil-pricing-dawn-100: oklch(0.9220 0.0344 68.15); /* #F5E2CD */ --narsil-pricing-dawn-200: oklch(0.8742 0.0551 68.15); /* #EED0AF */ --narsil-pricing-dawn-300: oklch(0.8264 0.0716 68.15); /* #E6BE94 */ --narsil-pricing-dawn-400: oklch(0.7786 0.0822 68.15); /* #DAAD7D */ --narsil-pricing-dawn-500: oklch(0.7307 0.0858 68.15); /* #CC9E6C */ --narsil-pricing-dawn-600: oklch(0.6427 0.0691 68.15); /* #A9855F */ --narsil-pricing-dawn-700: oklch(0.5547 0.0539 68.15); /* #886D51 */ --narsil-pricing-dawn-800: oklch(0.4667 0.0419 68.15); /* #6A5640 */ --narsil-pricing-dawn-900: oklch(0.3787 0.0342 68.15); /* #4E3F2E */ --narsil-pricing-dawn-950: oklch(0.2907 0.0316 68.15); /* #36291A */ /* stone —— 暖中性色階（錨點 stone-200 = Cream、stone-900 = Ink） */ --narsil-pricing-stone-50: oklch(0.9709 0.0045 72.65); /* #F7F5F2 */ --narsil-pricing-stone-100: oklch(0.9353 0.0079 72.65); /* #EDE9E4 */ --narsil-pricing-stone-200: oklch(0.8998 0.0098 72.65); /* #E2DDD7 */ --narsil-pricing-stone-300: oklch(0.7985 0.0127 75.91); /* #C2BCB4 */ --narsil-pricing-stone-400: oklch(0.6973 0.0134 79.17); /* #A29D95 */ --narsil-pricing-stone-500: oklch(0.5960 0.0114 82.43); /* #827E78 */ --narsil-pricing-stone-600: oklch(0.4947 0.0095 85.69); /* #64615C */ --narsil-pricing-stone-700: oklch(0.3934 0.0079 88.95); /* #484641 */ --narsil-pricing-stone-800: oklch(0.2921 0.0067 92.21); /* #2D2C28 */ --narsil-pricing-stone-900: oklch(0.1909 0.0080 95.47); /* #151410 */ --narsil-pricing-stone-950: oklch(0.1348 0.0056 95.47); /* #090806 */ /* steel —— 冷中性色階（錨點 steel-700 = Graphite #36393C） */ --narsil-pricing-steel-50: oklch(0.9699 0.0029 248.02); /* #F3F5F7 */ --narsil-pricing-steel-100: oklch(0.8847 0.0056 248.02); /* #D6D9DD */ --narsil-pricing-steel-200: oklch(0.7996 0.0080 248.02); /* #BABEC3 */ --narsil-pricing-steel-300: oklch(0.7144 0.0099 248.02); /* #9EA4A9 */ --narsil-pricing-steel-400: oklch(0.6156 0.0112 248.02); /* #80868B */ --narsil-pricing-steel-500: oklch(0.5168 0.0116 248.02); /* #63696E */ --narsil-pricing-steel-600: oklch(0.4298 0.0095 248.02); /* #4C5055 */ --narsil-pricing-steel-700: oklch(0.3428 0.0067 248.02); /* #36393C */ --narsil-pricing-steel-800: oklch(0.2749 0.0061 248.02); /* #25282B */ --narsil-pricing-steel-900: oklch(0.2069 0.0051 248.02); /* #16181A */ --narsil-pricing-steel-950: oklch(0.1390 0.0048 248.02); /* #08090B */ /* 語意色 —— 三個同階色統一 L 0.620 / C 0.150；warning 為黃色例外 */ --narsil-pricing-success: oklch(0.6200 0.1500 144.85); /* #419D48 */ --narsil-pricing-warning: oklch(0.7790 0.1501 84.83); /* #E3AE27 */ --narsil-pricing-danger: oklch(0.6200 0.1500 25.11); /* #D15C56 */ --narsil-pricing-info: oklch(0.6200 0.1500 250.18); /* #308ADC */ } } :root { --narsil-pricing-font-serif: "Newsreader", "New Atlas", Georgia, "Songti TC", serif; --narsil-pricing-font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --narsil-pricing-font-cn: "Chiron Hei HK", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; --narsil-pricing-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --narsil-pricing-fw-light: 300; --narsil-pricing-fw-regular: 400; --narsil-pricing-fw-medium: 500; --narsil-pricing-fw-semibold: 600; --narsil-pricing-fw-bold: 700; --narsil-pricing-fw-extrabold: 800; --narsil-pricing-fs-3xs: 0.75rem; --narsil-pricing-fs-2xs: 0.8125rem; --narsil-pricing-fs-xs: 0.9375rem; --narsil-pricing-fs-sm: 1.0625rem; --narsil-pricing-fs-base:1.125rem; --narsil-pricing-fs-md: 1.25rem; --narsil-pricing-fs-lg: 1.375rem; --narsil-pricing-fs-xl: 1.5rem; --narsil-pricing-fs-2xl: 1.875rem; --narsil-pricing-fs-3xl: 2.25rem; --narsil-pricing-fs-4xl: 3rem; --narsil-pricing-fs-5xl: 3.75rem; --narsil-pricing-fs-6xl: 4.5rem; --narsil-pricing-fs-7xl: 5.75rem; --narsil-pricing-lh-none: 1; --narsil-pricing-lh-tight: 1.1; --narsil-pricing-lh-snug: 1.25; --narsil-pricing-lh-normal: 1.6; --narsil-pricing-lh-relaxed: 1.8; --narsil-pricing-tracking-tighter: -0.03em; --narsil-pricing-tracking-tight: -0.015em; --narsil-pricing-tracking-normal: 0; --narsil-pricing-tracking-wide: 0.03em; --narsil-pricing-tracking-wider: 0.08em; --narsil-pricing-tracking-caps: 0.16em; --narsil-pricing-tracking-brand: 0.28em; } @font-face { font-family: "Chiron Hei HK"; src: local("Chiron Hei HK"), local("ChironHeiHK-Regular"), local("Chiron Hei HK Regular"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --narsil-pricing-space-px: 1px; --narsil-pricing-space-0: 0; --narsil-pricing-space-1: 0.25rem; --narsil-pricing-space-2: 0.5rem; --narsil-pricing-space-3: 0.75rem; --narsil-pricing-space-4: 1rem; --narsil-pricing-space-5: 1.25rem; --narsil-pricing-space-6: 1.5rem; --narsil-pricing-space-7: 1.75rem; --narsil-pricing-space-8: 2rem; --narsil-pricing-space-10: 2.5rem; --narsil-pricing-space-12: 3rem; --narsil-pricing-space-14: 3.5rem; --narsil-pricing-space-16: 4rem; --narsil-pricing-space-20: 5rem; --narsil-pricing-space-24: 6rem; --narsil-pricing-space-32: 8rem; --narsil-pricing-space-40: 10rem; --narsil-pricing-radius-none: 0; --narsil-pricing-radius-xs: 2px; --narsil-pricing-radius-sm: 4px; --narsil-pricing-radius-md: 6px; --narsil-pricing-radius-lg: 8px; --narsil-pricing-radius-xl: 12px; --narsil-pricing-radius-2xl: 16px; --narsil-pricing-radius-pill: 999px; --narsil-pricing-radius-full: 9999px; --narsil-pricing-border-width: 1px; --narsil-pricing-border-width-strong: 1.5px; --narsil-pricing-border-width-focus: 2px; --narsil-pricing-container-sm: 40rem; --narsil-pricing-container-md: 48rem; --narsil-pricing-container-lg: 64rem; --narsil-pricing-container-xl: 80rem; --narsil-pricing-container-2xl: 90rem; --narsil-pricing-gutter: var(--narsil-pricing-space-6); --narsil-pricing-control-height-sm: 2rem; --narsil-pricing-control-height-md: 2.5rem; --narsil-pricing-control-height-lg: 3rem; --narsil-pricing-tap-min: 2.75rem; } :root { --narsil-pricing-shadow-color: 21 20 16; --narsil-pricing-shadow-xs: 0 1px 2px rgb(var(--narsil-pricing-shadow-color) / 0.06); --narsil-pricing-shadow-sm: 0 1px 2px rgb(var(--narsil-pricing-shadow-color) / 0.06), 0 2px 6px rgb(var(--narsil-pricing-shadow-color) / 0.08); --narsil-pricing-shadow-md: 0 2px 4px rgb(var(--narsil-pricing-shadow-color) / 0.06), 0 8px 20px -6px rgb(var(--narsil-pricing-shadow-color) / 0.14); --narsil-pricing-shadow-lg: 0 4px 8px rgb(var(--narsil-pricing-shadow-color) / 0.07), 0 18px 42px -10px rgb(var(--narsil-pricing-shadow-color) / 0.20); --narsil-pricing-shadow-xl: 0 8px 16px rgb(var(--narsil-pricing-shadow-color) / 0.10), 0 32px 64px -14px rgb(var(--narsil-pricing-shadow-color) / 0.28); --narsil-pricing-shadow-inset: inset 0 1px 2px rgb(var(--narsil-pricing-shadow-color) / 0.10); --narsil-pricing-shadow-focus: 0 0 0 2px var(--narsil-pricing-surface-canvas), 0 0 0 4px color-mix(in srgb, var(--narsil-pricing-focus-ring) 70%, transparent); --narsil-pricing-shadow-dawn: 0 8px 30px -6px color-mix(in srgb, var(--narsil-pricing-dawn-500) 45%, transparent); --narsil-pricing-blur-sm: 4px; --narsil-pricing-blur-md: 10px; --narsil-pricing-blur-lg: 20px; --narsil-pricing-z-base: 0; --narsil-pricing-z-raised: 10; --narsil-pricing-z-sticky: 100; --narsil-pricing-z-drawer: 200; --narsil-pricing-z-overlay: 300; --narsil-pricing-z-modal: 400; --narsil-pricing-z-toast: 500; --narsil-pricing-z-tooltip: 600; } [data-theme="dark"] { --narsil-pricing-shadow-color: 3 3 2; --narsil-pricing-shadow-md: 0 2px 4px rgb(var(--narsil-pricing-shadow-color) / 0.30), 0 8px 20px -6px rgb(var(--narsil-pricing-shadow-color) / 0.50); --narsil-pricing-shadow-lg: 0 4px 8px rgb(var(--narsil-pricing-shadow-color) / 0.35), 0 18px 42px -10px rgb(var(--narsil-pricing-shadow-color) / 0.60); } :root { --narsil-pricing-duration-instant: 80ms; --narsil-pricing-duration-fast: 120ms; --narsil-pricing-duration-base: 200ms; --narsil-pricing-duration-slow: 320ms; --narsil-pricing-duration-slower: 480ms; --narsil-pricing-ease-standard: cubic-bezier(0.2, 0, 0, 1); --narsil-pricing-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --narsil-pricing-ease-in: cubic-bezier(0.4, 0, 1, 1); --narsil-pricing-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --narsil-pricing-transition-colors: color var(--narsil-pricing-duration-fast) var(--narsil-pricing-ease-standard), background-color var(--narsil-pricing-duration-fast) var(--narsil-pricing-ease-standard), border-color var(--narsil-pricing-duration-fast) var(--narsil-pricing-ease-standard), box-shadow var(--narsil-pricing-duration-fast) var(--narsil-pricing-ease-standard); --narsil-pricing-transition-transform: transform var(--narsil-pricing-duration-base) var(--narsil-pricing-ease-standard); } @media (prefers-reduced-motion: reduce) { :root { --narsil-pricing-duration-instant: 0ms; --narsil-pricing-duration-fast: 0ms; --narsil-pricing-duration-base: 0ms; --narsil-pricing-duration-slow: 0ms; --narsil-pricing-duration-slower: 0ms; } } :root { --narsil-pricing-surface-canvas: var(--narsil-pricing-stone-50); --narsil-pricing-surface: var(--narsil-pricing-stone-100); --narsil-pricing-surface-sunken: var(--narsil-pricing-stone-200); --narsil-pricing-surface-raised: color-mix(in oklab, var(--narsil-pricing-stone-50), #ffffff 55%); --narsil-pricing-surface-brand: var(--narsil-pricing-stone-200); --narsil-pricing-surface-inverse: var(--narsil-pricing-stone-900); --narsil-pricing-text-primary: var(--narsil-pricing-stone-900); --narsil-pricing-text-secondary: var(--narsil-pricing-steel-700); --narsil-pricing-text-tertiary: var(--narsil-pricing-steel-500); --narsil-pricing-text-disabled: var(--narsil-pricing-stone-400); --narsil-pricing-text-on-accent: var(--narsil-pricing-stone-900); --narsil-pricing-text-on-inverse: var(--narsil-pricing-stone-200); --narsil-pricing-text-accent: var(--narsil-pricing-dawn-800); --narsil-pricing-border-subtle: color-mix(in oklab, var(--narsil-pricing-stone-300) 55%, var(--narsil-pricing-surface-canvas)); --narsil-pricing-border-default: var(--narsil-pricing-stone-300); --narsil-pricing-border-strong: var(--narsil-pricing-stone-400); --narsil-pricing-border-inverse: var(--narsil-pricing-steel-700); --narsil-pricing-accent: var(--narsil-pricing-dawn-500); --narsil-pricing-accent-hover: var(--narsil-pricing-dawn-600); --narsil-pricing-accent-pressed: var(--narsil-pricing-dawn-700); --narsil-pricing-accent-subtle: var(--narsil-pricing-dawn-100); --narsil-pricing-on-accent: var(--narsil-pricing-stone-900); --narsil-pricing-focus-ring: var(--narsil-pricing-dawn-700); --narsil-pricing-link: var(--narsil-pricing-dawn-800); --narsil-pricing-link-hover: var(--narsil-pricing-dawn-900); --narsil-pricing-link-visited: var(--narsil-pricing-dawn-900); /* success / warning / danger / info 的實際色值定義在上方的原始色階區塊。 這裡原本是「語意別名指向原始 token」的四行，但兩邊在加上 narsil-pricing- 前綴後collapse 成同一個名字，變成 `--x: var(--x)` 的自我參照—— CSS 會判定為無效並讓變數變成 guaranteed-invalid，所有引用它的 background/border 全部落回 transparent。已移除，直接沿用原始 token。 */ --narsil-pricing-success-subtle: color-mix(in oklab, var(--narsil-pricing-success) 14%, var(--narsil-pricing-surface-canvas)); --narsil-pricing-warning-subtle: color-mix(in oklab, var(--narsil-pricing-warning) 16%, var(--narsil-pricing-surface-canvas)); --narsil-pricing-danger-subtle: color-mix(in oklab, var(--narsil-pricing-danger) 14%, var(--narsil-pricing-surface-canvas)); --narsil-pricing-info-subtle: color-mix(in oklab, var(--narsil-pricing-info) 14%, var(--narsil-pricing-surface-canvas)); --narsil-pricing-viz-primary: var(--narsil-pricing-dawn-500); --narsil-pricing-viz-comparison: var(--narsil-pricing-steel-500); --narsil-pricing-viz-comparison-2: var(--narsil-pricing-steel-300); --narsil-pricing-viz-benchmark: var(--narsil-pricing-steel-700); --narsil-pricing-viz-selection: var(--narsil-pricing-dawn-500); --narsil-pricing-scrim: color-mix(in srgb, var(--narsil-pricing-stone-950) 62%, transparent); } [data-theme="dark"] { --narsil-pricing-surface-canvas: var(--narsil-pricing-stone-900); --narsil-pricing-surface: var(--narsil-pricing-steel-800); --narsil-pricing-surface-sunken: var(--narsil-pricing-stone-950); --narsil-pricing-surface-raised: var(--narsil-pricing-steel-700); --narsil-pricing-surface-brand: var(--narsil-pricing-dawn-950); --narsil-pricing-surface-inverse: var(--narsil-pricing-stone-100); --narsil-pricing-text-primary: var(--narsil-pricing-stone-200); --narsil-pricing-text-secondary: var(--narsil-pricing-steel-200); --narsil-pricing-text-tertiary: var(--narsil-pricing-steel-300); --narsil-pricing-text-disabled: var(--narsil-pricing-steel-600); --narsil-pricing-text-on-accent: var(--narsil-pricing-stone-900); --narsil-pricing-text-on-inverse: var(--narsil-pricing-stone-900); --narsil-pricing-text-accent: var(--narsil-pricing-dawn-300); --narsil-pricing-border-subtle: color-mix(in oklab, var(--narsil-pricing-steel-600) 60%, var(--narsil-pricing-surface-canvas)); --narsil-pricing-border-default: var(--narsil-pricing-steel-600); --narsil-pricing-border-strong: var(--narsil-pricing-steel-500); --narsil-pricing-border-inverse: var(--narsil-pricing-stone-300); --narsil-pricing-accent: var(--narsil-pricing-dawn-500); --narsil-pricing-accent-hover: var(--narsil-pricing-dawn-400); --narsil-pricing-accent-pressed: var(--narsil-pricing-dawn-600); --narsil-pricing-accent-subtle: var(--narsil-pricing-dawn-950); --narsil-pricing-on-accent: var(--narsil-pricing-stone-900); --narsil-pricing-focus-ring: var(--narsil-pricing-dawn-300); --narsil-pricing-link: var(--narsil-pricing-dawn-300); --narsil-pricing-link-hover: var(--narsil-pricing-dawn-200); --narsil-pricing-link-visited: var(--narsil-pricing-dawn-400); --narsil-pricing-success-subtle: color-mix(in oklab, var(--narsil-pricing-success) 22%, var(--narsil-pricing-surface-canvas)); --narsil-pricing-warning-subtle: color-mix(in oklab, var(--narsil-pricing-warning) 22%, var(--narsil-pricing-surface-canvas)); --narsil-pricing-danger-subtle: color-mix(in oklab, var(--narsil-pricing-danger) 22%, var(--narsil-pricing-surface-canvas)); --narsil-pricing-info-subtle: color-mix(in oklab, var(--narsil-pricing-info) 22%, var(--narsil-pricing-surface-canvas)); --narsil-pricing-viz-comparison: var(--narsil-pricing-steel-400); --narsil-pricing-viz-comparison-2: var(--narsil-pricing-steel-600); --narsil-pricing-viz-benchmark: var(--narsil-pricing-steel-300); --narsil-pricing-scrim: color-mix(in srgb, var(--narsil-pricing-stone-950) 72%, transparent); } * { margin: 0; } body { font-family: var(--narsil-pricing-font-sans); font-size: var(--narsil-pricing-fs-base); line-height: var(--narsil-pricing-lh-normal); font-weight: var(--narsil-pricing-fw-regular); color: var(--narsil-pricing-text-primary); background-color: var(--narsil-pricing-surface-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga", "calt"; } h1, h2, h3, h4, h5, h6 { font-family: var(--narsil-pricing-font-sans); font-weight: var(--narsil-pricing-fw-extrabold); line-height: var(--narsil-pricing-lh-tight); letter-spacing: var(--narsil-pricing-tracking-tight); color: var(--narsil-pricing-text-primary); text-wrap: balance; } p { text-wrap: pretty; } a { color: var(--narsil-pricing-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: var(--narsil-pricing-transition-colors); } a:hover { color: var(--narsil-pricing-link-hover); text-decoration-thickness: 1.5px; } a:visited { color: var(--narsil-pricing-link-visited); } /* height: auto 讓 width/height 屬性只作為長寬比預留，避免圖片被壓扁； .narsil-brand-logo 等以 class 指定高度的規則優先級較高，不受影響。 */ img, svg, video, canvas { display: block; max-width: 100%; } ::selection { background: color-mix(in srgb, var(--narsil-pricing-dawn-500) 32%, transparent); color: var(--narsil-pricing-text-primary); } :focus-visible { outline: var(--narsil-pricing-border-width-focus) solid var(--narsil-pricing-focus-ring); outline-offset: 2px; } :focus:not(:focus-visible) { outline: none; } code, kbd, samp, pre { font-family: var(--narsil-pricing-font-mono); font-size: 0.9em; } body { overflow-x: hidden; font-synthesis: none; } a { text-underline-offset: var(--narsil-pricing-space-1); } /* Bootstrap 的間距階最大到 .py-5（3rem）。這是一頁長篇行銷頁，桌面需要更大的 區塊節奏，因此在 lg 斷點以上以本頁專屬 class 放大；小螢幕維持 Bootstrap 的 .py-5。 */ @media (min-width: 992px) { .narsil-section-lg { padding-block: var(--narsil-pricing-space-32); } } /* ============================================================================ * 頁面基準：在 Bootstrap Reboot 之上，把本頁自己的排版節奏拿回來 * ---------------------------------------------------------------------------- * 本頁的每一個區塊都以 margin-block-start 明確控制節奏，不依賴任何預設外距。 * * 注意：檔案上方的 `* { margin: 0 }` 擋不住 Bootstrap Reboot——Reboot 用的是 * `p`、`h1`…`h6`、`dd` 這類「元素選擇器」，特異度 (0,0,1) 高於萬用選擇器的 * (0,0,0)，所以 Reboot 的 margin-bottom 會贏。必須用同為元素選擇器、且載入 * 順序在後的規則才蓋得掉。 * * Bootstrap 的間距 utilities（.mb-3 等）帶 !important，不受這組規則影響， * 需要間距的地方照樣可以用 utilities。 * ========================================================================== */ h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, figure, blockquote, pre, hr, table { margin: 0; } /* Reboot 會把
往右推，本頁的定義清單全部靠左對齊 */ dd { margin-inline-start: 0; } /* 錨點捲動：導覽列的 #narsil-packages / #narsil-faq 等跳轉要平滑 */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---- 容器寬度 ------------------------------------------------------------- * Bootstrap 的 .container 最寬到 1320px，本頁的設計基準是 90rem（1440px）。 * 依 Bootstrap 官方的客製方式覆寫 .container 的最大寬度與左右內距； * 內距取 space-6（24px），與 .row 的 g-4 gutter（24px，即左右各 12px 負邊距 * 搭配 .col 的 12px 內距）對齊，欄位文字才會切齊容器邊界。 * -------------------------------------------------------------------------- */ .container { max-width: var(--narsil-pricing-container-2xl); padding-inline: var(--narsil-pricing-space-6); } @media (max-width: 56rem) { .container { padding-inline: var(--narsil-pricing-space-5); } } @media (max-width: 40rem) { .container { padding-inline: var(--narsil-pricing-space-4); } } /* ============================================================================ * 行長上限（measure） * ---------------------------------------------------------------------------- * 中文舒適閱讀是每行 30–45 個全形字；本頁重建前實測中位數 57 字、最長 159 字。 * 行太長會讓眼睛在換行時找不到下一行的起點，即使字級夠大也讀不下去。 * * 42rem 在 16px 內文下約等於 42 個全形字，落在舒適區間的上緣； * 只套在「整段句子」上，不套標籤、數值或表格。 * ========================================================================== */ .narsil-execution-contract__note, .narsil-architecture-figure figcaption, .narsil-table-figure figcaption, .narsil-industry-note, .narsil-tenancy-card > p, .narsil-limits-panel > p, .narsil-principle-panel > div > p, .narsil-pricing-disclaimer, .narsil-acceptance-grid span, .narsil-value-layer > strong, .narsil-faq-list details p, .narsil-industry-block__head > p { max-width: 42rem; } /* 置中的段落要連同左右留白一起置中，否則會靠左貼齊 */ .narsil-section-heading--center > p:last-child, .narsil-final-cta__content > p { margin-inline: auto; } /* ---- 卡片等高 ------------------------------------------------------------- * 改用 .row/.col 之後，.col 會被 .row 拉成等高，但卡片本身仍是 height:auto， * 底部不會對齊（原本用 CSS Grid 時是自動等高的）。明確填滿欄位高度。 * -------------------------------------------------------------------------- */ .narsil-problem-card, .narsil-module-card, .narsil-pricing-card, .narsil-service-card, .narsil-deployment-card, .narsil-accelerator-card, .narsil-scenario-column, .narsil-fit-card { height: 100%; } /* ---- 品牌標誌 ------------------------------------------------------------- * 共用主題層的 .narsil-brand-logo 只保證等比縮放，不指定尺寸（各頁需求不同）。 * 本頁的頁首標誌固定 2.15rem 高。 * -------------------------------------------------------------------------- */ .narsil-brand-logo { width: auto; height: 2.15rem; } /* ---- Eyebrow -------------------------------------------------------------- * 本頁的 eyebrow 用的是頁面自己的色階與字級（tertiary 灰、fs-2xs）， * 與共用主題層那支以 accent 金屬色為主的版本不同，因此在此覆寫。 * -------------------------------------------------------------------------- */ .narsil-eyebrow { display: flex; align-items: center; gap: var(--narsil-pricing-space-3); margin-bottom: 0; color: var(--narsil-pricing-text-tertiary); font-family: var(--narsil-pricing-font-sans); font-size: var(--narsil-pricing-fs-2xs); font-weight: var(--narsil-pricing-fw-bold); letter-spacing: var(--narsil-pricing-tracking-caps); line-height: var(--narsil-pricing-lh-snug); text-transform: uppercase; } .narsil-eyebrow::before { content: ""; inline-size: var(--narsil-pricing-space-6); block-size: 2px; flex: none; background: var(--narsil-pricing-accent); } .narsil-eyebrow--inverse { color: var(--narsil-pricing-text-tertiary); } /* ---- 按鈕配色 ------------------------------------------------------------- * 沿用 Bootstrap 的 .btn 元件與狀態邏輯，但顏色接回本頁自己的色階： * 本頁的 --accent 是 dawn-500、--on-accent 是 stone-900（深墨）， * 與共用主題層的 bronze-deep / 白字不同，直接沿用會讓 CTA 變色。 * -------------------------------------------------------------------------- */ .btn-primary { --bs-btn-color: var(--narsil-pricing-on-accent); --bs-btn-bg: var(--narsil-pricing-accent); --bs-btn-border-color: var(--narsil-pricing-accent); --bs-btn-hover-color: var(--narsil-pricing-on-accent); --bs-btn-hover-bg: var(--narsil-pricing-accent-hover); --bs-btn-hover-border-color: var(--narsil-pricing-accent-hover); --bs-btn-active-color: var(--narsil-pricing-on-accent); --bs-btn-active-bg: var(--narsil-pricing-accent-hover); --bs-btn-active-border-color: var(--narsil-pricing-accent-hover); --bs-btn-disabled-color: var(--narsil-pricing-on-accent); --bs-btn-disabled-bg: var(--narsil-pricing-accent); --bs-btn-disabled-border-color: var(--narsil-pricing-accent); } .btn-outline-secondary { --bs-btn-color: var(--narsil-pricing-text-primary); --bs-btn-bg: transparent; --bs-btn-border-color: var(--narsil-pricing-border-strong); --bs-btn-hover-color: var(--narsil-pricing-text-primary); --bs-btn-hover-bg: var(--narsil-pricing-accent-subtle); --bs-btn-hover-border-color: var(--narsil-pricing-accent); --bs-btn-active-color: var(--narsil-pricing-text-primary); --bs-btn-active-bg: var(--narsil-pricing-accent-subtle); --bs-btn-active-border-color: var(--narsil-pricing-accent); } /* ---- 安靜按鈕 ------------------------------------------------------------- * 原本的 .button--quiet 是「無框、繼承文字色」，改用 Bootstrap 的 .btn-link * 之後預設會變成 accent 金屬色；在深色 hero 上要維持原本的文字色。 * -------------------------------------------------------------------------- */ .btn-link { --bs-btn-color: var(--narsil-pricing-text-primary); --bs-btn-hover-color: var(--narsil-pricing-text-primary); text-decoration: underline; } .narsil-section-heading { max-width: 58rem; } .narsil-section-heading h2 { margin-block-start: var(--narsil-pricing-space-6); font-size: clamp(var(--narsil-pricing-fs-3xl), 5vw, var(--narsil-pricing-fs-5xl)); letter-spacing: var(--narsil-pricing-tracking-tight); } .narsil-section-heading > p:last-child { max-width: 42rem; margin-block-start: var(--narsil-pricing-space-8); color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-md); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-section-heading--inverse h2 { color: var(--narsil-pricing-text-primary); } .narsil-section-heading--inverse > p:last-child { color: var(--narsil-pricing-text-secondary); } .narsil-section-heading--center { margin-inline: auto; text-align: center; } .narsil-section-heading--center .narsil-eyebrow { justify-content: center; } .narsil-section-heading--center > p:last-child { margin-inline: auto; } /* 定位與滿版由 Bootstrap 的 .position-absolute .top-0 .start-0 .w-100 提供， 這裡只補疊層順序與底線。 */ .narsil-site-header { z-index: 50; padding: 0; border-block-end: 1px solid var(--narsil-pricing-border-subtle); } .narsil-site-header__inner { display: flex; min-height: 5rem; align-items: center; gap: var(--narsil-pricing-space-8); flex-wrap: nowrap; } .narsil-site-header__brand { display: inline-flex; text-decoration: none; } /* display/align/margin 由 .navbar-nav .flex-row .align-items-center .ms-auto 提供， 這裡只指定本頁需要的間距。 */ .narsil-site-header__nav { gap: var(--narsil-pricing-space-6); } .narsil-site-header__nav > a:not(.btn) { color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); font-weight: var(--narsil-pricing-fw-semibold); text-decoration: none; } .narsil-site-header__nav > a:not(.btn):hover { color: var(--narsil-pricing-text-primary); } .narsil-hero { position: relative; isolation: isolate; min-height: 54rem; overflow: hidden; padding-block: 10rem var(--narsil-pricing-space-24); background: var(--narsil-pricing-surface-canvas); } .narsil-hero::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 42%; height: 3px; background: var(--narsil-pricing-accent); clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%); } .narsil-hero__symbol { position: absolute; inset-block-start: 6rem; inset-inline-end: -7rem; z-index: -1; width: min(44rem, 55vw); opacity: 0.045; } .narsil-hero h1 { max-width: 52rem; margin-block-start: var(--narsil-pricing-space-7); color: var(--narsil-pricing-text-primary); font-size: clamp(var(--narsil-pricing-fs-4xl), 6.4vw, var(--narsil-pricing-fs-7xl)); letter-spacing: var(--narsil-pricing-tracking-tighter); line-height: 1.05; } .narsil-hero__lead { max-width: 48rem; margin-block-start: var(--narsil-pricing-space-8); color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-md); line-height: var(--narsil-pricing-lh-relaxed); } /* display / flex-wrap / align / gap 由 Bootstrap 的 .d-flex .flex-wrap .align-items-center .gap-3 提供，這裡只留上方留白。 */ .narsil-hero__actions { margin-block-start: var(--narsil-pricing-space-10); } .narsil-hero__principles { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 44rem; margin-block-start: var(--narsil-pricing-space-14); border-block: 1px solid var(--narsil-pricing-border-default); } .narsil-hero__principles > div { display: grid; gap: var(--narsil-pricing-space-1); padding: var(--narsil-pricing-space-6); border-inline-start: 1px solid var(--narsil-pricing-border-default); } .narsil-hero__principles > div:first-child { border-inline-start: 0; } .narsil-hero__principles dt { color: var(--narsil-pricing-accent); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-xs); font-weight: var(--narsil-pricing-fw-bold); letter-spacing: var(--narsil-pricing-tracking-caps); } .narsil-hero__principles dd { color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); } .narsil-execution-contract { position: relative; padding: var(--narsil-pricing-space-6); border: 1px solid var(--narsil-pricing-border-strong); border-block-start: 3px solid var(--narsil-pricing-accent); border-radius: var(--narsil-pricing-radius-md); background: var(--narsil-pricing-surface); box-shadow: var(--narsil-pricing-shadow-xl); } .narsil-execution-contract::before { content: ""; position: absolute; inset: var(--narsil-pricing-space-2); z-index: -1; border: 1px solid var(--narsil-pricing-border-subtle); translate: var(--narsil-pricing-space-3) var(--narsil-pricing-space-3); } .narsil-execution-contract__topline, .narsil-contract-row, .narsil-status-label { display: flex; align-items: center; } .narsil-execution-contract__topline { justify-content: space-between; gap: var(--narsil-pricing-space-4); padding-block-end: var(--narsil-pricing-space-5); border-block-end: 1px solid var(--narsil-pricing-border-default); color: var(--narsil-pricing-text-tertiary); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-2xs); font-weight: var(--narsil-pricing-fw-bold); letter-spacing: var(--narsil-pricing-tracking-wider); } .narsil-status-label { gap: var(--narsil-pricing-space-2); color: var(--narsil-pricing-text-primary); } .narsil-status-label i { width: 0.55rem; height: 0.55rem; background: var(--narsil-pricing-success); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .narsil-contract-row { display: grid; grid-template-columns: 6rem 1fr; gap: var(--narsil-pricing-space-5); padding-block: var(--narsil-pricing-space-5); padding-inline: var(--narsil-pricing-space-4); border-block-end: 1px solid var(--narsil-pricing-border-subtle); } .narsil-contract-row span { color: var(--narsil-pricing-text-tertiary); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-xs); } .narsil-contract-row strong { color: var(--narsil-pricing-text-primary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-contract-row--focus { background: var(--narsil-pricing-accent-subtle); margin-inline: calc(var(--narsil-pricing-space-4) * -1); padding-inline: var(--narsil-pricing-space-4); } .narsil-contract-path { display: grid; grid-template-columns: repeat(4, 1fr); margin-block-start: var(--narsil-pricing-space-6); border: 1px solid var(--narsil-pricing-border-default); } .narsil-contract-path div { display: grid; gap: var(--narsil-pricing-space-2); padding: var(--narsil-pricing-space-5) var(--narsil-pricing-space-4); border-inline-start: 1px solid var(--narsil-pricing-border-default); } .narsil-contract-path div:first-child { border-inline-start: 0; } .narsil-contract-path span { color: var(--narsil-pricing-text-tertiary); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-3xs); } .narsil-contract-path strong { color: var(--narsil-pricing-text-primary); font-size: var(--narsil-pricing-fs-xs); } .narsil-execution-contract__note { margin-block-start: var(--narsil-pricing-space-5); color: var(--narsil-pricing-text-tertiary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-value-section { background: var(--narsil-pricing-surface-canvas); } .narsil-value-stack { display: grid; gap: var(--narsil-pricing-space-3); margin-block-start: var(--narsil-pricing-space-16); } .narsil-value-layer { display: grid; grid-template-columns: 4rem minmax(18rem, 0.9fr) 1fr; align-items: center; gap: var(--narsil-pricing-space-6); min-height: 7.25rem; padding: var(--narsil-pricing-space-6) var(--narsil-pricing-space-8); border: 1px solid var(--narsil-pricing-border-default); border-radius: var(--narsil-pricing-radius-md); background: var(--narsil-pricing-surface); } .narsil-value-layer--harness { border-color: var(--narsil-pricing-accent-pressed); border-inline-start-width: 4px; background: var(--narsil-pricing-surface-inverse); color: var(--narsil-pricing-text-on-inverse); } .narsil-value-layer--harness h3, .narsil-value-layer--harness strong { color: var(--narsil-pricing-text-on-inverse); } .narsil-value-layer--harness p, .narsil-value-layer--harness .narsil-layer-index { color: var(--narsil-pricing-accent); } .narsil-layer-index { color: var(--narsil-pricing-text-tertiary); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-sm); } .narsil-value-layer p { color: var(--narsil-pricing-text-tertiary); font-family: var(--narsil-pricing-font-sans); font-size: var(--narsil-pricing-fs-2xs); font-weight: var(--narsil-pricing-fw-bold); letter-spacing: var(--narsil-pricing-tracking-caps); } .narsil-value-layer h3 { margin-block-start: var(--narsil-pricing-space-3); font-size: var(--narsil-pricing-fs-xl); } .narsil-value-layer > strong { color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); font-weight: var(--narsil-pricing-fw-medium); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-module-card { padding: var(--narsil-pricing-space-7); border: 1px solid var(--narsil-pricing-border-default); border-radius: var(--narsil-pricing-radius-md); background: var(--narsil-pricing-surface-raised); box-shadow: var(--narsil-pricing-shadow-sm); } .narsil-module-card__topline { display: flex; align-items: center; justify-content: space-between; gap: var(--narsil-pricing-space-4); } .narsil-module-card__topline span { color: var(--narsil-pricing-accent-pressed); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-xs); font-weight: var(--narsil-pricing-fw-bold); } .narsil-module-card__topline p { color: var(--narsil-pricing-text-tertiary); font-size: var(--narsil-pricing-fs-2xs); font-weight: var(--narsil-pricing-fw-bold); letter-spacing: var(--narsil-pricing-tracking-wider); text-transform: uppercase; } .narsil-module-card h3 { margin-block-start: var(--narsil-pricing-space-5); font-size: var(--narsil-pricing-fs-xl); } .narsil-module-card dl { display: grid; gap: var(--narsil-pricing-space-4); margin-block-start: var(--narsil-pricing-space-5); } .narsil-module-card dl > div { display: grid; grid-template-columns: 2.6rem 1fr; gap: var(--narsil-pricing-space-3); } .narsil-module-card dt { color: var(--narsil-pricing-text-tertiary); font-size: var(--narsil-pricing-fs-xs); font-weight: var(--narsil-pricing-fw-bold); } .narsil-module-card dd { color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-architecture-section { background: var(--narsil-pricing-surface-canvas); } .narsil-architecture-figure { margin-block-start: var(--narsil-pricing-space-16); } .narsil-governance-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--narsil-pricing-space-3); margin-block-start: var(--narsil-pricing-space-4); } .narsil-governance-strip strong { color: var(--narsil-pricing-text-primary); font-size: var(--narsil-pricing-fs-sm); } .narsil-governance-strip span { padding: var(--narsil-pricing-space-2) var(--narsil-pricing-space-3); border: 1px solid var(--narsil-pricing-border-default); color: var(--narsil-pricing-text-secondary); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-2xs); } .narsil-architecture-figure figcaption { margin-block-start: var(--narsil-pricing-space-5); color: var(--narsil-pricing-text-tertiary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-source-reference { margin-block-start: var(--narsil-pricing-space-4); border-block-start: 1px solid var(--narsil-pricing-border-subtle); } .narsil-source-reference summary { min-height: var(--narsil-pricing-tap-min); padding-block: var(--narsil-pricing-space-4); color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); font-weight: var(--narsil-pricing-fw-semibold); cursor: pointer; } .narsil-source-reference img { margin-block-start: var(--narsil-pricing-space-4); border: 1px solid var(--narsil-pricing-border-default); background: var(--narsil-pricing-surface-sunken); } .narsil-source-reference--light summary { color: var(--narsil-pricing-text-secondary); } .narsil-governance-section { background: var(--narsil-pricing-surface); } .narsil-lifecycle-band { padding-block: var(--narsil-pricing-space-20); background: var(--narsil-pricing-surface-canvas); } .narsil-lifecycle-band__heading { display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: end; gap: var(--narsil-pricing-space-10); } .narsil-lifecycle-band__heading h2 { color: var(--narsil-pricing-text-primary); font-size: clamp(var(--narsil-pricing-fs-2xl), 4vw, var(--narsil-pricing-fs-4xl)); } .narsil-lifecycle-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-block-start: var(--narsil-pricing-space-12); padding: 1px; background: var(--narsil-pricing-border-default); list-style: none; } .narsil-lifecycle-list li { display: grid; min-height: 7rem; align-content: space-between; gap: var(--narsil-pricing-space-4); padding: var(--narsil-pricing-space-6); background: var(--narsil-pricing-surface); } .narsil-lifecycle-list span { color: var(--narsil-pricing-accent); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-xs); } .narsil-lifecycle-list strong { color: var(--narsil-pricing-text-primary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-snug); } .narsil-packages-section { background: var(--narsil-pricing-surface-canvas); } .narsil-pricing-card { display: flex; flex-direction: column; gap: var(--narsil-pricing-space-5); padding: var(--narsil-pricing-space-7); border: 1px solid var(--narsil-pricing-border-default); border-radius: var(--narsil-pricing-radius-md); background: var(--narsil-pricing-surface-raised); box-shadow: var(--narsil-pricing-shadow-sm); } .narsil-pricing-card--featured { border-block-start: 4px solid var(--narsil-pricing-accent); box-shadow: var(--narsil-pricing-shadow-lg); } .narsil-pricing-card__topline { display: flex; align-items: center; justify-content: space-between; gap: var(--narsil-pricing-space-4); } .narsil-pricing-card__index { color: var(--narsil-pricing-text-tertiary); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-xs); } .narsil-pricing-card__badge { padding: var(--narsil-pricing-space-1) var(--narsil-pricing-space-3); border: 1px solid var(--narsil-pricing-border-default); color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-2xs); font-weight: var(--narsil-pricing-fw-bold); } .narsil-pricing-card--featured .narsil-pricing-card__badge { border-color: var(--narsil-pricing-accent-pressed); background: var(--narsil-pricing-accent-subtle); color: var(--narsil-pricing-text-primary); } .narsil-pricing-card__en { color: var(--narsil-pricing-text-tertiary); font-size: var(--narsil-pricing-fs-xs); font-weight: var(--narsil-pricing-fw-bold); letter-spacing: var(--narsil-pricing-tracking-caps); text-transform: uppercase; } .narsil-pricing-card > h3 { margin-block-start: calc(var(--narsil-pricing-space-2) * -1); font-size: var(--narsil-pricing-fs-2xl); } .narsil-pricing-card__promise { min-height: 5rem; color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-pricing-card__price { display: grid; gap: var(--narsil-pricing-space-2); padding-block: var(--narsil-pricing-space-5); border-block: 1px solid var(--narsil-pricing-border-default); } .narsil-pricing-card__price span, .narsil-pricing-card__price small { color: var(--narsil-pricing-text-tertiary); font-size: var(--narsil-pricing-fs-xs); } .narsil-pricing-card__price strong { color: var(--narsil-pricing-text-primary); font-family: var(--narsil-pricing-font-sans); font-size: clamp(var(--narsil-pricing-fs-2xl), 3vw, var(--narsil-pricing-fs-4xl)); letter-spacing: var(--narsil-pricing-tracking-tight); } .narsil-pricing-card__meta, .narsil-pricing-card__lines { display: grid; } .narsil-pricing-card__meta > div, .narsil-pricing-card__lines > div { display: grid; grid-template-columns: 1fr auto; gap: var(--narsil-pricing-space-3); padding-block: var(--narsil-pricing-space-3); border-block-end: 1px solid var(--narsil-pricing-border-subtle); } .narsil-pricing-card dt { color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-xs); } .narsil-pricing-card dd { color: var(--narsil-pricing-text-primary); font-size: var(--narsil-pricing-fs-sm); font-weight: var(--narsil-pricing-fw-semibold); text-align: end; } .narsil-pricing-card__scope > p { color: var(--narsil-pricing-text-tertiary); font-size: var(--narsil-pricing-fs-2xs); font-weight: var(--narsil-pricing-fw-bold); letter-spacing: var(--narsil-pricing-tracking-caps); } .narsil-pricing-card__scope ul { display: grid; gap: var(--narsil-pricing-space-3); margin-block-start: var(--narsil-pricing-space-4); padding: 0; list-style: none; } .narsil-pricing-card__scope li { position: relative; padding-inline-start: var(--narsil-pricing-space-5); color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-pricing-card__scope li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.7em; width: var(--narsil-pricing-space-2); height: 2px; background: var(--narsil-pricing-border-strong); } .narsil-pricing-card .btn { width: 100%; margin-block-start: auto; } .narsil-pricing-disclaimer { max-width: 56rem; margin: var(--narsil-pricing-space-8) auto 0; color: var(--narsil-pricing-text-tertiary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); text-align: center; max-width: 42rem; } .narsil-subsidy-section { background: var(--narsil-pricing-surface); } .narsil-official-link { display: inline-flex; min-height: var(--narsil-pricing-tap-min); align-items: center; margin-block-start: var(--narsil-pricing-space-6); color: var(--narsil-pricing-link); font-weight: var(--narsil-pricing-fw-bold); } .narsil-source-meta { max-width: 42rem; margin-block-start: var(--narsil-pricing-space-3); color: var(--narsil-pricing-text-tertiary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-transaction-card { padding: var(--narsil-pricing-space-8); border: 1px solid var(--narsil-pricing-border-strong); border-radius: var(--narsil-pricing-radius-md); background: var(--narsil-pricing-surface-canvas); } .narsil-transaction-card ol { display: grid; margin-block-start: var(--narsil-pricing-space-5); padding: 0; list-style: none; } .narsil-transaction-card li { display: grid; grid-template-columns: 3rem 1fr; gap: var(--narsil-pricing-space-4); padding-block: var(--narsil-pricing-space-5); border-block-end: 1px solid var(--narsil-pricing-border-subtle); } .narsil-transaction-card li > span { color: var(--narsil-pricing-accent); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-sm); } .narsil-transaction-card h3 { color: var(--narsil-pricing-text-primary); font-size: var(--narsil-pricing-fs-lg); } .narsil-transaction-card li p { margin-block-start: var(--narsil-pricing-space-3); color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-faq-section { background: var(--narsil-pricing-surface-canvas); } .narsil-faq-list { border-block-start: 1px solid var(--narsil-pricing-border-default); } .narsil-faq-list details { border-block-end: 1px solid var(--narsil-pricing-border-default); } .narsil-faq-list summary { min-height: 4.5rem; padding-block: var(--narsil-pricing-space-5); color: var(--narsil-pricing-text-primary); font-weight: var(--narsil-pricing-fw-bold); line-height: var(--narsil-pricing-lh-snug); cursor: pointer; } .narsil-faq-list details p { max-width: 42rem; padding-block: 0 var(--narsil-pricing-space-5); color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-final-cta { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--narsil-pricing-space-32); background: var(--narsil-pricing-surface-canvas); text-align: center; } .narsil-final-cta > img { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; z-index: -1; width: min(38rem, 72vw); opacity: 0.045; translate: -50% -50%; } .narsil-final-cta__content { max-width: 62rem; } .narsil-final-cta__content .narsil-eyebrow { justify-content: center; } .narsil-final-cta h2 { margin-block-start: var(--narsil-pricing-space-6); color: var(--narsil-pricing-text-primary); font-size: clamp(var(--narsil-pricing-fs-3xl), 6vw, var(--narsil-pricing-fs-6xl)); line-height: 1.08; } .narsil-final-cta__content > p { max-width: 45rem; margin: var(--narsil-pricing-space-6) auto 0; color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-md); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-final-cta .btn { margin-block-start: var(--narsil-pricing-space-8); } .narsil-final-cta small { display: block; margin-block-start: var(--narsil-pricing-space-4); color: var(--narsil-pricing-text-tertiary); font-size: var(--narsil-pricing-fs-xs); } .narsil-site-footer { padding-block: var(--narsil-pricing-space-10); border-block-start: 1px solid var(--narsil-pricing-border-subtle); background: var(--narsil-pricing-surface-sunken); } .narsil-site-footer__inner { gap: var(--narsil-pricing-space-6); } .narsil-site-footer__legal { gap: var(--narsil-pricing-space-2) var(--narsil-pricing-space-5); } .narsil-site-footer__legal a { display: inline-flex; align-items: center; min-height: var(--narsil-pricing-tap-min); color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-xs); font-weight: var(--narsil-pricing-fw-semibold); text-decoration: none; } .narsil-site-footer__legal a:hover { color: var(--narsil-pricing-text-primary); text-decoration: underline; text-underline-offset: 2px; } .narsil-site-footer img { width: auto; height: 1.2rem; } .narsil-site-footer p { color: var(--narsil-pricing-text-tertiary); font-size: var(--narsil-pricing-fs-xs); } .narsil-site-footer span { margin-inline-start: auto; color: var(--narsil-pricing-text-tertiary); font-size: var(--narsil-pricing-fs-2xs); } @media (max-width: 70rem) { .narsil-hero__copy { max-width: 58rem; } .narsil-execution-contract { max-width: 48rem; } .narsil-pricing-card__promise { min-height: auto; } } @media (max-width: 56rem) { .narsil-site-header { position: absolute; } .narsil-site-header__nav > a:not(.btn) { display: none; } .narsil-hero { min-height: auto; padding-block: 8.5rem var(--narsil-pricing-space-20); } .narsil-hero__symbol { width: 38rem; max-width: none; } .narsil-value-layer { grid-template-columns: 3rem 1fr; } .narsil-value-layer > strong { grid-column: 2; } .narsil-lifecycle-band__heading { grid-template-columns: 1fr; align-items: start; } .narsil-lifecycle-list { grid-template-columns: 1fr 1fr; } } @media (max-width: 40rem) { .narsil-brand-logo { height: 1.8rem; } .narsil-site-header__inner { min-height: 4.5rem; } .narsil-site-header__nav { gap: var(--narsil-pricing-space-2); } .narsil-hero { padding-block-start: 7.5rem; } .narsil-hero h1 { font-size: clamp(2.75rem, 13vw, var(--narsil-pricing-fs-5xl)); } .narsil-hero__actions .btn { width: 100%; } .narsil-hero__principles { grid-template-columns: 1fr; } .narsil-hero__principles > div, .narsil-hero__principles > div:first-child { border-inline-start: 0; border-block-start: 1px solid var(--narsil-pricing-border-default); } .narsil-hero__principles > div:first-child { border-block-start: 0; } .narsil-execution-contract { padding: var(--narsil-pricing-space-6); } .narsil-contract-row { grid-template-columns: 1fr; gap: var(--narsil-pricing-space-2); } .narsil-contract-path { grid-template-columns: 1fr 1fr; } .narsil-contract-path div:nth-child(3) { border-inline-start: 0; border-block-start: 1px solid var(--narsil-pricing-border-default); } .narsil-contract-path div:nth-child(4) { border-block-start: 1px solid var(--narsil-pricing-border-default); } .narsil-value-layer { grid-template-columns: 1fr; padding: var(--narsil-pricing-space-5); } .narsil-value-layer > strong { grid-column: auto; } .narsil-lifecycle-list { grid-template-columns: 1fr; } .narsil-pricing-card { padding: var(--narsil-pricing-space-5); } .narsil-pricing-card__meta > div, .narsil-pricing-card__lines > div { grid-template-columns: 1fr; } .narsil-pricing-card dd { text-align: start; } .narsil-transaction-card { padding: var(--narsil-pricing-space-5); } .narsil-final-cta .btn { width: 100%; } .narsil-site-footer__inner { flex-direction: column; align-items: flex-start; } .narsil-site-footer span { margin-inline-start: 0; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; } } .narsil-problem-card { padding: var(--narsil-pricing-space-7); border: 1px solid var(--narsil-pricing-border-default); border-block-start: 3px solid var(--narsil-pricing-border-strong); border-radius: var(--narsil-pricing-radius-sm); background: var(--narsil-pricing-surface); } .narsil-problem-card > span { color: var(--narsil-pricing-text-accent); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-xs); font-weight: var(--narsil-pricing-fw-bold); } .narsil-problem-card h3 { margin-block-start: var(--narsil-pricing-space-4); font-size: var(--narsil-pricing-fs-lg); } .narsil-problem-card p { margin-block-start: var(--narsil-pricing-space-4); color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); } /* ── 批次系統流程盤（架構圖）─────────────────────────────── */ .narsil-batch-board { position: relative; display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.5fr) minmax(0, 0.82fr); align-items: start; gap: var(--narsil-pricing-space-6); padding: var(--narsil-pricing-space-8); border: 1px solid var(--narsil-pricing-border-strong); border-radius: var(--narsil-pricing-radius-md); background: var(--narsil-pricing-surface-sunken); } .narsil-batch-board::before { content: "ENTERPRISE ON-PREMISE TRUST BOUNDARY"; position: absolute; inset-block-start: var(--narsil-pricing-space-3); inset-inline-end: var(--narsil-pricing-space-4); color: var(--narsil-pricing-text-tertiary); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-3xs); letter-spacing: var(--narsil-pricing-tracking-wider); } .narsil-batch-rail { display: grid; gap: var(--narsil-pricing-space-4); margin-block-start: var(--narsil-pricing-space-8); } .narsil-batch-rail__card { padding: var(--narsil-pricing-space-6); border: 1px solid var(--narsil-pricing-border-default); border-radius: var(--narsil-pricing-radius-sm); background: var(--narsil-pricing-surface); } .narsil-batch-rail__card > span { color: var(--narsil-pricing-text-tertiary); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-3xs); font-weight: var(--narsil-pricing-fw-bold); letter-spacing: var(--narsil-pricing-tracking-caps); } .narsil-batch-rail__card h3 { margin-block-start: var(--narsil-pricing-space-3); font-size: var(--narsil-pricing-fs-base); } .narsil-batch-rail__card p { margin-block-start: var(--narsil-pricing-space-3); color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-batch-rail__card ul { display: grid; gap: var(--narsil-pricing-space-2); margin-block-start: var(--narsil-pricing-space-4); padding: 0; list-style: none; } .narsil-batch-rail__card li { padding-block: var(--narsil-pricing-space-2); border-block-start: 1px solid var(--narsil-pricing-border-subtle); color: var(--narsil-pricing-text-secondary); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-3xs); line-height: var(--narsil-pricing-lh-snug); } .narsil-batch-flow { display: grid; margin-block-start: var(--narsil-pricing-space-8); } .narsil-batch-stage { position: relative; padding: var(--narsil-pricing-space-6); border: 1px solid var(--narsil-pricing-border-default); border-radius: var(--narsil-pricing-radius-sm); background: var(--narsil-pricing-surface-raised); } .narsil-batch-stage--accent { border: 2px solid var(--narsil-pricing-accent); background: var(--narsil-pricing-surface); } .narsil-batch-stage--muted { background: var(--narsil-pricing-surface); } .narsil-batch-stage__index { color: var(--narsil-pricing-text-tertiary); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-3xs); font-weight: var(--narsil-pricing-fw-bold); letter-spacing: var(--narsil-pricing-tracking-caps); } .narsil-batch-stage h3 { margin-block-start: var(--narsil-pricing-space-3); font-size: var(--narsil-pricing-fs-base); } .narsil-batch-stage p { margin-block-start: var(--narsil-pricing-space-3); color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-batch-arrow { position: relative; display: grid; height: var(--narsil-pricing-space-8); place-items: center; } .narsil-batch-arrow::before { content: ""; position: absolute; inset-block: 0; width: 1px; background: var(--narsil-pricing-border-strong); } .narsil-batch-arrow::after { content: ""; position: absolute; inset-block-end: 0; width: 0.5rem; height: 0.5rem; border-inline-end: 1px solid var(--narsil-pricing-border-strong); border-block-end: 1px solid var(--narsil-pricing-border-strong); rotate: 45deg; translate: 0 -0.1rem; } .narsil-batch-arrow span { position: relative; z-index: 1; padding: var(--narsil-pricing-space-1) var(--narsil-pricing-space-3); background: var(--narsil-pricing-surface-sunken); color: var(--narsil-pricing-text-tertiary); font-size: var(--narsil-pricing-fs-3xs); } .narsil-batch-lane { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--narsil-pricing-space-3); } .narsil-batch-lane--pair { grid-template-columns: repeat(2, 1fr); } .narsil-batch-fabric { margin-block-start: var(--narsil-pricing-space-4); padding: var(--narsil-pricing-space-3) var(--narsil-pricing-space-4); border: 1px dashed var(--narsil-pricing-border-strong); color: var(--narsil-pricing-text-tertiary); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-3xs); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-batch-outputs { display: flex; flex-wrap: wrap; gap: var(--narsil-pricing-space-2); margin-block-start: var(--narsil-pricing-space-4); } .narsil-batch-outputs span { padding: var(--narsil-pricing-space-2) var(--narsil-pricing-space-3); border: 1px solid var(--narsil-pricing-border-default); background: var(--narsil-pricing-surface-sunken); color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-2xs); } /* ── 資料表格（能力矩陣、方案對照）───────────────────────── */ /* 表格外框：捲動本身由 Bootstrap 的 .table-responsive 提供，這裡只加外框與底色。 */ .narsil-table-frame { margin-block-start: var(--narsil-pricing-space-12); border: 1px solid var(--narsil-pricing-border-default); border-radius: var(--narsil-pricing-radius-sm); background: var(--narsil-pricing-surface-raised); } /* 表格底盤（width / border-collapse）由 Bootstrap 的 .table 提供； 字級要回到本頁的比例，否則儲存格未指定字級時會落回 body 的 16px。 */ .narsil-data-table { font-size: var(--narsil-pricing-fs-sm); /* 讓 /// 的 border-color 也走本頁色階 （這幾層的 border-width 是 0，看不出來，但避免與儲存格不一致） */ --bs-table-border-color: var(--narsil-pricing-border-subtle); } /* Bootstrap .table 的儲存格內距是 .5rem，對本頁的資料表太緊； 行高與對齊也一併回到本頁的版式。 */ .narsil-data-table th, .narsil-data-table td { padding: var(--narsil-pricing-space-4) var(--narsil-pricing-space-5); border-block-end: 1px solid var(--narsil-pricing-border-subtle); line-height: var(--narsil-pricing-lh-relaxed); text-align: start; vertical-align: top; } .narsil-data-table--wide { min-width: 46rem; } .narsil-data-table--compare { min-width: 56rem; } .narsil-data-table thead th { border-block-end: 1px solid var(--narsil-pricing-border-strong); color: var(--narsil-pricing-text-tertiary); font-size: var(--narsil-pricing-fs-2xs); font-weight: var(--narsil-pricing-fw-bold); letter-spacing: var(--narsil-pricing-tracking-wider); text-transform: uppercase; white-space: nowrap; } .narsil-data-table tbody th { color: var(--narsil-pricing-text-primary); font-size: var(--narsil-pricing-fs-sm); font-weight: var(--narsil-pricing-fw-bold); } .narsil-data-table tbody td { color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); } .narsil-data-table tbody tr:last-child th, .narsil-data-table tbody tr:last-child td { border-block-end: 0; } .narsil-data-table code { color: var(--narsil-pricing-text-primary); font-size: var(--narsil-pricing-fs-2xs); font-weight: var(--narsil-pricing-fw-bold); } .narsil-data-table--compare tbody th { white-space: nowrap; } .narsil-data-table--compare thead th:nth-child(2), .narsil-data-table--compare tbody td:nth-child(2) { background: var(--narsil-pricing-accent-subtle); color: var(--narsil-pricing-text-primary); } .narsil-data-table--compare tbody tr:first-child td { color: var(--narsil-pricing-text-primary); font-size: var(--narsil-pricing-fs-sm); font-weight: var(--narsil-pricing-fw-bold); } .narsil-service-card { display: flex; flex-direction: column; gap: var(--narsil-pricing-space-4); padding: var(--narsil-pricing-space-7); border: 1px solid var(--narsil-pricing-border-default); border-radius: var(--narsil-pricing-radius-md); background: var(--narsil-pricing-surface-raised); box-shadow: var(--narsil-pricing-shadow-sm); } .narsil-service-card--support { background: var(--narsil-pricing-surface); box-shadow: none; } .narsil-service-card__topline { display: flex; align-items: center; justify-content: space-between; gap: var(--narsil-pricing-space-4); padding-block-end: var(--narsil-pricing-space-4); border-block-end: 1px solid var(--narsil-pricing-border-default); } .narsil-service-card__topline > span { color: var(--narsil-pricing-text-accent); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-xs); font-weight: var(--narsil-pricing-fw-bold); } .narsil-service-card__topline > em { color: var(--narsil-pricing-text-tertiary); font-family: var(--narsil-pricing-font-sans); font-size: var(--narsil-pricing-fs-2xs); font-style: normal; font-weight: var(--narsil-pricing-fw-bold); letter-spacing: var(--narsil-pricing-tracking-wider); text-transform: uppercase; } .narsil-service-card h3 { font-size: var(--narsil-pricing-fs-lg); } .narsil-service-card__role { color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-service-card dl { display: grid; margin-block-start: auto; } .narsil-service-card dl > div { display: grid; gap: var(--narsil-pricing-space-1); padding-block: var(--narsil-pricing-space-3); border-block-start: 1px solid var(--narsil-pricing-border-subtle); } .narsil-service-card dt { color: var(--narsil-pricing-text-tertiary); font-size: var(--narsil-pricing-fs-2xs); font-weight: var(--narsil-pricing-fw-bold); letter-spacing: var(--narsil-pricing-tracking-wide); } .narsil-service-card dd { color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-xs); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-deployment-card { display: flex; flex-direction: column; gap: var(--narsil-pricing-space-4); padding: var(--narsil-pricing-space-7); border: 1px solid var(--narsil-pricing-border-default); border-radius: var(--narsil-pricing-radius-md); background: var(--narsil-pricing-surface-raised); } .narsil-deployment-card__topline { display: flex; align-items: baseline; justify-content: space-between; gap: var(--narsil-pricing-space-4); } .narsil-deployment-card__topline span { color: var(--narsil-pricing-text-tertiary); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-xs); } .narsil-deployment-card__topline strong { color: var(--narsil-pricing-text-primary); font-size: var(--narsil-pricing-fs-sm); font-weight: var(--narsil-pricing-fw-bold); } .narsil-deployment-card h3 { font-size: var(--narsil-pricing-fs-xl); } .narsil-deployment-nodes { display: flex; gap: var(--narsil-pricing-space-2); } .narsil-deployment-nodes i { width: 1.5rem; height: 2.25rem; border: 1px solid var(--narsil-pricing-border-strong); border-block-start: 3px solid var(--narsil-pricing-accent); background: var(--narsil-pricing-surface-sunken); } .narsil-deployment-nodes i[data-narsil-node="optional"] { border: 1px dashed var(--narsil-pricing-border-strong); border-block-start: 1px dashed var(--narsil-pricing-border-strong); background: transparent; opacity: 0.55; } .narsil-deployment-card dl { display: grid; } .narsil-deployment-card dl > div { display: grid; gap: var(--narsil-pricing-space-1); padding-block: var(--narsil-pricing-space-3); border-block-start: 1px solid var(--narsil-pricing-border-subtle); } .narsil-deployment-card dt { color: var(--narsil-pricing-text-tertiary); font-size: var(--narsil-pricing-fs-2xs); font-weight: var(--narsil-pricing-fw-bold); letter-spacing: var(--narsil-pricing-tracking-wide); } .narsil-deployment-card dd { color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-principle-panel { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--narsil-pricing-space-10); margin-block-start: var(--narsil-pricing-space-12); padding: var(--narsil-pricing-space-8); border: 1px solid var(--narsil-pricing-border-default); border-inline-start: 4px solid var(--narsil-pricing-accent); border-radius: var(--narsil-pricing-radius-sm); background: var(--narsil-pricing-surface); } .narsil-principle-panel h3 { font-size: var(--narsil-pricing-fs-xl); } .narsil-principle-panel > div > p { margin-block-start: var(--narsil-pricing-space-4); color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-principle-list { display: grid; gap: var(--narsil-pricing-space-3); padding: 0; list-style: none; } .narsil-principle-list li { position: relative; padding-inline-start: var(--narsil-pricing-space-6); color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-principle-list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.72em; width: var(--narsil-pricing-space-3); height: 2px; background: var(--narsil-pricing-accent); } .narsil-principle-list li strong { color: var(--narsil-pricing-text-primary); font-weight: var(--narsil-pricing-fw-bold); } .narsil-reference-links { display: flex; flex-wrap: wrap; gap: var(--narsil-pricing-space-3) var(--narsil-pricing-space-6); margin-block-start: var(--narsil-pricing-space-8); } .narsil-reference-links a { color: var(--narsil-pricing-link); font-size: var(--narsil-pricing-fs-xs); font-weight: var(--narsil-pricing-fw-semibold); } /* ── 產業場景目錄 ────────────────────────────────────────── */ .narsil-industry-block { margin-block-start: var(--narsil-pricing-space-16); padding-block-start: var(--narsil-pricing-space-10); border-block-start: 1px solid var(--narsil-pricing-border-default); } .narsil-industry-block__head { display: grid; grid-template-columns: 0.8fr 1.2fr; align-items: end; gap: var(--narsil-pricing-space-8); } .narsil-industry-block__head h3 { font-size: clamp(var(--narsil-pricing-fs-xl), 3vw, var(--narsil-pricing-fs-3xl)); } .narsil-industry-block__head > p { color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-industry-note { margin-block-start: var(--narsil-pricing-space-6); padding: var(--narsil-pricing-space-4) var(--narsil-pricing-space-5); border: 1px solid var(--narsil-pricing-border-default); border-inline-start: 3px solid var(--narsil-pricing-warning); border-radius: var(--narsil-pricing-radius-sm); background: var(--narsil-pricing-warning-subtle); color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-xs); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-scenario-column { padding: var(--narsil-pricing-space-6); border: 1px solid var(--narsil-pricing-border-default); border-radius: var(--narsil-pricing-radius-sm); background: var(--narsil-pricing-surface-raised); } .narsil-scenario-column__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--narsil-pricing-space-3); padding-block-end: var(--narsil-pricing-space-4); border-block-end: 1px solid var(--narsil-pricing-border-default); } .narsil-scenario-column__head h4 { font-size: var(--narsil-pricing-fs-base); font-weight: var(--narsil-pricing-fw-extrabold); } .narsil-scenario-column__head > span { color: var(--narsil-pricing-text-tertiary); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-2xs); white-space: nowrap; } .narsil-scenario-list { display: grid; gap: var(--narsil-pricing-space-3); margin-block-start: var(--narsil-pricing-space-4); padding: 0; list-style: none; } .narsil-scenario-list li { display: grid; grid-template-columns: 7rem 1fr; gap: var(--narsil-pricing-space-3); } .narsil-scenario-list code { color: var(--narsil-pricing-text-accent); font-size: var(--narsil-pricing-fs-2xs); font-weight: var(--narsil-pricing-fw-bold); letter-spacing: var(--narsil-pricing-tracking-wide); } .narsil-scenario-list span { color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-xs); line-height: var(--narsil-pricing-lh-snug); } .narsil-accelerator-card { display: grid; gap: var(--narsil-pricing-space-4); padding: var(--narsil-pricing-space-7); border: 1px solid var(--narsil-pricing-border-strong); border-block-start: 3px solid var(--narsil-pricing-accent); border-radius: var(--narsil-pricing-radius-md); background: var(--narsil-pricing-surface); } .narsil-accelerator-card > span { color: var(--narsil-pricing-text-tertiary); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-3xs); font-weight: var(--narsil-pricing-fw-bold); letter-spacing: var(--narsil-pricing-tracking-caps); } .narsil-accelerator-card h3 { font-size: var(--narsil-pricing-fs-lg); } .narsil-accelerator-card dl { display: grid; } .narsil-accelerator-card dl > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--narsil-pricing-space-3); padding-block: var(--narsil-pricing-space-3); border-block-start: 1px solid var(--narsil-pricing-border-subtle); } .narsil-accelerator-card dt { color: var(--narsil-pricing-text-tertiary); font-size: var(--narsil-pricing-fs-2xs); font-weight: var(--narsil-pricing-fw-bold); letter-spacing: var(--narsil-pricing-tracking-wide); } .narsil-accelerator-card dd { color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-xs); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-accelerator-card__outcome { padding: var(--narsil-pricing-space-4); border: 1px solid var(--narsil-pricing-border-default); border-radius: var(--narsil-pricing-radius-sm); background: var(--narsil-pricing-accent-subtle); color: var(--narsil-pricing-text-primary); font-size: var(--narsil-pricing-fs-sm); font-weight: var(--narsil-pricing-fw-semibold); line-height: var(--narsil-pricing-lh-relaxed); } /* ── 驗收與治理 ──────────────────────────────────────────── */ .narsil-acceptance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-block-start: var(--narsil-pricing-space-12); padding: 1px; background: var(--narsil-pricing-border-default); list-style: none; } .narsil-acceptance-grid li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--narsil-pricing-space-4); padding: var(--narsil-pricing-space-6); background: var(--narsil-pricing-surface-raised); } .narsil-acceptance-grid b { color: var(--narsil-pricing-text-accent); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-xs); } .narsil-acceptance-grid span { color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-limits-panel { margin-block-start: var(--narsil-pricing-space-10); padding: var(--narsil-pricing-space-8); border: 1px solid var(--narsil-pricing-border-strong); border-inline-start: 4px solid var(--narsil-pricing-danger); border-radius: var(--narsil-pricing-radius-sm); background: var(--narsil-pricing-surface-raised); } .narsil-limits-panel h3 { font-size: var(--narsil-pricing-fs-xl); } .narsil-limits-panel > p { margin-block-start: var(--narsil-pricing-space-4); color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-limits-panel ul { display: grid; grid-template-columns: 1fr 1fr; gap: var(--narsil-pricing-space-3) var(--narsil-pricing-space-8); margin-block-start: var(--narsil-pricing-space-6); padding: 0; list-style: none; } .narsil-limits-panel li { position: relative; padding-inline-start: var(--narsil-pricing-space-6); color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-limits-panel li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.68em; width: var(--narsil-pricing-space-3); height: 2px; background: var(--narsil-pricing-danger); } .narsil-tenancy-card { margin-block-start: var(--narsil-pricing-space-10); padding: var(--narsil-pricing-space-7); border: 1px solid var(--narsil-pricing-border-default); border-radius: var(--narsil-pricing-radius-sm); background: var(--narsil-pricing-surface-raised); } .narsil-tenancy-card > span { color: var(--narsil-pricing-text-tertiary); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-3xs); font-weight: var(--narsil-pricing-fw-bold); letter-spacing: var(--narsil-pricing-tracking-caps); } .narsil-tenancy-card h3 { margin-block-start: var(--narsil-pricing-space-3); font-size: var(--narsil-pricing-fs-lg); } .narsil-tenancy-card > p { margin-block-start: var(--narsil-pricing-space-4); color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-fit-card { display: grid; gap: var(--narsil-pricing-space-3); padding: var(--narsil-pricing-space-7); border: 1px solid var(--narsil-pricing-border-default); border-radius: var(--narsil-pricing-radius-sm); background: var(--narsil-pricing-surface); } .narsil-fit-card > span { color: var(--narsil-pricing-text-tertiary); font-family: var(--narsil-pricing-font-mono); font-size: var(--narsil-pricing-fs-3xs); font-weight: var(--narsil-pricing-fw-bold); letter-spacing: var(--narsil-pricing-tracking-caps); } .narsil-fit-card > p { color: var(--narsil-pricing-text-secondary); font-size: var(--narsil-pricing-fs-sm); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-fit-card > strong { color: var(--narsil-pricing-text-primary); font-size: var(--narsil-pricing-fs-base); } .narsil-fit-card > a { min-height: var(--narsil-pricing-tap-min); display: inline-flex; align-items: center; font-size: var(--narsil-pricing-fs-sm); font-weight: var(--narsil-pricing-fw-bold); } /* ── 響應式 ──────────────────────────────────────────────── */ @media (max-width: 70rem) { .narsil-batch-board { grid-template-columns: 1fr; padding: var(--narsil-pricing-space-6); } .narsil-batch-rail, .narsil-batch-flow { margin-block-start: var(--narsil-pricing-space-6); } .narsil-batch-board::before { position: static; display: block; margin-block-end: var(--narsil-pricing-space-2); text-align: end; } .narsil-acceptance-grid { grid-template-columns: repeat(2, 1fr); } .narsil-principle-panel { grid-template-columns: 1fr; gap: var(--narsil-pricing-space-6); } .narsil-industry-block__head { grid-template-columns: 1fr; align-items: start; } } @media (max-width: 56rem) { .narsil-batch-lane, .narsil-batch-lane--pair { grid-template-columns: 1fr; } .narsil-limits-panel ul { grid-template-columns: 1fr; } } @media (max-width: 40rem) { .narsil-acceptance-grid { grid-template-columns: 1fr; } .narsil-batch-board { padding: var(--narsil-pricing-space-4); } .narsil-batch-stage { padding: var(--narsil-pricing-space-4); } .narsil-accelerator-card dl > div { grid-template-columns: 1fr; } .narsil-scenario-list li { grid-template-columns: 1fr; gap: var(--narsil-pricing-space-1); } .narsil-principle-panel { padding: var(--narsil-pricing-space-6); } .narsil-limits-panel { padding: var(--narsil-pricing-space-6); } .narsil-data-table th, .narsil-data-table td { padding: var(--narsil-pricing-space-3) var(--narsil-pricing-space-4); } } .narsil-section-heading--spaced { margin-block-start: var(--narsil-pricing-space-32); } @media (max-width: 56rem) { .narsil-section-heading--spaced { margin-block-start: var(--narsil-pricing-space-24); } } /* 中文標題在大字級下的行數控制：桌機／平板降一階字級，行動版沿用既有 40rem 斷點設定 */ @media (min-width: 40.0625rem) { .narsil-hero h1 { font-size: clamp(var(--narsil-pricing-fs-4xl), 5.4vw, var(--narsil-pricing-fs-6xl)); } } /* ── 修正與微調 ──────────────────────────────────────────── */ /* 反白層的說明文字原本套到 .narsil-value-layer > strong 的 --narsil-pricing-text-secondary，在深色底上對比不足 */ .narsil-value-layer--harness > strong { color: var(--narsil-pricing-text-on-inverse); } /* 反白層的小標與層級編號原本寫在 .narsil-value-layer--harness p（第 876 行附近）， 但同特異度 (0,1,1) 的 .narsil-value-layer p 排在後面，依層疊順序後者勝出， 深色底上的標籤實際吃到的是淺色主題的 text-tertiary，對比僅 3.37。 在此以相同特異度、更後面的位置補回原本的設計意圖（金屬色，對比 7.6）。 */ .narsil-value-layer--harness p { color: var(--narsil-pricing-accent); } /* 表格圖說移出橫向捲動容器，行動裝置才不會被 min-width 推出畫面 */ .narsil-table-figure { margin-block-start: var(--narsil-pricing-space-12); } .narsil-table-figure .narsil-table-frame { margin-block-start: 0; } .narsil-table-figure figcaption { margin-block-start: var(--narsil-pricing-space-4); color: var(--narsil-pricing-text-tertiary); font-size: var(--narsil-pricing-fs-xs); line-height: var(--narsil-pricing-lh-relaxed); } .narsil-table-figure__hint { display: none; } @media (max-width: 56rem) { .narsil-table-figure__hint { display: block; margin-block-start: var(--narsil-pricing-space-2); } } /* 方案對照表橫向捲動時，比較項目那一欄固定在左側 */ .narsil-data-table--compare thead th:first-child, .narsil-data-table--compare tbody th { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--narsil-pricing-surface-raised); box-shadow: 1px 0 0 var(--narsil-pricing-border-subtle); } /* 14 項驗收清單在三欄版面時，最後一項補滿整列 */ @media (min-width: 70.0625rem) { .narsil-acceptance-grid > li:last-child { grid-column: span 2; } } /* 三張加速器卡的標題行數不同，預留兩行高度讓下方欄位對齊 */ .narsil-accelerator-card h3 { min-block-size: calc(var(--narsil-pricing-fs-lg) * 2 * var(--narsil-pricing-lh-tight)); } /* ============================================================================ * 收尾：字級放大後仍然過擠的縫隙 * ---------------------------------------------------------------------------- * 間距要隨字級等比放大。以下是量測後仍低於「內距 1.25em／段落間距 0.6em」 * 判準的項目，逐一補足。token 的值不動（space-5 就該是 20px）， * 改的是「哪條規則用哪個 token」。 * ========================================================================== */ /* eyebrow 與其後的清單原本零間距，標籤會黏在第一個項目上 */ .narsil-eyebrow + ul, .narsil-eyebrow + ol { margin-block-start: var(--narsil-pricing-space-5); } /* 結尾 CTA：72px 的大標題只配 24px 的下緣，壓在段落上 */ .narsil-final-cta h2 + p { margin-block-start: var(--narsil-pricing-space-7); } /* 批次流程圖的 fabric 標籤與其後的區塊 */ .narsil-batch-fabric + div { margin-block-start: var(--narsil-pricing-space-3); }