/* ========================================================================== Board Foot Calculator — 全站主样式 设计体系：基于 IBM Carbon（直角 0px、1px 发丝线、4px 网格、Plex Sans） 品牌适配：强调色由 IBM Blue 改为暖木色 timber amber，贴合木材/木工调性 原则：Mobile-First（基础样式即移动端，媒体查询向上扩展桌面） 注：本文件为异步加载的完整样式；首屏关键 CSS 内联在各页 ========================================================================== */ /* ------------------------------------------------------------------------- 字体（自托管 IBM Plex Sans，latin 子集，font-display: swap 防 FOIT） ------------------------------------------------------------------------- */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/ibm-plex-sans-300.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/ibm-plex-sans-400.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/ibm-plex-sans-600.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/ibm-plex-sans-700.woff2') format('woff2'); } /* ------------------------------------------------------------------------- 设计令牌（CSS 变量） ------------------------------------------------------------------------- */ :root { /* 表面与文字（Carbon 灰阶） */ --canvas: #ffffff; --surface-1: #f4f4f4; --surface-2: #e0e0e0; --hairline: #e0e0e0; --hairline-strong: #161616; --ink: #161616; --ink-muted: #525252; --ink-subtle: #6f6f6f; --inverse-canvas: #161616; --inverse-surface-1: #262626; --inverse-ink: #ffffff; --inverse-ink-muted: #c6c6c6; /* 品牌强调色：暖木 timber amber（单一强调色，对比度达标） */ --accent: #9a4d12; /* 主强调，AA on white */ --accent-hover: #7d3e0e; --accent-pressed: #5f2f0a; --accent-soft: #f6ede4; /* 浅木色背景块 */ --accent-ink: #ffffff; /* 强调色上的文字 */ /* 语义色 */ --success: #198038; --warning: #8a6d00; /* 加深以满足正文对比度 */ --warning-bg: #fcf4d6; --error: #da1e28; --info: #0f62fe; /* 字号阶梯 */ --fs-display-xl: clamp(2rem, 6vw, 3.25rem); /* 32 → 52px */ --fs-display-lg: clamp(1.75rem, 4.5vw, 2.5rem); --fs-display-md: clamp(1.5rem, 3.5vw, 2rem); --fs-headline: 1.5rem; /* 24 */ --fs-card-title: 1.25rem; /* 20 */ --fs-subhead: 1.1875rem; /* 19 */ --fs-body-lg: 1.125rem; /* 18 */ --fs-body: 1.0625rem; /* 17，移动端正文 ≥17px */ --fs-body-sm: 0.9375rem; /* 15 */ --fs-caption: 0.8125rem; /* 13 */ /* 间距（4px 网格） */ --sp-xxs: 4px; --sp-xs: 8px; --sp-sm: 12px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px; --sp-xxl: 48px; --sp-section: 64px; --maxw: 1140px; /* 页头/页脚整宽 */ --maxw-content: 1040px; /*
内模块列宽（卡片/表格/计算器/图/广告，居中对齐） */ --maxw-prose: 1040px; /* 正文文字行宽与内容列一致（PC 端不再单独收窄） */ --radius: 0px; /* Carbon 直角 */ --touch: 48px; /* 触摸目标最小尺寸 */ --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } /* ------------------------------------------------------------------------- 重置与基础 ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 400; line-height: 1.6; letter-spacing: 0.16px; /* Carbon 精度细节 */ color: var(--ink); background: var(--canvas); overflow-x: hidden; /* 禁止横向滚动 */ -webkit-font-smoothing: antialiased; } img, picture, svg, canvas { max-width: 100%; height: auto; display: block; } svg { fill: currentColor; } h1, h2, h3, h4 { color: var(--ink); margin: 0 0 var(--sp-md); letter-spacing: 0; } h1 { font-size: var(--fs-display-xl); font-weight: 300; line-height: 1.15; } h2 { font-size: var(--fs-display-md); font-weight: 300; line-height: 1.2; margin-top: var(--sp-xl); } h3 { font-size: var(--fs-card-title); font-weight: 600; line-height: 1.3; margin-top: var(--sp-lg); } h4 { font-size: var(--fs-body-lg); font-weight: 600; line-height: 1.4; } p { margin: 0 0 var(--sp-md); } ul, ol { margin: 0 0 var(--sp-md); padding-left: 1.25rem; } li { margin-bottom: var(--sp-xs); } a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--accent-hover); } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } strong { font-weight: 600; } hr { border: none; border-top: 1px solid var(--hairline); margin: var(--sp-xl) 0; } :target { scroll-margin-top: 80px; } /* 无障碍：跳过导航 */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: var(--sp-sm) var(--sp-md); z-index: 1000; } .skip-link:focus { left: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------------- 布局容器 ------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-md); } /* 模块列宽：
内所有容器（含 .container.prose）与面包屑共享同一列宽并居中， 令卡片网格/表格/图/计算器/广告/相关阅读自上而下模块同宽且左边缘对齐；页头与页脚保持整宽。 */ main .container, .container:has(> .breadcrumb) { max-width: var(--maxw-content); } /* 正文文字行宽与内容列一致；保留选择器是为了让内联关键 CSS 与主样式同源，后续如需调整只改令牌。 */ .prose p, .prose li, .prose dd, .prose blockquote, .prose details > div > p { max-width: var(--maxw-prose); } .section { padding: var(--sp-xl) 0; } .section--alt { background: var(--surface-1); } .section--dark { background: var(--inverse-canvas); color: var(--inverse-ink-muted); } .eyebrow { font-size: var(--fs-body-sm); color: var(--accent); margin: 0 0 var(--sp-xs); font-weight: 600; } /* ------------------------------------------------------------------------- 顶部导航 ------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--canvas); border-bottom: 1px solid var(--hairline); } .nav { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: var(--sp-md); } .brand { display: inline-flex; align-items: center; gap: var(--sp-xs); font-weight: 600; font-size: var(--fs-body); color: var(--ink); text-decoration: none; letter-spacing: 0; } .brand__mark { width: 28px; height: 28px; flex: 0 0 28px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; } .nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--touch); height: var(--touch); background: none; border: 1px solid var(--hairline); color: var(--ink); cursor: pointer; } .nav__menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--canvas); border-bottom: 1px solid var(--hairline); display: none; flex-direction: column; padding: var(--sp-xs) 0; } .nav__menu.is-open { display: flex; } .nav__menu a { color: var(--ink); text-decoration: none; padding: var(--sp-sm) var(--sp-md); min-height: var(--touch); display: flex; align-items: center; border-bottom: 1px solid var(--hairline); } .nav__menu a:hover { background: var(--surface-1); } @media (min-width: 900px) { .nav__toggle { display: none; } .nav__menu { position: static; display: flex; flex-direction: row; border: none; padding: 0; gap: var(--sp-xs); } .nav__menu a { border: none; padding: var(--sp-xs) var(--sp-sm); min-height: auto; } .nav__menu a:hover { background: transparent; color: var(--accent); } } /* ------------------------------------------------------------------------- 面包屑 ------------------------------------------------------------------------- */ .breadcrumb { padding: var(--sp-sm) 0; font-size: var(--fs-body-sm); } .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-xs); margin: 0; padding: 0; } .breadcrumb li { margin: 0; color: var(--ink-muted); } .breadcrumb li + li::before { content: "/"; margin-right: var(--sp-xs); color: var(--ink-subtle); } .breadcrumb a { color: var(--ink-muted); } .breadcrumb [aria-current="page"] { color: var(--ink); } /* ------------------------------------------------------------------------- Hero ------------------------------------------------------------------------- */ .hero { padding: var(--sp-lg) 0 var(--sp-md); } .hero h1 { margin-bottom: var(--sp-sm); } /* 工具/换算页：收紧 hero 与紧随其后的计算器区块间距，使计算器落在首屏 */ .hero + .section { padding-top: var(--sp-sm); } .hero__lead { font-size: var(--fs-body-lg); color: var(--ink-muted); max-width: var(--maxw-prose); } .trust-bar { display: flex; gap: var(--sp-xs); align-items: flex-start; background: var(--accent-soft); border-left: 3px solid var(--accent); padding: var(--sp-sm) var(--sp-md); margin: var(--sp-md) 0 0; font-size: var(--fs-body-sm); } .trust-bar a { font-weight: 600; } /* ------------------------------------------------------------------------- 按钮 ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-xs); min-height: var(--touch); padding: var(--sp-sm) var(--sp-lg); font-family: inherit; font-size: var(--fs-body); font-weight: 600; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; text-decoration: none; letter-spacing: 0; transition: background-color .12s ease, color .12s ease; } .btn--primary { background: var(--accent); color: var(--accent-ink); } .btn--primary:hover { background: var(--accent-hover); color: #fff; } .btn--primary:active { background: var(--accent-pressed); } .btn--secondary { background: var(--ink); color: #fff; } .btn--secondary:hover { background: #000; color: #fff; } .btn--tertiary { background: var(--canvas); color: var(--accent); border-color: var(--accent); } .btn--tertiary:hover { background: var(--accent-soft); } .btn--ghost { background: transparent; color: var(--accent); padding-left: 0; padding-right: 0; } .btn--block { width: 100%; } .btn--sm { min-height: 40px; padding: var(--sp-xs) var(--sp-md); font-size: var(--fs-body-sm); } /* ------------------------------------------------------------------------- 卡片网格 ------------------------------------------------------------------------- */ .grid { display: grid; gap: var(--sp-md); grid-template-columns: 1fr; } @media (min-width: 600px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } } .card { background: var(--canvas); border: 1px solid var(--hairline); padding: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-xs); } .card--link { text-decoration: none; color: var(--ink); transition: background-color .12s ease, border-color .12s ease; } .card--link:hover { background: var(--surface-1); border-color: var(--ink-subtle); color: var(--ink); } .card h3 { margin: 0; font-size: var(--fs-card-title); } .card p { margin: 0; color: var(--ink-muted); font-size: var(--fs-body-sm); } .card__icon { width: 32px; height: 32px; color: var(--accent); } .card__cta { margin-top: auto; color: var(--accent); font-weight: 600; font-size: var(--fs-body-sm); } /* ------------------------------------------------------------------------- 表格（速查表/规格表） ------------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--sp-md) 0; } table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); } caption { text-align: left; color: var(--ink-muted); font-size: var(--fs-caption); margin-bottom: var(--sp-xs); } th, td { padding: var(--sp-sm); border: 1px solid var(--hairline); text-align: left; } thead th { background: var(--surface-1); font-weight: 600; } tbody tr:nth-child(even) { background: var(--surface-1); } .spec-table th { width: 40%; background: var(--surface-1); } /* ------------------------------------------------------------------------- 计算器组件 ------------------------------------------------------------------------- */ .calc { border: 1px solid var(--hairline); background: var(--canvas); } .calc__head { padding: var(--sp-md); border-bottom: 1px solid var(--hairline); background: var(--surface-1); } .calc__body { padding: var(--sp-md); } .calc__result { padding: var(--sp-md); border-top: 1px solid var(--hairline); background: var(--accent-soft); } .mode-switch { display: flex; flex-wrap: wrap; gap: var(--sp-xxs); } .mode-switch button { flex: 1 1 auto; min-height: var(--touch); min-width: 90px; background: var(--canvas); border: 1px solid var(--hairline); color: var(--ink-muted); font-family: inherit; font-size: var(--fs-body-sm); cursor: pointer; font-weight: 600; } .mode-switch button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); } .presets { display: flex; flex-wrap: wrap; gap: var(--sp-xxs); margin: var(--sp-sm) 0; } .chip { min-height: 40px; padding: var(--sp-xs) var(--sp-sm); background: var(--surface-1); border: 1px solid var(--hairline); color: var(--ink); font-family: inherit; font-size: var(--fs-body-sm); cursor: pointer; } .chip:hover { background: var(--surface-2); } .field { display: flex; flex-direction: column; gap: var(--sp-xxs); margin-bottom: var(--sp-sm); } .field label { font-size: var(--fs-body-sm); font-weight: 600; } .field .hint { font-size: var(--fs-caption); color: var(--ink-muted); font-weight: 400; } input, select { font-family: inherit; font-size: var(--fs-body); min-height: var(--touch); padding: var(--sp-xs) var(--sp-sm); background: var(--surface-1); color: var(--ink); border: none; border-bottom: 1px solid var(--ink-subtle); border-radius: 0; width: 100%; } input:focus, select:focus { outline: none; border-bottom: 2px solid var(--accent); background: #fff; } /* 切割清单行（移动端单手可操作） */ .cutlist { display: flex; flex-direction: column; gap: var(--sp-sm); } .cutrow { display: grid; gap: var(--sp-xs); grid-template-columns: 1fr 1fr; align-items: end; border: 1px solid var(--hairline); padding: var(--sp-sm); } .cutrow .field { margin: 0; } .cutrow__del { grid-column: 1 / -1; min-height: var(--touch); background: var(--canvas); border: 1px solid var(--hairline); color: var(--error); cursor: pointer; font-family: inherit; font-weight: 600; } @media (min-width: 700px) { .cutrow { grid-template-columns: 0.7fr 1fr 1fr 1.3fr 1fr auto; } .cutrow__del { grid-column: auto; } } .result-grid { display: grid; gap: var(--sp-sm); grid-template-columns: repeat(2, 1fr); } .result-grid .stat { background: #fff; border: 1px solid var(--hairline); padding: var(--sp-sm); } .stat__label { font-size: var(--fs-caption); color: var(--ink-muted); display: block; } .stat__value { font-size: var(--fs-headline); font-weight: 600; font-variant-numeric: tabular-nums; } .stat--accent .stat__value { color: var(--accent); } .species-summary__title { margin-top: var(--sp-lg); font-weight: 600; color: var(--ink); } /* 安全余量微文案 */ .waste-note { font-size: var(--fs-caption); color: var(--ink-muted); margin-top: var(--sp-xxs); } /* BF/LF/SF 对比条 */ .compare { display: flex; flex-direction: column; gap: var(--sp-sm); margin: var(--sp-md) 0; } .compare__row { display: grid; grid-template-columns: 120px 1fr auto; gap: var(--sp-sm); align-items: center; } .compare__bar { height: 16px; background: var(--accent); min-width: 2px; } .compare__bar--lf { background: var(--ink); } .compare__bar--sf { background: var(--ink-subtle); } /* ------------------------------------------------------------------------- 提示框（行业规则/防坑说明） ------------------------------------------------------------------------- */ .callout { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: var(--sp-md); margin: var(--sp-md) 0; } .callout--warn { border-left-color: var(--warning); background: var(--warning-bg); } .callout--info { border-left-color: var(--info); background: #edf3ff; } .callout p:last-child { margin-bottom: 0; } .callout strong { display: block; margin-bottom: var(--sp-xxs); } /* ------------------------------------------------------------------------- FAQ（details/summary） ------------------------------------------------------------------------- */ .faq { margin: var(--sp-md) 0; } .faq details { border: 1px solid var(--hairline); margin-bottom: var(--sp-xs); background: var(--canvas); } .faq summary { list-style: none; cursor: pointer; padding: var(--sp-md); font-weight: 600; min-height: var(--touch); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; line-height: 1; } .faq details[open] summary::after { content: "−"; } .faq details > div { padding: 0 var(--sp-md) var(--sp-md); color: var(--ink-muted); } .faq details > div > *:first-child { margin-top: 0; } /* ------------------------------------------------------------------------- 作者 / E-E-A-T 区 ------------------------------------------------------------------------- */ .author { display: flex; gap: var(--sp-md); align-items: flex-start; border: 1px solid var(--hairline); padding: var(--sp-lg); background: var(--surface-1); } .author__avatar { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.25rem; } .author__name { font-weight: 600; margin: 0; } .author__role { color: var(--ink-muted); font-size: var(--fs-body-sm); margin: 0 0 var(--sp-xs); } .author__bio { font-size: var(--fs-body-sm); color: var(--ink-muted); margin: 0; } /* 文章元信息 */ .meta { font-size: var(--fs-body-sm); color: var(--ink-muted); margin-bottom: var(--sp-md); } .meta a { color: var(--ink-muted); } /* 相关阅读 */ .related { margin-top: var(--sp-xl); } /* ------------------------------------------------------------------------- 广告位（无固定宽高，min-height 防 CLS，未填充自动隐藏） ------------------------------------------------------------------------- */ .ad-slot { margin: var(--sp-xl) 0; min-height: 280px; display: flex; align-items: center; justify-content: center; background: var(--surface-1); border: 1px dashed var(--hairline); contain: layout style; content-visibility: auto; contain-intrinsic-size: auto 280px; } .ad-slot[data-filled="true"] { background: transparent; border: none; min-height: 0; contain: none; content-visibility: visible; } .ad-slot::before { content: "Advertisement"; font-size: var(--fs-caption); color: var(--ink-subtle); } .ad-slot[data-filled="true"]::before { content: none; } .ad-slot ins { display: block; width: 100%; min-height: 280px; } /* ------------------------------------------------------------------------- 页脚 ------------------------------------------------------------------------- */ .site-footer { background: var(--inverse-canvas); color: var(--inverse-ink-muted); padding: var(--sp-section) 0 var(--sp-xl); margin-top: var(--sp-section); } .site-footer h2, .site-footer h3 { color: var(--inverse-ink); } .footer-grid { display: grid; gap: var(--sp-lg); grid-template-columns: 1fr; } .footer-col--brand { border-bottom: 1px solid var(--inverse-surface-1); padding-bottom: var(--sp-lg); } @media (min-width: 560px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-col--brand { grid-column: 1 / -1; } } @media (min-width: 900px) { .footer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .footer-col--brand { grid-column: 1 / -1; } } .site-footer a { color: var(--inverse-ink-muted); text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } .footer-col h3 { font-size: var(--fs-body); margin-bottom: var(--sp-sm); } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col li { margin-bottom: var(--sp-xs); } .footer-bottom { border-top: 1px solid var(--inverse-surface-1); margin-top: var(--sp-xl); padding-top: var(--sp-md); font-size: var(--fs-caption); color: var(--inverse-ink-muted); } /* ------------------------------------------------------------------------- 工具类 ------------------------------------------------------------------------- */ .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .lead { font-size: var(--fs-body-lg); color: var(--ink-muted); } .tag { display: inline-block; font-size: var(--fs-caption); background: var(--surface-2); padding: 2px 8px; color: var(--ink); } /* ------------------------------------------------------------------------- 打印样式（干净 PDF：隐藏导航/页脚/广告/操作按钮） ------------------------------------------------------------------------- */ @media print { .site-header, .site-footer, .ad-slot, .nav, .breadcrumb, .trust-bar, .presets, .mode-switch, .cutrow__del, #add-row, #btn-csv, #btn-print, #btn-clear, .related { display: none !important; } body { color: #000; font-size: 12pt; } .calc, .card, .stat { border-color: #999 !important; } a { color: #000; text-decoration: none; } .section { padding: 0; } } /* 减少动画偏好 */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }