/* Reset and Base Styles */
/*
* Fonts: Please add these to your HTML section:
*
*
*
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
color-scheme: light;
/* Ultra-Modern Gradients - Tech Leaders 2025 */
--gradient-primary: linear-gradient(135deg, #0c4a6e 0%, #0891b2 50%, #06b6d4 100%);
--gradient-secondary: linear-gradient(135deg, #0e7490 0%, #0369a1 100%);
--gradient-tertiary: linear-gradient(135deg, #155e75 0%, #164e63 100%);
--gradient-warm: linear-gradient(135deg, #0891b2 0%, #0d9488 50%, #059669 100%);
--gradient-cool: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%);
--gradient-sunset: linear-gradient(135deg, #0c4a6e 0%, #0891b2 50%, #06b6d4 100%);
--gradient-ocean: linear-gradient(135deg, #164e63 0%, #0891b2 100%);
--gradient-sky: linear-gradient(135deg, #67e8f9 0%, #22d3ee 100%);
--gradient-mesh: radial-gradient(at 27% 37%, rgba(8, 145, 178, 0.08) 0px, transparent 50%),
radial-gradient(at 97% 21%, rgba(6, 182, 212, 0.08) 0px, transparent 50%),
radial-gradient(at 52% 99%, rgba(34, 211, 238, 0.08) 0px, transparent 50%),
radial-gradient(at 10% 29%, rgba(14, 116, 144, 0.08) 0px, transparent 50%),
radial-gradient(at 97% 96%, rgba(5, 150, 105, 0.08) 0px, transparent 50%),
radial-gradient(at 33% 50%, rgba(12, 74, 110, 0.08) 0px, transparent 50%);
/* Premium Color System */
--ig-purple: #0891b2;
--ig-pink: #0d9488;
--ig-blue: #06b6d4;
--ig-coral: #0ea5e9;
--gradient-instagram: linear-gradient(135deg, #0c4a6e 0%, #0891b2 45%, #0d9488 70%, #06b6d4 100%);
--gradient-glass: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%);
/* Light theme surfaces */
--bg-primary: #ffffff;
--bg-secondary: #f8fafc;
--bg-tertiary: #f1f5f9;
--bg-elevated: rgba(255, 255, 255, 0.9);
--bg-overlay: rgba(15, 23, 42, 0.5);
--bg-gradient: linear-gradient(180deg, #ffffff 0%, #f8fafc 65%, #f1f5f9 100%);
--bg-mesh: var(--gradient-mesh);
/* Typography colors */
--text-primary: #0f172a;
--text-secondary: #334155;
--text-tertiary: #64748b;
--text-gradient: var(--gradient-instagram);
/* Surfaces */
--card-bg: rgba(255, 255, 255, 0.85);
--card-border: rgba(6, 182, 212, 0.08);
--card-shadow: 0 8px 32px rgba(6, 182, 212, 0.08);
--card-shadow-hover: 0 24px 64px rgba(6, 182, 212, 0.15), 0 0 1px rgba(6, 182, 212, 0.2);
--card-hover: rgba(255, 255, 255, 0.95);
--card-border-strong: rgba(8, 145, 178, 0.15);
/* Accents */
--accent-primary: #0891b2;
--accent-secondary: #0d9488;
--accent-success: #059669;
--accent-warning: #f97316;
--accent-info: #06b6d4;
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 3rem;
--spacing-xl: 5rem;
/* Typography */
--font-primary: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
/* Border Radius */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 18px;
--radius-xl: 24px;
}
/* Dark Theme - 夜间模式适配 */
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
/* Unified Dark Surfaces - Deep Teal/Slate */
--bg-primary: #0a0f14;
--bg-secondary: #0f1419;
--bg-tertiary: #1a1f24;
--bg-elevated: rgba(15, 20, 25, 0.9);
--bg-overlay: rgba(10, 15, 20, 0.8);
--bg-gradient: linear-gradient(180deg, #0a0f14 0%, #0f1419 55%, #1a1f24 100%);
--bg-mesh: radial-gradient(at 27% 37%, rgba(8, 145, 178, 0.12) 0px, transparent 50%),
radial-gradient(at 97% 21%, rgba(6, 182, 212, 0.12) 0px, transparent 50%),
radial-gradient(at 52% 99%, rgba(5, 150, 105, 0.12) 0px, transparent 50%),
radial-gradient(at 10% 29%, rgba(20, 184, 166, 0.12) 0px, transparent 50%),
radial-gradient(at 97% 96%, rgba(34, 211, 238, 0.12) 0px, transparent 50%),
radial-gradient(at 33% 50%, rgba(14, 165, 233, 0.12) 0px, transparent 50%);
/* Typography */
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-tertiary: #64748b;
--text-gradient: var(--gradient-instagram);
/* Cards */
--card-bg: rgba(15, 20, 25, 0.8);
--card-border: rgba(6, 182, 212, 0.15);
--card-shadow: 0 8px 32px rgba(6, 182, 212, 0.12);
--card-shadow-hover: 0 24px 64px rgba(6, 182, 212, 0.2), 0 0 0 1px rgba(6, 182, 212, 0.25);
--card-hover: rgba(15, 20, 25, 0.9);
--card-border-strong: rgba(8, 145, 178, 0.25);
/* Accents */
--accent-primary: #22d3ee;
--accent-secondary: #0ea5e9;
--accent-success: #10b981;
--accent-warning: #fb923c;
--accent-info: #38bdf8;
/* Unified Gradients */
--gradient-instagram: linear-gradient(135deg, #22d3ee 0%, #0ea5e9 45%, #0891b2 70%, #0d9488 100%);
--gradient-glass: linear-gradient(145deg, rgba(15, 20, 25, 0.9) 0%, rgba(15, 20, 25, 0.7) 100%);
}
/* Header */
.header {
background: rgba(6, 12, 32, 0.85) !important;
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 0.5px solid rgba(148, 163, 184, 0.18);
}
.nav-link {
color: var(--text-secondary);
}
.nav-link:hover {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.16), rgba(6, 182, 212, 0.16));
color: var(--text-primary);
}
.nav-link.active {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.26), rgba(6, 182, 212, 0.26));
color: var(--text-primary);
}
/* Hero Section */
.hero {
background: var(--bg-gradient) !important;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--bg-mesh);
opacity: 1;
pointer-events: none;
z-index: 1;
}
/* All Sections Dark Background */
section {
background: var(--bg-primary) !important;
}
.products {
background: var(--bg-secondary) !important;
}
.platforms {
background: var(--bg-tertiary) !important;
}
.articles {
background: var(--bg-secondary) !important;
}
.contact-section {
background: linear-gradient(180deg, rgba(8, 145, 178, 0.15) 0%, rgba(2, 6, 23, 0.95) 75%) !important;
}
.contact-section::before {
opacity: 0.05;
}
/* Buttons */
.btn-secondary {
background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.7)) !important;
border-color: rgba(148, 163, 184, 0.24) !important;
color: var(--text-primary) !important;
box-shadow: 0 18px 36px rgba(8, 145, 178, 0.22) !important;
}
.btn-secondary:hover {
border-color: rgba(6, 182, 212, 0.35) !important;
background: linear-gradient(135deg, rgba(8, 145, 178, 0.22), rgba(6, 182, 212, 0.22)) !important;
box-shadow: 0 28px 48px rgba(8, 145, 178, 0.3) !important;
}
/* Product Cards */
.product-card,
.contact-item,
.article-item,
.blog-card,
.contact-card {
background: var(--card-bg) !important;
border-color: var(--card-border);
box-shadow: var(--card-shadow);
}
.product-card:hover,
.contact-item:hover,
.article-item:hover,
.blog-card:hover,
.contact-card:hover {
background: var(--card-hover) !important;
box-shadow: var(--card-shadow-hover);
}
.article-item .article-title {
color: var(--text-primary);
}
.article-item .article-excerpt {
color: var(--text-secondary);
}
.article-item .article-date {
color: var(--text-tertiary);
}
.product-status,
.article-category {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.24), rgba(6, 182, 212, 0.24));
border-color: rgba(8, 145, 178, 0.35);
color: var(--text-primary);
}
.article-tag {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.14), rgba(13, 148, 136, 0.14));
border-color: rgba(148, 163, 184, 0.25);
color: var(--text-secondary);
}
.article-tag:hover {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.24), rgba(13, 148, 136, 0.24));
border-color: rgba(6, 182, 212, 0.35);
color: var(--text-primary);
}
/* Business Email Link */
.business-contact .email-link {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.2), rgba(6, 182, 212, 0.2));
border-color: rgba(6, 182, 212, 0.35);
color: var(--accent-info);
}
.business-contact .email-link:hover {
background: var(--gradient-instagram);
box-shadow: 0 24px 48px rgba(8, 145, 178, 0.35);
}
/* WeChat QR */
.wechat-contact .qr-container {
background: var(--card-bg);
border-color: var(--card-border);
}
/* Blog Cards */
.blog-card-category {
background: linear-gradient(135deg, rgba(2, 6, 23, 0.85), rgba(15, 23, 42, 0.85));
border-color: rgba(8, 145, 178, 0.35);
color: var(--accent-success);
}
/* Modal */
.modal-close {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.16), rgba(6, 182, 212, 0.16));
border-color: rgba(8, 145, 178, 0.28);
color: var(--text-secondary);
}
.modal-close:hover {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.3), rgba(6, 182, 212, 0.3));
border-color: rgba(6, 182, 212, 0.45);
color: var(--text-primary);
}
/* Markdown content */
.markdown-body pre {
background: linear-gradient(135deg, #0b1220 0%, #111827 100%);
border-color: rgba(8, 145, 178, 0.28);
}
.markdown-body code {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.18), rgba(6, 182, 212, 0.18));
border-color: rgba(6, 182, 212, 0.35);
color: var(--accent-info);
}
.markdown-body blockquote {
border-left-color: var(--accent-info);
background: linear-gradient(135deg, rgba(14, 165, 233, 0.14), rgba(14, 165, 233, 0.08));
}
.markdown-body th {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.18), rgba(6, 182, 212, 0.18));
}
/* Scrollbar */
::-webkit-scrollbar-track {
background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
}
::-webkit-scrollbar-thumb:hover {
background: var(--gradient-instagram);
}
/* Selection */
::selection {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.45), rgba(6, 182, 212, 0.45));
color: var(--text-primary);
}
::-moz-selection {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.45), rgba(6, 182, 212, 0.45));
color: var(--text-primary);
}
}
body {
font-family: var(--font-primary);
background: var(--bg-gradient);
color: var(--text-primary);
line-height: 1.47059;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
letter-spacing: -0.022em;
transition: background 0.3s ease, color 0.3s ease;
}
.container {
max-width: 1120px;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
/* Header - 极简透明毛玻璃 */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
z-index: 1000;
border-bottom: 0.5px solid rgba(8, 145, 178, 0.14);
transition: background 0.4s cubic-bezier(0.28, 0.11, 0.32, 1),
border-color 0.4s cubic-bezier(0.28, 0.11, 0.32, 1),
backdrop-filter 0.4s cubic-bezier(0.28, 0.11, 0.32, 1);
}
.header .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.875rem var(--spacing-md);
max-width: 1280px;
}
.logo h1 {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
background: var(--gradient-instagram);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.04em;
}
.logo .subtitle {
font-size: 0.6875rem;
color: var(--text-tertiary);
font-family: var(--font-mono);
font-weight: 400;
margin-top: 2px;
letter-spacing: 0.01em;
opacity: 0.7;
}
.nav {
display: flex;
gap: 0.25rem;
align-items: center;
}
.nav-link {
color: var(--text-secondary);
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: var(--radius-lg);
transition: color 0.2s ease, background 0.2s ease;
position: relative;
font-weight: 400;
font-size: 0.875rem;
letter-spacing: -0.01em;
}
.nav-link:hover {
color: var(--text-primary);
background: linear-gradient(135deg, rgba(8, 145, 178, 0.12), rgba(6, 182, 212, 0.12));
}
.nav-link.active {
color: var(--text-primary);
background: linear-gradient(135deg, rgba(8, 145, 178, 0.18), rgba(6, 182, 212, 0.18));
font-weight: 500;
}
.nav-link::after {
display: none;
}
/* Contact Button in Nav */
.btn-contact {
padding: 0.5rem 1.25rem;
background: var(--gradient-instagram);
color: white;
border-radius: var(--radius-xl);
text-decoration: none;
font-weight: 500;
font-size: 0.875rem;
transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
box-shadow: 0 6px 24px rgba(8, 145, 178, 0.24);
margin-left: 0.5rem;
}
.btn-contact:hover {
transform: translateY(-2px);
box-shadow: 0 14px 34px rgba(8, 145, 178, 0.32), 0 0 44px rgba(6, 182, 212, 0.22);
}
/* Hero Section - 大气简约 */
.hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: var(--bg-gradient);
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--bg-mesh);
opacity: 1;
pointer-events: none;
z-index: 1;
}
.hero::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 120px;
background: linear-gradient(0deg, var(--bg-primary) 0%, transparent 100%);
pointer-events: none;
z-index: 2;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0.35;
}
#particleCanvas {
width: 100%;
height: 100%;
}
.hero-content {
position: relative;
z-index: 1;
text-align: center;
padding-top: 60px;
max-width: 980px;
margin: 0 auto;
}
.hero-title {
color: var(--text-primary);
font-size: clamp(3rem, 7vw, 5.5rem);
font-weight: 800;
margin-bottom: 1.5rem;
background: var(--gradient-instagram);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: fadeInUp 0.8s cubic-bezier(0.28, 0.11, 0.32, 1);
letter-spacing: -0.045em;
line-height: 1;
}
.hero-description {
font-size: clamp(1.25rem, 3vw, 1.875rem);
color: var(--text-secondary);
margin-bottom: 3.5rem;
animation: fadeInUp 0.8s cubic-bezier(0.28, 0.11, 0.32, 1) 0.1s backwards;
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.35;
}
.hero-buttons {
display: flex;
gap: 1.25rem;
justify-content: center;
animation: fadeInUp 0.8s cubic-bezier(0.28, 0.11, 0.32, 1) 0.2s backwards;
flex-wrap: wrap;
}
/* Buttons - Premium Gradient 按钮 */
.btn {
padding: 1rem 2.25rem;
border-radius: var(--radius-xl);
text-decoration: none;
font-weight: 600;
transition: transform 0.28s cubic-bezier(0.28, 0.11, 0.32, 1),
box-shadow 0.28s cubic-bezier(0.28, 0.11, 0.32, 1),
background 0.28s cubic-bezier(0.28, 0.11, 0.32, 1),
color 0.28s ease;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
font-size: 1.0625rem;
letter-spacing: -0.015em;
cursor: pointer;
border: none;
}
.btn-primary {
background: var(--gradient-instagram);
color: white;
box-shadow: 0 6px 28px rgba(8, 145, 178, 0.28);
}
.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(255,255,255,0.3), transparent);
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.28, 0.11, 0.32, 1);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 14px 44px rgba(8, 145, 178, 0.35), 0 0 64px rgba(6, 182, 212, 0.24);
}
.btn-primary:hover::before {
opacity: 1;
}
.btn-primary:active {
transform: translateY(-1px) scale(0.98);
}
.btn-primary .icon {
display: inline-block;
margin-left: 0.5rem;
transition: transform 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
}
.btn-primary:hover .icon {
transform: translateX(4px);
}
.btn-secondary {
background: var(--gradient-glass);
color: var(--text-primary);
border: 1.5px solid rgba(8, 145, 178, 0.2);
box-shadow: 0 6px 20px rgba(8, 145, 178, 0.12);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.btn-secondary:hover {
border-color: rgba(6, 182, 212, 0.32);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%);
transform: translateY(-3px);
box-shadow: 0 18px 36px rgba(8, 145, 178, 0.22);
}
/* Sections */
section {
padding: var(--spacing-xl) 0;
position: relative;
background: var(--bg-primary);
}
.section-title {
color: var(--text-primary);
font-size: clamp(2.25rem, 5vw, 3.25rem);
text-align: center;
margin-bottom: 3rem;
background: var(--gradient-instagram);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 800;
letter-spacing: -0.045em;
line-height: 1.08;
position: relative;
display: inline-block;
width: 100%;
}
.section-title::after {
content: '';
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--gradient-instagram);
border-radius: 2px;
opacity: 0.6;
}
/* Products Grid */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 3rem;
position: relative;
}
/* 1个产品时居中 */
.product-grid.products-count-1 {
grid-template-columns: 1fr;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
/* 2个产品时一左一右居中 */
.product-grid.products-count-2 {
grid-template-columns: repeat(2, minmax(300px, 400px));
justify-content: center;
}
/* 3个产品时正常网格（默认） */
.product-grid.products-count-3 {
grid-template-columns: repeat(3, minmax(280px, 1fr));
}
.product-grid::before {
content: '';
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gradient-instagram), transparent);
}
.product-card {
background: var(--gradient-glass);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(8, 145, 178, 0.12);
border-radius: var(--radius-xl);
padding: 2.25rem;
transition: transform 0.28s cubic-bezier(0.28, 0.11, 0.32, 1),
opacity 0.28s ease;
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow: var(--card-shadow);
display: flex;
flex-direction: column;
min-height: 280px;
will-change: transform;
contain: paint;
}
.product-card::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: var(--gradient-instagram);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: var(--radius-xl);
z-index: 0;
will-change: opacity;
}
.product-card::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(8, 145, 178, 0.18) 0%, rgba(6, 182, 212, 0.12) 45%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 0;
will-change: opacity;
}
.product-card:hover {
transform: translateY(-6px);
box-shadow: var(--card-shadow-hover);
}
.product-card:hover::before {
opacity: 0.03;
}
.product-card:hover::after {
opacity: 1;
}
.product-card > * {
position: relative;
z-index: 1;
}
.product-card h3 {
color: var(--text-primary);
background: var(--gradient-instagram);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1.25rem;
font-size: 1.625rem;
font-weight: 700;
letter-spacing: -0.03em;
}
.product-card p {
color: var(--text-secondary);
margin-bottom: 1.25rem;
line-height: 1.6;
letter-spacing: -0.01em;
flex: 1;
}
.product-status {
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 600;
}
.product-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
gap: 0.75rem;
flex-wrap: wrap;
}
.product-action-btn {
padding: 0.5rem 1rem;
background: linear-gradient(135deg, #0891b2 0%, #0d9488 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.product-action-btn:hover {
transform: translateX(4px);
box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}.product-join-btn {
background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
}
.product-join-btn:hover {
box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}
.product-waiting-info {
font-size: 0.75rem;
color: var(--text-tertiary);
margin-top: 0.5rem;
width: 100%;
}
.status-idea {
background: linear-gradient(135deg, rgba(156, 163, 175, 0.2), rgba(107, 114, 128, 0.2));
color: var(--text-primary);
}
.status-planned {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.2), rgba(13, 148, 136, 0.2));
color: #0891b2;
}
.status-development {
background: linear-gradient(135deg, rgba(251, 146, 60, 0.2), rgba(249, 115, 22, 0.2));
color: #f97316;
}
.status-released {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.2));
color: #22c55e;
}
/* Contact Grid */
.contact-layout {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 3rem;
position: relative;
}
.contact-layout::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(8, 145, 178, 0.12) 0%, rgba(6, 182, 212, 0.08) 45%, transparent 70%);
pointer-events: none;
animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.3;
}
50% {
transform: translate(-50%, -50%) scale(1.1);
opacity: 0.5;
}
}
.contact-featured {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.contact-secondary {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 1rem;
}
/* Blog Section */
.blog {
background: var(--bg-primary);
position: relative;
}
.blog::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--card-border), transparent);
}
.section-subtitle {
text-align: center;
color: var(--text-secondary);
font-size: 1.125rem;
margin-top: -0.5rem;
margin-bottom: 3rem;
font-weight: 400;
letter-spacing: -0.01em;
position: relative;
}
/* Articles Section */
.articles {
background: var(--bg-primary);
position: relative;
}
.articles::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(8, 145, 178, 0.12) 0%, transparent 70%);
pointer-events: none;
}
.article-list {
max-width: 900px;
margin: 0 auto;
position: relative;
}
.article-list::before {
content: '';
position: absolute;
left: -40px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg,
transparent 0%,
var(--gradient-instagram) 20%,
var(--gradient-instagram) 80%,
transparent 100%);
opacity: 0.2;
}
.article-item {
background: var(--gradient-glass);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--card-border);
border-radius: var(--radius-xl);
padding: 2.25rem;
margin-bottom: 1.5rem;
cursor: pointer;
transition: transform 0.28s cubic-bezier(0.28, 0.11, 0.32, 1),
opacity 0.28s ease;
position: relative;
overflow: hidden;
box-shadow: var(--card-shadow);
will-change: transform;
contain: paint;
}
.article-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 0;
background: var(--gradient-instagram);
transition: height 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
will-change: height;
}
.article-item::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: var(--gradient-instagram);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: var(--radius-xl);
z-index: 0;
will-change: opacity;
}
.article-item:hover {
transform: translateX(6px);
box-shadow: var(--card-shadow-hover);
}
.article-item:hover::before {
height: 100%;
}
.article-item:hover::after {
opacity: 0.03;
}
.article-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
position: relative;
z-index: 1;
}
.article-title {
color: var(--text-primary);
font-size: 1.625rem;
background: var(--gradient-instagram);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0;
font-weight: 700;
flex: 1;
letter-spacing: -0.03em;
line-height: 1.3;
}
.article-meta {
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
margin-bottom: 1rem;
position: relative;
z-index: 1;
}
.article-date {
color: var(--text-tertiary);
font-size: 0.875rem;
font-family: var(--font-mono);
font-weight: 400;
}
.article-category {
display: inline-block;
padding: 0.5rem 1.125rem;
background: linear-gradient(135deg, rgba(8, 145, 178, 0.16), rgba(6, 182, 212, 0.16));
color: var(--accent-primary);
border-radius: var(--radius-lg);
font-size: 0.8125rem;
border: 1px solid var(--card-border-strong);
font-weight: 600;
}
.article-reading-time {
color: var(--text-tertiary);
font-size: 0.875rem;
}
.article-reading-time::before {
content: '📖 ';
}
.article-excerpt {
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 1.25rem;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
letter-spacing: -0.01em;
position: relative;
z-index: 1;
}
.article-tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.article-tag {
padding: 0.5rem 0.875rem;
background: linear-gradient(135deg, rgba(8, 145, 178, 0.08), rgba(6, 182, 212, 0.08));
color: var(--text-secondary);
border-radius: var(--radius-md);
font-size: 0.8125rem;
border: 1px solid rgba(8, 145, 178, 0.18);
font-weight: 500;
transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
}
.article-tag:hover {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.18), rgba(13, 148, 136, 0.18));
border-color: rgba(6, 182, 212, 0.32);
color: var(--accent-secondary);
}
/* Article Modal */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
.modal.active {
display: flex;
align-items: center;
justify-content: center;
animation: modalFadeIn 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
}
@keyframes modalFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--bg-overlay);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
}
.modal-content {
position: relative;
width: 90%;
max-width: 900px;
max-height: 90vh;
background: var(--bg-primary);
border: 1px solid var(--card-border);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: 0 32px 64px rgba(0, 0, 0, 0.24);
animation: modalSlideIn 0.5s cubic-bezier(0.28, 0.11, 0.32, 1);
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-20px) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.modal-header {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--card-border);
display: flex;
justify-content: flex-end;
background: var(--bg-elevated);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.modal-close {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.12), rgba(6, 182, 212, 0.12));
border: 1px solid rgba(8, 145, 178, 0.22);
color: var(--text-secondary);
font-size: 1.125rem;
width: 32px;
height: 32px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
display: flex;
align-items: center;
justify-content: center;
font-weight: 300;
}
.modal-close:hover {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.24), rgba(13, 148, 136, 0.24));
border-color: rgba(6, 182, 212, 0.32);
color: var(--text-primary);
transform: rotate(90deg);
}
.modal-body {
padding: 2.5rem;
max-height: calc(90vh - 80px);
overflow-y: auto;
}
/* Markdown Styles - Apple 风格 */
.markdown-body {
color: var(--text-primary);
line-height: 1.6;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
color: var(--text-primary);
background: var(--text-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-top: 2.5rem;
margin-bottom: 1rem;
font-weight: 700;
letter-spacing: -0.03em;
}
.markdown-body h1 {
font-size: 2.5rem;
border-bottom: 1px solid var(--card-border);
padding-bottom: 0.75rem;
margin-top: 0;
}
.markdown-body h2 {
font-size: 2rem;
border-bottom: 1px solid var(--card-border);
padding-bottom: 0.5rem;
}
.markdown-body h3 {
font-size: 1.5rem;
}
.markdown-body h4 {
font-size: 1.25rem;
}
.markdown-body p {
margin-bottom: 1.25rem;
color: var(--text-secondary);
letter-spacing: -0.01em;
}
.markdown-body a {
color: var(--accent-secondary);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
}
.markdown-body a:hover {
border-bottom-color: var(--accent-secondary);
}
.markdown-body ul,
.markdown-body ol {
margin-bottom: 1.25rem;
padding-left: 2rem;
color: var(--text-secondary);
}
.markdown-body li {
margin-bottom: 0.5rem;
line-height: 1.6;
}
.markdown-body blockquote {
border-left: 3px solid var(--accent-info);
padding-left: 1.5rem;
margin: 1.5rem 0;
color: var(--text-secondary);
background: rgba(8, 145, 178, 0.08);
padding: 1.25rem 1.5rem;
border-radius: var(--radius-sm);
}
.markdown-body code {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.08), rgba(6, 182, 212, 0.08));
color: var(--accent-secondary);
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 0.875em;
border: 1px solid rgba(8, 145, 178, 0.18);
}
.markdown-body pre {
background: #f6f8fa;
color: #1f2937;
border: 1px solid rgba(8, 145, 178, 0.15);
border-radius: var(--radius-md);
padding: 1.5rem;
overflow-x: auto;
margin: 1.5rem 0;
}
.markdown-body pre code {
background: transparent;
padding: 0;
color: inherit;
border: none;
}
.markdown-body img {
max-width: 100%;
height: auto;
border-radius: var(--radius-md);
margin: 1.5rem 0;
box-shadow: 0 20px 44px rgba(15, 23, 42, 0.12);
}
.markdown-body table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
border-radius: var(--radius-md);
overflow: hidden;
}
.markdown-body th,
.markdown-body td {
border: 1px solid var(--card-border);
padding: 0.875rem;
text-align: left;
}
.markdown-body th {
background: rgba(8, 145, 178, 0.08);
color: var(--text-primary);
font-weight: 600;
}
.markdown-body td {
color: var(--text-secondary);
}
.markdown-body hr {
border: none;
border-top: 1px solid var(--card-border);
margin: 2.5rem 0;
}
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.25rem;
}
.blog-card {
background: var(--card-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--card-border);
border-radius: var(--radius-xl);
overflow: hidden;
transition: transform 0.28s cubic-bezier(0.28, 0.11, 0.32, 1),
opacity 0.28s ease;
cursor: pointer;
text-decoration: none;
color: inherit;
display: block;
box-shadow: var(--card-shadow);
position: relative;
will-change: transform;
contain: paint;
}
.blog-card::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: var(--gradient-tertiary);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: var(--radius-xl);
z-index: 0;
will-change: opacity;
}
.blog-card:hover {
transform: translateY(-4px) scale(1.01);
box-shadow: var(--card-shadow-hover);
}
.blog-card:hover::before {
opacity: 0.03;
}
.blog-card-header {
position: relative;
height: 180px;
background: var(--gradient-forest);
overflow: hidden;
z-index: 1;
}
.blog-card-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,') no-repeat center;
background-size: cover;
opacity: 0.2;
}
.blog-card-header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(0deg, rgba(0,0,0,0.2) 0%, transparent 100%);
}
.blog-card-category {
position: absolute;
top: 1rem;
left: 1rem;
padding: 0.375rem 1rem;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: var(--radius-lg);
font-size: 0.8125rem;
color: var(--accent-success);
border: 1px solid rgba(255, 255, 255, 0.3);
font-weight: 500;
}
.blog-card-date {
position: absolute;
bottom: 1rem;
right: 1rem;
color: rgba(255, 255, 255, 0.95);
font-size: 0.875rem;
font-family: var(--font-mono);
font-weight: 500;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.blog-card-body {
padding: 1.75rem;
position: relative;
z-index: 1;
}
.blog-card-title {
color: var(--text-primary);
background: var(--text-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 1.375rem;
margin-bottom: 1rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.025em;
}
.blog-card-excerpt {
color: var(--text-secondary);
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 1rem;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
letter-spacing: -0.01em;
}
.blog-card-meta {
display: flex;
gap: 1rem;
align-items: center;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--card-border);
}
.blog-card-platform {
font-size: 0.875rem;
color: var(--text-tertiary);
display: flex;
align-items: center;
gap: 0.25rem;
}
.blog-card-platform::before {
content: '📝';
}
.blog-card-views {
font-size: 0.875rem;
color: var(--text-tertiary);
margin-left: auto;
}
/* Platforms Section */
.platforms {
background: var(--bg-secondary);
position: relative;
overflow: hidden;
}
.platforms::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 30%, rgba(8, 145, 178, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(13, 148, 136, 0.08) 0%, transparent 50%);
pointer-events: none;
}
.platforms .container {
position: relative;
z-index: 1;
}
.contact-item {
background: var(--gradient-glass);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--card-border);
border-radius: var(--radius-xl);
padding: 1.75rem;
text-align: center;
transition: transform 0.28s cubic-bezier(0.28, 0.11, 0.32, 1),
opacity 0.28s ease;
text-decoration: none;
color: var(--text-primary);
display: block;
box-shadow: var(--card-shadow);
position: relative;
overflow: hidden;
will-change: transform;
contain: paint;
}
.contact-item::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: var(--gradient-instagram);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: var(--radius-xl);
z-index: 0;
will-change: opacity;
}
.contact-item::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-instagram);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
z-index: 0;
will-change: transform;
}
.contact-item:hover {
transform: translateY(-4px) scale(1.01);
box-shadow: var(--card-shadow-hover);
}
.contact-item:hover::before {
opacity: 0.03;
}
.contact-item:hover::after {
transform: scaleX(1);
}
.contact-item .icon {
font-size: 2.5rem;
margin-bottom: 1rem;
filter: grayscale(0);
transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
z-index: 1;
will-change: transform;
}
.contact-item--featured {
padding: 2.25rem;
}
.contact-item--featured .icon {
font-size: 3rem;
}
.contact-item--secondary {
padding: 1.5rem;
}
.contact-item--secondary .icon {
font-size: 2rem;
}
.contact-item--disabled {
cursor: default;
opacity: 0.65;
pointer-events: none;
}
.contact-item--disabled .placeholder {
margin-top: 0.75rem;
font-size: 0.75rem;
color: var(--text-tertiary);
}
.contact-item:hover .icon {
transform: scale(1.2) rotate(-8deg);
}
.contact-item .label {
font-size: 1rem;
color: var(--text-secondary);
font-weight: 600;
letter-spacing: -0.01em;
position: relative;
z-index: 1;
}
/* Business Contact */
.contact-section {
background: var(--bg-gradient);
position: relative;
overflow: hidden;
}
.contact-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gradient-instagram);
opacity: 0.03;
pointer-events: none;
}
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin-top: 3rem;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.contact-card {
background: var(--card-bg);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid var(--card-border);
border-radius: var(--radius-xl);
padding: 3rem 2rem;
text-align: center;
box-shadow: var(--card-shadow);
transition: transform 0.24s cubic-bezier(0.28, 0.11, 0.32, 1),
opacity 0.24s ease;
position: relative;
overflow: hidden;
will-change: transform;
contain: paint;
}
.contact-card::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: var(--gradient-instagram);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: var(--radius-xl);
z-index: 0;
will-change: opacity;
}
.contact-card:hover {
transform: translateY(-6px);
box-shadow: var(--card-shadow-hover);
}
.contact-card:hover::before {
opacity: 0.03;
}
.contact-icon {
font-size: 3.5rem;
margin-bottom: 1.5rem;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
position: relative;
z-index: 1;
}
.contact-card h3 {
color: var(--text-primary);
background: var(--gradient-instagram);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1.5rem;
font-weight: 600;
font-size: 1.75rem;
letter-spacing: -0.03em;
position: relative;
z-index: 1;
}
.business-contact .email-link {
font-size: 1.125rem;
color: var(--accent-secondary);
text-decoration: none;
font-weight: 500;
transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
letter-spacing: -0.01em;
display: inline-block;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, rgba(8, 145, 178, 0.12), rgba(6, 182, 212, 0.12));
border-radius: var(--radius-lg);
border: 1px solid rgba(8, 145, 178, 0.22);
position: relative;
z-index: 1;
}
.business-contact .email-link:hover {
color: var(--text-primary);
background: var(--gradient-instagram);
border-color: transparent;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(8, 145, 178, 0.22), 0 0 32px rgba(6, 182, 212, 0.12);
}
/* WeChat QR */
.wechat-contact .qr-container {
display: inline-block;
padding: 1rem;
background: var(--card-bg);
border-radius: var(--radius-lg);
box-shadow: var(--card-shadow);
border: 1px solid var(--card-border);
transition: all 0.4s cubic-bezier(0.28, 0.11, 0.32, 1);
position: relative;
z-index: 1;
}
.wechat-contact .qr-container:hover {
transform: scale(1.05);
box-shadow: var(--card-shadow-hover);
}
.wechat-contact .qr-container img {
max-width: 180px;
height: auto;
display: block;
border-radius: var(--radius-sm);
}
/* Loading */
.loading {
text-align: center;
color: var(--text-tertiary);
padding: var(--spacing-md);
animation: loadingPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes loadingPulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* Footer */
.footer {
background: var(--bg-primary);
padding: 3rem 0 2rem;
text-align: center;
border-top: 1px solid var(--card-border);
position: relative;
overflow: hidden;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gradient-instagram), transparent);
opacity: 0.3;
}
.footer p {
color: var(--text-tertiary);
font-size: 0.875rem;
font-weight: 400;
letter-spacing: -0.01em;
position: relative;
z-index: 1;
margin-top: 2rem;
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Loading animation already defined above */
@media (max-width: 1200px) {
.contact-featured {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.contact-secondary {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* Responsive */
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.hero-description {
font-size: 1.125rem;
}
.hero-buttons {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}
.btn {
width: 100%;
text-align: center;
}
.nav {
gap: 0.25rem;
flex-wrap: wrap;
}
.nav-link {
padding: 0.5rem 0.75rem;
font-size: 0.8125rem;
}
.btn-contact {
width: 100%;
margin-left: 0;
margin-top: 0.5rem;
text-align: center;
justify-content: center;
}
.section-title {
font-size: 2rem;
}
.product-grid,
.product-grid.products-count-1,
.product-grid.products-count-2,
.product-grid.products-count-3,
.contact-featured,
.contact-secondary {
grid-template-columns: 1fr;
max-width: 100%;
}
.contact-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.product-card,
.article-item {
padding: 1.75rem;
}
.article-title {
font-size: 1.375rem;
}
.modal-content {
width: 95%;
max-width: calc(100% - 32px);
max-height: 90vh;
padding: 32px 24px;
border-radius: 20px;
}
.modal-header h2 {
font-size: 1.5rem;
}
.modal-close {
top: 16px;
right: 16px;
width: 36px;
height: 36px;
}
.wechat-modal-content {
padding: 32px 24px;
}
.wechat-modal-content h2 {
font-size: 1.5rem;
}
.wechat-success-icon {
font-size: 48px;
}
.wechat-qr-container {
margin: 24px 0;
padding: 16px;
}
.wechat-qr-container img {
max-width: 220px;
}
.modal-body {
padding: 1.5rem;
}
.markdown-body h1 {
font-size: 2rem;
}
.markdown-body h2 {
font-size: 1.5rem;
}
.logo h1 {
font-size: 1.25rem;
}
.logo .subtitle {
font-size: 0.625rem;
}
.contact-item--featured,
.contact-item--secondary {
padding: 1.5rem;
}
.contact-item--featured .icon,
.contact-item--secondary .icon {
font-size: 2.25rem;
}
.contact-card {
padding: 2.5rem 1.75rem;
}
.contact-icon {
font-size: 3rem;
}
}
/* Scrollbar Styling - Modern Premium Style */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
background: var(--gradient-ocean);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--gradient-primary);
}
/* Selection Styling */
::selection {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.32), rgba(13, 148, 136, 0.32));
color: var(--text-primary);
}
::-moz-selection {
background: linear-gradient(135deg, rgba(8, 145, 178, 0.32), rgba(13, 148, 136, 0.32));
color: var(--text-primary);
}
/* 额外的灵动效果 */
@media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}
/* 微妙的页面进入动画 */
@keyframes pageLoad {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
body {
animation: pageLoad 0.6s cubic-bezier(0.28, 0.11, 0.32, 1);
}
/* 鼠标悬停时的平滑过渡 */
a, button, .btn, .nav-link, .product-card, .article-item, .contact-item, .blog-card {
-webkit-tap-highlight-color: transparent;
}
/* Apple风格的输入框焦点效果（如果有） */
input:focus,
textarea:focus,
select:focus {
outline: none;
box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.22);
border-color: var(--accent-secondary);
}
/* 查看更多按钮样式 */
.view-more-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 32px;
padding: 20px;
grid-column: 1 / -1; /* 占据整行 */
}
.view-more-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
background: linear-gradient(135deg, #0891b2 0%, #0d9488 100%);
color: white;
text-decoration: none;
border-radius: 12px;
font-weight: 600;
font-size: 1rem;
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}
.view-more-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(8, 145, 178, 0.4);
}
/* 文章标签可点击样式 */
.article-tag {
cursor: pointer;
transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.article-tag:hover {
background: linear-gradient(135deg, #0891b2 0%, #0d9488 100%);
color: white;
transform: translateY(-2px);
}
/* 模态框样式 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: opacity 0.24s ease, visibility 0.24s ease;
padding: 20px;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-content {
background: var(--bg-primary);
border-radius: 24px;
padding: 48px;
max-width: 520px;
width: 100%;
max-height: 85vh;
overflow-y: auto;
box-shadow:
0 18px 48px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.08);
transform: scale(0.97) translateY(16px);
transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.26s ease;
position: relative;
border: 1px solid var(--card-border);
}
.modal-overlay.active .modal-content {
transform: scale(1) translateY(0);
}
.modal-header {
margin-bottom: 32px;
text-align: center;
}
.modal-header h2 {
font-size: 2rem;
font-weight: 800;
background: var(--gradient-instagram);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 12px;
line-height: 1.2;
}
.modal-header p {
color: var(--text-secondary);
font-size: 1rem;
line-height: 1.5;
}
.modal-close {
position: absolute;
top: 20px;
right: 20px;
background: var(--bg-secondary);
border: 2px solid var(--card-border);
font-size: 24px;
cursor: pointer;
color: var(--text-tertiary);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
font-weight: 300;
line-height: 1;
}
.modal-close:hover {
background: var(--bg-tertiary);
border-color: var(--accent-primary);
color: var(--text-primary);
transform: rotate(90deg);
}
.modal-form {
display: flex;
flex-direction: column;
gap: 24px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.form-group label {
font-weight: 600;
color: var(--text-primary);
font-size: 1rem;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 14px 18px;
border: 2px solid var(--card-border);
border-radius: 14px;
font-size: 1rem;
background: var(--bg-secondary);
color: var(--text-primary);
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
font-family: inherit;
}
.form-group select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 20px;
padding-right: 44px;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--accent-primary);
box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.1);
background: var(--bg-primary);
}
.form-group textarea {
resize: vertical;
min-height: 100px;
}
.form-group small {
color: var(--text-tertiary);
font-size: 0.875rem;
line-height: 1.5;
}
.form-required {
color: #ef4444;
font-weight: 600;
}
.modal-submit {
padding: 16px 32px;
background: var(--gradient-instagram);
color: white;
border: none;
border-radius: 14px;
font-size: 1.05rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease;
margin-top: 8px;
box-shadow: 0 8px 24px rgba(8, 145, 178, 0.3);
}
.modal-submit:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(8, 145, 178, 0.4);
}
.modal-submit:active {
transform: translateY(0);
}
.modal-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: 0 4px 12px rgba(8, 145, 178, 0.2);
}
/* 微信二维码模态框 */
.wechat-modal-content {
text-align: center;
padding: 40px 32px;
max-width: 480px;
}
.wechat-modal-content h2 {
font-size: 1.75rem;
font-weight: 800;
margin-bottom: 16px;
color: var(--text-primary);
background: var(--gradient-instagram);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.wechat-modal-content p {
color: var(--text-secondary);
margin-bottom: 24px;
font-size: 1rem;
line-height: 1.6;
}
.wechat-qr-container {
display: flex;
justify-content: center;
align-items: center;
margin: 32px 0;
padding: 24px;
background: var(--bg-secondary);
border-radius: 20px;
border: 2px solid var(--card-border);
}
.wechat-qr-container img {
max-width: 260px;
width: 100%;
height: auto;
border-radius: 16px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.wechat-success-icon {
font-size: 64px;
margin-bottom: 20px;
animation: scaleIn 0.28s cubic-bezier(0.32, 0, 0.4, 1.4);
}
@keyframes scaleIn {
from {
transform: scale(0.85);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.modal-ok-btn {
padding: 14px 40px;
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
border: none;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease;
margin-top: 20px;
}
.modal-ok-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}
@supports not (backdrop-filter: blur(1px)) {
.header,
.product-card,
.article-item,
.contact-item,
.blog-card,
.modal-overlay,
.modal,
.modal-content,
.blog-card-category {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.product-card,
.article-item,
.contact-item,
.blog-card,
.modal,
.modal-content,
.blog-card-category {
background: var(--card-bg);
}
.modal-overlay {
background: rgba(0, 0, 0, 0.68);
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.product-card,
.article-item,
.contact-item,
.blog-card,
.modal,
.modal-content {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.product-card:hover,
.article-item:hover,
.contact-item:hover,
.blog-card:hover,
.view-more-btn:hover,
.article-tag:hover,
.modal-submit:hover,
.modal-ok-btn:hover {
transform: none !important;
box-shadow: none !important;
}
}