/* 雅之林® 桌面版统一规范 · 单一真源 shared/desktop.css * ─────────────────────────────────────────────────────────── * 铁律：本文件所有规则一律包裹在 @media (min-width:768px) 内； * 手机版(≤767px)永远不会匹配，已锁定的手机版(-14)不受影响。 * * 特异性策略：子站用「类级 !important」定义字号/容器，普通元素选择器打不赢。 * 本文件每条规则加 html body 前缀 + 重复类名(.X.X)，特异性顶到 (0,2,0) 以上； * desktop.css 又是 中最后加载，必胜。 * * 统一目标：以「科研赋能」(group/site/tech.html) 为模板： * 内容列宽 1200 / body 15px / 一级标题 52·900 / 二级章节标题 40·900 / * 三级/卡片标题 20·900 / 内容图片 ≤580 圆角。 * ─────────────────────────────────────────────────────────── */ @media (min-width:768px){ :root{ --d-col: 860px; /* 正文可读列宽上限 */ --d-img: 580px; /* 内容图片统一宽度上限 */ --d-radius: 14px; /* 统一图片圆角 */ } /* 1) 正文基准字号统一 15px */ html body{ font-size:15px !important; line-height:1.7 !important; } /* 2) 一级标题 52·900：锁定 .H1 与 .ux-hero-title； 避开首页 .brand-hero-title 的 68px 大标题（首页不动）。 edu 教程子页把 hero 标题写在 h2 上，用相邻兄弟选择器把它提到 52。 */ html body .H1, html body .ux-hero-title{ font-size:52px !important; font-weight:900 !important; line-height:1.15 !important; } html body .topbar + .hero h2, html body .topbar + .page-hero h2{ font-size:52px !important; font-weight:900 !important; line-height:1.15 !important; } /* 3) 二级章节标题 40·900：只压 .sec-title / .brand-intro-title / .product-detail-title， 不再用 html body h2 这种泛化选择器，避免把 edu 课程卡标题/小标签撑大。 */ html body .sec-title, html body .brand-intro-title, html body .product-detail-title{ font-size:40px !important; font-weight:900 !important; line-height:1.2 !important; } /* edu 教程子页的小 .sec-title（写给新伙伴/教程目录/速查手册）不是章节大标题，还原 20 */ html body .topbar + .hero + .wrap .sec-title, html body .topbar + .page-hero + .wrap .sec-title{ font-size:20px !important; font-weight:900 !important; line-height:1.35 !important; } /* 4) 三级/卡片标题 20·900 */ html body h3, html body .H3, html body .about-intro-body h3, html body .product-detail-title, html body .product-title, html body .c-main h2{ font-size:20px !important; font-weight:900 !important; line-height:1.35 !important; } /* edu 教程子页「给新人的一封信」小标题保持紧凑 15 */ html body .topbar + .hero + .wrap .letter h3, html body .topbar + .page-hero + .wrap .letter h3{ font-size:15px !important; font-weight:900 !important; line-height:1.35 !important; } /* 5) 正文段落/列表统一 15px·1.85 并限制可读列宽；排除 hero/CTA/免责等装饰性文字。 选择器必须写在一行，换行会被解析为后代选择器空格导致整条失效。 */ /* ⚠️ 注意这条的 :not() 链会累加特异性：每个 :not(.x) 记 1 个类， 本选择器实际为 (0,12,3)，会压过任何 "html body .a .b" 形式的规则。 故需要被上层规则（如 12.2 首屏描述）覆盖的类名，必须先在这里排除。 .desc：商城首屏描述用它（等同 .hero-desc），需交给 12.2，故排除； 非首屏的 .desc 由下方 html body .desc 仍按 15px 接管，行为不变。 */ html body p:not(.hero-desc):not(.ux-hero-desc):not(.cta-desc):not(.sec-sub):not(.disclaimer):not(.hint):not(.tip-sm):not(.slogan):not(.q-text):not(.q-index):not(.brand-hero-desc):not(.desc), html body li, html body td, html body th, html body label, html body figcaption, html body blockquote{ font-size:15px !important; line-height:1.85 !important; max-width:var(--d-col); } html body .sec-sub{ font-size:15px !important; line-height:1.8 !important; max-width:var(--d-col); } html body .desc{ font-size:15px !important; line-height:1.85 !important; max-width:var(--d-col); } html body .product-desc{ font-size:15px !important; line-height:1.8 !important; } /* 6) 内容容器统一封顶 1200 并居中。重复类名(.X.X)顶特异性，压过各站类级 max-width。 */ html body .sec-inner.sec-inner, html body .wrap.wrap, html body .inner.inner, html body .course.course, html body .tt.tt, html body .chat.chat, html body .app.app, html body .ux-app.ux-app, html body .news-item.news-item, html body .content.content, html body .container.container, html body .page.page, html body .section.section, html body article{ max-width:1200px !important; margin-left:auto !important; margin-right:auto !important; } /* 7) 内容图片统一呈现：不超过 580、圆角、轻阴影；仅作用于内容容器内 ，不动 logo。 */ html body .sec-inner.sec-inner img, html body .wrap.wrap img, html body .inner.inner img, html body .course.course img, html body .chat.chat img, html body .app.app img, html body .ux-app.ux-app img, html body .news-item.news-item img, html body article img, html body .content.content img, html body .about-intro-img img, html body .tech-feature-img img, html body .product-detail-img img{ max-width:var(--d-img) !important; height:auto !important; border-radius:var(--d-radius) !important; box-shadow:0 8px 24px rgba(0,47,167,.08) !important; } /* 8) edu 教程子页 hero 太高（原 56vh≈504px），压到与科研赋能同级 ~308-360。 */ html body .topbar + .hero, html body .topbar + .page-hero{ min-height:300px !important; max-height:360px !important; padding-top:28px !important; padding-bottom:64px !important; } /* 9) 桌面端首屏底部留白 + 导航卡片区底部留白：全站单一值（对齐科研赋能）。 早期各站各自硬编码（group style.css=64/20，news=88/54…）， 导致「品牌动态」蓝色区域比「科研赋能」低 58px。现收口到本文件， 全站桌面端统一 padding-bottom：hero=64 / home-nav=20。 注意：规则8 (.topbar+.hero) 特异性更高，edu 子页仍保持 30px 不受影响。 */ html body .hero, html body .page-hero, html body .ux-hero{ padding-top:28px !important; padding-bottom:64px !important; } /* 自检/顾问站的 .home-nav 被外层容器限成 1200px（主页是 1440 满宽）， 两者都有左右 20px 内边距 → 内层实际 1160 vs 1200、单卡 182 vs 188。 导航区左右内边距归零后：主页内层仍封顶 1200，自检内层达到 1200，卡片统一 188。 */ html body .home-nav{ padding-bottom:20px !important; padding-left:0 !important; padding-right:0 !important; } /* 10) 以下按「主站首页」实测值统一全站桌面端首屏文字排版。 主页实测：hero 内边距 28/64、标题下间距 20、简介 20px·宽860·下间距34、 导航卡片区宽 1200（单卡 188）。此前各站分别为 24/64、18、20px·(640~860)·(0~34)、 自检站导航区 1160（单卡 182）——逐站不一致故页面观感不同。 */ html body .hero h1, html body .page-hero h1, html body .ux-hero-title, html body .topbar + .hero h2, html body .topbar + .page-hero h2{ margin-bottom:20px !important; } html body .hero-desc, html body .ux-hero-desc{ font-size:20px !important; max-width:860px !important; margin-bottom:34px !important; } html body .home-nav-inner{ max-width:1200px !important; } /* 11) 品牌动态：排版方式对齐「主站首页 / 科研赋能」。 前两页的共同特征：内容区用 CSS Grid 排布（首页 .data-grid 四列数据卡、 科研赋能 .tech-feature 两列图文交替），条目之间是网格关系； 品牌动态原为 8 条 article 纵向堆叠、每条占满 1200px，观感与另两页明显不同。 现统一为两列网格，卡片规格沿用同变量（#fff / --radius 18px / --shadow-sm）。 ⚠️ 手机端(≤767px)：.news-grid 无任何规则，等同不存在， article 仍是块级纵向堆叠、margin-bottom:26px 原样，手机版零影响。 */ html body .news-grid.news-grid{ display:grid !important; grid-template-columns:repeat(2,1fr) !important; gap:24px !important; align-items:stretch !important; } /* 抵消规则 6 给 .news-item 加的 max-width:1200 + margin auto， 否则网格项会被限宽并居中，格子对不齐。 */ html body .news-grid.news-grid > .news-item.news-item{ max-width:none !important; margin:0 !important; display:flex !important; flex-direction:column !important; } /* 正文区撑满剩余高度，使同行两张卡底部齐平 */ html body .news-grid.news-grid > .news-item.news-item > .news-body{ flex:1 1 auto !important; } /* ============================================================ 12) 首屏头部全站对齐「主站首页」布局标准 ------------------------------------------------------------ 首页(group.yazhilin.cn)实测基准： 标题 h1.brand-hero-title 68px · 900 · 行高1.12(76.16px) · 字距1px · 下距20px 描述 .hero-desc 20px · 行高34px(1.7) · 最大宽860px · 下距34px hero 左右内边距 20px；内容区宽 1200 居中 → 内容左缘 120px ⚠️ 只调布局数值：各页原有的小标签(kicker)、文案内容一律保留原样，不做增删。 ⚠️ 全部包在 min-width:768px 内，手机版(≤767px)永不匹配，零影响。 ============================================================ */ /* 12.1 标题统一到首页规格。 ⚠️ 必须用 clamp 而非写死 68px：首页标题是 clamp(34px,6vw,68px) 的响应式曲线 （768px 屏 → 46px；≥1134px → 68px）。若写死 68px，在 768~1133px 宽度下 子页标题反而比首页更大，就不是"对齐"而是"更乱"。 首页 .page-hero h1.brand-hero-title 特异性(0,2,1)高于本条(0,1,3)， 保持其原值不变 —— 本条只把子页的 52px 曲线换成首页的 68px 曲线。 */ html body .hero h1, html body .page-hero h1, html body .ux-hero-title.ux-hero-title, html body .topbar + .hero h2, html body .topbar + .page-hero h2{ font-size:clamp(34px,6vw,68px) !important; font-weight:900 !important; line-height:1.12 !important; letter-spacing:1px !important; margin-bottom:20px !important; } /* 12.2 描述文字统一到首页规格。同样用首页的响应式曲线 clamp(15px,2vw,20px) （768px → 15.4px；≥1000px → 20px），行高1.7、最大宽860、下距34。 mall 站描述用 .desc 类（原 15px/行高27.75/下距8px），一并纳入。 */ html body .hero-desc, html body .ux-hero-desc, html body .hero .desc, html body .page-hero .desc{ font-size:clamp(15px,2vw,20px) !important; line-height:1.7 !important; max-width:860px !important; margin:0 auto 34px !important; } /* 12.3 左右边距对齐：目标是「内容区宽 1200、左缘 120」，与首页逐像素一致。 · hero 满宽 1440 的站(group/news/edu/ai)：左右留 20px， 内容容器 1200 居中 → 左缘 = 20 + (1400-1200)/2 = 120 ✅ · hero 被外层容器限成 1200 的站(check 的 .app、mall 的 .wrap)： 若再留 20px 内边距，内容只剩 1160、左缘 140，与首页错位 20px。 故这两处左右内边距归零 → 内容区回到 1200、左缘 = (1440-1200)/2 = 120 ✅ 两种写法殊途同归：内容区同为 1200 宽、左缘同为 120。 */ html body .hero, html body .page-hero{ padding-left:20px !important; padding-right:20px !important; } html body .ux-hero{ padding-left:0 !important; padding-right:0 !important; } /* mall 的 .hero 嵌在限宽 .wrap 内，归零后内容区才等于 1200、左缘 120 */ html body .wrap .hero{ padding-left:0 !important; padding-right:0 !important; } /* 12.4 小标签(kicker)保留，仅统一行高：group/check/ai 为 20.4px(1.7)， edu 为 19.8px(1.65)，属同一元素的无意义浮动，统一到 1.7。 */ html body .hero-kicker, html body .ux-hero-kicker{ line-height:1.7 !important; } /* ============================================================ 13/14) 首屏区块宽度：统一为「首屏满宽 + 内容区 1200 居中」（首页标准） ============================================================ */ /* 13) 健康自检：蓝色首屏整体铺满页宽。 原 .ux-hero（标题区）与 .home-nav（导航卡片区）都嵌在 .app(max-width:1200) 内，整块蓝色只有 1200 宽、左右留白。 用 100vw + 负 margin 突破到满宽；两区内部的内容容器 （.ux-hero-content / .home-nav-inner，均 max-width:1200） 自动居中，内容左缘仍 120，与首页逐像素一致。 ⚠️ 必须两区一起满宽，只放开标题区会造成蓝色区块断层。 该站 body 已有 overflow-x:clip 兜底 100vw 的横向溢出。 */ html body .app > .ux-hero, html body .app > .home-nav{ width:100vw !important; max-width:100vw !important; margin-left:calc(50% - 50vw) !important; margin-right:calc(50% - 50vw) !important; } /* 14) 健康顾问：首屏下方按钮区收窄到 1200 居中。 .modetabs（客户健康咨询 / 会员市场支持）原铺满 1440， 应与健康自检的内容区同宽：1200 居中（左缘 120）。 ⚠️ 必须写显式 width:100%：该元素处于弹性列布局中，若只写 max-width + margin:auto，会失去默认的交叉轴拉伸（stretch）， 宽度塌缩成 fit-content（实测从 1440 塌到 222、按钮只剩 92）。 */ html body .modetabs{ width:100% !important; max-width:1200px !important; margin-left:auto !important; margin-right:auto !important; } /* 16) 首页「品牌文化 · 七大维度」蓝色块（含 7 个品牌标签）整体下移。 用户反馈与上方内容挨得太近。原 margin-top:8px → 32px（下移 24px）， 与上方 .sec-head 的间距由 32px 增至 56px。 */ html body .brand-entry{ margin-top:32px !important; } /* 17) 首页「让健康成为生活方式」蓝色横幅在「独立栏目…」文字与页脚落款之间上下居中。 计算：上一 .sec 默认 padding-bottom 56px；令 .sec-cta 上间距 20px，下间距 76px， 则蓝色块顶部到「独立栏目…」= 56+20=76px，底部到 footer = 76px，视觉中心居中。 如上一 section 底部间距有变，按 padding-bottom = padding-top + 56 微调。 */ html body .sec-cta{ padding-top:20px !important; padding-bottom:76px !important; } /* 18) 首屏背景图向下延伸，与栏目导航（.home-nav）的纯蓝色重叠。 用户反馈：上半截是图片、下半截是纯色块，割裂感明显。 原理：① hero 放开 overflow 裁剪；② 背景子层（.hero-bg/.ux-hero-bg） 从「铺满 hero」改为「向下再延长 124px」——124 = 导航高 180 - 上叠 56， 恰好铺到导航底边；③ 导航由不透明渐变改为「半透明渐变 + 底色 #002FA7」， 图片从其下方透出、向下渐隐入品牌蓝；④ 遮罩统一为首页同款渐变 （news 本就一致，check/ai 的 .85 收敛为首页的 .92，edu 的新子层补齐）。 edu 首页原本图片直接写在 .hero 上（无子层），已在 HTML 补 .hero-bg 子层， 并用 :has 摘除其自带的 ::before/::after 遮罩（避免与统一遮罩叠加变暗）。 */ html body .hero, html body .ux-hero{ overflow:visible !important; } html body .hero-bg, html body .ux-hero-bg{ position:absolute !important; top:0 !important; left:0 !important; right:0 !important; bottom:auto !important; height:calc(100% + 124px) !important; z-index:0 !important; } html body .hero-bg::after, html body .ux-hero-bg::after{ content:'' !important; position:absolute !important; top:0 !important; left:0 !important; right:0 !important; bottom:124px !important; /* 深色遮罩只罩首屏文字区，不许延伸进导航区压死图片纹理 */ background:linear-gradient(180deg,rgba(0,26,99,.55) 0%,rgba(0,26,99,.75) 60%,rgba(0,26,99,.92) 100%) !important; } /* 导航区（子层的底部 124px）：蓝色只做一层薄纱罩在图片上面，纹理清晰透出； 首尾与首屏遮罩衔接（0% 延续 .92）、末端收深，保证裁切边不生硬。 */ html body .hero-bg::before, html body .ux-hero-bg::before{ content:'' !important; position:absolute !important; top:auto !important; left:0 !important; right:0 !important; bottom:0 !important; height:124px !important; background:linear-gradient(180deg,rgba(0,26,99,.92) 0%,rgba(0,26,99,.30) 32%,rgba(0,26,99,.26) 70%,rgba(0,26,99,.88) 100%) !important; } html body .hero:has(> .hero-bg)::before, html body .hero:has(> .hero-bg)::after{ content:none !important; } html body .home-nav{ position:relative !important; z-index:1 !important; background-color:#002FA7 !important; background-image:none !important; /* 图片改由 ::before 铺，导航自身不再叠渐变 */ } /* 导航自铺「图片 + 蓝纱」层：取 hero.jpg 纹理最丰富的中段（center 32%）， 蓝色只做半透明纱罩盖在图片上——用户要求的「图片覆盖底部、蓝色罩在图上」。 inset:0 全覆盖导航（含窄桌面折行变高的情形，天然无接缝）； z-index:-1 垫在导航内容之下、配合导航自身 z-index:1 盖过 hero 背景延长层。 */ html body .home-nav::before{ content:'' !important; position:absolute !important; inset:0 !important; z-index:-1 !important; background: linear-gradient(180deg, rgba(0,26,99,.80) 0%, rgba(0,26,99,.40) 35%, rgba(0,26,99,.68) 100%), url(https://group.yazhilin.cn/assets/hero.jpg?v=20260830) center 32%/cover no-repeat; } /* 15) 健康顾问：聊天区上下同宽，统一到内容区标准 1200 居中（左缘 120）。 原：欢迎气泡区 .chat 仅 739（太窄）、输入条 .inputbar 1412 / 输入框 1390 （太宽，几乎铺满全屏）。现与上方 .modetabs（1200）对齐。 ⚠️ 同规则 14 的教训：处于弹性列布局中必须显式 width:100%， 否则 margin:auto 会让交叉轴拉伸失效、宽度塌缩成 fit-content。 */ html body .inputbar, html body .chat{ width:100% !important; max-width:1200px !important; margin-left:auto !important; margin-right:auto !important; } }