/** * 天机阁统一设计系统 * Tianji Design System * * 使用方式：在 HTML 的 中引入此文件 * */ /* ======================================== CSS 变量定义 ======================================== */ :root { /* 主色调 - 金色系 */ --tj-gold-primary: #d4af37; --tj-gold-dark: #b8960c; --tj-gold-light: #f4e4c1; --tj-gold-pale: #faf6ed; /* 背景色 - 深色渐变 */ --tj-bg-dark: #0a0a0f; --tj-bg-mid: #1a1a2e; --tj-bg-light: #16213e; /* 文字颜色 */ --tj-text-primary: #2a2520; --tj-text-secondary: #5a5040; --tj-text-light: rgba(255, 255, 255, 0.9); --tj-text-muted: rgba(255, 255, 255, 0.6); /* 强调色 */ --tj-accent-red: #8b0000; --tj-accent-green: #4caf50; /* 边框和阴影 */ --tj-border-radius-sm: 8px; --tj-border-radius-md: 15px; --tj-border-radius-lg: 25px; --tj-border-radius-xl: 30px; --tj-shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.1); --tj-shadow-md: 0 8px 25px rgba(0, 0, 0, 0.15); --tj-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3); --tj-shadow-gold: 0 4px 20px rgba(212, 175, 55, 0.3); --tj-shadow-gold-lg: 0 8px 30px rgba(212, 175, 55, 0.4); /* 间距 */ --tj-space-xs: 8px; --tj-space-sm: 15px; --tj-space-md: 25px; --tj-space-lg: 40px; --tj-space-xl: 60px; /* 字体 */ --tj-font-primary: 'Noto Serif SC', 'ZCOOL XiaoWei', 'SimSun', serif; --tj-font-mono: 'Courier New', monospace; /* 动画 */ --tj-transition-fast: 0.2s ease; --tj-transition-normal: 0.3s ease; --tj-transition-slow: 0.5s ease; /* 布局 */ --tj-container-max: 900px; --tj-container-padding: 20px; } /* ======================================== 基础重置 ======================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--tj-font-primary); line-height: 1.8; color: var(--tj-text-light); background: linear-gradient(135deg, var(--tj-bg-dark) 0%, var(--tj-bg-mid) 50%, var(--tj-bg-light) 100%); min-height: 100vh; overflow-x: hidden; } /* ======================================== 排版系统 ======================================== */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.4; color: var(--tj-gold-primary); } h1 { font-size: clamp(28px, 5vw, 36px); letter-spacing: 0.3em; } h2 { font-size: clamp(22px, 4vw, 28px); letter-spacing: 0.15em; } h3 { font-size: clamp(18px, 3vw, 22px); letter-spacing: 0.1em; } p { margin-bottom: var(--tj-space-md); } /* ======================================== 组件 - 按钮 ======================================== */ .tj-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--tj-space-xs); padding: 15px 40px; font-size: 16px; font-family: var(--tj-font-primary); font-weight: 600; letter-spacing: 0.1em; border: none; border-radius: var(--tj-border-radius-xl); cursor: pointer; transition: all var(--tj-transition-normal); text-decoration: none; } .tj-btn-primary { background: linear-gradient(135deg, var(--tj-gold-primary), var(--tj-gold-dark)); color: var(--tj-bg-dark); box-shadow: var(--tj-shadow-gold); } .tj-btn-primary:hover { transform: translateY(-3px); box-shadow: var(--tj-shadow-gold-lg); } .tj-btn-secondary { background: transparent; color: var(--tj-gold-primary); border: 2px solid var(--tj-gold-primary); } .tj-btn-secondary:hover { background: rgba(212, 175, 55, 0.1); transform: translateY(-2px); } .tj-btn-sm { padding: 10px 25px; font-size: 14px; } /* ======================================== 组件 - 卡片 ======================================== */ .tj-card { background: linear-gradient(135deg, rgba(250, 247, 240, 0.98) 0%, rgba(245, 240, 230, 0.99) 100% ); border-radius: var(--tj-border-radius-md); padding: var(--tj-space-lg); box-shadow: var(--tj-shadow-lg), 0 0 0 1px rgba(212, 175, 55, 0.2); position: relative; overflow: hidden; } .tj-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, transparent 0%, var(--tj-gold-primary) 20%, var(--tj-gold-dark) 50%, var(--tj-gold-primary) 80%, transparent 100% ); } /* ======================================== 组件 - 输入框 ======================================== */ .tj-input { width: 100%; padding: var(--tj-space-sm) var(--tj-space-md); font-size: 16px; font-family: var(--tj-font-primary); background: rgba(26, 26, 46, 0.8); border: 1px solid rgba(212, 175, 55, 0.3); border-radius: var(--tj-border-radius-md); color: var(--tj-text-light); transition: all var(--tj-transition-normal); resize: vertical; } .tj-input:focus { outline: none; border-color: var(--tj-gold-primary); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1); } .tj-input::placeholder { color: rgba(255, 255, 255, 0.4); } /* ======================================== 装饰元素 ======================================== */ .tj-glow { animation: tjGlow 3s ease-in-out infinite; } @keyframes tjGlow { 0%, 100% { text-shadow: 0 0 10px rgba(212, 175, 55, 0.5); } 50% { text-shadow: 0 0 30px rgba(212, 175, 55, 0.8); } } .tj-float { animation: tjFloat 6s ease-in-out infinite; } @keyframes tjFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } .tj-fade-in { animation: tjFadeIn 0.8s ease-out; } @keyframes tjFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ======================================== 布局工具 ======================================== */ .tj-container { max-width: var(--tj-container-max); margin: 0 auto; padding: var(--tj-space-lg) var(--tj-container-padding); } .tj-flex { display: flex; } .tj-flex-center { display: flex; justify-content: center; align-items: center; } .tj-flex-column { display: flex; flex-direction: column; } .tj-text-center { text-align: center; } /* ======================================== 头部组件 ======================================== */ .tj-header { text-align: center; margin-bottom: var(--tj-space-xl); padding: var(--tj-space-lg) 0; border-bottom: 2px solid rgba(212, 175, 55, 0.3); } .tj-header-icon { font-size: 48px; color: var(--tj-gold-primary); margin-bottom: var(--tj-space-sm); } .tj-header h1 { margin-bottom: var(--tj-space-xs); } .tj-header-subtitle { color: var(--tj-text-muted); font-size: 14px; letter-spacing: 0.2em; } /* ======================================== 页脚组件 ======================================== */ .tj-footer { text-align: center; margin-top: var(--tj-space-xl); padding: var(--tj-space-lg) 0; color: var(--tj-text-muted); font-size: 14px; border-top: 1px solid rgba(212, 175, 55, 0.2); } .tj-footer a { color: var(--tj-text-muted); text-decoration: none; margin: 0 var(--tj-space-sm); transition: color var(--tj-transition-fast); } .tj-footer a:hover { color: var(--tj-gold-primary); } /* ======================================== 响应式断点 ======================================== */ @media (max-width: 768px) { :root { --tj-space-lg: 30px; --tj-space-xl: 40px; } h1 { letter-spacing: 0.2em; } h2 { letter-spacing: 0.1em; } .tj-btn { width: 100%; max-width: 300px; } .tj-card { padding: var(--tj-space-md); } } /* ======================================== 打印样式 ======================================== */ @media print { body { background: white !important; color: black !important; } .tj-card { box-shadow: none; border: 1px solid #ddd; } .tj-btn { display: none; } } /* ======================================== 滚动条美化 ======================================== */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: rgba(212, 175, 55, 0.1); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--tj-gold-primary), var(--tj-gold-dark)); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--tj-gold-dark); } /* ======================================== 选择文本颜色 ======================================== */ ::selection { background: rgba(212, 175, 55, 0.3); color: var(--tj-text-primary); }