/* ============================================ 弈友圈 · 夜弈 · 星棋 美学：深色高级 × 国风水墨夜局 主色：#4765F9（与小程序统一） ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* 深色背景层（由深到浅） */ --bg-deep: #05070e; --bg: #0a0e1a; --bg-elev: #111726; --bg-card: #161d31; --bg-card-hi: #1d2641; --bg-card-warm: #1b1730; /* 文字（暖白系，避免死冷） */ --text: #e9ebf5; --text-soft: #b4bcd6; --text-mute: #78809e; --text-faint: #4a5273; /* 主色 #4765F9（小程序统一） */ --primary: #4765f9; --primary-dark: #2a3fcc; --primary-light: #6f87ff; --primary-lighter: #9babff; --primary-soft: rgba(71, 101, 249, .14); --primary-glow: rgba(71, 101, 249, .35); /* 月光金（深色下点缀，更显珍贵） */ --gold: #d4b876; --gold-light: #e8d09a; --gold-soft: rgba(212, 184, 118, .14); /* 朱砂（极少量，深色下克制） */ --vermillion: #d04548; /* 线条（白色低透明度） */ --line: rgba(255, 255, 255, .09); --line-soft: rgba(255, 255, 255, .045); --line-primary: rgba(71, 101, 249, .38); /* 尺寸 */ --max-w: 1200px; --header-h: 76px; /* 字体 */ --font-cn: "Noto Serif SC", "Source Han Serif SC", "STSong", serif; --font-en: "Cormorant Garamond", "Times New Roman", serif; --font-brush: "Ma Shan Zheng", "ZCOOL XiaoWei", "STKaiti", "KaiTi", cursive; --font-mono: "JetBrains Mono", "SF Mono", "Consolas", monospace; /* 主题切换：导航毛玻璃背景 */ --header-bg: rgba(10, 14, 26, .82); color-scheme: dark; } /* ============================================ 浅色主题 · 宣纸 · 晨弈 在 时激活 主色 #4765F9 不变，底色转暖宣纸 ============================================ */ [data-theme="light"] { --bg-deep: #e6e0d2; --bg: #f4f1ea; --bg-elev: #ece7db; --bg-card: #ffffff; --bg-card-hi: #f7f3ea; --bg-card-warm: #efe7d6; --text: #1a1f2e; --text-soft: #3d4458; --text-mute: #6b7388; --text-faint: #9aa0b3; --primary: #4765f9; --primary-dark: #2a3fcc; --primary-light: #5a7af0; --primary-lighter: #7e96ff; --primary-soft: rgba(71, 101, 249, .10); --primary-glow: rgba(71, 101, 249, .24); --gold: #b08442; --gold-light: #c79a52; --gold-soft: rgba(176, 132, 66, .14); --vermillion: #c8383a; --line: rgba(26, 31, 46, .12); --line-soft: rgba(26, 31, 46, .06); --line-primary: rgba(71, 101, 249, .30); --header-bg: rgba(244, 241, 234, .85); color-scheme: light; } /* 浅色：纸纹由 screen（星尘）改 multiply（纸理）*/ [data-theme="light"] .grain { mix-blend-mode: multiply; opacity: .4; } /* 浅色：logo 浅蓝在浅宣纸上会糊，加深色阴影 + 稍粗边框立边界 */ [data-theme="light"] .logo-img { box-shadow: 0 0 0 1px rgba(26, 31, 46, .08), 0 4px 12px rgba(26, 31, 46, .12); } [data-theme="light"] .logo:hover .logo-img { box-shadow: 0 0 0 1px rgba(26, 31, 46, .12), 0 6px 16px rgba(26, 31, 46, .18); } html { scroll-behavior: smooth; } body { font-family: var(--font-cn); color: var(--text); background: var(--bg); line-height: 1.75; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; position: relative; } /* ---------- 背景层：棋盘网格 + 星尘 ---------- */ .grid-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 48px 48px; background-position: -1px -1px; opacity: .6; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 90%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 90%); } .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .5; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.65 0 0 0 0 0.85 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .container { max-width: var(--max-w); margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ::selection { background: var(--primary); color: #fff; } /* ============================================ 导航栏 ============================================ */ .header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); z-index: 100; background: transparent; transition: background .4s ease, border-color .4s ease; border-bottom: 1px solid transparent; } .header.scrolled { background: var(--header-bg); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--line); } .nav-wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; } .logo { display: flex; align-items: center; gap: 12px; } .logo-seal { width: 38px; height: 38px; background: var(--primary); color: #fff; font-family: var(--font-cn); font-weight: 900; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 2px 0 var(--primary-dark), 0 0 18px rgba(71, 101, 249, .45); } .logo-seal::after { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,.3); } .logo-seal--sm { width: 32px; height: 32px; font-size: 1.15rem; } /* 新 logo（图片版）—— 圆形 mask + 主色光晕调和 */ .logo-img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block; flex-shrink: 0; background: #f0f6ff; border: 1.5px solid var(--primary); box-shadow: 0 0 18px var(--primary-glow); transition: transform .35s ease, box-shadow .35s ease; } .logo:hover .logo-img { transform: rotate(-6deg) scale(1.05); box-shadow: 0 0 24px var(--primary-glow); } .logo-img--sm { width: 32px; height: 32px; box-shadow: 0 0 12px var(--primary-glow); } .logo-text { display: flex; flex-direction: column; line-height: 1.1; font-family: var(--font-cn); font-weight: 700; font-size: 1.05rem; letter-spacing: 2px; color: var(--text); } .logo-text em { font-family: var(--font-en); font-style: normal; font-size: .55rem; letter-spacing: 3px; color: var(--text-mute); font-weight: 500; margin-top: 2px; text-transform: uppercase; } .nav { display: flex; align-items: center; gap: 36px; } .nav a { font-size: .92rem; font-weight: 500; color: var(--text-soft); letter-spacing: 1px; position: relative; transition: color .3s; padding: 6px 0; } .nav a:not(.nav-cta)::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background: var(--primary); transition: width .3s ease, left .3s ease; } .nav a:not(.nav-cta):hover { color: var(--primary-light); } .nav a:not(.nav-cta):hover::after { width: 100%; left: 0; } .nav-cta { background: var(--primary); color: #fff !important; padding: 9px 20px !important; font-size: .85rem !important; letter-spacing: 2px !important; transition: background .3s, transform .3s, box-shadow .3s !important; box-shadow: 0 0 0 0 var(--primary-glow); } .nav-cta:hover { background: var(--primary-light); transform: translateY(-1px); box-shadow: 0 6px 20px var(--primary-glow); } /* 主题切换按钮 */ .theme-toggle { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--primary-soft); border: 1px solid var(--line-primary); border-radius: 50%; cursor: pointer; color: var(--text); flex-shrink: 0; transition: transform .4s ease, border-color .3s, background .3s; } .theme-toggle:hover { transform: rotate(20deg); border-color: var(--primary); } .theme-toggle:active { transform: rotate(20deg) scale(.94); } .theme-toggle svg { width: 17px; height: 17px; display: block; } /* 默认深色：显示太阳（点 → 浅色）；浅色：显示月亮（点 → 深色）*/ .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } [data-theme="light"] .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon { display: block; } .menu-toggle { display: none; width: 32px; height: 24px; background: none; border: 0; cursor: pointer; position: relative; } .menu-toggle span { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--text); transition: transform .3s, opacity .3s, top .3s; } .menu-toggle span:nth-child(1) { top: 4px; } .menu-toggle span:nth-child(2) { top: 11px; } .menu-toggle span:nth-child(3) { top: 18px; } .menu-toggle.open span:nth-child(1) { top: 11px; transform: rotate(45deg); } .menu-toggle.open span:nth-child(2) { opacity: 0; } .menu-toggle.open span:nth-child(3) { top: 11px; transform: rotate(-45deg); } /* ============================================ 第一屏 · 神之一手（对弈落子） ============================================ */ .opening { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--header-h) + 30px) 20px 60px; overflow: hidden; background: radial-gradient(ellipse at 50% 82%, rgba(71,101,249,.20) 0%, transparent 52%), radial-gradient(ellipse at 18% 22%, rgba(71,101,249,.10) 0%, transparent 42%), linear-gradient(180deg, var(--bg) 0%, var(--bg-elev) 50%, var(--bg-deep) 100%); } /* 水墨山水背景 */ .opening-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .opening-mountains { position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; } /* 流云 */ .opening-cloud { position: absolute; opacity: .18; border-radius: 50%; filter: blur(22px); background: radial-gradient(ellipse, rgba(71,101,249,.45), transparent 70%); } .cloud-a { top: 14%; left: -8%; width: 360px; height: 80px; animation: cloudDrift 30s ease-in-out infinite; } .cloud-b { top: 22%; right: -10%; width: 440px; height: 100px; animation: cloudDrift 38s ease-in-out infinite -12s; } @keyframes cloudDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(50px); } } /* 墨韵晕染 */ .opening-ink { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px); } .opening-ink-1 { width: 560px; height: 560px; top: -12%; right: -8%; background: radial-gradient(circle at 40% 40%, rgba(71,101,249,.18), transparent 60%); animation: inkPulse 14s ease-in-out infinite; } .opening-ink-2 { width: 400px; height: 400px; bottom: 8%; left: -6%; background: radial-gradient(circle at 60% 60%, rgba(111,135,255,.10), transparent 60%); animation: inkPulse 18s ease-in-out infinite reverse; } @keyframes inkPulse { 0%, 100% { transform: scale(1) translate(0); opacity: .65; } 50% { transform: scale(1.15) translate(-20px, 15px); opacity: 1; } } /* 标题区 */ .opening-head { position: relative; z-index: 3; text-align: center; margin-bottom: 10px; opacity: 0; animation: rise 1s ease .2s forwards; } .opening-eyebrow { display: block; font-family: var(--font-brush); font-size: 1rem; color: var(--text-mute); letter-spacing: 6px; margin-bottom: 14px; } .opening-title { position: relative; display: inline-block; } .title-brush { font-family: var(--font-brush); font-size: clamp(4rem, 11vw, 8.5rem); font-weight: 400; color: var(--text); letter-spacing: 12px; line-height: 1; display: inline-block; position: relative; text-shadow: 0 4px 40px rgba(71,101,249,.35); } .title-brush::after { content: ''; position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); width: 60%; height: 3px; background: linear-gradient(90deg, transparent, var(--primary), transparent); opacity: .7; } .opening-sub { margin-top: 22px; font-family: var(--font-en); font-style: italic; font-size: clamp(.95rem, 1.4vw, 1.15rem); color: var(--text-mute); letter-spacing: 2px; } /* 对弈场景 */ .opening-scene { position: relative; z-index: 2; width: 100%; max-width: 1100px; margin: 0 auto; opacity: 0; animation: rise 1.4s ease .5s forwards; } .duel-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 24px 60px rgba(0,0,0,.5)); } /* 神之一手 · 光晕脉冲 */ .divine-glow { transform-origin: 600px 400px; animation: divinePulse 2.4s ease-in-out infinite; } @keyframes divinePulse { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } } /* 落点十字标记闪烁 */ .divine-mark { animation: markBlink 1.6s ease-in-out infinite; } @keyframes markBlink { 0%, 100% { opacity: .55; } 50% { opacity: .15; } } /* 悬停黑子 · 上下浮动（即将落下） */ .divine-stone { transform-origin: 600px 378px; animation: stoneHover 2.2s ease-in-out infinite; } @keyframes stoneHover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* 墨韵扩散环 */ .ink-ring-1 { animation: ringSpread 3s ease-out infinite; transform-origin: 600px 400px; } .ink-ring-2 { animation: ringSpread 3s ease-out infinite .8s; transform-origin: 600px 400px; } @keyframes ringSpread { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(1.3); opacity: 0; } } /* 两位棋手 · 呼吸微动（坐姿沉稳起伏）*/ .left-player { transform-origin: 260px 470px; animation: playerBreathe 5.4s ease-in-out infinite; } .right-player { transform-origin: 940px 470px; animation: playerBreathe 6.2s ease-in-out infinite 1.1s; } @keyframes playerBreathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.004); } } /* 落子手臂 · 轻微前伸摆动（凝神将落）*/ .left-arm { transform-origin: 294px 348px; animation: armReach 4.8s ease-in-out infinite; } @keyframes armReach { 0%, 100% { transform: translateY(0) rotate(0deg); } 45% { transform: translateY(1px) rotate(.4deg); } 55% { transform: translateY(0) rotate(0deg); } } /* 右手搭盘 · 极轻起伏（随呼吸）*/ .right-arm { transform-origin: 906px 348px; animation: playerBreathe 6.2s ease-in-out infinite 1.1s; } /* 第一屏滚动提示 */ .scroll-hint--opening { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 5; opacity: 0; animation: fadeIn 1s ease 1.6s forwards; } .scroll-hint--opening .scroll-text { font-family: var(--font-cn); font-size: .78rem; letter-spacing: 4px; color: var(--text-mute); writing-mode: horizontal-tb; } .scroll-hint--opening .scroll-line { width: 1px; height: 36px; background: linear-gradient(to bottom, var(--text-mute), transparent); position: relative; overflow: hidden; } .scroll-hint--opening .scroll-line::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 40%; background: var(--primary); animation: scrollLine 2s ease-in-out infinite; } @keyframes scrollLine { 0% { top: -40%; } 100% { top: 100%; } } @keyframes fadeIn { to { opacity: 1; } } @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ 第二屏 · 方寸之间（Hero） ============================================ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: calc(var(--header-h) + 60px) 0 80px; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 10%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, var(--primary-soft), transparent 60%); filter: blur(40px); z-index: 0; animation: drift 18s ease-in-out infinite; } .hero::after { content: ''; position: absolute; bottom: -20%; left: -10%; width: 500px; height: 500px; background: radial-gradient(circle, var(--gold-soft), transparent 60%); filter: blur(50px); z-index: 0; animation: drift 22s ease-in-out infinite reverse; } @keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30px, 20px) scale(1.1); } } .hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: center; width: 100%; } .hero-left { position: relative; } .hero-eyebrow { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; opacity: 0; animation: rise .8s ease .1s forwards; } .eyebrow-line { width: 48px; height: 1px; background: var(--primary); } .eyebrow-text { font-family: var(--font-en); font-size: .82rem; letter-spacing: 3px; color: var(--primary-light); font-weight: 500; text-transform: uppercase; } .hero-title { margin-bottom: 28px; opacity: 0; animation: rise 1s ease .25s forwards; } .title-cn { display: block; font-family: var(--font-cn); font-weight: 900; font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1.1; letter-spacing: 4px; color: var(--text); position: relative; } .title-cn--accent { color: var(--primary-light); margin-left: clamp(20px, 4vw, 60px); position: relative; } .title-cn--accent::before { content: ''; position: absolute; left: -clamp(30px, 5vw, 60px); top: 50%; width: clamp(20px, 3vw, 36px); height: 1px; background: var(--primary); } .title-en { display: block; font-family: var(--font-en); font-style: italic; font-size: clamp(1rem, 1.4vw, 1.25rem); color: var(--text-mute); margin-top: 20px; letter-spacing: .5px; font-weight: 400; } .title-en em { color: var(--gold); font-style: italic; } .hero-lead { font-size: 1.02rem; color: var(--text-soft); line-height: 2; margin-bottom: 40px; max-width: 480px; opacity: 0; animation: rise 1s ease .4s forwards; } .hero-actions { display: flex; gap: 16px; opacity: 0; animation: rise 1s ease .55s forwards; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; font-family: var(--font-cn); font-size: .95rem; font-weight: 500; letter-spacing: 2px; cursor: pointer; border: 0; transition: all .35s cubic-bezier(.4, 0, .2, 1); position: relative; overflow: hidden; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary svg { transition: transform .35s; } .btn-primary::before { content: ''; position: absolute; inset: 0; background: var(--primary-light); transform: translateY(100%); transition: transform .4s cubic-bezier(.4, 0, .2, 1); z-index: 0; } .btn-primary:hover::before { transform: translateY(0); } .btn-primary:hover svg { transform: translateX(4px); } .btn-primary span, .btn-primary svg { position: relative; z-index: 1; } .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); } .btn-ghost:hover { background: var(--bg-card); border-color: var(--primary); color: var(--primary-light); } /* 右侧棋盘卡 */ .hero-right { position: relative; opacity: 0; animation: rise 1.2s ease .5s forwards; } .board-card { position: relative; background: var(--bg-card-warm); padding: 28px; border: 1px solid var(--line-primary); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 30px 70px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(71,101,249,.08), 0 0 60px -20px rgba(71,101,249,.25); transform: rotate(-1.2deg); transition: transform .6s cubic-bezier(.4, 0, .2, 1), box-shadow .6s; } .board-card:hover { transform: rotate(0deg); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 40px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(71,101,249,.18), 0 0 80px -20px rgba(71,101,249,.4); } .board { width: 100%; height: auto; display: block; } .board-tag { position: absolute; display: flex; align-items: center; gap: 8px; background: var(--primary); color: #fff; padding: 6px 14px; font-size: .72rem; letter-spacing: 2px; font-weight: 500; z-index: 3; box-shadow: 0 4px 16px rgba(71,101,249,.4); } .board-tag--1 { top: -14px; left: 20px; animation: tagFloat 4s ease-in-out infinite; } .board-tag--2 { bottom: -14px; right: 30px; background: var(--bg-card); color: var(--text); border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(0,0,0,.4); animation: tagFloat 4s ease-in-out infinite 2s; } .tag-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.6s ease-in-out infinite; } .tag-dot--gold { background: var(--gold); } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } } @keyframes tagFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .board-meta { position: absolute; bottom: 12px; left: 28px; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: .7rem; color: var(--text-mute); letter-spacing: 1px; } .board-meta .dot { width: 3px; height: 3px; background: var(--text-faint); border-radius: 50%; } /* 印章（蓝印泥，主色统一） */ .hero-seal { position: absolute; top: -30px; right: -20px; z-index: 4; animation: sealStamp 1s cubic-bezier(.5, 1.8, .5, 1) 1.2s both; } .seal-box { width: 56px; height: 56px; background: var(--primary); color: #fff; font-family: var(--font-brush); font-size: .8rem; font-weight: 400; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; text-align: center; padding: 4px; transform: rotate(8deg); position: relative; box-shadow: 0 4px 20px rgba(71,101,249,.5), 0 0 0 1px rgba(111,135,255,.3); } .seal-box::before { content: ''; position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,.35); } @keyframes sealStamp { 0% { opacity: 0; transform: scale(2) rotate(-20deg); } 60% { opacity: 1; transform: scale(.9) rotate(12deg); } 100% { opacity: 1; transform: scale(1) rotate(8deg); } } /* ============================================ 数据条 ============================================ */ .stats { padding: 48px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-elev); position: relative; z-index: 2; } .stats-grid { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .stat-item { flex: 1; text-align: center; position: relative; } .stat-num { font-family: var(--font-en); font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 600; color: var(--text); line-height: 1; display: inline-block; } .stat-suffix { font-family: var(--font-en); font-size: 1.4rem; color: var(--primary-light); font-weight: 500; margin-left: 2px; } .stat-label { display: block; margin-top: 10px; font-size: .82rem; letter-spacing: 3px; color: var(--text-mute); } .stat-divider { width: 1px; height: 50px; background: var(--line); } /* ============================================ 章节标题通用 ============================================ */ .section-head { display: flex; align-items: flex-start; gap: 28px; margin-bottom: 72px; } .section-no { font-family: var(--font-en); font-size: .9rem; font-weight: 500; letter-spacing: 3px; color: var(--primary-light); padding-top: 14px; position: relative; } .section-no::before { content: ''; position: absolute; top: 0; left: 0; width: 24px; height: 1px; background: var(--primary); } .section-title-wrap { flex: 1; } .section-title { font-family: var(--font-cn); font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 700; color: var(--text); letter-spacing: 4px; line-height: 1.25; } .section-sub { margin-top: 14px; font-size: 1rem; color: var(--text-mute); letter-spacing: 1px; } /* ============================================ 功能 · 编辑式编号列表 ============================================ */ .features { padding: 120px 0; position: relative; z-index: 2; } .feature-list { display: flex; flex-direction: column; } .feature-row { display: grid; grid-template-columns: 80px 1fr 220px; gap: 48px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line); position: relative; transition: padding .4s ease; } .feature-row:last-child { border-bottom: 1px solid var(--line); } .feature-row::before { content: ''; position: absolute; top: -1px; left: 0; width: 0; height: 1px; background: var(--primary); transition: width .6s cubic-bezier(.4, 0, .2, 1); } .feature-row:hover::before { width: 100%; } .feature-row:hover { padding-left: 16px; } .feature-index { font-family: var(--font-en); font-size: 2rem; font-weight: 300; color: var(--text-faint); letter-spacing: 2px; transition: color .4s; } .feature-row:hover .feature-index { color: var(--primary-light); } .feature-body h3 { font-family: var(--font-cn); font-size: 1.55rem; font-weight: 700; color: var(--text); letter-spacing: 2px; margin-bottom: 14px; position: relative; display: inline-block; } .feature-body h3::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 32px; height: 2px; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform .4s ease .1s; } .feature-row:hover .feature-body h3::after { transform: scaleX(1); } .feature-body p { font-size: .98rem; color: var(--text-soft); line-height: 1.9; margin-bottom: 18px; max-width: 520px; } .feature-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .feature-tags li { font-family: var(--font-mono); font-size: .72rem; letter-spacing: 1px; color: var(--text-mute); padding: 4px 10px; border: 1px solid var(--line); background: var(--bg-card); } .feature-row--reverse .feature-visual { order: -1; } .feature-visual { display: flex; align-items: center; justify-content: center; height: 140px; position: relative; } .mini-card { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--line); padding: 16px 20px; width: 100%; box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); transform: rotate(-2deg); transition: transform .4s; } .feature-row:hover .mini-card { transform: rotate(0deg); } .mini-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-light), var(--primary)); flex-shrink: 0; box-shadow: 0 0 12px rgba(71,101,249,.4); } .mini-lines { flex: 1; display: flex; flex-direction: column; gap: 5px; } .mini-lines span { height: 4px; background: var(--line); } .mini-lines span:nth-child(1) { width: 70%; } .mini-lines span:nth-child(2) { width: 50%; } .mini-lines span:nth-child(3) { width: 60%; } .mini-badge { font-family: var(--font-mono); font-size: .72rem; color: #fff; background: var(--primary); padding: 3px 8px; letter-spacing: 1px; } .bracket { position: relative; width: 100%; height: 120px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; align-items: center; } .bracket-node { background: var(--bg-card); border: 1px solid var(--line); padding: 8px 12px; font-family: var(--font-mono); font-size: .78rem; text-align: center; color: var(--text-mute); position: relative; z-index: 2; } .bracket-node--win { background: var(--primary); color: #fff; border-color: var(--primary); } .bracket-final { grid-column: 1 / -1; text-align: center; font-family: var(--font-mono); font-size: .72rem; color: var(--primary-light); letter-spacing: 2px; padding-top: 8px; border-top: 1px dashed var(--line); } .bracket-line { position: absolute; top: 50%; left: 50%; width: 1px; height: 60%; background: var(--line); transform: translate(-50%, -50%); } .mini-board { width: 120px; height: 120px; background: var(--bg-card); border: 1px solid var(--line); position: relative; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 24px 24px; } .mini-stone { position: absolute; width: 18px; height: 18px; border-radius: 50%; } .mini-stone--b { background: radial-gradient(circle at 35% 30%, #555, #050505); top: 24px; left: 24px; box-shadow: 0 2px 6px rgba(0,0,0,.6); } .mini-stone--w { background: radial-gradient(circle at 35% 30%, #fff, #c8c2d8); top: 24px; left: 48px; box-shadow: 0 2px 6px rgba(0,0,0,.4); } .mini-cursor { position: absolute; width: 18px; height: 18px; border: 2px solid var(--primary-light); border-radius: 50%; top: 48px; left: 72px; animation: cursorBlink 1.4s ease-in-out infinite; box-shadow: 0 0 10px rgba(71,101,249,.5); } @keyframes cursorBlink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.15); } } .mini-chart { display: flex; align-items: flex-end; gap: 8px; height: 100px; width: 100%; padding: 12px; background: var(--bg-card); border: 1px solid var(--line); } .mini-chart .bar { flex: 1; height: var(--h); background: var(--text-faint); transition: background .4s; } .mini-chart .bar--accent { background: var(--primary); } .feature-row:hover .mini-chart .bar { background: var(--text-mute); } .feature-row:hover .mini-chart .bar--accent { background: var(--primary-light); } .phone-mock { width: 70px; height: 130px; background: #000; border-radius: 12px; padding: 4px; position: relative; box-shadow: 0 14px 30px -10px rgba(0,0,0,.6), 0 0 0 1px var(--line); } .phone-notch { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 30px; height: 4px; background: var(--bg-card); border-radius: 0 0 4px 4px; } .phone-screen { background: var(--bg-card); height: 100%; border-radius: 8px; padding: 16px 8px 8px; display: flex; flex-direction: column; gap: 6px; } .phone-bar { height: 6px; background: var(--line); border-radius: 2px; } .phone-bar--short { width: 60%; } .phone-bar--accent { background: var(--primary); width: 80%; } /* ============================================ 产品预览 Showcase ============================================ */ .showcase { padding: 120px 0; background: var(--bg-elev); position: relative; z-index: 2; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .showcase-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: center; } .showcase-text .section-no { margin-bottom: 24px; } .showcase-text .section-title { margin-bottom: 24px; } .showcase-text p { font-size: 1rem; color: var(--text-soft); line-height: 2; margin-bottom: 28px; max-width: 420px; } .showcase-list { list-style: none; } .showcase-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: .95rem; color: var(--text); letter-spacing: 1px; } .showcase-list .check { color: var(--primary-light); font-size: .7rem; } .dashboard-mock { background: var(--bg-card); border: 1px solid var(--line); box-shadow: 0 30px 70px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(71,101,249,.06), 0 0 60px -30px rgba(71,101,249,.3); overflow: hidden; transform: perspective(1200px) rotateY(-3deg) rotateX(1deg); transition: transform .6s cubic-bezier(.4, 0, .2, 1), box-shadow .6s; } .dashboard-mock:hover { transform: perspective(1200px) rotateY(0) rotateX(0); box-shadow: 0 40px 80px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(71,101,249,.14), 0 0 80px -30px rgba(71,101,249,.45); } .dash-top { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--bg-deep); border-bottom: 1px solid var(--line); } .dash-dot { width: 10px; height: 10px; border-radius: 50%; } .dash-dot--r { background: #e85a5a; } .dash-dot--y { background: #e8c14a; } .dash-dot--g { background: #6aba6a; } .dash-url { margin-left: 12px; font-family: var(--font-mono); font-size: .72rem; color: var(--text-faint); letter-spacing: 1px; } .dash-body { display: grid; grid-template-columns: 56px 1fr; min-height: 340px; } .dash-side { background: var(--bg-deep); padding: 20px 0; display: flex; flex-direction: column; align-items: center; gap: 18px; } .dash-side-item { width: 28px; height: 28px; background: rgba(255,255,255,.08); border-radius: 4px; } .dash-side-item--active { background: var(--primary); box-shadow: 0 0 0 3px rgba(71,101,249,.25), 0 0 12px rgba(71,101,249,.4); } .dash-main { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: 16px; } .dash-card { background: var(--bg-elev); border: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; gap: 6px; } .dash-card--big { grid-column: 1 / -1; } .dash-card-label { font-size: .72rem; color: var(--text-mute); letter-spacing: 1px; } .dash-card-num { font-family: var(--font-en); font-size: 1.8rem; font-weight: 600; color: var(--text); line-height: 1; } .dash-card-trend { font-family: var(--font-mono); font-size: .72rem; color: var(--primary-light); } .dash-card-chart { margin-top: 8px; height: 40px; } .dash-card-chart svg { width: 100%; height: 100%; } /* ============================================ 理念引言（夜空最亮 · 主色高光段） ============================================ */ .philosophy { padding: 140px 0; text-align: center; position: relative; z-index: 2; background: var(--bg-deep); color: var(--text); overflow: hidden; } .philosophy::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 48px 48px; opacity: .6; } .philosophy::after { content: ''; position: absolute; top: 50%; left: 50%; width: 900px; height: 900px; background: radial-gradient(circle, rgba(71,101,249,.22), transparent 60%); transform: translate(-50%, -50%); filter: blur(40px); } .philosophy .container { position: relative; z-index: 2; } .quote-mark { font-family: var(--font-en); font-size: 8rem; line-height: .8; color: var(--primary-light); opacity: .45; margin-bottom: 20px; font-style: italic; text-shadow: 0 0 40px rgba(71,101,249,.4); } .quote-text { font-family: var(--font-cn); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 400; line-height: 1.9; letter-spacing: 3px; color: var(--text); max-width: 760px; margin: 0 auto; } .quote-text em { font-style: normal; color: var(--primary-lighter); font-weight: 700; position: relative; } .quote-text em::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 8px; background: rgba(71,101,249,.4); z-index: -1; } .quote-attr { margin-top: 40px; display: flex; align-items: center; justify-content: center; gap: 16px; } .attr-line { width: 40px; height: 1px; background: var(--gold); } .attr-text { font-family: var(--font-en); font-size: .82rem; letter-spacing: 4px; color: var(--gold-light); text-transform: uppercase; } /* ============================================ 联系 CTA ============================================ */ .contact { padding: 120px 0; position: relative; z-index: 2; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .contact-left .section-no { margin-bottom: 24px; } .contact-left .section-title { margin-bottom: 24px; } .contact-left p { font-size: 1rem; color: var(--text-soft); line-height: 2; margin-bottom: 32px; } .contact-right { display: flex; flex-direction: column; gap: 4px; } .contact-item { display: flex; align-items: flex-start; gap: 20px; padding: 28px 0; border-top: 1px solid var(--line); position: relative; transition: padding .4s; } .contact-item:last-child { border-bottom: 1px solid var(--line); } .contact-item:hover { padding-left: 12px; } .contact-item:hover .contact-icon { color: var(--primary-light); border-color: var(--primary); background: var(--primary-soft); } .contact-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--text-soft); background: var(--bg-card); border: 1px solid var(--line); flex-shrink: 0; transition: color .4s, background .4s, border-color .4s; } .contact-info { display: flex; flex-direction: column; gap: 4px; flex: 1; } .contact-label { font-family: var(--font-mono); font-size: .68rem; letter-spacing: 2px; color: var(--text-faint); text-transform: uppercase; } .contact-value { font-size: 1.05rem; color: var(--text); font-weight: 500; letter-spacing: 1px; } /* ============================================ Footer ============================================ */ .footer { background: var(--bg-deep); color: var(--text-mute); padding: 64px 0 28px; position: relative; z-index: 2; border-top: 1px solid var(--line); } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--primary), transparent); } .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding-bottom: 36px; border-bottom: 1px solid var(--line-soft); } .footer-brand { display: flex; align-items: center; gap: 14px; } .footer-brand .logo-seal { box-shadow: none; } .footer-name { font-family: var(--font-cn); font-size: 1.2rem; font-weight: 700; color: var(--text); letter-spacing: 3px; } .footer-tagline { font-size: .82rem; color: var(--text-faint); letter-spacing: 2px; margin-top: 4px; } .footer-meta { display: flex; justify-content: flex-end; gap: 64px; } .footer-col h4 { font-family: var(--font-en); font-size: .82rem; font-weight: 500; letter-spacing: 3px; color: var(--gold-light); margin-bottom: 16px; text-transform: uppercase; } .footer-col a { display: block; font-size: .9rem; margin-bottom: 10px; color: var(--text-mute); transition: color .3s, padding .3s; } .footer-col a:hover { color: var(--text); padding-left: 6px; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; font-size: .78rem; letter-spacing: 1px; color: var(--text-faint); } .footer-line { font-family: var(--font-brush); font-size: .95rem; color: var(--primary-light); letter-spacing: 4px; } /* ============================================ 滚动入场动画 ============================================ */ [data-stagger] { opacity: 0; transform: translateY(32px); transition: opacity .9s cubic-bezier(.4, 0, .2, 1), transform .9s cubic-bezier(.4, 0, .2, 1); } [data-stagger].in { opacity: 1; transform: translateY(0); } /* ============================================ 响应式 ============================================ */ @media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; gap: 60px; } .hero-right { max-width: 480px; margin: 0 auto; } .feature-row { grid-template-columns: 60px 1fr 180px; gap: 32px; } .showcase-grid { grid-template-columns: 1fr; gap: 56px; } .contact-grid { grid-template-columns: 1fr; gap: 48px; } } @media (max-width: 768px) { .container { padding: 0 20px; } .nav { position: fixed; top: var(--header-h); left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 12px 24px; max-height: 0; overflow: hidden; transition: max-height .35s ease; align-items: flex-start; } .nav.open { max-height: 320px; } .nav a { padding: 14px 0; width: 100%; border-bottom: 1px solid var(--line-soft); } .nav a:last-child { border-bottom: 0; } .nav-cta { margin-top: 8px; width: auto; } .menu-toggle { display: block; } .opening { padding-top: calc(var(--header-h) + 16px); } .title-brush { letter-spacing: 6px; } .opening-scene { max-width: 100%; } .hero { padding-top: calc(var(--header-h) + 24px); } .title-cn { letter-spacing: 2px; } .title-cn--accent { margin-left: 30px; } .stats-grid { flex-wrap: wrap; gap: 32px; } .stat-divider { display: none; } .stat-item { flex: 1 1 40%; } .section-head { flex-direction: column; gap: 12px; margin-bottom: 48px; } .feature-row { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; } .feature-row--reverse .feature-visual { order: 0; } .feature-visual { height: auto; } .feature-index { font-size: 1.4rem; } .footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer-meta { justify-content: flex-start; gap: 40px; } .footer-bottom { flex-direction: column; gap: 12px; text-align: center; } } @media (max-width: 480px) { .opening-eyebrow { font-size: .85rem; letter-spacing: 3px; } .opening-sub { font-size: .85rem; } .hero-title { margin-bottom: 20px; } .hero-lead { font-size: .92rem; } .hero-actions { flex-direction: column; gap: 12px; } .btn { justify-content: center; } .quote-mark { font-size: 5rem; } .quote-text { font-size: 1.15rem; letter-spacing: 2px; } .contact-item { flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }