/* ============================================================ EOC 共创组首页样式 - 亮/暗双主题体系暗色：默认（18:00 - 次日06:00）亮色：日间（06:00 - 18:00）主题挂在上 ============================================================ */ /* ===== 设计变量（共用基座，主题专属变量由 JS 从 /css/data/theme-default.json 注入到 :root） ===== */ :root { --elastic-out: cubic-bezier(0.34, 1.56, 0.64, 1); --elastic-soft: cubic-bezier(0.22, 1, 0.36, 1); --smooth: cubic-bezier(0.65, 0, 0.35, 1); --blue: #027bff; --blue-light: #4fc3f7; --orange: #ff7d00; --gold: #ffca28; --radius-lg: 18px; --radius-md: 14px; --radius-sm: 10px; --space-section: 56px; --theme-fade: 0.6s; /* 主题切换过渡时长 */ --title-gradient: linear-gradient(90deg, var(--blue), var(--blue-light), var(--orange), var(--gold), var(--orange), var(--blue-light), var(--blue)); /* 主题专属变量默认值（防 JS 未加载时的兜底，实际由 /css/data/theme-default.json 覆盖） */ --bg: #0b101b; --bg-soft: rgba(17, 24, 39, 0.72); --bg-card: rgba(255, 255, 255, 0.04); --bg-card-border: rgba(255, 255, 255, 0.09); --text: #f2f5fa; --text-dim: #aab3c2; --text-faint: rgba(255, 255, 255, 0.35); --accent-glow: rgba(2, 123, 255, 0.3); --accent-glow-strong: rgba(2, 123, 255, 0.4); --orange-glow: rgba(255, 125, 0, 0.3); --btn-text: #ffffff; --toggle-bg: rgba(255, 255, 255, 0.06); --toggle-bg-hover: rgba(255, 255, 255, 0.12); --toggle-border: rgba(255, 255, 255, 0.15); --bg-img-opacity: 0.14; --bg-img-filter: none; --star-a: 0.55; --focus-veil: radial-gradient(ellipse 62% 55% at 50% 46%, rgba(11,16,27,0.55), transparent 70%); --brand-bg: linear-gradient(180deg, rgba(11,16,27,0.75), transparent); --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.35); --icon-filter: none; --glow-1: rgba(2, 123, 255, 0.10); --glow-2: rgba(255, 125, 0, 0.06); --glow-board-bg: rgba(255, 255, 255, 0.03); --menu-bg: rgba(17, 24, 39, 0.92); --menu-border: rgba(255, 255, 255, 0.10); /* 细节修饰变量：同样由 /css/data/theme-default.json 覆盖，此处仅为无 JS 兜底 */ --cursor-glow: rgba(2, 123, 255, 0.06); --logo-shadow: rgba(2, 123, 255, 0.35); --knob-shadow: rgba(0, 0, 0, 0.3); --welcome-glow: rgba(2, 123, 255, 0.15); --title-glow: rgba(2, 123, 255, 0.08); --btn-border: rgba(255, 255, 255, 0.14); --btn-inset: rgba(255, 255, 255, 0.12); --btn-inset-hover: rgba(255, 255, 255, 0.15); --btn-border-hover: rgba(255, 255, 255, 0.28); --btn-sweep: rgba(255, 255, 255, 0.12); --ripple-bg: rgba(255, 255, 255, 0.25); --card-hover-border: rgba(2, 123, 255, 0.35); --h2-icon-glow: rgba(2, 123, 255, 0.4); } /* ===== 基础 ===== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { position: relative; min-height: 100vh; padding: 20px 20px 72px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow-x: hidden; font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background-color: var(--bg); color: var(--text); /* 主题切换无缝渐变：哪些属性参与过渡 */ transition: background-color var(--theme-fade) ease, color var(--theme-fade) ease; } /* 需要随主题渐变过渡的公共规则 */ .brand, .intro-card, .site-footer, .theme-toggle, .text-wrap .desc, .area-title, .bg-img, #starCanvas { transition: background-color var(--theme-fade) ease, color var(--theme-fade) ease, border-color var(--theme-fade) ease, box-shadow var(--theme-fade) ease, opacity var(--theme-fade) ease; } /* ===== 背景层 ===== */ #starCanvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .bg-img { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: var(--bg-img-opacity); filter: var(--bg-img-filter); will-change: opacity, transform; transition: opacity 1.2s ease, transform 1.2s ease, filter var(--theme-fade) ease; } /* 聚焦遮罩：文字区低噪声，提升可读性 */ .focus-veil { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--focus-veil); transition: background var(--theme-fade) ease; } /* ===== 鼠标光晕（仅暗色 + 精确指针下启用，亮色淡化） ===== */ #cursorGlow { position: fixed; left: 0; top: 0; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, var(--cursor-glow), transparent 60%); transform: translate3d(-50%, -50%, 0); opacity: 0; z-index: 1; pointer-events: none; transition: opacity 0.8s ease; will-change: transform; } body[data-theme="light"] #cursorGlow { /* 亮色下由主题 JSON 的 --cursor-glow 变量控制，无需再写字面色值 */ background: radial-gradient(circle, var(--cursor-glow), transparent 60%); } /* ===== 顶部品牌栏 ===== */ .brand { position: fixed; top: 0; left: 0; width: 100%; display: flex; align-items: center; gap: 12px; padding: 18px 28px; z-index: 4; background: var(--brand-bg); } .brand img.logo { width: 34px; height: 34px; filter: drop-shadow(0 0 8px var(--logo-shadow)); } .brand-name { font-size: 15px; font-weight: 600; letter-spacing: 1px; color: var(--text); } .brand-name small { display: block; font-size: 11px; font-weight: 400; color: var(--text-dim); letter-spacing: 2px; } /* ===== 主题切换按钮（右顶常驻） ===== */ .theme-toggle { position: fixed; top: 16px; right: 20px; z-index: 5; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--toggle-border); border-radius: 50%; background: var(--toggle-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--theme-fade) ease, border-color var(--theme-fade) ease, transform 0.3s var(--elastic-out), box-shadow 0.3s ease; } .theme-toggle:hover { background: var(--toggle-bg-hover); transform: translateY(-2px) scale(1.06); box-shadow: 0 6px 18px var(--accent-glow); } .theme-toggle:active { transform: scale(0.92); transition-duration: 0.08s; } .theme-toggle img { width: 21px; height: 21px; /* 图标换向小动画 */ transition: opacity 0.25s ease, transform 0.45s var(--elastic-out); } .theme-toggle.switching img { opacity: 0; transform: rotate(-90deg) scale(0.6); } /* 亮色主题下图标加深，保证可见 */ body[data-theme="light"] .theme-toggle img, .theme-toggle img { filter: var(--icon-filter); } /* ===== 背景板光影投射（柔和，兼容双主题，可由 .glow-off 关闭） ===== */ .glow-board { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.9; background: radial-gradient(60% 42% at 22% 18%, var(--glow-1), transparent 70%), radial-gradient(52% 40% at 82% 30%, var(--glow-2), transparent 72%), radial-gradient(70% 50% at 50% 100%, var(--glow-1), transparent 75%); background-color: var(--glow-board-bg); filter: blur(8px); transition: opacity var(--theme-fade) ease, background-color var(--theme-fade) ease; will-change: opacity; } .glow-board::after { content: ''; position: absolute; inset: 0; background: radial-gradient(40% 30% at 50% 46%, var(--glow-1), transparent 70%); opacity: 0.5; mix-blend-mode: screen; } html.glow-off .glow-board { opacity: 0; } /* ===== 汉堡折叠菜单（右上角，三条横杠） ===== */ .hamburger { position: fixed; top: 16px; right: 72px; z-index: 6; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--toggle-border); border-radius: 50%; background: var(--toggle-bg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--theme-fade) ease, border-color var(--theme-fade) ease, transform 0.3s var(--elastic-out), box-shadow 0.3s ease; } .hamburger:hover { background: var(--toggle-bg-hover); transform: scale(1.06); box-shadow: 0 6px 18px var(--accent-glow); } .hamburger:active { transform: scale(0.92); } .hamburger img { width: 22px; height: 22px; filter: var(--icon-filter); transition: transform 0.4s var(--elastic-out); } .hamburger[aria-expanded="true"] img { transform: rotate(90deg); } /* 菜单面板 */ .settings-menu { position: fixed; top: 68px; right: 16px; z-index: 7; width: min(248px, calc(100vw - 32px)); padding: 10px; display: flex; flex-direction: column; gap: 4px; background: var(--menu-bg); border: 1px solid var(--menu-border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transform: translateY(-8px) scale(0.98); transform-origin: top right; pointer-events: none; transition: opacity 0.28s var(--smooth), transform 0.28s var(--elastic-soft); } .settings-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px; border-radius: var(--radius-sm); } .menu-row + .menu-row { border-top: 1px solid var(--menu-border); } .menu-label { font-size: 13.5px; font-weight: 500; color: var(--text); letter-spacing: 0.3px; } .menu-theme-btn { font-size: 13px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--toggle-border); background: var(--toggle-bg); color: var(--text); cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease; } .menu-theme-btn:hover { background: var(--toggle-bg-hover); } /* 开关（iOS 风格，柔和过渡） */ .switch { position: relative; width: 46px; height: 26px; border-radius: 999px; border: none; background: var(--bg-card-border); cursor: pointer; flex: none; transition: background 0.35s var(--smooth); } .switch[aria-checked="true"] { background: var(--blue); } .switch-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--btn-text); box-shadow: 0 1px 4px var(--knob-shadow); transition: transform 0.35s var(--elastic-soft); } .switch[aria-checked="true"] .switch-knob { transform: translateX(20px); } .switch:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* ===== 主内容区 ===== */ .main-stage { position: relative; z-index: 2; width: 100%; max-width: 720px; display: flex; flex-direction: column; align-items: center; /* auto 上/下 margin：纵向空间充足时居中展示；内容超出一屏时改为顶部起始排布，防止欢迎文字被推出视口 */ margin-top: auto; margin-bottom: auto; } /* ===== 欢迎文字区 ===== */ .text-wrap { text-align: center; transition: opacity 0.7s var(--smooth), transform 0.8s var(--elastic-soft); } .welcome { font-size: 30px; font-weight: 600; margin-bottom: 14px; color: var(--text); text-shadow: 0 0 40px var(--welcome-glow); } .desc { font-size: 16px; color: var(--text-dim); line-height: 1.7; } .text-wrap.exit { opacity: 0; transform: translateY(-32px) scale(0.94); pointer-events: none; } /* ===== 标题 + 按钮区 ===== */ .buttons { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 40px; } .area-title { font-size: 36px; font-weight: 700; text-align: center; letter-spacing: 1.5px; background: var(--title-gradient); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: titleFlow 14s linear infinite; filter: drop-shadow(0 0 12px var(--title-glow)); } @keyframes titleFlow { from { background-position: 0% 50%; } to { background-position: 300% 50%; } } .area-sub { font-size: 13px; letter-spacing: 3px; color: var(--text-faint); text-transform: uppercase; /* 排版收紧：上贴主标题、下收与按钮区间距，释放中部主视觉空间。颜色 / 透明度 / 字重保持原样，仅调整垂直边距。 */ margin-top: -12px; margin-bottom: -4px; } /* ===== 按钮通用 ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 220px; padding: 16px 44px; border-radius: var(--radius-md); border: 1px solid var(--btn-border); font-size: 16px; font-weight: 500; letter-spacing: 0.5px; text-align: center; text-decoration: none; color: var(--btn-text); background: linear-gradient(135deg, var(--blue), var(--blue-light)); background-size: 200% 200%; background-position: 0% 50%; box-shadow: 0 4px 20px var(--accent-glow), inset 0 1px 0 var(--btn-inset); position: relative; overflow: hidden; cursor: pointer; transition: transform 0.35s var(--elastic-out), box-shadow 0.35s var(--smooth), background-position 0.6s ease, border-color 0.3s var(--smooth); will-change: transform; } .btn img.btn-icon { width: 22px; height: 22px; flex: none; } .btn:hover { transform: translateY(-3px) scale(1.02); background-position: 100% 50%; box-shadow: 0 12px 32px var(--accent-glow-strong), inset 0 1px 0 var(--btn-inset-hover); border-color: var(--btn-border-hover); } .btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.08s; box-shadow: 0 2px 8px var(--accent-glow); } /* 按钮扫光（hover 一次性过渡，无持续开销） */ .btn::after { content: ''; position: absolute; top: -50%; left: -75%; width: 30%; height: 200%; background: linear-gradient(90deg, transparent, var(--btn-sweep), transparent); transform: rotate(25deg); transition: left 0.6s var(--smooth); pointer-events: none; } .btn:hover::after { left: 130%; transition-duration: 0.4s; } /* 开发版按钮 */ .btn-dev { background: linear-gradient(135deg, var(--orange), var(--gold)); background-size: 200% 200%; background-position: 0% 50%; box-shadow: 0 4px 20px var(--orange-glow); } .btn-dev:hover { background-position: 100% 50%; box-shadow: 0 12px 30px var(--orange-glow); } /* 点击波纹 */ .btn .ripple { position: absolute; border-radius: 50%; background: var(--ripple-bg); transform: scale(0); animation: rippleAnim 0.6s ease-out forwards; pointer-events: none; } @keyframes rippleAnim { to { transform: scale(4); opacity: 0; } } /* ===== 折叠箭头 ===== */ .arrow { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; opacity: 0.65; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: opacity 0.3s ease, background 0.3s ease; } .arrow:hover { opacity: 1; background: var(--toggle-bg); } .arrow img { width: 24px; height: 24px; animation: arrowFloat 2.6s ease-in-out infinite alternate; transition: transform 0.4s var(--elastic-out), filter var(--theme-fade) ease; will-change: transform; } body[data-theme="light"] .arrow img { filter: invert(0.12) brightness(0.4); } .arrow.expanded img { animation: none; transform: rotate(180deg); } @keyframes arrowFloat { from { transform: translateY(0); } to { transform: translateY(-5px); } } /* ===== 折叠面板 ===== */ .collapse { display: grid; grid-template-rows: 0fr; opacity: 0.4; transition: grid-template-rows 0.55s var(--elastic-out), opacity 0.4s var(--smooth); } .collapse.open { grid-template-rows: 1fr; opacity: 1; } .collapse-inner { overflow: hidden; } /* ===== 共创社区介绍区块 ===== */ .intro { margin-top: var(--space-section); width: 100%; } /* 介绍区头部 */ .intro-head { text-align: center; margin-bottom: 28px; } .intro-kicker { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 3px; color: var(--blue); padding: 5px 16px; margin-bottom: 14px; border-radius: 999px; border: 1px solid var(--bg-card-border); background: var(--bg-card); } .intro-title { font-size: 26px; font-weight: 700; color: var(--text); margin-bottom: 12px; } .intro-lead { max-width: 560px; margin: 0 auto; font-size: 15px; line-height: 1.9; color: var(--text-dim); } /* 特性卡片网格 */ .intro-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 18px; } .feature-card { padding: 24px 24px 22px; text-align: left; } .card-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; margin-bottom: 16px; background: linear-gradient(135deg, var(--blue), var(--blue-light)); box-shadow: 0 6px 16px var(--accent-glow); } .card-icon img { width: 22px; height: 22px; } .feature-card h3 { font-size: 16.5px; font-weight: 600; color: var(--text); margin-bottom: 8px; } .feature-card p { font-size: 13.5px; line-height: 1.8; color: var(--text-dim); margin-bottom: 0; } /* 悬停抬升 */ .intro-card { background: var(--bg-card); border: 1px solid var(--bg-card-border); border-radius: var(--radius-lg); padding: 30px 34px; box-shadow: var(--shadow-card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--smooth), transform 0.8s var(--elastic-soft), border-color 0.3s ease, box-shadow var(--theme-fade) ease, background-color var(--theme-fade) ease; } .intro-card.show { opacity: 1; transform: translateY(0); } .intro-card.show:hover { border-color: var(--card-hover-border); box-shadow: 0 10px 34px var(--accent-glow); } /* 宽幅卡片（i18n 说明） */ .intro-wide h2 { font-size: 19px; font-weight: 600; color: var(--text); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .h2-icon { width: 20px; height: 20px; filter: drop-shadow(0 0 6px var(--h2-icon-glow)); } body[data-theme="light"] .h2-icon { filter: invert(0.2) sepia(0.4) saturate(4) hue-rotate(190deg); } .intro-wide p { font-size: 15px; line-height: 1.9; color: var(--text-dim); margin-bottom: 10px; } .intro-wide p:last-of-type { margin-bottom: 0; } .intro-wide strong { color: var(--text); font-weight: 600; } .intro-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .intro-tags span { font-size: 12.5px; padding: 5px 14px; border-radius: 999px; color: var(--text-dim); background: var(--bg-card); border: 1px solid var(--bg-card-border); transition: color var(--theme-fade) ease, border-color var(--theme-fade) ease, background-color var(--theme-fade) ease; } /* ===== 页脚 ===== */ .site-footer { position: fixed; bottom: 0; left: 0; width: 100%; padding: 14px; text-align: center; font-size: 12px; color: var(--text-faint); z-index: 2; } /* ===== 响应式 ===== */ @media (max-width: 640px) { body { padding: 20px 16px 60px; } .welcome { font-size: 22px; letter-spacing: 0.5px; } .desc { font-size: 14px; line-height: 1.75; } .area-title { font-size: 26px; letter-spacing: 1px; } .area-sub { font-size: 11px; } .btn { min-width: 100%; width: 100%; padding: 14px 24px; font-size: 15px; } .btn img.btn-icon { width: 19px; height: 19px; } .buttons { gap: 14px; margin-top: 32px; } .arrow { width: 38px; height: 38px; } .arrow img { width: 22px; height: 22px; } .brand { padding: 14px 16px; } .brand img.logo { width: 28px; height: 28px; } .theme-toggle { top: 14px; right: 14px; width: 40px; height: 40px; } .hamburger { top: 14px; right: 62px; width: 40px; height: 40px; } .settings-menu { top: 62px; right: 14px; } .welcome { font-size: clamp(20px, 6vw, 22px); } .area-title { font-size: clamp(23px, 7vw, 26px); } /* 介绍区移动端适配 */ .intro-head { margin-bottom: 20px; } .intro-title { font-size: 21px; } .intro-lead { font-size: 14px; } .intro-grid { grid-template-columns: 1fr; gap: 12px; } .intro-card { padding: 22px 20px; } .feature-card h3 { font-size: 15.5px; } .feature-card p { font-size: 13px; } .intro-wide h2 { font-size: 17px; } .intro-wide p { font-size: 14px; } #cursorGlow { display: none; } /* ===== 移动端专属入场动画方案（独立于桌面端模板） ===== 仅做淡入与极短位移，运动均朝 y 正方向（向下）或零位移，并配合顶部 brand 栏的可视遮挡，杜绝向上弹出、溢出视口顶部 */ .welcome, .desc, .area-title, .buttons { transform: none !important; /* 强制兜底：桌面端向上起始位移在移动端一律无效 */ transition: opacity 0.7s var(--smooth), color var(--theme-fade) ease !important; } .text-wrap { transition: opacity 0.55s var(--smooth), transform 0.55s var(--smooth); } .text-wrap.exit { transform: translateY(4px); } .btn { transition: opacity 0.6s var(--smooth), transform 0.35s var(--elastic-out), box-shadow 0.35s var(--smooth), background-position 0.6s ease, border-color 0.3s var(--smooth); } .arrow { transition: opacity 0.5s var(--smooth), background 0.3s ease; } .intro-card { transform: translateY(14px); transition: opacity 0.55s var(--smooth), transform 0.55s var(--smooth), border-color 0.3s ease, box-shadow var(--theme-fade) ease, background-color var(--theme-fade) ease; } .intro-card.show { transform: translateY(0); } .main-stage { margin-top: 72px; /* 距顶部 brand 栏留白，动画起始位始终不触碰顶栏 */ margin-bottom: auto; } .btn::after { display: none; } /* 关闭扫光：避免触屏下与位移过渡叠加的跳变 */ .theme-toggle:hover { transform: none; box-shadow: none; } } /* 中屏：双列即可特征卡片更紧凑 */ @media (min-width: 641px) and (max-width: 900px) { .intro-grid { gap: 14px; } .feature-card { padding: 20px; } } /* ===== 小屏手机（≤380px）：防止按钮文字挤压、顶栏重叠 ===== */ @media (max-width: 380px) { body { padding: 16px 12px 48px; } .welcome { font-size: clamp(19px, 7vw, 21px); } .desc { font-size: 13.5px; line-height: 1.7; } .area-title { font-size: clamp(21px, 8vw, 24px); } .btn { padding: 13px 16px; font-size: 14.5px; } .brand { padding: 12px 12px; } .brand img.logo { width: 26px; height: 26px; } /* 顶栏两个圆形按钮在极窄屏收紧间距，避免与品牌区重叠 */ .theme-toggle { top: 12px; right: 12px; width: 38px; height: 38px; } .hamburger { top: 12px; right: 56px; width: 38px; height: 38px; } .settings-menu { top: 56px; right: 12px; left: 12px; width: auto; } .intro-card { padding: 18px 16px; } .feature-card h3 { font-size: 15px; } .feature-card p { font-size: 12.5px; } .main-stage { margin-top: 64px; } } /* ===== 横屏矮视口：避免首屏内容被顶栏与箭头挤压 ===== */ @media (max-height: 480px) and (orientation: landscape) { body { padding: 14px 16px 40px; } .main-stage { margin-top: 56px; } .welcome { font-size: 20px; } .desc { font-size: 13px; line-height: 1.6; } .buttons { margin-top: 20px; gap: 10px; } .btn { padding: 11px 20px; } .arrow { width: 32px; height: 32px; } .arrow img { width: 18px; height: 18px; } } /* ===== 平板竖屏 / 大屏手机（641–1024px）：网格平滑过渡 ===== */ @media (min-width: 641px) and (max-width: 1024px) { .intro-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature-card { padding: 22px; } } /* ===== 桌面端布局优化（≥1025px）===== 思路：内容区统一限宽居中，避免超宽屏文字行过长；特征网格由 2 列渐进升级到 4 列，填满宽屏横向空间。 */ @media (min-width: 1025px) { /* 内容区限宽策略： .intro 是 .main-stage 的子元素，其 width:100% 会被父级 max-width 截断，因此介绍区改用「负边距 + 自身限宽」脱离父级约束，实现比主舞台更宽的展示区。 */ .main-stage { max-width: 880px; width: 100%; } .intro { /* 父级 .main-stage 限宽 880px，介绍区向两侧各扩 40px 并保持居中 */ width: 960px; max-width: calc(100vw - 40px); /* 窄于视口时回退，防止横向溢出 */ margin-left: -40px; margin-right: -40px; } .intro-wide { max-width: 1160px; } .intro-grid { gap: 20px; margin-bottom: 20px; } .feature-card { padding: 26px 28px 24px; } /* 段落行宽控制：避免 2 列时单行文字过长，保持阅读连贯性 */ .feature-card p { max-width: 34em; } .intro-wide p { max-width: 56em; margin-left: auto; margin-right: auto; } .intro-lead { max-width: 640px; } /* 沿用窄行设计，仅随屏宽小幅放宽 */ .welcome { font-size: 34px; } .area-title { font-size: 40px; } .desc { font-size: 17px; } } /* ===== 桌面端（1025–1279px）：保持 2 列，卡片更舒展 ===== */ @media (min-width: 1025px) and (max-width: 1279px) { .intro-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .feature-card { padding: 24px 22px 22px; } .feature-card p { max-width: none; } } /* ===== 大桌面（≥1280px）：3 列布局，卡宽稳定在舒适阅读区间 ===== */ @media (min-width: 1280px) { .intro-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .feature-card { padding: 26px 24px 24px; } .feature-card p { max-width: none; } .card-icon { width: 46px; height: 46px; } /* 桌面端才启用悬停抬升：触屏设备无 hover，避免在移动端产生粘滞感 */ .intro-card.show:hover { transform: translateY(-6px); } } /* ===== 超宽屏（≥1600px）：放大字号并进一步放宽内容区 ===== */ @media (min-width: 1600px) { .main-stage { max-width: 960px; } .intro { width: 1100px; max-width: calc(100vw - 40px); margin-left: -70px; margin-right: -70px; } .intro-wide { max-width: 1280px; } .welcome { font-size: 42px; } .area-title { font-size: 46px; } .desc { font-size: 18px; } .intro-head { margin-bottom: 36px; } .intro-grid { gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ===== 2K / 超宽带鱼屏（≥1920px）：防止内容被拉伸至失真 ===== */ @media (min-width: 1920px) { .main-stage { max-width: 1040px; } .intro { width: 1280px; max-width: calc(100vw - 40px); margin-left: -120px; margin-right: -120px; } .intro-wide { max-width: 1360px; } } /* ===== 超大屏（≥2200px）：锁定列宽上限并居中，避免单卡被拉伸过宽 ===== */ @media (min-width: 2200px) { .intro-grid { grid-template-columns: repeat(3, minmax(0, 420px)); justify-content: center; gap: 32px; } } /* ===== 无障碍：减少运动偏好 ===== */ @media (prefers-reduced-motion: reduce) { .area-title, .arrow img { animation: none; } .text-wrap, .buttons, .btn, .bg-img, .intro-card { transition-duration: 0.15s; } html { scroll-behavior: auto; } } /* 动画加速开关：若 .anim-slow 启用，统一放慢所有过渡 */ .anim-slow .welcome, .anim-slow .desc, .anim-slow .area-title, .anim-slow .buttons, .anim-slow .btn, .anim-slow .arrow, .anim-slow .intro-card { transition-duration: 1.2s !important; transition-timing-function: var(--smooth) !important; }