/* assets/css/style.css */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Roboto:wght@300;400;500;700&display=swap'); :root { --primary-bg: #0D0D0D; /* 更深的背景，接近黑色 */ --secondary-bg: #1A1A1A; /* 卡片和次级背景 */ --text-primary: #E0E0E0; /* 主要文字颜色 */ --text-secondary: #A0A0A0; /* 次要文字颜色 */ --text-headings: #FFFFFF; /* 标题文字颜色 */ /* 强调色 */ --accent-blue: #00AEEF; /* 主强调色 - 科技蓝 (之前版本使用的) */ --accent-blue-glow: rgba(0, 174, 239, 0.5); /* H1辉光的主透明度, 使用实际RGB值 */ --accent-blue-glow-soft: rgba(0, 174, 239, 0.3); /* H1辉光的次透明度, 使用实际RGB值 */ --accent-blue-darker: #008cbf; /* 用于按钮悬停等 */ --accent-yellow: #FFD700; /* 辅助强调色 - 活力黄 (大黄蜂黄) */ --accent-white: #FFFFFF; --font-primary: 'Roboto', 'Noto Sans SC', sans-serif; --font-headings: 'Roboto', 'Noto Sans SC', sans-serif; --container-width: 1200px; --border-radius: 8px; --transition-speed: 0.3s ease; --box-shadow-dark-soft: 0 5px 15px rgba(0,0,0,0.2); --box-shadow-dark-strong: 0 10px 30px rgba(0, 174, 239, 0.15); /* 使用辉光色作为阴影 */ } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-primary); background-color: var(--primary-bg); color: var(--text-primary); line-height: 1.7; overflow-x: hidden; } .container { width: 90%; max-width: var(--container-width); margin: 0 auto; padding: 0 15px; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-headings); color: var(--text-headings); margin-bottom: 1rem; font-weight: 500; /* Default weight for h2-h6 */ } h1 { /* General H1, not specific to hero, if any */ font-size: 3.5rem; line-height: 1.1; font-weight: 700; } h2 { font-size: 2.5rem; line-height: 1.2; margin-bottom: 2.5rem; text-align: center; text-transform: uppercase; letter-spacing: 1px; } /* Hero Section H1 - First Version Style */ .hero-content h1 { font-size: 4.5rem; color: var(--accent-white); /* White text color */ text-shadow: 0 0 15px var(--accent-blue-glow), 0 0 20px var(--accent-blue-glow-soft); /* Original glow using defined RGBA values */ margin-bottom: 0.5rem; font-weight: 700; /* Ensure H1 is bold */ } .hero-content h2 { /* Subtitle in Hero section */ font-size: 1.8rem; color: var(--accent-blue); /* Use main accent blue */ margin-bottom: 1.5rem; text-align: center; font-weight: 400; } h3 { font-size: 1.5rem; color: var(--accent-blue); } /* Main accent blue for H3 */ p { margin-bottom: 1rem; color: var(--text-secondary); } a { color: var(--accent-blue); text-decoration: none; transition: color var(--transition-speed); } a:hover { color: var(--accent-yellow); } img { max-width: 100%; height: auto; display: block; } /* Header & Navigation */ header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background-color: rgba(13, 13, 13, 0.85); backdrop-filter: blur(10px); padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } header .container { display: flex; justify-content: space-between; align-items: center; } header .logo img { height: 40px; } header nav ul { list-style: none; display: flex; } header nav ul li { margin-left: 2rem; } header nav ul li a { color: var(--text-primary); font-weight: 500; padding: 0.5rem 0; position: relative; text-transform: uppercase; letter-spacing: 0.5px; } header nav ul li a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--accent-blue); transition: width var(--transition-speed); } header nav ul li a:hover::after, header nav ul li a.active::after { width: 100%; } header nav ul li a:hover { color: var(--accent-white); } /* Hero Section */ .hero-section { min-height: 100vh; /* Ensure full viewport height */ display: flex; align-items: center; justify-content: center; text-align: center; padding-top: 100px; position: relative; overflow: hidden; } .hero-content { position: relative; z-index: 10; max-width: 800px; } .hero-content p { font-size: 1.1rem; color: var(--text-primary); margin-bottom: 2.5rem; } .cta-button { display: inline-block; background-color: var(--accent-blue); color: var(--accent-white); padding: 0.9rem 2.2rem; border-radius: var(--border-radius); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; transition: background-color var(--transition-speed), transform var(--transition-speed); box-shadow: 0 5px 15px rgba(0, 174, 239, 0.3); /* Glow color for shadow */ } .cta-button:hover { background-color: var(--accent-blue-darker); color: var(--accent-white); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 174, 239, 0.4); /* Glow color for shadow */ } .hero-product-image { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 50%; max-width: 600px; z-index: 5; opacity: 0.85; } .hero-product-image img { width: 100%; object-fit: contain; } /* Categories Section */ .categories-section { padding: 6rem 0; background-color: var(--secondary-bg); } .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); /* Consistent 4 columns on desktop */ gap: 2rem; } .category-card { background-color: var(--primary-bg); padding: 2rem; border-radius: var(--border-radius); text-align: center; border: 1px solid rgba(255, 255, 255, 0.1); transition: transform var(--transition-speed), box-shadow var(--transition-speed); box-shadow: var(--box-shadow-dark-soft); } .category-card:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0, 174, 239, 0.2); /* Glow color for shadow */ border-color: var(--accent-blue); } .category-card img { width: 100px; height: 100px; object-fit: contain; margin: 0 auto 1.5rem auto; } .category-card h3 { margin-bottom: 0.5rem; } .category-card p { font-size: 0.9rem; margin-bottom: 1.5rem; } .learn-more { font-weight: 700; font-size: 0.9rem; } /* Features Section */ .features-section { padding: 6rem 0; } .feature-item { display: flex; align-items: center; gap: 3rem; margin-bottom: 5rem; } .feature-item:last-child { margin-bottom: 0; } .feature-item.reverse { flex-direction: row-reverse; } .feature-image { flex: 1; } .feature-image img { border-radius: var(--border-radius); box-shadow: 0 10px 30px rgba(0,0,0,0.3); } .feature-text { flex: 1; } .feature-text h3 { font-size: 2rem; margin-bottom: 1rem; } /* Brand Concept Section */ .brand-concept-section { padding: 8rem 0; background-size: cover; background-position: center center; background-attachment: fixed; position: relative; text-align: center; } .brand-concept-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(13, 13, 13, 0.8); z-index: 1; } .brand-overlay { position: relative; z-index: 2; max-width: 800px; } .brand-concept-section h2 { font-size: 2.8rem; color: var(--accent-white); text-shadow: 0 0 10px rgba(0, 174, 239, 0.4); /* Glow color for shadow */ } .brand-concept-section p { font-size: 1.15rem; color: var(--text-primary); margin-bottom: 1.5rem; } .brand-concept-section p strong { color: var(--accent-blue); font-weight: 700; } /* Contact Section */ .contact-section { padding: 5rem 0; background-color: var(--secondary-bg); } .contact-section h2 { margin-bottom: 3rem; } .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; } .contact-info h3, .quick-links h3 { font-size: 1.5rem; color: var(--text-headings); margin-bottom: 1.5rem; } .contact-info ul, .quick-links ul { list-style: none; padding: 0; } .contact-info ul li, .quick-links ul li { margin-bottom: 0.8rem; color: var(--text-secondary); } .contact-info ul li strong { color: var(--text-primary); } .quick-links ul li a { color: var(--text-secondary); } .quick-links ul li a:hover { color: var(--accent-blue); } .social-media-links { margin-top: 2rem; } .social-media-links a { margin-right: 1rem; color: var(--text-secondary); display: inline-block; transition: color var(--transition-speed), transform var(--transition-speed); } .social-media-links a:hover { color: var(--accent-blue); transform: scale(1.1); } .social-media-links a svg { width: 28px; height: 28px; fill: currentColor; } /* Footer */ footer { background-color: var(--primary-bg); color: var(--text-secondary); padding: 3rem 0; text-align: center; font-size: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } footer p { margin-bottom: 0.5rem; } footer a { color: var(--text-secondary); } footer a:hover { color: var(--accent-blue); } /* Responsive Adjustments */ @media (max-width: 992px) { .hero-content h1 { font-size: 3.5rem; } h2 { font-size: 2rem; } .feature-text h3 { font-size: 1.7rem; } .category-grid { grid-template-columns: repeat(2, 1fr); } .hero-product-image { width: 70%; opacity: 0.7; } } @media (max-width: 768px) { header .container { flex-direction: column; } header nav ul { margin-top: 1rem; flex-wrap: wrap; justify-content: center; } header nav ul li { margin: 0.5rem; } .hero-section { padding-top: 150px; /* min-height: 100vh; */ /* Already set */ } .hero-content h1 { font-size: 2.8rem; } .hero-content h2 { font-size: 1.5rem; } .hero-content p { font-size: 1rem; } .hero-product-image { width: 80%; max-width: 400px; opacity: 0.6; bottom: -20px; } .feature-item, .feature-item.reverse { flex-direction: column; text-align: center; } .feature-item .feature-image, .feature-item.reverse .feature-image { margin-bottom: 2rem; } .contact-grid { grid-template-columns: 1fr; } } @media (max-width: 480px) { .hero-content h1 { font-size: 2.2rem; } .hero-content h2 { font-size: 1.2rem; } .cta-button { padding: 0.7rem 1.5rem; font-size: 0.9rem;} .category-grid { grid-template-columns: 1fr; } .hero-product-image { display: none; } }