/** * SibylScott.fans - Core Styles * 使用CSS @import加载字体，不放在中 */ /* 字体导入 - 使用CSS @import而非HTML link */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@300;400;500;600&display=swap'); /* CSS变量定义 */ :root { /* 品牌色 - 冷色调：石板蓝+银色，与之前项目完全不同 */ --primary: #2c3e50; --secondary: #95a5a6; --accent: #3498db; --background: #ecf0f1; --text: #2c3e50; --text-light: #7f8c8d; --text-muted: #bdc3c7; /* 功能色 */ --success: #27ae60; --error: #e74c3c; --warning: #f39c12; /* 字体 - 完全不同的组合 */ --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* 间距 */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-xxl: 6rem; /* 过渡 */ --transition-fast: 0.15s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; } /* 重置样式 */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.6; color: var(--text); background-color: var(--background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 标题样式 */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 600; line-height: 1.2; color: var(--primary); } h1 { font-size: clamp(2.5rem, 5vw, 4rem); } h2 { font-size: clamp(2rem, 4vw, 3rem); } h3 { font-size: clamp(1.5rem, 3vw, 2rem); } h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); } /* 段落 */ p { margin-bottom: var(--space-sm); } /* 链接 */ a { color: var(--primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--secondary); } /* 图片 */ img { max-width: 100%; height: auto; display: block; } /* 按钮基础样式 */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 2rem; font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; border: none; cursor: pointer; transition: all var(--transition-normal); border-radius: 0; } .btn-primary { background-color: var(--primary); color: white; } .btn-primary:hover { background-color: var(--secondary); color: var(--primary); } .btn-secondary { background-color: transparent; color: var(--primary); border: 1px solid var(--primary); } .btn-secondary:hover { background-color: var(--primary); color: white; } /* 容器 */ .container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--space-md); } .container-narrow { max-width: 900px; } /* 网格系统 */ .grid { display: grid; gap: var(--space-md); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-2 { grid-template-columns: 1fr; } } @media (max-width: 480px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* Flex工具类 */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-sm { gap: var(--space-sm); } .gap-md { gap: var(--space-md); } .gap-lg { gap: var(--space-lg); } /* 间距工具类 */ .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mt-xl { margin-top: var(--space-xl); } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .mb-xl { margin-bottom: var(--space-xl); } .py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); } .py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); } .py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); } .py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); } /* 文本工具类 */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-sm { font-size: 0.875rem; } .text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .font-heading { font-family: var(--font-heading); } .font-body { font-family: var(--font-body); } .font-light { font-weight: 300; } .font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } /* 颜色工具类 */ .text-primary { color: var(--primary); } .text-secondary { color: var(--secondary); } .text-muted { color: var(--text-muted); } .text-light { color: var(--text-light); } .bg-primary { background-color: var(--primary); } .bg-secondary { background-color: var(--secondary); } .bg-accent { background-color: var(--accent); } .bg-background { background-color: var(--background); } /* 表单元素 */ input, textarea, select { font-family: var(--font-body); font-size: 1rem; padding: 0.75rem 1rem; border: 1px solid #ddd; background-color: white; transition: border-color var(--transition-fast); width: 100%; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); } label { display: block; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; } /* 辅助类 */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .hidden { display: none !important; } .visible { display: block !important; } /* 动画 */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.5s ease forwards; } .animate-slide-up { animation: slideUp 0.5s ease forwards; } /* 选择文本颜色 */ ::selection { background-color: var(--secondary); color: var(--primary); }