.elementor-kit-8{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}/* Start custom CSS */<!-- 1. 顶部固定导航栏 -->
<header class="my-fixed-header">
    <div class="header-container">
        <!-- 左侧 Logo -->
        <div class="header-logo">
            <a href="#">MyLogo</a>
        </div>
        
        <!-- 右侧 导航栏 -->
        <nav class="header-nav">
            <ul class="nav-list">
                <li><a href="#product1" class="nav-link">产品 1</a></li>
                <li><a href="#product2" class="nav-link">产品 2</a></li>
                <li><a href="#product3" class="nav-link">产品 3</a></li>
            </ul>
        </nav>
    </div>
</header>

<!-- 2. CSS 样式 -->
<style>
/* --- 全局设置 --- */
body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
html { scroll-behavior: smooth; }
/* 关键：防止内容被固定页眉遮挡 */
body { padding-top: 70px; } 

/* --- 导航栏样式 (桌面端默认) --- */
.my-fixed-header { position: fixed; top: 0; left: 0; width: 100%; height: 70px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 9999; display: flex; align-items: center; }
.header-container { max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }

/* Logo 样式 */
.header-logo a { font-size: 24px; font-weight: bold; color: #333; text-decoration: none; }

/* 导航列表样式 */
.header-nav .nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; }
.header-nav a { text-decoration: none; color: #555; font-size: 16px; transition: color 0.3s; position: relative; }

/* 激活状态 (高亮) */
.header-nav a:hover, .header-nav a.active { color: #0073e5; font-weight: bold; }
.header-nav a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 0; background: #0073e5; transition: width 0.3s; }
.header-nav a:hover::after, .header-nav a.active::after { width: 100%; }

/* --- 正文内容样式 --- */
.product-section { padding: 80px 20px; border-bottom: 1px solid #eee; }
.product-container { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 50px; }
.product-image { flex: 1; }
.product-image img { width: 100%; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.product-content { flex: 1; }
.product-title { font-size: 32px; color: #333; margin-bottom: 20px; }
.product-desc { font-size: 16px; color: #666; line-height: 1.8; margin-bottom: 30px; }
.product-btn { display: inline-block; padding: 12px 30px; background-color: #0073e5; color: #fff; text-decoration: none; border-radius: 5px; transition: background 0.3s; }
.product-btn:hover { background-color: #005bb5; }
.reverse-layout .product-container { flex-direction: row-reverse; }

/* --- 移动端适配 (布局一致，仅尺寸变小) --- */
@media (max-width: 768px) {
    /* 1. 导航栏变小，但不折叠 */
    .header-container { padding: 0 10px; } /* 减小左右边距 */
    .header-logo a { font-size: 18px; } /* Logo 字体稍微变小 */
    
    /* 导航列表保持 flex 横向排列，减小间距 */
    .header-nav .nav-list { gap: 10px; } 
    
    /* 导航字体变小，防止换行 */
    .header-nav a { font-size: 14px; padding: 5px 0; }
    
    /* 2. 正文内容调整为单列 */
    .product-container { flex-direction: column; text-align: center; gap: 30px; }
    .reverse-layout .product-container { flex-direction: column; }
    
    /* 正文标题字体在手机上稍微调小 */
    .product-title { font-size: 26px; }
}
</style>

<!-- 3. 正文内容示例 -->
<section id="product1" class="product-section">
    <div class="product-container">
        <div class="product-image">
            <img src="https://via.placeholder.com/600x400/0073e5/ffffff?text=Product+1" alt="产品1">
        </div>
        <div class="product-content">
            <h2 class="product-title">旗舰产品系列 X1</h2>
            <p class="product-desc">这是产品1的详细介绍。高性能，长续航，专为追求卓越的用户设计。</p>
            <a href="#" class="product-btn">了解更多</a>
        </div>
    </div>
</section>

<section id="product2" class="product-section reverse-layout">
    <div class="product-container">
        <div class="product-image">
            <img src="https://via.placeholder.com/600x400/333333/ffffff?text=Product+2" alt="产品2">
        </div>
        <div class="product-content">
            <h2 class="product-title">专业版套件 Pro</h2>
            <p class="product-desc">专为专业人士打造。Pro 系列提供了更强大的功能和更精细的控制选项。</p>
            <a href="#" class="product-btn">查看参数</a>
        </div>
    </div>
</section>

<section id="product3" class="product-section">
    <div class="product-container">
        <div class="product-image">
            <img src="https://via.placeholder.com/600x400/555555/ffffff?text=Product+3" alt="产品3">
        </div>
        <div class="product-content">
            <h2 class="product-title">入门级精选 Lite</h2>
            <p class="product-desc">高性价比的选择。Lite 版本保留了核心功能，价格更加亲民。</p>
            <a href="#" class="product-btn">立即购买</a>
        </div>
    </div>
</section>

<!-- 4. JavaScript 逻辑 (滚动监听高亮) -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const navLinks = document.querySelectorAll('.nav-link');
    const sections = document.querySelectorAll('.product-section');

    window.addEventListener('scroll', () => {
        let currentSectionId = '';
        let scrollPosition = window.scrollY;

        sections.forEach((section) => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.clientHeight;
            
            // 核心算法：判断当前滚动位置是否在板块范围内
            // +150 是为了补偿页眉高度，让高亮触发得更自然
            if (scrollPosition + 150 >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
                currentSectionId = section.getAttribute('id');
            }
        });

        // 更新导航栏状态
        navLinks.forEach(link => {
            link.classList.remove('active');
            if (link.getAttribute('href').includes(currentSectionId)) {
                link.classList.add('active');
            }
        });
    });
});
</script>/* End custom CSS */