/* ============================================================================ IVY · MOBILE SHARED RESPONSIVE KIT — 0714 (adapted for the 0710 deliverable) 源：homepage-ch-mobile.html 提取的断点体系；本版为 NAV v2（：玻璃只包中间 tab 药丸 + 滚动后 .nav--bar 满宽条）适配版。 ★ 加载位置：里放在 motion.css 之后（全页最后一个 stylesheet），这样无需提高选择器权重即可覆盖 motion.css 的 @1100 窄屏兜底。断点：≤1100 nav 换汉堡 · ≤1024 平板 · ≤768 手机 · ≤480 小屏手机；≥1025 桌面不变 ============================================================================ */ /* ================================================================================ NAV → 汉堡 + 全屏菜单（≤1100px）。≥1101px 桌面 nav（v2 药丸 / v3 bar）完全不受影响。 v2 适配：外层 .nav--v2 本就透明（玻璃在 .nav__links 药丸上）→ 隐藏药丸+语言，汉堡自带玻璃底，透明外壳与滚动后的 .nav--bar 两种形态下都成立。 ================================================================================ */ a, button{ -webkit-tap-highlight-color:transparent; } /* 0716 审计：iOS 点按灰闪统一关闭 */ @media (max-width:1100px){ .nav{ grid-template-columns:1fr auto; gap:12px; } /* logo 左 · 汉堡右 */ .nav__links, .nav__lang{ display:none !important; } /* 移入全屏菜单 */ .nav__logo{ justify-self:start; } .nav.nav--bar{ padding:0 20px; } /* 滚动满宽条：80→20 */ /* 汉堡按钮 — 玻璃圆形 tap target（自带底色，不依赖外壳玻璃） */ .nav__burger{ justify-self:end; position:relative; display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:44px; height:44px; padding:0; margin:0; border:0; border-radius:50%; cursor:pointer; /* 0716 审计：40→44 触控标准 */ background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(8px) var(--glass-feel); backdrop-filter:blur(8px) var(--glass-feel); box-shadow:inset 0 1px 1px rgba(255,255,255,.9), 0 4px 12px -8px rgba(var(--c-ink-rgb),.4); -webkit-tap-highlight-color:transparent; transition:background .3s var(--ease); } .nav__burger:hover{ background:rgba(255,255,255,.7); } .nav__burger .bar{ display:block; width:18px; height:1.5px; border-radius:2px; background:var(--c-ink); transition:transform .35s var(--ease), opacity .25s var(--ease); } body.nav-open .nav__burger .bar:nth-child(1){ transform:translateY(6.5px) rotate(45deg); } body.nav-open .nav__burger .bar:nth-child(2){ opacity:0; } body.nav-open .nav__burger .bar:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); } } @media (min-width:1101px){ .nav__burger{ display:none !important; } } /* ---- 全屏菜单 .navov —— JS 一次性构建，挂末。奶白蓝图画布。 ---- */ .navov{ position:fixed; inset:0; z-index:1150; display:flex; flex-direction:column; overscroll-behavior:contain; background:var(--c-bg); color:var(--c-ink); opacity:0; visibility:hidden; transform:scale(1.015) translateY(-8px); transition:opacity .42s var(--ease), transform .5s var(--ease-soft), visibility 0s linear .42s; } /* z-index 1150：高于 nav(100)，低于页面切换幕帘 tx-fade/tx-slats(1200+) —— 点菜单项跳页时幕帘盖住菜单 */ .navov.open{ opacity:1; visibility:visible; transform:none; transition:opacity .42s var(--ease), transform .55s var(--ease-soft), visibility 0s; } .navov::before{ content:""; position:absolute; left:50%; top:38%; z-index:0; pointer-events:none; width:min(820px,120%); aspect-ratio:1/1; transform:translate(-50%,-50%); background:radial-gradient(circle at center, var(--c-accent-wash) 0%, rgba(var(--c-accent-rgb),.02) 40%, rgba(var(--c-accent-rgb),0) 70%); } .navov__inner{ position:relative; z-index:1; flex:1; min-height:0; display:flex; flex-direction:column; width:100%; max-width:760px; margin:0 auto; padding:18px var(--page-x) calc(env(safe-area-inset-bottom,0px) + 28px); } /* 顶栏：logo + ✕ */ .navov__top{ flex:0 0 auto; height:56px; display:flex; align-items:center; justify-content:space-between; } .navov__logo img{ height:27px; width:auto; display:block; } .navov__close{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid var(--c-hairline); border-radius:50%; cursor:pointer; background:rgba(255,255,255,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--c-ink); -webkit-tap-highlight-color:transparent; transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); } .navov__close:hover{ background:rgba(255,255,255,.8); border-color:var(--c-accent-line); } .navov__close svg{ width:18px; height:18px; display:block; } /* 菜单项：大号中文、整宽行、L 角标 + 罗马序号 */ .navov__menu{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:10px; padding:24px 0; } .navov__item{ position:relative; display:flex; align-items:center; justify-content:space-between; padding:18px 18px; border:1px solid var(--c-hairline); background:rgba(255,255,255,.18); font-family:var(--ff-sc); font-weight:400; font-size:18px; line-height:1.1; letter-spacing:-0.3px; /* 0716 Vera 定稿：18/regular（原 clamp22-28/500） */ color:var(--c-ink); -webkit-tap-highlight-color:transparent; transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease); } .navov__item:hover, .navov__item:focus-visible{ background:rgba(var(--c-accent-rgb),.06); border-color:var(--c-accent-line); color:var(--c-accent); outline:none; } .navov__item .corner{ position:absolute; width:12px; height:12px; opacity:.55; pointer-events:none; } .navov__item .corner.tl{ left:9px; top:9px; border-left:1px solid var(--c-accent); border-top:1px solid var(--c-accent); } .navov__item .corner.br{ right:9px; bottom:9px; border-right:1px solid var(--c-accent); border-bottom:1px solid var(--c-accent); } .navov__item .rn{ font-family:var(--ff-sans); font-weight:500; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--c-muted); transition:color .35s var(--ease); } .navov__item:hover .rn, .navov__item:focus-visible .rn{ color:var(--c-accent); } /* 底部：中/EN 切换 + 社交行 */ .navov__foot{ flex:0 0 auto; display:flex; flex-direction:column; gap:22px; padding-top:8px; } .navov__lang{ display:flex; gap:10px; } .navov__lang a{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 0; border:1px solid var(--c-hairline); border-radius:999px; font-family:var(--ff-sans); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--c-slate); background:rgba(255,255,255,.3); -webkit-tap-highlight-color:transparent; transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); } .navov__lang a:hover, .navov__lang a.is-active{ background:rgba(var(--c-accent-rgb),.08); border-color:var(--c-accent-line); color:var(--c-accent); } .navov__social{ display:flex; gap:12px; align-items:center; justify-content:center; padding-top:22px; border-top:1px solid var(--c-hairline); } /* 0720 R2-4：社媒图标居中 */ .navov__social a{ position:relative; width:48px; height:48px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.3); border:1px solid var(--c-hairline); transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease); } .navov__social a:hover{ transform:translateY(-3px); background:rgba(255,255,255,.6); border-color:var(--c-accent-line); } .navov__social a > img{ width:22px; height:22px; display:block; } /* 0720 R2-4：>img 直子选择器——别误缩 .qrpop 里的二维码图 */ .navov__social a.big > img{ width:26px; height:26px; } /* 0720 R2-4：微信/小红书点击 → icon 上方浮出二维码（触屏无 hover，用 .qr-open 由 mobile-nav.js 切；样式对齐 footer qrpop，方向朝上） */ .navov__social a .qrpop{ position:absolute; bottom:calc(100% + 12px); left:50%; width:132px; padding:8px; box-sizing:border-box; background:#fff; border:1px solid var(--c-hairline); border-radius:0; box-shadow:0 18px 40px rgba(0,0,0,.18); opacity:0; transform:translate(-50%,8px); pointer-events:none; z-index:6; transition:opacity .3s var(--ease), transform .3s var(--ease); } .navov__social a.qr-open .qrpop{ opacity:1; transform:translate(-50%,0); } .navov__social a.qr-open{ background:rgba(var(--c-accent-rgb),.08); border-color:var(--c-accent-line); } .navov__social .qrpop img{ display:block; width:100%; height:auto; } /* 菜单项进场 stagger */ .navov__item{ opacity:0; transform:translateY(14px); transition:opacity .45s var(--ease), transform .5s var(--ease-soft), background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease); } .navov.open .navov__item{ opacity:1; transform:none; } .navov.open .navov__item:nth-child(1){ transition-delay:.06s,.06s,0s,0s,0s; } .navov.open .navov__item:nth-child(2){ transition-delay:.12s,.12s,0s,0s,0s; } .navov.open .navov__item:nth-child(3){ transition-delay:.18s,.18s,0s,0s,0s; } .navov.open .navov__item:nth-child(4){ transition-delay:.24s,.24s,0s,0s,0s; } .navov.open .navov__item:nth-child(5){ transition-delay:.30s,.30s,0s,0s,0s; } /* 0716：+首页共 5 项 */ @media (prefers-reduced-motion:reduce){ .navov{ transition:opacity .001s, visibility 0s; transform:none; } .navov.open{ transition:opacity .001s, visibility 0s; } .navov__item{ opacity:1; transform:none; transition:background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease); } .navov.open .navov__item{ transition-delay:0s; } .nav__burger .bar, .navov__close, .navov__social a, .navov__lang a, .navov__item{ transition:none; } } /* ---- FOOTER 二维码 hover 弹层 · 层叠修复（无条件，全断点；桌面无视觉变化）---- a:hover 的 transform(translateY(-3px)) 会生成 stacking context，把 .qrpop 的 z-index:6 困在锚点自身层级(z:auto)；堆叠布局(≤1024)下二维码正好落在地址卡上，被卡内文字(z:2)叠穿。桌面二维码落在空白区所以从不暴露。修：整组图标(flex item，z-index 直接生效)提到相邻块之上，hover 锚点再抬一档。 */ .footer__social{ position:relative; z-index:5; } .footer__social a:hover{ z-index:7; } /* ---------------------------------------------------------------- ≤1024 平板 */ @media (max-width:1024px){ /* rail 64→32：--page-x 收到 48 后必须同步收导轨，维持桌面 rail < page-x 的 16px 内距关系（64/80 → 32/48），否则 section 内容会越到竖导轨外侧。 band 横线的 margin:calc(rail - page-x) 机制随之自动对齐到导轨。 */ :root{ --page-x:48px; --gap:96px; --rail:32px; } /* 页面自己的多列栅格在各页 mobile