/* ========================================================================== infoAI 统一设计系统 v1 —— 所有非首页页面（日报/详情/事件/榜单/归档/工具集/视角卡）共用这一份。 首页 index.html 的样式是内联的（历史原因），变量与此保持一致。 用法：在各页面 里 然后把页面自己的 :root 变量块删掉，改用下面这套。 ========================================================================== */ :root { /* ---- 品牌色：紫 → 青（与首页一致） ---- */ --violet-300: #c4b5fd; --violet-400: #a78bfa; --violet-500: #8b5cf6; --violet-600: #7c3aed; --violet-700: #6d28d9; --cyber-300: #67e8f9; --cyber-400: #22d3ee; --cyber-500: #06b6d4; /* ---- 深色底（默认） ---- */ --bg-page: #080b14; --bg-elev: #0f1626; --bg-elev2: #141d31; --ink-950: #f8fafc; --ink-900: #e8eefb; --ink-800: #c3cee3; --ink-700: #9aa8c4; --ink-600: #8291af; --ink-500: #6b7a99; --ink-400: #4e5b76; --ink-300: #35405a; --ink-200: #232c42; --hairline: rgba(148,163,184,.13); --grid-line: rgba(34,211,238,.045); /* ---- 兼容旧页面变量名（渐变迁移用，避免一次性改完所有页面） ---- */ --bg: var(--bg-page); --card: var(--bg-elev); --ink: var(--ink-900); --sub: var(--ink-600); --line: var(--hairline); --accent: var(--violet-400); --radius-lg: 20px; --radius-md: 14px; --radius-sm: 9px; --radius-full: 9999px; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1); } * { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Segoe UI", Roboto, "Microsoft YaHei", sans-serif; background: var(--bg-page); color: var(--ink-900); min-height: 100vh; -webkit-font-smoothing: antialiased; line-height: 1.7; /* 科技网格 + 顶部紫青光晕（与首页完全一致） */ background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), radial-gradient(1000px 520px at 50% -12%, rgba(124,58,237,.20), transparent 62%), radial-gradient(760px 420px at 86% 4%, rgba(6,182,212,.13), transparent 58%); background-size: 34px 34px, 34px 34px, 100% 100%, 100% 100%; background-attachment: fixed; } a { color: var(--cyber-400); text-decoration: none; } a:hover { text-decoration: underline; } /* ===================== 页面外壳（与首页同宽） ===================== */ .page-shell { width: 100%; min-height: 100vh; padding: 0 34px; display: flex; flex-direction: column; } .page-wide { width: 100%; max-width: 1180px; margin: 0 auto; } .page-reading { max-width: 780px; margin: 0 auto; width: 100%; } /* ===================== 顶部导航（复用首页结构） ===================== */ .site-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 17px 0; border-bottom: 1px solid var(--hairline); } .site-brand { display: inline-block; font-size: 16px; font-weight: 800; letter-spacing: -.2px; color: #fff; text-decoration: none; font-family: var(--mono); white-space: nowrap; } .site-brand:hover { text-decoration: none; } .site-brand .ai { background: linear-gradient(135deg, var(--violet-400), var(--cyber-400)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .site-nav { display: flex; gap: 2px; flex-wrap: wrap; } .site-nav a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-600); text-decoration: none; padding: 6px 11px; border-radius: 8px; transition: all .18s; } .site-nav a:hover { color: var(--cyber-400); background: rgba(34,211,238,.08); text-decoration: none; } .site-nav a.now { color: #fff; background: rgba(124,58,237,.24); } .site-nav svg { width: 16px; height: 16px; flex: none; opacity: .88; transition: transform .18s, opacity .18s; } .site-nav a:hover svg { transform: translateY(-1px); opacity: 1; } .site-nav a.now svg { opacity: 1; } /* ===================== 页脚 ===================== */ .site-footer { padding: 22px 0 40px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-500); margin-top: auto; } .site-footer a { color: var(--ink-600); text-decoration: none; } .site-footer a:hover { color: var(--cyber-400); text-decoration: none; } /* ===================== 通用组件 ===================== */ /* 卡片 */ .ui-card { background: var(--bg-elev); border: 1px solid var(--hairline); border-radius: var(--radius-md); transition: border-color .2s, box-shadow .25s, transform .2s; } .ui-card:hover { border-color: rgba(124,58,237,.32); box-shadow: 0 12px 34px rgba(0,0,0,.40), 0 0 40px rgba(124,58,237,.10); } /* 标题 */ .ui-h1 { font-size: 26px; font-weight: 800; color: var(--ink-950); margin: 0 0 8px; letter-spacing: -.5px; } .ui-h2 { font-size: 17px; font-weight: 700; color: var(--ink-950); margin: 0 0 12px; } .ui-sub { font-size: 13.5px; color: var(--ink-600); margin: 0 0 20px; } /* 标签/徽章 */ .ui-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .3px; padding: 3px 9px; border-radius: 6px; background: rgba(34,211,238,.12); color: var(--cyber-300); } .ui-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 7px 15px; border-radius: var(--radius-full); border: 1px solid var(--hairline); background: var(--bg-elev2); color: var(--ink-600); cursor: pointer; font-family: inherit; transition: all .18s; } .ui-pill:hover { border-color: rgba(124,58,237,.5); color: var(--violet-400); transform: translateY(-1px); } .ui-pill.on { background: linear-gradient(135deg, var(--violet-600), var(--cyber-500)); color: #fff; border-color: transparent; font-weight: 600; box-shadow: 0 6px 18px rgba(124,58,237,.35); } /* 按钮 */ .ui-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; font-family: inherit; padding: 9px 18px; border-radius: 10px; cursor: pointer; border: 1px solid var(--hairline); background: var(--bg-elev2); color: var(--ink-800); transition: all .18s; } .ui-btn:hover { border-color: rgba(124,58,237,.5); color: var(--violet-300); transform: translateY(-1px); } .ui-btn-primary { border: none; color: #fff; background: linear-gradient(135deg, var(--violet-600), var(--cyber-500)); box-shadow: 0 6px 18px rgba(124,58,237,.32); } .ui-btn-primary:hover { filter: brightness(1.08); color: #fff; text-decoration: none; } /* 图标 */ .ui-ic { width: 15px; height: 15px; flex: none; vertical-align: -2px; } .ui-ic-lg { width: 16px; height: 16px; } /* 空状态 */ .ui-empty { text-align: center; color: var(--ink-500); padding: 44px 0; font-size: 14px; } /* ===================== 移动端 ===================== */ @media (max-width: 860px) { .page-shell { padding: 0 18px; } .ui-h1 { font-size: 21px; } .site-nav a { font-size: 12.5px; padding: 5px 9px; gap: 5px; } .site-nav svg { width: 15px; height: 15px; } .site-brand { font-size: 15px; } } @supports (padding: env(safe-area-inset-bottom)) { .page-shell { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); } }