/* ===================================================== 琛光无人机官网 | base.css CSS 设计令牌 + Reset + 基础排版 + 通用工具类 ===================================================== */ /* ── Google Fonts 预连接（在 HTML 中引入） ── */ /* @import 'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500&display=swap'; */ /* ===================================================== CSS 自定义属性（设计令牌） ===================================================== */ :root { /* 背景色 */ --bg: #0D0D0D; --bg-2: #111827; --bg-card: #151C2C; --bg-card-hover: #1A2236; --bg-input: #0F1623; /* 强调色（琛光琥珀暖金 · 呼应 GLOW） */ --accent: #F0A500; /* 品牌主色：按钮、激活态、logo */ --accent-hover: #FFB800; /* 悬浮态 */ --accent-down: #C88800; /* 按下态 */ --accent-dim: rgba(240, 165, 0, 0.12); /* 辉光背景、选中背景 */ --accent-mid: rgba(240, 165, 0, 0.25); --accent-glow: 0 0 24px rgba(240, 165, 0, 0.35); /* 副色（琥珀金） */ --gold: #FFB300; --gold-dim: rgba(255, 179, 0, 0.12); --gold-glow: 0 0 24px rgba(255, 179, 0, 0.3); /* 文字色 */ --text: #F0F0F0; --text-2: #9CA3AF; --text-3: #6B7280; --text-invert: #0D0D0D; /* 边框色 */ --border: rgba(240, 165, 0, 0.12); --border-hover:rgba(240, 165, 0, 0.32); --border-card: rgba(255, 255, 255, 0.06); /* 状态色 */ --success: #10B981; --warning: #F59E0B; --error: #EF4444; --info: #3B82F6; /* 排版 */ --font-sans: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace; /* 字号 */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ /* 行高 */ --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.6; --leading-loose: 1.8; /* 间距 */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem; /* 容器 */ --container-max: 1200px; --container-px: 1.5rem; /* 圆角 */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-full: 9999px; /* 阴影 */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255,255,255,0.04); /* 过渡 */ --ease: 250ms ease; --ease-fast: 150ms ease; --ease-slow: 400ms ease; /* Z-index */ --z-base: 0; --z-float: 10; --z-header: 100; --z-dropdown:200; --z-overlay: 300; --z-toast: 400; } /* ===================================================== CSS Reset ===================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text); background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; } h1, h2, h3, h4, h5, h6 { line-height: var(--leading-tight); font-weight: 700; } /* ===================================================== 基础排版 ===================================================== */ h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-base);} @media (max-width: 768px) { h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } } p { color: var(--text-2); line-height: var(--leading-loose); } code, pre { font-family: var(--font-mono); font-size: 0.9em; } code { background: var(--accent-dim); color: var(--accent); padding: 0.1em 0.4em; border-radius: var(--r-sm); } pre { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-4); overflow-x: auto; } pre code { background: none; color: var(--text); padding: 0; } /* ===================================================== 布局工具类 ===================================================== */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); } .section { padding-block: var(--s-20); } @media (max-width: 768px) { .section { padding-block: var(--s-12); } } .section-header { text-align: center; margin-bottom: var(--s-12); } .section-eyebrow { display: inline-block; font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); background: var(--accent-dim); border: 1px solid var(--border-hover); padding: var(--s-1) var(--s-3); border-radius: var(--r-full); margin-bottom: var(--s-4); } .section-title { font-size: var(--text-3xl); color: var(--text); margin-bottom: var(--s-4); } .section-desc { font-size: var(--text-lg); color: var(--text-2); max-width: 560px; margin-inline: auto; } .section-footer { text-align: center; margin-top: var(--s-10); } /* ===================================================== 按钮 ===================================================== */ .btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: 0.65em 1.5em; border-radius: var(--r-full); font-size: var(--text-base); font-weight: 500; line-height: 1; transition: all var(--ease); white-space: nowrap; cursor: pointer; text-decoration: none; } .btn-primary { background: var(--accent); color: var(--text-invert); box-shadow: var(--accent-glow); } .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 0 32px rgba(240, 165, 0, 0.5); transform: translateY(-1px); } .btn-primary:active { background: var(--accent-down); transform: translateY(0); } .btn-outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); } .btn-outline:hover { background: var(--accent-dim); box-shadow: var(--accent-glow); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border-card); } .btn-ghost:hover { color: var(--text); border-color: var(--border-hover); background: var(--accent-dim); } .btn-gold { background: var(--gold); color: var(--text-invert); box-shadow: var(--gold-glow); } .btn-gold:hover { background: #FFC833; transform: translateY(-1px); } .btn-sm { padding: 0.5em 1.2em; font-size: var(--text-sm); } .btn-lg { padding: 0.8em 2em; font-size: var(--text-lg); } .btn-disabled { background: var(--bg-card); color: var(--text-3); border: 1px solid var(--border-card); cursor: not-allowed; pointer-events: none; } /* ===================================================== 标签 / Badge ===================================================== */ .tag { display: inline-flex; align-items: center; padding: 0.2em 0.7em; font-size: var(--text-xs); font-weight: 500; border-radius: var(--r-full); background: var(--accent-dim); color: var(--accent); border: 1px solid var(--border); } .tag-gold { background: var(--gold-dim); color: var(--gold); border-color: rgba(255, 179, 0, 0.2); } .tag-soon { background: rgba(245, 158, 11, 0.1); color: var(--warning); border-color: rgba(245, 158, 11, 0.2); } /* ===================================================== 分割线 ===================================================== */ .divider { border: none; border-top: 1px solid var(--border-card); margin-block: var(--s-8); } .divider-accent { border-top-color: var(--border); } /* ===================================================== 强调文字 ===================================================== */ .accent-text { color: var(--accent); text-shadow: 0 0 20px rgba(240, 165, 0, 0.4); } .gold-text { color: var(--gold); } /* ===================================================== 卡片基础 ===================================================== */ .card { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: var(--r-xl); box-shadow: var(--shadow-card); transition: all var(--ease); } .card:hover { border-color: var(--border); box-shadow: var(--shadow-card), var(--accent-glow); transform: translateY(-2px); } /* ===================================================== 可视隐藏（无障碍） ===================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ===================================================== 滚动条美化 ===================================================== */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-2); } ::-webkit-scrollbar-thumb { background: rgba(240, 165, 0, 0.3); border-radius: var(--r-full); } ::-webkit-scrollbar-thumb:hover { background: rgba(240, 165, 0, 0.5); } /* ===================================================== 选中颜色 ===================================================== */ ::selection { background: var(--accent-mid); color: var(--text); } /* ===================================================== Lucide 图标尺寸适配 ===================================================== */ .feature-icon .lucide, .soon-icon .lucide { width: 2rem; height: 2rem; } .pfcard-icon .lucide { width: 1.5rem; height: 1.5rem; } .os-resource-icon .lucide { width: 1.5rem; height: 1.5rem; } .os-pillar-icon .lucide { width: 2rem; height: 2rem; } .contact-item-icon .lucide { width: 1.4rem; height: 1.4rem; } .oshw-icon .lucide, .bili-icon .lucide { width: 1.5rem; height: 1.5rem; } .footer-social .lucide { width: 16px; height: 16px; } .footer-icon { width: 1em; min-width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em; }