/* ============================================= * COMMON.CSS - 思益云网站共用样式 (v2 - 翻新版) * 包含颜色变量、基础样式和可复用组件 * ============================================= */ /* ============================================= * 主题切换系统 * 默认: 深色主题 (dark) * 可通过 切换为浅色 * 也可通过 JS 切换: document.documentElement.setAttribute('data-theme', 'light') * ============================================= */ /* --- 公共变量 (两主题共享) --- */ :root { /* 主色调 - 科技感蓝紫渐变（两主题共用） */ --pri: #0284c7; --sec: #7c3aed; --accent: #e11d48; /* 渐变（两主题共用） */ --gradient: linear-gradient(135deg, #0284c7, #7c3aed); --gradient-reverse: linear-gradient(135deg, #7c3aed, #0284c7); --gradient-accent: linear-gradient(135deg, #7c3aed, #e11d48); --gradient-text: linear-gradient(135deg, #0284c7, #7c3aed, #e11d48); /* 发光效果 */ --glow-pri: 0 0 30px rgba(2, 132, 199, 0.15); --glow-sec: 0 0 30px rgba(124, 58, 237, 0.15); --glow-accent: 0 0 30px rgba(225, 29, 72, 0.15); /* 圆角（两主题共用） */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; /* 动画（两主题共用） */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* --- 深色主题 (默认) --- */ :root, :root[data-theme="dark"] { --bg: #0f172a; --bg-alt: #1e293b; --bg-card: #1e293b; --bg-card-hover: #263548; --ink: #f1f5f9; --ink-secondary: #cbd5e1; --muted: #94a3b8; --muted-light: #64748b; --line: #2a3650; --line-hover: #3a4a6a; --bg-subtle: rgba(10, 10, 26, 0.5); --bg-subtle-hover: rgba(20, 20, 46, 0.7); --bg-subtle-strong: rgba(20, 20, 46, 0.6); --overlay-dark: rgba(10, 10, 26, 0.8); } /* --- 浅色主题 --- */ :root[data-theme="light"] { --bg: #f8fafc; --bg-alt: #f1f5f9; --bg-card: #ffffff; --bg-card-hover: #f8fafc; --ink: #0f172a; --ink-secondary: #1e293b; --muted: #475569; --muted-light: #64748b; --line: #cbd5e1; --line-hover: #94a3b8; --bg-subtle: rgba(0, 0, 0, 0.03); --bg-subtle-hover: rgba(0, 0, 0, 0.06); --bg-subtle-strong: rgba(0, 0, 0, 0.04); --overlay-dark: rgba(255, 255, 255, 0.7); } /* 基础重置和全局样式 */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } html, body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 背景微纹理 - 增加质感 */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(6, 182, 212, 0.08), transparent), radial-gradient(ellipse 60% 50% at 80% 40%, rgba(139, 92, 246, 0.06), transparent), radial-gradient(ellipse 50% 40% at 20% 60%, rgba(244, 63, 94, 0.04), transparent); pointer-events: none; z-index: -1; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* 布局容器 */ .container { max-width: 1160px; margin: 0 auto; padding: 0 20px; } .container-narrow { max-width: 900px; margin: 0 auto; padding: 0 20px; } /* 文本样式 */ .muted { color: var(--muted); } .muted-light { color: var(--muted-light); } .lead { color: var(--ink-secondary); font-size: 18px; line-height: 1.7; max-width: 600px; } /* 渐变文字 */ .gradient-text { background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* 小标题装饰 */ .kicker { display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pri); font-size: 13px; font-weight: 700; margin-bottom: 12px; } .kicker::before, .kicker::after { content: ''; display: block; width: 24px; height: 1.5px; background: var(--gradient); border-radius: 2px; } /* 按钮样式 */ .btn { display: inline-flex; align-items: center; gap: 10px; background: var(--gradient); color: #fff; padding: 0.75rem 1.5rem; border-radius: var(--radius-md); border: none; font-weight: 600; font-size: 15px; cursor: pointer; box-shadow: var(--glow-pri); transition: all 0.3s var(--ease-out); position: relative; overflow: hidden; } .btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.1) 100%); pointer-events: none; } .btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 32px rgba(6, 182, 212, 0.35); } .btn:active { transform: translateY(0) scale(0.98); } .btn-outline { background: transparent; color: var(--pri); border: 2px solid rgba(6, 182, 212, 0.4); box-shadow: none; } .btn-outline::after { display: none; } .btn-outline:hover { background: var(--gradient); color: #fff; border-color: transparent; box-shadow: var(--glow-pri); } /* 卡片组件 */ .card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2); transition: all 0.4s var(--ease-out); position: relative; overflow: hidden; } .card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(6, 182, 212, 0.03), rgba(139, 92, 246, 0.03)); opacity: 0; transition: opacity 0.4s var(--ease-out); pointer-events: none; } .card:hover { transform: translateY(-4px); border-color: var(--line-hover); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3), var(--glow-pri); background: var(--bg-card-hover); } .card:hover::before { opacity: 1; } /* 图标盒子 */ .icon-box { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--gradient); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: #fff; box-shadow: var(--glow-pri); margin-bottom: 16px; position: relative; overflow: hidden; } .icon-box::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.15) 100%); pointer-events: none; } /* 徽标 */ .badge { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(6, 182, 212, 0.25); background: rgba(6, 182, 212, 0.08); padding: 0.35rem 0.8rem; border-radius: 999px; font-size: 12px; backdrop-filter: blur(8px); color: var(--pri); font-weight: 600; letter-spacing: 0.02em; } /* 网格布局 */ .grid { display: grid; gap: 24px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } /* 弹性布局工具类 */ .flex { display: flex; align-items: center; } .flex-between { justify-content: space-between; } .flex-center { justify-content: center; } .gap-sm { gap: 8px; } .gap-md { gap: 16px; } .gap-lg { gap: 24px; } /* 间距工具类 */ .section { padding: 80px 0; position: relative; } .section-sm { padding: 48px 0; } /* 交替 section 背景 */ .section:nth-child(even) { background: var(--bg-alt); } .section-hero { padding: 64px 0; position: relative; overflow: hidden; } /* 装饰性角标 - 增加视觉趣味 */ .section::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); } .section:last-child::after { display: none; } /* 导航栏样式 */ header { border-bottom: 1px solid var(--line); background: rgba(17, 24, 39, 0.85); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); position: sticky; top: 0; z-index: 100; } .nav { display: flex; gap: 20px; align-items: center; justify-content: space-between; height: 64px; } .nav a { padding: 8px 4px; color: var(--muted); font-size: 14px; font-weight: 500; position: relative; transition: color 0.3s ease; } .nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--gradient); border-radius: 2px; transition: width 0.3s var(--ease-out); } .nav a:hover { color: var(--pri); } .nav a:hover::after { width: 100%; } /* 滚动进入动画 */ .fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .fade-in.visible { opacity: 1; transform: translateY(0); } .fade-in-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .fade-in-left.visible { opacity: 1; transform: translateX(0); } .fade-in-right { opacity: 0; transform: translateX(30px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .fade-in-right.visible { opacity: 1; transform: translateX(0); } .fade-in-scale { opacity: 0; transform: scale(0.9); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .fade-in-scale.visible { opacity: 1; transform: scale(1); } /* 响应式设计 */ @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .container { padding: 0 16px; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 16px; } .section { padding: 56px 0; } .section-sm { padding: 32px 0; } .section-hero { padding: 40px 0; } .nav { flex-direction: column; height: auto; padding: 12px 0; gap: 6px; } .lead { font-size: 16px; } } @media (max-width: 480px) { .container { padding: 0 12px; } .section { padding: 40px 0; } .btn { padding: 0.6rem 1.2rem; font-size: 14px; } } /* 表单样式 */ input, textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); font-family: inherit; font-size: 14px; background: rgba(17, 24, 39, 0.5); color: var(--ink); transition: all 0.3s ease; } input:focus, textarea:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1); } textarea { min-height: 120px; resize: vertical; } label { font-size: 13px; color: var(--muted); margin-bottom: 6px; display: block; font-weight: 500; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } } /* 工具类 */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .hidden { display: none; } .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; } /* 标题系统 */ .h1 { font-size: 56px; font-weight: 900; line-height: 1.1; letter-spacing: -0.03em; margin: 0; } .h2 { font-size: 42px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; margin: 0; } .h3 { font-size: 24px; font-weight: 700; line-height: 1.3; margin: 0; } @media (max-width: 768px) { .h1 { font-size: 36px; } .h2 { font-size: 30px; } .h3 { font-size: 20px; } } @media (max-width: 480px) { .h1 { font-size: 28px; } .h2 { font-size: 24px; } } /* 动画关键帧 */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes pulse-glow { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } /* 进度条加载动画 */ .loading-bar { position: fixed; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--pri), var(--sec), var(--accent), var(--pri)); background-size: 200% 100%; animation: shimmer 2s linear infinite; z-index: 9999; transform-origin: left; transform: scaleX(0); transition: transform 0.5s var(--ease-out); } .loading-bar.active { transform: scaleX(1); } /* 回到顶部按钮 */ .scroll-top { position: fixed; bottom: 32px; right: 32px; width: 44px; height: 44px; border-radius: 50%; background: var(--gradient); color: #fff; border: none; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; box-shadow: var(--glow-pri); opacity: 0; transform: translateY(20px); transition: all 0.3s var(--ease-out); z-index: 50; } .scroll-top.visible { opacity: 1; transform: translateY(0); } .scroll-top:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(6, 182, 212, 0.4); } /* 网格点阵装饰背景 - 用于 sections */ .grid-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(6, 182, 212, 0.08) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; z-index: 0; } .grid-dots + * { position: relative; z-index: 1; }