/* ════════════════════════════════════════════════════════════════════════ responsive.css · MagicDawn 移动端响应式覆盖（P0 阶段） ──────────────────────────────────────────────────────────────────────── 架构契约： 1. **PC 不进入**：所有规则都包在 @media (max-width: 1023.98px) 内 → ≥ 1024px 视口完全跑现有 css/base.css + layout.css + home.css， PC 端功能与外观 100% 不变 2. **叠加而非重写**：仅追加移动端必需的覆盖，不删除/修改任何旧规则 3. **token 驱动**：所有数值引用 css/_tokens.css 的 --* 变量 覆盖范围（P0）： · 汉堡按钮（mobile-nav-toggle）：PC 默认 hidden，移动端显示 · 抽屉（mobile-drawer）：默认隐藏，.is-open 时滑入 · header / nav 高度从 80px 改为 60px，body padding-top 同步 · 隐藏 PC 横向 nav-links 与 nav-cta 中 PC 元素，搬到 drawer · iOS 安全区：header / footer / drawer / 二次 CTA · academic iframe 高度算式修正 · hero / pillars / partners / contact / footer 的小屏字号与间距 触发顺序（在 index.html 的 中）： base.css → layout.css → modal.css → home.css → products.css → ... → _tokens.css （定义变量） → responsive.css （此文件，覆盖移动端） ════════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════════ 一、汉堡按钮（PC 默认 hidden，移动端激活） ──────────────────────────────────────────────────────────────────── PC 默认隐藏，仅小屏可见。位置：nav 右侧（紧贴 nav-cta 之后或代替 nav-cta）。 设计采用三横线 → X 的经典动画（CSS-only），尺寸 44×44 满足 a11y。 ════════════════════════════════════════════════════════════════════════ */ .mobile-nav-toggle { /* 默认：PC 端不可见 */ display: none; width: var(--tap-min); height: var(--tap-min); padding: 0; background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); color: var(--text-primary); cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0; -webkit-tap-highlight-color: transparent; transition: border-color 0.2s ease, background 0.2s ease; } .mobile-nav-toggle:hover { border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.04); } .mobile-nav-toggle:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; } /* 三横线（用 span 子元素 + ::before/::after 任意一种皆可，这里走 3 个 span 方便单独动画） */ .mobile-nav-toggle .bar { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 1px; transition: transform 0.28s ease, opacity 0.2s ease; } .mobile-nav-toggle .bar + .bar { margin-top: 4px; } /* 打开态：变 X */ .mobile-nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } .mobile-nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; } .mobile-nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ════════════════════════════════════════════════════════════════════════ 二、抽屉（drawer）+ 遮罩 ── 默认完全隐藏；.is-open 滑入 ──────────────────────────────────────────────────────────────────── PC 永远不显示（display:none）；只有移动端 @media 块内才解锁。 滑入用 transform，避免重排；遮罩单独一层，点击空白关闭。 ════════════════════════════════════════════════════════════════════════ */ .mobile-drawer { /* 默认 PC 上完全不存在 */ display: none; } .mobile-drawer-overlay { display: none; } /* ════════════════════════════════════════════════════════════════════════ 三、移动端覆盖（≤ 1023.98px） ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1023.98px) { /* ── 3.1 全局：变量补丁 ───────────────────────────────────── */ /* 移动端 body 顶部留 60px（导航高度） + iOS 安全区 注：base.css 写死 padding-top:80px，这里覆盖为变量驱动 */ body { padding-top: calc(var(--nav-h-mobile) + var(--safe-top)); } /* ── 3.2 header / nav 缩矮 ─────────────────────────────────── */ header { /* 适配 iOS 安全区：刘海下沉 */ padding-top: var(--safe-top); } header > nav { padding: 0.6rem var(--gutter); min-height: var(--nav-h-mobile); } .logo-img { height: 42px !important; width: auto !important; /* 保持图片原始宽高比，避免移动端 logo 被压成正方形 */ } /* ── 3.3 隐藏 PC 横向导航与部分 CTA 元素，搬到 drawer ── */ header .nav-links { display: none !important; /* drawer 里展示 */ } header .nav-cta #login-buttons, header .nav-cta #user-menu, header .nav-cta .lang-switcher { display: none !important; /* drawer 底部展示 */ } /* 搜索按钮在 nav 右侧保留（已是图标，触控合适） */ /* ── 3.4 显示汉堡按钮 ────────────────────────────────── */ .mobile-nav-toggle { display: inline-flex; } /* ── 3.5 drawer 启用 ──────────────────────────────────── */ .mobile-drawer { display: flex; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; width: min(82vw, 360px); background: rgba(9, 9, 14, 0.985); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-left: 1px solid rgba(255, 255, 255, 0.08); box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5); z-index: var(--z-mobile-drawer); transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s; visibility: hidden; overflow: hidden; padding-top: var(--safe-top); padding-bottom: var(--safe-bot); } .mobile-drawer.is-open { transform: translateX(0); visibility: visible; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; } .mobile-drawer-overlay { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: var(--z-mobile-drawer-overlay); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; } .mobile-drawer-overlay.is-open { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s; } /* drawer 内部 ── header / nav / footer 三段 */ .mobile-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1rem 0.6rem 1.4rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-shrink: 0; min-height: var(--nav-h-mobile); } .mobile-drawer-title { font-size: var(--font-sm); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); } .mobile-drawer-close { width: var(--tap-min); height: var(--tap-min); background: transparent; border: none; color: var(--text-primary); font-size: 1.6rem; line-height: 1; cursor: pointer; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } .mobile-drawer-close:hover { background: rgba(255, 255, 255, 0.05); } .mobile-drawer-close:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; } .mobile-drawer-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--space-2) 0; } .mobile-drawer-link, .mobile-drawer-group > summary { display: flex; align-items: center; gap: 0.65rem; padding: 0.95rem 1.4rem; min-height: var(--tap-min); color: var(--text-primary); font-size: var(--font-base); font-weight: 500; text-decoration: none; cursor: pointer; background: transparent; border: none; width: 100%; text-align: left; font-family: inherit; -webkit-tap-highlight-color: transparent; transition: background 0.2s ease, color 0.2s ease; } .mobile-drawer-link:active, .mobile-drawer-group > summary:active { background: rgba(255, 255, 255, 0.05); } .mobile-drawer-link.is-active { color: var(--primary-color); } /* details/summary 折叠（产品子菜单） */ .mobile-drawer-group { border-bottom: 1px solid transparent; } .mobile-drawer-group[open] { background: rgba(255, 255, 255, 0.015); } .mobile-drawer-group > summary { list-style: none; position: relative; } .mobile-drawer-group > summary::-webkit-details-marker { display: none; } .mobile-drawer-group > summary::after { content: '▾'; margin-left: auto; font-size: 0.85rem; color: var(--text-secondary); transition: transform 0.25s ease; } .mobile-drawer-group[open] > summary::after { transform: rotate(180deg); } .mobile-drawer-sublist { padding: 0 0 0.4rem; } .mobile-drawer-sublist .mobile-drawer-link { padding-left: 2.4rem; font-size: var(--font-sm); font-weight: 400; color: var(--text-secondary); gap: 0.5rem; } .mobile-drawer-sublist .mobile-drawer-link .tag { font-family: 'DM Mono', ui-monospace, monospace; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; color: var(--primary-color); opacity: 0.8; min-width: 70px; } .mobile-drawer-sublist .mobile-drawer-link .badge { margin-left: auto; font-size: 0.62rem; padding: 2px 6px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text-secondary); } .mobile-drawer-sublist .mobile-drawer-link .badge.is-available { color: var(--primary-color); border-color: rgba(0, 204, 128, 0.4); background: rgba(0, 204, 128, 0.08); } .mobile-drawer-sublist .mobile-drawer-link .badge.is-beta { color: #8aa6ff; border-color: rgba(138, 166, 255, 0.4); } /* drawer footer：语言切换 + 登录 */ .mobile-drawer-footer { flex-shrink: 0; padding: 1rem 1.4rem calc(1rem + var(--safe-bot)); border-top: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; gap: 0.85rem; background: rgba(0, 0, 0, 0.2); } .mobile-drawer-lang { display: flex; gap: 0.5rem; } .mobile-drawer-lang .lang-btn { flex: 1; min-height: var(--tap-min); background: transparent; border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text-secondary); border-radius: var(--radius-md); font-family: inherit; font-size: var(--font-sm); cursor: pointer; transition: all 0.2s ease; } .mobile-drawer-lang .lang-btn.active { color: var(--primary-color); border-color: rgba(0, 204, 128, 0.45); background: rgba(0, 204, 128, 0.08); } .mobile-drawer-cta .btn { width: 100%; min-height: var(--tap-min); font-size: var(--font-base); } /* body 滚动锁定（drawer 打开时） */ body.is-drawer-open { overflow: hidden; } /* ── 3.6 hero 区收紧 ────────────────────────────────────── */ .hero { height: auto; /* dvh 修复 iOS 视口跳动；老浏览器降级用 calc(100vh - nav)，最差也不会撑爆 */ min-height: calc(100dvh - var(--nav-h-mobile)); padding: 3.5rem var(--gutter) 3rem; } .hero-content { padding: 0; } /* ── P1：Hero 字号流体化（替换 home.css 里 8rem / 2rem / 1.3rem 的魔术值）── 特异性 (0,1,0) 与 home.css 内 .hero-title/subtitle 相同；本文件后加载 → 胜出 clamp 公式从 320px 平滑过渡到 1024px，避免 home.css `@max 768 { 4rem }` 突变 */ .hero-title { font-size: clamp(2.6rem, 7vw + 0.8rem, 5.8rem); letter-spacing: -1px; line-height: 1.05; } .hero-subtitle { font-size: clamp(1.05rem, 1.8vw + 0.55rem, 1.6rem); margin-bottom: 1.2rem; } .hero-description { font-size: clamp(0.92rem, 1.2vw + 0.55rem, 1.15rem); margin-bottom: 2rem; line-height: 1.6; } .hero-cta-group { flex-direction: column; align-items: stretch; gap: 0.75rem; } .hero-cta-group .btn, .hero-cta-group .hero-cta-secondary { width: 100%; justify-content: center; min-height: var(--tap-min); } /* ── 3.7 主要按钮触控尺寸保底 ─────────────────────────── */ .btn { min-height: var(--tap-min); display: inline-flex; align-items: center; justify-content: center; } /* ── 3.8 hover 隔离：触屏不要"黏住"高亮态 ──────────────── 把容易误触的 transform 类 hover 关掉；颜色类 hover 仍保留无伤大雅 */ .pillar-card:hover, .pillar-card-v2:hover, .partner-item:hover, .news-item:hover, .stat-card:hover, .feature-row:hover, .eco-card:hover, .eco-card-compact:hover { transform: none; } /* ── 3.9 academic iframe 视口高度修正 ───────────────────── 原 inline style 写死 `calc(100vh - 64px)`，与移动端 60px nav 不匹配； 这里用 dvh 修复 iOS 视口跳动 */ #view-academic { /* !important 用于压过 inline style */ height: calc(100dvh - var(--nav-h-mobile)) !important; } /* ── 3.10 partners 区：触控间距 + lazy 友好 ─────────────── */ .partner-item { margin-right: 1.2rem; width: 96px; } .partner-icon-wrap { width: 80px; height: 80px; } /* ── 3.11 contact 区纵向化（vdivider 改横线） ─────────── */ .contact-panel { flex-direction: column; padding: 1.8rem 1.4rem; gap: 1.5rem; } .contact-vdivider { width: 60%; height: 1px; margin: 0 auto; } /* ── 3.12 footer：safe-area + 字号 ─────────────────────── */ footer.site-footer, footer { padding-bottom: calc(1.5rem + var(--safe-bot)) !important; } .site-footer-inner { padding: 0 var(--gutter); } .site-footer-legal { flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.8rem; font-size: var(--font-xs); } /* ── 3.13 modal 全屏化（避免 600px 撑爆 375px 屏） ─────── */ .modal-overlay .login-modal, .modal-overlay .modal-agreement { max-width: min(92vw, 600px); margin: 0 auto; } /* ── 3.14 user-menu-dropdown 改全宽（如果未登录态切到登录态后用户在移动端打开） */ .user-menu-dropdown { width: min(92vw, 360px); right: 0.5rem; } } /* ════════════════════════════════════════════════════════════════════════ 四、≤ 640px（小屏微调 — hero 字号已由上一段 clamp 处理，此处只放小屏特有的） ════════════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { /* 区块标题在 ≤640 进一步收紧（避免 home.css 的 .section-title 默认值过大） */ .section-title { font-size: var(--font-2xl) !important; } /* contact qr 略放大（≤640 联系区已纵排，QR 是关键焦点） */ .contact-qrcode { width: 140px; height: 140px; } /* P1：partners 区在小屏进一步收紧轨道节奏（96px logo 在 360px 屏会显大） */ .partner-item { margin-right: 1rem; width: 88px; } .partner-icon-wrap { width: 72px; height: 72px; } /* P1：pillars 横滑卡片在 360px 屏进一步收紧 padding */ #pillars-section { padding: 3rem 0.75rem 2.5rem !important; } /* P1：eco-stage-grid 在小屏强制 1 列（home.css `auto-fit minmax(380px,1fr)` 在 379px 屏才会单列）*/ .eco-stage-grid { grid-template-columns: 1fr !important; padding: 0 var(--gutter) !important; } } /* ════════════════════════════════════════════════════════════════════════ 五、hover 隔离：仅在真正支持 hover 的设备上保留 hover 效果 ──────────────────────────────────────────────────────────────────── 触屏点击会触发一次模拟 hover，导致按钮"黏住"高亮态。 这条规则覆盖范围更广（不限于 ≤1023px）：所有 (hover: none) 的指针设备 （包括平板横屏、横屏 iPad）都跳过 transform/box-shadow 类悬停效果。 ════════════════════════════════════════════════════════════════════════ */ @media (hover: none) { .pillar-card:hover, .pillar-card-v2:hover, .partner-item:hover, .news-item:hover, .stat-card:hover, .eco-card:hover, .eco-card-compact:hover, .card-interactive:hover { transform: none; box-shadow: none; } }