/* ========================================================================== 三汇能环 · 全站统一动效层（site-fx.css） -------------------------------------------------------------------------- 目标：所有二级 / 三级页面共享一套克制、统一的动效语言，与首页 （home-lean / home-map）风格一致，但不重复其已有特效。 原则： 1. 只做「不改变布局」的动效（透明度 / 位移 / 阴影 / 颜色），零 CLS 2. 全部支持 prefers-reduced-motion 3. 无 JS 时内容完整可读（.fx 类只由 JS 添加） 4. 命中元素均带 fx- 前缀，不覆盖站点原有样式 ========================================================================== */ :root{ --fx-ease: cubic-bezier(.22,.61,.36,1); } /* -------------------------------------------------------------------------- 0. 全局：平滑锚点 + 固定页头避让 + 可访问性 -------------------------------------------------------------------------- */ html{ scroll-behavior:smooth; } /* 锚点跳转时给吸顶导航留出空间，避免标题被遮 */ [id]{ scroll-margin-top:92px; } @media (max-width:768px){ [id]{ scroll-margin-top:78px; } } /* 带页内锚点条（.anchors，吸顶在导航下方）的页面： 锚点目标还要再避让锚点条高度（导航77 + 锚点条59 ≈ 136，留余量146） */ body:has(.anchors) [id]{ scroll-margin-top:146px; } @media (max-width:1080px){ body:has(.anchors) [id]{ scroll-margin-top:132px; } } @media (max-width:768px){ body:has(.anchors) [id]{ scroll-margin-top:118px; } } /* 键盘焦点可见（鼠标点击不出现） */ a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible, textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{ outline:2px solid var(--blue-b); outline-offset:2px; border-radius:4px; } /* 按钮按压反馈（只作用于尺寸不敏感的按钮，图标按钮除外） */ .btn:active,.btn--primary:active,.btn--line:active{ transform:translateY(1px); } .btn{ transition:transform .16s var(--fx-ease), box-shadow .24s var(--fx-ease), background .2s, color .2s, border-color .2s; } /* -------------------------------------------------------------------------- 1. 内页页头（.phead）分级入场 —— 纯 CSS 动画，即使 JS 失败也会正常播放并停在终态 -------------------------------------------------------------------------- */ @keyframes fxRise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } } @keyframes fxFade{ from{ opacity:0; } to{ opacity:1; } } @keyframes fxLine{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } } .phead .crumb, .phead h1, .phead p, .phead .ptags, .phead .pact{ animation:fxRise .62s var(--fx-ease) both; } .phead .crumb{ animation-delay:.02s; } .phead h1 { animation-delay:.08s; } .phead p { animation-delay:.15s; } .phead .ptags{ animation-delay:.21s; } .phead .pact { animation-delay:.26s; } /* 页头背景图缓慢推近（与首页 hero 同一语言，幅度更小） */ @keyframes fxDrift{ from{ transform:scale(1.02); } to{ transform:scale(1.075); } } .phead .phead-bg .m-art{ animation:fxDrift 22s ease-out both alternate infinite; } /* -------------------------------------------------------------------------- 2. 顶部阅读进度条（非首页；首页由 home-v4 的 #pgbar 负责） -------------------------------------------------------------------------- */ .fx-prog{ position:fixed; left:0; top:0; height:3px; width:0; z-index:1200; pointer-events:none; border-radius:0 2px 2px 0; background:linear-gradient(90deg,var(--blue-b),var(--teal-b) 58%,var(--green-b)); box-shadow:0 0 10px rgba(30,128,214,.35); transition:width .12s linear, opacity .3s; opacity:0; } .fx-prog.on{ opacity:1; } /* -------------------------------------------------------------------------- 3. 吸顶导航滚动态 -------------------------------------------------------------------------- */ .nav{ transition:box-shadow .3s var(--fx-ease), background .3s var(--fx-ease), border-color .3s; } .nav.scrolled{ background:rgba(255,255,255,.985); box-shadow:0 6px 22px rgba(10,42,74,.09); border-bottom-color:rgba(19,108,183,.14); } /* -------------------------------------------------------------------------- 4. 滚动渐显（.fx 由 site-fx.js 添加，无 JS 时不生效） -------------------------------------------------------------------------- */ .fx{ opacity:0; transform:translateY(16px); transition:opacity .62s var(--fx-ease), transform .62s var(--fx-ease); } .fx.fx-on{ opacity:1; transform:none; } /* 只看不改：内容在 DOM 中始终存在，爬虫与读屏器不受影响 */ /* -------------------------------------------------------------------------- 5. 图片渐显 + 加载失败占位 -------------------------------------------------------------------------- */ .fx-img{ opacity:0; transition:opacity .5s var(--fx-ease); } .fx-img.fx-img-on{ opacity:1; } img.is-broken{ background:repeating-linear-gradient(135deg,#EFF3F8,#EFF3F8 9px,#E6ECF4 9px,#E6ECF4 18px); border:1px dashed #C9D6E4; border-radius:6px; object-fit:cover; } /* -------------------------------------------------------------------------- 6. 数字滚动（.num[data-num]） —— 由 JS 改写 textContent，这里只保证等宽不抖动 -------------------------------------------------------------------------- */ .num{ font-variant-numeric:tabular-nums; } /* -------------------------------------------------------------------------- 7. 卡片悬停：细边框提亮（不改变原有位移 / 阴影规则） -------------------------------------------------------------------------- */ .fx-card{ position:relative; } .fx-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(30,128,214,0); transition:box-shadow .28s var(--fx-ease); } @media (hover:hover){ .fx-card:hover::after{ box-shadow:inset 0 0 0 1px rgba(30,128,214,.26); } } /* -------------------------------------------------------------------------- 8. 表单反馈（健壮性层配合） -------------------------------------------------------------------------- */ .fx-err{ display:block; margin-top:6px; font-size:12.5px; line-height:1.55; color:#C0392B; animation:fadeInLine .24s var(--fx-ease) both; } .fx-err::before{ content:"！"; display:inline-block; margin-right:4px; font-weight:700; } @keyframes fadeInLine{ from{ opacity:0; transform:translateY(-3px);} to{ opacity:1; transform:none;} } input.fx-invalid,select.fx-invalid,textarea.fx-invalid{ border-color:#E05B4A !important; background:#FFF7F6 !important; box-shadow:0 0 0 2px rgba(224,91,74,.10) !important; } form button[type=submit][disabled]{ opacity:.72; cursor:progress; } /* -------------------------------------------------------------------------- 9. 无 JS 提示条（