|
|
@@ -0,0 +1,2880 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <meta name="format-detection" content="telephone=no">
|
|
|
+ <title>VOC.market 南昌社媒 VOC 工作坊|5月28日安装环境,5月29日全天分析实战</title>
|
|
|
+ <meta name="description" content="VOC.market 南昌本地社媒 VOC 工作坊:聚焦小红书和抖音,5月28日下午安装 OpenClaw(龙虾)并配置技能,5月29日全天做 VOC 分析实战。">
|
|
|
+ <script>
|
|
|
+ (() => {
|
|
|
+ const isMobile = window.matchMedia("(max-width: 720px), (hover: none), (pointer: coarse)").matches;
|
|
|
+ if (!isMobile) return;
|
|
|
+
|
|
|
+ try {
|
|
|
+ const key = "socialVocWorkshopLoadMarks";
|
|
|
+ const now = Date.now();
|
|
|
+ const marks = JSON.parse(sessionStorage.getItem(key) || "[]")
|
|
|
+ .filter((time) => now - time < 12000);
|
|
|
+ marks.push(now);
|
|
|
+ sessionStorage.setItem(key, JSON.stringify(marks.slice(-5)));
|
|
|
+ if (marks.length >= 3) {
|
|
|
+ document.documentElement.classList.add("mobile-safe-mode");
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ document.documentElement.classList.add("mobile-safe-mode");
|
|
|
+ }
|
|
|
+ })();
|
|
|
+ </script>
|
|
|
+ <style>
|
|
|
+ :root {
|
|
|
+ --black: #050505;
|
|
|
+ --deep: #0b0d10;
|
|
|
+ --panel: rgba(255, 255, 255, 0.075);
|
|
|
+ --panel-strong: rgba(255, 255, 255, 0.12);
|
|
|
+ --line: rgba(255, 255, 255, 0.16);
|
|
|
+ --line-strong: rgba(255, 255, 255, 0.28);
|
|
|
+ --white: #ffffff;
|
|
|
+ --muted: #a8b0ba;
|
|
|
+ --dim: #66707b;
|
|
|
+ --cyan: #00f0ff;
|
|
|
+ --rose: #ff5252;
|
|
|
+ --amber: #f59e0b;
|
|
|
+ --green: #3ee084;
|
|
|
+ --blue: #6388ff;
|
|
|
+ --platinum: #e7edf3;
|
|
|
+ --smoke: #101419;
|
|
|
+ --radius: 8px;
|
|
|
+ --max: 1180px;
|
|
|
+ --ease: cubic-bezier(0.22, 1, 0.36, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ * {
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ html {
|
|
|
+ scroll-behavior: smooth;
|
|
|
+ background: var(--black);
|
|
|
+ }
|
|
|
+
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ min-height: 100vh;
|
|
|
+ overflow-x: hidden;
|
|
|
+ color: var(--white);
|
|
|
+ background:
|
|
|
+ linear-gradient(180deg, rgba(0, 240, 255, 0.075), transparent 22rem),
|
|
|
+ linear-gradient(90deg, rgba(255, 82, 82, 0.055), transparent 30rem),
|
|
|
+ linear-gradient(130deg, rgba(255, 255, 255, 0.04), transparent 18%, rgba(255, 255, 255, 0.015) 28%, transparent 45%),
|
|
|
+ var(--black);
|
|
|
+ font-family: Inter, "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
|
+ line-height: 1.6;
|
|
|
+ -webkit-font-smoothing: antialiased;
|
|
|
+ }
|
|
|
+
|
|
|
+ body::before {
|
|
|
+ content: "";
|
|
|
+ position: fixed;
|
|
|
+ inset: 0;
|
|
|
+ z-index: -3;
|
|
|
+ pointer-events: none;
|
|
|
+ background-image:
|
|
|
+ linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
|
|
|
+ linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
|
|
|
+ background-size: 48px 48px;
|
|
|
+ mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent 72%);
|
|
|
+ }
|
|
|
+
|
|
|
+ body::after {
|
|
|
+ content: "";
|
|
|
+ position: fixed;
|
|
|
+ inset: 0;
|
|
|
+ z-index: -2;
|
|
|
+ pointer-events: none;
|
|
|
+ background:
|
|
|
+ repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0, rgba(255, 255, 255, 0.028) 1px, transparent 1px, transparent 5px);
|
|
|
+ opacity: 0.18;
|
|
|
+ }
|
|
|
+
|
|
|
+ .intro-overlay {
|
|
|
+ position: fixed;
|
|
|
+ inset: 0;
|
|
|
+ z-index: 120;
|
|
|
+ display: grid;
|
|
|
+ place-items: center;
|
|
|
+ pointer-events: none;
|
|
|
+ opacity: 1;
|
|
|
+ visibility: visible;
|
|
|
+ background:
|
|
|
+ linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent),
|
|
|
+ #050505;
|
|
|
+ transform: translateZ(0);
|
|
|
+ backface-visibility: hidden;
|
|
|
+ contain: paint;
|
|
|
+ will-change: opacity;
|
|
|
+ transition: opacity 0.42s var(--ease), visibility 0.42s var(--ease);
|
|
|
+ }
|
|
|
+
|
|
|
+ .intro-overlay.is-hiding {
|
|
|
+ opacity: 0;
|
|
|
+ visibility: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .intro-overlay.is-gone {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .intro-lockup {
|
|
|
+ position: relative;
|
|
|
+ display: grid;
|
|
|
+ gap: 10px;
|
|
|
+ text-align: center;
|
|
|
+ transform: translate3d(0, 10px, 0);
|
|
|
+ backface-visibility: hidden;
|
|
|
+ will-change: opacity, transform;
|
|
|
+ animation: introLockup 0.86s var(--ease) forwards;
|
|
|
+ }
|
|
|
+
|
|
|
+ .intro-lockup strong {
|
|
|
+ font-size: 1.7rem;
|
|
|
+ line-height: 1;
|
|
|
+ font-weight: 850;
|
|
|
+ }
|
|
|
+
|
|
|
+ .intro-lockup span {
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 0.8rem;
|
|
|
+ font-weight: 650;
|
|
|
+ }
|
|
|
+
|
|
|
+ .intro-rule {
|
|
|
+ width: 220px;
|
|
|
+ height: 1px;
|
|
|
+ margin: 6px auto 0;
|
|
|
+ background: linear-gradient(90deg, transparent, var(--cyan), var(--rose), transparent);
|
|
|
+ transform-origin: center;
|
|
|
+ animation: introRule 1.1s var(--ease) forwards;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes introLockup {
|
|
|
+ from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.985); }
|
|
|
+ to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes introRule {
|
|
|
+ from { transform: scaleX(0); opacity: 0; }
|
|
|
+ to { transform: scaleX(1); opacity: 1; }
|
|
|
+ }
|
|
|
+
|
|
|
+ a {
|
|
|
+ color: inherit;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ button,
|
|
|
+ textarea {
|
|
|
+ font: inherit;
|
|
|
+ }
|
|
|
+
|
|
|
+ h1,
|
|
|
+ h2,
|
|
|
+ h3,
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ #networkCanvas {
|
|
|
+ position: fixed;
|
|
|
+ inset: 0;
|
|
|
+ z-index: -1;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ opacity: 0.52;
|
|
|
+ pointer-events: none;
|
|
|
+ transform: translateZ(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 80;
|
|
|
+ width: 0;
|
|
|
+ height: 3px;
|
|
|
+ background: linear-gradient(90deg, var(--cyan), var(--rose), var(--amber));
|
|
|
+ box-shadow: 0 0 24px rgba(0, 240, 255, 0.45);
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav {
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ z-index: 70;
|
|
|
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
|
+ background: linear-gradient(180deg, rgba(5, 5, 5, 0.86), rgba(5, 5, 5, 0.62));
|
|
|
+ backdrop-filter: blur(22px) saturate(1.35);
|
|
|
+ transition: background 0.34s var(--ease), border-color 0.34s ease, box-shadow 0.34s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav.is-scrolled {
|
|
|
+ border-color: rgba(255, 255, 255, 0.15);
|
|
|
+ background: linear-gradient(180deg, rgba(5, 5, 5, 0.92), rgba(5, 5, 5, 0.76));
|
|
|
+ box-shadow: 0 18px 54px rgba(0, 0, 0, 0.36);
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-inner {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ max-width: var(--max);
|
|
|
+ min-height: 64px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 0 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .brand {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ font-weight: 750;
|
|
|
+ }
|
|
|
+
|
|
|
+ .brand-mark {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ display: grid;
|
|
|
+ place-items: center;
|
|
|
+ width: 34px;
|
|
|
+ height: 34px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.26);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ background: linear-gradient(135deg, var(--cyan), var(--rose));
|
|
|
+ color: #050505;
|
|
|
+ font-weight: 900;
|
|
|
+ }
|
|
|
+
|
|
|
+ .brand-mark::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: -40% -80%;
|
|
|
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent);
|
|
|
+ transform: translateX(-80%) rotate(18deg);
|
|
|
+ animation: markSheen 5.4s ease-in-out infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes markSheen {
|
|
|
+ 0%, 65% { transform: translateX(-80%) rotate(18deg); }
|
|
|
+ 82%, 100% { transform: translateX(90%) rotate(18deg); }
|
|
|
+ }
|
|
|
+
|
|
|
+ .brand-name {
|
|
|
+ line-height: 1.1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .brand-name small {
|
|
|
+ display: block;
|
|
|
+ margin-top: 2px;
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 0.72rem;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-links {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20px;
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 0.9rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-links a {
|
|
|
+ transition: color 0.25s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-links a:hover {
|
|
|
+ color: var(--cyan);
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-cta {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ min-height: 38px;
|
|
|
+ padding: 8px 14px;
|
|
|
+ border-radius: var(--radius);
|
|
|
+ background: linear-gradient(135deg, var(--cyan), var(--rose));
|
|
|
+ color: #050505;
|
|
|
+ font-weight: 800;
|
|
|
+ box-shadow: 0 0 28px rgba(0, 240, 255, 0.14);
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero {
|
|
|
+ position: relative;
|
|
|
+ display: grid;
|
|
|
+ align-items: center;
|
|
|
+ min-height: calc(92svh - 64px);
|
|
|
+ padding: 58px 20px 48px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ z-index: -1;
|
|
|
+ background:
|
|
|
+ linear-gradient(180deg, rgba(5, 5, 5, 0.14), rgba(5, 5, 5, 0.98)),
|
|
|
+ url("https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1800&q=82") center/cover no-repeat;
|
|
|
+ opacity: 0.34;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 20px;
|
|
|
+ right: 20px;
|
|
|
+ bottom: 20px;
|
|
|
+ height: 1px;
|
|
|
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-inner {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: minmax(0, 1.03fr) minmax(360px, 0.8fr);
|
|
|
+ gap: 54px;
|
|
|
+ align-items: center;
|
|
|
+ width: min(100%, var(--max));
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-copy {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-copy::before {
|
|
|
+ content: "SOCIAL VOC";
|
|
|
+ position: absolute;
|
|
|
+ left: -4px;
|
|
|
+ top: -58px;
|
|
|
+ color: rgba(255, 255, 255, 0.055);
|
|
|
+ font-size: 5.8rem;
|
|
|
+ line-height: 1;
|
|
|
+ font-weight: 900;
|
|
|
+ white-space: nowrap;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .eyebrow {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ width: fit-content;
|
|
|
+ min-height: 32px;
|
|
|
+ margin-bottom: 18px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ border: 1px solid rgba(0, 240, 255, 0.38);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ background: linear-gradient(90deg, rgba(0, 240, 255, 0.13), rgba(255, 255, 255, 0.035));
|
|
|
+ color: var(--cyan);
|
|
|
+ font-size: 0.86rem;
|
|
|
+ font-weight: 750;
|
|
|
+ }
|
|
|
+
|
|
|
+ h1 {
|
|
|
+ max-width: 780px;
|
|
|
+ font-size: 4.55rem;
|
|
|
+ line-height: 1.03;
|
|
|
+ letter-spacing: 0;
|
|
|
+ text-wrap: balance;
|
|
|
+ font-weight: 850;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gradient-text {
|
|
|
+ background: linear-gradient(120deg, var(--cyan), var(--platinum), var(--rose), var(--cyan));
|
|
|
+ background-size: 220% 100%;
|
|
|
+ background-clip: text;
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ animation: gradientDrift 7s ease-in-out infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes gradientDrift {
|
|
|
+ 0%, 100% { background-position: 0% 50%; }
|
|
|
+ 50% { background-position: 100% 50%; }
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-lead {
|
|
|
+ max-width: 700px;
|
|
|
+ margin-top: 20px;
|
|
|
+ color: #d2d7de;
|
|
|
+ font-size: 1.18rem;
|
|
|
+ text-wrap: pretty;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-actions {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 12px;
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ min-height: 46px;
|
|
|
+ padding: 11px 16px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.26);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ color: var(--white);
|
|
|
+ font-weight: 780;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: transform 0.25s var(--ease), border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.28) 45%, transparent 70%);
|
|
|
+ transform: translateX(-110%);
|
|
|
+ transition: transform 0.58s var(--ease);
|
|
|
+ }
|
|
|
+
|
|
|
+ .button:hover::before {
|
|
|
+ transform: translateX(110%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .button.primary {
|
|
|
+ border: 0;
|
|
|
+ background: linear-gradient(135deg, var(--cyan), var(--rose));
|
|
|
+ color: #050505;
|
|
|
+ box-shadow: 0 16px 40px rgba(0, 240, 255, 0.16);
|
|
|
+ }
|
|
|
+
|
|
|
+ .button:hover {
|
|
|
+ transform: translateY(-2px);
|
|
|
+ border-color: rgba(0, 240, 255, 0.56);
|
|
|
+ background: rgba(255, 255, 255, 0.09);
|
|
|
+ box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
|
|
|
+ }
|
|
|
+
|
|
|
+ .button.primary:hover {
|
|
|
+ background: linear-gradient(135deg, #72f8ff, #ff7474);
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-proof {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
+ gap: 10px;
|
|
|
+ max-width: 650px;
|
|
|
+ margin-top: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .proof-pill {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ min-height: 76px;
|
|
|
+ padding: 12px;
|
|
|
+ border: 1px solid var(--line);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.045));
|
|
|
+ backdrop-filter: blur(14px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .proof-pill::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: 0 0 auto;
|
|
|
+ height: 1px;
|
|
|
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent);
|
|
|
+ }
|
|
|
+
|
|
|
+ .proof-pill strong {
|
|
|
+ display: block;
|
|
|
+ color: var(--white);
|
|
|
+ font-size: 1.12rem;
|
|
|
+ line-height: 1.2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .proof-pill span {
|
|
|
+ display: block;
|
|
|
+ margin-top: 5px;
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 0.84rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .requirement-strip {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: auto minmax(0, 1fr);
|
|
|
+ gap: 14px;
|
|
|
+ align-items: center;
|
|
|
+ max-width: 650px;
|
|
|
+ margin-top: 16px;
|
|
|
+ padding: 14px;
|
|
|
+ border: 1px solid rgba(245, 158, 11, 0.36);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(255, 255, 255, 0.06));
|
|
|
+ backdrop-filter: blur(16px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .requirement-strip b {
|
|
|
+ display: block;
|
|
|
+ color: var(--amber);
|
|
|
+ font-size: 0.9rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .requirement-strip span {
|
|
|
+ display: block;
|
|
|
+ color: #dce2e8;
|
|
|
+ font-size: 0.92rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .requirement-badge {
|
|
|
+ display: grid;
|
|
|
+ place-items: center;
|
|
|
+ width: 42px;
|
|
|
+ height: 42px;
|
|
|
+ border: 1px solid rgba(245, 158, 11, 0.4);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ color: #050505;
|
|
|
+ background: var(--amber);
|
|
|
+ font-weight: 950;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-media {
|
|
|
+ position: relative;
|
|
|
+ isolation: isolate;
|
|
|
+ min-height: 520px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ overflow: hidden;
|
|
|
+ background: #080a0d;
|
|
|
+ box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
|
|
|
+ transform-style: preserve-3d;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-media::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ z-index: 4;
|
|
|
+ pointer-events: none;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.16);
|
|
|
+ background:
|
|
|
+ linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent) 0 0 / 180% 1px no-repeat,
|
|
|
+ linear-gradient(180deg, transparent, rgba(0, 240, 255, 0.16), transparent) 0 0 / 1px 180% no-repeat;
|
|
|
+ animation: edgeTrace 7s ease-in-out infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes edgeTrace {
|
|
|
+ 0%, 100% { background-position: -120% 0, 0 -120%; opacity: 0.45; }
|
|
|
+ 50% { background-position: 120% 0, 0 120%; opacity: 1; }
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-media img {
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ opacity: 0.28;
|
|
|
+ filter: saturate(0.9) contrast(1.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-media::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ background:
|
|
|
+ linear-gradient(180deg, rgba(5, 5, 5, 0.18), rgba(5, 5, 5, 0.92)),
|
|
|
+ linear-gradient(90deg, rgba(0, 240, 255, 0.16), transparent 46%, rgba(255, 82, 82, 0.16));
|
|
|
+ pointer-events: none;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .signal-console {
|
|
|
+ position: absolute;
|
|
|
+ inset: 22px;
|
|
|
+ z-index: 2;
|
|
|
+ display: grid;
|
|
|
+ grid-template-rows: auto 1fr auto;
|
|
|
+ gap: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .console-top {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 12px;
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 0.82rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .console-dots {
|
|
|
+ display: inline-flex;
|
|
|
+ gap: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .console-dots span {
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: var(--cyan);
|
|
|
+ box-shadow: 0 0 16px rgba(0, 240, 255, 0.7);
|
|
|
+ }
|
|
|
+
|
|
|
+ .console-dots span:nth-child(2) {
|
|
|
+ background: var(--rose);
|
|
|
+ box-shadow: 0 0 16px rgba(255, 82, 82, 0.7);
|
|
|
+ }
|
|
|
+
|
|
|
+ .console-dots span:nth-child(3) {
|
|
|
+ background: var(--amber);
|
|
|
+ box-shadow: 0 0 16px rgba(245, 158, 11, 0.7);
|
|
|
+ }
|
|
|
+
|
|
|
+ .radar {
|
|
|
+ position: relative;
|
|
|
+ min-height: 310px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.13);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ overflow: hidden;
|
|
|
+ background:
|
|
|
+ linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
|
|
|
+ linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
|
|
|
+ linear-gradient(135deg, rgba(0, 240, 255, 0.08), rgba(255, 255, 255, 0.03), rgba(255, 82, 82, 0.08)),
|
|
|
+ rgba(255, 255, 255, 0.055);
|
|
|
+ background-size: 28px 28px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .radar-line {
|
|
|
+ position: absolute;
|
|
|
+ left: 8%;
|
|
|
+ right: 8%;
|
|
|
+ height: 2px;
|
|
|
+ background: linear-gradient(90deg, transparent, var(--cyan), transparent);
|
|
|
+ box-shadow: 0 0 18px rgba(0, 240, 255, 0.8);
|
|
|
+ animation: scan 4.6s ease-in-out infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes scan {
|
|
|
+ 0% { top: 12%; opacity: 0; }
|
|
|
+ 12% { opacity: 1; }
|
|
|
+ 76% { opacity: 1; }
|
|
|
+ 100% { top: 86%; opacity: 0; }
|
|
|
+ }
|
|
|
+
|
|
|
+ .signal-node {
|
|
|
+ position: absolute;
|
|
|
+ display: grid;
|
|
|
+ place-items: center;
|
|
|
+ min-width: 86px;
|
|
|
+ min-height: 42px;
|
|
|
+ padding: 6px 9px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.18);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ background: rgba(5, 5, 5, 0.6);
|
|
|
+ color: var(--white);
|
|
|
+ font-size: 0.82rem;
|
|
|
+ font-weight: 750;
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ animation: floatCard 5.8s ease-in-out infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ .signal-node small {
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 0.68rem;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ .signal-node:nth-child(2) {
|
|
|
+ top: 15%;
|
|
|
+ left: 8%;
|
|
|
+ border-color: rgba(0, 240, 255, 0.38);
|
|
|
+ }
|
|
|
+
|
|
|
+ .signal-node:nth-child(3) {
|
|
|
+ top: 24%;
|
|
|
+ right: 10%;
|
|
|
+ border-color: rgba(255, 82, 82, 0.42);
|
|
|
+ animation-delay: 0.5s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .signal-node:nth-child(4) {
|
|
|
+ top: 50%;
|
|
|
+ left: 22%;
|
|
|
+ border-color: rgba(245, 158, 11, 0.42);
|
|
|
+ animation-delay: 1.1s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .signal-node:nth-child(5) {
|
|
|
+ right: 8%;
|
|
|
+ bottom: 18%;
|
|
|
+ border-color: rgba(62, 224, 132, 0.4);
|
|
|
+ animation-delay: 1.8s;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes floatCard {
|
|
|
+ 0%, 100% { transform: translateY(0); }
|
|
|
+ 50% { transform: translateY(-9px); }
|
|
|
+ }
|
|
|
+
|
|
|
+ .console-bottom {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .meter {
|
|
|
+ padding: 12px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.14);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ background: rgba(255, 255, 255, 0.07);
|
|
|
+ }
|
|
|
+
|
|
|
+ .meter span {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 0.72rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bar {
|
|
|
+ height: 7px;
|
|
|
+ border-radius: 999px;
|
|
|
+ background: rgba(255, 255, 255, 0.11);
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bar i {
|
|
|
+ display: block;
|
|
|
+ width: 72%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: inherit;
|
|
|
+ background: linear-gradient(90deg, var(--cyan), var(--rose));
|
|
|
+ animation: barPulse 4s ease-in-out infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ .meter:nth-child(2) .bar i {
|
|
|
+ width: 86%;
|
|
|
+ background: linear-gradient(90deg, var(--amber), var(--cyan));
|
|
|
+ animation-delay: 0.7s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .meter:nth-child(3) .bar i {
|
|
|
+ width: 64%;
|
|
|
+ background: linear-gradient(90deg, var(--green), var(--cyan));
|
|
|
+ animation-delay: 1.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes barPulse {
|
|
|
+ 0%, 100% { transform: translateX(-8%); opacity: 0.75; }
|
|
|
+ 50% { transform: translateX(8%); opacity: 1; }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ticker {
|
|
|
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
+ background: rgba(255, 255, 255, 0.045);
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ticker-track {
|
|
|
+ display: flex;
|
|
|
+ width: max-content;
|
|
|
+ animation: marquee 34s linear infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ticker-group {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+ padding: 16px 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ticker span {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ min-height: 34px;
|
|
|
+ padding: 6px 12px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.18);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ color: #dce5ef;
|
|
|
+ white-space: nowrap;
|
|
|
+ background: rgba(5, 5, 5, 0.45);
|
|
|
+ font-size: 0.9rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes marquee {
|
|
|
+ from { transform: translateX(0); }
|
|
|
+ to { transform: translateX(-50%); }
|
|
|
+ }
|
|
|
+
|
|
|
+ .signal-spine {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 72px 20px 78px;
|
|
|
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
|
+ background:
|
|
|
+ linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent 18%, rgba(255, 255, 255, 0.025) 56%, transparent),
|
|
|
+ rgba(255, 255, 255, 0.018);
|
|
|
+ }
|
|
|
+
|
|
|
+ .signal-spine::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 1px;
|
|
|
+ background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.35), rgba(255, 82, 82, 0.32), transparent);
|
|
|
+ }
|
|
|
+
|
|
|
+ .spine-inner {
|
|
|
+ position: relative;
|
|
|
+ width: min(100%, var(--max));
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .spine-word {
|
|
|
+ position: absolute;
|
|
|
+ top: -44px;
|
|
|
+ right: 0;
|
|
|
+ color: rgba(255, 255, 255, 0.045);
|
|
|
+ font-size: 7rem;
|
|
|
+ line-height: 1;
|
|
|
+ font-weight: 900;
|
|
|
+ white-space: nowrap;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .spine-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
|
+ gap: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .spine-cell {
|
|
|
+ position: relative;
|
|
|
+ min-height: 210px;
|
|
|
+ padding: 18px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.14);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ background:
|
|
|
+ linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.035));
|
|
|
+ backdrop-filter: blur(18px);
|
|
|
+ overflow: hidden;
|
|
|
+ transition: transform 0.34s var(--ease), border-color 0.34s ease, background 0.34s ease, box-shadow 0.34s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .spine-cell::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: 0 0 auto;
|
|
|
+ height: 2px;
|
|
|
+ background: linear-gradient(90deg, var(--cyan), var(--rose));
|
|
|
+ opacity: 0.68;
|
|
|
+ }
|
|
|
+
|
|
|
+ .spine-cell:hover {
|
|
|
+ transform: translateY(-6px);
|
|
|
+ border-color: rgba(0, 240, 255, 0.38);
|
|
|
+ }
|
|
|
+
|
|
|
+ .spine-cell em {
|
|
|
+ display: block;
|
|
|
+ color: var(--dim);
|
|
|
+ font-style: normal;
|
|
|
+ font-size: 0.74rem;
|
|
|
+ font-weight: 800;
|
|
|
+ }
|
|
|
+
|
|
|
+ .spine-cell strong {
|
|
|
+ display: block;
|
|
|
+ margin-top: 36px;
|
|
|
+ color: var(--white);
|
|
|
+ font-size: 1.2rem;
|
|
|
+ line-height: 1.25;
|
|
|
+ }
|
|
|
+
|
|
|
+ .spine-cell span {
|
|
|
+ display: block;
|
|
|
+ margin-top: 12px;
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 0.9rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .spine-cell b {
|
|
|
+ position: absolute;
|
|
|
+ right: 16px;
|
|
|
+ bottom: 10px;
|
|
|
+ color: rgba(255, 255, 255, 0.065);
|
|
|
+ font-size: 4rem;
|
|
|
+ line-height: 1;
|
|
|
+ font-weight: 900;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section {
|
|
|
+ position: relative;
|
|
|
+ padding: 86px 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: 0 0 auto;
|
|
|
+ height: 1px;
|
|
|
+ background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.35), rgba(255, 82, 82, 0.28), transparent);
|
|
|
+ opacity: 0;
|
|
|
+ transform: scaleX(0.46);
|
|
|
+ transform-origin: center;
|
|
|
+ transition: opacity 1s var(--ease), transform 1s var(--ease);
|
|
|
+ }
|
|
|
+
|
|
|
+ .section.section-active::before {
|
|
|
+ opacity: 1;
|
|
|
+ transform: scaleX(1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .section.alt {
|
|
|
+ background: rgba(255, 255, 255, 0.035);
|
|
|
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
|
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
|
+ }
|
|
|
+
|
|
|
+ .wrap {
|
|
|
+ width: min(100%, var(--max));
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-head {
|
|
|
+ display: grid;
|
|
|
+ gap: 12px;
|
|
|
+ max-width: 760px;
|
|
|
+ margin-bottom: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-head.center {
|
|
|
+ margin-right: auto;
|
|
|
+ margin-left: auto;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section-kicker {
|
|
|
+ color: var(--cyan);
|
|
|
+ font-size: 0.92rem;
|
|
|
+ font-weight: 800;
|
|
|
+ }
|
|
|
+
|
|
|
+ h2 {
|
|
|
+ font-size: 2.8rem;
|
|
|
+ line-height: 1.13;
|
|
|
+ letter-spacing: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub {
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 1.05rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid {
|
|
|
+ display: grid;
|
|
|
+ gap: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid.two {
|
|
|
+ grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid.three {
|
|
|
+ grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid.four {
|
|
|
+ grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
|
+ }
|
|
|
+
|
|
|
+ .card,
|
|
|
+ .slice,
|
|
|
+ .timeline-row,
|
|
|
+ .deliverable,
|
|
|
+ .share-panel {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ border: 1px solid var(--line);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ background:
|
|
|
+ linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.045)),
|
|
|
+ var(--panel);
|
|
|
+ backdrop-filter: blur(18px);
|
|
|
+ transform: translateZ(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .card::after,
|
|
|
+ .timeline-row::after,
|
|
|
+ .deliverable::after,
|
|
|
+ .share-panel::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: 0 0 auto;
|
|
|
+ height: 1px;
|
|
|
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card {
|
|
|
+ min-height: 100%;
|
|
|
+ padding: 20px;
|
|
|
+ transition: transform 0.34s var(--ease), border-color 0.34s ease, background 0.34s ease, box-shadow 0.34s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card:hover {
|
|
|
+ transform: translateY(-5px);
|
|
|
+ border-color: rgba(0, 240, 255, 0.35);
|
|
|
+ background: rgba(255, 255, 255, 0.095);
|
|
|
+ box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
|
|
|
+ }
|
|
|
+
|
|
|
+ .index {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 34px;
|
|
|
+ height: 34px;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.18);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ color: #050505;
|
|
|
+ background: var(--cyan);
|
|
|
+ font-weight: 900;
|
|
|
+ }
|
|
|
+
|
|
|
+ .index.rose {
|
|
|
+ background: var(--rose);
|
|
|
+ }
|
|
|
+
|
|
|
+ .index.amber {
|
|
|
+ background: var(--amber);
|
|
|
+ }
|
|
|
+
|
|
|
+ .index.green {
|
|
|
+ background: var(--green);
|
|
|
+ }
|
|
|
+
|
|
|
+ .card h3 {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-size: 1.16rem;
|
|
|
+ line-height: 1.36;
|
|
|
+ letter-spacing: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card p,
|
|
|
+ .card li {
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 0.94rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ display: grid;
|
|
|
+ gap: 9px;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ list-style: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list li {
|
|
|
+ position: relative;
|
|
|
+ padding-left: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list li::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0.72em;
|
|
|
+ left: 0;
|
|
|
+ width: 7px;
|
|
|
+ height: 7px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: var(--cyan);
|
|
|
+ box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
|
|
|
+ }
|
|
|
+
|
|
|
+ .skill-wall {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 0.9fr 1.1fr;
|
|
|
+ gap: 16px;
|
|
|
+ align-items: stretch;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slice {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ min-height: 360px;
|
|
|
+ padding: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slice h3 {
|
|
|
+ max-width: 360px;
|
|
|
+ font-size: 1.9rem;
|
|
|
+ line-height: 1.18;
|
|
|
+ letter-spacing: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .slice p {
|
|
|
+ max-width: 380px;
|
|
|
+ margin-top: 14px;
|
|
|
+ color: var(--muted);
|
|
|
+ }
|
|
|
+
|
|
|
+ .skill-rings {
|
|
|
+ position: absolute;
|
|
|
+ right: 22px;
|
|
|
+ bottom: 22px;
|
|
|
+ width: 260px;
|
|
|
+ height: 260px;
|
|
|
+ border: 1px solid rgba(0, 240, 255, 0.32);
|
|
|
+ border-radius: 50%;
|
|
|
+ animation: rotateSlow 28s linear infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ .skill-rings::before,
|
|
|
+ .skill-rings::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.16);
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .skill-rings::before {
|
|
|
+ inset: 38px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .skill-rings::after {
|
|
|
+ inset: 84px;
|
|
|
+ border-color: rgba(255, 82, 82, 0.34);
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-label {
|
|
|
+ position: absolute;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ min-height: 34px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.18);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ background: rgba(5, 5, 5, 0.72);
|
|
|
+ color: var(--white);
|
|
|
+ font-size: 0.82rem;
|
|
|
+ animation: rotateBack 28s linear infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-label.a { top: -15px; left: 82px; }
|
|
|
+ .ring-label.b { top: 108px; right: -34px; }
|
|
|
+ .ring-label.c { left: -24px; bottom: 52px; }
|
|
|
+ .ring-label.d { right: 72px; bottom: -15px; }
|
|
|
+
|
|
|
+ @keyframes rotateSlow {
|
|
|
+ to { transform: rotate(360deg); }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes rotateBack {
|
|
|
+ to { transform: rotate(-360deg); }
|
|
|
+ }
|
|
|
+
|
|
|
+ .capability-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
+ gap: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .capability {
|
|
|
+ padding: 18px;
|
|
|
+ border: 1px solid var(--line);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ background: rgba(255, 255, 255, 0.055);
|
|
|
+ transition: transform 0.34s var(--ease), border-color 0.34s ease, background 0.34s ease, box-shadow 0.34s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .capability:hover {
|
|
|
+ transform: translateY(-5px);
|
|
|
+ border-color: rgba(0, 240, 255, 0.34);
|
|
|
+ background: rgba(255, 255, 255, 0.085);
|
|
|
+ box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
|
|
|
+ }
|
|
|
+
|
|
|
+ .capability strong {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-size: 1.02rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .capability span {
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 0.9rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .daily-lab {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
|
|
|
+ gap: 18px;
|
|
|
+ align-items: stretch;
|
|
|
+ }
|
|
|
+
|
|
|
+ .daily-copy {
|
|
|
+ display: grid;
|
|
|
+ align-content: center;
|
|
|
+ gap: 18px;
|
|
|
+ min-height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .daily-copy .section-head {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .daily-points {
|
|
|
+ display: grid;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .daily-point {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 38px minmax(0, 1fr);
|
|
|
+ gap: 12px;
|
|
|
+ align-items: start;
|
|
|
+ padding: 14px;
|
|
|
+ border: 1px solid var(--line);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ background: rgba(255, 255, 255, 0.06);
|
|
|
+ }
|
|
|
+
|
|
|
+ .daily-point b {
|
|
|
+ display: grid;
|
|
|
+ place-items: center;
|
|
|
+ width: 34px;
|
|
|
+ height: 34px;
|
|
|
+ border-radius: var(--radius);
|
|
|
+ background: rgba(0, 240, 255, 0.16);
|
|
|
+ color: var(--cyan);
|
|
|
+ font-size: 0.84rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .daily-point strong {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ color: var(--white);
|
|
|
+ }
|
|
|
+
|
|
|
+ .daily-point span {
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 0.9rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .daily-board {
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ min-height: 560px;
|
|
|
+ border: 1px solid var(--line-strong);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ background:
|
|
|
+ linear-gradient(180deg, rgba(0, 240, 255, 0.08), transparent 32%),
|
|
|
+ linear-gradient(135deg, rgba(255, 82, 82, 0.09), transparent 42%),
|
|
|
+ rgba(255, 255, 255, 0.06);
|
|
|
+ backdrop-filter: blur(18px);
|
|
|
+ box-shadow: 0 26px 90px rgba(0, 0, 0, 0.42);
|
|
|
+ }
|
|
|
+
|
|
|
+ .daily-board::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ background-image:
|
|
|
+ linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
|
|
|
+ linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
|
|
|
+ background-size: 34px 34px;
|
|
|
+ mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.92), transparent 92%);
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .board-inner {
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ display: grid;
|
|
|
+ gap: 14px;
|
|
|
+ padding: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .board-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 12px;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ border-bottom: 1px solid rgba(255, 255, 255, 0.14);
|
|
|
+ }
|
|
|
+
|
|
|
+ .board-title {
|
|
|
+ display: grid;
|
|
|
+ gap: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .board-title strong {
|
|
|
+ font-size: 1.08rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .board-title span,
|
|
|
+ .board-status {
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 0.82rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .board-status {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ min-height: 28px;
|
|
|
+ padding: 4px 9px;
|
|
|
+ border: 1px solid rgba(62, 224, 132, 0.34);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ color: var(--green);
|
|
|
+ background: rgba(62, 224, 132, 0.08);
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pipeline {
|
|
|
+ display: grid;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pipeline-step {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 72px minmax(0, 1fr) auto;
|
|
|
+ gap: 12px;
|
|
|
+ align-items: center;
|
|
|
+ padding: 13px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.13);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ background: rgba(5, 5, 5, 0.42);
|
|
|
+ animation: stepGlow 6s ease-in-out infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pipeline-step:nth-child(2) { animation-delay: 0.45s; }
|
|
|
+ .pipeline-step:nth-child(3) { animation-delay: 0.9s; }
|
|
|
+ .pipeline-step:nth-child(4) { animation-delay: 1.35s; }
|
|
|
+ .pipeline-step:nth-child(5) { animation-delay: 1.8s; }
|
|
|
+
|
|
|
+ @keyframes stepGlow {
|
|
|
+ 0%, 100% { border-color: rgba(255, 255, 255, 0.13); }
|
|
|
+ 50% { border-color: rgba(0, 240, 255, 0.34); }
|
|
|
+ }
|
|
|
+
|
|
|
+ .pipeline-step code {
|
|
|
+ color: var(--cyan);
|
|
|
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
|
+ font-size: 0.78rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pipeline-step strong {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ font-size: 0.95rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pipeline-step span {
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 0.82rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pipeline-step i {
|
|
|
+ display: inline-grid;
|
|
|
+ place-items: center;
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ border-radius: 50%;
|
|
|
+ color: #050505;
|
|
|
+ background: linear-gradient(135deg, var(--cyan), var(--rose));
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 900;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topic-stack {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topic-card {
|
|
|
+ min-height: 118px;
|
|
|
+ padding: 12px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.13);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ background: rgba(255, 255, 255, 0.07);
|
|
|
+ }
|
|
|
+
|
|
|
+ .topic-card small {
|
|
|
+ color: var(--dim);
|
|
|
+ font-size: 0.72rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topic-card strong {
|
|
|
+ display: block;
|
|
|
+ margin: 8px 0;
|
|
|
+ line-height: 1.28;
|
|
|
+ font-size: 0.92rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topic-card span {
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 0.78rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .need-finder {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
|
+ gap: 12px;
|
|
|
+ margin-top: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .need-chip {
|
|
|
+ min-height: 116px;
|
|
|
+ padding: 14px;
|
|
|
+ border: 1px solid var(--line);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ background: rgba(255, 255, 255, 0.052);
|
|
|
+ transition: transform 0.34s var(--ease), border-color 0.34s ease, background 0.34s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .need-chip:hover {
|
|
|
+ transform: translateY(-4px);
|
|
|
+ border-color: rgba(0, 240, 255, 0.32);
|
|
|
+ background: rgba(255, 255, 255, 0.08);
|
|
|
+ }
|
|
|
+
|
|
|
+ .need-chip strong {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ color: var(--white);
|
|
|
+ }
|
|
|
+
|
|
|
+ .need-chip span {
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 0.86rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .platform-map {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .platform {
|
|
|
+ min-height: 132px;
|
|
|
+ padding: 14px;
|
|
|
+ border: 1px solid var(--line);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ background: rgba(255, 255, 255, 0.06);
|
|
|
+ transition: transform 0.34s var(--ease), border-color 0.34s ease, background 0.34s ease, box-shadow 0.34s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .platform:hover {
|
|
|
+ transform: translateY(-4px);
|
|
|
+ border-color: rgba(255, 82, 82, 0.4);
|
|
|
+ background: rgba(255, 255, 255, 0.09);
|
|
|
+ box-shadow: 0 16px 42px rgba(0, 0, 0, 0.24);
|
|
|
+ }
|
|
|
+
|
|
|
+ .platform b {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ color: var(--white);
|
|
|
+ font-size: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .platform span {
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 0.84rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeline {
|
|
|
+ display: grid;
|
|
|
+ gap: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeline-row {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 190px minmax(0, 1fr);
|
|
|
+ gap: 20px;
|
|
|
+ padding: 20px;
|
|
|
+ transition: border-color 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeline-row.visible {
|
|
|
+ border-color: rgba(0, 240, 255, 0.26);
|
|
|
+ box-shadow: 0 18px 58px rgba(0, 0, 0, 0.24);
|
|
|
+ }
|
|
|
+
|
|
|
+ .time {
|
|
|
+ color: var(--cyan);
|
|
|
+ font-weight: 850;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeline-row h3 {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ font-size: 1.25rem;
|
|
|
+ letter-spacing: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeline-row p {
|
|
|
+ color: var(--muted);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tags {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px;
|
|
|
+ margin-top: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tags span {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ min-height: 30px;
|
|
|
+ padding: 5px 9px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.14);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ background: rgba(255, 255, 255, 0.07);
|
|
|
+ color: #d8dee6;
|
|
|
+ font-size: 0.84rem;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ .deliverables {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
|
+ gap: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .deliverable {
|
|
|
+ min-height: 190px;
|
|
|
+ padding: 18px;
|
|
|
+ transition: transform 0.34s var(--ease), border-color 0.34s ease, background 0.34s ease, box-shadow 0.34s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .deliverable:hover {
|
|
|
+ transform: translateY(-5px);
|
|
|
+ border-color: rgba(0, 240, 255, 0.32);
|
|
|
+ background: rgba(255, 255, 255, 0.085);
|
|
|
+ box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
|
|
|
+ }
|
|
|
+
|
|
|
+ .deliverable strong {
|
|
|
+ display: block;
|
|
|
+ margin: 18px 0 8px;
|
|
|
+ font-size: 1.02rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .deliverable span {
|
|
|
+ color: var(--muted);
|
|
|
+ font-size: 0.88rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .deliverable .mark {
|
|
|
+ display: inline-grid;
|
|
|
+ place-items: center;
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: var(--radius);
|
|
|
+ color: #050505;
|
|
|
+ background: linear-gradient(135deg, var(--cyan), var(--rose));
|
|
|
+ font-weight: 900;
|
|
|
+ }
|
|
|
+
|
|
|
+ .split {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 0.88fr 1.12fr;
|
|
|
+ gap: 18px;
|
|
|
+ align-items: start;
|
|
|
+ }
|
|
|
+
|
|
|
+ .quote {
|
|
|
+ position: sticky;
|
|
|
+ top: 88px;
|
|
|
+ padding: 24px;
|
|
|
+ border: 1px solid var(--line);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ background: linear-gradient(180deg, rgba(0, 240, 255, 0.08), rgba(255, 255, 255, 0.055));
|
|
|
+ }
|
|
|
+
|
|
|
+ .quote p {
|
|
|
+ font-size: 1.5rem;
|
|
|
+ line-height: 1.32;
|
|
|
+ font-weight: 760;
|
|
|
+ }
|
|
|
+
|
|
|
+ .quote span {
|
|
|
+ display: block;
|
|
|
+ margin-top: 14px;
|
|
|
+ color: var(--muted);
|
|
|
+ }
|
|
|
+
|
|
|
+ .share-panel {
|
|
|
+ display: grid;
|
|
|
+ gap: 12px;
|
|
|
+ padding: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ textarea {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 360px;
|
|
|
+ resize: vertical;
|
|
|
+ border: 1px solid var(--line);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ outline: none;
|
|
|
+ padding: 16px;
|
|
|
+ background: rgba(0, 0, 0, 0.34);
|
|
|
+ color: #f4f8fb;
|
|
|
+ line-height: 1.72;
|
|
|
+ }
|
|
|
+
|
|
|
+ .copy-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 10px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .copy-row small {
|
|
|
+ color: var(--dim);
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-cta {
|
|
|
+ position: sticky;
|
|
|
+ bottom: 0;
|
|
|
+ z-index: 60;
|
|
|
+ display: none;
|
|
|
+ gap: 10px;
|
|
|
+ padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
|
|
|
+ border-top: 1px solid rgba(255, 255, 255, 0.12);
|
|
|
+ background: rgba(5, 5, 5, 0.84);
|
|
|
+ backdrop-filter: blur(18px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-cta a {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 44px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .toast {
|
|
|
+ position: fixed;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 86px;
|
|
|
+ z-index: 90;
|
|
|
+ padding: 9px 12px;
|
|
|
+ border-radius: var(--radius);
|
|
|
+ background: var(--white);
|
|
|
+ color: var(--black);
|
|
|
+ font-size: 0.9rem;
|
|
|
+ font-weight: 800;
|
|
|
+ transform: translate(-50%, 12px);
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ transition: opacity 0.2s ease, transform 0.2s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .toast.show {
|
|
|
+ opacity: 1;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ footer {
|
|
|
+ padding: 34px 20px 44px;
|
|
|
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
+ color: var(--dim);
|
|
|
+ background: #050505;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-inner {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 18px;
|
|
|
+ width: min(100%, var(--max));
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ [data-reveal] {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translate3d(0, 34px, 0) scale(0.985);
|
|
|
+ will-change: opacity, transform;
|
|
|
+ transition:
|
|
|
+ opacity 0.82s var(--ease),
|
|
|
+ transform 0.82s var(--ease),
|
|
|
+ border-color 0.34s ease,
|
|
|
+ background 0.34s ease,
|
|
|
+ box-shadow 0.34s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ [data-reveal="fade-left"] {
|
|
|
+ transform: translate3d(-30px, 0, 0) scale(0.992);
|
|
|
+ }
|
|
|
+
|
|
|
+ [data-reveal="fade-right"] {
|
|
|
+ transform: translate3d(30px, 0, 0) scale(0.992);
|
|
|
+ }
|
|
|
+
|
|
|
+ [data-reveal="scale"] {
|
|
|
+ transform: translate3d(0, 24px, 0) scale(0.955);
|
|
|
+ }
|
|
|
+
|
|
|
+ [data-reveal].visible {
|
|
|
+ opacity: 1;
|
|
|
+ transform: translate3d(0, 0, 0) scale(1);
|
|
|
+ }
|
|
|
+
|
|
|
+ [data-reveal].visible.card:hover,
|
|
|
+ [data-reveal].visible.spine-cell:hover,
|
|
|
+ [data-reveal].visible.need-chip:hover,
|
|
|
+ [data-reveal].visible.capability:hover,
|
|
|
+ [data-reveal].visible.platform:hover,
|
|
|
+ [data-reveal].visible.deliverable:hover {
|
|
|
+ transform: translate3d(0, -6px, 0) scale(1.01);
|
|
|
+ }
|
|
|
+
|
|
|
+ [data-delay="1"] { transition-delay: 0.08s; }
|
|
|
+ [data-delay="2"] { transition-delay: 0.16s; }
|
|
|
+ [data-delay="3"] { transition-delay: 0.24s; }
|
|
|
+ [data-delay="4"] { transition-delay: 0.32s; }
|
|
|
+
|
|
|
+ .mobile-safe-mode *,
|
|
|
+ .mobile-safe-mode *::before,
|
|
|
+ .mobile-safe-mode *::after {
|
|
|
+ animation: none !important;
|
|
|
+ transition-duration: 0.01ms !important;
|
|
|
+ scroll-behavior: auto !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mobile-safe-mode #networkCanvas,
|
|
|
+ .mobile-safe-mode .intro-overlay {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mobile-safe-mode [data-reveal] {
|
|
|
+ opacity: 1 !important;
|
|
|
+ transform: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 980px) {
|
|
|
+ h1 {
|
|
|
+ font-size: 3.1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ h2 {
|
|
|
+ font-size: 2.15rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-inner,
|
|
|
+ .skill-wall,
|
|
|
+ .daily-lab,
|
|
|
+ .split {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-media {
|
|
|
+ min-height: 440px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid.three,
|
|
|
+ .grid.four,
|
|
|
+ .platform-map,
|
|
|
+ .spine-grid,
|
|
|
+ .deliverables,
|
|
|
+ .need-finder {
|
|
|
+ grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
|
+ }
|
|
|
+
|
|
|
+ .quote {
|
|
|
+ position: static;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 720px) {
|
|
|
+ #networkCanvas {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .intro-overlay {
|
|
|
+ background: #050505;
|
|
|
+ }
|
|
|
+
|
|
|
+ .intro-lockup {
|
|
|
+ animation-duration: 0.56s;
|
|
|
+ }
|
|
|
+
|
|
|
+ body::after {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ticker-track {
|
|
|
+ width: max-content;
|
|
|
+ animation: mobileMarquee 46s linear infinite;
|
|
|
+ will-change: transform;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ticker-group {
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .brand-mark::after {
|
|
|
+ animation: markSheen 7.2s ease-in-out infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ .gradient-text {
|
|
|
+ animation: gradientDrift 9s ease-in-out infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-media::before {
|
|
|
+ opacity: 0.72;
|
|
|
+ animation: edgeTrace 9s ease-in-out infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ .radar-line {
|
|
|
+ top: 12%;
|
|
|
+ animation: mobileScan 6.2s var(--ease) infinite;
|
|
|
+ will-change: transform, opacity;
|
|
|
+ }
|
|
|
+
|
|
|
+ .signal-node {
|
|
|
+ animation: mobileFloat 7.2s ease-in-out infinite;
|
|
|
+ will-change: transform;
|
|
|
+ }
|
|
|
+
|
|
|
+ .signal-node:nth-child(3) { animation-delay: 0.7s; }
|
|
|
+ .signal-node:nth-child(4) { animation-delay: 1.4s; }
|
|
|
+ .signal-node:nth-child(5) { animation-delay: 2.1s; }
|
|
|
+
|
|
|
+ .bar i {
|
|
|
+ animation: mobileBarPulse 5.8s ease-in-out infinite;
|
|
|
+ will-change: transform, opacity;
|
|
|
+ }
|
|
|
+
|
|
|
+ .skill-rings {
|
|
|
+ animation: mobileRingBreathe 8.5s ease-in-out infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-label {
|
|
|
+ animation: mobileLabelFloat 7.6s ease-in-out infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ring-label.b { animation-delay: 0.8s; }
|
|
|
+ .ring-label.c { animation-delay: 1.6s; }
|
|
|
+ .ring-label.d { animation-delay: 2.4s; }
|
|
|
+
|
|
|
+ .pipeline-step {
|
|
|
+ animation: mobileStepGlow 7.8s ease-in-out infinite;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pipeline-step:nth-child(2) { animation-delay: 0.5s; }
|
|
|
+ .pipeline-step:nth-child(3) { animation-delay: 1s; }
|
|
|
+ .pipeline-step:nth-child(4) { animation-delay: 1.5s; }
|
|
|
+ .pipeline-step:nth-child(5) { animation-delay: 2s; }
|
|
|
+
|
|
|
+ @keyframes mobileScan {
|
|
|
+ 0% { opacity: 0; transform: translate3d(0, 0, 0); }
|
|
|
+ 15% { opacity: 0.9; }
|
|
|
+ 78% { opacity: 0.9; }
|
|
|
+ 100% { opacity: 0; transform: translate3d(0, 230px, 0); }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes mobileFloat {
|
|
|
+ 0%, 100% { transform: translate3d(0, 0, 0); }
|
|
|
+ 50% { transform: translate3d(0, -6px, 0); }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes mobileBarPulse {
|
|
|
+ 0%, 100% { transform: translate3d(-6%, 0, 0); opacity: 0.78; }
|
|
|
+ 50% { transform: translate3d(6%, 0, 0); opacity: 1; }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes mobileMarquee {
|
|
|
+ from { transform: translate3d(0, 0, 0); }
|
|
|
+ to { transform: translate3d(-50%, 0, 0); }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes mobileRingBreathe {
|
|
|
+ 0%, 100% { box-shadow: 0 0 0 rgba(0, 240, 255, 0); border-color: rgba(0, 240, 255, 0.25); }
|
|
|
+ 50% { box-shadow: 0 0 34px rgba(0, 240, 255, 0.16); border-color: rgba(255, 82, 82, 0.34); }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes mobileLabelFloat {
|
|
|
+ 0%, 100% { transform: translate3d(0, 0, 0); }
|
|
|
+ 50% { transform: translate3d(0, -4px, 0); }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes mobileStepGlow {
|
|
|
+ 0%, 100% { border-color: rgba(255, 255, 255, 0.13); background: rgba(5, 5, 5, 0.42); }
|
|
|
+ 50% { border-color: rgba(0, 240, 255, 0.3); background: rgba(0, 240, 255, 0.055); }
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav,
|
|
|
+ .proof-pill,
|
|
|
+ .requirement-strip,
|
|
|
+ .signal-node,
|
|
|
+ .spine-cell,
|
|
|
+ .card,
|
|
|
+ .slice,
|
|
|
+ .timeline-row,
|
|
|
+ .deliverable,
|
|
|
+ .share-panel,
|
|
|
+ .daily-board,
|
|
|
+ .bottom-cta {
|
|
|
+ -webkit-backdrop-filter: none;
|
|
|
+ backdrop-filter: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ [data-reveal] {
|
|
|
+ transform: translate3d(0, 16px, 0);
|
|
|
+ will-change: auto;
|
|
|
+ transition-duration: 0.46s;
|
|
|
+ }
|
|
|
+
|
|
|
+ [data-reveal="fade-left"],
|
|
|
+ [data-reveal="fade-right"],
|
|
|
+ [data-reveal="scale"] {
|
|
|
+ transform: translate3d(0, 16px, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-links {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-inner {
|
|
|
+ min-height: 58px;
|
|
|
+ padding: 0 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .brand-name small {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero {
|
|
|
+ min-height: auto;
|
|
|
+ padding: 40px 16px 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ h1 {
|
|
|
+ font-size: 2.38rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ h2 {
|
|
|
+ font-size: 1.82rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-lead {
|
|
|
+ font-size: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-proof,
|
|
|
+ .grid.two,
|
|
|
+ .grid.three,
|
|
|
+ .grid.four,
|
|
|
+ .capability-grid,
|
|
|
+ .platform-map,
|
|
|
+ .spine-grid,
|
|
|
+ .deliverables,
|
|
|
+ .need-finder,
|
|
|
+ .topic-stack {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .signal-spine {
|
|
|
+ padding: 48px 16px 52px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .spine-word {
|
|
|
+ top: -28px;
|
|
|
+ left: 0;
|
|
|
+ right: auto;
|
|
|
+ font-size: 3.4rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .spine-cell {
|
|
|
+ min-height: 170px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .requirement-strip {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .daily-board {
|
|
|
+ min-height: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pipeline-step {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-media {
|
|
|
+ min-height: 410px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .console-bottom {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ }
|
|
|
+
|
|
|
+ .meter {
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .section {
|
|
|
+ padding: 58px 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeline-row {
|
|
|
+ grid-template-columns: 1fr;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .skill-rings {
|
|
|
+ position: relative;
|
|
|
+ right: auto;
|
|
|
+ bottom: auto;
|
|
|
+ margin: 32px auto 0;
|
|
|
+ width: 230px;
|
|
|
+ height: 230px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .copy-row {
|
|
|
+ align-items: stretch;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-cta {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .footer-inner {
|
|
|
+ align-items: flex-start;
|
|
|
+ flex-direction: column;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 390px) {
|
|
|
+ h1 {
|
|
|
+ font-size: 2.08rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hero-media {
|
|
|
+ min-height: 370px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .signal-console {
|
|
|
+ inset: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .signal-node {
|
|
|
+ min-width: 74px;
|
|
|
+ font-size: 0.74rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ticker span {
|
|
|
+ font-size: 0.82rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (prefers-reduced-motion: reduce) {
|
|
|
+ *,
|
|
|
+ *::before,
|
|
|
+ *::after {
|
|
|
+ animation-duration: 0.01ms !important;
|
|
|
+ animation-iteration-count: 1 !important;
|
|
|
+ scroll-behavior: auto !important;
|
|
|
+ transition-duration: 0.01ms !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <canvas id="networkCanvas" aria-hidden="true"></canvas>
|
|
|
+ <div class="progress" id="progress"></div>
|
|
|
+ <div class="intro-overlay" aria-hidden="true">
|
|
|
+ <div class="intro-lockup">
|
|
|
+ <strong>VOC.market</strong>
|
|
|
+ <span>Social Voice Intelligence Workshop</span>
|
|
|
+ <div class="intro-rule"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <header class="nav">
|
|
|
+ <div class="nav-inner">
|
|
|
+ <a class="brand" href="#top" aria-label="VOC.market">
|
|
|
+ <span class="brand-mark">V</span>
|
|
|
+ <span class="brand-name">VOC.market<small>小红书 x 抖音需求洞察</small></span>
|
|
|
+ </a>
|
|
|
+ <nav class="nav-links" aria-label="页面导航">
|
|
|
+ <a href="#capability">课程能力</a>
|
|
|
+ <a href="#daily">口播日报</a>
|
|
|
+ <a href="#schedule">课程安排</a>
|
|
|
+ <a href="#deliverables">现场交付</a>
|
|
|
+ </nav>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <main id="top">
|
|
|
+ <section class="hero">
|
|
|
+ <div class="hero-inner">
|
|
|
+ <div class="hero-copy" data-reveal>
|
|
|
+ <div class="eyebrow">南昌本地 · 小红书 + 抖音 · 社媒 VOC 线下工作坊</div>
|
|
|
+ <h1>1天学会从评论里找用户需求,<span class="gradient-text">再做成选题和报告</span></h1>
|
|
|
+ <p class="hero-lead">VOC 就是“用户真实声音”。这堂课聚焦小红书和抖音:看大家怎么搜、怎么问、怎么吐槽、怎么夸,再把这些评论变成产品卖点、内容选题和一份可汇报的需求洞察。</p>
|
|
|
+ <div class="hero-actions">
|
|
|
+ <a class="button primary" href="#schedule">看这一天学什么</a>
|
|
|
+ <a class="button" href="#daily">看抖音选题日报</a>
|
|
|
+ </div>
|
|
|
+ <div class="hero-proof" aria-label="课程关键信息">
|
|
|
+ <div class="proof-pill">
|
|
|
+ <strong>2个平台</strong>
|
|
|
+ <span>小红书 + 抖音重点实操</span>
|
|
|
+ </div>
|
|
|
+ <div class="proof-pill">
|
|
|
+ <strong>5月28日下午</strong>
|
|
|
+ <span>安装环境,配好龙虾技能</span>
|
|
|
+ </div>
|
|
|
+ <div class="proof-pill">
|
|
|
+ <strong>5月29日全天</strong>
|
|
|
+ <span>做 VOC 分析、选题和报告</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="requirement-strip" data-reveal data-delay="1">
|
|
|
+ <div class="requirement-badge">REQ</div>
|
|
|
+ <div>
|
|
|
+ <b>参会要求:请提前下载并安装好龙虾</b>
|
|
|
+ <span>5月28日下午会帮你把小红书/抖音采集技能配置好,确保 5月29日全天实战能跟着老师一起跑。</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="hero-media" data-reveal data-delay="2" data-tilt>
|
|
|
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=1400&q=82" alt="社媒数据分析工作台">
|
|
|
+ <div class="signal-console">
|
|
|
+ <div class="console-top">
|
|
|
+ <span class="console-dots" aria-hidden="true"><span></span><span></span><span></span></span>
|
|
|
+ <span>VOC.market / 小红书 x 抖音需求雷达</span>
|
|
|
+ </div>
|
|
|
+ <div class="radar" aria-label="社媒信号雷达">
|
|
|
+ <div class="radar-line"></div>
|
|
|
+ <div class="signal-node">抖音<small>视频 / 评论 / 回复</small></div>
|
|
|
+ <div class="signal-node">小红书<small>笔记 / 评论 / 搜索词</small></div>
|
|
|
+ <div class="signal-node">用户需求<small>痛点 / 阻碍 / 场景</small></div>
|
|
|
+ <div class="signal-node">选题报告<small>内容 / 卖点 / 动作</small></div>
|
|
|
+ </div>
|
|
|
+ <div class="console-bottom">
|
|
|
+ <div class="meter"><span>内容信号</span><div class="bar"><i></i></div></div>
|
|
|
+ <div class="meter"><span>用户情绪</span><div class="bar"><i></i></div></div>
|
|
|
+ <div class="meter"><span>行动优先级</span><div class="bar"><i></i></div></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="ticker" aria-label="支持平台与能力">
|
|
|
+ <div class="ticker-track">
|
|
|
+ <div class="ticker-group">
|
|
|
+ <span>小红书笔记 / 评论 / 搜索词</span>
|
|
|
+ <span>抖音视频 / 评论 / 热评回复</span>
|
|
|
+ <span>从评论里找真实需求</span>
|
|
|
+ <span>把需求变成内容选题</span>
|
|
|
+ <span>生成可汇报的 VOC 报告</span>
|
|
|
+ <span>douyin-speaking-daily 每日选题雷达</span>
|
|
|
+ <span>口播逐字稿 / 爆款结构拆解</span>
|
|
|
+ <span>HTML VOC 报告 / 交付审计</span>
|
|
|
+ </div>
|
|
|
+ <div class="ticker-group" aria-hidden="true">
|
|
|
+ <span>小红书笔记 / 评论 / 搜索词</span>
|
|
|
+ <span>抖音视频 / 评论 / 热评回复</span>
|
|
|
+ <span>从评论里找真实需求</span>
|
|
|
+ <span>把需求变成内容选题</span>
|
|
|
+ <span>生成可汇报的 VOC 报告</span>
|
|
|
+ <span>douyin-speaking-daily 每日选题雷达</span>
|
|
|
+ <span>口播逐字稿 / 爆款结构拆解</span>
|
|
|
+ <span>HTML VOC 报告 / 交付审计</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="signal-spine" aria-label="社媒 VOC 工作流">
|
|
|
+ <div class="spine-inner">
|
|
|
+ <div class="spine-word">COMMENT TO INSIGHT</div>
|
|
|
+ <div class="spine-grid">
|
|
|
+ <div class="spine-cell" data-reveal>
|
|
|
+ <em>01 / 搜内容</em>
|
|
|
+ <strong>先找到相关笔记和视频</strong>
|
|
|
+ <span>围绕你的产品、品类和竞品,在小红书、抖音里找到用户正在看的内容。</span>
|
|
|
+ <b>01</b>
|
|
|
+ </div>
|
|
|
+ <div class="spine-cell" data-reveal data-delay="1">
|
|
|
+ <em>02 / 看评论</em>
|
|
|
+ <strong>再看大家到底在问什么</strong>
|
|
|
+ <span>高赞评论、追问、吐槽和回复,往往比标题更接近真实需求。</span>
|
|
|
+ <b>02</b>
|
|
|
+ </div>
|
|
|
+ <div class="spine-cell" data-reveal data-delay="2">
|
|
|
+ <em>03 / 找需求</em>
|
|
|
+ <strong>把评论整理成需求清单</strong>
|
|
|
+ <span>用户为什么想买、为什么犹豫、在什么场景使用,现场一步步拆出来。</span>
|
|
|
+ <b>03</b>
|
|
|
+ </div>
|
|
|
+ <div class="spine-cell" data-reveal data-delay="3">
|
|
|
+ <em>04 / 做结果</em>
|
|
|
+ <strong>变成选题、卖点和报告</strong>
|
|
|
+ <span>最后输出内容选题、口播方向、产品卖点和一份可汇报的 VOC 报告。</span>
|
|
|
+ <b>04</b>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section">
|
|
|
+ <div class="wrap">
|
|
|
+ <div class="section-head center" data-reveal>
|
|
|
+ <div class="section-kicker">这堂课到底解决什么</div>
|
|
|
+ <h2>看懂小红书和抖音评论,你就能更快知道用户想要什么。</h2>
|
|
|
+ <p class="sub">很多团队每天刷内容,却没有把评论区里的问题整理成需求。这堂课会用龙虾帮你把“刷到的内容”变成“能指导产品和内容的证据”。</p>
|
|
|
+ </div>
|
|
|
+ <div class="grid four">
|
|
|
+ <article class="card" data-reveal>
|
|
|
+ <span class="index">01</span>
|
|
|
+ <h3>内容很多,看不过来</h3>
|
|
|
+ <p>同一个品类每天都有大量笔记和视频,靠人工刷很容易漏掉重要信号。</p>
|
|
|
+ </article>
|
|
|
+ <article class="card" data-reveal data-delay="1">
|
|
|
+ <span class="index rose">02</span>
|
|
|
+ <h3>评论里才有真实问题</h3>
|
|
|
+ <p>用户会在评论里问价格、效果、适不适合自己,也会说出不买的原因。</p>
|
|
|
+ </article>
|
|
|
+ <article class="card" data-reveal data-delay="2">
|
|
|
+ <span class="index amber">03</span>
|
|
|
+ <h3>爆款不能只靠照抄</h3>
|
|
|
+ <p>要知道它为什么能火:开头怎么抓人、哪里解决顾虑、评论为什么愿意互动。</p>
|
|
|
+ </article>
|
|
|
+ <article class="card" data-reveal data-delay="3">
|
|
|
+ <span class="index green">04</span>
|
|
|
+ <h3>结论要有证据</h3>
|
|
|
+ <p>每个需求、卖点和选题都要能回到原始评论,不做拍脑袋的判断。</p>
|
|
|
+ </article>
|
|
|
+ </div>
|
|
|
+ <div class="need-finder" aria-label="社媒 VOC 需求发现路径">
|
|
|
+ <div class="need-chip" data-reveal>
|
|
|
+ <strong>评论找需求</strong>
|
|
|
+ <span>把“想要、担心、不会用、太贵、有没有替代品”转成需求和购买阻碍。</span>
|
|
|
+ </div>
|
|
|
+ <div class="need-chip" data-reveal data-delay="1">
|
|
|
+ <strong>回复找证据</strong>
|
|
|
+ <span>热评下的追问和反驳,是判断需求强弱和人群分层的关键证据。</span>
|
|
|
+ </div>
|
|
|
+ <div class="need-chip" data-reveal data-delay="2">
|
|
|
+ <strong>账号找节奏</strong>
|
|
|
+ <span>监听竞品、达人和标杆账号,看到内容节奏、选题方向和转化动作。</span>
|
|
|
+ </div>
|
|
|
+ <div class="need-chip" data-reveal data-delay="3">
|
|
|
+ <strong>爆款找结构</strong>
|
|
|
+ <span>从逐字稿拆钩子、冲突、证明点和评论触发点,迁移成自己的口播框架。</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section alt" id="capability">
|
|
|
+ <div class="wrap">
|
|
|
+ <div class="skill-wall">
|
|
|
+ <div class="slice" data-reveal>
|
|
|
+ <div class="section-kicker">Capability Stack</div>
|
|
|
+ <h3>我们现场讲的不是一个工具,而是一条已经技能化的社媒 VOC 生产线。</h3>
|
|
|
+ <p>从技能配置、采集、归一化、洞察、口播日报到 HTML 报告,课程会把可交付的能力拆成学员能看懂、能复制、能回公司继续用的流程。</p>
|
|
|
+ <div class="skill-rings" aria-hidden="true">
|
|
|
+ <span class="ring-label a">采集</span>
|
|
|
+ <span class="ring-label b">理解</span>
|
|
|
+ <span class="ring-label c">报告</span>
|
|
|
+ <span class="ring-label d">行动</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="capability-grid">
|
|
|
+ <div class="capability" data-reveal data-delay="1">
|
|
|
+ <strong>小红书/抖音采集</strong>
|
|
|
+ <span>正课优先跑通小红书和抖音:关键词搜索、笔记/视频详情、评论、热评回复、账号内容。</span>
|
|
|
+ </div>
|
|
|
+ <div class="capability" data-reveal data-delay="2">
|
|
|
+ <strong>账号与话题监听</strong>
|
|
|
+ <span>围绕关键词、竞品账号、达人内容和话题讨论持续观察,沉淀内容节奏、互动表现和需求变化。</span>
|
|
|
+ </div>
|
|
|
+ <div class="capability" data-reveal data-delay="3">
|
|
|
+ <strong>douyin-speaking-daily</strong>
|
|
|
+ <span>关键词监听、账号作品监听、评论采集、可选逐字稿补跑、每日选题日报、脚本共创和偏好沉淀。</span>
|
|
|
+ </div>
|
|
|
+ <div class="capability" data-reveal data-delay="4">
|
|
|
+ <strong>报告与审计</strong>
|
|
|
+ <span>VOC 数据归一化、mini report、HTML v2 报告生成、证据卡、行动建议和交付前审计。</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section" id="daily">
|
|
|
+ <div class="wrap daily-lab">
|
|
|
+ <div class="daily-copy" data-reveal>
|
|
|
+ <div class="section-head">
|
|
|
+ <div class="section-kicker">douyin-speaking-daily</div>
|
|
|
+ <h2>把抖音变成每天可刷新的口播选题雷达。</h2>
|
|
|
+ <p class="sub">这条能力适合讲给内容团队和老板听:不是“我今天想发什么”,而是“今天用户和竞品正在把什么问题推到台前”。</p>
|
|
|
+ </div>
|
|
|
+ <div class="daily-points">
|
|
|
+ <div class="daily-point">
|
|
|
+ <b>01</b>
|
|
|
+ <div>
|
|
|
+ <strong>先建立账号 profile</strong>
|
|
|
+ <span>行业、人群、账号定位、转化目标、禁忌表达和历史偏好先沉淀,后续选题不跑偏。</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="daily-point">
|
|
|
+ <b>02</b>
|
|
|
+ <div>
|
|
|
+ <strong>再跑关键词与账号监听</strong>
|
|
|
+ <span>关键词视频、确认账号近期作品、评论和回复一起看,找到需求和内容机会。</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="daily-point">
|
|
|
+ <b>03</b>
|
|
|
+ <div>
|
|
|
+ <strong>最后进入脚本共创</strong>
|
|
|
+ <span>选题 N、改稿、定稿都能续接同一次日报,把爆款结构迁移成自己的口播稿。</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="daily-board" data-reveal data-delay="2" data-tilt>
|
|
|
+ <div class="board-inner">
|
|
|
+ <div class="board-header">
|
|
|
+ <div class="board-title">
|
|
|
+ <strong>Daily Speaking Radar</strong>
|
|
|
+ <span>runner -> report -> script co-creation</span>
|
|
|
+ </div>
|
|
|
+ <span class="board-status">P0 closed loop</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="pipeline">
|
|
|
+ <div class="pipeline-step">
|
|
|
+ <code>profile</code>
|
|
|
+ <div>
|
|
|
+ <strong>账号定位与转化目标</strong>
|
|
|
+ <span>读取行业、人群、话术边界和脚本偏好。</span>
|
|
|
+ </div>
|
|
|
+ <i>1</i>
|
|
|
+ </div>
|
|
|
+ <div class="pipeline-step">
|
|
|
+ <code>monitor</code>
|
|
|
+ <div>
|
|
|
+ <strong>关键词 + 账号作品监听</strong>
|
|
|
+ <span>抓取爆款视频、竞品账号近期作品和互动证据。</span>
|
|
|
+ </div>
|
|
|
+ <i>2</i>
|
|
|
+ </div>
|
|
|
+ <div class="pipeline-step">
|
|
|
+ <code>comments</code>
|
|
|
+ <div>
|
|
|
+ <strong>评论 / 回复需求信号</strong>
|
|
|
+ <span>从高赞评论、追问和反驳里识别痛点、阻碍和场景。</span>
|
|
|
+ </div>
|
|
|
+ <i>3</i>
|
|
|
+ </div>
|
|
|
+ <div class="pipeline-step">
|
|
|
+ <code>transcript</code>
|
|
|
+ <div>
|
|
|
+ <strong>可选补跑逐字稿</strong>
|
|
|
+ <span>拆开头、冲突、证明点、结尾动作和评论触发点。</span>
|
|
|
+ </div>
|
|
|
+ <i>4</i>
|
|
|
+ </div>
|
|
|
+ <div class="pipeline-step">
|
|
|
+ <code>daily report</code>
|
|
|
+ <div>
|
|
|
+ <strong>今日选题池与共创稿</strong>
|
|
|
+ <span>输出选题置信度、可讲方向、60 秒稿和定稿沉淀。</span>
|
|
|
+ </div>
|
|
|
+ <i>5</i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="topic-stack">
|
|
|
+ <div class="topic-card">
|
|
|
+ <small>TOPIC 01 / 高置信</small>
|
|
|
+ <strong>用户不是不买,是不确定它适不适合自己</strong>
|
|
|
+ <span>评论证据:反复询问场景、预算和替代方案。</span>
|
|
|
+ </div>
|
|
|
+ <div class="topic-card">
|
|
|
+ <small>TOPIC 02 / 可转化</small>
|
|
|
+ <strong>把专家术语翻译成真实使用场景</strong>
|
|
|
+ <span>逐字稿证据:爆款用冲突开场,再用案例证明。</span>
|
|
|
+ </div>
|
|
|
+ <div class="topic-card">
|
|
|
+ <small>TOPIC 03 / 明日监听</small>
|
|
|
+ <strong>竞品新内容评论区出现同类追问</strong>
|
|
|
+ <span>账号证据:近期作品互动集中在购买阻碍。</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section">
|
|
|
+ <div class="wrap">
|
|
|
+ <div class="section-head" data-reveal>
|
|
|
+ <div class="section-kicker">Platform Map</div>
|
|
|
+ <h2>聚焦小红书和抖音,把“内容”和“评论”整理成需求证据。</h2>
|
|
|
+ <p class="sub">学员不用背 API 名称,只需要理解:搜什么内容、看哪些评论、怎么判断需求、最后怎么变成选题和报告。</p>
|
|
|
+ </div>
|
|
|
+ <div class="platform-map">
|
|
|
+ <div class="platform" data-reveal>
|
|
|
+ <b>抖音</b>
|
|
|
+ <span>关键词视频、话题、视频详情、评论、回复、账号主页、近期作品、逐字稿和口播结构。</span>
|
|
|
+ </div>
|
|
|
+ <div class="platform" data-reveal data-delay="1">
|
|
|
+ <b>小红书</b>
|
|
|
+ <span>关键词笔记、笔记详情、评论、作者信息,适合测评、种草、痛点和生活方式洞察。</span>
|
|
|
+ </div>
|
|
|
+ <div class="platform" data-reveal data-delay="2">
|
|
|
+ <b>热评回复</b>
|
|
|
+ <span>重点看高赞评论下面的追问、反驳和补充,判断需求是不是足够真实。</span>
|
|
|
+ </div>
|
|
|
+ <div class="platform" data-reveal data-delay="3">
|
|
|
+ <b>竞品账号</b>
|
|
|
+ <span>观察竞品和达人近期内容,找出他们正在解决的问题和评论区的新机会。</span>
|
|
|
+ </div>
|
|
|
+ <div class="platform" data-reveal>
|
|
|
+ <b>话题与关键词</b>
|
|
|
+ <span>把平台热词、搜索词、评论词和用户原话统一到采集矩阵,避免只看单一爆款。</span>
|
|
|
+ </div>
|
|
|
+ <div class="platform" data-reveal data-delay="1">
|
|
|
+ <b>评论与回复</b>
|
|
|
+ <span>把高赞评论、追问、反驳、复购表达转成需求、阻碍、证据和内容钩子。</span>
|
|
|
+ </div>
|
|
|
+ <div class="platform" data-reveal data-delay="2">
|
|
|
+ <b>账号监听</b>
|
|
|
+ <span>确认竞品/达人账号,持续观察近期作品和评论变化,形成每日选题雷达。</span>
|
|
|
+ </div>
|
|
|
+ <div class="platform" data-reveal data-delay="3">
|
|
|
+ <b>报告工厂</b>
|
|
|
+ <span>把小红书和抖音样本合并到同一 VOC 结构里,输出 HTML 报告、审计结果和行动清单。</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section alt" id="schedule">
|
|
|
+ <div class="wrap">
|
|
|
+ <div class="section-head" data-reveal>
|
|
|
+ <div class="section-kicker">Workshop Flow</div>
|
|
|
+ <h2>5月28日下午安装环境,5月29日全天做 VOC 分析实战。</h2>
|
|
|
+ <p class="sub">南昌本地线下工作坊。5月29日全程用真实业务问题操作,建议每位学员带一个自己的品牌、品类、竞品账号或口播账号方向。</p>
|
|
|
+ </div>
|
|
|
+ <div class="timeline">
|
|
|
+ <article class="timeline-row" data-reveal>
|
|
|
+ <div class="time">5月28日下午<br>安装环境</div>
|
|
|
+ <div>
|
|
|
+ <h3>下载并安装 OpenClaw(龙虾),现场配置社媒 VOC 技能</h3>
|
|
|
+ <p>这半天重点不是讲理论,而是把 VOC Token、社媒采集技能、douyin-speaking-daily、工作区和样例项目配置到能跑,为第二天全天实战做好准备。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span>参会前下载 OpenClaw</span>
|
|
|
+ <span>配置 VOC Token</span>
|
|
|
+ <span>配置社媒技能包</span>
|
|
|
+ <span>跑通 douyin-speaking-daily Demo</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </article>
|
|
|
+
|
|
|
+ <article class="timeline-row" data-reveal data-delay="1">
|
|
|
+ <div class="time">5月29日上午<br>VOC 需求发现</div>
|
|
|
+ <div>
|
|
|
+ <h3>从业务问题出发,用社媒找真实 VOC 需求</h3>
|
|
|
+ <p>现场跑抖音/小红书主线,并讲清社媒采集的同构方法:如何找关键词、如何选样本、如何从评论/回复里判断需求强度。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span>小红书/抖音采集思路</span>
|
|
|
+ <span>抖音视频与评论</span>
|
|
|
+ <span>小红书笔记与评论</span>
|
|
|
+ <span>需求 / 阻碍 / 场景证据</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </article>
|
|
|
+
|
|
|
+ <article class="timeline-row" data-reveal data-delay="2">
|
|
|
+ <div class="time">5月29日下午<br>口播日报与报告</div>
|
|
|
+ <div>
|
|
|
+ <h3>用 douyin-speaking-daily 生成选题雷达,再输出 VOC 报告</h3>
|
|
|
+ <p>用评论证据生成 VOC 洞察,用逐字稿和爆款结构拆出可复用口播框架,再把结论落到产品、内容、投放和销售动作。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span>每日选题日报</span>
|
|
|
+ <span>VOC 数据归一化</span>
|
|
|
+ <span>痛点/场景/阻碍聚类</span>
|
|
|
+ <span>HTML 报告与审计</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </article>
|
|
|
+
|
|
|
+ <article class="timeline-row" data-reveal data-delay="3">
|
|
|
+ <div class="time">5月29日收尾<br>现场交付</div>
|
|
|
+ <div>
|
|
|
+ <h3>每组交付一套自己的社媒 VOC 工作样板</h3>
|
|
|
+ <p>不是听完就散,而是现场验收技能配置、采集矩阵、证据包、洞察报告、口播选题和下一步行动清单。</p>
|
|
|
+ <div class="tags">
|
|
|
+ <span>技能配置完成</span>
|
|
|
+ <span>采集矩阵</span>
|
|
|
+ <span>证据卡</span>
|
|
|
+ <span>洞察报告</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </article>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section" id="deliverables">
|
|
|
+ <div class="wrap">
|
|
|
+ <div class="section-head center" data-reveal>
|
|
|
+ <div class="section-kicker">Deliverables</div>
|
|
|
+ <h2>现场带走 6 份能继续工作的资产。</h2>
|
|
|
+ <p class="sub">我们把交付物设计成企业内部可复盘、可协作、可继续迭代的格式。</p>
|
|
|
+ </div>
|
|
|
+ <div class="deliverables">
|
|
|
+ <div class="deliverable" data-reveal>
|
|
|
+ <span class="mark">1</span>
|
|
|
+ <strong>技能配置完成</strong>
|
|
|
+ <span>龙虾、VOC Token、社媒采集技能和 douyin-speaking-daily 跑通。</span>
|
|
|
+ </div>
|
|
|
+ <div class="deliverable" data-reveal data-delay="1">
|
|
|
+ <span class="mark">2</span>
|
|
|
+ <strong>社媒采集矩阵</strong>
|
|
|
+ <span>平台、关键词、账号、话题、样本量、采集目的和风险边界。</span>
|
|
|
+ </div>
|
|
|
+ <div class="deliverable" data-reveal data-delay="2">
|
|
|
+ <span class="mark">3</span>
|
|
|
+ <strong>用户原声证据包</strong>
|
|
|
+ <span>视频/笔记/评论/回复来源清晰,能回溯,不靠拍脑袋。</span>
|
|
|
+ </div>
|
|
|
+ <div class="deliverable" data-reveal data-delay="3">
|
|
|
+ <span class="mark">4</span>
|
|
|
+ <strong>社媒 VOC 报告</strong>
|
|
|
+ <span>痛点、场景、阻碍、卖点、内容机会和行动建议。</span>
|
|
|
+ </div>
|
|
|
+ <div class="deliverable" data-reveal data-delay="4">
|
|
|
+ <span class="mark">5</span>
|
|
|
+ <strong>口播日报与选题池</strong>
|
|
|
+ <span>每日趋势判断、选题置信度、60 秒稿和可复用结构框架。</span>
|
|
|
+ </div>
|
|
|
+ <div class="deliverable" data-reveal data-delay="4">
|
|
|
+ <span class="mark">6</span>
|
|
|
+ <strong>行动优先级清单</strong>
|
|
|
+ <span>产品优化、内容选题、投放测试、账号监听的下一步。</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="section alt">
|
|
|
+ <div class="wrap split">
|
|
|
+ <div class="quote" data-reveal>
|
|
|
+ <p>适合真正想把社媒数据变成增长动作的人。</p>
|
|
|
+ <span>企业主、品牌负责人、产品负责人、内容/运营/增长团队,都能带着自己的业务问题来。</span>
|
|
|
+ </div>
|
|
|
+ <div class="grid two">
|
|
|
+ <article class="card" data-reveal data-delay="1">
|
|
|
+ <span class="index">A</span>
|
|
|
+ <h3>推荐参加</h3>
|
|
|
+ <ul class="list">
|
|
|
+ <li>正在做小红书、抖音的品牌和内容团队。</li>
|
|
|
+ <li>想从评论区、竞品账号和爆款视频中提炼产品/内容机会的人。</li>
|
|
|
+ <li>需要把 AI 工作流变成团队 SOP 和客户交付能力的顾问/服务商。</li>
|
|
|
+ <li>希望从“会用 AI”升级为“能用 AI 交付报告和策略”的业务负责人。</li>
|
|
|
+ </ul>
|
|
|
+ </article>
|
|
|
+ <article class="card" data-reveal data-delay="2">
|
|
|
+ <span class="index rose">B</span>
|
|
|
+ <h3>报名准备</h3>
|
|
|
+ <ul class="list">
|
|
|
+ <li>参会前请提前下载并安装好 OpenClaw(龙虾)。</li>
|
|
|
+ <li>请务必带电脑,全程实操。</li>
|
|
|
+ <li>建议提前准备一个品类、品牌、竞品、达人或口播账号方向。</li>
|
|
|
+ <li>5月28日下午统一安装环境、配置 VOC Token 和社媒 VOC 技能。</li>
|
|
|
+ <li>真实项目涉及敏感数据时,课堂可用脱敏关键词和公开样本。</li>
|
|
|
+ </ul>
|
|
|
+ </article>
|
|
|
+ <article class="card" data-reveal data-delay="3">
|
|
|
+ <span class="index amber">C</span>
|
|
|
+ <h3>活动信息</h3>
|
|
|
+ <ul class="list">
|
|
|
+ <li>形式:南昌本地线下工作坊。</li>
|
|
|
+ <li>时间:5月28日下午安装环境,5月29日全天 VOC 分析实战。</li>
|
|
|
+ <li>人数:建议 30 人以内,方便现场辅导。</li>
|
|
|
+ <li>地点:南昌本地场地,具体位置另行同步。</li>
|
|
|
+ <li>费用:以最终通知为准。</li>
|
|
|
+ </ul>
|
|
|
+ </article>
|
|
|
+ <article class="card" data-reveal data-delay="4">
|
|
|
+ <span class="index green">D</span>
|
|
|
+ <h3>品牌背书</h3>
|
|
|
+ <ul class="list">
|
|
|
+ <li>VOC.market 企业级 VOC 智能工厂方法论。</li>
|
|
|
+ <li>OpenClaw 龙虾技能包驱动,覆盖采集、分析、报告和审计。</li>
|
|
|
+ <li>小红书/抖音内容、用户评论和热评回复可组合成可追溯洞察。</li>
|
|
|
+ <li>目标不是一次性报告,而是训练团队拥有持续情报能力。</li>
|
|
|
+ </ul>
|
|
|
+ </article>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ </main>
|
|
|
+
|
|
|
+ <nav class="bottom-cta" aria-label="底部导航">
|
|
|
+ <a class="button" href="#schedule">课程安排</a>
|
|
|
+ <a class="button primary" href="#deliverables">现场交付</a>
|
|
|
+ </nav>
|
|
|
+
|
|
|
+ <footer>
|
|
|
+ <div class="footer-inner">
|
|
|
+ <div class="brand">
|
|
|
+ <span class="brand-mark">V</span>
|
|
|
+ <span class="brand-name">VOC.market<small>VOC 为先 · 内容为王 · 增长为果</small></span>
|
|
|
+ </div>
|
|
|
+ <span>社媒 VOC 龙虾工作坊单页初稿</span>
|
|
|
+ </div>
|
|
|
+ </footer>
|
|
|
+
|
|
|
+ <div class="toast" id="toast">已复制</div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ const progress = document.getElementById("progress");
|
|
|
+ const revealItems = document.querySelectorAll("[data-reveal]");
|
|
|
+ const toast = document.getElementById("toast");
|
|
|
+ const introOverlay = document.querySelector(".intro-overlay");
|
|
|
+ const nav = document.querySelector(".nav");
|
|
|
+ const sectionBlocks = document.querySelectorAll(".section, .signal-spine, .hero");
|
|
|
+ const canvas = document.getElementById("networkCanvas");
|
|
|
+ const ctx = canvas ? canvas.getContext("2d") : null;
|
|
|
+ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
|
+ const isTouchLike = window.matchMedia("(hover: none), (pointer: coarse)").matches;
|
|
|
+ const isMobileSafeMode = document.documentElement.classList.contains("mobile-safe-mode");
|
|
|
+
|
|
|
+ function updateProgress() {
|
|
|
+ const scrollTop = window.scrollY || document.documentElement.scrollTop;
|
|
|
+ const maxScroll = document.documentElement.scrollHeight - window.innerHeight;
|
|
|
+ const pct = maxScroll > 0 ? (scrollTop / maxScroll) * 100 : 0;
|
|
|
+ if (progress) progress.style.width = pct + "%";
|
|
|
+ if (nav) nav.classList.toggle("is-scrolled", scrollTop > 12);
|
|
|
+ }
|
|
|
+
|
|
|
+ revealItems.forEach((item, index) => {
|
|
|
+ if (!item.getAttribute("data-reveal")) {
|
|
|
+ if (item.matches(".hero-media, .daily-board, .share-panel, .quote")) {
|
|
|
+ item.setAttribute("data-reveal", "scale");
|
|
|
+ } else if (item.matches(".section-head, .daily-copy, .slice")) {
|
|
|
+ item.setAttribute("data-reveal", "fade-left");
|
|
|
+ } else if (index % 3 === 1) {
|
|
|
+ item.setAttribute("data-reveal", "fade-right");
|
|
|
+ } else if (index % 3 === 2) {
|
|
|
+ item.setAttribute("data-reveal", "scale");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ if (isMobileSafeMode) {
|
|
|
+ revealItems.forEach((item) => item.classList.add("visible"));
|
|
|
+ sectionBlocks.forEach((item) => item.classList.add("section-active"));
|
|
|
+ } else if ("IntersectionObserver" in window) {
|
|
|
+ const revealObserver = new IntersectionObserver((entries) => {
|
|
|
+ entries.forEach((entry) => {
|
|
|
+ if (entry.isIntersecting) {
|
|
|
+ entry.target.classList.add("visible");
|
|
|
+ revealObserver.unobserve(entry.target);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" });
|
|
|
+
|
|
|
+ revealItems.forEach((item) => revealObserver.observe(item));
|
|
|
+
|
|
|
+ const sectionObserver = new IntersectionObserver((entries) => {
|
|
|
+ entries.forEach((entry) => {
|
|
|
+ entry.target.classList.toggle("section-active", entry.isIntersecting);
|
|
|
+ });
|
|
|
+ }, { threshold: 0.18, rootMargin: "-12% 0px -58% 0px" });
|
|
|
+
|
|
|
+ sectionBlocks.forEach((item) => sectionObserver.observe(item));
|
|
|
+ } else {
|
|
|
+ revealItems.forEach((item) => item.classList.add("visible"));
|
|
|
+ sectionBlocks.forEach((item) => item.classList.add("section-active"));
|
|
|
+ }
|
|
|
+
|
|
|
+ function showToast(message) {
|
|
|
+ toast.textContent = message;
|
|
|
+ toast.classList.add("show");
|
|
|
+ window.setTimeout(() => toast.classList.remove("show"), 1800);
|
|
|
+ }
|
|
|
+
|
|
|
+ function setupTilt() {
|
|
|
+ if (prefersReducedMotion || isTouchLike) return;
|
|
|
+ document.querySelectorAll("[data-tilt]").forEach((el) => {
|
|
|
+ el.addEventListener("mousemove", (event) => {
|
|
|
+ const rect = el.getBoundingClientRect();
|
|
|
+ const x = (event.clientX - rect.left) / rect.width - 0.5;
|
|
|
+ const y = (event.clientY - rect.top) / rect.height - 0.5;
|
|
|
+ el.style.transform = `perspective(900px) rotateY(${x * 5}deg) rotateX(${y * -5}deg)`;
|
|
|
+ });
|
|
|
+ el.addEventListener("mouseleave", () => {
|
|
|
+ el.style.transform = "perspective(900px) rotateY(0deg) rotateX(0deg)";
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ let nodes = [];
|
|
|
+ let animationId = null;
|
|
|
+ let networkStarted = false;
|
|
|
+
|
|
|
+ function shouldRunNetwork() {
|
|
|
+ return Boolean(ctx) && !prefersReducedMotion && !isMobileSafeMode && !isTouchLike && window.innerWidth >= 760;
|
|
|
+ }
|
|
|
+
|
|
|
+ function stopNetwork() {
|
|
|
+ if (animationId) {
|
|
|
+ cancelAnimationFrame(animationId);
|
|
|
+ animationId = null;
|
|
|
+ }
|
|
|
+ networkStarted = false;
|
|
|
+ if (ctx) ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
|
|
|
+ }
|
|
|
+
|
|
|
+ function resizeCanvas() {
|
|
|
+ if (!ctx || !canvas) return;
|
|
|
+ const ratio = window.devicePixelRatio || 1;
|
|
|
+ canvas.width = Math.floor(window.innerWidth * ratio);
|
|
|
+ canvas.height = Math.floor(window.innerHeight * ratio);
|
|
|
+ canvas.style.width = window.innerWidth + "px";
|
|
|
+ canvas.style.height = window.innerHeight + "px";
|
|
|
+ ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
|
|
|
+ createNodes();
|
|
|
+ }
|
|
|
+
|
|
|
+ function createNodes() {
|
|
|
+ const mobile = window.innerWidth < 720;
|
|
|
+ const count = mobile
|
|
|
+ ? Math.min(24, Math.max(12, Math.floor(window.innerWidth / 38)))
|
|
|
+ : Math.min(58, Math.max(24, Math.floor(window.innerWidth / 26)));
|
|
|
+ nodes = Array.from({ length: count }, () => ({
|
|
|
+ x: Math.random() * window.innerWidth,
|
|
|
+ y: Math.random() * window.innerHeight,
|
|
|
+ vx: (Math.random() - 0.5) * (mobile ? 0.22 : 0.36),
|
|
|
+ vy: (Math.random() - 0.5) * (mobile ? 0.22 : 0.36),
|
|
|
+ r: Math.random() * 1.6 + 0.6
|
|
|
+ }));
|
|
|
+ }
|
|
|
+
|
|
|
+ function drawNetwork() {
|
|
|
+ if (!ctx || !shouldRunNetwork()) {
|
|
|
+ stopNetwork();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
|
|
|
+ const mobile = window.innerWidth < 720;
|
|
|
+ const connectDistance = mobile ? 104 : 132;
|
|
|
+ nodes.forEach((node, index) => {
|
|
|
+ node.x += node.vx;
|
|
|
+ node.y += node.vy;
|
|
|
+ if (node.x < 0 || node.x > window.innerWidth) node.vx *= -1;
|
|
|
+ if (node.y < 0 || node.y > window.innerHeight) node.vy *= -1;
|
|
|
+
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.arc(node.x, node.y, node.r, 0, Math.PI * 2);
|
|
|
+ ctx.fillStyle = mobile ? "rgba(0, 240, 255, 0.38)" : "rgba(0, 240, 255, 0.5)";
|
|
|
+ ctx.fill();
|
|
|
+
|
|
|
+ for (let j = index + 1; j < nodes.length; j++) {
|
|
|
+ const other = nodes[j];
|
|
|
+ const dx = node.x - other.x;
|
|
|
+ const dy = node.y - other.y;
|
|
|
+ const dist = Math.sqrt(dx * dx + dy * dy);
|
|
|
+ if (dist < connectDistance) {
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(node.x, node.y);
|
|
|
+ ctx.lineTo(other.x, other.y);
|
|
|
+ ctx.strokeStyle = `rgba(255, 255, 255, ${0.13 * (1 - dist / connectDistance)})`;
|
|
|
+ ctx.lineWidth = 1;
|
|
|
+ ctx.stroke();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ animationId = requestAnimationFrame(drawNetwork);
|
|
|
+ }
|
|
|
+
|
|
|
+ function startNetwork() {
|
|
|
+ if (networkStarted || !shouldRunNetwork()) return;
|
|
|
+ networkStarted = true;
|
|
|
+ resizeCanvas();
|
|
|
+ drawNetwork();
|
|
|
+ }
|
|
|
+
|
|
|
+ function finishIntro() {
|
|
|
+ if (!introOverlay || introOverlay.classList.contains("is-gone")) {
|
|
|
+ startNetwork();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ introOverlay.classList.add("is-hiding");
|
|
|
+ window.setTimeout(() => {
|
|
|
+ introOverlay.classList.add("is-gone");
|
|
|
+ startNetwork();
|
|
|
+ }, prefersReducedMotion ? 20 : 440);
|
|
|
+ }
|
|
|
+
|
|
|
+ window.addEventListener("scroll", updateProgress, { passive: true });
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ if (shouldRunNetwork()) {
|
|
|
+ if (networkStarted) resizeCanvas();
|
|
|
+ else startNetwork();
|
|
|
+ } else {
|
|
|
+ stopNetwork();
|
|
|
+ }
|
|
|
+ }, { passive: true });
|
|
|
+ document.addEventListener("visibilitychange", () => {
|
|
|
+ if (document.hidden) stopNetwork();
|
|
|
+ else startNetwork();
|
|
|
+ });
|
|
|
+ setupTilt();
|
|
|
+ updateProgress();
|
|
|
+
|
|
|
+ if (document.readyState === "complete") {
|
|
|
+ window.setTimeout(finishIntro, prefersReducedMotion ? 0 : (window.innerWidth < 720 ? 420 : 820));
|
|
|
+ } else {
|
|
|
+ window.addEventListener("load", () => {
|
|
|
+ window.setTimeout(finishIntro, prefersReducedMotion ? 0 : (window.innerWidth < 720 ? 420 : 820));
|
|
|
+ }, { once: true });
|
|
|
+ }
|
|
|
+
|
|
|
+ window.setTimeout(finishIntro, prefersReducedMotion ? 0 : 1800);
|
|
|
+
|
|
|
+ window.addEventListener("beforeunload", () => {
|
|
|
+ if (animationId) cancelAnimationFrame(animationId);
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|