/* FlavourMind 门户页 * * 静态页，nginx 直接从 /opt/flavourmind-portal/ 提供，没有构建步骤——所以 * 这里不引入任何外部字体或库：服务器不一定能出网，而一个连不上 CDN 的首页 * 会比朴素的首页更糟。动效全部用原生 CSS + 一小段 JS。 */ /* 主题：深色是这一页的原生形态，浅色是另一套令牌。 * 所有跟明暗有关的颜色都必须走变量——散落一个 rgba(255,255,255,…) 在浅色下 * 就是一块看不见的白，这类漏网只有真切过去才会发现，所以先把它们收干净。 */ :root, :root[data-theme="dark"] { color-scheme: dark; --ink: #f2f7fc; --ink-2: #c4d3e6; --muted: #8ba0bd; --bg: #060f1e; --bg-2: #0a1729; --card: rgba(255, 255, 255, 0.035); --card-hi: rgba(255, 255, 255, 0.07); --line: rgba(255, 255, 255, 0.10); --line-hi: rgba(255, 255, 255, 0.20); --veil: rgba(255, 255, 255, .028); --chip: rgba(255, 255, 255, .045); --chip-hi: rgba(255, 255, 255, .07); --header-bg: rgba(6, 15, 30, .82); --node-bg: rgba(9, 20, 37, .74); --on-teal: #04121b; --aurora-a: .55; --shot-dim: .9; --shadow: 0 26px 60px -30px rgba(0, 0, 0, .9); --teal: #2dd4bf; --coral: #f97066; --amber: #f79009; --green: #12b76a; --blue: #2e90fa; --violet: #7a5af8; --shell: clamp(20px, 6vw, 96px); --r: 18px; --ease: cubic-bezier(.22, .61, .36, 1); } /* 浅色：不是把深色反相，而是另配一套。纸白底、深墨字，强调色压深一档， 否则青色和紫色在白底上会发飘、对比度不够。 */ :root[data-theme="light"] { color-scheme: light; --ink: #0d1b2a; --ink-2: #3c516b; --muted: #64788f; --bg: #f7f9fc; --bg-2: #ffffff; --card: rgba(13, 27, 42, 0.028); --card-hi: rgba(13, 27, 42, 0.055); --line: rgba(13, 27, 42, 0.12); --line-hi: rgba(13, 27, 42, 0.24); --veil: rgba(13, 27, 42, .04); --chip: rgba(13, 27, 42, .04); --chip-hi: rgba(13, 27, 42, .07); --header-bg: rgba(247, 249, 252, .86); --node-bg: rgba(255, 255, 255, .9); --on-teal: #04121b; /* 强调色在白底上要压深，否则读不清 */ --teal: #0f766e; --violet: #6d28d9; --blue: #1d4ed8; --green: #15803d; --amber: #a4530a; --coral: #b91c1c; --aurora-a: .30; --shot-dim: 1; --shadow: 0 22px 50px -30px rgba(13, 27, 42, .35); } /* 没有显式选择时跟随系统 */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --ink: #0d1b2a; --ink-2: #3c516b; --muted: #64788f; --bg: #f7f9fc; --bg-2: #ffffff; --card: rgba(13, 27, 42, 0.028); --card-hi: rgba(13, 27, 42, 0.055); --line: rgba(13, 27, 42, 0.12); --line-hi: rgba(13, 27, 42, 0.24); --veil: rgba(13, 27, 42, .04); --chip: rgba(13, 27, 42, .04); --chip-hi: rgba(13, 27, 42, .07); --header-bg: rgba(247, 249, 252, .86); --node-bg: rgba(255, 255, 255, .9); --teal: #0f766e; --violet: #6d28d9; --blue: #1d4ed8; --green: #15803d; --amber: #a4530a; --coral: #b91c1c; --aurora-a: .30; --shot-dim: 1; --shadow: 0 22px 50px -30px rgba(13, 27, 42, .35); } } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; min-width: 320px; color: var(--ink); background: var(--bg); font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.7; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } h1, h2, h3 { line-height: 1.22; letter-spacing: -0.01em; margin: 0; } ::selection { background: rgba(45, 212, 191, .3); } :focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 6px; } .skip-link { position: absolute; left: -9999px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--teal); color: var(--on-teal); font-weight: 700; } .skip-link:focus { left: 12px; } /* ── 揭示动画 ───────────────────────────────────────────────────── * 起始的隐藏状态挂在 .js 下面，而这个类由 里的一行内联脚本添加。 * 直接写 .reveal { opacity: 0 } 的话，portal.js 一旦没跑起来——被拦截、 * 报错、旧浏览器——首屏以下就整页空白。对一个陌生人第一次打开的页面来说， * 那是最不能出的故障，所以默认是可见，动画属于增强。 */ .reveal { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); } .js .reveal { opacity: 0; transform: translateY(22px); } .js .reveal.in { opacity: 1; transform: none; } /* ── 页眉 ─────────────────────────────────────────────────────────── */ .site-header { position: fixed; z-index: 40; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--shell); transition: padding .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s var(--ease); border-bottom: 1px solid transparent; } .site-header.stuck { padding: 11px var(--shell); background: var(--header-bg); backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--line); } /* 固定高度而不是 vw：logo 的辨识度不该随窗口宽度浮动，窄屏另设一档就够。 */ .brand img { display: block; height: 58px; width: auto; object-fit: contain; object-position: left center; transition: height .35s var(--ease); } .site-header.stuck .brand img { height: 46px; } .header-nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 30px); } .header-link { position: relative; font-size: 14px; font-weight: 700; letter-spacing: .02em; display: inline-flex; align-items: center; gap: 5px; padding: 6px 2px; color: var(--ink-2); transition: color .25s var(--ease); } /* 两个入口各用各自那一部分的主色：Core 青、Academy 紫。页眉、首屏按钮、 分部标记与页脚是同一套对应关系，读者不用记，扫一眼就知道点进哪儿。 */ .link-core { --entry: var(--teal); } .link-academy { --entry: var(--violet); } .header-link span { color: var(--entry, var(--teal)); transition: transform .25s var(--ease); } .header-link:hover { color: var(--entry, var(--ink)); } .header-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--entry, var(--teal)); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); } .header-link:hover::after { transform: scaleX(1); transform-origin: left; } .header-link:hover span { transform: translate(2px, -2px); } .personal-link { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 12px; color: var(--ink-2); font-size: 13px; font-weight: 700; border: 1px solid var(--line); border-radius: 6px; background: var(--card); transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); } .personal-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .personal-link:hover { color: var(--ink); border-color: var(--line-hi); background: var(--card-hi); } /* ── 语言与明暗切换 ───────────────────────────────────────────── */ .language-toggle, .theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; color: var(--ink-2); background: var(--card); border: 1px solid var(--line); cursor: pointer; transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); } .language-toggle { width: 42px; border-radius: 19px; font: 800 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; } .language-toggle:hover { color: var(--ink); background: var(--card-hi); border-color: var(--line-hi); transform: translateY(-1px); } .theme-toggle:hover { color: var(--ink); background: var(--card-hi); border-color: var(--line-hi); transform: rotate(12deg); } .theme-toggle svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: opacity .25s var(--ease), transform .35s var(--ease); } /* 显示的是「点下去会变成什么」：深色时给太阳，浅色时给月亮 */ .i-moon { opacity: 0; transform: scale(.6) rotate(-40deg); } :root[data-theme="light"] .i-sun { opacity: 0; transform: scale(.6) rotate(40deg); } :root[data-theme="light"] .i-moon { opacity: 1; transform: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .i-sun { opacity: 0; transform: scale(.6) rotate(40deg); } :root:not([data-theme="dark"]) .i-moon { opacity: 1; transform: none; } } /* 浅色下这些为深色设计的装饰要收敛，否则一片糊 */ :root[data-theme="light"] .grid-veil, :root[data-theme="light"] .academy-halo { opacity: .5; } :root[data-theme="light"] .core-orb { background: radial-gradient(circle at 34% 30%, rgba(13, 148, 136, .16), rgba(99, 56, 214, .08) 62%, transparent 72%); box-shadow: inset 0 0 0 1px rgba(13, 27, 42, .10), 0 0 60px -18px rgba(13, 148, 136, .5); } :root[data-theme="light"] .constellation .links .pulse { stroke: var(--teal); } :root[data-theme="light"] .hero-title .accent { background: linear-gradient(96deg, var(--teal) 8%, #1d92c9 46%, var(--violet) 96%); -webkit-background-clip: text; background-clip: text; } :root[data-theme="light"] .academy-part { background: radial-gradient(1200px 600px at 76% 0%, rgba(99, 56, 214, .10), transparent 62%), linear-gradient(180deg, rgba(99, 56, 214, .05), transparent 42%); border-top-color: rgba(99, 56, 214, .22); } :root[data-theme="light"] .a-stat { background: rgba(99, 56, 214, .06); border-color: rgba(99, 56, 214, .2); } :root[data-theme="light"] .a-stat strong { color: var(--violet); } :root[data-theme="light"] .btn-academy { color: #fff; } :root[data-theme="light"] .status-note { background: rgba(180, 83, 9, .06); border-color: rgba(180, 83, 9, .26); } :root[data-theme="light"] .status-badge { background: rgba(180, 83, 9, .1); border-color: rgba(180, 83, 9, .34); } :root[data-theme="light"] .pipe-ok { background: rgba(15, 127, 76, .1); border-color: rgba(15, 127, 76, .32); } :root[data-theme="light"] .shot-lang { background: rgba(13, 148, 136, .1); border-color: rgba(13, 148, 136, .3); } :root[data-theme="light"] .contact-inner { background: radial-gradient(900px 420px at 22% 0%, rgba(13, 148, 136, .08), transparent 62%), var(--bg-2); } :root[data-theme="light"] .seam-dot { box-shadow: 0 0 0 6px rgba(99, 56, 214, .08), 0 0 18px rgba(13, 148, 136, .4); } /* 浅色下主按钮：青色已压深，改用白字深底。沿用深色那套「近黑字 + 亮青底」 在这里只有 3.7:1，按钮上的字比正文更需要一眼看清。 */ :root[data-theme="light"] { --on-teal: #ffffff; } :root[data-theme="light"] .btn-primary { background: linear-gradient(120deg, #0f766e, #0b5d57); box-shadow: 0 12px 30px -14px rgba(15, 118, 110, .7); } :root[data-theme="light"] .btn-academy { background: linear-gradient(120deg, #6d28d9, #5b21b6); box-shadow: 0 12px 30px -14px rgba(109, 40, 217, .7); } :root[data-theme="light"] .skip-link { color: #fff; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --on-teal: #ffffff; } :root:not([data-theme="dark"]) .btn-primary { background: linear-gradient(120deg, #0f766e, #0b5d57); } :root:not([data-theme="dark"]) .btn-academy { background: linear-gradient(120deg, #6d28d9, #5b21b6); } :root:not([data-theme="dark"]) .skip-link { color: #fff; } } /* ── HERO ─────────────────────────────────────────────────────────── */ .hero { position: relative; min-height: min(940px, 100svh); display: flex; align-items: center; padding: 140px var(--shell) 96px; overflow: hidden; isolation: isolate; } .aurora { position: absolute; inset: -20% -10%; z-index: -2; filter: blur(72px); opacity: var(--aurora-a); } .aurora-blob { position: absolute; border-radius: 50%; } .aurora-blob.b1 { width: 46vw; height: 46vw; left: 46%; top: -6%; background: radial-gradient(circle at 40% 40%, rgba(45, 212, 191, .55), transparent 68%); animation: drift1 22s var(--ease) infinite alternate; } .aurora-blob.b2 { width: 40vw; height: 40vw; left: 62%; top: 34%; background: radial-gradient(circle at 50% 50%, rgba(122, 90, 248, .5), transparent 68%); animation: drift2 27s var(--ease) infinite alternate; } .aurora-blob.b3 { width: 34vw; height: 34vw; left: -8%; top: 46%; background: radial-gradient(circle at 50% 50%, rgba(46, 144, 250, .34), transparent 70%); animation: drift3 31s var(--ease) infinite alternate; } @keyframes drift1 { to { transform: translate3d(-6%, 8%, 0) scale(1.12); } } @keyframes drift2 { to { transform: translate3d(7%, -9%, 0) scale(.9); } } @keyframes drift3 { to { transform: translate3d(9%, -6%, 0) scale(1.15); } } .grid-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(var(--veil) 1px, transparent 1px) 0 0 / 100% 64px, linear-gradient(90deg, var(--veil) 1px, transparent 1px) 0 0 / 64px 100%; mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 30%, transparent 78%); } .hero-inner { position: relative; width: 100%; max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(32px, 5vw, 72px); } .eyebrow { margin: 0 0 22px; font-size: 12.5px; font-weight: 800; letter-spacing: .26em; color: var(--teal); } .hero-title { margin: 0; /* Capped so the longer line — 八个汉字 — still fits the copy column on a 1440 screen. At 88px it broke after 「证」 and left 「据」 alone on a line of its own, which is the first thing a visitor sees. */ font-size: clamp(38px, 5.3vw, 74px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; } .hero-title .line { display: block; overflow: hidden; } .hero-title .word { display: inline-block; transform: translateY(105%); animation: riseIn .95s var(--ease) forwards; } .hero-title .line:nth-child(2) .word { animation-delay: .13s; } .hero-title .accent { background: linear-gradient(96deg, var(--teal) 8%, #8ee9ff 46%, var(--violet) 96%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } @keyframes riseIn { to { transform: none; } } .hero-lead { margin: 28px 0 0; max-width: 30em; font-size: clamp(15.5px, 1.55vw, 18.5px); color: var(--ink-2); } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; } .btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 999px; font-size: 15px; font-weight: 700; border: 1px solid transparent; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); overflow: hidden; } .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); } .btn:hover svg { transform: translateX(4px); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary { color: var(--on-teal); background: linear-gradient(120deg, var(--teal), #7ff0dd); box-shadow: 0 12px 34px -14px rgba(45, 212, 191, .85); } .btn-primary:hover { box-shadow: 0 20px 46px -14px rgba(45, 212, 191, .95); } .btn-ghost { color: var(--ink); background: var(--card); border-color: var(--line-hi); backdrop-filter: blur(8px); } .btn-ghost:hover { background: var(--card-hi); border-color: var(--teal); } .hero-meta { display: flex; align-items: center; gap: 9px; margin: 34px 0 0; font-size: 13.5px; color: var(--muted); } .hero-meta .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(18, 183, 106, .16); animation: pulse 2.6s ease-in-out infinite; } @keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(18, 183, 106, 0); } } /* ── 感官星图 ─────────────────────────────────────────────────────── */ .hero-figure { display: flex; justify-content: center; } .constellation { position: relative; width: min(460px, 78vw); aspect-ratio: 1; animation: floaty 9s ease-in-out infinite; } @keyframes floaty { 50% { transform: translateY(-12px); } } .constellation .links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } /* 辐条：开场画出来，之后只做轻微明暗呼吸，作为脉冲跑动的底。 */ .constellation .links path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1.5s var(--ease) forwards, shimmer 5s ease-in-out infinite; animation-delay: calc(.35s + var(--i) * .09s), calc(1.8s + var(--i) * .2s); } @keyframes draw { to { stroke-dashoffset: 0; } } @keyframes shimmer { 50% { opacity: .35; } } /* 脉冲：一小段亮线从核心跑向节点，循环不停。 dasharray 的第二段给一个远大于路径长度的值，整条路径上就只会出现一段 实线；dashoffset 从 0 走到 -len，那一段正好从起点跑到终点。 */ .constellation .links .pulse { stroke: #8ef7e6; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 13 9999; stroke-dashoffset: 0; opacity: 0; filter: drop-shadow(0 0 6px rgba(141, 247, 230, .95)); animation: flow 3.4s cubic-bezier(.45, 0, .3, 1) infinite; animation-delay: calc(1.6s + var(--i) * .42s); } @keyframes flow { 0% { stroke-dashoffset: 0; opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { stroke-dashoffset: var(--len-neg); opacity: 0; } } /* 外圈：循环地画一遍再退回去，像网络在不断把节点重新连起来。 */ .constellation .links .ring-link { stroke-opacity: .3; stroke-dasharray: var(--len); animation: weave 6.5s ease-in-out infinite; animation-delay: calc(1.2s + var(--i) * .5s); } @keyframes weave { 0%, 8% { stroke-dashoffset: var(--len); } 46%, 62% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: var(--len-neg); } } /* 核心向外扩散的光环：给「生长」一个源头。 */ .constellation .ripple { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; margin: 0; border-radius: 50%; border: 1px solid rgba(45, 212, 191, .5); transform: translate(-50%, -50%) scale(1); opacity: 0; animation: ripple 5.2s ease-out infinite; pointer-events: none; } .constellation .ripple:nth-of-type(2) { animation-delay: 1.75s; } .constellation .ripple:nth-of-type(3) { animation-delay: 3.5s; } @keyframes ripple { 0% { transform: translate(-50%, -50%) scale(.92); opacity: 0; } 14% { opacity: .5; } 100% { transform: translate(-50%, -50%) scale(2.85); opacity: 0; } } .core-orb { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(45,212,191,.30), rgba(122,90,248,.14) 62%, transparent 72%); box-shadow: inset 0 0 0 1px var(--line), 0 0 70px -14px rgba(45,212,191,.7); animation: breathe 5.5s ease-in-out infinite; } .core-orb img { width: 54%; opacity: .95; } @keyframes breathe { 50% { box-shadow: inset 0 0 0 1px var(--line-hi), 0 0 96px -12px rgba(45,212,191,.9); } } .constellation .node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 10px; font-size: 13px; font-weight: 700; white-space: nowrap; color: var(--ink-2); background: var(--node-bg); border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(6px); opacity: 0; animation: nodeIn .6s var(--ease) forwards, bob 6s ease-in-out infinite; } .constellation .node i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 12px var(--teal); } .node.n1 { animation-delay: .5s, 1.2s; } .node.n2 { animation-delay: .6s, 1.5s; } .node.n3 { animation-delay: .7s, 1.8s; } .node.n4 { animation-delay: .8s, 2.1s; } .node.n5 { animation-delay: .9s, 2.4s; } .node.n6 { animation-delay: 1.0s, 2.7s; } .node.n7 { animation-delay: 1.1s, 3.0s; } .node.n2 i, .node.n6 i { background: var(--violet); box-shadow: 0 0 12px var(--violet); } .node.n3 i, .node.n7 i { background: var(--blue); box-shadow: 0 0 12px var(--blue); } .node.n4 i { background: var(--amber); box-shadow: 0 0 12px var(--amber); } @keyframes nodeIn { to { opacity: 1; } } @keyframes bob { 50% { transform: translate(-50%, calc(-50% - 7px)); } } /* ── 滚动提示 ─────────────────────────────────────────────────────── */ .scroll-cue { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 7px; font-size: 12px; letter-spacing: .16em; color: var(--muted); transition: color .25s var(--ease); } .scroll-cue:hover { color: var(--ink); } .scroll-cue svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: nudge 2s ease-in-out infinite; } @keyframes nudge { 50% { transform: translateY(6px); } } /* ── 通用版式 ─────────────────────────────────────────────────────── */ section { padding: clamp(76px, 10vw, 148px) var(--shell); } .section-head { max-width: 1360px; margin: 0 auto clamp(40px, 5vw, 68px); } .kicker { margin: 0 0 16px; font-size: 12px; font-weight: 800; letter-spacing: .26em; color: var(--teal); } .section-head h2 { margin: 0; max-width: 18em; font-size: clamp(28px, 4.1vw, 52px); font-weight: 800; } .section-lead { margin: 22px 0 0; max-width: 44em; font-size: clamp(15px, 1.45vw, 17.5px); color: var(--ink-2); } /* ── 数字 ─────────────────────────────────────────────────────────── */ .stats { max-width: 1360px; margin: 0 auto; padding-top: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .stats { padding-left: 0; padding-right: 0; margin-left: var(--shell); margin-right: var(--shell); } .stat { padding: 34px clamp(20px, 2.4vw, 34px); background: var(--bg-2); } .stat strong { display: block; font-size: clamp(34px, 4.4vw, 54px); font-weight: 800; line-height: 1; color: var(--teal); font-variant-numeric: tabular-nums; } .stat span { display: block; margin-top: 10px; font-size: 15px; font-weight: 700; } .stat em { display: block; margin-top: 6px; font-size: 13px; font-style: normal; color: var(--muted); } /* ── 研究链路 ─────────────────────────────────────────────────────── */ .chain-track { position: relative; max-width: 1360px; margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: clamp(18px, 2vw, 26px); } .chain-track::before { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 1px; background: linear-gradient(90deg, var(--teal), var(--violet)); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform 1.2s var(--ease); opacity: .55; } .step { position: relative; padding-top: 74px; } .step-no { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 46px; height: 46px; margin-top: 11px; border-radius: 50%; background: var(--bg-2); border: 1px solid var(--line-hi); font-size: 13px; font-weight: 800; color: var(--teal); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); } .step:hover .step-no { border-color: var(--teal); box-shadow: 0 0 0 5px rgba(45,212,191,.10); } .step h3 { font-size: 21px; font-weight: 800; } .step p { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-2); } /* 方法族的色相走变量，不写在 HTML 的 style 里：写死的十六进制不随主题变， 浅色下那几个数字徽章的对比度只有 1.7，等于看不见。 */ .fam-diff { --hue: var(--teal); } .fam-desc { --hue: var(--amber); } .fam-temporal { --hue: var(--violet); } .fam-rapid { --hue: var(--blue); } .fam-consumer { --hue: var(--coral); } .fam-pref { --hue: var(--green); } .fam-standard { --hue: var(--sun); } /* ── 方法族 ───────────────────────────────────────────────────────── */ .family-grid { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 1.8vw, 24px); } .family { position: relative; padding: 28px 26px 26px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease); } .family::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: var(--hue); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); } .family:hover { transform: translateY(-5px); border-color: var(--line-hi); background: var(--card-hi); } .family:hover::before { transform: scaleX(1); } .family header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .family h3 { font-size: 20px; font-weight: 800; } .family header span { font-size: 12px; font-weight: 800; letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; color: var(--hue); background: color-mix(in srgb, var(--hue) 14%, transparent); border: 1px solid color-mix(in srgb, var(--hue) 34%, transparent); } .family-note { margin: 12px 0 18px; font-size: 14px; color: var(--muted); } .family ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 7px; } .family li { font-size: 13px; padding: 6px 12px; border-radius: 8px; background: var(--chip); border: 1px solid var(--line); color: var(--ink-2); transition: border-color .25s var(--ease), color .25s var(--ease); } .family:hover li { border-color: color-mix(in srgb, var(--hue) 30%, transparent); color: var(--ink); } /* ── 分部标记 ───────────────────────────────────────────────────── * Core 与 Academy 是平级的两部分，不是主功能与附属说明。这条横贯的标记 * 就是用来让读者意识到「翻篇了」。 */ .part-mark { max-width: 1360px; margin: 0 auto; padding: clamp(60px, 8vw, 110px) var(--shell) 0; display: flex; align-items: center; gap: 18px; } .part-no { font-size: 12px; font-weight: 800; letter-spacing: .24em; color: var(--accent, var(--teal)); white-space: nowrap; } .part-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--accent, var(--teal)), transparent); opacity: .5; } .part-name { font-size: clamp(13px, 1.3vw, 15px); font-weight: 700; color: var(--ink-2); white-space: nowrap; } .part-cta { display: flex; justify-content: center; margin-top: clamp(40px, 5vw, 66px); } /* ── 感官学院整部分 ─────────────────────────────────────────────── * 换一套主色（紫）并铺一层底色，让它在滚动里读起来像另一本册子，而不是 * Core 的下一节。 */ .academy-part { --accent: var(--violet); position: relative; margin-top: clamp(40px, 6vw, 90px); background: radial-gradient(1200px 600px at 76% 0%, rgba(122, 90, 248, .16), transparent 62%), linear-gradient(180deg, rgba(122, 90, 248, .07), transparent 42%); border-top: 1px solid rgba(122, 90, 248, .26); } .academy-hero { position: relative; overflow: hidden; } .academy-halo { position: absolute; right: -8%; top: -30%; width: 46vw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(122, 90, 248, .30), transparent 66%); filter: blur(60px); animation: drift2 24s var(--ease) infinite alternate; pointer-events: none; } .academy-hero .kicker { color: var(--violet); } .academy-stats { position: relative; max-width: 1360px; margin: clamp(34px, 4vw, 54px) auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(14px, 1.6vw, 22px); } .a-stat { padding: 22px 20px; border-radius: var(--r); background: rgba(122, 90, 248, .09); border: 1px solid rgba(122, 90, 248, .26); } .a-stat strong { display: block; font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; line-height: 1; color: #b9a5ff; font-variant-numeric: tabular-nums; } .a-stat span { display: block; margin-top: 8px; font-size: 14px; color: var(--ink-2); } .academy-body { padding-top: clamp(48px, 6vw, 84px); } .a-grid { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(16px, 1.8vw, 24px); } .a-card { padding: 30px 28px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease); } .a-card:hover { transform: translateY(-5px); background: var(--card-hi); border-color: rgba(122, 90, 248, .5); } .a-tag { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .22em; color: var(--violet); } .a-card h3 { font-size: 20px; font-weight: 800; } .a-card p { margin: 12px 0 0; font-size: 14.8px; color: var(--ink-2); } /* 指针光晕：portal.js 把指针位置写进 --mx/--my，这里用它画一层柔光。 没有 JS 时两个变量取默认值，光晕停在卡片中上方，静态看也不难看。 */ .a-card, .family, .cell { position: relative; overflow: hidden; } .a-card::after, .family::after, .cell::after { content: ""; position: absolute; inset: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--hue, var(--violet)) 20%, transparent), transparent 62%); opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; } .a-card:hover::after, .family:hover::after, .cell:hover::after { opacity: 1; } .a-card { --hue: var(--violet); } .cell { --hue: var(--teal); } /* ── 企业内训 ─────────────────────────────────────────────────────── */ .training { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 4vw, 60px); align-items: start; } .training .kicker { color: var(--violet); } .training .part-cta { justify-content: flex-start; } .kit { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; } .kit li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 15px 20px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); transition: border-color .3s var(--ease), background .3s var(--ease); } .kit li:hover { border-color: rgba(122, 90, 248, .45); background: var(--card-hi); } .kit strong { font-size: 15px; font-weight: 800; } .kit span { font-size: 13.5px; color: var(--muted); } .btn-academy { color: #f7f3ff; /* 渐变亮端原本是 #a78bfa，近白的字压上去只有 2.49:1——按钮上的字比正文 更需要一眼看清。收窄到两端都够 4.5:1。 */ background: linear-gradient(120deg, var(--violet), #6742e0); box-shadow: 0 12px 34px -14px rgba(122, 90, 248, .9); } .btn-academy:hover { box-shadow: 0 20px 46px -14px rgba(122, 90, 248, 1); } /* ── Bento ────────────────────────────────────────────────────────── */ .bento { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(16px, 1.8vw, 24px); } .cell { padding: 30px 28px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); transition: transform .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease); } .cell:hover { transform: translateY(-4px); background: var(--card-hi); border-color: var(--line-hi); } .cell.wide { grid-column: span 2; } .cell h3 { font-size: 20px; font-weight: 800; } .cell p { margin: 12px 0 0; font-size: 14.8px; color: var(--ink-2); } /* ── 开放 ─────────────────────────────────────────────────────────── */ .open { max-width: 1360px; margin: 0 auto; text-align: center; } .open h2 { font-size: clamp(27px, 3.9vw, 48px); font-weight: 800; } .open-grid { margin: clamp(36px, 4vw, 56px) auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(16px, 1.8vw, 24px); text-align: left; } .open-grid > div { padding: 26px 24px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); } .open-grid strong { display: block; font-size: 17px; font-weight: 800; color: var(--teal); } .open-grid span { display: block; margin-top: 9px; font-size: 14.5px; color: var(--ink-2); } .open-note { margin: 30px auto 0; max-width: 52em; font-size: 13.5px; color: var(--muted); } .open-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 40px; } /* ── 页脚 ─────────────────────────────────────────────────────────── */ .site-footer { padding: 48px var(--shell) 56px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; } .foot-brand { display: flex; align-items: center; gap: 14px; } .foot-brand img { width: 38px; height: 38px; } .foot-brand strong { display: block; font-size: 15px; font-weight: 800; } .foot-brand span { display: block; font-size: 13px; color: var(--muted); } .foot-nav { display: flex; gap: 22px; font-size: 14px; font-weight: 700; color: var(--ink-2); } .foot-nav a { transition: color .25s var(--ease); } .foot-nav a:hover { color: var(--entry, var(--teal)); } /* ── 开放：可查的许可材料 ─────────────────────────────────────── */ .open-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 26px 0 0; padding: 0; font-size: 14px; } .open-links a { color: var(--teal); border-bottom: 1px solid transparent; transition: border-color .25s var(--ease); } .open-links a:hover { border-bottom-color: var(--teal); } /* ── 两部分之间的接缝 ───────────────────────────────────────────── * 学院是紫、Core 是青，这里把两种颜色接起来，读者滚到这儿会知道换了一块 * 内容。不做滚动阻尼：接管滚轮会破坏触控板惯性、键盘翻页与读屏器的预期， * 在 Windows 鼠标上尤其像页面坏了。 */ .part-seam { display: flex; align-items: center; gap: 18px; max-width: 1360px; margin: 0 auto; padding: clamp(34px, 5vw, 66px) var(--shell); } .seam-line { flex: 1; height: 1px; } .part-seam .seam-line:first-child { background: linear-gradient(90deg, transparent, var(--violet)); } .part-seam .seam-line:last-child { background: linear-gradient(90deg, var(--teal), transparent); } .seam-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(120deg, var(--violet), var(--teal)); box-shadow: 0 0 0 6px rgba(122, 90, 248, .10), 0 0 22px rgba(45, 212, 191, .55); } /* 学院那一部分收尾时把底色褪回页面底色，接缝才不会撞在一条硬边上 */ .academy-part::after { content: ""; display: block; height: clamp(60px, 8vw, 120px); background: linear-gradient(180deg, transparent, var(--bg)); } /* ── 多模态链路 ───────────────────────────────────────────────── */ .pipes { max-width: 1360px; margin: clamp(30px, 3.6vw, 48px) auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(16px, 1.8vw, 24px); } .pipes-title, .pipes-note { grid-column: 1 / -1; margin: 0; } .pipes-title { font-size: 13px; font-weight: 800; letter-spacing: .16em; color: var(--teal); } .pipe { padding: 24px 24px 20px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); } .pipe header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; } .pipe h4 { margin: 0; font-size: 17px; font-weight: 800; } .pipe-vendor { font-size: 13px; color: var(--muted); } .pipe-ok { margin-left: auto; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--green); background: rgba(18, 183, 106, .12); border: 1px solid rgba(18, 183, 106, .38); } .pipe-flow { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; } .pipe-flow li { position: relative; padding-left: 26px; font-size: 14.2px; color: var(--ink-2); } /* 用一条竖线把三步串起来，读起来是一条流水线而不是三个要点 */ .pipe-flow li::before { content: ""; position: absolute; left: 5px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); } .pipe-flow li:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: calc(.55em + 9px); width: 1px; height: calc(100% - 2px); background: linear-gradient(180deg, var(--teal), rgba(45, 212, 191, .18)); } .pipe-flow code { padding: 1px 6px; border-radius: 5px; font-size: 12.6px; background: var(--chip-hi); border: 1px solid var(--line); } .pipes-note { font-size: 13.6px; color: var(--muted); } /* ── 界面截图 ─────────────────────────────────────────────────── */ .shots { max-width: 1360px; margin: 0 auto; } .shot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(18px, 2vw, 28px); } .shot { margin: 0; } .shot img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); /* 截图是浅色界面，深色页面上直接贴会刺眼；压一点亮度并给一圈暗边， 让它落在页面里而不是浮在上面。悬停时还原成真实观感。 */ /* 浅色主题下截图本身就是浅色界面，不需要再压暗 */ filter: brightness(var(--shot-dim)) saturate(.96); box-shadow: var(--shadow); transition: filter .45s var(--ease), transform .45s var(--ease), border-color .45s var(--ease); } .shot:hover img { filter: none; transform: translateY(-4px); border-color: var(--line-hi); } .shot figcaption { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; color: var(--ink-2); } .shot-lang { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--teal); background: rgba(45, 212, 191, .12); border: 1px solid rgba(45, 212, 191, .34); } /* ── 联系方式：邮箱与个人主页并排 ─────────────────────────────── */ .contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(30px, 3.4vw, 44px); } /* ── 怎么用起来 ───────────────────────────────────────────────── */ .howto { max-width: 1360px; margin: 0 auto; } .howto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(16px, 1.8vw, 24px); } .howto-card { position: relative; padding: 30px 28px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease); } .howto-card:hover { transform: translateY(-4px); background: var(--card-hi); border-color: var(--line-hi); } .howto-no { display: block; margin-bottom: 14px; font-size: 12px; font-weight: 800; letter-spacing: .18em; color: var(--teal); } .howto-card h3 { font-size: 19px; font-weight: 800; } .howto-card p { margin: 12px 0 0; font-size: 14.8px; color: var(--ink-2); } /* 成熟度说明：写在页面上比让人在生产环境里发现要好，所以给它一块显眼的位置 */ .status-note { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: clamp(20px, 2.4vw, 30px); padding: 22px 26px; border-radius: var(--r); background: rgba(247, 144, 9, .07); border: 1px solid rgba(247, 144, 9, .28); } .status-badge { flex: none; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .04em; color: var(--amber); background: rgba(247, 144, 9, .12); border: 1px solid rgba(247, 144, 9, .4); } .status-note p { flex: 1 1 300px; margin: 0; font-size: 14.5px; color: var(--ink-2); } /* ── 合作与联系 ───────────────────────────────────────────────── */ .contact { max-width: 1360px; margin: 0 auto; } .contact-inner { position: relative; padding: clamp(38px, 5vw, 64px) clamp(26px, 4vw, 60px); border-radius: 24px; background: radial-gradient(900px 420px at 22% 0%, rgba(45, 212, 191, .14), transparent 62%), var(--bg-2); border: 1px solid var(--line); text-align: center; } .contact-inner h2 { font-size: clamp(25px, 3.2vw, 40px); font-weight: 800; } .contact-inner .section-lead { margin-left: auto; margin-right: auto; } .contact-cards { margin: clamp(30px, 3.6vw, 46px) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(14px, 1.6vw, 22px); text-align: left; } .contact-card { padding: 22px 22px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); } .contact-card h3 { font-size: 17px; font-weight: 800; } .contact-card p { margin: 9px 0 0; font-size: 14px; color: var(--ink-2); } .contact-who { margin: 16px 0 0; font-size: 13.5px; color: var(--muted); } /* ── 致谢 ─────────────────────────────────────────────────────────── */ .credits { max-width: 1360px; margin: 0 auto; padding-top: clamp(60px, 7vw, 100px); } .credits-head { margin-bottom: clamp(28px, 3.4vw, 44px); } .credits-head h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 800; } .credits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(16px, 1.8vw, 24px); } .credit-card { padding: 26px 24px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); } .credit-tag { margin: 0 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--teal); } .credit-body { margin: 0; font-size: 14.5px; color: var(--ink-2); } .credit-body + .credit-body { margin-top: 12px; } .credit-names { margin: 0 0 12px; font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 1.9; } .credit-contact a { color: var(--teal); } .credit-contact a:hover { text-decoration: underline; } .credit-note { margin: clamp(24px, 3vw, 36px) 0 0; font-size: 13px; color: var(--muted); max-width: 60em; } .foot-note { width: 100%; margin: 0; font-size: 12.5px; color: var(--muted); } /* ── 响应式 ───────────────────────────────────────────────────────── */ @media (max-width: 1000px) { .hero-inner { grid-template-columns: 1fr; } .hero-figure { order: -1; margin-bottom: 12px; } .constellation { width: min(360px, 74vw); } .cell.wide { grid-column: span 1; } } @media (max-width: 640px) { .brand img { height: 42px; } .site-header.stuck .brand img { height: 36px; } .header-nav { gap: 8px; } .header-link { display: none; } .personal-link { width: 38px; padding: 0; justify-content: center; } .personal-link span { display: none; } .part-mark { gap: 12px; } .part-name { white-space: normal; } .hero { min-height: auto; padding-top: 118px; padding-bottom: 76px; } .hero-title { font-size: clamp(33px, 9.4vw, 46px); } .scroll-cue { display: none; } .chain-track::before { display: none; } .step { padding-top: 0; padding-left: 62px; } .step-no { margin-top: 0; width: 42px; height: 42px; } .btn { width: 100%; justify-content: center; } } /* ── 无障碍：尊重系统的减少动效设置 ──────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .js .reveal, .reveal { opacity: 1; transform: none; } .hero-title .word { transform: none; } .constellation .node { opacity: 1; } .constellation .links path { stroke-dashoffset: 0; } /* 这几层只有动起来才有意义；把时长压到零会把它们冻在起始帧上， 留下一截无缘无故的亮线和一圈静止的光环，不如直接不画。 */ .constellation .links .pulse, .constellation .ripple { display: none; } .constellation .links .ring-link { stroke-dashoffset: 0; } .chain-track::before { transform: scaleX(1); } }