2149 lines
72 KiB
HTML
2149 lines
72 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>卡特光醒狮系列 | 国潮觉醒 · 照亮前路</title>
|
||
<meta name="description" content="卡特光醒狮系列透镜 - 狮王/狮魂/狮影/狮跃，国潮觉醒，年轻潮流，夜间科技，运动基因">
|
||
|
||
<!-- Fonts -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
/* ===== CSS Reset & Base ===== */
|
||
*, *::before, *::after {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
/* Brand Colors */
|
||
--brand-black: #0A0A0A;
|
||
--brand-red: #E53935;
|
||
--brand-gold: #FFD700;
|
||
--brand-gold-light: #FFE44D;
|
||
--brand-gold-dark: #CC9900;
|
||
|
||
/* Extended Palette */
|
||
--black-900: #0A0A0A;
|
||
--black-800: #1A1A1A;
|
||
--black-700: #2A2A2A;
|
||
--black-600: #3A3A3A;
|
||
--black-500: #4A4A4A;
|
||
|
||
/* Neutral */
|
||
--gray-100: #F5F5F5;
|
||
--gray-200: #E5E5E5;
|
||
--gray-300: #D4D4D4;
|
||
--gray-400: #A3A3A3;
|
||
--gray-500: #737373;
|
||
--gray-600: #525252;
|
||
--gray-700: #404040;
|
||
--gray-800: #262626;
|
||
--gray-900: #171717;
|
||
|
||
/* Semantic Colors */
|
||
--text-primary: #FFFFFF;
|
||
--text-secondary: rgba(255, 255, 255, 0.7);
|
||
--text-muted: rgba(255, 255, 255, 0.5);
|
||
|
||
/* Spacing Scale (8px base) */
|
||
--space-1: 4px;
|
||
--space-2: 8px;
|
||
--space-3: 12px;
|
||
--space-4: 16px;
|
||
--space-5: 20px;
|
||
--space-6: 24px;
|
||
--space-8: 32px;
|
||
--space-10: 40px;
|
||
--space-12: 48px;
|
||
--space-16: 64px;
|
||
--space-20: 80px;
|
||
--space-24: 96px;
|
||
--space-32: 128px;
|
||
|
||
/* Typography Scale */
|
||
--font-xs: 0.75rem; /* 12px */
|
||
--font-sm: 0.875rem; /* 14px */
|
||
--font-base: 1rem; /* 16px */
|
||
--font-lg: 1.125rem; /* 18px */
|
||
--font-xl: 1.25rem; /* 20px */
|
||
--font-2xl: 1.5rem; /* 24px */
|
||
--font-3xl: 1.875rem; /* 30px */
|
||
--font-4xl: 2.25rem; /* 36px */
|
||
--font-5xl: 3rem; /* 48px */
|
||
--font-6xl: 3.75rem; /* 60px */
|
||
--font-7xl: 4.5rem; /* 72px */
|
||
--font-8xl: 6rem; /* 96px */
|
||
--font-9xl: 8rem; /* 128px */
|
||
|
||
/* Font Family */
|
||
--font-primary: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
|
||
/* Transitions */
|
||
--transition-fast: 150ms ease;
|
||
--transition-normal: 300ms ease;
|
||
--transition-slow: 500ms ease;
|
||
--transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||
|
||
/* Shadows */
|
||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
|
||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
|
||
--shadow-gold: 0 0 30px rgba(255, 215, 0, 0.3);
|
||
--shadow-red: 0 0 30px rgba(229, 57, 53, 0.4);
|
||
|
||
/* Z-index Scale */
|
||
--z-base: 0;
|
||
--z-dropdown: 100;
|
||
--z-sticky: 200;
|
||
--z-fixed: 300;
|
||
--z-modal-backdrop: 400;
|
||
--z-modal: 500;
|
||
--z-popover: 600;
|
||
--z-tooltip: 700;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-primary);
|
||
background-color: var(--brand-black);
|
||
color: var(--text-primary);
|
||
line-height: 1.6;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* ===== Utility Classes ===== */
|
||
.container {
|
||
width: 100%;
|
||
max-width: 1280px;
|
||
margin: 0 auto;
|
||
padding: 0 var(--space-6);
|
||
}
|
||
|
||
.section {
|
||
position: relative;
|
||
padding: var(--space-24) 0;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: var(--font-4xl);
|
||
font-weight: 700;
|
||
text-align: center;
|
||
margin-bottom: var(--space-4);
|
||
background: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-gold-light) 50%, var(--brand-gold) 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.section-subtitle {
|
||
font-size: var(--font-lg);
|
||
color: var(--text-secondary);
|
||
text-align: center;
|
||
margin-bottom: var(--space-16);
|
||
}
|
||
|
||
/* ===== Buttons ===== */
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-2);
|
||
padding: var(--space-4) var(--space-8);
|
||
font-family: var(--font-primary);
|
||
font-size: var(--font-base);
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
border: none;
|
||
border-radius: var(--space-2);
|
||
cursor: pointer;
|
||
transition: all var(--transition-normal);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.btn::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
||
transition: left 0.5s ease;
|
||
}
|
||
|
||
.btn:hover::before {
|
||
left: 100%;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, var(--brand-red) 0%, #C62828 100%);
|
||
color: white;
|
||
box-shadow: var(--shadow-red);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 0 40px rgba(229, 57, 53, 0.6);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: transparent;
|
||
color: var(--brand-gold);
|
||
border: 2px solid var(--brand-gold);
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: var(--brand-gold);
|
||
color: var(--brand-black);
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-gold);
|
||
}
|
||
|
||
.btn-gold {
|
||
background: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-gold-light) 50%, var(--brand-gold) 100%);
|
||
color: var(--brand-black);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.btn-gold:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-gold);
|
||
}
|
||
|
||
/* ===== Navigation ===== */
|
||
.navbar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: var(--z-fixed);
|
||
padding: var(--space-4) 0;
|
||
background: rgba(10, 10, 10, 0.8);
|
||
backdrop-filter: blur(20px);
|
||
border-bottom: 1px solid rgba(255, 215, 0, 0.1);
|
||
transition: all var(--transition-normal);
|
||
}
|
||
|
||
.navbar.scrolled {
|
||
background: rgba(10, 10, 10, 0.95);
|
||
padding: var(--space-3) 0;
|
||
}
|
||
|
||
.navbar .container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
font-size: var(--font-xl);
|
||
font-weight: 700;
|
||
color: var(--brand-gold);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.logo-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-red) 100%);
|
||
border-radius: var(--space-2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: var(--font-lg);
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-8);
|
||
list-style: none;
|
||
}
|
||
|
||
.nav-links a {
|
||
color: var(--text-secondary);
|
||
text-decoration: none;
|
||
font-size: var(--font-sm);
|
||
font-weight: 500;
|
||
transition: color var(--transition-fast);
|
||
position: relative;
|
||
}
|
||
|
||
.nav-links a::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -4px;
|
||
left: 0;
|
||
width: 0;
|
||
height: 2px;
|
||
background: var(--brand-gold);
|
||
transition: width var(--transition-normal);
|
||
}
|
||
|
||
.nav-links a:hover {
|
||
color: var(--brand-gold);
|
||
}
|
||
|
||
.nav-links a:hover::after {
|
||
width: 100%;
|
||
}
|
||
|
||
.nav-cta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
/* Mobile Menu Toggle */
|
||
.menu-toggle {
|
||
display: none;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
cursor: pointer;
|
||
padding: var(--space-2);
|
||
}
|
||
|
||
.menu-toggle span {
|
||
width: 24px;
|
||
height: 2px;
|
||
background: var(--brand-gold);
|
||
transition: all var(--transition-normal);
|
||
}
|
||
|
||
/* ===== Hero Section ===== */
|
||
.hero {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
padding-top: 80px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-bg {
|
||
position: absolute;
|
||
inset: 0;
|
||
background:
|
||
radial-gradient(ellipse at 20% 50%, rgba(229, 57, 53, 0.15) 0%, transparent 50%),
|
||
radial-gradient(ellipse at 80% 50%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
|
||
radial-gradient(ellipse at 50% 100%, rgba(229, 57, 53, 0.1) 0%, transparent 40%);
|
||
z-index: 0;
|
||
}
|
||
|
||
.hero-grid {
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image:
|
||
linear-gradient(rgba(255, 215, 0, 0.03) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(255, 215, 0, 0.03) 1px, transparent 1px);
|
||
background-size: 60px 60px;
|
||
z-index: 1;
|
||
}
|
||
|
||
.hero-content {
|
||
position: relative;
|
||
z-index: 2;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--space-16);
|
||
align-items: center;
|
||
}
|
||
|
||
.hero-text {
|
||
max-width: 600px;
|
||
}
|
||
|
||
.hero-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
padding: var(--space-2) var(--space-4);
|
||
background: rgba(255, 215, 0, 0.1);
|
||
border: 1px solid rgba(255, 215, 0, 0.3);
|
||
border-radius: 100px;
|
||
font-size: var(--font-sm);
|
||
color: var(--brand-gold);
|
||
margin-bottom: var(--space-6);
|
||
animation: fadeInUp 0.6s ease forwards;
|
||
}
|
||
|
||
.hero-badge::before {
|
||
content: '';
|
||
width: 8px;
|
||
height: 8px;
|
||
background: var(--brand-red);
|
||
border-radius: 50%;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: clamp(var(--font-5xl), 5vw, var(--font-7xl));
|
||
font-weight: 900;
|
||
line-height: 1.1;
|
||
margin-bottom: var(--space-6);
|
||
animation: fadeInUp 0.6s ease 0.2s forwards;
|
||
opacity: 0;
|
||
}
|
||
|
||
.hero-title .highlight {
|
||
background: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-gold-light) 50%, var(--brand-red) 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.hero-desc {
|
||
font-size: var(--font-lg);
|
||
color: var(--text-secondary);
|
||
margin-bottom: var(--space-8);
|
||
line-height: 1.8;
|
||
animation: fadeInUp 0.6s ease 0.4s forwards;
|
||
opacity: 0;
|
||
}
|
||
|
||
.hero-actions {
|
||
display: flex;
|
||
gap: var(--space-4);
|
||
animation: fadeInUp 0.6s ease 0.6s forwards;
|
||
opacity: 0;
|
||
}
|
||
|
||
.hero-visual {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.hero-product {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: 500px;
|
||
aspect-ratio: 1;
|
||
background: radial-gradient(circle at center, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
animation: float 6s ease-in-out infinite;
|
||
}
|
||
|
||
.hero-product::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -20px;
|
||
border: 2px solid rgba(255, 215, 0, 0.2);
|
||
border-radius: 50%;
|
||
animation: rotate 20s linear infinite;
|
||
}
|
||
|
||
.hero-product::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -40px;
|
||
border: 1px dashed rgba(255, 215, 0, 0.1);
|
||
border-radius: 50%;
|
||
animation: rotate 30s linear infinite reverse;
|
||
}
|
||
|
||
.product-placeholder {
|
||
width: 80%;
|
||
height: 80%;
|
||
background: linear-gradient(135deg, var(--black-800) 0%, var(--black-700) 100%);
|
||
border-radius: var(--space-4);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 2px solid rgba(255, 215, 0, 0.3);
|
||
box-shadow:
|
||
0 0 60px rgba(255, 215, 0, 0.2),
|
||
inset 0 0 60px rgba(255, 215, 0, 0.05);
|
||
}
|
||
|
||
.product-placeholder .icon {
|
||
font-size: 80px;
|
||
color: var(--brand-gold);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.product-placeholder .text {
|
||
font-size: var(--font-2xl);
|
||
font-weight: 700;
|
||
color: var(--brand-gold);
|
||
}
|
||
|
||
.hero-stats {
|
||
position: absolute;
|
||
bottom: var(--space-8);
|
||
left: 0;
|
||
right: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: var(--space-16);
|
||
z-index: 2;
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
animation: fadeInUp 0.6s ease 0.8s forwards;
|
||
opacity: 0;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: var(--font-4xl);
|
||
font-weight: 700;
|
||
color: var(--brand-gold);
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: var(--font-sm);
|
||
color: var(--text-muted);
|
||
margin-top: var(--space-1);
|
||
}
|
||
|
||
/* ===== Products Section ===== */
|
||
.products {
|
||
background: linear-gradient(180deg, var(--brand-black) 0%, var(--black-800) 100%);
|
||
}
|
||
|
||
.products-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: var(--space-6);
|
||
}
|
||
|
||
.product-card {
|
||
position: relative;
|
||
background: linear-gradient(145deg, var(--black-700) 0%, var(--black-800) 100%);
|
||
border-radius: var(--space-4);
|
||
padding: var(--space-6);
|
||
border: 1px solid rgba(255, 215, 0, 0.1);
|
||
transition: all var(--transition-normal);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.product-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(135deg, transparent 0%, rgba(255, 215, 0, 0.05) 100%);
|
||
opacity: 0;
|
||
transition: opacity var(--transition-normal);
|
||
}
|
||
|
||
.product-card:hover {
|
||
transform: translateY(-8px);
|
||
border-color: rgba(255, 215, 0, 0.3);
|
||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), var(--shadow-gold);
|
||
}
|
||
|
||
.product-card:hover::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
.product-card.featured {
|
||
border-color: var(--brand-gold);
|
||
box-shadow: var(--shadow-gold);
|
||
}
|
||
|
||
.product-badge {
|
||
position: absolute;
|
||
top: var(--space-4);
|
||
right: var(--space-4);
|
||
padding: var(--space-1) var(--space-3);
|
||
background: var(--brand-red);
|
||
color: white;
|
||
font-size: var(--font-xs);
|
||
font-weight: 600;
|
||
border-radius: 100px;
|
||
}
|
||
|
||
.product-image {
|
||
width: 100%;
|
||
aspect-ratio: 1;
|
||
background: linear-gradient(135deg, var(--black-600) 0%, var(--black-700) 100%);
|
||
border-radius: var(--space-3);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: var(--space-4);
|
||
border: 1px solid rgba(255, 215, 0, 0.1);
|
||
}
|
||
|
||
.product-image .icon {
|
||
font-size: 48px;
|
||
color: var(--brand-gold);
|
||
}
|
||
|
||
.product-name {
|
||
font-size: var(--font-xl);
|
||
font-weight: 700;
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
.product-tagline {
|
||
font-size: var(--font-sm);
|
||
color: var(--text-muted);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.product-specs {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.spec-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
font-size: var(--font-sm);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.spec-item::before {
|
||
content: '';
|
||
width: 6px;
|
||
height: 6px;
|
||
background: var(--brand-gold);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.product-price {
|
||
font-size: var(--font-2xl);
|
||
font-weight: 700;
|
||
color: var(--brand-gold);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.product-price .unit {
|
||
font-size: var(--font-sm);
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* ===== Tech Section ===== */
|
||
.tech {
|
||
background: var(--black-900);
|
||
position: relative;
|
||
}
|
||
|
||
.tech-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: var(--space-6);
|
||
}
|
||
|
||
.tech-card {
|
||
background: linear-gradient(145deg, var(--black-800) 0%, var(--black-900) 100%);
|
||
border-radius: var(--space-4);
|
||
padding: var(--space-8);
|
||
border: 1px solid rgba(255, 215, 0, 0.1);
|
||
transition: all var(--transition-normal);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tech-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, var(--brand-gold), var(--brand-red));
|
||
transform: scaleX(0);
|
||
transition: transform var(--transition-normal);
|
||
}
|
||
|
||
.tech-card:hover {
|
||
transform: translateY(-4px);
|
||
border-color: rgba(255, 215, 0, 0.3);
|
||
}
|
||
|
||
.tech-card:hover::before {
|
||
transform: scaleX(1);
|
||
}
|
||
|
||
.tech-icon {
|
||
width: 64px;
|
||
height: 64px;
|
||
background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(229, 57, 53, 0.1) 100%);
|
||
border-radius: var(--space-3);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: var(--font-3xl);
|
||
margin-bottom: var(--space-6);
|
||
border: 1px solid rgba(255, 215, 0, 0.2);
|
||
}
|
||
|
||
.tech-title {
|
||
font-size: var(--font-xl);
|
||
font-weight: 600;
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
|
||
.tech-desc {
|
||
font-size: var(--font-sm);
|
||
color: var(--text-secondary);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* ===== Scene Section ===== */
|
||
.scene {
|
||
background: linear-gradient(180deg, var(--black-800) 0%, var(--brand-black) 100%);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.scene-showcase {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--space-8);
|
||
align-items: center;
|
||
}
|
||
|
||
.scene-visual {
|
||
position: relative;
|
||
border-radius: var(--space-4);
|
||
overflow: hidden;
|
||
aspect-ratio: 16/10;
|
||
background: linear-gradient(135deg, var(--black-700) 0%, var(--black-800) 100%);
|
||
border: 1px solid rgba(255, 215, 0, 0.2);
|
||
}
|
||
|
||
.scene-visual .placeholder {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background:
|
||
radial-gradient(ellipse at 30% 70%, rgba(229, 57, 53, 0.2) 0%, transparent 50%),
|
||
radial-gradient(ellipse at 70% 30%, rgba(255, 215, 0, 0.15) 0%, transparent 50%);
|
||
}
|
||
|
||
.scene-visual .placeholder .icon {
|
||
font-size: 64px;
|
||
color: var(--brand-gold);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.scene-visual .placeholder .text {
|
||
font-size: var(--font-lg);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.scene-content {
|
||
padding: var(--space-8);
|
||
}
|
||
|
||
.scene-title {
|
||
font-size: var(--font-3xl);
|
||
font-weight: 700;
|
||
margin-bottom: var(--space-6);
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.scene-features {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-4);
|
||
margin-bottom: var(--space-8);
|
||
}
|
||
|
||
.scene-feature {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.scene-feature-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
background: rgba(255, 215, 0, 0.1);
|
||
border-radius: var(--space-2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: var(--font-xl);
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.scene-feature-text h4 {
|
||
font-size: var(--font-base);
|
||
font-weight: 600;
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
|
||
.scene-feature-text p {
|
||
font-size: var(--font-sm);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* ===== Reviews Section ===== */
|
||
.reviews {
|
||
background: var(--brand-black);
|
||
}
|
||
|
||
.reviews-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: var(--space-6);
|
||
}
|
||
|
||
.review-card {
|
||
background: linear-gradient(145deg, var(--black-800) 0%, var(--black-900) 100%);
|
||
border-radius: var(--space-4);
|
||
padding: var(--space-6);
|
||
border: 1px solid rgba(255, 215, 0, 0.1);
|
||
transition: all var(--transition-normal);
|
||
}
|
||
|
||
.review-card:hover {
|
||
transform: translateY(-4px);
|
||
border-color: rgba(255, 215, 0, 0.2);
|
||
}
|
||
|
||
.review-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-4);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.review-avatar {
|
||
width: 56px;
|
||
height: 56px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-red) 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: var(--font-xl);
|
||
font-weight: 700;
|
||
color: var(--brand-black);
|
||
}
|
||
|
||
.review-meta {
|
||
flex: 1;
|
||
}
|
||
|
||
.review-name {
|
||
font-size: var(--font-base);
|
||
font-weight: 600;
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
|
||
.review-car {
|
||
font-size: var(--font-sm);
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.review-rating {
|
||
display: flex;
|
||
gap: var(--space-1);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.star {
|
||
color: var(--brand-gold);
|
||
font-size: var(--font-lg);
|
||
}
|
||
|
||
.review-text {
|
||
font-size: var(--font-sm);
|
||
color: var(--text-secondary);
|
||
line-height: 1.7;
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.review-product {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
padding: var(--space-1) var(--space-3);
|
||
background: rgba(255, 215, 0, 0.1);
|
||
border-radius: 100px;
|
||
font-size: var(--font-xs);
|
||
color: var(--brand-gold);
|
||
}
|
||
|
||
/* ===== Story Section ===== */
|
||
.story {
|
||
background: linear-gradient(180deg, var(--black-900) 0%, var(--black-800) 100%);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.story-content {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--space-16);
|
||
align-items: center;
|
||
}
|
||
|
||
.story-text {
|
||
max-width: 560px;
|
||
}
|
||
|
||
.story-label {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
font-size: var(--font-sm);
|
||
color: var(--brand-gold);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.story-label::before {
|
||
content: '';
|
||
width: 24px;
|
||
height: 2px;
|
||
background: var(--brand-gold);
|
||
}
|
||
|
||
.story-title {
|
||
font-size: clamp(var(--font-3xl), 4vw, var(--font-5xl));
|
||
font-weight: 700;
|
||
line-height: 1.2;
|
||
margin-bottom: var(--space-6);
|
||
}
|
||
|
||
.story-desc {
|
||
font-size: var(--font-lg);
|
||
color: var(--text-secondary);
|
||
line-height: 1.8;
|
||
margin-bottom: var(--space-8);
|
||
}
|
||
|
||
.story-highlights {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.story-highlight {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-4);
|
||
padding: var(--space-4);
|
||
background: rgba(255, 215, 0, 0.05);
|
||
border-radius: var(--space-3);
|
||
border: 1px solid rgba(255, 215, 0, 0.1);
|
||
}
|
||
|
||
.story-highlight-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
background: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-red) 100%);
|
||
border-radius: var(--space-2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: var(--font-xl);
|
||
}
|
||
|
||
.story-highlight-text {
|
||
font-size: var(--font-base);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.story-visual {
|
||
position: relative;
|
||
}
|
||
|
||
.story-image {
|
||
width: 100%;
|
||
aspect-ratio: 4/3;
|
||
background: linear-gradient(135deg, var(--black-700) 0%, var(--black-600) 100%);
|
||
border-radius: var(--space-4);
|
||
border: 2px solid rgba(255, 215, 0, 0.2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.story-image .placeholder {
|
||
text-align: center;
|
||
}
|
||
|
||
.story-image .placeholder .icon {
|
||
font-size: 80px;
|
||
color: var(--brand-gold);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.story-image .placeholder .text {
|
||
font-size: var(--font-xl);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* ===== Contact Section ===== */
|
||
.contact {
|
||
background: var(--brand-black);
|
||
position: relative;
|
||
}
|
||
|
||
.contact-wrapper {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--space-16);
|
||
}
|
||
|
||
.contact-info {
|
||
max-width: 480px;
|
||
}
|
||
|
||
.contact-title {
|
||
font-size: var(--font-3xl);
|
||
font-weight: 700;
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.contact-desc {
|
||
font-size: var(--font-lg);
|
||
color: var(--text-secondary);
|
||
margin-bottom: var(--space-8);
|
||
}
|
||
|
||
.contact-methods {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.contact-method {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-4);
|
||
padding: var(--space-4);
|
||
background: rgba(255, 215, 0, 0.05);
|
||
border-radius: var(--space-3);
|
||
border: 1px solid rgba(255, 215, 0, 0.1);
|
||
}
|
||
|
||
.contact-method-icon {
|
||
width: 48px;
|
||
height: 48px;
|
||
background: rgba(255, 215, 0, 0.1);
|
||
border-radius: var(--space-2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: var(--font-xl);
|
||
}
|
||
|
||
.contact-method-text h4 {
|
||
font-size: var(--font-sm);
|
||
color: var(--text-muted);
|
||
margin-bottom: var(--space-1);
|
||
}
|
||
|
||
.contact-method-text p {
|
||
font-size: var(--font-base);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.contact-form {
|
||
background: linear-gradient(145deg, var(--black-800) 0%, var(--black-900) 100%);
|
||
border-radius: var(--space-4);
|
||
padding: var(--space-8);
|
||
border: 1px solid rgba(255, 215, 0, 0.1);
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: var(--space-6);
|
||
}
|
||
|
||
.form-label {
|
||
display: block;
|
||
font-size: var(--font-sm);
|
||
font-weight: 500;
|
||
margin-bottom: var(--space-2);
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.form-input,
|
||
.form-select,
|
||
.form-textarea {
|
||
width: 100%;
|
||
padding: var(--space-4);
|
||
background: var(--black-700);
|
||
border: 1px solid rgba(255, 215, 0, 0.2);
|
||
border-radius: var(--space-2);
|
||
color: var(--text-primary);
|
||
font-family: var(--font-primary);
|
||
font-size: var(--font-base);
|
||
transition: all var(--transition-fast);
|
||
}
|
||
|
||
.form-input:focus,
|
||
.form-select:focus,
|
||
.form-textarea:focus {
|
||
outline: none;
|
||
border-color: var(--brand-gold);
|
||
box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
|
||
}
|
||
|
||
.form-textarea {
|
||
min-height: 120px;
|
||
resize: vertical;
|
||
}
|
||
|
||
.form-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.form-submit {
|
||
width: 100%;
|
||
padding: var(--space-4);
|
||
margin-top: var(--space-4);
|
||
}
|
||
|
||
/* ===== FAQ Section ===== */
|
||
.faq {
|
||
background: linear-gradient(180deg, var(--black-800) 0%, var(--brand-black) 100%);
|
||
}
|
||
|
||
.faq-list {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.faq-item {
|
||
background: linear-gradient(145deg, var(--black-800) 0%, var(--black-900) 100%);
|
||
border-radius: var(--space-3);
|
||
margin-bottom: var(--space-4);
|
||
border: 1px solid rgba(255, 215, 0, 0.1);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.faq-question {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: var(--space-5) var(--space-6);
|
||
cursor: pointer;
|
||
transition: all var(--transition-fast);
|
||
}
|
||
|
||
.faq-question:hover {
|
||
background: rgba(255, 215, 0, 0.05);
|
||
}
|
||
|
||
.faq-question h3 {
|
||
font-size: var(--font-base);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.faq-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: transform var(--transition-normal);
|
||
color: var(--brand-gold);
|
||
}
|
||
|
||
.faq-item.active .faq-icon {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.faq-answer {
|
||
padding: 0 var(--space-6);
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
transition: all var(--transition-normal);
|
||
}
|
||
|
||
.faq-item.active .faq-answer {
|
||
padding: 0 var(--space-6) var(--space-6);
|
||
max-height: 500px;
|
||
}
|
||
|
||
.faq-answer p {
|
||
font-size: var(--font-sm);
|
||
color: var(--text-secondary);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* ===== Footer ===== */
|
||
.footer {
|
||
background: var(--black-900);
|
||
border-top: 1px solid rgba(255, 215, 0, 0.1);
|
||
padding: var(--space-16) 0 var(--space-8);
|
||
}
|
||
|
||
.footer-grid {
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||
gap: var(--space-12);
|
||
margin-bottom: var(--space-12);
|
||
}
|
||
|
||
.footer-brand {
|
||
max-width: 300px;
|
||
}
|
||
|
||
.footer-logo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
font-size: var(--font-xl);
|
||
font-weight: 700;
|
||
color: var(--brand-gold);
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.footer-desc {
|
||
font-size: var(--font-sm);
|
||
color: var(--text-muted);
|
||
line-height: 1.7;
|
||
margin-bottom: var(--space-6);
|
||
}
|
||
|
||
.footer-social {
|
||
display: flex;
|
||
gap: var(--space-3);
|
||
}
|
||
|
||
.social-link {
|
||
width: 40px;
|
||
height: 40px;
|
||
background: rgba(255, 215, 0, 0.1);
|
||
border-radius: var(--space-2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: var(--brand-gold);
|
||
text-decoration: none;
|
||
transition: all var(--transition-fast);
|
||
}
|
||
|
||
.social-link:hover {
|
||
background: var(--brand-gold);
|
||
color: var(--brand-black);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.footer-title {
|
||
font-size: var(--font-sm);
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--space-4);
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.footer-links {
|
||
list-style: none;
|
||
}
|
||
|
||
.footer-links li {
|
||
margin-bottom: var(--space-3);
|
||
}
|
||
|
||
.footer-links a {
|
||
color: var(--text-muted);
|
||
text-decoration: none;
|
||
font-size: var(--font-sm);
|
||
transition: color var(--transition-fast);
|
||
}
|
||
|
||
.footer-links a:hover {
|
||
color: var(--brand-gold);
|
||
}
|
||
|
||
.footer-bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-top: var(--space-8);
|
||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.footer-copyright {
|
||
font-size: var(--font-sm);
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.footer-legal {
|
||
display: flex;
|
||
gap: var(--space-6);
|
||
}
|
||
|
||
.footer-legal a {
|
||
color: var(--text-muted);
|
||
text-decoration: none;
|
||
font-size: var(--font-sm);
|
||
transition: color var(--transition-fast);
|
||
}
|
||
|
||
.footer-legal a:hover {
|
||
color: var(--brand-gold);
|
||
}
|
||
|
||
/* ===== Animations ===== */
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes float {
|
||
0%, 100% {
|
||
transform: translateY(0);
|
||
}
|
||
50% {
|
||
transform: translateY(-20px);
|
||
}
|
||
}
|
||
|
||
@keyframes rotate {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
opacity: 0.5;
|
||
transform: scale(1.2);
|
||
}
|
||
}
|
||
|
||
@keyframes glow {
|
||
0%, 100% {
|
||
box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
|
||
}
|
||
50% {
|
||
box-shadow: 0 0 40px rgba(255, 215, 0, 0.5);
|
||
}
|
||
}
|
||
|
||
/* ===== Scroll Reveal ===== */
|
||
.reveal {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: all 0.6s ease;
|
||
}
|
||
|
||
.reveal.active {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* ===== Responsive Design ===== */
|
||
@media (max-width: 1024px) {
|
||
.hero-content {
|
||
grid-template-columns: 1fr;
|
||
text-align: center;
|
||
}
|
||
|
||
.hero-text {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.hero-actions {
|
||
justify-content: center;
|
||
}
|
||
|
||
.hero-product {
|
||
max-width: 400px;
|
||
}
|
||
|
||
.products-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.tech-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.reviews-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
.story-content {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.contact-wrapper {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.footer-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.nav-links {
|
||
display: none;
|
||
}
|
||
|
||
.menu-toggle {
|
||
display: flex;
|
||
}
|
||
|
||
.hero-stats {
|
||
flex-direction: column;
|
||
gap: var(--space-6);
|
||
}
|
||
|
||
.products-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.tech-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.reviews-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.scene-showcase {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.form-row {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.footer-grid {
|
||
grid-template-columns: 1fr;
|
||
text-align: center;
|
||
}
|
||
|
||
.footer-brand {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.footer-social {
|
||
justify-content: center;
|
||
}
|
||
|
||
.footer-bottom {
|
||
flex-direction: column;
|
||
gap: var(--space-4);
|
||
text-align: center;
|
||
}
|
||
|
||
.section {
|
||
padding: var(--space-16) 0;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: var(--font-3xl);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.hero-title {
|
||
font-size: var(--font-4xl);
|
||
}
|
||
|
||
.hero-actions {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.btn {
|
||
width: 100%;
|
||
}
|
||
|
||
.stat-value {
|
||
font-size: var(--font-3xl);
|
||
}
|
||
}
|
||
|
||
/* ===== Accessibility ===== */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*, *::before, *::after {
|
||
animation-duration: 0.01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.01ms !important;
|
||
}
|
||
}
|
||
|
||
/* Focus styles */
|
||
:focus-visible {
|
||
outline: 2px solid var(--brand-gold);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* High contrast mode support */
|
||
@media (prefers-contrast: high) {
|
||
.product-card,
|
||
.tech-card,
|
||
.review-card,
|
||
.faq-item,
|
||
.contact-form {
|
||
border-width: 2px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Navigation -->
|
||
<nav class="navbar" id="navbar">
|
||
<div class="container">
|
||
<a href="#" class="logo">
|
||
<div class="logo-icon">狮</div>
|
||
<span>卡特光醒狮</span>
|
||
</a>
|
||
<ul class="nav-links">
|
||
<li><a href="#products">产品系列</a></li>
|
||
<li><a href="#tech">核心技术</a></li>
|
||
<li><a href="#scene">场景体验</a></li>
|
||
<li><a href="#reviews">用户评价</a></li>
|
||
<li><a href="#story">品牌故事</a></li>
|
||
<li><a href="#faq">常见问题</a></li>
|
||
</ul>
|
||
<div class="nav-cta">
|
||
<a href="#contact" class="btn btn-primary">立即预约</a>
|
||
<div class="menu-toggle" id="menuToggle">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero Section -->
|
||
<section class="hero" id="hero">
|
||
<div class="hero-bg"></div>
|
||
<div class="hero-grid"></div>
|
||
<div class="container">
|
||
<div class="hero-content">
|
||
<div class="hero-text">
|
||
<div class="hero-badge">国潮觉醒 · 照亮前路</div>
|
||
<h1 class="hero-title">
|
||
<span class="highlight">醒狮</span>系列透镜<br>
|
||
为年轻而生
|
||
</h1>
|
||
<p class="hero-desc">
|
||
融合东方醒狮精神与现代光学科技，卡特光醒狮系列为Z世代车主打造专属夜间驾驶体验。狮王、狮魂、狮影、狮跃四款力作，每一款都是国潮觉醒的见证。
|
||
</p>
|
||
<div class="hero-actions">
|
||
<a href="#products" class="btn btn-primary">探索产品</a>
|
||
<a href="#contact" class="btn btn-secondary">预约试驾</a>
|
||
</div>
|
||
</div>
|
||
<div class="hero-visual">
|
||
<div class="hero-product">
|
||
<div class="product-placeholder">
|
||
<div class="icon">🔦</div>
|
||
<div class="text">醒狮系列透镜</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hero-stats">
|
||
<div class="stat-item">
|
||
<div class="stat-value">50万+</div>
|
||
<div class="stat-label">车主选择</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-value">99.8%</div>
|
||
<div class="stat-label">好评率</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-value">3年</div>
|
||
<div class="stat-label">质保承诺</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Products Section -->
|
||
<section class="section products" id="products">
|
||
<div class="container">
|
||
<h2 class="section-title reveal">产品矩阵</h2>
|
||
<p class="section-subtitle reveal">四款力作，满足不同驾驶需求</p>
|
||
<div class="products-grid">
|
||
<!-- 狮王 -->
|
||
<div class="product-card featured reveal">
|
||
<span class="product-badge">旗舰</span>
|
||
<div class="product-image">
|
||
<div class="icon">👑</div>
|
||
</div>
|
||
<h3 class="product-name">狮王</h3>
|
||
<p class="product-tagline">王者风范，睥睨天下</p>
|
||
<div class="product-specs">
|
||
<div class="spec-item">6000K 色温</div>
|
||
<div class="spec-item">12000lm 光通量</div>
|
||
<div class="spec-item">500米远射</div>
|
||
<div class="spec-item">智能温控系统</div>
|
||
</div>
|
||
<div class="product-price">¥2,999 <span class="unit">起</span></div>
|
||
<a href="#contact" class="btn btn-gold">了解详情</a>
|
||
</div>
|
||
|
||
<!-- 狮魂 -->
|
||
<div class="product-card reveal">
|
||
<div class="product-image">
|
||
<div class="icon">🔥</div>
|
||
</div>
|
||
<h3 class="product-name">狮魂</h3>
|
||
<p class="product-tagline">热血澎湃，激情驾驭</p>
|
||
<div class="product-specs">
|
||
<div class="spec-item">5700K 色温</div>
|
||
<div class="spec-item">10000lm 光通量</div>
|
||
<div class="spec-item">400米远射</div>
|
||
<div class="spec-item">运动模式切换</div>
|
||
</div>
|
||
<div class="product-price">¥2,499 <span class="unit">起</span></div>
|
||
<a href="#contact" class="btn btn-secondary">了解详情</a>
|
||
</div>
|
||
|
||
<!-- 狮影 -->
|
||
<div class="product-card reveal">
|
||
<div class="product-image">
|
||
<div class="icon">✨</div>
|
||
</div>
|
||
<h3 class="product-name">狮影</h3>
|
||
<p class="product-tagline">灵动如影，优雅从容</p>
|
||
<div class="product-specs">
|
||
<div class="spec-item">5500K 色温</div>
|
||
<div class="spec-item">8500lm 光通量</div>
|
||
<div class="spec-item">350米远射</div>
|
||
<div class="spec-item">自适应光型</div>
|
||
</div>
|
||
<div class="product-price">¥1,999 <span class="unit">起</span></div>
|
||
<a href="#contact" class="btn btn-secondary">了解详情</a>
|
||
</div>
|
||
|
||
<!-- 狮跃 -->
|
||
<div class="product-card reveal">
|
||
<div class="product-image">
|
||
<div class="icon">⚡</div>
|
||
</div>
|
||
<h3 class="product-name">狮跃</h3>
|
||
<p class="product-tagline">跃动青春，活力无限</p>
|
||
<div class="product-specs">
|
||
<div class="spec-item">5300K 色温</div>
|
||
<div class="spec-item">7200lm 光通量</div>
|
||
<div class="spec-item">300米远射</div>
|
||
<div class="spec-item">快速启动技术</div>
|
||
</div>
|
||
<div class="product-price">¥1,499 <span class="unit">起</span></div>
|
||
<a href="#contact" class="btn btn-secondary">了解详情</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Tech Section -->
|
||
<section class="section tech" id="tech">
|
||
<div class="container">
|
||
<h2 class="section-title reveal">六大核心技术</h2>
|
||
<p class="section-subtitle reveal">国潮科技，引领行业标杆</p>
|
||
<div class="tech-grid">
|
||
<div class="tech-card reveal">
|
||
<div class="tech-icon">🔬</div>
|
||
<h3 class="tech-title">光学矩阵技术</h3>
|
||
<p class="tech-desc">采用精密光学矩阵设计，实现光束均匀分布，消除暗区，提升夜间视野清晰度达40%。</p>
|
||
</div>
|
||
<div class="tech-card reveal">
|
||
<div class="tech-icon">🌡️</div>
|
||
<h3 class="tech-title">智能温控系统</h3>
|
||
<p class="tech-desc">内置温度传感器与散热风扇，实时监测并调节工作温度，确保长时间稳定输出。</p>
|
||
</div>
|
||
<div class="tech-card reveal">
|
||
<div class="tech-icon">💎</div>
|
||
<h3 class="tech-title">蓝宝石透镜</h3>
|
||
<p class="tech-desc">采用航空级蓝宝石玻璃，硬度仅次于钻石，抗刮耐磨，透光率高达99.9%。</p>
|
||
</div>
|
||
<div class="tech-card reveal">
|
||
<div class="tech-icon">⚡</div>
|
||
<h3 class="tech-title">瞬启技术</h3>
|
||
<p class="tech-desc">0.1秒极速启动，无需预热，即开即亮，让每一次出发都无需等待。</p>
|
||
</div>
|
||
<div class="tech-card reveal">
|
||
<div class="tech-icon">🎯</div>
|
||
<h3 class="tech-title">精准光型控制</h3>
|
||
<p class="tech-desc">符合国标光型要求，切线清晰，不晃对向车辆，文明用光，安全同行。</p>
|
||
</div>
|
||
<div class="tech-card reveal">
|
||
<div class="tech-icon">🛡️</div>
|
||
<h3 class="tech-title">IP68级防护</h3>
|
||
<p class="tech-desc">完全防尘防水设计，可承受1.5米水深浸泡，无惧恶劣天气挑战。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Scene Section -->
|
||
<section class="section scene" id="scene">
|
||
<div class="container">
|
||
<div class="scene-showcase">
|
||
<div class="scene-visual reveal">
|
||
<div class="placeholder">
|
||
<div class="icon">🌙</div>
|
||
<div class="text">夜间行车场景展示</div>
|
||
</div>
|
||
</div>
|
||
<div class="scene-content reveal">
|
||
<h2 class="scene-title">
|
||
夜间驾驶<br>
|
||
<span style="color: var(--brand-gold);">从此不同</span>
|
||
</h2>
|
||
<div class="scene-features">
|
||
<div class="scene-feature">
|
||
<div class="scene-feature-icon">🛣️</div>
|
||
<div class="scene-feature-text">
|
||
<h4>高速公路</h4>
|
||
<p>500米超远照射，提前发现路况，高速行驶更安心</p>
|
||
</div>
|
||
</div>
|
||
<div class="scene-feature">
|
||
<div class="scene-feature-icon">🏔️</div>
|
||
<div class="scene-feature-text">
|
||
<h4>山路弯道</h4>
|
||
<p>自适应光型随动转向，弯道照明无死角</p>
|
||
</div>
|
||
</div>
|
||
<div class="scene-feature">
|
||
<div class="scene-feature-icon">🏙️</div>
|
||
<div class="scene-feature-text">
|
||
<h4>城市通勤</h4>
|
||
<p>精准切线不晃眼，文明用光，安全同行</p>
|
||
</div>
|
||
</div>
|
||
<div class="scene-feature">
|
||
<div class="scene-feature-icon">🌧️</div>
|
||
<div class="scene-feature-text">
|
||
<h4>雨雾天气</h4>
|
||
<p>穿透力增强模式，恶劣天气依然清晰可见</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a href="#contact" class="btn btn-primary">预约试驾体验</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Reviews Section -->
|
||
<section class="section reviews" id="reviews">
|
||
<div class="container">
|
||
<h2 class="section-title reveal">车友真实评价</h2>
|
||
<p class="section-subtitle reveal">听听他们怎么说</p>
|
||
<div class="reviews-grid">
|
||
<div class="review-card reveal">
|
||
<div class="review-header">
|
||
<div class="review-avatar">李</div>
|
||
<div class="review-meta">
|
||
<div class="review-name">李先生</div>
|
||
<div class="review-car">本田思域 · 狮魂版</div>
|
||
</div>
|
||
</div>
|
||
<div class="review-rating">
|
||
<span class="star">★</span>
|
||
<span class="star">★</span>
|
||
<span class="star">★</span>
|
||
<span class="star">★</span>
|
||
<span class="star">★</span>
|
||
</div>
|
||
<p class="review-text">
|
||
作为一个经常跑夜路的车主，狮魂真的让我惊艳。光线均匀不刺眼，远光照射距离很远，高速上能提前看到路况。安装也很方便，师傅半小时搞定。
|
||
</p>
|
||
<span class="review-product">狮魂系列</span>
|
||
</div>
|
||
|
||
<div class="review-card reveal">
|
||
<div class="review-header">
|
||
<div class="review-avatar">王</div>
|
||
<div class="review-meta">
|
||
<div class="review-name">王小姐</div>
|
||
<div class="review-car">宝马3系 · 狮王版</div>
|
||
</div>
|
||
</div>
|
||
<div class="review-rating">
|
||
<span class="star">★</span>
|
||
<span class="star">★</span>
|
||
<span class="star">★</span>
|
||
<span class="star">★</span>
|
||
<span class="star">★</span>
|
||
</div>
|
||
<p class="review-text">
|
||
狮王的外观设计太帅了！金色元素和国潮风格很符合我的审美。亮度提升明显，晚上开车 confidence 满满。客服也很专业，推荐适合我车型的版本。
|
||
</p>
|
||
<span class="review-product">狮王系列</span>
|
||
</div>
|
||
|
||
<div class="review-card reveal">
|
||
<div class="review-header">
|
||
<div class="review-avatar">张</div>
|
||
<div class="review-meta">
|
||
<div class="review-name">张先生</div>
|
||
<div class="review-car">丰田凯美瑞 · 狮影版</div>
|
||
</div>
|
||
</div>
|
||
<div class="review-rating">
|
||
<span class="star">★</span>
|
||
<span class="star">★</span>
|
||
<span class="star">★</span>
|
||
<span class="star">★</span>
|
||
<span class="star">★</span>
|
||
</div>
|
||
<p class="review-text">
|
||
性价比很高的一款产品。自适应光型在会车时自动调节，不会晃到对面司机，这点很赞。用了半年多，质量稳定没出过问题。
|
||
</p>
|
||
<span class="review-product">狮影系列</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Story Section -->
|
||
<section class="section story" id="story">
|
||
<div class="container">
|
||
<div class="story-content">
|
||
<div class="story-text reveal">
|
||
<div class="story-label">品牌故事</div>
|
||
<h2 class="story-title">
|
||
国潮觉醒<br>
|
||
<span style="color: var(--brand-gold);">照亮东方</span>
|
||
</h2>
|
||
<p class="story-desc">
|
||
卡特光醒狮系列的诞生，源于对传统文化的致敬与对年轻世代需求的洞察。醒狮，作为中华文化的象征，代表着勇气、力量与觉醒。我们将这份精神注入每一款产品，用现代科技诠释东方美学。
|
||
</p>
|
||
<div class="story-highlights">
|
||
<div class="story-highlight">
|
||
<div class="story-highlight-icon">🏆</div>
|
||
<div class="story-highlight-text">2024年红点设计奖得主</div>
|
||
</div>
|
||
<div class="story-highlight">
|
||
<div class="story-highlight-icon">🔬</div>
|
||
<div class="story-highlight-text">50+项专利技术积累</div>
|
||
</div>
|
||
<div class="story-highlight">
|
||
<div class="story-highlight-icon">🌍</div>
|
||
<div class="story-highlight-text">服务全球50万+车主</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="story-visual reveal">
|
||
<div class="story-image">
|
||
<div class="placeholder">
|
||
<div class="icon">🦁</div>
|
||
<div class="text">醒狮精神 · 国潮觉醒</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Contact Section -->
|
||
<section class="section contact" id="contact">
|
||
<div class="container">
|
||
<div class="contact-wrapper">
|
||
<div class="contact-info reveal">
|
||
<h2 class="contact-title">预约试驾体验</h2>
|
||
<p class="contact-desc">
|
||
留下您的联系方式，我们的专业顾问将在24小时内与您联系，为您安排最近的试驾体验点。
|
||
</p>
|
||
<div class="contact-methods">
|
||
<div class="contact-method">
|
||
<div class="contact-method-icon">📞</div>
|
||
<div class="contact-method-text">
|
||
<h4>咨询热线</h4>
|
||
<p>400-888-9999</p>
|
||
</div>
|
||
</div>
|
||
<div class="contact-method">
|
||
<div class="contact-method-icon">📧</div>
|
||
<div class="contact-method-text">
|
||
<h4>邮箱</h4>
|
||
<p>contact@gok1.cn</p>
|
||
</div>
|
||
</div>
|
||
<div class="contact-method">
|
||
<div class="contact-method-icon">📍</div>
|
||
<div class="contact-method-text">
|
||
<h4>总部地址</h4>
|
||
<p>广东省深圳市南山区科技园</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="contact-form reveal">
|
||
<form id="contactForm">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label" for="name">姓名 *</label>
|
||
<input type="text" id="name" class="form-input" placeholder="请输入您的姓名" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="phone">手机号 *</label>
|
||
<input type="tel" id="phone" class="form-input" placeholder="请输入您的手机号" required>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="car">车型</label>
|
||
<input type="text" id="car" class="form-input" placeholder="请输入您的车型（选填）">
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="product">感兴趣的产品</label>
|
||
<select id="product" class="form-select">
|
||
<option value="">请选择产品</option>
|
||
<option value="shiwang">狮王 - 旗舰版</option>
|
||
<option value="shihun">狮魂 - 运动版</option>
|
||
<option value="shiying">狮影 - 优雅版</option>
|
||
<option value="shiyue">狮跃 - 青春版</option>
|
||
<option value="undecided">暂未决定，需要咨询</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" for="message">留言</label>
|
||
<textarea id="message" class="form-textarea" placeholder="请输入您的留言或问题（选填）"></textarea>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary form-submit">提交预约</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FAQ Section -->
|
||
<section class="section faq" id="faq">
|
||
<div class="container">
|
||
<h2 class="section-title reveal">常见问题</h2>
|
||
<p class="section-subtitle reveal">为您解答关于产品的疑惑</p>
|
||
<div class="faq-list">
|
||
<div class="faq-item reveal">
|
||
<div class="faq-question">
|
||
<h3>醒狮系列透镜适用于哪些车型？</h3>
|
||
<div class="faq-icon">▼</div>
|
||
</div>
|
||
<div class="faq-answer">
|
||
<p>醒狮系列透镜适配市面上90%以上的车型，包括轿车、SUV、MPV等。具体适配情况请咨询我们的客服，提供您的车型年份和配置，我们将为您确认最佳安装方案。</p>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item reveal">
|
||
<div class="faq-question">
|
||
<h3>安装需要多长时间？会影响原车线路吗？</h3>
|
||
<div class="faq-icon">▼</div>
|
||
</div>
|
||
<div class="faq-answer">
|
||
<p>专业师傅安装通常需要1-2小时。我们采用无损安装方案，使用专用转接线束，不破坏原车线路，不影响车辆质保。安装后可随时恢复原车状态。</p>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item reveal">
|
||
<div class="faq-question">
|
||
<h3>产品质保政策是怎样的？</h3>
|
||
<div class="faq-icon">▼</div>
|
||
</div>
|
||
<div class="faq-answer">
|
||
<p>醒狮系列提供3年质保服务，质保期内出现非人为质量问题免费换新。我们还提供终身技术支持，任何使用问题都可以联系我们的售后团队。</p>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item reveal">
|
||
<div class="faq-question">
|
||
<h3>改装透镜会影响年检吗？</h3>
|
||
<div class="faq-icon">▼</div>
|
||
</div>
|
||
<div class="faq-answer">
|
||
<p>醒狮系列严格遵循国家标准设计，光型、色温、亮度均符合法规要求。安装后不会影响车辆年检，您可以放心使用。</p>
|
||
</div>
|
||
</div>
|
||
<div class="faq-item reveal">
|
||
<div class="faq-question">
|
||
<h3>四款产品有什么区别？我该如何选择？</h3>
|
||
<div class="faq-icon">▼</div>
|
||
</div>
|
||
<div class="faq-answer">
|
||
<p>狮王是旗舰款，亮度最高、功能最全，适合追求极致体验的车主；狮魂主打运动风格，适合年轻用户；狮影注重优雅设计和自适应功能；狮跃是入门款，性价比高。您可以根据预算和需求选择，也可以预约试驾对比体验。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer-grid">
|
||
<div class="footer-brand">
|
||
<div class="footer-logo">
|
||
<div class="logo-icon">狮</div>
|
||
<span>卡特光醒狮</span>
|
||
</div>
|
||
<p class="footer-desc">
|
||
国潮觉醒，照亮前路。卡特光醒狮系列，为Z世代车主打造的专属透镜品牌，融合东方美学与现代科技。
|
||
</p>
|
||
<div class="footer-social">
|
||
<a href="#" class="social-link" title="微信">微</a>
|
||
<a href="#" class="social-link" title="微博">博</a>
|
||
<a href="#" class="social-link" title="抖音">抖</a>
|
||
<a href="#" class="social-link" title="小红书">红</a>
|
||
</div>
|
||
</div>
|
||
<div class="footer-column">
|
||
<h4 class="footer-title">产品系列</h4>
|
||
<ul class="footer-links">
|
||
<li><a href="#products">狮王 · 旗舰版</a></li>
|
||
<li><a href="#products">狮魂 · 运动版</a></li>
|
||
<li><a href="#products">狮影 · 优雅版</a></li>
|
||
<li><a href="#products">狮跃 · 青春版</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-column">
|
||
<h4 class="footer-title">服务支持</h4>
|
||
<ul class="footer-links">
|
||
<li><a href="#faq">常见问题</a></li>
|
||
<li><a href="#contact">预约试驾</a></li>
|
||
<li><a href="#">售后政策</a></li>
|
||
<li><a href="#">安装指南</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-column">
|
||
<h4 class="footer-title">关于我们</h4>
|
||
<ul class="footer-links">
|
||
<li><a href="#story">品牌故事</a></li>
|
||
<li><a href="#">新闻动态</a></li>
|
||
<li><a href="#">加入我们</a></li>
|
||
<li><a href="#">联系方式</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<p class="footer-copyright">
|
||
© 2024 卡特光醒狮系列. All rights reserved. | 域名: lions.c.gok1.cn
|
||
</p>
|
||
<div class="footer-legal">
|
||
<a href="#">隐私政策</a>
|
||
<a href="#">用户协议</a>
|
||
<a href="#">网站地图</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- JavaScript -->
|
||
<script>
|
||
// Navbar scroll effect
|
||
const navbar = document.getElementById('navbar');
|
||
window.addEventListener('scroll', () => {
|
||
if (window.scrollY > 50) {
|
||
navbar.classList.add('scrolled');
|
||
} else {
|
||
navbar.classList.remove('scrolled');
|
||
}
|
||
});
|
||
|
||
// Scroll reveal animation
|
||
const revealElements = document.querySelectorAll('.reveal');
|
||
const revealObserver = new IntersectionObserver((entries) => {
|
||
entries.forEach((entry, index) => {
|
||
if (entry.isIntersecting) {
|
||
setTimeout(() => {
|
||
entry.target.classList.add('active');
|
||
}, index * 100);
|
||
revealObserver.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, {
|
||
threshold: 0.1,
|
||
rootMargin: '0px 0px -50px 0px'
|
||
});
|
||
|
||
revealElements.forEach(el => revealObserver.observe(el));
|
||
|
||
// FAQ accordion
|
||
const faqItems = document.querySelectorAll('.faq-item');
|
||
faqItems.forEach(item => {
|
||
const question = item.querySelector('.faq-question');
|
||
question.addEventListener('click', () => {
|
||
const isActive = item.classList.contains('active');
|
||
|
||
// Close all items
|
||
faqItems.forEach(i => i.classList.remove('active'));
|
||
|
||
// Open clicked item if it wasn't active
|
||
if (!isActive) {
|
||
item.classList.add('active');
|
||
}
|
||
});
|
||
});
|
||
|
||
// Form submission
|
||
const contactForm = document.getElementById('contactForm');
|
||
contactForm.addEventListener('submit', (e) => {
|
||
e.preventDefault();
|
||
|
||
// Get form data
|
||
const formData = {
|
||
name: document.getElementById('name').value,
|
||
phone: document.getElementById('phone').value,
|
||
car: document.getElementById('car').value,
|
||
product: document.getElementById('product').value,
|
||
message: document.getElementById('message').value
|
||
};
|
||
|
||
// Show success message (in production, send to server)
|
||
alert('感谢您的预约！我们的顾问将在24小时内与您联系。');
|
||
contactForm.reset();
|
||
});
|
||
|
||
// Smooth scroll for navigation links
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'start'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// Mobile menu toggle (basic implementation)
|
||
const menuToggle = document.getElementById('menuToggle');
|
||
menuToggle.addEventListener('click', () => {
|
||
alert('移动端菜单功能需要进一步开发');
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|