张翔
37296b5717
改造概要（30项）： - 第一轮：Hero重构/Section差异化/SocialProof强化/CTA对比度/About架构 - 第二轮：字体优化/背景交替/Solutions差异化/Footer五列/MegaDropdown修复 - 第三轮：卡片交互/表单层级/CTA统一/时间线标记/连接线/三列布局/移动导航/Button微交互/SEO Schema - P3-2：template.tsx+Framer Motion页面过渡/loading.tsx加载状态 - 清理：删除未用组件/hooks，修复重复移动导航，清理冗余CSS
1096 lines
36 KiB
HTML
1096 lines
36 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>Novalon Hero Variants</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap');
|
|
|
|
:root {
|
|
--ink: #1C1C1C;
|
|
--ink-light: #595959;
|
|
--ink-muted: #A3A3A3;
|
|
--cinnabar: #C41E3A;
|
|
--cinnabar-soft: rgba(196, 30, 58, 0.08);
|
|
--cinnabar-glow: rgba(196, 30, 58, 0.15);
|
|
--paper: #FFFFFF;
|
|
--paper-warm: #FAFAFA;
|
|
--font-brand: 'Noto Serif SC', 'STSong', 'SimSun', serif;
|
|
--font-calligraphy: 'Noto Serif SC', 'STKaiti', 'KaiTi', serif;
|
|
--font-sans: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
html {
|
|
font-size: 16px;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-sans);
|
|
color: var(--ink);
|
|
background: var(--paper);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: background 0.6s var(--ease-out);
|
|
}
|
|
|
|
.hero-inner {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 2rem;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.hero-tag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 20px;
|
|
border-radius: 999px;
|
|
background: var(--cinnabar-soft);
|
|
color: var(--cinnabar);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
border: 1px solid rgba(196, 30, 58, 0.1);
|
|
margin-bottom: 2rem;
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
animation: fadeUp 0.6s var(--ease-out) 0.1s forwards;
|
|
}
|
|
|
|
.hero-brand {
|
|
font-family: var(--font-brand);
|
|
font-size: clamp(3.5rem, 8vw, 6rem);
|
|
font-weight: 400;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.02em;
|
|
color: var(--ink);
|
|
margin-bottom: 1.5rem;
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
animation: fadeUp 0.6s var(--ease-out) 0.2s forwards;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
font-size: clamp(1.25rem, 2.5vw, 1.75rem);
|
|
font-weight: 600;
|
|
color: var(--ink);
|
|
margin-bottom: 0.75rem;
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
animation: fadeUp 0.6s var(--ease-out) 0.3s forwards;
|
|
}
|
|
|
|
.hero-subtitle .accent {
|
|
color: var(--cinnabar);
|
|
font-family: var(--font-calligraphy);
|
|
}
|
|
|
|
.hero-desc {
|
|
font-size: clamp(1rem, 1.5vw, 1.125rem);
|
|
color: var(--ink-light);
|
|
line-height: 1.7;
|
|
max-width: 560px;
|
|
margin-bottom: 2.5rem;
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
animation: fadeUp 0.6s var(--ease-out) 0.4s forwards;
|
|
}
|
|
|
|
.hero-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
opacity: 0;
|
|
transform: translateY(24px);
|
|
animation: fadeUp 0.6s var(--ease-out) 0.5s forwards;
|
|
}
|
|
|
|
.btn-primary {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 14px 28px;
|
|
background: var(--cinnabar);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 10px;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
font-family: var(--font-sans);
|
|
cursor: pointer;
|
|
transition: all 0.2s var(--ease-out);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #A01830;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 8px 24px rgba(196, 30, 58, 0.25);
|
|
}
|
|
|
|
.btn-primary:active { transform: translateY(0); }
|
|
|
|
.btn-outline {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 14px 28px;
|
|
background: transparent;
|
|
color: var(--ink);
|
|
border: 1px solid #E5E5E5;
|
|
border-radius: 10px;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
font-family: var(--font-sans);
|
|
cursor: pointer;
|
|
transition: all 0.2s var(--ease-out);
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
border-color: var(--ink);
|
|
background: var(--paper-warm);
|
|
}
|
|
|
|
.arrow-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
transition: transform 0.2s var(--ease-out);
|
|
}
|
|
|
|
.btn-primary:hover .arrow-icon { transform: translateX(3px); }
|
|
|
|
@keyframes fadeUp {
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* ===== VARIANT ORIG: 原版 (当前生产) ===== */
|
|
.variant-orig .hero {
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.variant-orig .hero-content {
|
|
max-width: 768px;
|
|
}
|
|
|
|
.variant-orig .hero-tag {
|
|
margin-bottom: 1.5rem;
|
|
background: #FEF2F4;
|
|
border: 1px solid rgba(196, 30, 58, 0.1);
|
|
}
|
|
|
|
.variant-orig .hero-brand {
|
|
font-size: clamp(3rem, 7vw, 4.5rem);
|
|
letter-spacing: -0.025em;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.variant-orig .hero-subtitle {
|
|
font-size: clamp(1.25rem, 2vw, 1.5rem);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.variant-orig .hero-subtitle .accent {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.variant-orig .hero-desc {
|
|
font-size: 1.125rem;
|
|
max-width: 672px;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.variant-orig .hero-actions {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.variant-orig .hero-actions {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.variant-orig .btn-primary {
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.variant-orig .btn-outline {
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* ===== VARIANT A: 排版驱动 ===== */
|
|
.variant-a .hero {
|
|
background: var(--paper);
|
|
}
|
|
|
|
.variant-a .hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
|
opacity: 0.018;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.variant-a .hero-brand {
|
|
font-size: clamp(4rem, 10vw, 7rem);
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.variant-a .hero::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgba(196, 30, 58, 0.15), transparent);
|
|
}
|
|
|
|
.variant-a .seal-mark {
|
|
display: inline-block;
|
|
width: 48px;
|
|
height: 48px;
|
|
border: 2px solid var(--cinnabar);
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: var(--font-calligraphy);
|
|
color: var(--cinnabar);
|
|
font-size: 20px;
|
|
margin-left: 16px;
|
|
vertical-align: middle;
|
|
opacity: 0;
|
|
animation: stampIn 0.5s var(--ease-out) 0.8s forwards;
|
|
position: relative;
|
|
top: -4px;
|
|
}
|
|
|
|
@keyframes stampIn {
|
|
0% { opacity: 0; transform: scale(1.5) rotate(-10deg); }
|
|
60% { opacity: 0.9; transform: scale(0.95) rotate(1deg); }
|
|
100% { opacity: 0.6; transform: scale(1) rotate(0deg); }
|
|
}
|
|
|
|
/* ===== VARIANT B: 墨韵背景 ===== */
|
|
.variant-b .hero {
|
|
background: linear-gradient(135deg, #FEFEFE 0%, #F8F6F3 50%, #FEFEFE 100%);
|
|
}
|
|
|
|
.variant-b .ink-bg {
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.variant-b .ink-blob {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(100px);
|
|
opacity: 0;
|
|
animation: inkReveal 1.5s var(--ease-out) forwards;
|
|
}
|
|
|
|
.variant-b .ink-blob-1 {
|
|
width: 800px;
|
|
height: 800px;
|
|
top: -20%;
|
|
right: -15%;
|
|
background: radial-gradient(circle, rgba(28, 28, 28, 0.07) 0%, rgba(28, 28, 28, 0.03) 40%, transparent 70%);
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.variant-b .ink-blob-2 {
|
|
width: 600px;
|
|
height: 600px;
|
|
bottom: -15%;
|
|
left: -8%;
|
|
background: radial-gradient(circle, rgba(196, 30, 58, 0.06) 0%, rgba(196, 30, 58, 0.02) 40%, transparent 70%);
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
.variant-b .ink-blob-3 {
|
|
width: 500px;
|
|
height: 500px;
|
|
top: 20%;
|
|
right: 20%;
|
|
background: radial-gradient(circle, rgba(28, 28, 28, 0.04) 0%, transparent 60%);
|
|
animation-delay: 0.6s;
|
|
}
|
|
|
|
.variant-b .ink-blob-4 {
|
|
width: 400px;
|
|
height: 400px;
|
|
top: 60%;
|
|
left: 30%;
|
|
background: radial-gradient(circle, rgba(196, 30, 58, 0.04) 0%, transparent 60%);
|
|
animation-delay: 0.8s;
|
|
}
|
|
|
|
.variant-b .ink-stroke {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 5%;
|
|
transform: translateY(-50%);
|
|
width: 440px;
|
|
height: 440px;
|
|
opacity: 0;
|
|
animation: inkStrokeReveal 1.2s var(--ease-out) 0.5s forwards;
|
|
}
|
|
|
|
.variant-b .ink-stroke svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.variant-b .ink-line {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.variant-b .ink-line-1 {
|
|
top: 15%;
|
|
left: 5%;
|
|
width: 200px;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, rgba(196, 30, 58, 0.12), transparent);
|
|
transform: rotate(-8deg);
|
|
opacity: 0;
|
|
animation: lineReveal 0.8s var(--ease-out) 1s forwards;
|
|
}
|
|
|
|
.variant-b .ink-line-2 {
|
|
bottom: 20%;
|
|
right: 15%;
|
|
width: 160px;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, transparent, rgba(28, 28, 28, 0.08), transparent);
|
|
transform: rotate(5deg);
|
|
opacity: 0;
|
|
animation: lineReveal 0.8s var(--ease-out) 1.2s forwards;
|
|
}
|
|
|
|
.variant-b .ink-line-3 {
|
|
top: 40%;
|
|
left: 45%;
|
|
width: 120px;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, rgba(196, 30, 58, 0.06), transparent);
|
|
transform: rotate(-3deg);
|
|
opacity: 0;
|
|
animation: lineReveal 0.8s var(--ease-out) 1.4s forwards;
|
|
}
|
|
|
|
.variant-b .ink-seal {
|
|
position: absolute;
|
|
bottom: 18%;
|
|
right: 10%;
|
|
width: 64px;
|
|
height: 64px;
|
|
border: 2px solid var(--cinnabar);
|
|
border-radius: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: var(--font-calligraphy);
|
|
color: var(--cinnabar);
|
|
font-size: 24px;
|
|
opacity: 0;
|
|
animation: stampIn 0.5s var(--ease-out) 1.5s forwards;
|
|
transform: rotate(-5deg);
|
|
}
|
|
|
|
@keyframes inkReveal {
|
|
0% { opacity: 0; transform: scale(0.6); }
|
|
100% { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
@keyframes inkStrokeReveal {
|
|
0% { opacity: 0; transform: translateY(-50%) scale(0.9); }
|
|
100% { opacity: 1; transform: translateY(-50%) scale(1); }
|
|
}
|
|
|
|
@keyframes lineReveal {
|
|
0% { opacity: 0; transform-origin: left; scaleX(0); }
|
|
100% { opacity: 1; transform-origin: left; scaleX(1); }
|
|
}
|
|
|
|
.variant-b .hero-inner {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4rem;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.variant-b .hero-inner {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.variant-b .ink-stroke { display: none; }
|
|
.variant-b .ink-seal { display: none; }
|
|
}
|
|
|
|
/* ===== VARIANT C: 中间路线 ===== */
|
|
.variant-c .hero {
|
|
background: var(--paper);
|
|
}
|
|
|
|
.variant-c .hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background:
|
|
radial-gradient(ellipse at 20% 50%, rgba(196, 30, 58, 0.03) 0%, transparent 50%),
|
|
radial-gradient(ellipse at 80% 20%, rgba(28, 28, 28, 0.02) 0%, transparent 50%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.variant-c .hero-inner {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 4rem;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.variant-c .hero-inner {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.variant-c .feature-card { display: none; }
|
|
}
|
|
|
|
.variant-c .feature-card {
|
|
position: relative;
|
|
border-radius: 20px;
|
|
padding: 2.5rem;
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(12px);
|
|
opacity: 0;
|
|
animation: fadeUp 0.8s var(--ease-out) 0.6s forwards;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.variant-c .feature-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 20px;
|
|
padding: 1px;
|
|
background: conic-gradient(
|
|
from var(--card-angle, 0deg),
|
|
rgba(196, 30, 58, 0.15),
|
|
rgba(28, 28, 28, 0.05),
|
|
rgba(196, 30, 58, 0.1),
|
|
rgba(28, 28, 28, 0.05),
|
|
rgba(196, 30, 58, 0.15)
|
|
);
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
animation: rotateBorder 6s linear infinite;
|
|
}
|
|
|
|
@keyframes rotateBorder {
|
|
to { --card-angle: 360deg; }
|
|
}
|
|
|
|
@property --card-angle {
|
|
syntax: '<angle>';
|
|
initial-value: 0deg;
|
|
inherits: false;
|
|
}
|
|
|
|
.variant-c .feature-card .card-glow {
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: 20px;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.variant-c .feature-card:hover .card-glow {
|
|
opacity: 1;
|
|
}
|
|
|
|
.variant-c .card-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 12px;
|
|
background: var(--cinnabar-soft);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.variant-c .card-icon svg {
|
|
width: 22px;
|
|
height: 22px;
|
|
color: var(--cinnabar);
|
|
}
|
|
|
|
.variant-c .card-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.variant-c .card-desc {
|
|
font-size: 0.9rem;
|
|
color: var(--ink-light);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.variant-c .card-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 1rem;
|
|
margin-top: 1.5rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid #F0F0F0;
|
|
}
|
|
|
|
.variant-c .stat-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.variant-c .stat-value {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.variant-c .stat-label {
|
|
font-size: 0.75rem;
|
|
color: var(--ink-muted);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* ===== TWEAKS PANEL ===== */
|
|
.tweaks {
|
|
position: fixed;
|
|
bottom: 24px;
|
|
right: 24px;
|
|
z-index: 100;
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
.tweaks-toggle {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 14px;
|
|
border: 1px solid #E5E5E5;
|
|
background: white;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
|
transition: all 0.2s var(--ease-out);
|
|
font-size: 20px;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.tweaks-toggle:hover {
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.tweaks-panel {
|
|
position: absolute;
|
|
bottom: 60px;
|
|
right: 0;
|
|
width: 280px;
|
|
background: white;
|
|
border: 1px solid #E5E5E5;
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
box-shadow: 0 16px 48px rgba(0,0,0,0.12);
|
|
display: none;
|
|
}
|
|
|
|
.tweaks-panel.open { display: block; }
|
|
|
|
.tweaks-title {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: var(--ink-muted);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.tweak-group {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.tweak-label {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--ink-light);
|
|
margin-bottom: 8px;
|
|
display: block;
|
|
}
|
|
|
|
.tweak-options {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.tweak-btn {
|
|
flex: 1;
|
|
padding: 8px 4px;
|
|
border: 1px solid #E5E5E5;
|
|
border-radius: 8px;
|
|
background: white;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--ink-light);
|
|
cursor: pointer;
|
|
transition: all 0.15s var(--ease-out);
|
|
font-family: var(--font-sans);
|
|
text-align: center;
|
|
}
|
|
|
|
.tweak-btn:hover {
|
|
border-color: var(--ink);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.tweak-btn.active {
|
|
background: var(--ink);
|
|
color: white;
|
|
border-color: var(--ink);
|
|
}
|
|
|
|
/* ===== NAV BAR (shared across variants) ===== */
|
|
.nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 50;
|
|
height: 64px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 2rem;
|
|
background: rgba(255,255,255,0.9);
|
|
backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid rgba(0,0,0,0.05);
|
|
}
|
|
|
|
.nav-brand {
|
|
font-family: var(--font-brand);
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: var(--ink);
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 2rem;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.nav-link {
|
|
font-size: 14px;
|
|
color: var(--ink-light);
|
|
text-decoration: none;
|
|
transition: color 0.15s;
|
|
}
|
|
|
|
.nav-link:hover { color: var(--ink); }
|
|
|
|
.nav-cta {
|
|
margin-left: 1.5rem;
|
|
padding: 8px 20px;
|
|
background: var(--cinnabar);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
font-family: var(--font-sans);
|
|
}
|
|
|
|
/* ===== SECTION BELOW HERO (for context) ===== */
|
|
.section-below {
|
|
padding: 5rem 2rem;
|
|
background: var(--paper-warm);
|
|
text-align: center;
|
|
}
|
|
|
|
.section-below h2 {
|
|
font-size: 1.875rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.section-below p {
|
|
color: var(--ink-light);
|
|
max-width: 480px;
|
|
margin: 0 auto;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* Ink stroke SVG for variant B */
|
|
.ink-circle-svg {
|
|
stroke: var(--ink);
|
|
fill: none;
|
|
stroke-width: 1.5;
|
|
opacity: 0.12;
|
|
}
|
|
|
|
.ink-circle-svg .inner {
|
|
stroke: var(--cinnabar);
|
|
opacity: 0.18;
|
|
}
|
|
|
|
.ink-circle-svg .dot {
|
|
fill: var(--cinnabar);
|
|
stroke: none;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.ink-circle-svg .accent-ring {
|
|
stroke: var(--cinnabar);
|
|
stroke-width: 2;
|
|
opacity: 0.15;
|
|
stroke-dasharray: 8 12;
|
|
animation: dashRotate 20s linear infinite;
|
|
}
|
|
|
|
@keyframes dashRotate {
|
|
to { stroke-dashoffset: -200; }
|
|
}
|
|
|
|
/* Variant label */
|
|
.variant-label {
|
|
position: fixed;
|
|
top: 80px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 6px 16px;
|
|
background: var(--ink);
|
|
color: white;
|
|
border-radius: 999px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
z-index: 40;
|
|
opacity: 0.7;
|
|
transition: opacity 0.3s;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.variant-label:hover { opacity: 1; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="nav">
|
|
<div class="nav-brand">睿新致远</div>
|
|
<div class="nav-links">
|
|
<a class="nav-link" href="#">产品</a>
|
|
<a class="nav-link" href="#">解决方案</a>
|
|
<a class="nav-link" href="#">关于</a>
|
|
</div>
|
|
<button class="nav-cta">立即咨询</button>
|
|
</nav>
|
|
|
|
<div class="variant-label" id="variantLabel">原版: 当前生产</div>
|
|
|
|
<!-- ===== VARIANT ORIG: 原版 (当前生产) ===== -->
|
|
<div id="variantOrig" class="variant-orig">
|
|
<section class="hero">
|
|
<div class="hero-inner">
|
|
<div class="hero-content">
|
|
<div class="hero-tag">智连未来，成长伙伴</div>
|
|
<h1 class="hero-brand">睿新致远</h1>
|
|
<p class="hero-subtitle">
|
|
<span class="accent">企业数字化转型服务商</span>
|
|
</p>
|
|
<p class="hero-desc">
|
|
以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者
|
|
</p>
|
|
<div class="hero-actions">
|
|
<button class="btn-primary">
|
|
立即咨询
|
|
<svg class="arrow-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
|
</button>
|
|
<button class="btn-outline">探索产品</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- ===== VARIANT A: 排版驱动 ===== -->
|
|
<div id="variantA" class="variant-a" style="display:none;">
|
|
<section class="hero">
|
|
<div class="hero-inner">
|
|
<div>
|
|
<div class="hero-tag">智连未来，成长伙伴</div>
|
|
<h1 class="hero-brand">
|
|
睿新致远
|
|
<span class="seal-mark">睿</span>
|
|
</h1>
|
|
<p class="hero-subtitle">
|
|
<span class="accent">企业数字化转型服务商</span>
|
|
</p>
|
|
<p class="hero-desc">
|
|
以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者
|
|
</p>
|
|
<div class="hero-actions">
|
|
<button class="btn-primary">
|
|
立即咨询
|
|
<svg class="arrow-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
|
</button>
|
|
<button class="btn-outline">探索产品</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- ===== VARIANT B: 墨韵背景 ===== -->
|
|
<div id="variantB" class="variant-b" style="display:none;">
|
|
<section class="hero">
|
|
<div class="ink-bg">
|
|
<div class="ink-blob ink-blob-1"></div>
|
|
<div class="ink-blob ink-blob-2"></div>
|
|
<div class="ink-blob ink-blob-3"></div>
|
|
<div class="ink-blob ink-blob-4"></div>
|
|
</div>
|
|
<div class="ink-line ink-line-1"></div>
|
|
<div class="ink-line ink-line-2"></div>
|
|
<div class="ink-line ink-line-3"></div>
|
|
<div class="ink-seal">睿</div>
|
|
<div class="ink-stroke">
|
|
<svg viewBox="0 0 440 440" class="ink-circle-svg">
|
|
<circle cx="220" cy="220" r="190" class="accent-ring"/>
|
|
<circle cx="220" cy="220" r="160" class="inner"/>
|
|
<circle cx="220" cy="220" r="120"/>
|
|
<circle cx="220" cy="220" r="80" class="inner"/>
|
|
<circle cx="220" cy="220" r="40"/>
|
|
<circle cx="220" cy="30" r="5" class="dot"/>
|
|
<circle cx="410" cy="220" r="4" class="dot"/>
|
|
<circle cx="220" cy="410" r="4" class="dot"/>
|
|
<circle cx="30" cy="220" r="5" class="dot"/>
|
|
<line x1="220" y1="60" x2="220" y2="380" opacity="0.06"/>
|
|
<line x1="60" y1="220" x2="380" y2="220" opacity="0.06"/>
|
|
<line x1="85" y1="85" x2="355" y2="355" opacity="0.03"/>
|
|
<line x1="355" y1="85" x2="85" y2="355" opacity="0.03"/>
|
|
</svg>
|
|
</div>
|
|
<div class="hero-inner">
|
|
<div>
|
|
<div class="hero-tag">智连未来，成长伙伴</div>
|
|
<h1 class="hero-brand">睿新致远</h1>
|
|
<p class="hero-subtitle">
|
|
<span class="accent">企业数字化转型服务商</span>
|
|
</p>
|
|
<p class="hero-desc">
|
|
以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者
|
|
</p>
|
|
<div class="hero-actions">
|
|
<button class="btn-primary">
|
|
立即咨询
|
|
<svg class="arrow-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
|
</button>
|
|
<button class="btn-outline">探索产品</button>
|
|
</div>
|
|
</div>
|
|
<div></div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- ===== VARIANT C: 中间路线 ===== -->
|
|
<div id="variantC" class="variant-c" style="display:none;">
|
|
<section class="hero">
|
|
<div class="hero-inner">
|
|
<div>
|
|
<div class="hero-tag">智连未来，成长伙伴</div>
|
|
<h1 class="hero-brand">睿新致远</h1>
|
|
<p class="hero-subtitle">
|
|
<span class="accent">企业数字化转型服务商</span>
|
|
</p>
|
|
<p class="hero-desc">
|
|
以智慧连接数字趋势，以伙伴身份陪您成长——您的数字化转型同行者
|
|
</p>
|
|
<div class="hero-actions">
|
|
<button class="btn-primary">
|
|
立即咨询
|
|
<svg class="arrow-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
|
</button>
|
|
<button class="btn-outline">探索产品</button>
|
|
</div>
|
|
</div>
|
|
<div class="feature-card" id="featureCard">
|
|
<div class="card-glow" id="cardGlow"></div>
|
|
<div class="card-icon">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
|
|
</div>
|
|
<div class="card-title">全场景数字化解决方案</div>
|
|
<div class="card-desc">覆盖 ERP、CRM、数据分析等企业核心场景，一站式规划与落地</div>
|
|
<div class="card-stats">
|
|
<div class="stat-item">
|
|
<div class="stat-value">6</div>
|
|
<div class="stat-label">研发产品</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">5+</div>
|
|
<div class="stat-label">行业覆盖</div>
|
|
</div>
|
|
<div class="stat-item">
|
|
<div class="stat-value">12+</div>
|
|
<div class="stat-label">年核心经验</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Context section below -->
|
|
<div class="section-below">
|
|
<h2>值得<span style="color:var(--cinnabar);font-family:var(--font-calligraphy)">信赖</span></h2>
|
|
<p>用心打磨产品，以专业赢得信赖</p>
|
|
</div>
|
|
|
|
<!-- TWEAKS PANEL -->
|
|
<div class="tweaks">
|
|
<div class="tweaks-panel" id="tweaksPanel">
|
|
<div class="tweaks-title">Tweaks</div>
|
|
<div class="tweak-group">
|
|
<span class="tweak-label">Hero 变体</span>
|
|
<div class="tweak-options" style="flex-wrap:wrap;">
|
|
<button class="tweak-btn active" data-variant="orig">原版</button>
|
|
<button class="tweak-btn" data-variant="a">排版驱动</button>
|
|
<button class="tweak-btn" data-variant="b">墨韵背景</button>
|
|
<button class="tweak-btn" data-variant="c">中间路线</button>
|
|
</div>
|
|
</div>
|
|
<div class="tweak-group">
|
|
<span class="tweak-label">品牌名字号</span>
|
|
<div class="tweak-options">
|
|
<button class="tweak-btn" data-size="compact">紧凑</button>
|
|
<button class="tweak-btn active" data-size="default">默认</button>
|
|
<button class="tweak-btn" data-size="grand">宏大</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="tweaks-toggle" id="tweaksToggle" aria-label="Toggle tweaks">⚙</button>
|
|
</div>
|
|
|
|
<script>
|
|
const variants = {
|
|
orig: document.getElementById('variantOrig'),
|
|
a: document.getElementById('variantA'),
|
|
b: document.getElementById('variantB'),
|
|
c: document.getElementById('variantC')
|
|
};
|
|
|
|
const variantLabels = {
|
|
orig: '原版: 当前生产',
|
|
a: 'A: 排版驱动',
|
|
b: 'B: 墨韵背景',
|
|
c: 'C: 中间路线'
|
|
};
|
|
|
|
const label = document.getElementById('variantLabel');
|
|
let currentVariant = 'orig';
|
|
|
|
function switchVariant(v) {
|
|
Object.values(variants).forEach(el => el.style.display = 'none');
|
|
variants[v].style.display = 'block';
|
|
label.textContent = variantLabels[v];
|
|
currentVariant = v;
|
|
|
|
document.querySelectorAll('[data-variant]').forEach(btn => {
|
|
btn.classList.toggle('active', btn.dataset.variant === v);
|
|
});
|
|
|
|
if (v === 'c') {
|
|
initCardGlow();
|
|
}
|
|
}
|
|
|
|
document.querySelectorAll('[data-variant]').forEach(btn => {
|
|
btn.addEventListener('click', () => switchVariant(btn.dataset.variant));
|
|
});
|
|
|
|
const sizeMultipliers = {
|
|
compact: { brand: 'clamp(2.5rem, 6vw, 4.5rem)', spacing: '1rem' },
|
|
default: { brand: 'clamp(3.5rem, 8vw, 6rem)', spacing: '1.5rem' },
|
|
grand: { brand: 'clamp(4.5rem, 12vw, 8rem)', spacing: '2rem' }
|
|
};
|
|
|
|
document.querySelectorAll('[data-size]').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
document.querySelectorAll('[data-size]').forEach(b => b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
|
|
const size = sizeMultipliers[btn.dataset.size];
|
|
document.querySelectorAll('.hero-brand').forEach(el => {
|
|
el.style.fontSize = size.brand;
|
|
});
|
|
document.querySelectorAll('.hero-tag').forEach(el => {
|
|
el.style.marginBottom = size.spacing;
|
|
});
|
|
});
|
|
});
|
|
|
|
const tweaksToggle = document.getElementById('tweaksToggle');
|
|
const tweaksPanel = document.getElementById('tweaksPanel');
|
|
tweaksToggle.addEventListener('click', () => {
|
|
tweaksPanel.classList.toggle('open');
|
|
});
|
|
|
|
function initCardGlow() {
|
|
const card = document.getElementById('featureCard');
|
|
const glow = document.getElementById('cardGlow');
|
|
if (!card || !glow) return;
|
|
|
|
card.addEventListener('mousemove', (e) => {
|
|
const rect = card.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
glow.style.background = `radial-gradient(400px circle at ${x}px ${y}px, rgba(196, 30, 58, 0.06), transparent 40%)`;
|
|
glow.style.opacity = '1';
|
|
});
|
|
|
|
card.addEventListener('mouseleave', () => {
|
|
glow.style.opacity = '0';
|
|
});
|
|
}
|
|
|
|
switchVariant('orig');
|
|
</script>
|
|
</body>
|
|
</html>
|