/* ═══════════════════════════════════════════════════════════ 森朗生物官网 · 整合版（CEO 审核稿） 顶部导航收敛为 5 项 · 研发 / 合作与加入 带下拉 ═══════════════════════════════════════════════════════════ */ :root{ --ink:#0E1A24; --body:#3D4A56; --mute:#4A5661; /* ── 天空蓝阶（--b*）。CEO 定的方向：浅色显生机，全站不用深蓝深绿。 --b600 是链接与眉题色，压到 5.3:1 才敢用在白底上（AA 要 4.5）。 */ --b50:#ECF6FD; --b100:#D6EBF9; --b200:#B6DDF6; --b300:#90D3F4; --b400:#4EAFE3; --b600:#095B84; --b800:#074C6F; --b900:#063E5A; --b950:#05334A; --night:#042838; /* ── 小草绿阶。--g600 同样按 5.1:1 选的，可以直接当文字色 */ --g50:#F2FAE6; --g100:#E1F5CB; --g200:#C8EBA3; --g300:#B0E58A; --g400:#80C94E; --g500:#64B133; --g600:#40761C; /* ── 浅色面：原先的深蓝底（首屏 / 页脚 / 深色区块）全部换成这两张浅面 */ --surface:#F2F6F8; --surface2:#E9F7DE; /* --surface 10-09 由暖米色 #F9F3E7 改成霜白，和首页 H4 同一套冷色 */ /* 霜白磨砂（10-09，首页背景 H4）：霜白斜向过渡到浅蓝、浅绿，上面压一层很细的颗粒，像结了霜的玻璃。 原来的「天蓝 → 暖黄 → 黄绿」中间那段暖黄和冷色的霜白冲突，内页首屏一起换掉。 颗粒是内联 SVG 噪点，不额外请求文件。被否掉的首页背景方案都在 历史存档/方案对比/。 */ --frost-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .3 0 0 0 0 .35 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* 内页首屏：右半边是照片，渐变只露出左半边，所以色标比首页收得更紧，左半边也能看到蓝和绿 */ --hero-grad:var(--frost-grain),linear-gradient(150deg,#F2F6F8 0%,#B9E0F3 40%,#ACE5C3 72%,#ACE5C3 100%); /* ── 管线三色也跟着提亮；条上的字改深色，浅底浅条都读得清 */ --heme:#4FA8DC; --auto:#7FC94A; --solid:#E2A44F; --amber:#C8811E; --amber-d:#8A5A10; --line:#E1E8EF; --line2:#C9D6E2; /* ══════════ 字号：五级 ══════════ T1 大标题 页面主标题（每页一个） T2 区块标题 每个区块的开头、KPI 大数字 —— 负责「新的一段开始了」这个信号 T3 小标题 卡片标题、条目标题、子区块 T4 正文 T5 注释 眉题、标签、徽章、表头、时间戳、图注 */ /* 大标题：窄区间 clamp（小笔记本 46px → 1440 起 62px 封顶），正文固定 */ --t1:clamp(2.9rem,1rem + 3vw,3.9rem); /* 1093→47 1280→54 1440+→62 */ --t2:clamp(1.8rem,.9rem + 1.6vw,2.3rem); --t3:clamp(1.3rem,1rem + .5vw,1.5rem); --t4:1.0625rem; /* 17px @16 */ --t5:.78rem; /* 12.5px @16 */ --mono:"SF Mono",Menlo,Consolas,monospace; --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; --ez:cubic-bezier(.22,1,.36,1); --wrap:82.5rem; /* 1320px @16，随根字号一起缩放 */ /* 左右留白：随屏幕流动，但有上下限，任何分辨率下都不会顶到边 */ --pad:clamp(1.25rem,3.4vw,3.25rem); /* --gut = 内容左边缘到视口左边的距离。所有「贴边」元素都用它， 保证首屏左半幅、正文、表格三者左边缘永远对齐。 CSS 兜底用 100vw（含滚动条，有几像素误差），site.js 会用精确值覆盖 */ --gut:max(var(--pad),calc((100vw - var(--wrap))/2 + var(--pad))); --navh:5.75rem; /* 92px @16 */ } @media(max-width:1000px){:root{--navh:4.625rem}} @media(max-width:600px){:root{--t1:2.2rem;--t2:1.6rem;--t3:1.25rem}} /* clamp 兜底：不认 clamp()/min()/max() 的旧内核（Chromium<79, Safari<13.1）用固定值，否则标题掉回默认字号 */ @supports not (width:clamp(1px,2vw,3px)){:root{--t1:46px;--t2:30px;--t3:22px;--pad:32px;--gut:32px}} *{box-sizing:border-box;margin:0;padding:0} /* ══ 尺度 ══ 主流企业官网做法：根字号固定 16px、版心封顶、大屏只加留白；只有大标题用窄区间 clamp 随屏幕微调。 （09-03 曾试过根字号随视口 14–20px 流动，用户反馈大屏上整体变大、列被撑折行，09-04 改回。） 所有尺寸仍挂 rem：正文 / 导航 / 留白 / 容器 / 首屏区高 / 首页环形与泡泡直径都按同一刻度封顶， 所以图片不会再随屏幕无限放大——这才是"字缩了图没缩"的正确修法。 */ html{scroll-behavior:smooth;font-size:16px} body{font-family:var(--sans);background:#fff;color:var(--body); font-size:var(--t4);line-height:1.9;-webkit-font-smoothing:antialiased} /* 浅色导航的内页：内容整体下移，不被导航盖住；首页深色首屏则让导航浮在图上 */ body:not(.hero-dark){padding-top:var(--navh)} @media(max-width:560px){body{font-size:var(--t4);line-height:1.85}} /* 任何情况下都不允许出现横向滚动条 */ html,body{overflow-x:hidden;overflow-x:clip;max-width:100%} /* 先 hidden 后 clip：