|
|
|
@ -10,11 +10,12 @@
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
|
|
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
|
|
|
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
|
|
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
|
|
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&family=Inter:wght@400;500;700;800;900&family=JetBrains+Mono:wght@500&&display=swap" rel="stylesheet"/>
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&family=Liu+Jian+Mao+Cao:wght@400;700&family=Sacramento&family=Inter:wght@400;500;700;800;900&family=JetBrains+Mono:wght@500&&display=swap" rel="stylesheet"/>
|
|
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" />
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" />
|
|
|
|
<!-- AOS Animation Library -->
|
|
|
|
<!-- AOS Animation Library -->
|
|
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
|
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
|
|
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>
|
|
|
|
<!-- Tailwind & Config -->
|
|
|
|
<!-- Tailwind & Config -->
|
|
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
|
|
<script id="tailwind-config">
|
|
|
|
<script id="tailwind-config">
|
|
|
|
@ -28,6 +29,7 @@
|
|
|
|
"background-dark": "#10221c",
|
|
|
|
"background-dark": "#10221c",
|
|
|
|
"pearlescent": "#f0f7f5",
|
|
|
|
"pearlescent": "#f0f7f5",
|
|
|
|
"silver-accent": "#e2e8f0",
|
|
|
|
"silver-accent": "#e2e8f0",
|
|
|
|
|
|
|
|
"about-us": "#ff6b00"
|
|
|
|
},
|
|
|
|
},
|
|
|
|
fontFamily: {
|
|
|
|
fontFamily: {
|
|
|
|
"display": ["Space Grotesk", "sans-serif"],
|
|
|
|
"display": ["Space Grotesk", "sans-serif"],
|
|
|
|
@ -46,6 +48,17 @@
|
|
|
|
backgroundImage: {
|
|
|
|
backgroundImage: {
|
|
|
|
'liquid-gradient': 'linear-gradient(135deg, #f8fcfa 0%, #e8f5f1 50%, #dcfce7 100%)',
|
|
|
|
'liquid-gradient': 'linear-gradient(135deg, #f8fcfa 0%, #e8f5f1 50%, #dcfce7 100%)',
|
|
|
|
'glass-gradient': 'linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%)',
|
|
|
|
'glass-gradient': 'linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%)',
|
|
|
|
|
|
|
|
'aurora': 'linear-gradient(135deg, rgba(19,236,164,0.1) 0%, rgba(13,166,112,0.05) 50%, rgba(248,252,250,0) 100%)',
|
|
|
|
|
|
|
|
'mesh': 'radial-gradient(at 40% 20%, rgba(19,236,164,0.08) 0px, transparent 50%), radial-gradient(at 80% 0%, rgba(16,34,28,0.05) 0px, transparent 50%), radial-gradient(at 0% 50%, rgba(19,236,164,0.05) 0px, transparent 50%)',
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
boxShadow: {
|
|
|
|
|
|
|
|
// 将光效统一映射为 primary 颜色 (13eca4 的 RGBA)
|
|
|
|
|
|
|
|
'glow': '0 0 20px rgba(19, 236, 164, 0.4)',
|
|
|
|
|
|
|
|
'glow-lg': '0 10px 30px rgba(19, 236, 164, 0.4)',
|
|
|
|
|
|
|
|
'bento': '0 20px 40px -15px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.02)',
|
|
|
|
|
|
|
|
'bento-hover': '0 30px 60px -20px rgba(19,236,164,0.15), 0 0 0 1px rgba(19,236,164,0.3)',
|
|
|
|
|
|
|
|
'bento-dark': '0 30px 60px -15px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1)',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
keyframes: {
|
|
|
|
keyframes: {
|
|
|
|
fadeIn: {
|
|
|
|
fadeIn: {
|
|
|
|
@ -70,6 +83,29 @@
|
|
|
|
'0%': { boxShadow: '0 0 0px rgba(19,236,164,0)' },
|
|
|
|
'0%': { boxShadow: '0 0 0px rgba(19,236,164,0)' },
|
|
|
|
'50%': { boxShadow: '0 0 50px rgba(19,236,164,0.4)', transform: 'scale(1.02)' },
|
|
|
|
'50%': { boxShadow: '0 0 50px rgba(19,236,164,0.4)', transform: 'scale(1.02)' },
|
|
|
|
'100%': { boxShadow: '0 0 0px rgba(19,236,164,0)' },
|
|
|
|
'100%': { boxShadow: '0 0 0px rgba(19,236,164,0)' },
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
// 高级交互动画
|
|
|
|
|
|
|
|
pulseGlow: {
|
|
|
|
|
|
|
|
'0%': { textShadow: '0 0 10px rgba(19, 236, 164, 0.4)' },
|
|
|
|
|
|
|
|
'100%': { textShadow: '0 0 30px #ff6b00' }
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
sweep: { '100%': { left: '200%' } },
|
|
|
|
|
|
|
|
cardFlip: {
|
|
|
|
|
|
|
|
'0%': { opacity: '0', transform: 'rotateY(-90deg) translateZ(50px)' },
|
|
|
|
|
|
|
|
'100%': { opacity: '1', transform: 'rotateY(0deg) translateZ(0)' }
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
floatY: {
|
|
|
|
|
|
|
|
'0%, 100%': { transform: 'translateY(0)' },
|
|
|
|
|
|
|
|
'50%': { transform: 'translateY(-15px)' }
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
textShimmer: {
|
|
|
|
|
|
|
|
'0%': { backgroundPosition: '0% 50%' },
|
|
|
|
|
|
|
|
'100%': { backgroundPosition: '100% 50%' },
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
blobSpin: {
|
|
|
|
|
|
|
|
'0%': { transform: 'rotate(0deg) scale(1)' },
|
|
|
|
|
|
|
|
'50%': { transform: 'rotate(180deg) scale(1.1)' },
|
|
|
|
|
|
|
|
'100%': { transform: 'rotate(360deg) scale(1)' },
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
animation: {
|
|
|
|
animation: {
|
|
|
|
@ -77,12 +113,107 @@
|
|
|
|
'scan-slow': 'scan 6s linear infinite',
|
|
|
|
'scan-slow': 'scan 6s linear infinite',
|
|
|
|
'spin-slow': 'rotateGlobe 60s linear infinite',
|
|
|
|
'spin-slow': 'rotateGlobe 60s linear infinite',
|
|
|
|
'dash-flow': 'dash 3s linear infinite',
|
|
|
|
'dash-flow': 'dash 3s linear infinite',
|
|
|
|
'globe-select': 'globePulse 0.8s ease-out'
|
|
|
|
'globe-select': 'globePulse 0.8s ease-out',
|
|
|
|
|
|
|
|
'pulse-glow': 'pulseGlow 2s infinite alternate',
|
|
|
|
|
|
|
|
'sweep': 'sweep 3s infinite',
|
|
|
|
|
|
|
|
'flip-in': 'cardFlip 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards',
|
|
|
|
|
|
|
|
'float-1': 'floatY 3s ease-in-out infinite',
|
|
|
|
|
|
|
|
'float-2': 'floatY 3s ease-in-out infinite 1s',
|
|
|
|
|
|
|
|
'float-3': 'floatY 3s ease-in-out infinite 2s',
|
|
|
|
|
|
|
|
'text-shimmer': 'textShimmer 3s ease-out infinite alternate',
|
|
|
|
|
|
|
|
'blob-spin': 'blobSpin 20s infinite cubic-bezier(0.4, 0, 0.2, 1)',
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<!-- Tailwind 基础样式注入 -->
|
|
|
|
|
|
|
|
<style type="text/tailwindcss">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@layer utilities {
|
|
|
|
|
|
|
|
/* contact us */
|
|
|
|
|
|
|
|
#contact-us .focus-group:hover > div:not(:hover) {
|
|
|
|
|
|
|
|
opacity: 0.6;
|
|
|
|
|
|
|
|
transform: scale(0.98);
|
|
|
|
|
|
|
|
filter: blur(2px);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
#contact-us .focus-group > div {
|
|
|
|
|
|
|
|
transition: opacity 0.5s ease, transform 0.5s ease, filter 0.5s ease;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* about-us */
|
|
|
|
|
|
|
|
/* 新增:专门为副标题定制的 3D 荧光挤压动画 */
|
|
|
|
|
|
|
|
.text-3d-subtitle {
|
|
|
|
|
|
|
|
color: #ff6b00; /* 保持主题色 */
|
|
|
|
|
|
|
|
animation: pulse3d 2s infinite alternate;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@keyframes pulse3d {
|
|
|
|
|
|
|
|
0% {
|
|
|
|
|
|
|
|
text-shadow:
|
|
|
|
|
|
|
|
/* 左上高光 */
|
|
|
|
|
|
|
|
-1px -1px 0px rgba(255, 255, 255, 0.5),
|
|
|
|
|
|
|
|
/* 右下厚度 (深翠绿色系) */
|
|
|
|
|
|
|
|
1px 1px 0px #ce6c33,
|
|
|
|
|
|
|
|
2px 2px 0px #b44914,
|
|
|
|
|
|
|
|
3px 3px 0px #75600a,
|
|
|
|
|
|
|
|
/* 基础投影 */
|
|
|
|
|
|
|
|
4px 4px 10px rgba(0, 0, 0, 0.6),
|
|
|
|
|
|
|
|
/* 较弱的呼吸背光 */
|
|
|
|
|
|
|
|
0px 0px 10px rgba(224, 114, 12, 0.3);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
100% {
|
|
|
|
|
|
|
|
text-shadow:
|
|
|
|
|
|
|
|
-1px -1px 0px rgba(255, 255, 255, 0.7),
|
|
|
|
|
|
|
|
1px 1px 0px #cc7e19,
|
|
|
|
|
|
|
|
2px 2px 0px #e2d921,
|
|
|
|
|
|
|
|
3px 3px 0px #692a05,
|
|
|
|
|
|
|
|
5px 5px 15px rgba(0, 0, 0, 0.8),
|
|
|
|
|
|
|
|
/* 较强的呼吸背光,模拟能量溢出 */
|
|
|
|
|
|
|
|
0px 0px 30px #f2e930,
|
|
|
|
|
|
|
|
0px 0px 50px rgba(195, 159, 16, 0.6);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.text-3d {
|
|
|
|
|
|
|
|
text-shadow:
|
|
|
|
|
|
|
|
0 1px 0 #e2e8f0, /* 亮银色顶边 */
|
|
|
|
|
|
|
|
0 2px 0 #cbd5e1,
|
|
|
|
|
|
|
|
0 3px 0 #94a3b8,
|
|
|
|
|
|
|
|
0 4px 0 #64748b, /* 逐渐变暗模拟背光面 */
|
|
|
|
|
|
|
|
0 5px 0 #475569,
|
|
|
|
|
|
|
|
0 6px 0 #334155,
|
|
|
|
|
|
|
|
0 8px 10px rgba(0, 0, 0, 0.4), /* 近处接触阴影 */
|
|
|
|
|
|
|
|
0 15px 20px rgba(0, 0, 0, 0.3), /* 中距离扩散阴影 */
|
|
|
|
|
|
|
|
0 25px 40px rgba(0, 0, 0, 0.8); /* 远距离环境阴影 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.text-3d-ultra {
|
|
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
|
|
/* 1. 顶部左侧的亮色高光切割边 */
|
|
|
|
|
|
|
|
text-shadow:
|
|
|
|
|
|
|
|
-1px -1px 1px rgba(255, 255, 255, 0.3),
|
|
|
|
|
|
|
|
/* 2. 右下角 45度 斜向挤压厚度 (融入您的深墨绿环境色) */
|
|
|
|
|
|
|
|
1px 1px 0px #0d1e18,
|
|
|
|
|
|
|
|
2px 2px 0px #0a1813,
|
|
|
|
|
|
|
|
3px 3px 0px #08130e,
|
|
|
|
|
|
|
|
4px 4px 0px #060e0a,
|
|
|
|
|
|
|
|
5px 5px 0px #040906,
|
|
|
|
|
|
|
|
6px 6px 0px #020403,
|
|
|
|
|
|
|
|
7px 7px 0px #000000,
|
|
|
|
|
|
|
|
/* 3. 接触面的死黑投影 */
|
|
|
|
|
|
|
|
8px 8px 15px rgba(0, 0, 0, 0.8),
|
|
|
|
|
|
|
|
/* 4. 远距离大范围柔和投影 */
|
|
|
|
|
|
|
|
15px 15px 30px rgba(0, 0, 0, 0.6),
|
|
|
|
|
|
|
|
/* 5. 核心点睛之笔:在阴影反方向及底部映射出 #13eca4 (Primary) 的环境光晕 */
|
|
|
|
|
|
|
|
-5px -5px 30px rgba(19, 236, 164, 0.1),
|
|
|
|
|
|
|
|
10px 10px 40px rgba(19, 236, 164, 0.25);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Tab 状态管控:选中时变为 primary 背景与深色字体 */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#tech-landing-wrapper .tab-content { @apply hidden; }
|
|
|
|
|
|
|
|
#tech-landing-wrapper .tab-content.active { @apply grid; }
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
</head>
|
|
|
|
<body <?php body_class(); ?>>
|
|
|
|
<body <?php body_class(); ?>>
|
|
|
|
<nav class="main-nav">
|
|
|
|
<nav class="main-nav">
|
|
|
|
|