/* ══ 1. 站点外壳（2.0 站 meme-shell 折叠态）：并入主站时整段删除，由主站组件提供 ══ */ /* ========================================================================== 站点外壳（左侧栏 + 顶部栏 + 全局页脚） 来源：模因AIGC 2.0 站 test.memeaigc.cn 构建产物 index-BkpOCM53.css，逐条抽取 -- 与主站的两处工程差异（视觉等价）------------------------------------ 1) 主站用 CSS 自定义属性引用色板（--bd / --line / --purple 等）； 本页 :root 已有同名令牌且语义不同（如 --line），直接沿用会取到页面的值， 导致白顶栏描边 / 下拉菜单边框失效 → 此处按主站取值写死为字面色值。 2) .meme-main 不含 height:100vh（主站有），改 min-height:100vh； 本页是长内容页，必须由 body 承担滚动，否则 window.scrollY / scrollTo 类脚本失效。 -- 两条适配规则（主站由 Vue 条件渲染，静态页需 CSS 显隐）-------------- 3) .meme-shell.is-collapsed .meme-side-nav{display:none} 4) .meme-shell:not(.is-collapsed) .meme-top-back{display:none} ========================================================================== */ .meme-shell{min-height:100vh;background:#fff} /* 让位：展开 200px / 折叠 64px / 700px 以下归零 */ .meme-main{margin-left:200px;min-width:0;min-height:100vh;overflow-x:hidden} @keyframes sd-gpop-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} .meme-side-icons{display:none;flex-direction:column;align-items:center;gap:6px;padding:10px 0} .meme-side-icon{width:40px;height:40px;border:none;background:none;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#666;cursor:pointer;transition:all .15s} .meme-side-icon:hover{color:#8448ff;background:#8448ff14} .meme-side-icon .meme-nav-icon{width:18px;height:18px} .meme-shell.is-collapsed .meme-sidebar{width:64px} .meme-shell.is-collapsed .meme-main{margin-left:64px} .meme-shell.is-collapsed .meme-logo{flex-direction:row;justify-content:center;padding:24px 6px 16px;gap:0} .meme-shell.is-collapsed .meme-logo-full{display:none} .meme-shell.is-collapsed .meme-logo-icon{display:block} .meme-shell.is-collapsed .meme-sidebar-toggle{position:static;width:16px;height:32px;padding:0;transform:rotate(180deg)} .meme-shell.is-collapsed .meme-side-icons{display:flex} .meme-shell.is-collapsed .meme-side-login{display:none} .meme-shell.is-collapsed .meme-top-links{display:flex;gap:2px;align-items:center} .meme-shell.is-collapsed .meme-search{margin-left:0} .meme-side-publish{display:none} .meme-shell.is-collapsed .meme-side-publish{display:flex;align-items:center;justify-content:center;width:44px;height:40px;margin:6px auto 0;padding:0;border:0;border-radius:6px;background:none;color:#666;cursor:pointer;transition:all .15s} .meme-shell.is-collapsed .meme-side-publish:hover{color:#8448ff;background:#8448ff14} .meme-shell.is-collapsed .meme-side-publish .meme-nav-icon{width:20px;height:20px;color:currentColor} .meme-sidebar{position:fixed;inset:0 auto 0 0;width:200px;padding:0;background:#fff;z-index:100;display:flex;flex-direction:column;overflow-y:auto} .meme-sidebar::-webkit-scrollbar,.meme-side-nav::-webkit-scrollbar{width:5px} .meme-sidebar::-webkit-scrollbar-track,.meme-side-nav::-webkit-scrollbar-track{background:transparent} .meme-sidebar::-webkit-scrollbar-thumb,.meme-side-nav::-webkit-scrollbar-thumb{background:transparent;border-radius:999px} .meme-sidebar:hover::-webkit-scrollbar-thumb,.meme-side-nav:hover::-webkit-scrollbar-thumb{background:#e6e6e6} .meme-sidebar::-webkit-scrollbar-thumb:hover,.meme-side-nav::-webkit-scrollbar-thumb:hover{background:#cfcfcf} .meme-logo{position:relative;display:flex;align-items:center;gap:6px;padding:24px 20px 16px} .meme-logo-link{display:flex;align-items:center;gap:6px;text-decoration:none} .meme-logo-full{display:block;width:142px;height:auto} .meme-logo-icon{display:none;width:36px;height:36px;border-radius:6px} .meme-sidebar-toggle{position:absolute;right:6px;top:26px;width:32px;height:32px;padding:0;border:none;background:none;color:#999;cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s} .meme-sidebar-toggle:hover{color:#8448ff;background:#8448ff14} .meme-side-nav{flex:1;padding:0 0 8px;overflow-y:auto} .meme-nav-item{position:relative;display:flex;align-items:center;gap:8px;width:calc(100% - 20px);margin:0 10px;padding:0 10px;min-height:40px;border:0;border-radius:8px;background:transparent;color:#5a5470;text-align:left;text-decoration:none;font-size:12px;font-weight:400;overflow:hidden;transition:height .3s ease,opacity .3s ease,padding .3s ease,color .2s ease,background .2s ease} .meme-nav-icon{width:16px;height:16px;flex:none;color:#959ba5} .meme-nav-item:hover{color:#6d28d9;background:#F3F3F3} .meme-nav-item.is-active{color:#6d28d9;font-weight:600;background:transparent} .meme-nav-item.is-active:before{position:absolute;top:10px;bottom:10px;left:0;width:3px;border-radius:999px;background:#6d28d9;content:""} .meme-nav-item:hover .meme-nav-icon,.meme-nav-item.is-active .meme-nav-icon{color:currentColor} .meme-divider{height:1px;margin:4px 20px;background:#f2f2f2} .meme-nav-group{display:grid;gap:0} .meme-nav-group .meme-nav-item{transition:height .3s ease,opacity .3s ease,padding .3s ease,color .2s ease,background .2s ease} .meme-nav-group.is-collapsed .meme-nav-item{height:0;min-height:0;padding-top:0;padding-bottom:0;opacity:0;overflow:hidden;pointer-events:none} .meme-nav-group-title{display:flex;align-items:center;justify-content:space-between;margin:0;padding:16px 20px 4px;color:#1a1a1a;font-size:13px;font-weight:600;letter-spacing:.3px;cursor:pointer;-webkit-user-select:none;user-select:none} .meme-nav-group-title:focus-visible{outline:2px solid rgba(132,72,255,.4);outline-offset:-2px;border-radius:4px} .meme-nav-group-title:before{position:relative;top:-1px;width:6px;height:6px;margin-right:6px;border-radius:2px;background:#1a1a1a;content:""} .meme-nav-group-title span{margin-left:8px;color:#999;font-size:12px;font-weight:400} .meme-side-login{display:flex;align-items:center;gap:10px;margin-top:auto;padding:12px 20px;background:transparent;color:#5B6473;text-decoration:none;font-size:12px;border:none;border-top:1px solid #E8E8EC;cursor:pointer;text-align:left;font-family:inherit;width:100%} .meme-side-login .meme-avatar-letter{background:#8448ff;color:#fff;font-size:12px;font-weight:600} .meme-avatar-letter{display:grid;width:28px;height:28px;place-items:center;border-radius:50%;background:#f0e8ff;color:#8448ff;font-weight:700} .meme-nav-home{padding:0 10px;font-size:13px;font-weight:600} .meme-nav-publish{margin:4px 0 8px;padding:0 10px;background:none;border-radius:6px;font-size:12px;font-weight:500} .meme-nav-chevron{display:inline-block;flex:none;margin-left:8px;color:#999;font-size:12px;line-height:1;transform-origin:center;transition:transform .3s ease} .meme-nav-chevron:before{content:"▾"} .meme-nav-group-title.is-collapsed .meme-nav-chevron{transform:rotate(-90deg)} .meme-nav-badge{margin-left:auto;padding:2px 5px;border-radius:3px;font-size:7px;font-weight:500;letter-spacing:.2px;line-height:1.4;flex-shrink:0;background:#d63a00;color:#fff} .meme-topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;padding:12px 24px;border-bottom:1px solid #E3E7ED;background:#fff} .meme-top-links{display:none} .meme-search{display:flex;align-items:center;gap:8px;flex:1;max-width:260px;height:32px;padding:8px 16px;border-radius:999px;border:1px solid #ECE9F6;background:#f4f3fa;color:#999} .meme-search:focus-within{border-color:#8448ff73;background:#fff;box-shadow:0 0 0 3px #8448ff1a} .meme-search input{width:100%;border:0;outline:0;padding:0;background:transparent;color:#1F2D3D;font-size:12px;line-height:14px} .meme-top-actions{display:flex;align-items:center;gap:12px;margin-left:auto;white-space:nowrap} .meme-message{position:relative;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:#f0f0f2;color:#1F2D3D;font-size:16px;cursor:pointer;transition:all .2s} .meme-message:hover{background:#e0e0e5} .meme-message svg{width:20px;height:20px} .meme-message i{position:absolute;top:-4px;right:-5px;display:grid;width:16px;height:16px;place-items:center;border-radius:50%;background:#d63031;color:#fff;font-size:10px;font-style:normal} .meme-member{display:flex;align-items:center;justify-content:center;height:36px;padding:0 20px;border-radius:999px;background:#111;box-shadow:inset 0 1px #ffffff29,0 8px 18px -10px #00000073;color:#fff;font-size:13px;font-weight:600;text-decoration:none} .meme-member:hover{background:#2e2e36} .meme-user{display:block;width:36px;height:36px;overflow:hidden;border:2px solid #f0f0f5;border-radius:50%;padding:0;cursor:pointer;background:none} .meme-user img{width:100%;height:100%;object-fit:cover} .meme-user .meme-avatar-letter,.user-menu-av .meme-avatar-letter{width:100%;height:100%;font-size:14px} .meme-user-login{display:flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border:1px solid #8448ff;border-radius:8px;background:#fff;color:#8448ff;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s} .meme-user-login:hover{background:#f4f0ff} .global-footer{padding:0;background:#fff;color:#5b6473;border-top:1px solid #E3E7ED} .global-footer__panel{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;padding:40px 40px 36px;border:0;border-radius:0;background:#fff;max-width:1240px;margin:0 auto} .global-footer__brand{max-width:408px} .global-footer__title{display:flex;align-items:center;gap:10px;color:#171727} .global-footer__title img{width:32px;height:32px;border-radius:9px} .global-footer__title strong{font-size:16px;font-weight:800} .global-footer__slogan{margin:22px 0 10px;color:#1a1a2e;font-size:15px;font-weight:400;letter-spacing:1.33px} .global-footer__slogan b{color:#8448ff} .global-footer__desc{margin:0;font-size:13px} .global-footer__socials{display:flex;gap:14px;margin-top:22px} .global-footer__social{position:relative;display:block;width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer} .global-footer__social img{width:100%;height:100%;object-fit:contain} .global-footer__qr{position:absolute;bottom:calc(100% + 16px);left:50%;transform:translate(-50%);background:#fff;border-radius:12px;padding:12px;box-shadow:0 12px 32px #0003;z-index:300;white-space:nowrap;border:1px solid #F0E8FF} .global-footer__qr img{width:120px;height:120px;display:block;border-radius:8px} .global-footer__qr em{display:block;text-align:center;font-size:12px;color:#1f2d3d;margin-top:6px;font-style:normal} .global-footer__qr:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:7px solid transparent;border-top-color:#fff} .global-footer__column{display:flex;flex-direction:column;gap:10px} .global-footer__column h2{margin:2px 0 8px;color:#1a1a2e;font-size:13px;font-weight:600} .global-footer__link{display:block;margin-bottom:0;text-align:left;background:none;border:none;padding:0;color:#5b6473;font-size:13px;text-decoration:none;cursor:pointer;font-family:inherit;transition:color .2s} .global-footer__link:hover{color:#8448ff} .global-footer__column a,.global-footer__legal a{color:#5b6473;font-size:13px;text-decoration:none} .global-footer__column a:hover,.global-footer__legal a:hover{color:#8448ff} .global-footer__legal,.global-footer__records{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:20px;font-size:12px} .global-footer__records{margin-top:14px} .global-footer__records a{display:inline-flex;align-items:center;gap:4px;color:#5b6473;font-size:12px;text-decoration:none;transition:color .2s} .global-footer__records a:hover{color:#8448ff} .global-footer__shield{width:13px;height:13px;flex-shrink:0} .meme-user-wrap{position:relative} .meme-user-caret{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;border:1px solid #E8E8EC;padding:0} .meme-user-caret:hover{background:#f8f6ff} .user-menu{position:absolute;top:calc(100% + 8px);right:0;width:340px;background:#fff;border-radius:14px;box-shadow:0 4px 24px #00000014;border:.5px solid #E8E8EC;overflow:hidden;z-index:400} .user-menu-hd{display:flex;align-items:center;gap:12px;padding:18px 18px 12px} .user-menu-av{width:46px;height:46px;border-radius:50%;overflow:hidden;flex-shrink:0} .user-menu-av img{width:100%;height:100%;object-fit:cover} .user-menu-info{flex:1;min-width:0} .user-menu-name{font-size:14px;font-weight:600;color:#1f2d3d} .user-menu-lv{font-size:11px;color:#8448ff;margin-top:2px} .user-menu-hr{border-top:.5px solid #eee;margin:0 18px} .user-menu-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;padding:14px 10px 10px} .user-menu-item{text-align:center;padding:10px 4px;border-radius:10px;cursor:pointer;transition:background .15s;text-decoration:none;display:block} .user-menu-item:hover{background:#f8f6ff} .user-menu-ic{width:40px;height:40px;border-radius:10px;background:#f4f0ff;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;color:#8448ff} .user-menu-item.primary .user-menu-ic{background:#8448ff;color:#fff} .user-menu-ic svg{width:18px;height:18px} .user-menu-lb{font-size:11px;color:#1f2d3d;font-weight:500} .user-menu-settings{display:flex;align-items:center;gap:10px;width:100%;padding:13px 18px;font-size:13px;font-weight:600;color:#8448ff;border-top:.5px solid #eee;border-bottom:.5px solid #eee;background:none;cursor:pointer;text-align:left;text-decoration:none;box-sizing:border-box} .user-menu-settings svg{width:16px;height:16px;flex-shrink:0} .user-menu-ft{display:flex;justify-content:flex-start;padding:8px 18px 14px} .user-menu-ft a{font-size:11px;color:#bbb;text-decoration:none;transition:color .15s} .user-menu-ft a:hover{color:#8448ff} .global-footer__contact{display:inline-flex;align-items:center;gap:6px} .global-footer__contact-icon{width:14px;height:14px;color:#5b6473;flex-shrink:0} .global-footer__legal a.global-footer__feedback{color:#8448ff} .coming-page{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:60px 20px} .meme-top-back{display:inline-flex;align-items:center;gap:3px;height:32px;padding:0 14px;border:1px solid #E3E7ED;border-radius:6px;background:#fff;color:#1f2d3d;font-size:13px;font-weight:500;white-space:nowrap;text-decoration:none;transition:all .15s;cursor:pointer} .meme-top-back:hover{border-color:#8448ff;color:#8448ff} .meme-top-link{display:inline-flex;align-items:center;height:32px;padding:0 12px;font-size:13px;color:#555;text-decoration:none;border-radius:6px;font-weight:500;white-space:nowrap;transition:all .15s;border:none;background:none;cursor:pointer;font-family:inherit} .meme-top-link:hover{color:#1f2d3d;background:#f0f1f5} .meme-top-link.is-active{color:#8448ff;font-weight:600;background:#8448ff0f} .meme-top-caret{margin-left:5px;flex-shrink:0;transition:transform .18s ease} .meme-top-link.is-open .meme-top-caret{transform:rotate(180deg)} .meme-top-drop{position:relative} .meme-top-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:400;min-width:176px;padding:6px;border:1px solid #E3E7ED;border-radius:12px;background:#fff;box-shadow:0 12px 36px #0000001f} .meme-top-menu a{display:flex;align-items:center;padding:8px 16px;border-radius:6px;color:#1f2d3d;font-size:13px;text-decoration:none;white-space:nowrap;transition:background .12s} .meme-top-menu a:hover{background:#8448ff0f;color:#8448ff} .meme-side-icon{text-decoration:none} .meme-side-icon.on{color:#8448ff;background:#8448ff14} .meme-side-icon-wrap{display:flex} .meme-side-pop{position:fixed;z-index:300;min-width:160px;padding:6px;border-radius:12px;background:#fff;box-shadow:0 10px 32px #00000024;animation:sd-gpop-in .18s ease} .meme-side-pop a{display:flex;align-items:center;padding:9px 14px;border-radius:8px;color:#1f2d3d;font-size:13px;text-decoration:none;white-space:nowrap} .meme-side-pop a:hover{background:#8448ff0f;color:#8448ff} @media(max-width:1500px){ .meme-topbar{padding:10px 20px} } @media(max-width:700px){ .meme-sidebar{display:none} .meme-main{margin-left:0} .meme-topbar{height:auto;min-height:64px;padding:12px 16px} .meme-top-links{display:none} .meme-search{order:1} .meme-top-actions{order:2;gap:8px} .meme-member{display:none} .global-footer{padding:32px 16px 20px} .global-footer__panel{grid-template-columns:1fr 1fr;gap:28px;padding:22px} .global-footer__brand{grid-column:1 / -1} .global-footer__legal,.global-footer__records{justify-content:flex-start;gap:10px 18px;line-height:1.6} } /* ---- 适配规则 3) 4)：静态页靠 CSS 复现 Vue 的条件渲染 ---- */ .meme-shell.is-collapsed .meme-side-nav{display:none} .meme-shell:not(.is-collapsed) .meme-top-back{display:none} /* ---- 本静态页与主站的两处尺寸差异（长内容页必须由 body 接管滚动）---- 主站单文件是 100vh 定高壳 + .meme-main 内部滚动，window.scrollY 恒为 0； 本页是长内容页，若照搬高定壳，页面自带的 hero 覆盖 / 滚动锚点全部失效。 故改为 body 滚动：内核变成 min-height:100vh + 内部块正常参与文档流。 */ .meme-main{height:auto} .meme-sidebar{height:100vh} /* ══ 2. 学本事·成高手 + 经营站 内容层 ══ */ /* ========================================================================== 模因AIGC · 学本事 · 成高手（快速上手 / 专业进阶 / 权威认证）+ 经营站 2.0 设计系统 · 静态设计稿 ────────────────────────────────────────────────────────────────────────── 交付：王中阳团队（前端 1:1 搬运用） 风格母题：「小书房」沉浸式学习氛围 · 高级杂志编辑感（Editorial Light） 不是「一间房子」，是「一册被认真编的书」 约束：① 强调色只有品牌紫一支 --p；② 价格走经营语义红 --price（沿用 2.0 站 .oc-price） ③ 字体只有思源黑体 + 思源宋体两族；④ 零装饰 emoji、零第三款字 ────────────────────────────────────────────────────────────────────────── 类名策略（中阳规范 §二.3「能对应的必须沿用原名」）： · 沿用 1.0 / 2.0 原名：oc-head / oc-title / oc-desc / oc-price / oc-meta / marketing-section-head / marketing-link-more / course-card / aigc-banner · 新增（集中登记，见 README §类名对照）：lrn-* / bk-* / ct-* / mst-* / biz-* ========================================================================== */ /* ---------- §0 品牌字体（本地预览子集；并入主站时删掉本段，改吃站点 /fonts/ 全量字体） ---------- */ @font-face{ font-family:"Noto Sans SC";font-style:normal;font-weight:100 900;font-display:swap; src:url("../fonts/NotoSansSC.subset.woff2") format("woff2"); } @font-face{ font-family:"Noto Serif SC";font-style:normal;font-weight:200 900;font-display:swap; src:url("../fonts/NotoSerifSC.subset.woff2") format("woff2"); } /* ---------- §1 Token ---------- */ :root{ /* 强调色：全页唯一一支品牌紫（站内 13 次出现的 #8348ff） */ --p:#8348ff; --p-deep:#5d34b0; --p-mid:#a37bff; --p-soft:#f4f0ff; --p-line:#e4daff; /* 经营语义红：只用于价格数字与支付态（沿用 2.0 站 .oc-price 的 --r） */ --price:#e8442a; --price-soft:#fff4f1; /* 墨阶 */ --ink:#1a1a1a; --ink-2:#54545f; --ink-3:#8a8a96; --ink-4:#b3b3bd; /* 面 / 线 */ --bg:#ffffff; --bg-2:#faf9fc; --bg-3:#f4f2f8; --line:#eceaf2; --line-2:#e2dfec; /* 语义状态（只用于两处：免收报名费 / 免费开放） */ --ok:#0f9d6b; --ok-bg:#eafaf3; --f-sans:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif; --f-serif:"Noto Serif SC","Songti SC","SimSun",serif; /* 字阶（收敛到 9 档） */ --fs-h1:clamp(2.05rem,3.6vw,2.9rem); --fs-h2:clamp(1.3rem,1.9vw,1.62rem); --fs-h3:1.12rem; --fs-card:0.9375rem; --fs-body:0.875rem; --fs-meta:0.8125rem; --fs-tag:0.75rem; --fs-xs:0.6875rem; --r-xs:6px; --r-sm:8px; --r:12px; --r-lg:16px; --r-pill:999px; --sh-1:0 1px 2px rgba(24,20,50,.04); --sh-2:0 1px 2px rgba(24,20,50,.04),0 12px 28px -14px rgba(24,20,50,.16); --sh-3:0 2px 6px rgba(24,20,50,.05),0 24px 48px -20px rgba(24,20,50,.22); --ease:cubic-bezier(.22,.61,.36,1); --dur:.32s; --wrap:1200px; --pad-x:20px; --sec-gap:clamp(2.5rem,4vw,3.75rem); /* 卡片封面高度（照 2.0 首页课程卡实测：96 / 112，此处取书封比例） */ --cover-h:112px; } /* ---------- §2 Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--f-sans);font-size:16px;line-height:1.5;font-weight:400; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden; } img{display:block;max-width:100%;height:auto;border:0} a{color:inherit;text-decoration:none} /* 表单控件不继承 body 字体（浏览器默认套系统 UI 字）→ 必须显式声明 */ button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit} button{cursor:pointer;border:0;background:none} h1,h2,h3,h4,p,figure{margin:0} ul,ol{margin:0;padding:0;list-style:none} :focus-visible{outline:2px solid var(--p);outline-offset:2px;border-radius:4px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* 进场动画：默认可见；仅 JS 就绪才隐藏等待（无 JS 时内容照常可见） */ html.js .rv{opacity:0;transform:translateY(14px)} html.js .rv.is-in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)} @media (prefers-reduced-motion:reduce){ html.js .rv{opacity:1;transform:none} *{transition-duration:.01ms!important;animation-duration:.01ms!important} } /* 内容版心（2.0 站内容页：main 已让位 64px 侧栏，此处再收版心） */ .lrn-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)} .lrn-wrap--wide{max-width:1320px} /* 面包屑（沿用 1.0 sl-crumb 语义，类名归一到 lrn-） */ .lrn-crumb-wrap{padding-top:18px;padding-bottom:0} .lrn-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:var(--fs-meta);color:var(--ink-3)} .lrn-crumb a{color:var(--ink-3);transition:color var(--dur) var(--ease)} .lrn-crumb a:hover{color:var(--p)} .lrn-crumb span{color:var(--ink-4)} .lrn-crumb b{font-weight:600;color:var(--ink-2);max-width:46ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ========================================================================== §3 主视觉 hero · 「小书房」 ────────────────────────────────────────────────────────────────────────── 设计说明（为什么不是一张大图 banner）： 她给的比喻是「像个小书房」「不要做成一个房子」→ 取「被认真编过的一册书」这一层。 于是 hero 不放大图，改用「一列错落的真实课程封面」作右侧视觉， 左侧是纸面文字 + 一道竖向渐变书脊。整块高度控制在 ~380px，不占首屏之外。 ========================================================================== */ .lrn-hero{position:relative;overflow:hidden;background:var(--bg);border-bottom:1px solid var(--line)} /* 纸面质感：极淡的两层径向光，只为把白底从「纯白」推向「纸」 */ .lrn-hero:before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(58% 78% at 88% 6%,rgba(131,72,255,.075) 0%,rgba(131,72,255,0) 62%), radial-gradient(42% 62% at 62% 100%,rgba(131,72,255,.05) 0%,rgba(131,72,255,0) 68%); } .lrn-hero__in{position:relative;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(24px,3.4vw,56px); align-items:center;padding-top:clamp(30px,3.6vw,46px);padding-bottom:clamp(30px,3.6vw,46px)} /* 书脊：一道 2px 竖向渐变 + 一枚方形书标 */ .lrn-hero__spine{position:absolute;left:0;top:clamp(30px,3.6vw,46px);bottom:clamp(30px,3.6vw,46px);width:2px;border-radius:2px; background:linear-gradient(180deg,var(--p) 0%,var(--p-mid) 46%,rgba(163,123,255,.12) 100%)} .lrn-hero__txt{padding-left:22px} .lrn-eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:14px; font-size:var(--fs-tag);font-weight:600;letter-spacing:.1em;color:var(--p)} .lrn-eyebrow:before{content:"";width:16px;height:1px;background:var(--p);opacity:.5} .lrn-hero__title{font-family:var(--f-serif);font-size:var(--fs-h1);font-weight:600;letter-spacing:.01em;line-height:1.14} .lrn-hero__lead{margin-top:14px;max-width:560px;font-size:clamp(.95rem,1.15vw,1.06rem);color:var(--ink-2);line-height:1.72} .lrn-hero__sub{margin-top:10px;max-width:600px;font-size:var(--fs-meta);color:var(--ink-3);line-height:1.8} /* hero 数据条：三格，只用一档紫 */ .lrn-hero__stats{display:flex;flex-wrap:wrap;gap:0;margin-top:24px;border-top:1px solid var(--line)} .lrn-hero__stat{padding:14px 26px 0 0;margin-right:26px;border-right:1px solid var(--line)} .lrn-hero__stat:last-child{border-right:0;margin-right:0;padding-right:0} .lrn-hero__stat b{display:block;font-family:var(--f-serif);font-size:1.62rem;font-weight:600;line-height:1;color:var(--p)} .lrn-hero__stat span{display:block;margin-top:6px;font-size:var(--fs-xs);color:var(--ink-3);letter-spacing:.04em} /* 右侧「书列」：三册错落，轻微旋转，像靠在书架上 */ .lrn-shelf{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:14px; min-height:calc(var(--cover-h) * 2 + 26px);padding-bottom:8px} .lrn-shelf__bk{position:relative;flex:1 1 0;max-width:172px;border-radius:var(--r-sm);overflow:hidden; box-shadow:var(--sh-3);background:var(--bg-3);transform-origin:bottom center; transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .lrn-shelf__bk img{width:100%;aspect-ratio:3/4;object-fit:cover} .lrn-shelf__bk:nth-child(1){transform:rotate(-3.2deg) translateY(10px)} .lrn-shelf__bk:nth-child(2){transform:translateY(-6px) scale(1.045);z-index:2} .lrn-shelf__bk:nth-child(3){transform:rotate(3.2deg) translateY(10px)} .lrn-hero:hover .lrn-shelf__bk:nth-child(1){transform:rotate(-2deg) translateY(4px)} .lrn-hero:hover .lrn-shelf__bk:nth-child(3){transform:rotate(2deg) translateY(4px)} /* 书脊上的小书标：只用紫底白字，不加第二色 */ .lrn-shelf__tag{position:absolute;left:8px;bottom:8px;padding:3px 8px;border-radius:var(--r-xs); background:rgba(20,16,20,.72);backdrop-filter:blur(4px);color:#fff;font-size:var(--fs-xs);font-weight:500;letter-spacing:.02em} @media(max-width:991px){ .lrn-hero__in{grid-template-columns:1fr;gap:26px} .lrn-shelf{min-height:0;order:2;justify-content:flex-start} .lrn-shelf__bk{max-width:150px} .lrn-hero__txt{padding-left:18px} } @media(max-width:575px){ .lrn-hero__stats{width:100%} .lrn-hero__stat{padding:12px 18px 0 0;margin-right:18px} .lrn-hero__stat b{font-size:1.34rem} .lrn-shelf{gap:9px} } /* ========================================================================== §4 区块头（沿用 1.0 marketing-section-head 语义，视觉重编） ========================================================================== */ .lrn-sec{padding-top:var(--sec-gap)} .lrn-sec--last{padding-bottom:var(--sec-gap)} .lrn-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px; padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:22px} .lrn-head__l{min-width:0} .lrn-head__no{display:block;margin-bottom:7px;font-family:var(--f-serif);font-size:var(--fs-meta); font-weight:600;letter-spacing:.16em;color:var(--p)} .lrn-head__t{font-family:var(--f-serif);font-size:var(--fs-h2);font-weight:600;line-height:1.24} .lrn-head__s{margin-top:7px;max-width:680px;font-size:var(--fs-meta);color:var(--ink-3);line-height:1.72} .lrn-head__r{flex:none;display:flex;align-items:center;gap:10px} .lrn-more{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-meta);font-weight:600;color:var(--p);white-space:nowrap} .lrn-more:after{content:"";width:14px;height:1px;background:currentColor;opacity:.55;transition:width var(--dur) var(--ease)} .lrn-more:hover:after{width:20px} /* 小标题（区块内的次级说明） */ .lrn-sub{display:flex;align-items:baseline;gap:9px;margin:0 0 14px} .lrn-sub__t{font-size:var(--fs-h3);font-weight:600;font-family:var(--f-serif)} .lrn-sub__n{font-size:var(--fs-meta);color:var(--ink-3)} /* ========================================================================== §5 课程卡（书封卡）· 4 列 · 精致小巧 ────────────────────────────────────────────────────────────────────────── 定量（照 2.0 首页实测 .oc-head{height:112px} / .oc-title{14px} / .oc-price{16px}）： 单卡宽 275px @1200 版心 4 列 · 封面高 128px · 整卡 ≤ 300px ========================================================================== */ .lrn-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} .lrn-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} .lrn-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} .lrn-card{position:relative;display:flex;flex-direction:column;min-width:0; border:1px solid var(--line);border-radius:var(--r);background:var(--bg);overflow:hidden; transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)} .lrn-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--p-line)} /* 封面（沿用 2.0 类名 oc-head） */ .oc-head{position:relative;display:block;height:var(--cover-h);flex:none;overflow:hidden;background:var(--bg-3)} .oc-head img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .lrn-card:hover .oc-head img{transform:scale(1.035)} /* 免费 / 标签：左上角，白底紫字（照 2.0 .oc-ctag） */ .oc-ctag{position:absolute;top:9px;left:9px;padding:2px 9px;border-radius:var(--r-pill); background:rgba(255,255,255,.93);color:var(--p);font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em} .oc-ctag--free{color:var(--ok)} .lrn-card__bd{display:flex;flex-direction:column;flex:1;min-width:0;padding:13px 14px 14px} /* 卡内序号：大号宋体数字，作「目录」暗示（唯一装饰，不占高度） */ .lrn-card__idx{position:absolute;right:12px;top:calc(var(--cover-h) - 15px);z-index:2; font-family:var(--f-serif);font-size:1.5rem;font-weight:600;line-height:1;color:#fff; text-shadow:0 1px 10px rgba(18,14,24,.6);pointer-events:none} .oc-title{margin-bottom:4px;font-size:var(--fs-card);font-weight:600;line-height:1.42; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .oc-desc{margin-bottom:8px;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.58; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* 一行合并 meta：圆点分隔（照长期规则：文本优先，不做图标列） */ .oc-meta{display:flex;align-items:center;flex-wrap:wrap;gap:0;margin-bottom:11px; font-size:var(--fs-xs);color:var(--ink-3)} .oc-meta span{display:inline-flex;align-items:center} .oc-meta span + span:before{content:"·";margin:0 7px;color:var(--ink-4)} .oc-meta b{font-weight:500;color:var(--ink-2)} /* 卡底：价格 + 胶囊按钮（她指定：不弹窗，加一个胶囊按钮） */ .lrn-card__ft{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:11px;border-top:1px solid var(--line)} .oc-price{font-size:1rem;font-weight:700;color:var(--price);line-height:1;letter-spacing:-.01em} .oc-price small{font-size:var(--fs-xs);font-weight:500;color:var(--ink-3);margin-left:2px} .oc-price em{font-style:normal;font-size:var(--fs-xs);font-weight:500;color:var(--ink-4);text-decoration:line-through;margin-left:6px} .oc-price--free{color:var(--ok)} .oc-price--ask{color:var(--p);font-size:var(--fs-meta);font-weight:600} /* 胶囊按钮（全站统一：主 = 紫底白字；次 = 白底紫描边） */ .lrn-pill{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:30px;padding:0 14px; border-radius:var(--r-pill);font-size:var(--fs-tag);font-weight:600;white-space:nowrap; transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)} .lrn-pill--p{background:var(--p);color:#fff} .lrn-pill--p:hover{background:var(--p-deep)} .lrn-pill--g{border:1px solid var(--p-line);color:var(--p);background:var(--bg)} .lrn-pill--g:hover{background:var(--p-soft);border-color:var(--p-mid)} .lrn-pill--ink{background:rgba(18,14,24,.86);color:#fff} .lrn-pill--ink:hover{background:rgba(18,14,24,1)} .lrn-pill--lg{height:38px;padding:0 20px;font-size:var(--fs-body)} .lrn-pill[disabled]{opacity:.5;pointer-events:none} /* ========================================================================== §6 品牌主张条（「先告诉你得到什么」）· 三格价值卡 ========================================================================== */ .lrn-value{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .lrn-value__it{position:relative;padding:20px 20px 20px 22px;border:1px solid var(--line); border-radius:var(--r);background:var(--bg-2);overflow:hidden} /* 左侧渐变强调线（长期规则：渐变强调线，不加色块） */ .lrn-value__it:before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;border-radius:2px; background:linear-gradient(180deg,var(--p),rgba(163,123,255,.16))} .lrn-value__no{font-family:var(--f-serif);font-size:1.3rem;font-weight:600;line-height:1;color:var(--p);opacity:.9} .lrn-value__t{margin-top:9px;font-size:var(--fs-card);font-weight:600} .lrn-value__d{margin-top:6px;font-size:var(--fs-meta);color:var(--ink-3);line-height:1.72} /* ========================================================================== §7 胶囊 tab（专业进阶 3 块「一眼看到」· 她第 4.1 条） ========================================================================== */ .lrn-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px} .lrn-tab{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 18px;border:1px solid var(--line); border-radius:var(--r-pill);background:var(--bg);color:var(--ink-2);font-size:var(--fs-body); font-weight:500;transition:all var(--dur) var(--ease)} .lrn-tab:hover{border-color:var(--p-line);color:var(--p)} .lrn-tab.is-on{background:var(--p);border-color:var(--p);color:#fff;font-weight:600} .lrn-tab i{font-style:normal;font-size:var(--fs-xs);opacity:.72} .lrn-tab.is-on i{opacity:.86} .lrn-panel[hidden]{display:none} /* ========================================================================== §8 案例研究卡（16:9 + 时长角标 + 分类） ========================================================================== */ .lrn-case-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .lrn-case{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--r); background:var(--bg);overflow:hidden;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .lrn-case:hover{transform:translateY(-3px);box-shadow:var(--sh-2)} .lrn-case__media{position:relative;display:block;aspect-ratio:16/9;background:var(--bg-3);overflow:hidden;flex:none} .lrn-case__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .lrn-case:hover .lrn-case__media img{transform:scale(1.04)} .lrn-case__play{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity var(--dur) var(--ease); background:linear-gradient(180deg,rgba(18,14,24,.06),rgba(18,14,24,.42))} .lrn-case:hover .lrn-case__play{opacity:1} .lrn-case__play i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.94);color:var(--p);font-style:normal;font-size:13px;padding-left:2px} .lrn-case__dur{position:absolute;right:8px;bottom:8px;padding:2px 7px;border-radius:var(--r-xs); background:rgba(18,14,24,.74);color:#fff;font-size:var(--fs-xs);font-weight:500;font-variant-numeric:tabular-nums} .lrn-case__bd{display:flex;flex-direction:column;flex:1;padding:12px 13px 13px} .lrn-case__cat{display:inline-flex;align-items:center;gap:5px;margin-bottom:7px;font-size:var(--fs-xs);color:var(--p);font-weight:600} .lrn-case__t{font-size:var(--fs-meta);font-weight:600;line-height:1.5; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .lrn-case__d{margin-top:6px;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.66; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* ========================================================================== §9 大师课卡（讲师为主体 · 微信文章跳转） ========================================================================== */ .lrn-mst-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .lrn-mst{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--r); background:var(--bg);overflow:hidden;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)} .lrn-mst:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--p-line)} .lrn-mst__media{position:relative;display:block;aspect-ratio:16/10;background:var(--bg-3);overflow:hidden;flex:none} .lrn-mst__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)} .lrn-mst:hover .lrn-mst__media img{transform:scale(1.04)} .lrn-mst__no{position:absolute;left:10px;top:10px;display:grid;place-items:center;width:26px;height:26px; border-radius:var(--r-xs);background:rgba(255,255,255,.94);color:var(--p); font-family:var(--f-serif);font-size:var(--fs-tag);font-weight:600} .lrn-mst__bd{display:flex;flex-direction:column;flex:1;padding:12px 13px 13px} .lrn-mst__tag{margin-bottom:7px;font-size:var(--fs-xs);color:var(--p);font-weight:600} .lrn-mst__t{font-size:var(--fs-meta);font-weight:600;line-height:1.5; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* 讲师块：头像位用首字替字（无真实头像素材，避免破图）→ 方形紫底白字 */ .lrn-mst__who{display:flex;align-items:center;gap:9px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line)} .lrn-mst__av{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%; background:var(--p-soft);color:var(--p);font-family:var(--f-serif);font-size:var(--fs-tag);font-weight:600} .lrn-mst__nm{min-width:0} .lrn-mst__nm b{display:block;font-size:var(--fs-tag);font-weight:600;color:var(--ink)} .lrn-mst__nm span{display:block;margin-top:2px;font-size:var(--fs-xs);color:var(--ink-3); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lrn-mst__lead{margin-top:10px;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.66; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* 大师课列表页（全部大师课）：更宽的两列，讲师块更完整 */ .lrn-mst-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px} .lrn-mst-wide{display:grid;grid-template-columns:196px 1fr;min-width:0;border:1px solid var(--line); border-radius:var(--r);background:var(--bg);overflow:hidden;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .lrn-mst-wide:hover{transform:translateY(-3px);box-shadow:var(--sh-2)} .lrn-mst-wide__media{position:relative;background:var(--bg-3);overflow:hidden} .lrn-mst-wide__media img{width:100%;height:100%;object-fit:cover;min-height:150px} .lrn-mst-wide__bd{display:flex;flex-direction:column;justify-content:center;padding:18px 20px;min-width:0} .lrn-mst-wide__t{margin-top:8px;font-family:var(--f-serif);font-size:1.02rem;font-weight:600;line-height:1.46} .lrn-mst-wide__lead{margin-top:9px;font-size:var(--fs-meta);color:var(--ink-2);line-height:1.72} .lrn-mst-wide__ft{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)} @media(max-width:991px){ .lrn-mst-list{grid-template-columns:1fr} } @media(max-width:575px){ .lrn-mst-wide{grid-template-columns:1fr} .lrn-mst-wide__media img{min-height:0;aspect-ratio:16/9} } /* ========================================================================== §10 权威认证 · 三档认证卡 ────────────────────────────────────────────────────────────────────────── 要求：品牌线风格（不是简陋圆形）· 有价格不交易 · 点「了解详情」弹客服二维码 ========================================================================== */ .ct-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch} .ct-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:0; border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);overflow:hidden; transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)} .ct-card:hover{transform:translateY(-4px);box-shadow:var(--sh-3)} .ct-card.is-rec{border-color:var(--p-line);box-shadow:var(--sh-2)} /* 卡头：徽记纹样（纯 CSS，无图片；三级用 1/2/3 颗底纹递增） */ .ct-card__top{position:relative;padding:24px 22px 20px;overflow:hidden;background:var(--bg-2);border-bottom:1px solid var(--line)} .ct-card__top:before{content:"";position:absolute;right:-38px;top:-38px;width:132px;height:132px;border-radius:50%; background:radial-gradient(circle at 34% 34%,rgba(131,72,255,.16),rgba(131,72,255,.03) 62%,transparent 70%)} .ct-card__tier{position:relative;display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill); background:var(--p-soft);color:var(--p);font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em} .ct-card__rn{position:absolute;right:20px;bottom:14px;font-family:var(--f-serif);font-size:3.1rem;font-weight:600; line-height:1;color:var(--p);opacity:.1;pointer-events:none} .ct-card__nm{position:relative;margin-top:13px;font-family:var(--f-serif);font-size:1.24rem;font-weight:600;line-height:1.32} .ct-card__sh{position:relative;margin-top:9px;font-size:var(--fs-meta);color:var(--ink-2);line-height:1.7} .ct-card__bd{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px} /* 价格区：有价格但不交易（她第 6.3(a)）→ 原价划线 + 过渡期免收 */ .ct-card__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px;padding-bottom:16px;border-bottom:1px solid var(--line)} .ct-card__price b{font-size:1.3rem;font-weight:700;color:var(--ok);letter-spacing:-.01em} .ct-card__price em{font-style:normal;font-size:var(--fs-meta);color:var(--ink-4);text-decoration:line-through} .ct-card__price span{font-size:var(--fs-xs);color:var(--ink-3);width:100%;margin-top:4px} .ct-blk{margin-top:17px} .ct-blk__t{display:flex;align-items:center;gap:7px;margin-bottom:10px;font-size:var(--fs-tag);font-weight:600;color:var(--ink)} .ct-blk__t:before{content:"";width:3px;height:11px;border-radius:2px;background:var(--p)} .ct-list li{position:relative;padding-left:16px;margin-bottom:7px;font-size:var(--fs-meta);color:var(--ink-2);line-height:1.66} .ct-list li:last-child{margin-bottom:0} .ct-list li:before{content:"";position:absolute;left:3px;top:8px;width:4px;height:4px;border-radius:50%;background:var(--p);opacity:.55} .ct-steps{counter-reset:cs} .ct-steps li{position:relative;padding-left:26px;margin-bottom:8px;font-size:var(--fs-meta);color:var(--ink-2);line-height:1.66} .ct-steps li:last-child{margin-bottom:0} .ct-steps li:before{counter-increment:cs;content:counter(cs);position:absolute;left:0;top:1px; display:grid;place-items:center;width:17px;height:17px;border-radius:50%;border:1px solid var(--p-line); color:var(--p);font-size:var(--fs-xs);font-weight:600;line-height:1} .ct-card__ft{margin-top:auto;padding-top:20px} .ct-card__cta{width:100%;height:40px;border-radius:var(--r-sm)} .ct-card__meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px; padding-top:12px;border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--ink-3)} /* 认证流程（横向四步） */ .ct-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line); border-radius:var(--r);overflow:hidden;background:var(--bg-2)} .ct-flow__it{position:relative;padding:22px 20px} .ct-flow__it + .ct-flow__it{border-left:1px solid var(--line)} .ct-flow__it:after{content:"";position:absolute;right:-6px;top:50%;width:10px;height:10px; transform:translateY(-50%) rotate(45deg);background:var(--bg-2);border-top:1px solid var(--line);border-right:1px solid var(--line);z-index:2} .ct-flow__it:last-child:after{display:none} .ct-flow__no{font-family:var(--f-serif);font-size:1.36rem;font-weight:600;line-height:1;color:var(--p)} .ct-flow__t{margin-top:9px;font-size:var(--fs-meta);font-weight:600} .ct-flow__d{margin-top:5px;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.7} /* 申请入驻（左表单 + 右二维码 · 她第 6.1(b)：二维码不要特别大） */ .ct-apply{display:grid;grid-template-columns:1.42fr .58fr;gap:26px;align-items:start; padding:26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2)} .ct-form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px} .ct-f{display:flex;flex-direction:column;gap:7px;min-width:0} .ct-f--full{grid-column:1 / -1} .ct-f label{font-size:var(--fs-meta);font-weight:600;color:var(--ink-2)} .ct-f label i{font-style:normal;color:var(--price);margin-left:2px} .ct-f input,.ct-f select,.ct-f textarea{ width:100%;padding:10px 13px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg); font-size:var(--fs-body);color:var(--ink);transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .ct-f input:focus,.ct-f select:focus,.ct-f textarea:focus{outline:0;border-color:var(--p);box-shadow:0 0 0 3px rgba(131,72,255,.12)} .ct-f textarea{resize:vertical;min-height:86px;line-height:1.66} .ct-f input::placeholder,.ct-f textarea::placeholder{color:var(--ink-4)} .ct-f__err{font-size:var(--fs-xs);color:var(--price);min-height:0} .ct-form__ft{display:flex;align-items:center;gap:14px;margin-top:6px} .ct-form__tip{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.66} /* 右侧二维码：整块 ≤ 220px 宽，二维码本体 ≤ 150px（她要求「不要特别大」） */ .ct-qr{display:flex;flex-direction:column;align-items:center;padding:22px 18px;border:1px solid var(--line); border-radius:var(--r);background:var(--bg);text-align:center} .ct-qr__t{font-size:var(--fs-card);font-weight:600} .ct-qr__box{position:relative;width:198px;margin:14px auto 12px;padding:9px;border:1px solid var(--line); border-radius:var(--r-sm);background:var(--bg)} .ct-qr__box img{width:148px;height:148px;object-fit:contain;border-radius:var(--r-xs)} .ct-qr__s{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.7} .ct-qr__s b{display:block;color:var(--p);font-weight:600;margin-bottom:3px} @media(max-width:991px){ .ct-grid{grid-template-columns:1fr;max-width:560px} .ct-flow{grid-template-columns:1fr 1fr} .ct-flow__it + .ct-flow__it{border-left:0} .ct-flow__it:nth-child(n+3){border-top:1px solid var(--line)} .ct-flow__it:nth-child(even){border-left:1px solid var(--line)} .ct-flow__it:after{display:none} .ct-apply{grid-template-columns:1fr;gap:22px} .ct-qr{align-items:flex-start;text-align:left} .ct-qr__box{margin-left:0} } @media(max-width:575px){ .ct-form__row{grid-template-columns:1fr} .ct-flow{grid-template-columns:1fr} .ct-flow__it + .ct-flow__it{border-left:0;border-top:1px solid var(--line)} .ct-flow__it:nth-child(even){border-left:0} .ct-apply{padding:18px} } /* ========================================================================== §11 弹窗（客服二维码）· 原生 ，无第三方 ========================================================================== */ .lrn-dlg{border:0;padding:0;border-radius:var(--r-lg);background:transparent;max-width:min(420px,calc(100vw - 32px));width:100%} .lrn-dlg::backdrop{background:rgba(18,14,24,.5);backdrop-filter:blur(3px)} .lrn-dlg__in{position:relative;padding:26px 26px 24px;border-radius:var(--r-lg);background:var(--bg);text-align:center;box-shadow:var(--sh-3)} .lrn-dlg__x{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:28px;height:28px; border-radius:50%;color:var(--ink-3);font-size:15px;line-height:1;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)} .lrn-dlg__x:hover{background:var(--bg-3);color:var(--ink)} .lrn-dlg__t{font-family:var(--f-serif);font-size:var(--fs-h3);font-weight:600} .lrn-dlg__s{margin-top:8px;font-size:var(--fs-meta);color:var(--ink-3);line-height:1.72} .lrn-dlg__box{margin:16px auto 14px;width:176px;padding:9px;border:1px solid var(--line);border-radius:var(--r-sm)} .lrn-dlg__box img{width:100%;aspect-ratio:1;object-fit:contain} .lrn-dlg__k{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.72} .lrn-dlg__k b{color:var(--p);font-weight:600} /* ========================================================================== §12 经营站（biz）· 5 项 tab + 会员卡 + 积分 + 课程购买 ========================================================================== */ .biz-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:var(--bg)} .biz-hero:before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(52% 82% at 10% 0%,rgba(131,72,255,.08),rgba(131,72,255,0) 64%)} .biz-hero__in{position:relative;padding-top:clamp(26px,3vw,38px);padding-bottom:clamp(24px,2.8vw,34px)} /* Q1：左侧黑色模因AIGC logo + 对外名称同排 */ .biz-hero__hd{display:flex;align-items:center;gap:13px} .biz-hero__logo{display:block;flex:none;width:45px;height:46px;object-fit:contain} .biz-hero__t{font-family:var(--f-serif);font-size:clamp(1.5rem,2.4vw,2rem);font-weight:600;line-height:1.24} .biz-hero__l{margin-top:11px;max-width:720px;font-size:var(--fs-body);color:var(--ink-2);line-height:1.78} .biz-hero__m{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .biz-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r-pill); background:var(--p-soft);color:var(--p);font-size:var(--fs-xs);font-weight:500} /* 经营站主导航：5 项（她指定顺序：个人订阅 / 企业订阅 / 模型积分充值 / 课程购买 / 我的权益） 注意：经营站是独立付费服务页，页面上没有站点顶栏，故吸顶 top = 0（原 64px 是给顶栏让位）。 Q2-2（2026-10-16）：由「白底 + 紫色下划线」改为**淡紫胶囊**：选中项 = 淡紫胶囊， 未选中 = 描边胶囊；横向可滑动。Q2-3：不再有「改名 / 新增」标记。 */ .biz-nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(8px); border-bottom:1px solid var(--line)} .biz-nav__in{display:flex;align-items:center;gap:10px;padding:13px 0;overflow-x:auto; scrollbar-width:none;-webkit-overflow-scrolling:touch} .biz-nav__in::-webkit-scrollbar{display:none} .biz-nav__it{position:relative;display:inline-flex;align-items:center;flex:none;height:40px;padding:0 20px; border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--bg);color:var(--ink-2); font-size:var(--fs-body);font-weight:500;letter-spacing:.01em;white-space:nowrap; box-shadow:0 1px 2px rgba(24,20,50,.05); transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)} .biz-nav__it:hover{border-color:var(--p-mid);color:var(--p);background:var(--p-soft); box-shadow:0 3px 12px -4px rgba(131,72,255,.35);transform:translateY(-1px)} .biz-nav__it.is-on{background:linear-gradient(135deg,#9d61ff 0%,var(--p) 52%,#6b34d6 100%); border-color:transparent;color:#fff;font-weight:600; box-shadow:0 6px 18px -6px rgba(131,72,255,.55)} .biz-sec{padding-top:clamp(24px,3vw,34px)} .biz-sec--last{padding-bottom:var(--sec-gap)} .biz-note{margin-top:18px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r); background:var(--bg-2);font-size:var(--fs-meta);color:var(--ink-3);line-height:1.8} .biz-note b{color:var(--ink-2);font-weight:600} .biz-note ol{list-style:decimal;padding-left:18px} .biz-note li{margin-bottom:5px} .biz-note li:last-child{margin-bottom:0} /* 会员 / 积分 / 企业卡（结构沿用经营站 card/cname/cprice/clist，视觉重编） */ .biz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch} .biz-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} .biz-card{position:relative;overflow:hidden;display:flex;flex-direction:column;min-width:0;padding:22px 20px 20px; border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg);box-shadow:var(--sh-1); transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)} .biz-card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--p-line)} .biz-card.rec{border-color:var(--p-mid); box-shadow:0 1px 2px rgba(24,20,50,.04),0 20px 40px -22px rgba(131,72,255,.5); background:linear-gradient(180deg,rgba(131,72,255,.05),rgba(131,72,255,0) 38%),var(--bg)} .biz-card.rec:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:1; background:linear-gradient(90deg,#9d61ff,var(--p) 55%,#6b34d6)} .biz-card .badge{position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center; height:24px;padding:0 11px;border-radius:var(--r-pill); background:linear-gradient(135deg,#9d61ff,var(--p) 60%,#6b34d6);color:#fff;font-size:var(--fs-xs); font-weight:600;letter-spacing:.02em;box-shadow:0 4px 12px -5px rgba(131,72,255,.65)} .biz-card .cnamewrap{display:flex;align-items:center;flex-wrap:wrap;gap:8px} .biz-card .cname{font-size:var(--fs-h3);font-weight:600} .biz-card .cmk{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:var(--r-pill); background:var(--p-soft);color:var(--p);font-size:var(--fs-xs);font-weight:600} .biz-card .cdesc{margin-top:6px;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.6} .biz-card .cpricewrap{margin-top:15px} .biz-card .cprice{display:flex;align-items:baseline;font-size:1.9rem;font-weight:700;color:var(--price); line-height:1;letter-spacing:-.025em} .biz-card .cprice small{font-size:var(--fs-meta);font-weight:500;color:var(--ink-3);margin-left:4px;letter-spacing:0} .biz-card .cprice .free{color:var(--ok);font-size:1.16rem} .biz-card .csub{margin-top:8px;font-size:var(--fs-xs);color:var(--ink-3)} .biz-card .csave{margin-top:9px;display:inline-flex;align-items:center;align-self:flex-start;height:22px; padding:0 10px;border-radius:var(--r-pill);background:var(--price-soft);color:var(--price); font-size:var(--fs-xs);font-weight:600} .biz-card .clist{margin:15px 0 0;padding-top:14px;border-top:1px solid var(--line)} .biz-card .clist li{position:relative;padding-left:17px;margin-bottom:7px;font-size:var(--fs-meta); color:var(--ink-2);line-height:1.62} .biz-card .clist li:last-child{margin-bottom:0} .biz-card .clist li:before{content:"";position:absolute;left:1px;top:5px;width:10px;height:5px; border-left:1.8px solid var(--p);border-bottom:1.8px solid var(--p);transform:rotate(-45deg)} .biz-card .cbtn{margin-top:auto;width:100%;height:42px;margin-top:18px;border-radius:var(--r-pill); background:linear-gradient(135deg,#9d61ff 0%,var(--p) 52%,#6b34d6 100%);color:#fff; font-size:var(--fs-body);font-weight:600;letter-spacing:.02em; box-shadow:0 6px 16px -6px rgba(131,72,255,.6); transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),filter var(--dur) var(--ease)} .biz-card .cbtn:hover{transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(131,72,255,.7);filter:brightness(1.04)} .biz-card .cbtn.gh{background:var(--bg);color:var(--p);border:1.5px solid var(--p-line);box-shadow:none} .biz-card .cbtn.gh:hover{background:var(--p-soft);border-color:var(--p-mid);transform:translateY(-1px)} .biz-card.gold .cbtn{background:linear-gradient(135deg,#7a3fe0 0%,#5d34b0 60%,#3f1f7d 100%); box-shadow:0 6px 18px -6px rgba(93,52,176,.6)} .biz-card .ctip{margin-top:12px;font-size:var(--fs-xs);color:var(--ink-4);line-height:1.6} /* 课程购买列表（页头 + 逐行购买） */ .biz-course{display:flex;flex-direction:column;gap:12px} .bcos{display:grid;grid-template-columns:132px 1fr auto;gap:18px;align-items:center;min-width:0; padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg); transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .bcos:hover{border-color:var(--p-line);box-shadow:var(--sh-1)} .bcos__media{position:relative;flex:none;border-radius:var(--r-sm);overflow:hidden;background:var(--bg-3)} .bcos__media img{width:100%;aspect-ratio:16/10;object-fit:cover} .bcos__bd{min-width:0} .bcos__k{display:flex;align-items:center;gap:8px;margin-bottom:6px} .bcos__k .lrn-tagbar{display:inline-flex;padding:1px 7px;border-radius:var(--r-xs);background:var(--p-soft);color:var(--p);font-size:var(--fs-xs);font-weight:600} .bcos__t{font-size:var(--fs-card);font-weight:600;line-height:1.44} .bcos__d{margin-top:6px;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.66; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .bcos__m{display:flex;flex-wrap:wrap;gap:0;margin-top:9px;font-size:var(--fs-xs);color:var(--ink-3)} .bcos__m span + span:before{content:"·";margin:0 7px;color:var(--ink-4)} .bcos__r{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:11px;padding-left:8px} .bcos__r .oc-price{font-size:1.24rem} .bcos--group{margin-top:8px} .bcos-group-h{display:flex;align-items:baseline;gap:9px;margin:26px 0 12px} .bcos-group-h h3{font-family:var(--f-serif);font-size:var(--fs-h3);font-weight:600} .bcos-group-h span{font-size:var(--fs-meta);color:var(--ink-3)} /* 断点对齐 2.0 站内容页：1240 / 992 / 752 / 576 / 400 */ @media(max-width:1240px){ .lrn-grid,.lrn-case-grid,.lrn-mst-grid{grid-template-columns:repeat(4,minmax(0,1fr))} } @media(max-width:1100px){ .biz-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .biz-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:991px){ .lrn-grid,.lrn-case-grid,.lrn-mst-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .lrn-value{grid-template-columns:1fr} .ct-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none} } @media(max-width:760px){ .biz-grid--3{grid-template-columns:1fr} .bcos{grid-template-columns:110px 1fr;gap:14px} .bcos__r{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between; width:100%;padding-left:0;padding-top:11px;border-top:1px solid var(--line)} } @media(max-width:575px){ :root{--cover-h:112px} .lrn-grid,.lrn-case-grid,.lrn-mst-grid,.lrn-grid--3,.lrn-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} .biz-grid{grid-template-columns:1fr} .bcos{grid-template-columns:1fr} .bcos__media img{aspect-ratio:16/9} } @media(max-width:420px){ .lrn-grid,.lrn-case-grid,.lrn-mst-grid,.lrn-grid--3,.lrn-grid--2{grid-template-columns:1fr} } /* ========================================================================== §13 支付页（经营站二级页 · 二维码 / 支付宝 / 注册提醒） ========================================================================== */ .pay-wrap{display:grid;grid-template-columns:1.32fr .68fr;gap:26px;align-items:start;padding-top:clamp(24px,3vw,34px)} .pay-panel{padding:26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)} .pay-order{display:grid;grid-template-columns:112px 1fr;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line)} /* 订阅类订单无封面 ⇒ 单列（企业 / 积分 / 会员） */ .pay-order.is-simple{grid-template-columns:1fr} .pay-order__media{border-radius:var(--r-sm);overflow:hidden;background:var(--bg-3)} .pay-order__media img{width:100%;aspect-ratio:16/10;object-fit:cover} .pay-order__t{font-size:var(--fs-h3);font-weight:600;line-height:1.4} .pay-order__m{margin-top:7px;font-size:var(--fs-meta);color:var(--ink-3)} .pay-order__amt{margin-top:12px;display:flex;align-items:baseline;gap:9px} .pay-order__amt b{font-size:1.72rem;font-weight:700;color:var(--price);line-height:1;letter-spacing:-.02em} .pay-order__amt em{font-style:normal;font-size:var(--fs-meta);color:var(--ink-4);text-decoration:line-through} .pay-way{margin-top:20px} .pay-way__t{font-size:var(--fs-meta);font-weight:600;margin-bottom:12px} .pay-way__opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} /* 支付方式 = 付款按钮（Q12 · 她 10-16 转中阳口径： 页面上**不画二维码**，点按钮唤起第三方支付窗口；页面同样不写任何给技术看的提示） */ .pay-mb{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px; padding:15px 16px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg); cursor:pointer;text-align:left;font:inherit; transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} .pay-mb:hover{border-color:var(--p-line);box-shadow:var(--sh-1)} .pay-mb.is-on{border-color:var(--p);background:var(--p-soft)} .pay-mb__nm{font-size:var(--fs-body);font-weight:600;color:var(--ink)} .pay-mb.is-on .pay-mb__nm{color:var(--p)} .pay-mb__s{font-size:var(--fs-xs);color:var(--ink-3)} .pay-way__s{margin-top:12px;font-size:var(--fs-xs);color:var(--ink-3);line-height:1.72} /* 第三方收银台弹层（静态稿示意；真实接入时这里就是「正在唤起支付」的中间态） */ .pay-cashier__amt{margin-top:16px;padding:12px 14px;border-radius:var(--r-sm);background:var(--p-soft); font-size:var(--fs-meta);color:var(--ink-2)} .pay-cashier__amt b{margin-left:4px;font-size:1.15rem;font-weight:700;color:var(--price)} .pay-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px} .pay-acts__hint{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.6} /* 侧栏：注册提醒 + 说明 */ .pay-side{display:flex;flex-direction:column;gap:16px} .pay-tip{padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg-2)} .pay-tip__t{display:flex;align-items:center;gap:8px;font-size:var(--fs-card);font-weight:600} .pay-tip__t i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--p);color:#fff; font-style:normal;font-size:11px;font-weight:600;flex:none} .pay-tip__d{margin-top:10px;font-size:var(--fs-meta);color:var(--ink-3);line-height:1.78} .pay-tip__acts{display:flex;gap:10px;margin-top:14px} .pay-steps{counter-reset:ps} .pay-steps li{position:relative;padding-left:26px;margin-bottom:11px;font-size:var(--fs-meta);color:var(--ink-2);line-height:1.7} .pay-steps li:last-child{margin-bottom:0} .pay-steps li:before{counter-increment:ps;content:counter(ps);position:absolute;left:0;top:0; display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--p-soft); color:var(--p);font-size:var(--fs-xs);font-weight:600} .pay-payee{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--ink-3);line-height:1.72} .pay-payee b{color:var(--ink-2);font-weight:600} @media(max-width:900px){ .pay-wrap{grid-template-columns:1fr} } @media(max-width:575px){ .pay-order{grid-template-columns:1fr} .pay-order__media img{aspect-ratio:16/9} .pay-way__opts{grid-template-columns:1fr} .pay-panel{padding:18px} } /* ========================================================================== §14 课程详情（试看 → 锁住 → 跳经营站购买）· 她第 2 段核心 ========================================================================== */ .cd-wrap{display:grid;grid-template-columns:1fr 336px;gap:28px;align-items:start;padding-top:clamp(22px,2.8vw,32px)} .cd-hero{display:grid;grid-template-columns:284px 1fr;gap:22px;padding-bottom:20px;border-bottom:1px solid var(--line)} .cd-hero__media{position:relative;border-radius:var(--r);overflow:hidden;background:var(--bg-3);box-shadow:var(--sh-2)} .cd-hero__media img{width:100%;aspect-ratio:16/11;object-fit:cover} /* 试看播放器：封面 + 播放键 + 角标；点试看章 → 换成