/** * 首页 Banner 蓝色遮罩层 * Homepage Banner Blue Overlay * * 为中文和英文站点的首页 Banner 添加优雅的蓝色渐变遮罩 * 提升整体页面质感和视觉层次 * * @package Corporate_Theme * @since 1.0.0 */ /* ========================================================================== 中文和英文首页 Banner 遮罩层 ========================================================================== */ /* 中文首页 - 使用 body 选择器提高优先级 */ body.lang-zh.home .hero-section .hero-overlay, body.lang-zh .home-page .hero-section .hero-overlay, /* 英文首页 */ body.lang-en.home .hero-section .hero-overlay, body.lang-en .home-page .hero-section .hero-overlay { /* 蓝色渐变遮罩 - 从左到右，从深到浅 */ background: linear-gradient( 135deg, rgba(0, 51, 102, 0.65) 0%, /* 深蓝色 - 左上角 */ rgba(25, 118, 210, 0.45) 50%, /* 中蓝色 - 中间 */ rgba(66, 165, 245, 0.25) 100% /* 浅蓝色 - 右下角 */ ) !important; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; /* 允许点击穿透到下层元素 */ } /* 增强文字对比度 - 确保文字清晰可读 */ body.lang-zh.home .hero-section .hero-content, body.lang-zh .home-page .hero-section .hero-content, body.lang-en.home .hero-section .hero-content, body.lang-en .home-page .hero-section .hero-content { position: relative; z-index: 2; } body.lang-zh.home .hero-section .hero-title, body.lang-zh .home-page .hero-section .hero-title, body.lang-en.home .hero-section .hero-title, body.lang-en .home-page .hero-section .hero-title { color: #ffffff; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 51, 102, 0.2); font-weight: 700; } body.lang-zh.home .hero-section .hero-subtitle, body.lang-zh .home-page .hero-section .hero-subtitle, body.lang-en.home .hero-section .hero-subtitle, body.lang-en .home-page .hero-section .hero-subtitle { color: #f0f4f8; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 51, 102, 0.2); } /* 按钮样式优化 */ body.lang-zh.home .hero-section .btn, body.lang-zh .home-page .hero-section .btn, body.lang-en.home .hero-section .btn, body.lang-en .home-page .hero-section .btn { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(25, 118, 210, 0.3); transition: all 0.3s ease; } body.lang-zh.home .hero-section .btn:hover, body.lang-zh .home-page .hero-section .btn:hover, body.lang-en.home .hero-section .btn:hover, body.lang-en .home-page .hero-section .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(25, 118, 210, 0.4); } /* ========================================================================== 高级视觉效果 - 微妙的光晕效果 ========================================================================== */ /* 添加顶部光晕效果 */ body.lang-zh.home .hero-section::after, body.lang-zh .home-page .hero-section::after, body.lang-en.home .hero-section::after, body.lang-en .home-page .hero-section::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 150px; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.08) 0%, transparent 100% ); z-index: 1; pointer-events: none; } /* 添加底部渐变效果 - 平滑过渡到下一个区域 */ body.lang-zh.home .hero-section::before, body.lang-zh .home-page .hero-section::before, body.lang-en.home .hero-section::before, body.lang-en .home-page .hero-section::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.1) 100% ); z-index: 1; pointer-events: none; } /* ========================================================================== 响应式优化 ========================================================================== */ /* 平板设备 */ @media (max-width: 1024px) { body.lang-zh.home .hero-section .hero-overlay, body.lang-zh .home-page .hero-section .hero-overlay, body.lang-en.home .hero-section .hero-overlay, body.lang-en .home-page .hero-section .hero-overlay { /* 在平板上稍微加深遮罩，确保文字可读 */ background: linear-gradient( 135deg, rgba(0, 51, 102, 0.70) 0%, rgba(25, 118, 210, 0.50) 50%, rgba(66, 165, 245, 0.30) 100% ) !important; } } /* 手机设备 */ @media (max-width: 768px) { body.lang-zh.home .hero-section .hero-overlay, body.lang-zh .home-page .hero-section .hero-overlay, body.lang-en.home .hero-section .hero-overlay, body.lang-en .home-page .hero-section .hero-overlay { /* 在手机上进一步加深遮罩 */ background: linear-gradient( to bottom, rgba(0, 51, 102, 0.75) 0%, rgba(25, 118, 210, 0.55) 100% ) !important; } /* 移除伪元素效果，简化移动端显示 */ body.lang-zh.home .hero-section::after, body.lang-zh .home-page .hero-section::after, body.lang-en.home .hero-section::after, body.lang-en .home-page .hero-section::after, body.lang-zh.home .hero-section::before, body.lang-zh .home-page .hero-section::before, body.lang-en.home .hero-section::before, body.lang-en .home-page .hero-section::before { display: none; } } /* 小手机设备 */ @media (max-width: 480px) { body.lang-zh.home .hero-section .hero-overlay, body.lang-zh .home-page .hero-section .hero-overlay, body.lang-en.home .hero-section .hero-overlay, body.lang-en .home-page .hero-section .hero-overlay { /* 在小手机上使用更简单的遮罩 */ background: rgba(0, 51, 102, 0.70) !important; } } /* ========================================================================== 打印样式 ========================================================================== */ @media print { body.lang-zh.home .hero-section .hero-overlay, body.lang-zh .home-page .hero-section .hero-overlay, body.lang-en.home .hero-section .hero-overlay, body.lang-en .home-page .hero-section .hero-overlay { /* 打印时移除遮罩，节省墨水 */ background: none !important; } body.lang-zh.home .hero-section::after, body.lang-zh .home-page .hero-section::after, body.lang-en.home .hero-section::after, body.lang-en .home-page .hero-section::after, body.lang-zh.home .hero-section::before, body.lang-zh .home-page .hero-section::before, body.lang-en.home .hero-section::before, body.lang-en .home-page .hero-section::before { display: none; } } /* ========================================================================== 可访问性优化 ========================================================================== */ /* 高对比度模式 */ @media (prefers-contrast: high) { body.lang-zh.home .hero-section .hero-overlay, body.lang-zh .home-page .hero-section .hero-overlay, body.lang-en.home .hero-section .hero-overlay, body.lang-en .home-page .hero-section .hero-overlay { background: rgba(0, 0, 0, 0.75) !important; } body.lang-zh.home .hero-section .hero-title, body.lang-zh .home-page .hero-section .hero-title, body.lang-en.home .hero-section .hero-title, body.lang-en .home-page .hero-section .hero-title, body.lang-zh.home .hero-section .hero-subtitle, body.lang-zh .home-page .hero-section .hero-subtitle, body.lang-en.home .hero-section .hero-subtitle, body.lang-en .home-page .hero-section .hero-subtitle { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); } } /* 减少动画模式 */ @media (prefers-reduced-motion: reduce) { body.lang-zh.home .hero-section .btn, body.lang-zh .home-page .hero-section .btn, body.lang-en.home .hero-section .btn, body.lang-en .home-page .hero-section .btn { transition: none; } body.lang-zh.home .hero-section .btn:hover, body.lang-zh .home-page .hero-section .btn:hover, body.lang-en.home .hero-section .btn:hover, body.lang-en .home-page .hero-section .btn:hover { transform: none; } } /* ========================================================================== 备注说明 ========================================================================== */ /* * 遮罩层颜色说明： * * 深蓝色 (0, 51, 102) - 专业、稳重、科技感 * 中蓝色 (25, 118, 210) - 现代、清新、企业感 * 浅蓝色 (66, 165, 245) - 明亮、活力、友好感 * * 透明度说明： * 0.65 - 深色区域，确保文字对比度 * 0.45 - 中间区域，平衡视觉效果 * 0.25 - 浅色区域，保留图片细节 * * 渐变方向：135deg * 从左上到右下的对角线渐变，符合视觉习惯 */