/* Theme Name: GemDisk Child Theme URI: https://gemdisk.com Description: GemDisk 官方子主题 —— 设计令牌、基础排版、页头页脚与组件样式。父主题：Hello Elementor。 Author: GemDisk Template: hello-elementor Version: 0.1.0 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v3 or later. Text Domain: gemdisk */ /* ============================================================================ 0. 设计令牌（Design Tokens） —— 全站唯一真源。改颜色、改字体、改间距，只改这一段。 —— 页面 HTML 里永远不要写死色值，只用 var(--gd-*)。 ========================================================================= */ :root{ /* ---------- 颜色 · 方案 A「Sapphire 蓝宝石」 ---------- */ --gd-bg: #ffffff; /* 页面底 */ --gd-bg-alt: #f5f5f7; /* 区块底（交替） */ --gd-card: #ffffff; /* 卡片底 */ --gd-text: #1d1d1f; /* 主文字 */ --gd-text-2: #6e6e73; /* 次文字 */ --gd-text-3: #86868b; /* 弱文字 / 小注 */ --gd-line: #d2d2d7; /* 分隔线 */ --gd-line-soft: #e5e5ea; /* 卡片描边 */ --gd-brand: #0b63f6; /* 主色：CTA / 链接 / 强调 */ --gd-brand-hover: #0950cc; --gd-brand-soft: #eaf2ff; /* 主色浅底（高亮块） */ --gd-brand-ink: #ffffff; /* 主色上的文字 */ --gd-accent: #00c2d1; /* 副色：数据 / 图标 */ --gd-accent-soft: #e6fafc; --gd-ok: #00a86b; --gd-warn: #ff9f0a; --gd-err: #e5484d; /* WhatsApp —— 保留在调色板里备用（本主题不产出使用它的规则，见第 7 节） 官方绿 #25d366 一眼可识别；⚠️ 白字压它的对比度约 2.5:1， 不满足 WCAG AA 正文标准，若要走无障碍审计可换成 #128c4b（4.6:1）。 */ --gd-wa: #25d366; --gd-wa-hover: #1eb955; /* ---------- 页头配色 ---------- */ /* 深色页头（默认，对标工业风条形头）。 要切浅色：把下面 4 行换成注释里那组，同时把 header.php 里的 GEMDISK_HEADER_DARK 改成 false（Logo 占位图也要跟着换）。 */ --gd-header-bg: #16181d; --gd-header-ink: #ffffff; --gd-header-muted: rgba(255,255,255,.72); --gd-header-line: rgba(255,255,255,.10); /* 浅色版： --gd-header-bg:#ffffff; --gd-header-ink:#1d1d1f; --gd-header-muted:#6e6e73; --gd-header-line:#e5e5ea; */ /* ---------- 字体 ---------- */ --gd-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans", sans-serif; /* 等宽：用于型号、容量、TBW 等技术数字，让规格表对齐好看 */ --gd-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; /* ---------- 字号阶梯（1.25 比例，基准 16px；标题用 clamp 做流式缩放） ---------- */ --gd-fs-xs: 12.5px; --gd-fs-sm: 14px; --gd-fs-base: 16px; --gd-fs-md: 18px; --gd-fs-h4: 20px; --gd-fs-h3: 25px; --gd-fs-h2: clamp(24px, 3.2vw, 31px); --gd-fs-h1: clamp(28px, 4.4vw, 39px); --gd-fs-hero: clamp(30px, 5.4vw, 49px); /* ---------- 行高 / 字重 / 字距 ---------- */ --gd-lh-tight: 1.15; --gd-lh-snug: 1.35; --gd-lh-base: 1.6; --gd-fw-normal: 400; --gd-fw-med: 500; --gd-fw-semi: 600; --gd-fw-bold: 700; --gd-ls-tight: -0.02em; /* 大标题收紧一点，像苹果 */ --gd-ls-wide: 0.08em; /* eyebrow 小标签拉开 */ /* ---------- 间距阶梯（8px 基准） ---------- */ --gd-sp-1: 4px; --gd-sp-2: 8px; --gd-sp-3: 12px; --gd-sp-4: 16px; --gd-sp-5: 24px; --gd-sp-6: 32px; --gd-sp-7: 48px; --gd-sp-8: 64px; --gd-sp-9: 96px; /* ---------- 圆角 ---------- */ --gd-r-sm: 8px; --gd-r-md: 12px; --gd-r-lg: 16px; --gd-r-xl: 20px; --gd-r-pill: 999px; /* ---------- 容器与留白 ---------- */ --gd-container: 1120px; /* 常规内容最大宽 */ --gd-container-text: 800px; /* 长文正文最大宽（与 theme.json contentSize 一致） */ --gd-gutter: 24px; /* 左右留白（移动端收窄到 20px） */ --gd-header-h: 68px; /* ---------- 阴影 / 动效 ---------- */ --gd-shadow-sm: 0 1px 2px rgba(0,0,0,.05); --gd-shadow-md: 0 6px 24px rgba(0,0,0,.07); --gd-ease: cubic-bezier(.4,0,.2,1); /* ---------- 断点（仅作文档；CSS 变量在 media query 里不可用） ---------- sm 640 · md 768 · lg 900（页头切换点） · xl 1200 --------------------------------------------------------------------- */ } /* ============================================================================ 1. 基础（Base） ========================================================================= */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; /* 页头是 sticky 的。不加这句，页面内锚点（比如 FAQ 的 #faq）跳过去后， 标题会被页头挡住一截 —— 这是 sticky 页头的标准配套修复。 */ scroll-padding-top:calc(var(--gd-header-h) + var(--gd-sp-4)); } body{ margin:0; background:var(--gd-bg); color:var(--gd-text); font-family:var(--gd-font); font-size:var(--gd-fs-base); line-height:var(--gd-lh-base); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* 标题：收紧字距 + 紧凑行高 */ h1,h2,h3,h4,h5,h6{ margin:0 0 var(--gd-sp-4); font-weight:var(--gd-fw-semi); line-height:var(--gd-lh-tight); letter-spacing:var(--gd-ls-tight); color:var(--gd-text); } h1{ font-size:var(--gd-fs-h1); } h2{ font-size:var(--gd-fs-h2); } h3{ font-size:var(--gd-fs-h3); } h4{ font-size:var(--gd-fs-h4); } h5,h6{ font-size:var(--gd-fs-md); } p{ margin:0 0 var(--gd-sp-4); } p:last-child{ margin-bottom:0; } a{ color:var(--gd-brand); text-decoration:none; transition:color .15s var(--gd-ease); } a:hover{ color:var(--gd-brand-hover); } strong,b{ font-weight:var(--gd-fw-semi); } /* 图片：响应式基线。手写 时务必同时给 width/height 属性防抖动 */ img{ max-width:100%; height:auto; display:block; } ul,ol{ margin:0 0 var(--gd-sp-4); padding-left:1.25em; } li{ margin:var(--gd-sp-1) 0; } hr{ border:0; border-top:1px solid var(--gd-line-soft); margin:var(--gd-sp-7) 0; } /* 键盘可达性：只在键盘导航时显示焦点环 */ :focus-visible{ outline:2px solid var(--gd-brand); outline-offset:2px; border-radius:var(--gd-r-sm); box-shadow:none; } :focus:not(:focus-visible){ outline:none; } /* 屏幕阅读器专用（父主题 reset.css 也有，这里兜底） */ .screen-reader-text{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ============================================================================ 2. 布局骨架（Layout） ========================================================================= */ .gd-container{ width:100%; max-width:var(--gd-container); margin-inline:auto; padding-inline:var(--gd-gutter); } .gd-container--text{ max-width:var(--gd-container-text); } /* 区块：上下大留白。交替用 .gd-section--alt 铺浅灰底 */ .gd-section{ padding-block:var(--gd-sp-9); } .gd-section--alt{ background:var(--gd-bg-alt); } .gd-section--tight{ padding-block:var(--gd-sp-7); } @media (max-width:768px){ :root{ --gd-gutter:20px; --gd-sp-9:64px; --gd-sp-8:48px; } .gd-section{ padding-block:var(--gd-sp-8); } } /* 小标签（eyebrow）：主色 + 拉开字距 + 大写 */ .gd-eyebrow{ display:block; margin-bottom:var(--gd-sp-3); color:var(--gd-brand); font-size:var(--gd-fs-xs); font-weight:var(--gd-fw-semi); letter-spacing:var(--gd-ls-wide); text-transform:uppercase; } .gd-lead{ font-size:var(--gd-fs-md); color:var(--gd-text-2); max-width:60ch; } .gd-muted{ color:var(--gd-text-2); } .gd-small{ font-size:var(--gd-fs-sm); color:var(--gd-text-3); } .gd-mono{ font-family:var(--gd-font-mono); font-variant-numeric:tabular-nums; } /* ============================================================================ 3. 按钮（Buttons） ========================================================================= */ .gd-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--gd-sp-2); font-family:inherit; font-size:var(--gd-fs-base); font-weight:var(--gd-fw-med); line-height:1; padding:13px 24px; border:1px solid transparent; border-radius:var(--gd-r-pill); cursor:pointer; text-align:center; white-space:nowrap; transition:background-color .15s var(--gd-ease), color .15s var(--gd-ease), border-color .15s var(--gd-ease), transform .1s var(--gd-ease); } .gd-btn:active{ transform:translateY(1px); } .gd-btn--primary{ background:var(--gd-brand); color:var(--gd-brand-ink); } .gd-btn--primary:hover{ background:var(--gd-brand-hover); color:var(--gd-brand-ink); } .gd-btn--ghost{ background:transparent; color:var(--gd-brand); border-color:var(--gd-brand); } .gd-btn--ghost:hover{ background:var(--gd-brand-soft); color:var(--gd-brand-hover); } .gd-btn--sm{ padding:9px 16px; font-size:var(--gd-fs-sm); } .gd-btn--lg{ padding:16px 32px; font-size:var(--gd-fs-md); } .gd-btn-row{ display:flex; flex-wrap:wrap; gap:var(--gd-sp-3); align-items:center; } /* 文字链（带箭头） */ .gd-link-arrow{ font-weight:var(--gd-fw-med); } .gd-link-arrow::after{ content:" →"; transition:margin-inline-start .15s var(--gd-ease); display:inline-block; } .gd-link-arrow:hover::after{ margin-inline-start:4px; } /* ============================================================================ 4. 卡片 / 数据条 / 徽标 / 表格 / CTA（组件） ========================================================================= */ /* --- 卡片 --- */ .gd-card{ display:block; height:100%; background:var(--gd-card); border:1px solid var(--gd-line-soft); border-radius:var(--gd-r-lg); padding:var(--gd-sp-5); transition:border-color .15s var(--gd-ease), box-shadow .15s var(--gd-ease), transform .15s var(--gd-ease); } a.gd-card:hover{ border-color:var(--gd-brand); box-shadow:var(--gd-shadow-md); transform:translateY(-2px); } .gd-card h3,.gd-card h4{ margin-bottom:var(--gd-sp-2); } .gd-card p{ color:var(--gd-text-2); font-size:var(--gd-fs-sm); } /* 卡片上的图标块（内联 SVG 或纯色块，不用图标字体） */ .gd-card__icon{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; margin-bottom:var(--gd-sp-4); border-radius:var(--gd-r-md); background:var(--gd-brand-soft); color:var(--gd-brand); } .gd-card__icon svg{ width:20px; height:20px; display:block; } /* --- 网格 --- */ .gd-grid{ display:grid; gap:var(--gd-sp-5); } .gd-grid--2{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); } .gd-grid--3{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .gd-grid--4{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); } /* --- 数据条（首页：成立年份｜月产能｜产线数…） --- */ .gd-stats{ display:grid; gap:var(--gd-sp-5) var(--gd-sp-7); grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); } .gd-stat__num{ font-family:var(--gd-font-mono); font-size:clamp(24px,3vw,32px); font-weight:var(--gd-fw-semi); line-height:1.1; letter-spacing:var(--gd-ls-tight); color:var(--gd-brand); font-variant-numeric:tabular-nums; } .gd-stat__label{ margin-top:var(--gd-sp-1); font-size:var(--gd-fs-xs); color:var(--gd-text-2); } /* --- 徽标 --- */ .gd-badge{ display:inline-block; padding:2px 9px; border-radius:var(--gd-r-pill); background:var(--gd-brand-soft); color:var(--gd-brand); font-size:11.5px; font-weight:var(--gd-fw-semi); letter-spacing:.01em; white-space:nowrap; } .gd-badge--ok{ background:#e6f7f0; color:#00875a; } .gd-badge--warn{ background:#fff4e0; color:#a35c00; } .gd-badge--accent{ background:var(--gd-accent-soft); color:#00838f; } /* --- 规格表（SSD 站最关键的一张表） --- */ .gd-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .gd-table{ width:100%; border-collapse:collapse; background:var(--gd-card); border:1px solid var(--gd-line-soft); border-radius:var(--gd-r-md); overflow:hidden; font-size:var(--gd-fs-sm); } .gd-table th,.gd-table td{ padding:11px 14px; text-align:left; vertical-align:top; border:0; /* 中和父主题 reset.css 的四边灰框 */ border-bottom:1px solid var(--gd-line-soft); } /* 中和父主题 reset.css 自带的斑马纹与 hover 底色，改用我们自己的 */ .gd-table tbody tr:nth-child(even) > td{ background:var(--gd-bg-alt); } .gd-table tbody tr:hover > td{ background:var(--gd-brand-soft); } .gd-table th{ background:var(--gd-bg); color:var(--gd-text); font-size:var(--gd-fs-xs); font-weight:var(--gd-fw-semi); letter-spacing:.02em; white-space:nowrap; } .gd-table tbody tr:last-child td{ border-bottom:0; } .gd-table td{ color:var(--gd-text-2); } .gd-table td strong{ color:var(--gd-text); font-weight:var(--gd-fw-med); } /* 型号 / 容量 / 温度 / TBW 用等宽对齐，工程师一眼扫得下去 */ .gd-table .gd-mono{ color:var(--gd-text); white-space:nowrap; /* 实测：不加会被断成 GD- / N4- / 256 三行（390px 下该列只有 79px 宽） */ } /* --- CTA 区块 --- */ .gd-cta{ display:flex; flex-wrap:wrap; gap:var(--gd-sp-5); align-items:center; justify-content:space-between; padding:var(--gd-sp-6); border-radius:var(--gd-r-xl); background:var(--gd-bg-alt); } .gd-cta__title{ font-size:var(--gd-fs-h4); font-weight:var(--gd-fw-semi); letter-spacing:var(--gd-ls-tight); } .gd-cta__sub{ margin-top:var(--gd-sp-1); font-size:var(--gd-fs-sm); color:var(--gd-text-2); } /* --- 提示条 --- */ .gd-note{ padding:var(--gd-sp-4) var(--gd-sp-5); border-radius:var(--gd-r-md); background:var(--gd-brand-soft); border-inline-start:3px solid var(--gd-brand); font-size:var(--gd-fs-sm); color:var(--gd-text); } /* --- 折叠面板（FAQ） --- */ .gd-acc{ border-top:1px solid var(--gd-line-soft); } .gd-acc details{ border-bottom:1px solid var(--gd-line-soft); } .gd-acc summary{ cursor:pointer; list-style:none; padding:var(--gd-sp-4) 0; font-weight:var(--gd-fw-med); color:var(--gd-text); display:flex; justify-content:space-between; gap:var(--gd-sp-4); } .gd-acc summary::-webkit-details-marker{ display:none; } .gd-acc summary::after{ content:"+"; color:var(--gd-brand); font-size:1.25em; line-height:1; } .gd-acc details[open] summary::after{ content:"–"; } .gd-acc .gd-acc__body{ padding-bottom:var(--gd-sp-4); color:var(--gd-text-2); font-size:var(--gd-fs-sm); } /* ============================================================================ 5. 页头（Header） ========================================================================= */ .gd-header{ position:sticky; top:0; z-index:50; background:var(--gd-header-bg); border-bottom:1px solid var(--gd-header-line); } /* 三栏网格：两侧各 1fr、中间 auto → 导航无论两侧多宽都精确居中 */ .gd-header__inner{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--gd-sp-4); max-width:var(--gd-container); margin-inline:auto; padding-inline:var(--gd-gutter); min-height:var(--gd-header-h); } .gd-brand{ justify-self:start; display:flex; align-items:center; min-width:0; } .gd-logo{ display:inline-flex; align-items:center; white-space:nowrap; font-size:20px; font-weight:var(--gd-fw-bold); letter-spacing:var(--gd-ls-tight); color:var(--gd-header-ink); } .gd-logo:hover{ color:var(--gd-header-ink); } .gd-logo img{ height:30px; width:auto; display:block; } .custom-logo-link{ display:inline-flex; align-items:center; } .custom-logo-link img{ height:30px; width:auto; max-height:30px; } .gd-nav{ justify-self:center; min-width:0; } .gd-nav__list{ display:flex; align-items:center; gap:var(--gd-sp-2); margin:0; padding:0; list-style:none; } .gd-nav__list li{ margin:0; position:relative; } .gd-nav__list a{ display:block; padding:9px 13px; border-radius:var(--gd-r-pill); white-space:nowrap; font-size:var(--gd-fs-sm); font-weight:var(--gd-fw-med); color:var(--gd-header-muted); transition:color .15s var(--gd-ease), background-color .15s var(--gd-ease); } .gd-nav__list a:hover{ color:var(--gd-header-ink); background:rgba(255,255,255,.08); } /* 当前页：实心主色胶囊（对标参考站的高亮块） */ .gd-nav__list .current-menu-item > a, .gd-nav__list .current_page_item > a{ background:var(--gd-brand); color:#fff; } .gd-nav__list .current-menu-item > a:hover, .gd-nav__list .current_page_item > a:hover{ background:var(--gd-brand-hover); color:#fff; } .gd-header__actions{ justify-self:end; display:flex; align-items:center; gap:var(--gd-sp-3); } /* 语言切换胶囊。⚠️ 现在是**视觉占位**，装好 Polylang 后由它接管（见 header.php）。 */ .gd-lang{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:var(--gd-r-pill); background:var(--gd-brand); color:#fff; white-space:nowrap; font-size:var(--gd-fs-sm); font-weight:var(--gd-fw-med); transition:background-color .15s var(--gd-ease); } .gd-lang:hover{ background:var(--gd-brand-hover); color:#fff; } .gd-lang svg{ width:15px; height:15px; display:block; } .gd-lang__caret{ width:10px; height:10px; opacity:.85; } /* Polylang 接管后它输出的