/* CodeFun2000 Intro · 新版皮肤（v2，已设为默认） * 规则都写在 html[data-skin="v2"] 下，页面首屏脚本固定加上 data-skin="v2"； * 去掉该属性即可回到 cf-intro.css 的原版样式。布局与文案不动，只换配色、字重、圆角、阴影和动效。 * 浅色参照 DeepSeek：冷调近白、墨蓝文字、淡蓝云雾、毛玻璃胶囊。 * 深色参照 Moonshot：纯黑底、白字与中性灰、白色细线、光晕。 * 颜色原则：黑白灰为主，强调色只用于链接、指示点、焦点，不再大面积实色填充。 */ /* ================= 设计变量 ================= */ html[data-skin="v2"]:not([data-theme="dark"]) { --bg: #F7F8FA; --bg-2: #FFFFFF; --panel: #F2F4F7; --code: #FBFBFC; --surface: #FFFFFF; --surface-2: #F6F7F9; --nav-bg: rgba(247,248,250,.72); --sheet-bg: rgba(255,255,255,.86); --ink: #141A26; --ink-2: #3F4654; --ink-3: #6B7280; --muted: #9CA3AF; --line: rgba(20,26,38,.08); --line-2: rgba(20,26,38,.05); --line-3: rgba(20,26,38,.14); --blue: #4A62D8; --blue-deep: #3346B5; --blue-soft: rgba(74,98,216,.08); --blue-line: rgba(74,98,216,.22); --shadow-sm: 0 1px 2px rgba(20,26,38,.04); --shadow: 0 .5rem 1.875rem rgba(20,26,38,.06); --shadow-lg: 0 1.5rem 3.75rem rgba(20,26,38,.08); --v2-solid: #141A26; --v2-solid-hover: #2A3140; --v2-on-solid: #FFFFFF; --v2-glass: rgba(255,255,255,.55); --v2-glass-line: rgba(20,26,38,.14); --v2-glass-strong: rgba(255,255,255,.5); --v2-glass-hover: rgba(255,255,255,.8); --v2-link: #3D6FF0; --v2-link-hover: #2557D6; --v2-haze-1: rgba(120,146,255,.34); --v2-haze-2: rgba(170,150,255,.24); --v2-haze-3: rgba(110,190,255,.22); } html[data-skin="v2"][data-theme="dark"] { --bg: #000000; --bg-2: #050505; --panel: #141414; --code: #0B0B0B; --surface: #0F0F0F; --surface-2: #141414; --nav-bg: rgba(0,0,0,.55); --sheet-bg: rgba(12,12,12,.9); --ink: #F5F5F5; --ink-2: #BDBDBD; --ink-3: #8A8A8A; --muted: #5C5C5C; --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.06); --line-3: rgba(255,255,255,.18); --blue: #A5B4FC; --blue-deep: #C7D2FE; --blue-soft: rgba(165,180,252,.10); --blue-line: rgba(165,180,252,.28); --shadow-sm: none; --shadow: 0 1rem 2.5rem rgba(0,0,0,.5); --shadow-lg: 0 1.5rem 4rem rgba(0,0,0,.6); --v2-solid: #F5F5F5; --v2-solid-hover: #FFFFFF; --v2-on-solid: #000000; --v2-glass: rgba(255,255,255,.04); --v2-glass-line: rgba(255,255,255,.22); --v2-glass-strong: rgba(255,255,255,.05); --v2-glass-hover: rgba(255,255,255,.1); --v2-link: #8AB4FF; --v2-link-hover: #B3CDFF; --v2-haze-1: rgba(255,255,255,.07); --v2-haze-2: rgba(165,180,252,.10); --v2-haze-3: rgba(255,255,255,.04); } html[data-skin="v2"] { --r: 1.25rem; --r-lg: 1.5rem; } /* ================= 字体与标题 ================= */ html[data-skin="v2"] body { letter-spacing: .01em; } html[data-skin="v2"] .h1 { font-weight: 500; letter-spacing: .02em; line-height: 1.15; } html[data-skin="v2"] .h2 { font-weight: 500; letter-spacing: .02em; } html[data-skin="v2"] .pane h3, html[data-skin="v2"] .how h3, html[data-skin="v2"] .pt-card h3 { font-weight: 500; letter-spacing: .01em; } html[data-skin="v2"] .lead { color: var(--ink-3); font-weight: 400; } /* 双行标题的第二行：保持原版的品牌蓝 */ html[data-skin="v2"] .accent { color: #2B7FFF; } html[data-skin="v2"][data-theme="dark"] .accent { color: #4C93FF; } html[data-skin="v2"] b, html[data-skin="v2"] strong { font-weight: 600; } /* 栏目小标签：去掉蓝底蓝字，改成安静的细线胶囊 + 一个强调色小点 */ html[data-skin="v2"] .kicker { font: 500 .8125rem var(--font); letter-spacing: .04em; color: var(--ink-3); background: var(--v2-glass); border: 1px solid var(--line-3); padding: .3125rem .875rem; display: inline-flex; align-items: center; gap: .5rem; backdrop-filter: blur(.75rem); } html[data-skin="v2"] .kicker::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: var(--blue); } /* ================= 导航：顶部透明，滚动后出现毛玻璃与细线 ================= */ html[data-skin="v2"] .nav { background: transparent; border-bottom-color: transparent; backdrop-filter: none; transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease; } html[data-skin="v2"] .nav.v2-scrolled { background: var(--nav-bg); border-bottom-color: var(--line); backdrop-filter: saturate(1.4) blur(1rem); } html[data-skin="v2"] .brand { font-weight: 600; letter-spacing: .02em; } /* 「塔」字标：去掉底色，只留字本身 */ html[data-skin="v2"] .brand i { background: none; color: var(--ink); border-radius: 0; width: auto; height: auto; font-size: 1.375rem; font-weight: 700; line-height: 1; } html[data-skin="v2"] .brand b { color: var(--ink-3); font-weight: 500; } html[data-skin="v2"] .nav-links { color: var(--ink-3); } html[data-skin="v2"] .nav-links a { transition: color .2s; } html[data-skin="v2"] .nav-camp svg { color: var(--ink-2); } html[data-skin="v2"] .theme-btn, html[data-skin="v2"] .nav-user-btn { border-radius: 62.4375rem; background: var(--v2-glass); border-color: var(--line-3); backdrop-filter: blur(.75rem); } html[data-skin="v2"] .theme-btn:hover { color: var(--ink); border-color: var(--ink-3); } html[data-skin="v2"] .nav-user-btn { font-weight: 500; } html[data-skin="v2"] .nav-user-menu { border-radius: 1rem; } html[data-skin="v2"] .nav-user-menu a:hover, html[data-skin="v2"] .nav-user-menu button:hover { background: var(--panel); color: var(--ink); } /* ================= 按钮：全圆角胶囊；主按钮墨色/白色实底，次按钮细线毛玻璃 ================= */ html[data-skin="v2"] .btn { border-radius: 62.4375rem; font-weight: 500; letter-spacing: .02em; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s; } html[data-skin="v2"] .btn-primary { background: var(--v2-solid); color: var(--v2-on-solid); box-shadow: none; } html[data-skin="v2"] .btn-primary:hover { background: var(--v2-solid-hover); } html[data-skin="v2"] .btn-ghost { background: var(--v2-glass); color: var(--ink-2); border-color: var(--v2-glass-line); backdrop-filter: blur(.75rem); } html[data-skin="v2"] .btn-ghost:hover { color: var(--ink); border-color: var(--ink-3); } html[data-skin="v2"] .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* 整体高度略降 */ html[data-skin="v2"] .btn { height: 2.5rem; padding: 0 1.125rem; font-size: .9375rem; } html[data-skin="v2"] .btn-sm { height: 2.25rem; padding: 0 .875rem; font-size: .875rem; } /* 大按钮（首屏 + 页尾共三个）：毛玻璃胶囊 + 左侧线条图标（DeepSeek 首页同款） */ html[data-skin="v2"] .btn-lg { height: 2.75rem; padding: 0 1.25rem 0 1rem; gap: .5rem; font-size: .9375rem; font-weight: 500; background: var(--v2-glass-strong); color: var(--ink); border: 1px solid var(--v2-glass-line); backdrop-filter: saturate(1.4) blur(.75rem); -webkit-backdrop-filter: saturate(1.4) blur(.75rem); box-shadow: none; } html[data-skin="v2"] .btn-lg:hover { background: var(--v2-glass-hover); color: var(--ink); border-color: var(--ink-3); } /* 主按钮仍是实底：浅色墨底白字，深色白底黑字；只是换成带图标、更矮的胶囊 */ html[data-skin="v2"] .btn-lg.btn-primary { background: var(--v2-solid); color: var(--v2-on-solid); border-color: var(--v2-solid); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-skin="v2"] .btn-lg.btn-primary:hover { background: var(--v2-solid-hover); color: var(--v2-on-solid); border-color: var(--v2-solid-hover); } html[data-skin="v2"] .btn-lg::before { content: ""; width: 1.125rem; height: 1.125rem; flex: none; background: currentColor; -webkit-mask: var(--v2-ico) center / contain no-repeat; mask: var(--v2-ico) center / contain no-repeat; } /* 注册 / 开始使用：箭头进门 */ html[data-skin="v2"] .btn-lg.btn-primary { --v2-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M4 12h11'/%3E%3Cpath d='m11 8 4 4-4 4'/%3E%3C/svg%3E"); } /* 看产品演示：圆角方框里一个播放三角，原来的圆点图标隐藏 */ html[data-skin="v2"] .btn-lg[data-video] { --v2-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='m10 9 5 3-5 3z'/%3E%3C/svg%3E"); } html[data-skin="v2"] .btn-lg .play-dot { display: none; } html[data-skin="v2"] .play-dot { background: var(--panel); color: var(--ink); } /* ================= Hero：唯一的“记忆点”——背后的云雾/光晕 + 一次编排好的进场 ================= */ html[data-skin="v2"] .hero { position: relative; isolation: isolate; } html[data-skin="v2"] .hero::before { content: ""; position: absolute; z-index: -1; inset: -6rem -10vw -4rem; pointer-events: none; background: radial-gradient(38% 46% at 72% 42%, var(--v2-haze-1), transparent 70%), radial-gradient(30% 40% at 58% 70%, var(--v2-haze-2), transparent 72%), radial-gradient(34% 44% at 18% 20%, var(--v2-haze-3), transparent 70%); filter: blur(2.5rem); animation: v2-haze 22s ease-in-out infinite alternate; } /* 网格细线：100px × 100px，从导航栏下方一直铺到 Hero 底部，越往下越淡直到消失 */ html[data-skin="v2"] .hero::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -4rem; bottom: 0; pointer-events: none; background-image: linear-gradient(to right, var(--v2-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--v2-grid) 1px, transparent 1px); background-size: 100px 100px; background-position: center top; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.4) 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.85) 35%, rgba(0,0,0,.4) 70%, transparent 100%); } html[data-skin="v2"]:not([data-theme="dark"]) { --v2-grid: rgba(20,26,38,.06); } html[data-skin="v2"][data-theme="dark"] { --v2-grid: rgba(255,255,255,.07); } @keyframes v2-haze { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-2%, 1.5%, 0) scale(1.04); } 100% { transform: translate3d(1.5%, -1%, 0) scale(1.02); } } /* 深色：视频卡片背后一圈白色光晕（Moonshot 式） */ html[data-skin="v2"][data-theme="dark"] .hero .vcard { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 6rem rgba(255,255,255,.06), 0 2rem 5rem rgba(0,0,0,.6); } /* 演示视频是白底画面，纯黑背景上略压暗，避免刺眼 */ html[data-skin="v2"][data-theme="dark"] .vcard video { filter: brightness(.86); } html[data-skin="v2"] .hero .kicker, html[data-skin="v2"] .hero .h1, html[data-skin="v2"] .hero .lead, html[data-skin="v2"] .hero .hero-cta, html[data-skin="v2"] .hero .vcard { animation: v2-rise 1s cubic-bezier(.16,1,.3,1) both; } html[data-skin="v2"] .hero .h1 { animation-delay: .08s; } html[data-skin="v2"] .hero .lead { animation-delay: .16s; } html[data-skin="v2"] .hero .hero-cta { animation-delay: .24s; } html[data-skin="v2"] .hero .vcard { animation-delay: .2s; animation-duration: 1.3s; } @keyframes v2-rise { from { opacity: 0; transform: translateY(.75rem); filter: blur(.375rem); } to { opacity: 1; transform: none; filter: none; } } html[data-skin="v2"] .hero-cta small { color: var(--ink-3); } html[data-skin="v2"] .checks li::before { background: transparent; border: 1px solid var(--line-3); color: var(--ink-2); font-weight: 600; } /* 视频卡 */ html[data-skin="v2"] .vcard { border-radius: var(--r-lg); border-color: var(--line); box-shadow: var(--shadow-lg); } html[data-skin="v2"] .vcard .play { font-weight: 500; background: var(--sheet-bg); backdrop-filter: blur(1rem); border: 1px solid var(--line); box-shadow: var(--shadow); } html[data-skin="v2"] .vcard .play i { background: var(--v2-solid); color: var(--v2-on-solid); } html[data-skin="v2"] .vcard .dur { background: rgba(0,0,0,.45); backdrop-filter: blur(.5rem); border-radius: 62.4375rem; padding: .1875rem .625rem; } /* ================= 版块进场：上滑淡入 → 更柔的“模糊到清晰” ================= */ html[data-skin="v2"].js .reveal { transform: translateY(.625rem); filter: blur(.375rem); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1); } html[data-skin="v2"].js .reveal.in { transform: none; filter: none; } /* ================= 卡片 / 窗口：细线代替重投影 ================= */ html[data-skin="v2"] .card { border-radius: var(--r); border-color: var(--line); box-shadow: var(--shadow-sm); } html[data-skin="v2"] .window { border-radius: var(--r); border-color: var(--line); box-shadow: var(--shadow-lg); } html[data-skin="v2"][data-theme="dark"] .window, html[data-skin="v2"][data-theme="dark"] .card { box-shadow: none; } html[data-skin="v2"] .win-bar { background: var(--surface-2); border-bottom-color: var(--line); } html[data-skin="v2"] .win-bar i { opacity: .85; } html[data-skin="v2"][data-theme="dark"] .win-bar i { background: #3A3A3A !important; } html[data-skin="v2"] .chip { border-radius: 62.4375rem; border-color: var(--line); } html[data-skin="v2"] .chip.blue, html[data-skin="v2"] .tag.blue { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue); } html[data-skin="v2"] .ic { background: var(--panel); color: var(--ink); border: 1px solid var(--line); } /* ================= 核心场景：Liquid Glass 选项卡 ================= * 参照 iOS 液态玻璃工具栏： * - 玻璃本体几乎全透明，只带极淡的灰调，轻度模糊 + 提饱和； * - 边缘是一圈“发光的厚边”：左上最亮、右下次之，向内晕开一层柔光，看起来是凸起的厚玻璃； * - 外侧一圈极细的暗边 + 很轻的投影把形状托住（浅色页面上白边才看得出来）； * - 选中项是一颗同材质、更亮的玻璃透镜，切换时滑动并带一点液体般的拉伸回弹。 * 透镜由 cf-intro-v2.js 插入并定位；没有脚本时退回到按钮自身的选中底色。 */ html[data-skin="v2"] .tabs { position: relative; isolation: isolate; border-radius: 62.4375rem; padding: .375rem; gap: .125rem; border: 0; background: var(--lg-body); backdrop-filter: blur(.5rem) saturate(1.8); -webkit-backdrop-filter: blur(.5rem) saturate(1.8); box-shadow: inset 1.5px 2px 1px -0.5px var(--lg-spec), /* 左上高光 */ inset -1.5px -2px 1px -0.5px var(--lg-spec-2),/* 右下反光 */ inset 0 0 0 1px var(--lg-rim), /* 发光边 */ inset 0 0 1rem var(--lg-glow), /* 边缘向内晕开的柔光 */ 0 0 0 1px var(--lg-outline), /* 外侧极细暗边 */ 0 .5rem 1.5rem var(--lg-drop); /* 投影 */ } html[data-skin="v2"] .tabs button { position: relative; z-index: 1; border-radius: 62.4375rem; font-weight: 500; color: var(--ink-3); background: transparent; transition: color .25s ease; } html[data-skin="v2"] .tabs button:hover { color: var(--ink); background: transparent; } html[data-skin="v2"] .tabs button.on { color: var(--ink); font-weight: 600; background: transparent; box-shadow: none; } html[data-skin="v2"] .tabs button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; } /* 没有透镜（脚本未加载）时的兜底选中态 */ html[data-skin="v2"] .tabs:not(.has-lens) button.on { background: var(--lg-lens); box-shadow: inset 0 0 0 1px var(--lg-rim), 0 1px 3px var(--lg-drop); } /* 透镜：同材质、更亮的一颗玻璃珠 */ html[data-skin="v2"] .v2-lens { position: absolute; z-index: 0; top: .375rem; bottom: .375rem; left: 0; width: 0; border-radius: 62.4375rem; pointer-events: none; background: var(--lg-lens); backdrop-filter: blur(.25rem) saturate(1.6); -webkit-backdrop-filter: blur(.25rem) saturate(1.6); box-shadow: inset 1.5px 2px 1px -0.5px var(--lg-spec), inset -1px -1.5px 1px -0.5px var(--lg-spec-2), inset 0 0 0 1px var(--lg-rim), inset 0 0 .625rem var(--lg-glow), 0 .125rem .5rem var(--lg-drop); transition: transform .55s cubic-bezier(.34, 1.36, .64, 1), width .55s cubic-bezier(.34, 1.36, .64, 1); } html[data-skin="v2"] .v2-lens.is-moving { animation: v2-lens-stretch .55s cubic-bezier(.34, 1.36, .64, 1); } @keyframes v2-lens-stretch { 0% { scale: 1 1; } 35% { scale: 1.12 .9; } 70% { scale: .97 1.03; } 100% { scale: 1 1; } } @media (prefers-reduced-motion: reduce) { html[data-skin="v2"] .v2-lens { transition: none; } html[data-skin="v2"] .v2-lens.is-moving { animation: none; } } html[data-skin="v2"]:not([data-theme="dark"]) { --lg-body: linear-gradient(180deg, rgba(20,26,38,.025) 0%, rgba(20,26,38,.05) 100%); --lg-spec: rgba(255,255,255,1); --lg-spec-2: rgba(255,255,255,.75); --lg-rim: rgba(255,255,255,.7); --lg-glow: rgba(255,255,255,.75); --lg-outline: rgba(20,26,38,.07); --lg-drop: rgba(20,26,38,.10); --lg-lens: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.5) 100%); } html[data-skin="v2"][data-theme="dark"] { --lg-body: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.025) 100%); --lg-spec: rgba(255,255,255,.42); --lg-spec-2: rgba(255,255,255,.16); --lg-rim: rgba(255,255,255,.1); --lg-glow: rgba(255,255,255,.07); --lg-outline: rgba(0,0,0,.6); --lg-drop: rgba(0,0,0,.55); --lg-lens: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.07) 100%); } /* 面板切换：只做淡入淡出，不要位移；面板内部的进场动画也去掉位移和模糊 */ html[data-skin="v2"] .pane, html[data-skin="v2"] .pane.active { transform: none; } html[data-skin="v2"] .pane { transition: opacity .25s ease, visibility 0s linear .25s; } html[data-skin="v2"] .pane.active { transition: opacity .35s ease .1s, visibility 0s; } html[data-skin="v2"].js .pane .reveal { transform: none; filter: none; transition: opacity .35s ease; } /* 列表指示：蓝色方块+光圈 → 细小的圆点 */ html[data-skin="v2"] .pane ul > li { color: var(--ink-3); } html[data-skin="v2"] .pane ul > li::before { width: .375rem; height: .375rem; left: .5rem; top: .6875rem; border-radius: 50%; background: var(--blue); box-shadow: none; } html[data-skin="v2"] .pane li b { color: var(--ink); font-weight: 600; } /* 面板里的跳转链接：用亮一点的蓝，一眼能看出可点击 */ html[data-skin="v2"] .pane .more { color: var(--v2-link); font-weight: 500; border-bottom: 1px solid transparent; padding-bottom: .0625rem; transition: color .2s, border-color .2s; } html[data-skin="v2"] .pane .more:hover { color: var(--v2-link-hover); border-bottom-color: currentColor; } html[data-skin="v2"] .pane .more:focus-visible { outline: 2px solid var(--v2-link); outline-offset: 3px; border-radius: .25rem; } /* 产品示意图里的蓝色实底 → 黑白 */ html[data-skin="v2"] .mini-iv .me, html[data-skin="v2"] .aic-chat .msg.me { background: var(--v2-solid); color: var(--v2-on-solid); } html[data-skin="v2"] .mini-iv .chain span.on { background: var(--v2-solid); border-color: var(--v2-solid); color: var(--v2-on-solid); } html[data-skin="v2"] .mini-iv .av { background: var(--panel); } html[data-skin="v2"] .mini-iv .wave i { background: var(--ink-3); } html[data-skin="v2"] .aic-bar u.ok { background: var(--v2-solid); border-color: var(--v2-solid); color: var(--v2-on-solid); } html[data-skin="v2"] .aic-tree .fi.on { background: var(--panel); color: var(--ink); box-shadow: inset 2px 0 0 var(--ink); } html[data-skin="v2"] .aic-tabs span.on { box-shadow: inset 0 -2px 0 var(--ink); } html[data-skin="v2"] .aic-input { border-radius: 62.4375rem; padding: .5rem .875rem; } html[data-skin="v2"] .ai-map .nd rect { stroke: var(--line-3); } html[data-skin="v2"] .ai-map .nd.goal rect { fill: var(--v2-solid); stroke: var(--v2-solid); } html[data-skin="v2"] .ai-map .nd.goal .t { fill: var(--v2-on-solid); } html[data-skin="v2"] .ai-map .nd.goal:hover rect, html[data-skin="v2"] .ai-map .nd.goal.on rect { fill: var(--v2-solid-hover); stroke: var(--v2-solid-hover); } html[data-skin="v2"] .map-v details.goal { background: var(--v2-solid); border-color: var(--v2-solid); } html[data-skin="v2"] .map-v details.goal summary, html[data-skin="v2"] .map-v details.goal summary span, html[data-skin="v2"] .map-v details.goal ol { color: var(--v2-on-solid); } html[data-skin="v2"] .map-tip { border-radius: 1rem; } html[data-skin="v2"] .likert-row { border-radius: 1rem; } /* ================= 刷题宝 / 训练营 ================= */ html[data-skin="v2"] .mp-list i, html[data-skin="v2"] .camp-feats i { background: var(--panel); border: 1px solid var(--line); box-shadow: none; border-radius: 50%; } html[data-skin="v2"] .camp-feats i { color: var(--ink); } html[data-skin="v2"] .camp-feats li { border-radius: var(--r); border-color: var(--line); box-shadow: none; background: var(--v2-glass); backdrop-filter: blur(.75rem); } html[data-skin="v2"] .camp-feats b, html[data-skin="v2"] .mp-list b { font-weight: 600; } /* 舞台背后的蓝色圆斑 → 极淡的云雾/光晕 */ html[data-skin="v2"] .mp-stage::before, html[data-skin="v2"] .camp-stage::before { background: radial-gradient(closest-side, var(--v2-haze-1), transparent); filter: blur(1.5rem); } html[data-skin="v2"] .fl { border-radius: 1.125rem; background: var(--sheet-bg); backdrop-filter: blur(1rem); } html[data-skin="v2"] .camp-card { border-radius: 1.125rem; border-color: var(--line); } html[data-skin="v2"][data-theme="dark"] .camp-card { background: #111111; } html[data-skin="v2"] .camp-card.is-focus { border-color: var(--line-3); box-shadow: 0 1.75rem 4rem rgba(20,26,38,.18); } html[data-skin="v2"][data-theme="dark"] .camp-card.is-focus { box-shadow: 0 0 4rem rgba(255,255,255,.08), 0 1.75rem 4rem rgba(0,0,0,.6); } html[data-skin="v2"] .camp-tip { border-radius: 62.4375rem; font-weight: 500; } /* ================= 三步开始 / FAQ / 收尾 ================= */ html[data-skin="v2"] .how .card { background: var(--v2-glass); backdrop-filter: blur(.75rem); } html[data-skin="v2"] .how .num { color: var(--ink-3); font-weight: 500; } html[data-skin="v2"] .faq-item { border-bottom-color: var(--line); } html[data-skin="v2"] .faq-q { font-weight: 500; } html[data-skin="v2"] .faq-q::after { color: var(--ink-3); font-weight: 300; transition: transform .3s ease; } html[data-skin="v2"] .faq-item.is-open .faq-q::after { transform: rotate(180deg); } html[data-skin="v2"] .cta-lite { border-top-color: var(--line); } html[data-skin="v2"] .cta-lite .mini-stats b { font-weight: 600; } html[data-skin="v2"] .footer { color: var(--ink-3); } html[data-skin="v2"] .mobile-cta { border-top-color: var(--line); backdrop-filter: blur(1rem); } @media (prefers-reduced-motion: reduce) { html[data-skin="v2"] .hero::before, html[data-skin="v2"] .hero .kicker, html[data-skin="v2"] .hero .h1, html[data-skin="v2"] .hero .lead, html[data-skin="v2"] .hero .hero-cta, html[data-skin="v2"] .hero .vcard { animation: none; } html[data-skin="v2"].js .reveal { filter: none; } }