/* 零物实验室 — 主样式 | 双主题 | prefers-color-scheme */ /* ---------- 1. 基础与变量 ---------- */ :root { /* 背景色 */ --bg-primary: #fafafa; --bg-card: #ffffff; /* 文本色 */ --text-primary: #1a1a1a; --text-secondary: #6b7280; /* 主色调 - 蓝色 */ --accent: #3b82f6; --accent-hover: #2563eb; --accent-active: #1d4ed8; /* 边框与装饰 */ --border: rgba(0, 0, 0, 0.08); --control-hover-bg: rgba(0, 0, 0, 0.04); /* 阴影 */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); } @media (prefers-color-scheme: dark) { :root { /* 背景色 */ --bg-primary: #0f0f12; --bg-card: #1a1a1f; /* 文本色 */ --text-primary: #e5e5e7; --text-secondary: #a1a1a6; /* 主色调 - 青色 */ --accent: #00d4aa; --accent-hover: #00b894; --accent-active: #009d7c; /* 边框与装饰 */ --border: rgba(255, 255, 255, 0.08); --control-hover-bg: rgba(255, 255, 255, 0.04); /* 阴影 */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); } } /* 手动覆盖主题（JS 设置 ） */ :root[data-theme="light"] { /* 背景色 */ --bg-primary: #fafafa; --bg-card: #ffffff; /* 文本色 */ --text-primary: #1a1a1a; --text-secondary: #6b7280; /* 主色调 - 蓝色 */ --accent: #3b82f6; --accent-hover: #2563eb; --accent-active: #1d4ed8; /* 边框与装饰 */ --border: rgba(0, 0, 0, 0.08); --control-hover-bg: rgba(0, 0, 0, 0.04); /* 阴影 */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); } :root[data-theme="dark"] { /* 背景色 */ --bg-primary: #0f0f12; --bg-card: #1a1a1f; /* 文本色 */ --text-primary: #e5e5e7; --text-secondary: #a1a1a6; /* 主色调 - 青色 */ --accent: #00d4aa; --accent-hover: #00b894; --accent-active: #009d7c; /* 边框与装饰 */ --border: rgba(255, 255, 255, 0.08); --control-hover-bg: rgba(255, 255, 255, 0.04); /* 阴影 */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; padding-top: 64px; font-family: "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", Inter, system-ui, sans-serif; font-size: 1rem; line-height: 1.6; color: var(--text-primary); background: var(--bg-primary); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--accent-hover); text-decoration: none; } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- 2. 主容器 ---------- */ .section-inner, .about-content { max-width: 1120px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; } /* ---------- 3. 顶部导航 ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: 64px; background: var(--bg-card); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 1.5rem; } .nav-inner { flex: 1; display: flex; align-items: center; justify-content: space-between; width: 100%; } .nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; } .nav-logo { font-weight: 600; font-size: 1.125rem; color: var(--text-primary); } .nav-logo:hover { color: var(--accent-hover); } .nav-links { display: flex; gap: 1.5rem; } .nav-links a { font-size: 0.9375rem; color: var(--text-secondary); } .nav-links a:hover { color: var(--accent-hover); } /* ---------- 3.1 主题切换器 (三段式) ---------- */ .theme-switcher { --sw-bg: #e4e4e7; --sw-border: #d4d4d8; --sw-indicator-bg: #ffffff; --sw-indicator-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); --sw-icon-inactive: #71717a; --sw-icon-active: #18181b; position: relative; display: inline-flex; gap: 0; padding: 2px; background: var(--sw-bg); border: 1px solid var(--sw-border); border-radius: 999px; } .theme-switcher[data-theme="dark"], :where(:root[data-theme="dark"]) .theme-switcher { --sw-bg: #27272a; --sw-border: #3f3f46; --sw-indicator-bg: #52525b; --sw-indicator-shadow: none; --sw-icon-inactive: #a1a1aa; --sw-icon-active: #fafafa; } /* system 主题跟随系统颜色 */ @media (prefers-color-scheme: dark) { .theme-switcher[data-theme="system"], :where(:root:not([data-theme="light"]) .theme-switcher) { --sw-bg: #27272a; --sw-border: #3f3f46; --sw-indicator-bg: #52525b; --sw-indicator-shadow: none; --sw-icon-inactive: #a1a1aa; --sw-icon-active: #fafafa; } } /* 滑块指示器 */ .theme-switcher-indicator { position: absolute; top: 2px; left: 2px; width: calc((100% - 4px) / 3); height: calc(100% - 4px); background: var(--sw-indicator-bg); border-radius: 999px; box-shadow: var(--sw-indicator-shadow); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } /* 滑块位移 */ .theme-switcher[data-theme="light"] .theme-switcher-indicator { transform: translateX(0); } .theme-switcher[data-theme="system"] .theme-switcher-indicator { transform: translateX(100%); } .theme-switcher[data-theme="dark"] .theme-switcher-indicator { transform: translateX(200%); } /* 按钮 */ .theme-switcher-btn { flex: 1; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 5px; background: transparent; border: none; cursor: pointer; color: var(--sw-icon-inactive); transition: color 0.2s ease; } .theme-switcher-btn svg { width: 18px; height: 18px; display: block; } .theme-switcher-btn svg use { display: block; width: 100%; height: 100%; } .theme-switcher-btn:hover { color: var(--sw-icon-active); background: var(--control-hover-bg); } .theme-switcher-btn.active { color: var(--sw-icon-active); } .theme-switcher-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; } /* ---------- 4. Hero 首屏 ---------- */ .hero { padding: 4rem 1.5rem; text-align: center; animation: heroFade 0.4s ease-out; } @keyframes heroFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .hero-title { margin: 0 0 0.5rem; font-size: 2.25rem; font-weight: 700; color: var(--text-primary); } .hero-subtitle { margin: 0; font-size: 1.125rem; color: var(--text-secondary); } /* ---------- 5. 区块标题 ---------- */ .section-title { margin: 0 0 1.5rem; font-size: 1.5rem; font-weight: 600; color: var(--text-primary); text-align: center; } /* ---------- 6. 产品展示区 ---------- */ .products { padding: 4rem 1.5rem; } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; max-width: 1120px; margin: 0 auto; } .product-card { padding: 1.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; transition: border-color 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; align-items: flex-start; } .product-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); } .product-icon { width: 48px; height: 48px; margin-bottom: 1rem; color: var(--accent); display: flex; align-items: center; justify-content: center; } .product-icon svg { flex-shrink: 0; } .product-name { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 600; color: var(--text-primary); } .product-desc { margin: 0 0 1.25rem; font-size: 0.9375rem; color: var(--text-secondary); flex-grow: 1; } /* 更多产品卡片弱化 */ .product-card--more { opacity: 0.9; border-style: dashed; } .product-card--more:hover { opacity: 1; border-style: solid; } /* ---------- 7. 按钮 ---------- */ .btn { display: inline-block; padding: 0.5rem 1.25rem; font-size: 0.9375rem; font-weight: 500; border-radius: 8px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn-primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); transition: background 0.2s ease; } .btn-primary:hover { background: var(--accent-hover); color: #fff; } .btn-secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); transition: background 0.2s ease, color 0.2s ease; } .btn-secondary:hover { background: var(--accent-active); color: #fff; } /* ---------- 8. 关于区块 ---------- */ .about { padding: 4rem 1.5rem; } .about-content { max-width: 42rem; margin: 0 auto; } .about-content p { margin: 0 0 1rem; font-size: 1rem; color: var(--text-secondary); line-height: 1.7; } .about-content p:last-child { margin-bottom: 0; } /* ---------- 9. 页脚 ---------- */ .footer { padding: 2rem 1.5rem; text-align: center; border-top: 1px solid var(--border); } .footer p { margin: 0; font-size: 0.8125rem; color: var(--text-secondary); } /* ---------- 10. 说明页 more.html ---------- */ .page-main { padding: 5rem 1.5rem 4rem; max-width: 42rem; margin: 0 auto; } .more-content { padding: 0 1.5rem; } .more-title { margin: 0 0 1rem; font-size: 1.75rem; font-weight: 600; color: var(--text-primary); } .more-content p { margin: 0 0 1rem; font-size: 1rem; color: var(--text-secondary); line-height: 1.7; } .more-content .btn { margin-top: 0.5rem; } /* ---------- 11. 响应式 ---------- */ @media (max-width: 768px) { body { padding-top: 56px; } .nav { height: 56px; } .nav-links { gap: 1rem; } .nav-links a { font-size: 0.875rem; } .hero { padding: 3rem 1rem; } .hero-title { font-size: 1.75rem; } .hero-subtitle { font-size: 1rem; } .products { padding: 3rem 1rem; } .product-grid { grid-template-columns: 1fr; gap: 1rem; } .about { padding: 3rem 1rem; } .page-main { padding: 4rem 1rem 3rem; } .more-content { padding: 0; } }