.elementor-2 .elementor-element.elementor-element-b5e68ef{--display:flex;}:root{--page-title-display:none;}/* Start custom CSS */<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
  /* --- 1. 基础重置与全局变量 --- */
  :root {
    --primary-blue: #0b1a30;    
    --accent-gold: #cba052;     
    --bg-light: #f9fafc;
    --text-dark: #1a202c;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
  }

  /* 强制清除可能存在的边距 */
  body, html { margin: 0; padding: 0; overflow-x: hidden; }

  /* --- 2. 全宽黑科技：强制突破 Elementor 容器限制 --- */
  .ronvue-full-bleed {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* 内容居中容器（保证文字不在屏幕最边缘） */
  .ronvue-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
  }

  /* --- 3. 页面样式 --- */
  .hero-section {
    background-image: linear-gradient(rgba(11, 26, 48, 0.7), rgba(11, 26, 48, 0.4)), 
                      url('https://images.unsplash.com/photo-1543822828-568310d3e52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    padding: 160px 0;
    color: white;
    text-align: center;
  }

  .hero-title { font-size: 52px; font-weight: 800; margin-bottom: 20px; text-transform: uppercase; line-height: 1.1; }
  .hero-subtitle { font-size: 20px; margin-bottom: 40px; color: #cbd5e1; max-width: 800px; margin-left: auto; margin-right: auto; }

  /* 按钮样式 */
  .btn-contact {
    background-color: transparent;
    border: 2px solid white;
    color: white;
    padding: 18px 45px;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
    letter-spacing: 1px;
    display: inline-block;
    text-decoration: none;
  }
  .btn-contact:hover { background-color: white; color: var(--primary-blue); }

  /* 中间内容区域 */
  .section-padding { padding: 80px 0; background-color: white; }
  .section-header { text-align: center; margin-bottom: 50px; }
  .section-header h2 { font-size: 32px; color: var(--primary-blue); margin-bottom: 10px; }

  .gear-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
  .gear-card { text-align: center; padding: 30px; background: var(--bg-light); border-radius: 8px; }
  .gear-card img { height: 220px; object-fit: contain; margin: 0 auto 20px; }

  /* --- 4. 弹窗样式 --- */
  .rv-modal-overlay {
    display: none; 
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(11, 26, 48, 0.9);
    z-index: 99999;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
  }
  .rv-modal-overlay.is-active { display: flex; }

  .rv-modal-content {
    background: white;
    padding: 40px;
    width: 90%;
    max-width: 500px;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    max-height: 90vh;
    overflow-y: auto;
  }

  .rv-close-btn {
    position: absolute;
    top: 15px; right: 20px;
    font-size: 30px;
    cursor: pointer;
    color: var(--text-muted);
  }

  /* 响应式 */
  @media (max-width: 768px) {
    .hero-title { font-size: 32px; }
    .btn-contact { width: 100%; }
  }
</style>
</head>
<body>

  <section class="ronvue-full-bleed hero-section">
    <div class="ronvue-inner">
      <h1 class="hero-title">精英性能，定制专属套装。<br>专为顶级队伍打造。</h1>
      <p class="hero-subtitle">世界领先的技术型赛艇服装。我们为学校、俱乐部提供全方位的定制设计方案。</p>
      <a href="javascript:void(0)" id="openPopup" class="btn-contact">联系定制专家</a>
    </div>
  </section>

  <section class="ronvue-full-bleed section-padding">
    <div class="ronvue-inner">
      <div class="section-header">
        <h2>定制核心装备系列</h2>
      </div>
      <div class="gear-grid">
        <div class="gear-card">
          <img src="https://placehold.co/400x500/transparent/0b1a30?text=Unisuit" alt="连体服">
          <h3>专业比赛连体服</h3>
          <p>空气动力学剪裁，UPF 50+ 防晒</p>
        </div>
        <div class="gear-card">
          <img src="https://placehold.co/400x500/transparent/0b1a30?text=Base+Layer" alt="基础层">
          <h3>高性能训练基础层</h3>
          <p>极致透气排汗，适合高强度训练</p>
        </div>
        <div class="gear-card">
          <img src="https://placehold.co/400x500/transparent/0b1a30?text=Jacket" alt="夹克">
          <h3>团队保障外衣</h3>
          <p>防风防水，统一团队岸上形象</p>
        </div>
      </div>
    </div>
  </section>

  <div id="rvContactModal" class="rv-modal-overlay">
    <div class="rv-modal-content">
      <span class="rv-close-btn" id="closePopup">&times;</span>
      <div style="text-align:center; margin-bottom:20px;">
        <h2 style="color:var(--primary-blue);">提交您的定制需求</h2>
        <p style="color:var(--text-muted); font-size:14px;">专家团队将在1个工作日内联系您</p>
      </div>
      
      <div class="form-placeholder">
        [这里替换成你的 WordPress 表单短代码]
      </div>
    </div>
  </div>

  <script>
    (function() {
      // 等待 DOM 加载
      document.addEventListener('DOMContentLoaded', function() {
        const modal = document.getElementById('rvContactModal');
        const openBtn = document.getElementById('openPopup');
        const closeBtn = document.getElementById('closePopup');

        if(openBtn && modal) {
          openBtn.addEventListener('click', function(e) {
            e.preventDefault();
            modal.classList.add('is-active');
            // 防止页面背景滚动
            document.body.style.overflow = 'hidden';
          });
        }

        if(closeBtn) {
          closeBtn.addEventListener('click', function() {
            modal.classList.remove('is-active');
            document.body.style.overflow = '';
          });
        }

        // 点击遮罩层关闭
        window.addEventListener('click', function(e) {
          if (e.target === modal) {
            modal.classList.remove('is-active');
            document.body.style.overflow = '';
          }
        });
      });
    })();
  </script>

</body>
</html>/* End custom CSS */