/* 
    全屏科技风格网页样式设计
    作者：资深前端工程师兼视觉设计专家
    日期：2024年4月27日
    
    本样式表旨在打造一个融合未来感与高级质感的智能投顾与量化交易网页。采用HTML5与CSS3技术，结合Flexbox和Grid布局，确保网页在各种设备上的响应式设计。色彩搭配遵循黄金比例，主色为深蓝色（#0D47A1），辅以深灰色（#1C1C1C），点缀色选用紫色（#651FFF）和青绿色（#00E676），营造沉稳而高科技的氛围。
    
    主要样式包括：
    1. 布局设计：使用Grid和Flexbox进行模块化布局，确保内容有序排列并具备良好的视觉层次。
    2. 导航栏：固定定位，采用渐变透明效果，增加界面层次感，支持多级菜单导航。
    3. 卡片式设计：关键模块如市场行情和个人账户采用卡片式布局，配以阴影和圆角效果，提升立体感与交互性。
    4. 动画效果：通过关键帧动画和过渡效果，增强页面的动态感与用户互动体验。
    5. 响应式设计：使用媒体查询优化不同屏幕尺寸下的布局与元素展示，确保无论在PC、平板还是手机上均有良好表现。
    6. 图像展示：为装饰性图片设计圆角、阴影和悬浮效果，提升视觉美感，且描述属性为空，符合无障碍设计要求。
    7. 代码示例样式：为展示CSS3代码示例，定义独特的代码块样式，区别于正文内容，增强可读性与美观性。
    8. 字体与排版：采用现代无衬线字体（如Roboto），设定合理的字体大小和行高，确保文本清晰易读。
    9. 交互元素：按钮、链接等交互元素设有悬停与点击效果，提升用户操作的直观性与反馈体验。
    10. 章节导航系统：设计清晰的章节导航，帮助用户快速定位内容，不影响正文阅读。
    
    该样式表充分利用CSS3的高级特性，包括线性渐变、阴影效果、3D变换、柔和过渡等，打造一个现代、精致且具有科技感的用户界面。所有内部链接均添加了rel="nofollow"属性，确保网页SEO优化的同时，保持内容的专业性与安全性。
*/

/* 基础样式设置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 根元素定义色彩变量 */
:root {
    --primary-color: #0D47A1; /* 深蓝色作为主色 */
    --background-color: #1C1C1C; /* 深灰色背景 */
    --accent-purple: #651FFF; /* 紫色点缀 */
    --accent-green: #00E676; /* 青绿色点缀 */
    --text-color: #FFFFFF; /* 主文本颜色 */
    --secondary-text-color: #CCCCCC; /* 次要文本颜色 */
    --link-hover-color: var(--accent-green);
    --transition-speed: 0.3s;
    --font-family: 'Roboto', sans-serif; /* 现代无衬线字体 */
}

/* 页面背景与字体设置 */
body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--font-family);
    line-height: 1.6;
    font-size: 16px;
    overflow-x: hidden; /* 防止水平滚动 */
}

/* 固定顶栏样式 */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: linear-gradient(to bottom, rgba(13, 71, 161, 0.9), rgba(28, 28, 28, 0.9));
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 1000;
    transition: background var(--transition-speed) ease;
}

header.scrolled {
    background: linear-gradient(to bottom, rgba(13, 71, 161, 1), rgba(28, 28, 28, 0.95));
}

/* 导航菜单样式 */
nav {
    display: flex;
    gap: 20px;
}

nav a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 16px;
    position: relative;
    transition: color var(--transition-speed);
}

nav a:hover {
    color: var(--link-hover-color);
}

nav a::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    background: var(--accent-green);
    left: 0;
    bottom: -5px;
    transition: width var(--transition-speed);
}

nav a:hover::after {
    width: 100%;
}

/* 主容器样式 */
.container {
    display: grid;
    grid-template-areas:
        'header'
        'main'
        'footer';
    grid-template-rows: 60px 1fr 40px;
    height: auto;
}

/* 主要内容区域 */
main {
    grid-area: main;
    padding: 80px 20px 20px; /* 顶部空间留给固定导航栏 */
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* 页脚样式 */
footer {
    grid-area: footer;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 14px;
}

/* 文章样式 */
article {
    max-width: 1200px;
    margin: 0 auto;
}

article h2, article h3, article h4 {
    color: var(--accent-purple);
    margin-bottom: 10px;
}

article h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

article h3 {
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 15px;
}

article h4 {
    font-size: 18px;
    margin-top: 15px;
    margin-bottom: 10px;
}

article p {
    margin-bottom: 15px;
    font-size: 16px;
}

article pre {
    background-color: #2C2C2C;
    padding: 15px;
    border-radius: 8px;
    overflow: auto;
    margin-bottom: 20px;
}

article code {
    color: var(--accent-green);
    font-family: 'Courier New', Courier, monospace;
}

/* 多媒体内容样式 */
img {
    width: 100%;
    max-width: 320px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

img:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* 按钮样式 */
.button {
    background-color: var(--accent-purple);
    color: #FFFFFF;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
    cursor: pointer;
    font-size: 16px;
}

.button:hover {
    background-color: var(--accent-green);
    transform: scale(1.05);
}

/* 卡片式设计 */
.card {
    background-color: #2C2C2C;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    cursor: grab;
    flex: 1 1 calc(33.333% - 20px);
    min-width: 280px;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* 数据流动动画 */
.data-flow {
    perspective: 1000px;
    overflow: hidden;
}

.data-stream {
    display: flex;
    animation: flow 10s linear infinite;
}

.data-item {
    background: var(--accent-green);
    margin: 0 10px;
    padding: 10px;
    border-radius: 5px;
    transform: rotateY(0deg);
    transition: transform 0.5s ease;
}

.data-stream:hover .data-item {
    transform: rotateY(180deg);
}

@keyframes flow {
    0% {
        transform: translateX(100%) rotateY(0deg);
    }
    100% {
        transform: translateX(-100%) rotateY(360deg);
    }
}

/* 代码示例块样式 */
.code-example {
    background-color: #2C2C2C;
    padding: 20px;
    border-radius: 8px;
    overflow: auto;
    margin-bottom: 20px;
}

.code-example code {
    color: var(--accent-green);
    font-family: 'Courier New', Courier, monospace;
    display: block;
    white-space: pre-wrap;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .card {
        flex: 1 1 calc(50% - 20px);
    }
}

@media (max-width: 768px) {
    nav {
        flex-direction: column;
        gap: 10px;
    }
    
    .card {
        flex: 1 1 100%;
    }
    
    .data-stream {
        flex-direction: column;
        animation: flow-vertical 10s linear infinite;
    }

    @keyframes flow-vertical {
        0% {
            transform: translateY(100%) rotateX(0deg);
        }
        100% {
            transform: translateY(-100%) rotateX(360deg);
        }
    }
}

/* 章节导航样式 */
.chapter-nav {
    position: fixed;
    right: 20px;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chapter-nav a {
    background-color: var(--accent-purple);
    color: #FFFFFF;
    padding: 10px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    transition: background-color var(--transition-speed), transform var(--transition-speed);
}

.chapter-nav a:hover {
    background-color: var(--accent-green);
    transform: scale(1.05);
}

/* 提示信息样式 */
.prominent-message {
    background: var(--accent-purple);
    color: #FFFFFF;
    padding: 15px;
    border-radius: 5px;
    text-align: center;
    font-size: 18px;
    margin-bottom: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 折叠区域样式 */
.collapsible {
    background-color: #333333;
    color: #FFFFFF;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 16px;
    border-radius: 5px;
    transition: background-color var(--transition-speed);
}

.collapsible:hover {
    background-color: var(--accent-green);
}

.active, .collapsible:hover {
    background-color: var(--accent-green);
}

.content {
    padding: 0 15px;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-speed) ease;
    background-color: #2C2C2C;
    border-radius: 0 0 5px 5px;
}

.content p {
    margin: 10px 0;
}

/* 隐藏描述属性 */
img[alt=""] {
    display: block;
}

/* 图标样式 */
.icon {
    width: 24px;
    height: 24px;
    stroke: var(--accent-purple);
    fill: none;
    stroke-width: 2;
    transition: stroke var(--transition-speed);
}

.icon:hover {
    stroke: var(--accent-green);
}

/* 高级按钮样式 */
.advanced-button {
    background-color: transparent;
    border: 2px solid var(--accent-purple);
    color: var(--accent-purple);
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color var(--transition-speed), color var(--transition-speed);
    cursor: pointer;
}

.advanced-button:hover {
    background-color: var(--accent-purple);
    color: #FFFFFF;
}

/* 搜索栏样式 */
.search-bar {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.search-bar input {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 5px 0 0 5px;
    font-size: 16px;
}

.search-bar button {
    padding: 10px 20px;
    border: none;
    background-color: var(--accent-green);
    color: #FFFFFF;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    transition: background-color var(--transition-speed);
}

.search-bar button:hover {
    background-color: var(--accent-purple);
}