/* ========================================================= 法眸智审 · 全站动效层 (site-animations) 设计原则： 1) 高级感靠克制——滚动渐入 + 卡片悬浮 + 微交互，不花哨乱动。 2) 渐进增强——进场隐藏态仅在 下生效； JS 未加载时内容照常显示，绝不白屏。 3) 尊重系统「减少动效」偏好。 由 site-animations.js 统一驱动。 ========================================================= */ /* ---------- 全局过渡基线（纯 CSS，立即生效，不依赖 JS） ---------- */ a, button, .btn, [class*="-card"], [class*="-panel"], [class*="-box"], .value-item, .flow-step, .faq-item, .history-item, .file-item, .tip-item { transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease, border-color .25s ease, background-color .2s ease; } /* ---------- 卡片悬浮上浮 ---------- */ .price-card:not(.featured):hover, .pain-card:hover, .value-item:hover, .flow-step:hover, .feature-card:hover, .template-card:hover, .stat-card:hover, .summary-card:hover, .access-card:hover, .audience-card:hover, .learning-card:hover, .context-card:hover, .plan-card:hover, .score-card:hover, .history-item:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(31, 111, 255, 0.16); } .price-card.featured:hover { transform: translateY(-14px); box-shadow: 0 28px 60px rgba(31, 111, 255, 0.24); } /* ---------- 按钮微交互 ---------- */ .btn { will-change: transform; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } /* 主按钮悬浮时的光泽流动，提升质感 */ .btn-brand, .btn-primary { position: relative; overflow: hidden; } .btn-brand::after, .btn-primary::after { content: ""; position: absolute; top: 0; left: -130%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-20deg); transition: left .6s ease; pointer-events: none; } .btn-brand:hover::after, .btn-primary:hover::after { left: 150%; } /* ---------- 导航栏滚动阴影 ---------- */ .navbar { transition: box-shadow .3s ease, background-color .3s ease; } .navbar.is-scrolled { box-shadow: 0 10px 30px rgba(16, 25, 54, 0.10); } /* ========================================================= 滚动进场动画（渐进增强：隐藏态只在 anim-ready 下生效） ========================================================= */ html.anim-ready [data-reveal] { opacity: 0; transform: translateY(24px); will-change: opacity, transform; } html.anim-ready [data-reveal].is-visible { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--reveal-delay, 0ms); } /* 锚点平滑滚动 */ html { scroll-behavior: smooth; } /* ---------- 尊重系统「减少动效」设置 ---------- */ @media (prefers-reduced-motion: reduce) { html.anim-ready [data-reveal] { opacity: 1 !important; transform: none !important; } .btn:hover, .price-card:hover, .price-card.featured:hover, .pain-card:hover, .value-item:hover, .flow-step:hover, .history-item:hover { transform: none !important; } .btn-brand::after, .btn-primary::after { display: none; } html { scroll-behavior: auto; } }