初始化多多畅职企业内推平台项目

功能特性： - 3D地球动画与中国地图可视化 - 省份/城市/企业搜索功能 - 308家企业数据展示 - 响应式设计（PC端和移动端） - 企业详情页面与业务板块展示 - 官网新闻轮播图 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-22 19:38:14 +08:00
commit ab50931347
41 changed files with 56412 additions and 0 deletions
--- a/css/components.css
+++ b/css/components.css
@@ -0,0 +1,302 @@
+/* ===================================
+   组件样式
+   =================================== */
+
+/* V1 风格霸气标题 */
+.v1-title {
+    font-family: 'Arial Black', 'Helvetica Neue', sans-serif;
+    font-size: 5rem;
+    letter-spacing: 0.8rem;
+    color: #fff;
+    text-shadow: 0 0 20px rgba(0, 240, 255, 0.8), 0 0 40px rgba(0, 240, 255, 0.4);
+    text-transform: uppercase;
+    margin-bottom: 1rem;
+    white-space: nowrap;
+    opacity: 0; /* 初始隐藏，等待开场动画 */
+}
+
+.v1-subtitle {
+    font-size: 1.2rem;
+    color: #ccc;
+    letter-spacing: 0.4rem;
+    font-weight: 300;
+    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+    opacity: 0; /* 初始隐藏，等待开场动画 */
+}
+
+/* 底部提示 */
+.instruction-hint {
+    position: absolute;
+    bottom: 10%;
+    left: 50%;
+    transform: translateX(-50%);
+    color: rgba(0, 240, 255, 0.8);
+    font-size: 0.9rem;
+    pointer-events: none;
+    z-index: 10;
+    letter-spacing: 2px;
+    border: 1px solid rgba(0, 240, 255, 0.3);
+    padding: 10px 20px;
+    border-radius: 30px;
+    background: rgba(0, 0, 0, 0.5);
+    opacity: 0; /* 初始隐藏，等待开场动画 */
+}
+
+/* 毛玻璃头部 */
+.glass-header {
+    background: rgba(11, 16, 38, 0.9);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* 搜索框 */
+.search-input {
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    transition: all 0.3s;
+}
+
+.search-input:focus {
+    background: rgba(255, 255, 255, 0.15);
+    border-color: #38bdf8;
+    outline: none;
+    box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
+}
+
+.search-input::placeholder {
+    color: rgba(255, 255, 255, 0.4);
+}
+
+/* 搜索建议下拉列表 */
+.search-suggestions {
+    position: absolute;
+    top: calc(100% + 8px);
+    left: 0;
+    right: 0;
+    background: rgba(17, 24, 39, 0.95);
+    backdrop-filter: blur(10px);
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    max-height: 320px;
+    overflow-y: auto;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+}
+
+/* 搜索结果项 */
+.search-item {
+    padding: 12px 16px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: #e5e7eb;
+    transition: all 0.2s;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.search-item:last-child {
+    border-bottom: none;
+}
+
+.search-item:hover,
+.search-item.active {
+    background: rgba(59, 130, 246, 0.2);
+    color: #60a5fa;
+}
+
+/* 搜索项图标 */
+.search-icon {
+    font-size: 18px;
+    width: 24px;
+    text-align: center;
+    flex-shrink: 0;
+}
+
+/* 搜索项名称 */
+.search-name {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* 企业城市标签 */
+.search-city-tag {
+    margin-left: auto;
+    font-size: 12px;
+    color: #9ca3af;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 2px 8px;
+    border-radius: 4px;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+/* 无结果提示 */
+.search-no-result {
+    padding: 20px;
+    text-align: center;
+    color: #9ca3af;
+    font-size: 14px;
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+    .search-suggestions {
+        max-height: 280px;
+    }
+
+    .search-item {
+        padding: 10px 14px;
+        font-size: 14px;
+    }
+
+    .search-icon {
+        font-size: 16px;
+        width: 20px;
+    }
+
+    .search-city-tag {
+        font-size: 11px;
+        padding: 1px 6px;
+    }
+}
+
+
+/* 企业卡片 */
+.company-card {
+    background: rgba(30, 41, 59, 0.6);
+    border: 1px solid rgba(56, 189, 248, 0.2);
+    backdrop-filter: blur(10px);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.company-card:hover {
+    transform: translateY(-5px);
+    border-color: #38bdf8;
+    background: rgba(30, 41, 59, 0.8);
+    box-shadow: 0 0 30px rgba(56, 189, 248, 0.15);
+}
+
+/* 职位卡片（通用） */
+.job-card {
+    background: rgba(30, 41, 59, 0.6);
+    border: 1px solid rgba(56, 189, 248, 0.2);
+    backdrop-filter: blur(10px);
+    transition: all 0.3s;
+}
+
+.job-card:hover {
+    transform: translateY(-5px);
+    border-color: #38bdf8;
+    background: rgba(30, 41, 59, 0.8);
+    box-shadow: 0 10px 30px -10px rgba(56, 189, 248, 0.3);
+}
+
+/* 详情页 - 业务板块卡片 */
+.segment-card {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    padding: 20px;
+}
+
+.segment-title {
+    color: #fff;
+    font-weight: bold;
+    font-size: 1.1rem;
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+}
+
+.segment-title::before {
+    content: '';
+    display: block;
+    width: 4px;
+    height: 16px;
+    background: #38bdf8;
+    margin-right: 10px;
+    box-shadow: 0 0 10px #38bdf8;
+}
+
+/* 岗位标签 */
+.job-tag {
+    display: inline-block;
+    padding: 6px 12px;
+    margin: 0 8px 8px 0;
+    background: rgba(56, 189, 248, 0.05);
+    color: #94a3b8;
+    border: 1px solid rgba(56, 189, 248, 0.1);
+    border-radius: 20px;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.job-tag:hover {
+    background: #38bdf8;
+    color: #000;
+    border-color: #38bdf8;
+    box-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
+}
+
+/* 相册图片 */
+.gallery-img {
+    width: 100%;
+    height: 100px;
+    object-fit: cover;
+    border-radius: 6px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: transform 0.3s;
+}
+
+.gallery-img:hover {
+    transform: scale(1.05);
+    border-color: #38bdf8;
+}
+
+/* 标签徽章 */
+.tag-badge {
+    background: rgba(56, 189, 248, 0.1);
+    color: #38bdf8;
+    border: 1px solid rgba(56, 189, 248, 0.3);
+    font-size: 0.75rem;
+    padding: 2px 8px;
+    border-radius: 4px;
+}
+
+/* 移动端组件适配 */
+@media (max-width: 768px) {
+    .v1-title {
+        font-size: 1.6rem;
+        letter-spacing: 0.15rem;
+        font-weight: 900;
+        text-shadow: 0 0 20px rgba(0, 240, 255, 0.8), 0 0 40px rgba(0, 240, 255, 0.4);
+        white-space: nowrap;
+        overflow: visible;
+    }
+
+    .v1-subtitle {
+        font-size: 0.9rem;
+        letter-spacing: 0.2rem;
+    }
+
+    .instruction-hint {
+        font-size: 0.75rem;
+        padding: 8px 16px;
+    }
+
+    .segment-card {
+        padding: 15px;
+    }
+
+    .job-tag {
+        font-size: 0.75rem;
+        padding: 4px 10px;
+    }
+}
--- a/css/effects.css
+++ b/css/effects.css
@@ -0,0 +1,117 @@
+/* ===================================
+   动画 & 特效
+   =================================== */
+
+/* 呼吸灯动画 */
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(0, 240, 255, 0.4);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(0, 240, 255, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(0, 240, 255, 0);
+    }
+}
+
+.instruction-hint {
+    animation: pulse 2s infinite;
+}
+
+/* 卡片进场动画 */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.fade-in-up {
+    animation: fadeInUp 0.6s ease-out;
+}
+
+/* 旋转加载动画 */
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.rotating {
+    animation: rotate 2s linear infinite;
+}
+
+/* 缩放脉冲动画 */
+@keyframes scalePulse {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.05);
+    }
+}
+
+.scale-pulse {
+    animation: scalePulse 2s ease-in-out infinite;
+}
+
+/* 淡入动画 */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.fade-in {
+    animation: fadeIn 0.5s ease-out;
+}
+
+/* 从左滑入 */
+@keyframes slideInLeft {
+    from {
+        opacity: 0;
+        transform: translateX(-30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+.slide-in-left {
+    animation: slideInLeft 0.5s ease-out;
+}
+
+/* 移动端性能优化 - 使用硬件加速 */
+@media (max-width: 768px) {
+    .company-card,
+    .job-card,
+    .segment-card {
+        will-change: transform;
+        transform: translateZ(0);
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+    }
+}
+
+/* 减弱动画（针对低性能设备） */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
--- a/css/layout.css
+++ b/css/layout.css
@@ -0,0 +1,118 @@
+/* ===================================
+   布局 & 层级管理
+   =================================== */
+
+/* 3D 容器 */
+#canvas-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+#canvas-container.interactive {
+    cursor: pointer;
+}
+
+/* UI 层级 - 标题和提示 */
+#ui-layer {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    color: white;
+    z-index: 10;
+    pointer-events: none;
+    transition: opacity 0.5s ease;
+}
+
+/* 高级转场特效层 */
+#speed-lines {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 15;
+    background: radial-gradient(circle, transparent 40%, rgba(255, 255, 255, 0.1) 45%, transparent 50%);
+    background-size: 200% 200%;
+    opacity: 0;
+    pointer-events: none;
+    transform: scale(1);
+}
+
+#cloud-fog {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 20;
+    backdrop-filter: blur(0px);
+    background: radial-gradient(circle, rgba(220, 240, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 60%, rgba(255, 255, 255, 0) 100%);
+    opacity: 0;
+    pointer-events: none;
+    transform: scale(0.8);
+}
+
+/* 2D 界面容器 */
+#map-interface,
+#list-interface {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 5;
+    display: none;
+    background: radial-gradient(circle at 50% 30%, #1e293b 0%, #0b1026 100%);
+}
+
+#list-interface {
+    z-index: 6;
+    background: #0b1026;
+    background-image: linear-gradient(rgba(56, 189, 248, 0.03) 1px, transparent 1px),
+                      linear-gradient(90deg, rgba(56, 189, 248, 0.03) 1px, transparent 1px);
+    background-size: 40px 40px;
+}
+
+/* 企业详情页容器 */
+#detail-interface {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 7;
+    display: none;
+    opacity: 0;
+    background: #050b14;
+}
+
+/* 面包屑导航 */
+#breadcrumb-container {
+    position: absolute;
+    top: 20px;
+    left: 8px;
+    text-gray-400;
+    font-size: 0.875rem;
+    z-index: 40;
+}
+
+#breadcrumb-container.hidden {
+    display: none;
+}
+
+/* 移动端布局优化 */
+@media (max-width: 768px) {
+    #ui-layer {
+        width: 90%;
+    }
+
+    #breadcrumb-container {
+        top: 72px; /* 避免被固定头部遮挡 */
+    }
+}
--- a/css/reset.css
+++ b/css/reset.css
@@ -0,0 +1,76 @@
+/* ===================================
+   基础重置 & 移动端优化
+   =================================== */
+
+/* 基础重置 */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
+}
+
+body, html {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: #020205;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    /* 移动端优化 */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    touch-action: manipulation; /* 防止双击缩放 */
+    overscroll-behavior: none; /* 防止过度滚动 */
+}
+
+/* 移动端安全区域适配 */
+body {
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+}
+
+/* 滚动条样式美化 */
+::-webkit-scrollbar {
+    width: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+::-webkit-scrollbar-thumb {
+    background: #38bdf8;
+    border-radius: 3px;
+}
+
+/* 移动端隐藏滚动条 */
+@media (max-width: 768px) {
+    ::-webkit-scrollbar {
+        display: none;
+    }
+
+    * {
+        scrollbar-width: none; /* Firefox */
+        -ms-overflow-style: none; /* IE/Edge */
+    }
+}
+
+/* 禁用移动端文本选择 */
+body {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+/* 允许输入框和可编辑内容选择 */
+input, textarea, [contenteditable] {
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+}
--- a/css/website.css
+++ b/css/website.css
@@ -0,0 +1,346 @@
+/* ===================================
+   企业官网样式 - 移动端优先
+   =================================== */
+
+/* --- 导航栏样式 --- */
+.glass-nav {
+    background: rgba(5, 10, 20, 0.8);
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+/* 菜单按钮 */
+#menu-btn {
+    transition: transform 0.3s ease;
+}
+
+#menu-btn:active {
+    transform: scale(0.95);
+}
+
+/* 移动端全屏菜单 */
+#mobile-menu {
+    will-change: transform;
+}
+
+/* 菜单链接动画 */
+.menu-link {
+    position: relative;
+    display: inline-block;
+    transition: color 0.3s ease;
+}
+
+.menu-link::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 2px;
+    bottom: -5px;
+    left: 0;
+    background-color: #38bdf8;
+    transition: width 0.3s ease;
+}
+
+.menu-link:hover::after {
+    width: 100%;
+}
+
+/* 发光文字效果 */
+.glow-text {
+    text-shadow: 0 0 10px rgba(56, 189, 248, 0.5),
+                 0 0 20px rgba(56, 189, 248, 0.3);
+}
+
+/* --- 官网容器布局 --- */
+#website-container {
+    scroll-behavior: smooth;
+}
+
+/* 页面内边距 */
+.page-section {
+    min-height: calc(100vh - 4rem);
+    padding-bottom: 2rem;
+}
+
+/* 标题样式 */
+.section-title {
+    font-size: 1.5rem;
+    font-weight: 800;
+    color: white;
+    border-left: 4px solid #38bdf8;
+    padding-left: 12px;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: baseline;
+}
+
+/* --- 空状态占位 --- */
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 60vh;
+    padding: 3rem 1rem;
+    border: 1px dashed rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+}
+
+.empty-state i {
+    opacity: 0.3;
+}
+
+/* --- 玻璃卡片效果 --- */
+.glass-card {
+    background: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* --- 轮播图样式 --- */
+.carousel-container {
+    background: #000;
+    position: relative;
+    overflow: hidden;
+}
+
+#carousel-track {
+    display: flex;
+    transition: transform 0.5s ease-out;
+}
+
+/* 轮播项容器 */
+.carousel-item {
+    width: 100%;
+    height: 100%;
+    flex-shrink: 0;
+    position: relative;
+    overflow: hidden;
+}
+
+.carousel-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* 标题覆盖层 */
+.carousel-title-overlay {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 60%, transparent 100%);
+    color: white;
+    padding: 2rem 1.5rem 1rem;
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.4;
+    pointer-events: none;
+}
+
+@media (min-width: 768px) {
+    .carousel-title-overlay {
+        font-size: 1.25rem;
+        padding: 3rem 2rem 1.5rem;
+    }
+}
+
+/* 视频播放图标 */
+.video-play-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80px;
+    height: 80px;
+    background: rgba(56, 189, 248, 0.9);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem;
+    color: white;
+    pointer-events: none;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 20px rgba(56, 189, 248, 0.5);
+}
+
+.carousel-item:hover .video-play-icon {
+    transform: translate(-50%, -50%) scale(1.1);
+    background: rgba(56, 189, 248, 1);
+}
+
+/* 轮播图指示点 */
+#carousel-dots {
+    display: flex;
+    gap: 8px;
+    z-index: 10;
+}
+
+.dot {
+    width: 8px;
+    height: 8px;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.dot.active {
+    background: #38bdf8;
+    width: 24px;
+    border-radius: 4px;
+}
+
+/* --- 新闻列表卡片 --- */
+.news-card {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.news-card:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(56, 189, 248, 0.3);
+    transform: translateX(4px);
+}
+
+.news-date {
+    color: #38bdf8;
+    font-size: 0.75rem;
+    margin-bottom: 0.25rem;
+}
+
+.news-title {
+    color: white;
+    font-weight: bold;
+}
+
+/* --- 视频播放模态窗口 --- */
+.video-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.95);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.video-modal.active {
+    opacity: 1;
+}
+
+.video-modal-content {
+    width: 90%;
+    max-width: 900px;
+    background: rgba(5, 10, 20, 0.95);
+    border-radius: 12px;
+    border: 1px solid rgba(56, 189, 248, 0.3);
+    overflow: hidden;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+
+.video-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.5rem;
+    background: rgba(56, 189, 248, 0.1);
+    border-bottom: 1px solid rgba(56, 189, 248, 0.2);
+}
+
+.video-modal-header h3 {
+    color: white;
+    font-size: 1.125rem;
+    margin: 0;
+    flex: 1;
+}
+
+.video-modal-close {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 1.5rem;
+    cursor: pointer;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    transition: all 0.3s ease;
+}
+
+.video-modal-close:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #38bdf8;
+}
+
+.video-modal-body {
+    padding: 0;
+}
+
+.video-modal-body video {
+    display: block;
+    background: #000;
+}
+
+/* --- 响应式设计 --- */
+
+/* 平板及以上 */
+@media (min-width: 768px) {
+    .section-title {
+        font-size: 2rem;
+    }
+
+    .carousel-container {
+        border-radius: 16px;
+    }
+
+    /* 保持汉堡菜单在所有设备上可见 */
+}
+
+/* 桌面端 */
+@media (min-width: 1024px) {
+    .page-section {
+        padding-left: 2rem;
+        padding-right: 2rem;
+    }
+}
+
+/* 超大屏幕 */
+@media (min-width: 1280px) {
+    #website-container {
+        max-width: 1280px;
+        margin: 0 auto;
+    }
+}
+
+/* --- 动画性能优化 --- */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}
+
+/* --- 深色主题变量（可选，方便后续扩展） --- */
+:root {
+    --nav-bg: rgba(5, 10, 20, 0.8);
+    --primary-color: #38bdf8;
+    --text-primary: #ffffff;
+    --text-secondary: #94a3b8;
+    --border-color: rgba(255, 255, 255, 0.1);
+}