/* ========================================================================== SmartSF Cam — "LIVE FEED" 设计系统 namespace: lf- -------------------------------------------------------------------------- 想法：这台机器自己的输出就是设计语言。真实录像上有等宽 OSD（品牌+时间戳+ FRONT/CABIN 角标）、REC 红点、锁定图标——全站用这套 chrome 组织信息， 天然密集（「热闹」），且只有我们做得出（素材是自己品牌的真录像）。 节奏：暗的电影带 ←→ 亮的内容区 交替，避免一路到底的沉闷。 ========================================================================== */ @font-face{ font-family:"Jakarta"; src:url("../img/jakarta-var.woff2") format("woff2-variations"); font-weight:200 800; font-style:normal; font-display:swap; } @font-face{ font-family:"Plex Mono"; src:url("../img/plexmono-400.woff2") format("woff2"); font-weight:400; font-display:swap } @font-face{ font-family:"Plex Mono"; src:url("../img/plexmono-500.woff2") format("woff2"); font-weight:500; font-display:swap } @font-face{ font-family:"Plex Mono"; src:url("../img/plexmono-600.woff2") format("woff2"); font-weight:600; font-display:swap } :root{ /* 🔴 必须声明，否则 Android Chrome 的「网页内容自动深色」会把整站强制反色 —— 而本站是「白底浅灰卡 ←→ 深色影像带交替」，反色后浅区变深、webp 产品图与视频 不跟着变，整页明暗打架（2026-09-15 终审）。顺带让原生表单控件（Kit 下拉、 结账输入框）在深色系统下保持浅色外观。日后真做深色版再改成 `light dark`。 */ color-scheme: light; /* 默认＝亮区（全站主基调） */ --ink:#0F1922; --ink-2:#4E5D68; --ink-3:#7F8F9B; --bg:#F7FAFB; --bg-1:#EDF2F5; --bg-2:#FFFFFF; --bg-3:#F5F9FA; --line:#E1E8EC; --line-2:#C6D2DA; --shadow:0 20px 48px -26px rgba(16,38,56,.22); --teal:#1290A8; --teal-hi:#19B4D1; --teal-deep:#0B6272; --teal-dim:rgba(14,151,168,.10); --warm:#4FB0C9; --warm-dim:rgba(79,176,201,.14); --star:#E8A93A; --rec:#E8362B; --amber:#B9791A; --ok:#17915E; --f-dis:"Jakarta",system-ui,-apple-system,"Segoe UI","Helvetica Neue",sans-serif; --f-mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --pad:clamp(18px,4.2vw,48px); --maxw:1280px; --r:20px; --r-lg:28px; /* 夜色交接色：深色影像区块「收在」这个颜色，过渡带也从这个颜色「起步」。 硬线的根因永远是两端不同色 —— 统一成一个 token，就不会再各调各的。 */ --night:#1A2632; } /* 暗区：只翻转这一组 token。刻意不用纯黑，避免压抑。 🔴 2026-09-13 补上 .lf-band / .lf-stage-sec —— 它们画的是深底，却一直没带 .lf-dark， 于是里面的字仍在用浅色模式的 token。实测首页影像带里的 `02 · Guards` 是 #0B6272 压在深底上，对比度只有 2.2:1（AA 要 4.5）。这个问题在改配色之前就存在， 只是那时底更黑（约 1.9:1），更看不出来是配色错而不是「本来就暗」。 */ .lf-dark,.lf-band,.lf-stage-sec{ /* 2026-09-13 Jed：「整体还是太黑」。实测 /app/ 一页深色占 41%，而深色用的是 近黑（#0E151C 亮度只有 21/255），读起来像黑洞不像夜色。 这里把整组深色抬到**深石板蓝**：夜间行车的气质留住，压抑感去掉。 实测对比度：正文 13.8:1、次级文字 7.4:1、teal 强调色 6.6:1，都远高于 AA 的 4.5。 过渡带两端的颜色是 live.js 实测邻居后回写的，会自动跟着变，不用手改。 */ --ink:#EDF4F7; --ink-2:#AEBECA; --ink-3:#8496A3; --bg:var(--night); --bg-1:#212E3B; --bg-2:#26333F; --bg-3:#31404E; --line:#35434F; --line-2:#4A5A6A; --shadow:0 26px 62px -30px rgba(0,0,0,.86); --teal:#3FC2E0; --teal-hi:#79E4FA; --teal-deep:#3FC2E0; --teal-dim:rgba(49,200,216,.15); --warm:#6ED0E8; --warm-dim:rgba(110,208,232,.16); --star:#F0B94A; --rec:#FF4438; --amber:#FFB020; background:var(--bg); color:var(--ink); } *,*::before,*::after{ box-sizing:border-box } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth } @media(prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } } body.lf{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-dis); font-size:16.5px; line-height:1.68; font-synthesis-weight:none; -webkit-font-smoothing:antialiased; overflow-x:hidden } img,video{ max-width:100%; display:block } a{ color:inherit } ::selection{ background:var(--teal); color:#04181B } .lf-wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad) } /* ---------- OSD 语汇 ---------- */ .lf-osd{ font-family:var(--f-dis); font-size:14px; letter-spacing:.01em; text-transform:none; color:var(--ink-3); display:inline-flex; align-items:center; gap:9px; font-weight:640 } /* 视频画面上的 OSD 才用等宽（那是机器自己的字） */ .lf-band__hud .lf-osd,.lf-open__hud .lf-osd,.lf-phone__hud .lf-osd{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:500 } .lf-osd--teal{ color:var(--teal-deep) } .lf-rec{ width:8px; height:8px; border-radius:50%; background:var(--rec); flex:none; box-shadow:0 0 0 0 rgba(255,59,48,.6); animation:lf-pulse 1.8s ease-out infinite } @keyframes lf-pulse{ 70%{ box-shadow:0 0 0 8px rgba(255,59,48,0) } 100%{ box-shadow:0 0 0 0 rgba(255,59,48,0) } } .lf-chan{ font-family:var(--f-mono); font-size:10px; font-weight:500; letter-spacing:.12em; padding:4px 8px; border:1px solid rgba(255,255,255,.36); border-radius:5px; color:#fff; background:rgba(0,0,0,.36); backdrop-filter:blur(3px); text-transform:uppercase; white-space:nowrap } .lf-stamp{ font-family:var(--f-mono); font-size:11px; color:rgba(255,255,255,.92); text-shadow:0 1px 3px rgba(0,0,0,.9) } /* ---------- 排版尺度（整体放大一档） ---------- */ .lf-h2{ font-size:clamp(30px,5.2vw,58px); font-weight:800; line-height:1.03; letter-spacing:-.026em; margin:0; text-wrap:balance } .lf-h3{ font-size:clamp(20px,2.4vw,27px); font-weight:700; line-height:1.18; letter-spacing:-.015em; margin:0 } .lf-lede{ font-size:clamp(16.5px,1.8vw,20px); color:var(--ink-2); line-height:1.66; margin:0; max-width:64ch } .lf-sm{ font-size:13.5px; color:var(--ink-3); line-height:1.58 } .lf-num{ font-variant-numeric:tabular-nums; font-weight:800; text-decoration:none; font-weight:600; font-size:14.5px; border-bottom:1px solid currentColor; padding-bottom:2px; opacity:.9 } .lf-link:hover{ border-color:currentColor } /* ---------- hidden 守卫（必须在任何 display 规则之前生效） ---------- .lf-modal{display:grid} / .lf-drawer{display:flex} 与 UA 的 [hidden]{display:none} 同优先级，作者样式胜出 → 隐藏元素仍占满视口并吞掉全站点击。 */ [hidden]{ display:none !important } /* ---------- 顶部滚动条 ---------- */ .lf-ticker{ background:#0E151C; color:#A4B5C0; overflow:hidden; position:relative; z-index:60 } .lf-ticker__track{ display:flex; width:max-content; animation:lf-slide 40s linear infinite } .lf-ticker span{ font-size:13px; font-weight:560; letter-spacing:0; padding:8px 0; white-space:nowrap } .lf-ticker i{ padding:0 18px; opacity:.45; font-style:normal; color:#6ED0E8 } @keyframes lf-slide{ to{ transform:translateX(-50%) } } /* ---------- 头部：首屏上透明，滚动后变亮 ---------- */ .lf-head{ position:sticky; top:0; z-index:70; color:#0F1922; background:rgba(250,252,253,.94); -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid #E7EDF1; transition:box-shadow .25s, border-color .25s } .lf-head.is-stuck{ box-shadow:0 6px 26px rgba(15,25,34,.09) } .lf-head__in{ display:flex; align-items:center; gap:18px; height:70px; max-width:1600px; margin:0 auto; padding-inline:var(--pad) } .lf-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:none; color:inherit } .lf-logo__mark{ width:30px; height:30px; border:2.5px solid #13B8CC; border-radius:9px; position:relative; flex:none } .lf-logo__mark::after{ content:""; position:absolute; inset:5px; border-radius:50%; background:#13B8CC; box-shadow:0 0 14px rgba(19,184,204,.95) } .lf-logo__word{ font-weight:780; letter-spacing:-.017em; font-size:18.5px } .lf-nav{ display:none; gap:26px; margin-left:auto } .lf-nav a{ text-decoration:none; font-size:14.5px; font-weight:560; padding:4px 0; opacity:.76; border-bottom:1px solid transparent; transition:opacity .18s,border-color .18s } .lf-nav a:hover,.lf-nav a[aria-current]{ opacity:1; border-color:currentColor } .lf-head__r{ margin-left:auto; display:flex; align-items:center; gap:10px } @media(min-width:1040px){ .lf-nav{ display:flex } .lf-head__r{ margin-left:0 } } .lf-burger{ width:46px; height:46px; display:grid; place-items:center; background:#fff; border:1px solid #D4DEE5; border-radius:14px; color:#0F1922; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; flex:none } .lf-burger:active{ background:#EDF2F5 } @media(min-width:1040px){ .lf-burger{ display:none } } /* ---------- 按钮 ---------- */ .lf-btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--f-dis); font-weight:720; font-size:15.5px; letter-spacing:-.008em; padding:14px 24px; border-radius:100px; text-decoration:none; border:1px solid transparent; cursor:pointer; min-height:48px; transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .22s, background .2s, border-color .2s } .lf-btn--lg{ font-size:17px; padding:17px 32px; min-height:58px } .lf-btn--sm{ padding:10px 17px; font-size:13.5px; min-height:44px } .lf-btn--block{ width:100%; display:flex } .lf-btn--go{ background:var(--teal); color:#04212B } .lf-btn--go:hover{ background:var(--teal-hi); transform:translateY(-1px); box-shadow:0 10px 30px -10px rgba(24,176,194,.8) } .lf-btn--ghost{ border-color:var(--line-2); color:var(--ink); background:transparent } .lf-btn--ghost:hover{ border-color:var(--teal); color:var(--teal) } .lf-btn--glass{ border-color:rgba(255,255,255,.42); color:#fff; background:rgba(255,255,255,.09); backdrop-filter:blur(10px) } .lf-btn--glass:hover{ background:rgba(255,255,255,.18); transform:translateY(-1px) } /* ========================================================================== ACT 1 —— 满屏电影感首屏 ========================================================================== */ .lf-open{ position:relative; min-height:min(92vh,860px); display:flex; align-items:flex-end; overflow:hidden; background:var(--night); isolation:isolate } /* 首屏影调全部交给 .lf-open__grade 一层，video 上不再挂 filter。 原来是两层叠加压暗：filter:brightness(.66) 再加一条最深到 .97 的渐变 —— 实测原片平均亮度 127/255，落到屏幕上顶部只剩 34、文字带 10.5、最底 6.3， 34% 高度以下基本等于纯黑，看不出是行车画面。 而 @media(max-width:900px) 里为了滑动性能把 filter 关掉了， 于是手机比桌面亮 1.5 倍 —— 同一个首屏两种观感，就是「怎么变暗了」的来源。 现在只用渐变调影调：桌面与手机一致，且每帧不用再跑一次 filter（桌面也少一份开销）。 白色标题压在 62%~100% 段，实测对比度仍 >15:1，远高于 AA 的 4.5:1。 */ .lf-open__v{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0 } /* 🔴 2026-09-13：首屏与过渡带之间那条硬线就出在这里。 过渡带的对色器读的是元素**自己**的 background（#141F29），而首屏真正的可见底色 是这一层子元素的渐变末端（原来收在 rgba(2,5,7,.93) 近黑）—— 两端差了一大截，于是一条台阶。 两件事一起解： ① 整组影调从近黑 rgb(2,5,7) 换成石板蓝 rgb(16,26,35)，首屏底部不再压着一条黑带； ② 最上面加一层「落地带」：底部 170px 精确收到 var(--night)， 与过渡带起点逐字节相同，且不随视频帧变化。170px 是固定高度，够不到标题区。 */ .lf-open__grade{ position:absolute; inset:0; z-index:1; background: linear-gradient(180deg,rgba(26,38,50,0),var(--night)) bottom / 100% 170px no-repeat, linear-gradient(180deg,rgba(16,26,35,.62) 0%,rgba(16,26,35,.18) 20%,rgba(16,26,35,.40) 40%,rgba(16,26,35,.74) 64%,rgba(16,26,35,.93) 100%), radial-gradient(130% 86% at 12% 100%, rgba(16,26,35,.70), transparent 66%), radial-gradient(100% 100% at 50% 50%, transparent 44%, rgba(16,26,35,.40) 100%) } .lf-open__hud{ position:absolute; left:var(--pad); top:22px; z-index:3; display:flex; gap:12px; align-items:center; flex-wrap:wrap } .lf-open__chan{ position:absolute; right:var(--pad); top:22px; z-index:3 } .lf-open__in{ position:relative; z-index:3; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad) clamp(44px,7vw,88px) } .lf-open__eye{ font-size:clamp(14px,1.5vw,17px); letter-spacing:-.005em; font-weight:620; color:var(--teal-hi); margin:0 0 clamp(14px,2vw,20px); text-shadow:0 1px 12px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.7) } .lf-open__h1{ margin:0; font-weight:800; line-height:.92; letter-spacing:-.042em; font-size:clamp(38px,7.8vw,104px); color:#fff } .lf-open__h1 span{ display:block } /* 第二行用真实路面画面填充（Nextbase 那一手） */ .lf-fill{ background-image:url("../img/real-road-poster.jpg"); background-size:220% auto; background-position:38% 30%; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.42); filter:brightness(1.42) contrast(1.34) saturate(1.3) drop-shadow(0 3px 24px rgba(0,0,0,.98)) drop-shadow(0 0 3px rgba(0,0,0,.9)) } @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .lf-fill{ color:#fff; -webkit-text-stroke:0 } } .lf-open__sub{ margin:clamp(16px,2.4vw,26px) 0 0; font-size:clamp(17px,2.1vw,25px); font-weight:560; color:rgba(255,255,255,.94); line-height:1.32; max-width:30ch; letter-spacing:-.014em; text-shadow:0 1px 14px rgba(0,0,0,.7) } .lf-open__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:clamp(20px,2.8vw,30px) } .lf-open__fine{ margin:16px 0 0; font-size:13px; letter-spacing:0; color:rgba(255,255,255,.68); line-height:1.7 } .lf-open__fine span{ text-transform:none; letter-spacing:0; font-family:var(--f-dis); font-size:13px } .lf-open__fine a{ color:var(--teal-hi) } .lf-open__scroll{ position:absolute; left:50%; bottom:14px; z-index:3; width:22px; height:34px; border:1.5px solid rgba(255,255,255,.34); border-radius:12px; transform:translateX(-50%) } .lf-open__scroll span{ position:absolute; left:50%; top:6px; width:3px; height:7px; border-radius:2px; background:rgba(255,255,255,.8); transform:translateX(-50%); animation:lf-wheel 1.9s ease-in-out infinite } @keyframes lf-wheel{ 0%,100%{ transform:translate(-50%,0); opacity:1 } 60%{ transform:translate(-50%,12px); opacity:.15 } } @media(prefers-reduced-motion:reduce){ .lf-open__scroll span{ animation:none } } .lf-open__glow{ position:absolute; right:-6%; bottom:-14%; z-index:1; width:min(60%,820px); aspect-ratio:1; pointer-events:none; background:radial-gradient(circle at 50% 50%, rgba(24,176,194,.30), rgba(24,176,194,.09) 40%, transparent 66%); filter:blur(8px) } @media(max-width:899px){ .lf-open__glow{ display:none } } .lf-open__prod{ position:absolute; right:-2%; bottom:2%; z-index:2; width:min(44%,580px); height:auto; pointer-events:none; filter:brightness(1.22) contrast(1.06) drop-shadow(0 40px 60px rgba(0,0,0,.85)) drop-shadow(0 0 40px rgba(24,176,194,.28)); opacity:0; transform:translateY(26px) scale(.98); animation:lf-prodin .9s .35s cubic-bezier(.2,.8,.3,1) forwards } @keyframes lf-prodin{ to{ opacity:1; transform:none } } /* 2026-09-14 Jed：「网页版右边能看到机器，手机版看不到，能不能显示但别挡内容」。 手机上首屏是底部对齐的，顶部那段天空是空的 —— 机器放那儿谁都不挡。 放在 z-index:2（文字是 3），万一将来文案变长压过去，文字仍然在上层。 */ @media(max-width:899px){ /* 手机上首屏是**底部对齐**的：正文越长，文字顶就越往上顶，机器再大就会压到 eyebrow。 Safari 带工具栏时可视高度更矮，这个余量还会再缩 —— 所以不能靠固定 top 去躲。 对策三条叠加：① 缩到 150px 封顶 ② 贴到最顶上 ③ 底边做羽化， 万一将来文案变长挨上了，也是淡出而不是一条硬边压在字上。 */ .lf-open__prod{ display:none } } /* 只有真的有空位才放机器：首屏是底部对齐的，短屏（Safari 带工具栏、小手机）会被正文占满， 这时任何固定位置都会压到字 —— 实测 430×620 直接压穿 116px。所以加一道高度闸门， ≥720px 才出现；出现时也只有 150px 封顶，底边再羽化一道兜底。 */ @media(max-width:899px) and (min-height:720px){ .lf-open__prod{ display:block; right:-4%; bottom:auto; top:clamp(8px,1.4vh,22px); width:min(38%,150px); filter:brightness(1.16) contrast(1.04) drop-shadow(0 14px 22px rgba(0,0,0,.7)); -webkit-mask-image:linear-gradient(to bottom,#000 70%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(to bottom,#000 70%,rgba(0,0,0,0) 100%) } } @media(prefers-reduced-motion:reduce){ .lf-open__prod{ animation:none; opacity:1; transform:none } } /* ========================================================================== ACT 2 —— 视频填进巨型字 ========================================================================== */ .lf-stage-sec{ background:var(--night) } .lf-stage{ position:relative; isolation:isolate; background:var(--night) } /* 与首屏同一套落地带：这块的可见底色由 mix-blend-mode 的 knock 层决定（近黑）， 同样和过渡带对不上。固定 140px，够不到居中的巨型字。 */ .lf-stage::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:140px; z-index:3; pointer-events:none; background:linear-gradient(180deg,rgba(26,38,50,0),var(--night)) } .lf-stage__v{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(118%) contrast(112%) brightness(1.22) } .lf-stage__knock{ position:relative; background:#0A0D0E; mix-blend-mode:multiply; display:grid; place-items:center; padding:clamp(46px,8vw,110px) var(--pad) } .lf-stage__knock *{ color:#fff } @supports not (mix-blend-mode:multiply){ .lf-stage__v{ display:none } .lf-stage__knock{ mix-blend-mode:normal; background:#07090A } } .lf-kin{ text-align:center; width:100% } .lf-kin__it{ font-size:clamp(13px,1.4vw,16px); letter-spacing:.01em; font-weight:600; opacity:.55; margin:0 0 clamp(8px,1.4vw,16px) } .lf-kin__verbs{ position:relative; height:clamp(56px,12.8vw,164px) } .lf-kin__verb{ position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(50px,13.6vw,176px); font-weight:800; line-height:1; letter-spacing:-.045em; opacity:0; transform:translateY(.12em) } .lf-kin__tails{ position:relative; height:clamp(28px,4.2vw,56px); margin-top:clamp(2px,.6vw,8px) } .lf-kin__tail{ position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(20px,3.9vw,48px); font-weight:600; letter-spacing:-.02em; opacity:0 } .lf-kin__verb:nth-child(1),.lf-kin__tail:nth-child(1){ animation:lf-cyc 7.8s -0.2s infinite } .lf-kin__verb:nth-child(2),.lf-kin__tail:nth-child(2){ animation:lf-cyc 7.8s 2.4s infinite } .lf-kin__verb:nth-child(3),.lf-kin__tail:nth-child(3){ animation:lf-cyc 7.8s 5.0s infinite } @keyframes lf-cyc{ 0%{ opacity:0; transform:translateY(.12em) } 3.5%{ opacity:1; transform:translateY(0) } 30%{ opacity:1; transform:translateY(0) } 34%{ opacity:0; transform:translateY(-.1em) } 100%{ opacity:0; transform:translateY(-.1em) } } .lf-kin__static{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 } @media(prefers-reduced-motion:reduce){ .lf-kin__verbs,.lf-kin__tails{ display:none } .lf-kin__static{ position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; white-space:normal; font-size:clamp(24px,5vw,56px); font-weight:800; line-height:1.1; letter-spacing:-.025em } .lf-ticker__track,.lf-strip__track{ animation:none } } /* ---------- 证据走马灯 ---------- */ .lf-strip{ border-block:1px solid var(--line); background:var(--bg-1); overflow:hidden; padding:16px 0 } .lf-strip__track{ display:flex; align-items:center; gap:12px; width:max-content; animation:lf-slide 56s linear infinite } .lf-strip:hover .lf-strip__track{ animation-play-state:paused } .lf-shot{ position:relative; flex:none; height:clamp(124px,13vw,164px); width:auto; aspect-ratio:16/9; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#000 } .lf-shot img,.lf-shot video{ display:block; width:100%; height:100%; object-fit:cover } .lf-shot--tall{ aspect-ratio:3/4 } .lf-shot__tag{ position:absolute; left:8px; bottom:8px } /* 彩盒正面是 7:6，塞进 16:9 的取景框会把字标和底部图标裁掉 */ .lf-shot--fit{ background:#EDF2F5 } .lf-shot--fit img{ object-fit:contain } /* ---------- 区块壳 ---------- */ .lf-sec{ padding:clamp(70px,9.4vw,134px) 0; position:relative; overflow:hidden; background:var(--bg); color:var(--ink) } .lf-sec--tight{ padding:clamp(54px,7.2vw,98px) 0 } .lf-sec__head{ margin-bottom:clamp(28px,3.8vw,48px) } .lf-sec__head .lf-osd{ margin-bottom:16px; font-size:clamp(15px,1.7vw,18px); font-weight:700; letter-spacing:.005em } .lf-sec__head .lf-osd--teal{ color:var(--teal-deep) } /* 背景巨字：描边 + 随滚动横向漂移（Nextbase 的 VOICE CONTROL 那一手）。 漂移用 animation-timeline:view() 交给合成器，**不挂 scroll 事件**—— 手机上每帧跑 JS 正是之前「滑动不顺」的来源，这条路不能再走。 不支持的浏览器就是一个静止的描边巨字，不缺任何信息。 */ .lf-ghost{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:clamp(150px,28vw,420px); font-weight:800; line-height:.8; color:transparent; -webkit-text-stroke:2px var(--ink); opacity:.085; letter-spacing:-.05em; white-space:nowrap; pointer-events:none; user-select:none; z-index:0 } @keyframes lf-ghost-drift{ from{ transform:translate(calc(-50% - 6vw), -50%) } to { transform:translate(calc(-50% + 6vw), -50%) } } @supports (animation-timeline: view()){ .lf-ghost{ animation:lf-ghost-drift linear both; animation-timeline:view(); animation-range:entry 0% exit 100% } } @media(prefers-reduced-motion:reduce){ .lf-ghost{ animation:none } } .lf-sec > .lf-wrap{ position:relative; z-index:1 } /* ---------- 刻度装置 ---------- */ .lf-tiers{ display:grid; gap:14px; margin-top:24px } @media(min-width:880px){ .lf-tiers{ grid-template-columns:repeat(3,1fr) } } .lf-tier{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:24px; display:flex; flex-direction:column } .lf-tier__n{ font-size:13.5px; letter-spacing:.01em; font-weight:640; color:var(--ink-3); margin-bottom:16px } .lf-tier h3{ font-size:21px; font-weight:750; margin:0 0 10px; letter-spacing:-.018em } .lf-tier p{ margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.6 } .lf-tier--ours{ border-color:var(--teal); box-shadow:0 0 0 1px var(--teal),0 22px 60px -30px rgba(24,176,194,.75); background:linear-gradient(180deg,rgba(24,176,194,.13),rgba(24,176,194,.03) 48%,transparent),var(--bg-2) } .lf-tier--ours .lf-tier__n{ color:var(--teal-deep); font-weight:600 } .lf-tier--ours p{ color:var(--ink) } .lf-tier__top{ display:flex; align-items:baseline; gap:10px } .lf-tier__price{ font-weight:800; font-size:30px; letter-spacing:-.038em; margin-left:auto } .lf-adds{ margin-top:16px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:20px 24px } .lf-adds__cap{ margin-bottom:8px } .lf-adds ol{ list-style:none; margin:0; padding:0; counter-reset:a } .lf-adds li{ counter-increment:a; position:relative; padding:12px 0 12px 42px; border-top:1px solid var(--line); font-size:15px; line-height:1.55; color:var(--ink-2) } .lf-adds li:first-child{ border-top:0 } .lf-adds li::before{ content:counter(a); position:absolute; left:0; top:13px; font-size:12px; font-weight:640; color:var(--ink-3); border:1px solid var(--line); border-radius:5px; width:28px; text-align:center; line-height:19px } @keyframes lf-adds-cyc{ 0%,20% { color:var(--ink) } 26%,100% { color:var(--ink-3) } } @keyframes lf-adds-cyc-n{ 0%,20% { color:#fff; background:var(--teal-deep); border-color:var(--teal-deep) } 26%,100% { color:var(--ink-3); background:transparent; border-color:var(--line-2) } } .lf-adds li{ animation:lf-adds-cyc 16s linear infinite } .lf-adds li::before{ animation:lf-adds-cyc-n 16s linear infinite } .lf-adds li:nth-child(1),.lf-adds li:nth-child(1)::before{ animation-delay:0s } .lf-adds li:nth-child(2),.lf-adds li:nth-child(2)::before{ animation-delay:-4s } .lf-adds li:nth-child(3),.lf-adds li:nth-child(3)::before{ animation-delay:-8s } .lf-adds li:nth-child(4),.lf-adds li:nth-child(4)::before{ animation-delay:-12s } /* 鼠标一进来，轮播停手，改成谁被指到谁亮 */ .lf-adds:hover li,.lf-adds:hover li::before{ animation:none } .lf-adds:hover li{ color:var(--ink-3) } .lf-adds:hover li::before{ color:var(--ink-3); background:transparent; border-color:var(--line-2) } .lf-adds li:hover{ color:var(--ink) } .lf-adds li:hover::before{ color:#fff; background:var(--teal-deep); border-color:var(--teal-deep) } @media(prefers-reduced-motion:reduce){ .lf-adds li,.lf-adds li::before{ animation:none } .lf-adds li.own{ color:var(--ink) } .lf-adds li.own::before{ color:#fff; background:var(--teal-deep); border-color:var(--teal-deep) } } .lf-adds__fn{ margin:16px 0 0; font-size:12.5px; color:var(--ink-3); line-height:1.6 } /* ---------- Bento ---------- */ .lf-bento{ display:grid; gap:14px; grid-template-columns:1fr } @media(min-width:700px){ .lf-bento{ grid-template-columns:repeat(2,1fr) } } @media(min-width:1060px){ .lf-bento{ grid-template-columns:repeat(6,1fr) } } .lf-card{ position:relative; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:border-color .22s, transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s } .lf-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow) } .lf-card__media{ position:relative; aspect-ratio:16/10; background:#0E0D0A; overflow:hidden } .lf-card__media img,.lf-card__media video{ width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.2,.8,.3,1) } .lf-card:hover .lf-card__media img{ transform:scale(1.045) } .lf-card__body{ padding:18px 19px 20px; display:flex; flex-direction:column; gap:8px; flex:1 } .lf-card__body h3{ font-size:18px; font-weight:720; margin:0; letter-spacing:-.015em; line-height:1.24 } .lf-card__body p{ margin:0; font-size:14px; color:var(--ink-2); line-height:1.58 } .lf-card__tag{ position:absolute; left:11px; top:11px; z-index:2 } .lf-card__stamp{ position:absolute; left:11px; bottom:10px; z-index:2 } .lf-card__chan{ position:absolute; right:11px; bottom:10px; z-index:2 } @media(min-width:1060px){ .lf-c2{ grid-column:span 2 } .lf-c3{ grid-column:span 3 } .lf-c4{ grid-column:span 4 } .lf-c6{ grid-column:span 6 } } /* 数字卡：内容顶对齐。原来居中 + 被行高拉成一大片空屏（Jed「太空了」）， 后来改 align-self:start 又在一行里留下两个洞（Jed「左右两个差两个图?」）。 现在成对的数字卡由 .lf-stack 装在一列里、各占一半高，行里不再有洞。 */ .lf-card--stat{ justify-content:flex-start; padding:22px; gap:4px } .lf-bento > .lf-card--stat{ align-self:start } /* 两张数字卡并成一列，和旁边那张带图的卡等高（Jed 2026-09-13 提的排法） */ .lf-stack{ display:flex; flex-direction:column; gap:14px } .lf-stack > .lf-card--stat{ flex:1; justify-content:center } .lf-card--stat .lf-card__k{ margin-bottom:2px } .lf-card--stat .lf-num{ font-size:clamp(40px,5vw,62px); letter-spacing:-.045em; line-height:1 } .lf-card--stat p{ margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.55 } /* 光秃秃一个数字读不出意思，单位跟在后面 */ .lf-num__u{ display:inline-block; margin-left:10px; font-size:15px; font-weight:640; letter-spacing:-.005em; color:var(--ink-3); vertical-align:middle } /* ---------- 两种供电 ---------- */ .lf-two{ display:grid; gap:14px } @media(min-width:860px){ .lf-two{ grid-template-columns:1fr 1fr } } .lf-power{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column } .lf-power--easy{ border-color:var(--teal); box-shadow:0 0 0 1px var(--teal) } .lf-power__media{ aspect-ratio:16/9; background:#000; overflow:hidden } .lf-power__media img{ width:100%; height:100%; object-fit:cover } .lf-power__body{ padding:22px; display:flex; flex-direction:column; gap:10px; flex:1 } .lf-power__tag{ align-self:flex-start; font-size:12.5px; font-weight:680; letter-spacing:0; padding:6px 13px; border-radius:100px; background:var(--teal); color:#03181B } .lf-power__tag--plain{ background:transparent; border:1px solid var(--line-2); color:var(--ink-3) } .lf-power__body h3{ font-size:21px; font-weight:740; margin:0; letter-spacing:-.018em } .lf-power__body p{ margin:0; font-size:14.5px; color:var(--ink-2); line-height:1.6; flex:1 } /* ---------- 手机取景器 + 时间线 ---------- */ .lf-wake{ display:grid; gap:clamp(28px,4vw,52px); align-items:center } @media(min-width:880px){ .lf-wake{ grid-template-columns:320px 1fr } } /* 这一列本来是按 300px 的竖手机壳排的；换成横向设备框后要给它对应的宽度， 否则 460px 的框会压到右边正文上（实测列宽 320、框 460，压过去 140px）。 */ .lf-phone--wide{ width:min(460px,100%) } @media(min-width:880px){ .lf-wake--wide{ grid-template-columns:460px 1fr } } .lf-phone{ position:relative; width:min(300px,74vw); margin-inline:auto; border-radius:32px; padding:9px; background:linear-gradient(160deg,#2B3945,#121A22); box-shadow:0 34px 76px -32px rgba(0,0,0,.92),0 0 0 1px rgba(255,255,255,.08) } .lf-phone__scr{ position:relative; border-radius:24px; overflow:hidden; background:#000; aspect-ratio:9/19.2 } .lf-phone__scr video,.lf-phone__scr img{ width:100%; height:100%; object-fit:cover } /* real-screen-bind.webp 是 1500×890 的横图，而且拍的是**相机自己的 2.99 吋屏**， 塞进 9:19.2 的手机壳里 object-fit:cover 实测只剩 28%，并且带刘海的手机外壳 会让人以为那是手机界面。改成横向设备框：整张照片完整显示，语义也对。 */ .lf-phone--wide{ width:min(460px,94vw); border-radius:22px; padding:8px } .lf-phone--wide .lf-phone__scr{ aspect-ratio:1500/890; border-radius:15px } .lf-phone--wide .lf-phone__notch{ display:none } .lf-phone__notch{ position:absolute; left:50%; top:9px; transform:translateX(-50%); width:88px; height:21px; border-radius:12px; background:#000; z-index:3 } /* --app = 画面本身就是一段手机录屏（真实 App 的直播页）。 录屏自带状态栏和灵动岛，再画一个刘海就是两个；App 自带顶栏和控制条， 再盖我们自己的「● Live / Front · SmartSF App」就是把真界面遮住去仿真界面。 所以这个变体不画刘海、不上 HUD，屏幕比例按录屏的 474:1024 走。 */ .lf-phone--app .lf-phone__notch{ display:none } .lf-phone--app .lf-phone__scr{ aspect-ratio:474/1024 } .lf-phone__cap{ max-width:min(300px,74vw); margin:12px auto 0; text-align:center } .lf-phone__hud{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:space-between; padding:36px 13px 15px; background:linear-gradient(180deg,rgba(0,0,0,.58),transparent 22%,transparent 72%,rgba(0,0,0,.74)) } .lf-tl{ position:relative; padding-left:30px; margin:0 } .lf-tl::before{ content:""; position:absolute; left:7px; top:8px; bottom:24px; width:2px; background:linear-gradient(180deg,var(--rec),var(--teal) 40%,var(--line)) } .lf-tl li{ list-style:none; position:relative; padding:0 0 22px } .lf-tl li::before{ content:""; position:absolute; left:-27px; top:7px; width:11px; height:11px; border-radius:50%; background:var(--bg); border:2px solid var(--teal) } .lf-tl li:first-child::before{ background:var(--rec); border-color:var(--rec) } .lf-tl time{ font-family:var(--f-mono); font-size:12.5px; color:var(--teal-deep); letter-spacing:.04em; display:block; margin-bottom:4px; font-weight:500 } .lf-tl b{ display:block; font-size:17px; font-weight:700; margin-bottom:4px; letter-spacing:-.012em } .lf-tl span{ font-size:14px; color:var(--ink-2); line-height:1.55 } /* ---------- 两列 ---------- */ .lf-cols{ display:grid; gap:14px; margin-top:24px } @media(min-width:840px){ .lf-cols{ grid-template-columns:1fr 1fr } } .lf-col{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:24px } .lf-col--plan{ border-color:rgba(24,176,194,.5); background:linear-gradient(180deg,rgba(24,176,194,.09),transparent 42%),var(--bg-2) } .lf-col h3{ font-size:16px; letter-spacing:-.01em; color:var(--teal-deep); margin:0 0 18px; font-weight:720 } .lf-col ul{ margin:0; padding:0; list-style:none } .lf-col li{ position:relative; padding:10px 0 10px 26px; font-size:14.5px; line-height:1.55; border-top:1px solid var(--line); color:var(--ink-2) } .lf-col li:first-child{ border-top:0 } .lf-col li::before{ content:""; position:absolute; left:2px; top:17px; width:8px; height:8px; border-radius:2px; background:var(--line-2) } .lf-col--plan li::before{ background:var(--teal) } /* ---------- 购买块 + 装箱格 ---------- */ .lf-buywrap{ display:grid; gap:16px } @media(min-width:960px){ .lf-buywrap{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:start } } .lf-buy{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:24px } .lf-buy__row{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap } .lf-buy__price{ font-size:clamp(44px,7vw,64px); font-weight:800; letter-spacing:-.045em; line-height:.92 } .lf-buy__cpn{ font-size:14px; color:var(--teal-deep); font-weight:560; text-wrap:balance } .lf-buy__box{ font-size:14px; color:var(--ink-2); line-height:1.62; margin:16px 0 0 } .lf-buy__box b{ color:var(--ink); font-weight:660 } .lf-buy__setup{ font-size:12.5px; color:var(--ink-3); line-height:1.58; margin:14px 0 0; padding-top:14px; border-top:1px dashed var(--line-2) } .lf-buy__setup b{ color:var(--ink-2) } .lf-buy__cta{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap } .lf-buy__trust{ font-size:12.5px; letter-spacing:0; color:var(--ink-3); margin:14px 0 0; line-height:1.75 } .lf-boxgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px } .lf-boxgrid figure{ margin:0; background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:14px 10px 12px; text-align:center; transition:border-color .2s, transform .2s } .lf-boxgrid figure:hover{ border-color:var(--teal); transform:translateY(-2px) } .lf-boxgrid img{ width:100%; aspect-ratio:4/3; object-fit:contain; margin-bottom:8px } .lf-boxgrid figcaption{ font-size:12.5px; letter-spacing:0; font-weight:600; color:var(--ink-2); line-height:1.4 } .lf-boxgrid figure{ position:relative } .lf-boxgrid--gift{ border-color:var(--teal) !important; box-shadow:0 0 0 1px var(--teal) } .lf-boxgrid--gift::before{ content:"FREE"; position:absolute; left:50%; top:-11px; transform:translateX(-50%); background:var(--teal); color:#04212B; font-size:11px; font-weight:800; letter-spacing:.08em; padding:4px 12px; border-radius:100px; white-space:nowrap; z-index:2; box-shadow:0 4px 14px -4px rgba(14,151,168,.7) } .lf-boxgrid--gift figcaption{ color:var(--teal-deep); font-weight:700 } /* ---------- 全出血画面带 ---------- */ .lf-band{ position:relative; background:var(--night); overflow:hidden } .lf-band::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:140px; z-index:4; pointer-events:none; background:linear-gradient(180deg,rgba(26,38,50,0),var(--night)) } /* width:100% 必须显式写：只给 aspect-ratio + max-height 时， 高度被 max-height 夹住后宽度会跟着按比例缩回去，右侧露出底色。 */ .lf-band__media{ position:relative; width:100%; aspect-ratio:16/9; max-height:76vh; overflow:hidden } .lf-band__media img,.lf-band__media video{ width:100%; height:100%; object-fit:cover } .lf-band__ov{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:var(--pad); background:linear-gradient(180deg,transparent 34%,rgba(0,0,0,.52) 66%,rgba(0,0,0,.88)) } .lf-band__hud{ position:absolute; left:var(--pad); top:var(--pad); display:flex; gap:10px; align-items:center; z-index:2; padding:6px 11px; border-radius:8px; background:rgba(4,8,11,.5); border:1px solid rgba(255,255,255,.16) } @supports (backdrop-filter:blur(4px)){ .lf-band__hud{ -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px) } } .lf-band__chan{ position:absolute; right:var(--pad); top:var(--pad); z-index:2 } .lf-band__txt{ max-width:720px } /* 🔴 2026-09-14：.lf-band__media 是 16/9，390px 手机上只有 219px 高，而 .lf-band__ov 是 position:absolute;inset:0 贴在这 219px 里、底部对齐 —— 文字一超高就从**顶部**溢出， 再被 .lf-band{overflow:hidden} 剪掉。/about/ 那条实测第一行是半句 "who bought it."， 前半句整段没了，而且桌面上带子有 700+px 高看不出来。 护栏：窄屏让文字层回到正常文档流、排在图下面（深色底上），以后写多长都不会再被剪。 */ @media(max-width:760px){ .lf-band__ov{ position:static; inset:auto; padding-top:clamp(20px,5vw,28px) } .lf-band::after{ display:none } } .lf-band__txt h2{ font-size:clamp(26px,4.6vw,52px); font-weight:780; line-height:1.04; letter-spacing:-.028em; margin:0 0 12px; color:#fff } .lf-band__txt p{ margin:0; font-size:clamp(14px,1.6vw,17px); color:rgba(255,255,255,.82); line-height:1.55 } /* ---------- 收口 ---------- */ .lf-close{ text-align:center } .lf-close__h{ font-size:clamp(30px,6.4vw,76px); font-weight:800; line-height:1.02; letter-spacing:-.038em; margin:0 } .lf-close .lf-lede{ text-align:center; margin-inline:auto } /* ---------- 常驻购买条 ---------- */ .lf-dock{ position:fixed; left:0; right:0; bottom:0; z-index:45; display:flex; align-items:center; gap:12px; padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96); backdrop-filter:blur(16px); border-top:1px solid #E1E8EC; transform:translateY(120%); transition:transform .28s cubic-bezier(.2,.8,.3,1) } .lf-dock.is-on{ transform:none } .lf-dock__p{ display:flex; flex-direction:column; line-height:1.05; color:#0F1922 } .lf-dock__p b{ font-size:22px; font-weight:800; letter-spacing:-.038em } .lf-dock__p span{ font-size:12px; font-weight:600; letter-spacing:.01em; text-transform:none; letter-spacing:.01em; color:#0A6570; margin-top:3px } .lf-dock .lf-btn{ margin-left:auto; flex:1; max-width:220px } @media(min-width:900px){ .lf-dock{ display:none } } /* ---------- 弹窗 ---------- */ .lf-modal{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:16px } .lf-modal__scrim{ position:absolute; inset:0; background:rgba(3,6,8,.78); backdrop-filter:blur(6px); opacity:0; transition:opacity .26s } .lf-modal.is-on .lf-modal__scrim{ opacity:1 } .lf-modal__box{ position:relative; z-index:1; width:min(880px,100%); max-height:92vh; overflow:auto; background:var(--bg-2); border:1px solid var(--line); border-radius:26px; display:grid; opacity:0; transform:translateY(16px) scale(.985); transition:opacity .28s cubic-bezier(.2,.8,.3,1),transform .28s cubic-bezier(.2,.8,.3,1) } .lf-modal.is-on .lf-modal__box{ opacity:1; transform:none } @media(min-width:760px){ .lf-modal__box{ grid-template-columns:.85fr 1.15fr } } .lf-modal__media{ position:relative; background:#000; min-height:190px } .lf-modal__media video{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0 } .lf-modal__x{ position:absolute; right:10px; top:10px; z-index:3; width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.5); color:#fff; font-size:22px; line-height:1; cursor:pointer } .lf-modal__body{ padding:26px } .lf-modal__h{ font-size:clamp(23px,3vw,31px); font-weight:780; letter-spacing:-.024em; line-height:1.1; margin:10px 0 0 } .lf-pick{ display:grid; gap:7px; margin:0 0 14px } .lf-pick label{ display:flex; align-items:center; gap:11px; padding:12px 15px; cursor:pointer; border:1px solid var(--line); border-radius:14px; font-size:14.5px; min-height:46px; transition:border-color .16s, background .16s } .lf-pick label:hover{ border-color:var(--line-2) } .lf-pick input{ appearance:none; width:17px; height:17px; border:1.5px solid var(--line-2); border-radius:50%; flex:none; transition:border-color .16s, box-shadow .16s } .lf-pick input:checked{ border-color:var(--teal); box-shadow:inset 0 0 0 4px var(--teal) } .lf-pick label:has(input:checked){ border-color:var(--teal); background:var(--teal-dim) } .lf-input{ width:100%; min-height:52px; font-size:16px; font-family:var(--f-dis); padding:14px 17px; border:1px solid var(--line-2); border-radius:14px; background:var(--bg-3); color:var(--ink); margin-bottom:12px } .lf-input::placeholder{ color:var(--ink-3) } .lf-input.is-bad{ border-color:var(--rec) } .lf-modal__fine{ font-size:11.5px; color:var(--ink-3); line-height:1.55; margin:12px 0 0 } .lf-modal__fine a{ color:var(--teal-deep) } .lf-code{ display:block; width:100%; font-family:var(--f-mono); font-size:clamp(24px,4vw,34px); font-weight:600; letter-spacing:.1em; padding:20px; margin:16px 0 12px; cursor:pointer; background:var(--teal-dim); border:1px dashed var(--teal); border-radius:18px; color:var(--teal-deep) } .lf-code[data-copied]::after{ content:" ✓ copied"; font-size:13px; letter-spacing:0 } /* ---------- 揭示 ---------- */ .lf-rv{ opacity:1; transform:none } @media(prefers-reduced-motion:no-preference){ .lf-rv{ opacity:.001; transform:translateY(18px); transition:opacity .62s cubic-bezier(.2,.8,.3,1), transform .62s cubic-bezier(.2,.8,.3,1) } .lf-rv.is-in{ opacity:1; transform:none } } .no-js .lf-rv{ opacity:1 !important; transform:none !important } /* 404 与搜索结果的「出路」列表 —— 这两页只在出错时被看到，外壳跟着 .ssf-doc 走。 */ .ssf-404{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px } .ssf-404 a{ display:block; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--bg-2); text-decoration:none; color:inherit } .ssf-404 a:hover{ border-color:var(--teal); background:var(--bg-3) } .ssf-404 b{ display:block; font-weight:640; color:var(--ink) } .ssf-404 span{ display:block; margin-top:3px; font-size:13.5px; color:var(--ink-2) } /* ---------- 页脚 ---------- */ .lf-foot{ background:#0E151C; color:#A4B5C0; border-top:1px solid #26333F; padding:52px 0 32px } .lf-foot__grid{ display:grid; gap:30px; grid-template-columns:1fr } @media(min-width:720px){ .lf-foot__grid{ grid-template-columns:1.4fr 1fr 1fr 1fr } } .lf-foot h4{ font-size:15.5px; letter-spacing:-.008em; color:#EDF4F7; margin:0 0 16px; font-weight:700 } .lf-foot ul{ margin:0; padding:0; list-style:none; display:grid; gap:10px } .lf-foot a{ font-size:15px; color:#A4B5C0; text-decoration:none } .lf-foot a:hover{ color:#2CC4D6 } .lf-foot .lf-sm{ color:#7A8B98 } .lf-foot__bottom{ margin-top:36px; padding-top:20px; border-top:1px solid #26333F; display:flex; flex-wrap:wrap; gap:10px 22px; font-size:12.5px; color:#7A8B98 } /* ---------- 工具 ---------- */ .lf-note{ border-left:3px solid var(--teal); background:var(--teal-dim); padding:15px 18px; border-radius:0 9px 9px 0; font-size:14.5px; line-height:1.6; color:var(--ink-2) } .lf-note b{ color:var(--ink) } .lf-skip{ position:absolute; left:-9999px } .lf-skip:focus{ left:12px; top:12px; z-index:100; background:var(--teal); color:#03181B; padding:10px 14px; border-radius:6px } :focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:4px } /* ---------- 明暗之间的过渡带 ---------- 三条规则决定它顺不顺： ① 两端斜率必须为 0（smoothstep），否则「渐变结束」处会出现马赫带，看起来就是一条硬线； ② 两端颜色必须与相邻区块**完全**相同（差 6 级就能看出来）——live.js 会实测邻居再回写； ③ 够高：白到近黑只用 160px，8bit 下必然分层。 不要再往这里加任何 ::after 光晕：覆盖层在两端被 overflow 裁断， 留下的残余色差正是之前那几条硬线的来源。 */ /* 2026-09-13 Jed：「间隔太大，不紧凑」。实测两块内容之间空了 455px —— 过渡带自己 259px，两边区块又各 98px 内边距，三者叠加。 过渡带本身就是留白，紧挨着它的那一侧不该再付全额内边距。 现在：过渡带 ~150 + 两侧各 40 = 230px（原 455）。没有过渡带的地方内边距不变。 */ .lf-bridge{ position:relative; height:clamp(110px,11vw,170px); margin-block:-1px; --bridge-from:#F7FAFB; --bridge-to:var(--night); background:linear-gradient(180deg, var(--bridge-from) 0%, color-mix(in oklab, var(--bridge-to) 1.12%, var(--bridge-from)) 6.25%, color-mix(in oklab, var(--bridge-to) 4.3%, var(--bridge-from)) 12.5%, color-mix(in oklab, var(--bridge-to) 9.23%, var(--bridge-from)) 18.75%, color-mix(in oklab, var(--bridge-to) 15.62%, var(--bridge-from)) 25%, color-mix(in oklab, var(--bridge-to) 23.19%, var(--bridge-from)) 31.25%, color-mix(in oklab, var(--bridge-to) 31.64%, var(--bridge-from)) 37.5%, color-mix(in oklab, var(--bridge-to) 40.67%, var(--bridge-from)) 43.75%, color-mix(in oklab, var(--bridge-to) 50%, var(--bridge-from)) 50%, color-mix(in oklab, var(--bridge-to) 59.33%, var(--bridge-from)) 56.25%, color-mix(in oklab, var(--bridge-to) 68.36%, var(--bridge-from)) 62.5%, color-mix(in oklab, var(--bridge-to) 76.81%, var(--bridge-from)) 68.75%, color-mix(in oklab, var(--bridge-to) 84.38%, var(--bridge-from)) 75%, color-mix(in oklab, var(--bridge-to) 90.77%, var(--bridge-from)) 81.25%, color-mix(in oklab, var(--bridge-to) 95.7%, var(--bridge-from)) 87.5%, color-mix(in oklab, var(--bridge-to) 98.88%, var(--bridge-from)) 93.75%, var(--bridge-to) 100%) } @supports not (background: color-mix(in oklab, red, blue)){ .lf-bridge{ background:linear-gradient(180deg,var(--bridge-from),var(--bridge-to)) } } .lf-bridge--d2l{ --bridge-from:var(--night); --bridge-to:#F7FAFB } .lf-bridge--l2d{ --bridge-from:#F7FAFB; --bridge-to:var(--night) } /* 没有 JS 时的静态兜底：邻居不是标准明/暗底色的几处 */ .lf-strip + .lf-bridge{ --bridge-from:var(--bg-1,#212E3B) } .lf-open + .lf-bridge,.lf-stage-sec + .lf-bridge,.lf-band + .lf-bridge{ --bridge-from:var(--night) } /* ---------- 诚实对照（取代被证伪的三层刻度） ---------- */ .lf-vs{ display:grid; gap:16px; margin-top:26px } @media(min-width:900px){ .lf-vs{ grid-template-columns:1.08fr .92fr; align-items:start } .lf-vs--one{ grid-template-columns:1fr } } @media(min-width:1060px){ .lf-vs--one .lf-vs__list{ columns:2; column-gap:40px } .lf-vs--one .lf-vs__list li{ break-inside:avoid } } .lf-vs__col{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 28px; box-shadow:var(--shadow) } .lf-vs__col--add{ border-color:var(--teal); box-shadow:0 0 0 1px var(--teal),var(--shadow) } .lf-vs__cap{ display:flex; align-items:center; gap:12px; font-size:16px; letter-spacing:-.005em; font-weight:720; color:var(--ink); margin-bottom:20px } .lf-vs__sign{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--teal); color:#03181B; font-family:var(--f-dis); font-weight:800; font-size:17px; flex:none } .lf-vs__sign--m{ background:var(--ink-3); color:var(--bg-2) } .lf-vs__list{ list-style:none; margin:0; padding:0; counter-reset:v } .lf-vs__list li{ counter-increment:v; position:relative; padding:14px 0 14px 0; border-top:1px solid var(--line); font-size:15px; line-height:1.62; color:var(--ink-2) } .lf-vs__list li:first-child{ border-top:0; padding-top:0 } .lf-vs__list b{ color:var(--ink); font-weight:680 } /* ---------- 亚马逊评价 ---------- */ .lf-revs{ display:grid; gap:14px } @media(min-width:760px){ .lf-revs{ grid-template-columns:1fr 1fr } } .lf-rev{ margin:0; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 26px; display:flex; flex-direction:column; gap:12px } .lf-rev__stars{ color:var(--star); font-size:16px; letter-spacing:.12em; line-height:1 } .lf-rev blockquote{ margin:0; font-size:16px; line-height:1.62; color:var(--ink) } .lf-rev figcaption{ font-size:13px; color:var(--ink-2); font-weight:620; margin-top:auto } .lf-rev figcaption span{ font-size:12.5px; letter-spacing:0; color:var(--ink-3); font-weight:440 } /* ---------- 首屏：配对前提排在 CTA 之前（红线） ---------- */ .lf-open__setup{ margin:clamp(14px,2vw,20px) 0 0; max-width:62ch; font-size:13px; line-height:1.62; color:rgba(255,255,255,.72); border-left:2px solid rgba(255,255,255,.26); padding-left:14px } .lf-open__setup a{ color:var(--teal-hi); white-space:nowrap } /* ---------- 卡片悬停/滚动揭示：图上掀起一条细节 ---------- */ .lf-card__peek{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:34px 18px 16px; background:linear-gradient(180deg,transparent,rgba(6,8,6,.62) 34%,rgba(6,8,6,.9)); opacity:0; transform:translateY(12px); transition:opacity .34s cubic-bezier(.2,.8,.3,1), transform .34s cubic-bezier(.2,.8,.3,1); pointer-events:none } .lf-card__peek em{ font-style:normal; color:#fff; font-size:13.5px; font-weight:620; line-height:1.5; display:block; text-shadow:0 1px 6px rgba(0,0,0,.8) } .lf-card__peek::before{ content:""; position:absolute; left:18px; top:20px; width:22px; height:2px; background:var(--teal-hi); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .4s .06s cubic-bezier(.2,.8,.3,1) } .lf-card:hover .lf-card__peek, .lf-card.is-peek .lf-card__peek{ opacity:1; transform:none } .lf-card:hover .lf-card__peek::before, .lf-card.is-peek .lf-card__peek::before{ transform:scaleX(1) } .lf-card:hover .lf-card__media video, .lf-card.is-peek .lf-card__media video{ transform:scale(1.04) } /* 触屏没有 hover —— 滚到视口中间自动掀起（92% 展示在手机上） */ @media(hover:none){ .lf-card__peek{ padding-bottom:14px } } @media(prefers-reduced-motion:reduce){ .lf-card__peek{ transition:none } .lf-card__peek::before{ transition:none } } /* 走马灯卡片也给一点反应 */ .lf-shot{ transition:transform .3s cubic-bezier(.2,.8,.3,1), border-color .3s } .lf-shot:hover{ transform:translateY(-3px) scale(1.02) } /* 装箱格：悬停浮起 + teal 描边（已有），补图标微缩放 */ .lf-boxgrid img{ transition:transform .34s cubic-bezier(.2,.8,.3,1) } .lf-boxgrid figure:hover img{ transform:scale(1.07) } /* 刻度两栏：悬停整栏抬一点 */ .lf-vs__col{ transition:transform .26s cubic-bezier(.2,.8,.3,1), box-shadow .26s } .lf-vs__col:hover{ transform:translateY(-3px) } /* 评价卡 */ .lf-rev{ transition:transform .26s cubic-bezier(.2,.8,.3,1), border-color .26s } .lf-rev:hover{ transform:translateY(-3px); border-color:var(--line-2) } /* 供电两卡 */ .lf-power{ transition:transform .26s cubic-bezier(.2,.8,.3,1), box-shadow .26s } .lf-power:hover{ transform:translateY(-3px); box-shadow:var(--shadow) } .lf-power__media img{ transition:transform .5s cubic-bezier(.2,.8,.3,1) } .lf-power:hover .lf-power__media img{ transform:scale(1.045) } /* ---------- 页脚：按 Nextbase 的密度重做 ---------- */ .lf-foot{ padding-top:clamp(52px,6vw,76px) } .lf-foot__top{ display:grid; gap:34px; padding-bottom:34px; border-bottom:1px solid #26333F } @media(min-width:900px){ .lf-foot__top{ grid-template-columns:1.15fr .85fr; gap:clamp(40px,6vw,90px) } } .lf-foot__brand .lf-logo{ margin-bottom:16px; color:#EDF4F7 } .lf-foot__blurb{ margin:0 0 20px; font-size:14.5px; line-height:1.62; color:#A4B5C0; max-width:44ch } .lf-foot__apps{ display:flex; gap:10px; flex-wrap:wrap } .lf-foot__apps a{ display:flex; align-items:center; gap:11px; padding:9px 17px 9px 14px; border:1px solid #3A4A59; border-radius:12px; color:#EDF4F7; text-decoration:none; transition:border-color .2s, background .2s } .lf-foot__apps a:hover{ border-color:#3FC2E0; background:rgba(63,194,224,.08) } .lf-foot__apps span{ display:flex; flex-direction:column; line-height:1.15; font-size:14.5px; font-weight:680 } .lf-foot__apps em{ font-style:normal; font-size:10.5px; font-weight:440; color:#7A8B98; letter-spacing:.02em } .lf-foot__appnote{ margin:12px 0 0; font-size:12.5px; color:#7A8B98 } .lf-foot__appnote b{ color:#A4B5C0 } .lf-foot__sign h4{ margin:0 0 8px } .lf-foot__sign .lf-sm{ color:#A4B5C0; margin:0 0 16px; max-width:44ch } .lf-foot__form{ display:flex; gap:10px; flex-wrap:wrap } .lf-foot__form .lf-input{ flex:1; min-width:190px; margin:0; background:#141D26; border-color:#3A4A59; color:#EDF4F7 } .lf-foot__form .lf-input::placeholder{ color:#7A8B98 } .lf-foot__legal{ margin:12px 0 0; font-size:11.5px; line-height:1.6; color:#7A8B98 } .lf-foot__legal a{ color:#3FC2E0 } .lf-foot__grid{ display:grid; gap:30px 24px; grid-template-columns:repeat(2,1fr); padding:34px 0 } @media(min-width:720px){ .lf-foot__grid{ grid-template-columns:repeat(3,1fr) } } @media(min-width:1060px){ .lf-foot__grid{ grid-template-columns:repeat(5,1fr) } } .lf-foot__promise{ display:flex; flex-wrap:wrap; gap:10px 26px; padding:20px 0; border-top:1px solid #26333F; font-size:13px; color:#7A8B98 } .lf-foot__promise b{ color:#EDF4F7; font-weight:660 } /* ---------- 三件事（买点主装置） ---------- */ .lf-three{ display:grid; gap:16px; margin-top:28px } @media(min-width:820px){ .lf-three{ grid-template-columns:repeat(3,1fr) } } .lf-thr{ position:relative; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; padding:0 0 24px; box-shadow:var(--shadow); transition:transform .26s cubic-bezier(.2,.8,.3,1), border-color .26s } .lf-thr:hover{ transform:translateY(-4px) } .lf-thr--hero{ border-color:var(--teal); box-shadow:0 0 0 1px var(--teal),var(--shadow) } /* 鼠标进到这一组，第一张就交出高亮，谁被指到谁亮 */ .lf-three:hover .lf-thr--hero{ border-color:var(--line); box-shadow:none } .lf-three:hover .lf-thr--hero .lf-thr__n{ background:var(--bg-2); border-color:var(--line-2); color:var(--ink-3) } .lf-thr:hover{ border-color:var(--teal); box-shadow:0 0 0 1px var(--teal),var(--shadow) } .lf-thr:hover .lf-thr__n{ background:var(--teal); border-color:var(--teal); color:#04212B } .lf-thr__n{ position:absolute; right:16px; top:14px; z-index:3; font-size:13px; font-weight:700; color:#fff; background:rgba(0,0,0,.42); backdrop-filter:blur(3px); width:30px; height:30px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.3) } .lf-thr--hero .lf-thr__n{ background:var(--teal); border-color:var(--teal); color:#04212B } .lf-thr__media{ position:relative; aspect-ratio:4/3; background:#0E151C; overflow:hidden } .lf-thr__media img,.lf-thr__media video{ width:100%; height:100%; object-fit:cover; transition:transform .55s cubic-bezier(.2,.8,.3,1) } .lf-thr:hover .lf-thr__media img{ transform:scale(1.045) } .lf-thr__tag{ position:absolute; left:14px; bottom:14px } /* app-live.webp 是 640×1259 的竖图（手机界面）。放进 4:3 / 16:10 的横框里 object-fit:cover 只能看到中间 38%（上下各切掉 31%），顶部的实时画面和底部的地图同时被切 —— 这就是 「上面没显示、下面也没显示」。窗口高度由框的比例决定改不了，所以改把窗口移到有信息的那一段： 状态栏 + 实时路面画面 + 那排控制键。object-position 的百分比是「窗口上沿 / (原图高 − 窗口高)」， 要露出原图 y≈110 起 → 14%。换图或换框比例时这个数要重算。 */ .lf-appshot img{ object-position:center 14% } .lf-thr h3{ font-size:21px; font-weight:740; letter-spacing:-.018em; margin:22px 24px 10px; line-height:1.2 } .lf-thr p{ margin:0 24px; font-size:15px; line-height:1.62; color:var(--ink-2) } .lf-thr__fine{ margin-top:12px !important; padding-top:12px; border-top:1px solid var(--line); font-size:12.5px !important; color:var(--ink-3) !important; line-height:1.58 } /* ---------- 「我们怎么查的」折叠块 ---------- */ .lf-how{ margin-top:18px; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r); overflow:hidden } .lf-how summary{ cursor:pointer; padding:16px 22px; font-size:15px; font-weight:660; color:var(--ink-2); list-style:none; display:flex; align-items:center; gap:10px } .lf-how summary::-webkit-details-marker{ display:none } .lf-how summary::before{ content:"+"; width:22px; height:22px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; font-size:15px; color:var(--ink-3); flex:none; transition:transform .22s } .lf-how[open] summary::before{ content:"–"; transform:rotate(180deg) } .lf-how summary:hover{ color:var(--ink) } .lf-how > div{ padding:0 22px 22px; font-size:14.5px; line-height:1.66; color:var(--ink-2) } .lf-how > div p{ margin:0 0 12px } .lf-how > div p:last-child{ margin:0 } .lf-how ul{ margin:0 0 12px; padding-left:20px } .lf-how li{ margin-bottom:7px } /* ========================================================================== 商品页专用构件 ========================================================================== */ .lf-open--pdp{ min-height:auto; align-items:stretch } .lf-open--pdp .lf-open__in{ padding-top:clamp(76px,9vw,110px) } .lf-deck{ display:grid; gap:clamp(24px,3.4vw,48px) } @media(min-width:980px){ .lf-deck{ grid-template-columns:1fr minmax(420px,470px); align-items:start } } .lf-deck__pts{ list-style:none; margin:clamp(18px,2.4vw,26px) 0 0; padding:0; display:grid; gap:10px } .lf-deck__pts li{ position:relative; padding-left:26px; font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.82) } .lf-deck__pts li::before{ content:""; position:absolute; left:0; top:8px; width:12px; height:2px; border-radius:2px; background:var(--teal-hi) } .lf-card-buy{ background:rgba(255,255,255,.97); color:#0F1922; border-radius:var(--r-lg); padding:24px; box-shadow:0 30px 70px -34px rgba(0,0,0,.8); --ink:#0F1922; --ink-2:#4E5D68; --ink-3:#7F8F9B; --line:#E1E8EC; --line-2:#C6D2DA; --bg-2:#fff; --bg-3:#F5F9FA; --teal-deep:#0B6272 } .lf-notice{ margin:16px 0 0; padding:14px 16px; border-radius:14px; font-size:13.5px; line-height:1.6; background:rgba(226,163,86,.10); border:1px solid rgba(200,140,50,.34); color:#4E5D68 } .lf-notice b{ display:block; color:#7A5410; margin-bottom:4px; font-weight:700 } .lf-pick--kit{ margin:16px 0 0; gap:10px } .lf-kit{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; cursor:pointer; border:1px solid var(--line-2); border-radius:16px; background:#fff; transition:border-color .18s, box-shadow .18s, background .18s } .lf-kit:hover{ border-color:#9FB4BF } .lf-kit input{ appearance:none; width:19px; height:19px; margin-top:2px; border:1.5px solid #B6C4CC; border-radius:50%; flex:none; transition:border-color .16s, box-shadow .16s } .lf-kit input:checked{ border-color:var(--teal); box-shadow:inset 0 0 0 5px var(--teal) } .lf-kit:has(input:checked){ border-color:var(--teal); box-shadow:0 0 0 1px var(--teal) } .lf-kit__body{ flex:1; display:flex; flex-direction:column; gap:5px } .lf-kit__top{ display:flex; align-items:baseline; gap:10px } .lf-kit__top b{ font-size:16px; font-weight:720 } .lf-kit__top em{ font-style:normal; font-size:19px; font-weight:800; letter-spacing:-.02em; margin-left:auto } .lf-kit__stock{ font-size:12.5px; font-weight:640 } .lf-kit__stock--in{ color:#17915E } .lf-kit__stock--out{ color:#9A6410 } .lf-kit__note{ font-size:13px; color:var(--ink-2); line-height:1.55 } .lf-kit__form{ display:none; gap:8px; margin-top:8px } .lf-kit--out:has(input:checked) .lf-kit__form{ display:flex; flex-wrap:wrap } .lf-kit__form .lf-input{ flex:1; min-width:170px; margin:0; min-height:46px; font-size:16px } .lf-card-buy .lf-buy__box{ font-size:13.5px } .lf-card-buy .lf-buy__setup{ font-size:12.5px } /* FAQ 折叠组 */ .lf-faq{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:24px } .lf-faq details{ background:var(--bg-2) } .lf-faq summary{ cursor:pointer; padding:19px 24px; font-size:17px; font-weight:660; list-style:none; display:flex; align-items:center; gap:14px; line-height:1.35 } .lf-faq summary::-webkit-details-marker{ display:none } .lf-faq summary::after{ content:"+"; margin-left:auto; width:26px; height:26px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; font-size:17px; color:var(--ink-3); flex:none; transition:transform .22s, background .22s } .lf-faq details[open] summary::after{ content:"–"; background:var(--teal); color:#fff; border-color:var(--teal) } .lf-faq summary:hover{ color:var(--teal-deep) } .lf-faq > details > div{ padding:0 24px 22px; font-size:15px; line-height:1.68; color:var(--ink-2) } .lf-faq > details > div p{ margin:0 } .lf-boxgrid__out{ opacity:.5 } .lf-boxgrid__out img{ filter:grayscale(1) } /* ---------- 规格表（密集、可扫读） ---------- */ .lf-spec{ display:grid; gap:14px; margin-top:26px } @media(min-width:820px){ .lf-spec{ grid-template-columns:1fr 1fr } } .lf-spec__g{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 24px } .lf-spec__g h4{ margin:0 0 14px; font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--teal-deep); text-transform:none } .lf-spec dl{ margin:0 } .lf-spec dl > div{ display:grid; grid-template-columns:1fr; gap:2px; padding:11px 0; border-top:1px solid var(--line) } .lf-spec dl > div:first-child{ border-top:0; padding-top:0 } @media(min-width:560px){ .lf-spec dl > div{ grid-template-columns:150px 1fr; gap:16px; align-items:baseline } } .lf-spec dt{ font-size:13px; font-weight:640; color:var(--ink-3) } .lf-spec dd{ margin:0; font-size:14.5px; line-height:1.55; color:var(--ink) } .lf-boxgrid--wide{ grid-template-columns:repeat(2,1fr) } @media(min-width:640px){ .lf-boxgrid--wide{ grid-template-columns:repeat(5,1fr) } } /* ---------- 套餐卡 ---------- */ .lf-plans{ display:grid; gap:14px; margin-top:26px } @media(min-width:720px){ .lf-plans{ grid-template-columns:repeat(2,1fr) } } @media(min-width:1000px){ .lf-plans{ grid-template-columns:repeat(3,1fr) } } .lf-plan{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; display:flex; flex-direction:column; transition:transform .24s cubic-bezier(.2,.8,.3,1), border-color .24s } .lf-plan:hover{ transform:translateY(-3px); border-color:var(--line-2) } .lf-plan--pick{ border-color:var(--teal); box-shadow:0 0 0 1px var(--teal),var(--shadow) } .lf-plan--year{ background:linear-gradient(180deg,var(--bg-3),var(--bg-2)) } .lf-plan__n{ font-size:13.5px; font-weight:700; color:var(--ink-3); letter-spacing:.01em } .lf-plan--pick .lf-plan__n{ color:var(--teal-deep) } .lf-plan__p{ font-size:clamp(30px,3.6vw,40px); font-weight:800; letter-spacing:-.035em; line-height:1; margin:10px 0 0 } .lf-plan__p span{ font-size:13px; font-weight:560; letter-spacing:0; color:var(--ink-3); margin-left:6px } .lf-plan__l{ margin:10px 0 16px; font-size:14px; color:var(--ink-2); line-height:1.5 } .lf-plan ul{ list-style:none; margin:0; padding:0; flex:1 } .lf-plan li{ position:relative; padding:9px 0 9px 22px; font-size:13.8px; line-height:1.5; border-top:1px solid var(--line); color:var(--ink-2) } .lf-plan li:first-child{ border-top:0 } .lf-plan li b{ color:var(--ink); font-weight:640 } .lf-plan li::before{ content:""; position:absolute; left:1px; top:16px; width:8px; height:8px; border-radius:2px; background:var(--teal) } .lf-plan__no{ opacity:.62 } .lf-plan__no::before{ background:var(--line-2) !important } .lf-plan__alt{ margin:14px 0 0; padding-top:14px; border-top:1px dashed var(--line-2); font-size:13px; color:var(--ink-2) } /* ---------- 教学视频 + 步骤 ---------- */ .lf-vid{ display:grid; gap:clamp(22px,3vw,40px); margin-top:26px } @media(min-width:900px){ .lf-vid{ grid-template-columns:1.15fr .85fr; align-items:start } } .lf-vid > video{ width:100%; border-radius:var(--r-lg); background:#000; aspect-ratio:16/9; box-shadow:var(--shadow) } .lf-vid__side{ padding-top:2px } /* ---------- 手机端滚动性能 ---------- backdrop-filter（吸顶头部 / 弹窗蒙层）与 video 上的 filter 每帧都要重算， 在手机上直接表现为「滑动不跟手」。窄屏一律换成不透明底色。 */ @media(max-width:900px){ .lf-head{ background:#FAFCFD; -webkit-backdrop-filter:none; backdrop-filter:none } .lf-modal__scrim{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(3,6,8,.86) } .lf-stage__v{ filter:none } .lf-band__media video,.lf-open__v{ filter:none } } .lf-ticker__track{ will-change:transform } .lf-band,.lf-stage,.lf-open{ contain:paint } /* ---------- 页脚：支持的付款方式 ---------- */ .lf-foot__pay{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.10) } .lf-foot__pay b{ font-size:11px; letter-spacing:.13em; text-transform:uppercase; font-weight:640; color:#8DA0AD; margin-right:6px; flex:none } /* 九个图标在 footer.php 里统一带 width="40" height="26"，但它们的真实比例差很多： 卡面图 visa/mastercard/amex/discover/jcb 是 1.54-1.60（≈框比例，正常）， 而 unionpay 是 2.62（又宽又扁的裸 logo）、paypal 是 1.00（方的）—— 靠 width:auto 撑不回来，实测九个全被锁成 40x26：银联横向压扁 38%、PayPal 横向拉宽 54%。 改成固定框 + object-fit:contain：每个 logo 在同一张白卡里等比居中，谁都不变形。 卡面图本来 logo 也只占中间一块，所以裸 logo 缩进来之后视觉大小是匹配的。 */ .lf-foot__pay img{ width:40px; height:26px; object-fit:contain; padding:2px 3px; box-sizing:border-box; display:block; border-radius:5px; background:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.16) } /* 银联是 2.63 的宽扁裸 logo：在 40px 框里 contain 之后只有 13px 高， 而其余八个是 21-22px —— 光不变形还不够，它看着比谁都小一圈。 单独给它 56px 框（唯一一个破 40 的），logo 回到 50x19，与其余持平。 */ .lf-foot__pay img[src*="unionpay"]{ width:56px } /* ---------- 领券反馈 ---------- */ .lf-modal__err{ margin:10px 0 0; font-size:13px; font-weight:600; color:var(--rec) } .lf-foot__out{ margin-top:4px } .lf-foot__out .lf-code{ background:#141D26; border-color:#2B3A47; color:#EDF4F7 } /* ---------- 窄屏修正（375 实测） ---------- ① 头部三件套（字标 + Buy + 汉堡）在 375 上只有 339px 可用， Buy 按钮不加 nowrap 会折成两行、把 70px 的头部撑破。 ② 首屏第二行用路面照片填字，38px 字号下细节太碎，读起来像重影 —— 窄屏换成实色。 ③ 左上 REC 时间戳与右上通道标签在 375 上会撞在一起。 */ @media(max-width:760px){ .lf-head__in{ gap:10px } .lf-logo__word{ font-size:17px } .lf-head .lf-btn--sm{ white-space:nowrap; padding:10px 14px; font-size:13.5px; min-height:42px } .lf-burger{ width:42px; height:42px } .lf-fill{ background-image:none; background:none; color:var(--teal-hi); -webkit-text-fill-color:currentColor; -webkit-text-stroke:0; filter:drop-shadow(0 2px 18px rgba(0,0,0,.9)) } .lf-open__chan,.lf-band__chan{ display:none } .lf-stamp{ font-size:10px } } .lf-burger svg{ pointer-events:none } /* ---------- 手机抽屉菜单 ---------- 2026-09-13：新版页脚把旧的 .ssf-drawer 换成了 .lf-drawer，但**样式一条都没写** —— 元素落在文档流末尾（实测 y≈17242），点汉堡「打开」的是一块 17000px 以外、 没有底色也没有定位的面板，手机上表现就是「按钮没反应」。 */ .lf-scrim{ position:fixed; inset:0; z-index:88; background:rgba(6,12,17,.55); border:0 } @supports (backdrop-filter:blur(2px)){ .lf-scrim{ -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px) } } .lf-drawer{ position:fixed; z-index:90; top:0; right:0; height:100%; height:100dvh; width:min(86vw,360px); display:flex; flex-direction:column; gap:18px; padding:22px 22px calc(22px + env(safe-area-inset-bottom)); background:var(--bg-2); color:var(--ink); border-left:1px solid var(--line); box-shadow:-24px 0 60px -24px rgba(9,18,26,.34); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; animation:lf-drawer-in .26s cubic-bezier(.2,.8,.3,1) } @keyframes lf-drawer-in{ from{ transform:translateX(14%); opacity:.4 } to{ transform:none; opacity:1 } } @media(prefers-reduced-motion:reduce){ .lf-drawer{ animation:none } } .lf-drawer__hd{ display:flex; align-items:center; justify-content:space-between; gap:12px } .lf-drawer__x{ width:44px; height:44px; flex:none; display:grid; place-items:center; font-size:24px; line-height:1; background:none; border:1px solid var(--line-2); border-radius:13px; color:var(--ink-2); cursor:pointer; touch-action:manipulation } .lf-drawer__nav{ display:flex; flex-direction:column; gap:2px; margin-top:2px } .lf-drawer__nav a{ display:flex; align-items:center; min-height:52px; padding:0 4px; font-size:19px; font-weight:680; letter-spacing:-.018em; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line) } .lf-drawer__nav a:last-child{ border-bottom:0 } .lf-drawer__nav a:active{ color:var(--teal-deep) } .lf-drawer__foot{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line) } .lf-drawer__meta{ margin:10px 0 0; font-size:12.5px; color:var(--ink-3); text-align:center } @media(min-width:1040px){ .lf-drawer,.lf-scrim{ display:none !important } } /* ═══════════ 商品页：Woo 的真实表单穿上新版式 ═══════════ woocommerce/single-product.php 把 `woocommerce_single_product_summary` 整段 放进 .lf-card-buy 里，所以这里要做的只是给 Woo / ssf- 那些既有元素换一身衣服。 **不要改动它们的结构或 class**——变体逻辑、加购、缺货候补、埋点全挂在上面。 */ .lf-open--pdp .lf-open__in{ padding-block:clamp(96px,10vw,140px) clamp(44px,6vw,72px) } /* 购买卡顶部的产品图组 —— 2026-09-15 终审：加购之前必须看得见机器。 一张主图 + 三张缩略，纯静态，不吃 Woo 的图库脚本。 */ .lf-buy__shots{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 0 18px } .lf-buy__shot{ margin:0; border-radius:12px; overflow:hidden; background:#F1F4F6; border:1px solid rgba(15,25,34,.07) } .lf-buy__shot--lead{ grid-column:1 / -1; border-radius:14px } .lf-buy__shot img{ display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:4/3 } .lf-buy__shot--lead img{ aspect-ratio:16/10 } .lf-card-buy .lf-pick--kit{ margin-top:16px } .lf-buy__pre{ margin:14px 0 0; padding:11px 14px; border-radius:12px; background:var(--bg-1); border-left:3px solid var(--teal); font-size:12.5px; line-height:1.6; color:var(--ink-2) } /* JS 接管后隐藏 Woo 原生下拉；JS 挂了就保留它（渐进增强） */ .lf-card-buy .variations_form.lf-kitjs .variations{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap } .lf-card-buy .variations{ width:100%; margin:14px 0 0; border-collapse:collapse } .lf-card-buy .variations th{ text-align:left; font-size:13px; font-weight:640; padding:0 0 6px } .lf-card-buy .variations select{ width:100%; min-height:48px; font-size:16px; padding:0 12px; border:1px solid var(--line-2); border-radius:12px; background:#fff; color:var(--ink) } .lf-card-buy .reset_variations{ display:none !important } .lf-card-buy .woocommerce-variation-description{ font-size:13px; color:var(--ink-2); line-height:1.55 } .lf-card-buy .woocommerce-variation-price{ margin:14px 0 0; font-size:26px; font-weight:800; letter-spacing:-.03em; color:var(--ink) } .lf-card-buy .woocommerce-variation-price del{ font-size:16px; color:var(--ink-3); font-weight:600 } .lf-card-buy .woocommerce-variation-availability p{ margin:6px 0 0; font-size:13px; font-weight:640 } .lf-card-buy .woocommerce-variation-availability .out-of-stock{ color:#9A6410 } .lf-card-buy .woocommerce-variation-add-to-cart{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:16px } .lf-card-buy .quantity{ display:none } .lf-card-buy .single_add_to_cart_button, .lf-card-buy .ssf-buy-now{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--f-dis); font-weight:720; font-size:16px; letter-spacing:-.008em; padding:15px 24px; border-radius:100px; border:1px solid transparent; cursor:pointer; min-height:52px; text-decoration:none; transition:transform .16s, box-shadow .2s, background .2s } .lf-card-buy .single_add_to_cart_button{ flex:1 1 190px; background:var(--teal); color:#04212B; box-shadow:0 10px 26px -10px rgba(14,151,168,.7) } .lf-card-buy .single_add_to_cart_button:hover{ background:var(--teal-hi); transform:translateY(-1px) } .lf-card-buy .ssf-buy-now{ flex:0 1 auto; background:#fff; color:var(--ink); border-color:var(--line-2) } .lf-card-buy .ssf-buy-now:hover{ border-color:var(--ink-3) } .lf-card-buy .single_add_to_cart_button.disabled, .lf-card-buy .single_add_to_cart_button:disabled{ opacity:.42; cursor:not-allowed; box-shadow:none } .lf-card-buy .variations_form .woocommerce-variation.single_variation:empty{ display:none } /* 后摄到货通知表单（2026-09-23 起在 details.lf-buy__rear 里） */ .lf-card-buy .ssf-restock{ margin:14px 0 0; padding:14px 16px; border-radius:14px; background:var(--bg-1); border:1px solid var(--line) } .lf-card-buy .ssf-restock__lead{ margin:0 0 10px; font-size:13px; line-height:1.6; color:var(--ink-2) } .lf-card-buy .ssf-restock__form{ display:flex; gap:8px; flex-wrap:wrap } .lf-card-buy .ssf-restock__form input[type=email]{ flex:1 1 180px; min-height:48px; font-size:16px; padding:0 14px; border:1px solid var(--line-2); border-radius:12px; background:#fff } .lf-card-buy .ssf-restock__form .ssf-btn{ min-height:48px; padding:0 18px; border-radius:100px; background:var(--ink); color:#fff; border:0; font-weight:700; cursor:pointer } .lf-card-buy .ssf-form-ok{ margin:0; font-size:13.5px; font-weight:640; color:#17915E } .lf-card-buy .ssf-form-err{ margin:0 0 8px; font-size:13px; font-weight:640; color:var(--rec) } /* 新版甲板自己有信任行与 SKU 之外的说明，Woo 那两块收起来 */ .lf-card-buy .ssf-pdp-trust, .lf-card-buy .product_meta, .lf-card-buy .woocommerce-product-rating{ display:none } .lf-card-buy .ssf-buy-anchor{ display:block; height:0 } .lf-card-buy .woocommerce-variation-add-to-cart-disabled .ssf-buy-now{ display:none } @media(max-width:979px){ .lf-open--pdp .lf-open__in{ padding-block:clamp(84px,14vw,110px) 40px } /* 单栏时购买卡不要铺满 820px —— 那么宽的表单在 iPad 上很怪 */ .lf-card-buy{ max-width:560px } /* 手机上左栏那三条要点与购买卡里的装箱行重复，去掉能把加购按钮往上提 ~150px */ /* 要点条现在不再与购买卡重复，窄屏也留着 */ .lf-open--pdp .lf-open__sub{ font-size:17px } } /* ═══════════ 商品页首屏 + 购买区（2026-09-23 成交诊断 P0-1 / P0-2，Jed 批准）═══════════ 桌面（≥980px）：仍是深色路面画面 + 右侧购买卡，只换了左栏文案（小字 H1 / 主标题 / 副标题）。 手机与平板竖屏（≤979px）：浅底，真机装车照放在文字上方（390 宽时约 390×220，不压字）； 390×844 下 H1、主标题、副标题、价格、$20 行、Buy now 全部落在 y<780 （底部 Woo 常驻购买条约占 66px，所以目标线是 780 不是 844）。 2026-09-23 QA 追加：iOS Safari 工具栏展开时 390×844 的可视高只有约 660px（收起约 750）， Buy now 在 650–704 等于在第一屏外。装车照 390×220 → 390×190（机器仍完整在画面里）、 几处行距/间距各收 2–6px、按钮 54 → 50px（仍 ≥48 可点区），Buy now 上移约 60px 到 660 以内； 同时常驻购买条在首屏 Buy now 露出时收起（inc/woocommerce.php），不再盖住它。 这一段必须排在 .lf-open__h1 / .lf-open__sub / .lf-open__eye 之后：同特异度靠先后顺序覆盖。 */ .lf-open--pdp > picture{ display:contents } .lf-open__shot{ display:none } .lf-deck__hook{ font-size:clamp(34px,4.6vw,60px); line-height:1.02; letter-spacing:-.034em; text-wrap:balance } .lf-deck__sub{ font-size:clamp(16px,1.45vw,19px); line-height:1.55; max-width:52ch; font-weight:520 } .lf-deck__m{ display:none } @media(max-width:979px){ .lf-open--pdp{ flex-direction:column; background:var(--bg); color:var(--ink) } .lf-open--pdp .lf-open__v, .lf-open--pdp .lf-open__grade, .lf-open--pdp .lf-open__chan{ display:none } .lf-open--pdp .lf-open__shot{ display:block; width:100%; max-width:none; height:auto; aspect-ratio:390/190; max-height:340px; object-fit:cover; object-position:50% 46% } .lf-open--pdp .lf-open__in{ padding-block:12px 36px } .lf-open--pdp .lf-deck{ gap:24px } .lf-deck__h1{ margin:0 0 4px; font-size:13px; line-height:1.4; letter-spacing:.004em; color:var(--teal-deep); text-shadow:none } .lf-deck__hook{ font-size:clamp(28px,7.4vw,40px); line-height:1.06; color:var(--ink) } .lf-open--pdp .lf-deck__sub{ margin-top:8px; font-size:15px; line-height:1.45; max-width:62ch; color:var(--ink-2); text-shadow:none; font-weight:500 } .lf-deck__pts{ display:none } .lf-deck__m{ display:block; margin-top:12px } .lf-deck__price{ margin:0; font-size:14.5px; line-height:1.45; color:var(--ink-2) } .lf-deck__price b{ font-size:19px; line-height:1; font-weight:800; letter-spacing:-.02em; color:var(--ink) } .lf-deck__cpn{ margin:3px 0 0; font-size:14px; line-height:1.38; font-weight:620; color:var(--teal-deep); text-wrap:balance } .lf-deck__buy{ margin:10px 0 0 } .lf-deck__m .lf-btn--lg{ min-height:50px; padding:12px 24px } /* 浅底上购买卡不用那道深色大投影（那是给深色路面画面准备的），换成站内浅色卡的描边 + 轻投影 */ .lf-open--pdp .lf-card-buy{ border:1px solid var(--line); box-shadow:var(--shadow) } } /* 购买区：价格 → 一行套餐 → 按钮 → 信任行 → 后摄一行链接 */ .lf-buy__plan{ margin:14px 0 0; font-size:13.5px; line-height:1.58; color:var(--ink-2) } .lf-card-buy .lf-buy__trust{ margin:12px 0 0; font-size:14px; line-height:1.55; color:var(--ink); font-weight:560 } /* 只剩一档可买时（后摄套装停用期间）藏起 Woo 的套件下拉；见 inc/woocommerce.php 的 .lf-onekit */ .lf-card-buy .lf-onekit ~ .variations{ display:none } .lf-buy__rear{ margin:14px 0 0; font-size:14px; line-height:1.5 } .lf-buy__rear > summary{ list-style:none; cursor:pointer; color:var(--teal-deep); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; padding:4px 0 } .lf-buy__rear > summary::-webkit-details-marker{ display:none } .lf-buy__rear > summary:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; border-radius:4px } .lf-card-buy .lf-buy__rear .ssf-restock{ margin-top:10px } /* 自动套用的 H2OCT20 在块状购物车/结账里不给「×」（2026-09-23 QA）： 点了 Woo 会弹「Coupon code "h2oct20" has been removed」，而 smartsf_promo_sync() 下一刻就把它补回来， 提示和页面自相矛盾。想用别的码直接在 Add coupons 里输——inc/coupon.php 会让它替换掉 H2OCT20。 只认这一张：个人码等其它券的 × 照常可点。 */ .wc-block-components-totals-discount__coupon-list-item .wc-block-components-chip__remove[aria-label*="h2oct20" i]{ display:none } /* $20 提醒弹窗（2026-09-23 起不要邮箱：一句话 + Buy + 关闭，只在桌面离开意图时出现） */ .lf-modal__box--note{ width:min(470px,100%); display:block } .lf-modal__box--note .lf-modal__body{ padding:34px 30px 28px } .lf-modal__box--note .lf-modal__h{ margin:0; padding-right:30px } .lf-modal__box--note .lf-modal__x{ background:var(--bg-1); color:var(--ink); border-color:var(--line) } .lf-modal__acts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px } /* ---------- 年付：不是第四档，是 Standard 的另一种付法 ---------- 并排放在三张卡旁边会被读成「还有第四种套餐」（Jed 2026-09-13 指出）。 拿出来单独一条，并把「省多少」算清楚——这是我们自己两种付法的真实差额， 不是虚构划线价。 */ .lf-yearly{ margin-top:clamp(18px,2.4vw,26px); display:grid; gap:clamp(16px,2.4vw,30px); align-items:center; padding:clamp(20px,2.6vw,30px); border-radius:var(--r-lg); background:var(--bg-2); border:1px solid var(--line) } @media(min-width:860px){ .lf-yearly{ grid-template-columns:1fr auto } } .lf-yearly__l h3{ margin:8px 0 0; font-size:clamp(19px,2.2vw,25px); font-weight:760; letter-spacing:-.024em; line-height:1.25 } .lf-yearly__l h3 b{ color:var(--teal-deep); font-weight:800 } .lf-dark .lf-yearly__l h3 b{ color:var(--teal-hi) } .lf-yearly__l p{ margin:10px 0 0; font-size:14.5px; line-height:1.62; color:var(--ink-2); max-width:62ch } .lf-yearly__l p b{ color:var(--ink); font-weight:660 } .lf-yearly__r{ text-align:left; padding-left:clamp(0px,2vw,22px) } @media(min-width:860px){ .lf-yearly__r{ border-left:1px solid var(--line); text-align:right } } .lf-yearly__was{ font-size:13px; color:var(--ink-3); text-decoration:line-through } .lf-yearly__now{ font-size:clamp(30px,4vw,42px); font-weight:800; letter-spacing:-.035em; line-height:1.05; margin-top:2px } .lf-yearly__save{ margin-top:6px; font-size:13px; font-weight:680; color:var(--teal-deep) } .lf-dark .lf-yearly__save{ color:var(--teal-hi) } /* 商店徽章：Apple 标白色、Google Play 四色三角，两者都按官方样式不上色相 */ .lf-foot__apps svg{ flex:none } .lf-appbadge__ap{ color:#fff } .lf-foot__apps a:hover .lf-appbadge__gp,.lf-foot__apps a:hover .lf-appbadge__ap{ opacity:1 } /* ---------- 两个商店按钮：同等分量，靠 hover 区分 ---------- 原来一个填 teal 一个描边，被读成「其中一个已被选中」（Jed 2026-09-13）。 两个都是主动作，就给同一种静态样式，谁被指到谁亮。 */ .lf-btn--store{ background:transparent; color:#EDF4F7; border:1px solid rgba(255,255,255,.30); gap:11px; padding-inline:22px } .lf-btn--store svg{ flex:none } .lf-btn--store:hover{ border-color:var(--teal-hi); background:rgba(63,194,224,.12); color:#fff } .lf-sec:not(.lf-dark) .lf-btn--store{ color:var(--ink); border-color:var(--line-2) } .lf-sec:not(.lf-dark) .lf-btn--store:hover{ border-color:var(--teal); background:rgba(18,144,168,.07) } /* ---------- 购物车 / 结账：不要用文档页的窄栏 ---------- cart 与 checkout 走的是 page.php，外面套着 .ssf-container--narrow(800px)， 于是 1440 视口下 Woo 的区块只拿到 704px：表单栏 458、订单摘要栏 246， 商品名「SmartSF H2 — 4G AI Sentinel Dash Camera」被挤进 57px 宽的格子里折成 7 行（实测）。 最后一步的信任感就折在这里。给这两页一个正常宽度的容器。 */ body.woocommerce-cart .ssf-container--narrow, body.woocommerce-checkout .ssf-container--narrow{ max-width:1120px } body.woocommerce-cart .ssf-doc__body, body.woocommerce-checkout .ssf-doc__body{ max-width:none } @media(min-width:1000px){ body.woocommerce-checkout .wc-block-checkout__main{ padding-right:44px } .wc-block-components-sidebar{ min-width:330px } } .wc-block-components-product-name{ line-height:1.35 } /* ---------- 页头购物车入口 ---------- 加购之后没有任何提示、页面还弹回顶部，而全站没有一个链接指向 /cart/（实测 0 个）， 购物车 cookie 又是跨会话保留的 —— 买家既看不到加成功了，也没法回去看里面有什么。 */ .lf-cartlink{ position:relative; display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; border:1px solid var(--line-2); font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; transition:border-color .2s ease, background .2s ease } .lf-cartlink:hover{ border-color:var(--teal); background:rgba(23,153,175,.06) } .lf-cartlink svg{ width:17px; height:17px; flex:none; pointer-events:none } .lf-cartlink__n{ min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--teal-deep,#0E7C90); color:#fff; font-size:11.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; line-height:1 } .lf-drawer .lf-cartlink{ width:100%; justify-content:center; margin-top:10px } /* 390px 下这一行本来就只剩 354px 可用（logo 150 + 页头内边距 36）。 加一个购物车入口后实测溢出 62px，所以窄屏两处收紧： 购物车只留图标+数字，页头的 Buy 按钮去掉「— $179」（价格在常驻购买条和首屏都还在）。 实测收紧后 scrollWidth=clientWidth=390，右侧还剩 18px 余量。 */ @media(max-width:600px){ .lf-buyprice{ display:none } .lf-head__r{ gap:8px } .lf-cartlink{ padding:9px 12px; gap:6px } .lf-cartlink span:not(.lf-cartlink__n){ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap } .lf-drawer .lf-cartlink span:not(.lf-cartlink__n){ position:static; width:auto; height:auto; overflow:visible; clip:auto } } /* ---------- WooCommerce 提示条 ---------- 主题此前从不输出 woocommerce_output_all_notices，所以「已加入购物车」看不到， 连「请先选择套件」这类错误提示也一并吞掉了。 */ .ssf-notices{ max-width:var(--maxw,1280px); margin:0 auto; padding:14px var(--pad) 0 } .ssf-notices:empty{ display:none } .ssf-notices .woocommerce-message, .ssf-notices .woocommerce-info, .ssf-notices .woocommerce-error{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 12px; padding:13px 16px; border-radius:12px; font-size:14.5px; line-height:1.5; border:1px solid var(--line-2); background:var(--bg-2); color:var(--ink); list-style:none } .ssf-notices .woocommerce-message{ border-color:rgba(23,153,175,.45); background:rgba(23,153,175,.08) } .ssf-notices .woocommerce-error{ border-color:rgba(196,72,58,.45); background:rgba(196,72,58,.07) } .ssf-notices .button{ margin-left:auto; padding:8px 15px; border-radius:999px; background:var(--teal-deep,#0E7C90); color:#fff; font-size:13.5px; font-weight:650 } /* Woo 自己的 woocommerce.css 给这三种提示画了一个 ::before 图标， 写死 position:absolute; top:1em; left:1.5em —— 那是按它默认的 padding-left:3.5em 排的。 我们把提示改成 flex + padding:13px 16px 之后没有中和它，图标就正好压在第一个字上 （实测「“SmartSF H2…」的 S 被盖住）。改成参与 flex 排版的普通元素。 ::after 是 Woo 的 clearfix（content:" "; display:table），在 flex 下会变成一个 多余的空 flex 项，连带多占一个 gap，一并关掉。 */ .ssf-notices .woocommerce-message::before, .ssf-notices .woocommerce-info::before, .ssf-notices .woocommerce-error::before{ position:static; top:auto; left:auto; flex:none; align-self:flex-start; margin-top:1px; font-size:16px; line-height:1.35 } .ssf-notices .woocommerce-message::after, .ssf-notices .woocommerce-info::after, .ssf-notices .woocommerce-error::after{ display:none } /* ---------- 安装视频的文字版 ---------- 视频画面上本来就有完整英文分步文字，逐字抄成页面内容： 手机上多数人静音播放，没声音等于白播；无障碍上视频也需要一份文字替代。 */ /* 激活步骤的文字版沿用视频自己的编号（Step 3/4/6…），所以这一列不再自动编号 —— 否则读出来是「2. Step 3.」「4. Step 6.」（2026-09-15 终审）。 */ .lf-steps__in ol.lf-steps__raw{ list-style:none; padding-left:0 } .lf-steps{ margin-top:14px; border:1px solid var(--line); border-radius:12px; background:var(--bg-2) } .lf-steps > summary{ cursor:pointer; list-style:none; padding:13px 18px; font-size:14.5px; font-weight:640; color:var(--ink); display:flex; align-items:center; gap:9px } .lf-steps > summary::-webkit-details-marker{ display:none } .lf-steps > summary::before{ content:"+"; font-family:var(--mono,monospace); font-weight:600; color:var(--teal); width:17px; text-align:center; flex:none } .lf-steps[open] > summary::before{ content:"\2212" } .lf-steps > summary:hover{ color:var(--teal-deep,#0E7C90) } .lf-steps__in{ padding:2px 18px 18px; border-top:1px solid var(--line) } .lf-steps__in ol{ margin:14px 0 0; padding-left:1.3em } .lf-steps__in li{ margin-bottom:10px; font-size:14.5px; line-height:1.62; color:var(--ink-2) } .lf-steps__in li b{ color:var(--ink) } .lf-steps__in li i{ font-style:italic; opacity:.85 } .lf-steps__in p{ margin:14px 0 0; font-size:13.5px; line-height:1.6; color:var(--ink-2) } /* ---------- 购物车空态 ---------- Woo 区块默认给空购物车配一张「哭脸」图（.with-empty-cart-icon 的 ::before）。 这个站从头到尾是仪表盘式的克制语气，一张哭脸表情既跳戏又像在卖惨。 class 已从页面内容里去掉；这里再兜一层，防止插件更新把它塞回来。 */ .wc-block-cart__empty-cart__title.with-empty-cart-icon::before, .wp-block-woocommerce-empty-cart-block .with-empty-cart-icon::before{ display:none !important } .wc-block-cart__empty-cart__title{ font-family:inherit; font-weight:700; letter-spacing:-.02em; font-size:clamp(24px,3.4vw,32px); margin:8px 0 0 } .ssf-emptycart__lede{ max-width:46ch; margin:12px auto 0; color:var(--ink-2); font-size:15.5px; line-height:1.65 } .wp-block-woocommerce-empty-cart-block{ padding-block:28px 8px } .wp-block-woocommerce-empty-cart-block .wc-block-grid__products{ justify-content:center } /* ---------- 节奏：紧挨过渡带的那一侧收掉内边距 ---------- */ .lf-bridge + .lf-sec, .lf-bridge + .lf-sec--tight{ padding-top:clamp(24px,3vw,40px) } .lf-sec:has(+ .lf-bridge), .lf-sec--tight:has(+ .lf-bridge){ padding-bottom:clamp(24px,3vw,40px) } .lf-bridge + .lf-strip{ padding-top:6px } .lf-strip:has(+ .lf-bridge){ padding-bottom:6px } /* :has() 不支持时退回：至少把过渡带后面那一侧收掉（主流浏览器都支持 :has） */ /* ---------- 说明书下载（/support/、/install/） ---------- */ /* token 用 live.css 自己这一套（--bg-2 / --r / --line），不是旧 main.css 的 --card / --radius —— 后者不在 .lf-dark 的翻转组里，卡片放进深色区块会是浅底。 */ .lf-dl{ display:grid; gap:14px; grid-template-columns:1fr; max-width:840px } @media(min-width:680px){ .lf-dl{ grid-template-columns:repeat(2,minmax(0,1fr)) } } .lf-dl__a{ display:flex; gap:14px; align-items:center; text-decoration:none; color:inherit; border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2); padding:18px 20px; min-height:48px; transition:border-color .22s, transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s } .lf-dl__a:hover{ border-color:var(--teal); transform:translateY(-3px); box-shadow:var(--shadow) } .lf-dl__a:focus-visible{ outline:2px solid var(--teal); outline-offset:3px } .lf-dl__ic{ flex:0 0 auto; width:36px; height:36px; color:var(--teal-deep) } .lf-dl__t{ min-width:0 } .lf-dl__t b{ display:block; font-size:17px; font-weight:660; letter-spacing:-.01em; color:var(--ink) } .lf-dl__t span{ display:block; margin-top:3px; font-size:12.5px; color:var(--ink-3); font-family:var(--f-mono); letter-spacing:.03em } .lf-dl__go{ margin-left:auto; flex:0 0 auto; color:var(--teal-deep); transition:transform .22s } .lf-dl__a:hover .lf-dl__go{ transform:translateY(3px) } .lf-dl__note{ margin-top:18px; max-width:840px }