commit b2bd402fa97ddb5a429b6fd076019f132e6e2db8 Author: MrPPPPenguin Date: Thu Jul 30 10:23:59 2026 +0800 New ForntPage diff --git a/README.txt b/README.txt new file mode 100644 index 0000000..9cba672 --- /dev/null +++ b/README.txt @@ -0,0 +1,10 @@ +煮糊了 OverCooked｜纯静态 HTML 版本 + +使用方法： +1. 将本目录内全部文件保持原有结构上传到网站根目录。 +2. 首页入口为 index.html。 +3. 定价页入口为 pricing.html。 +4. 直接双击 index.html 也可在本地浏览。 + +本版本不依赖 Node.js、React、数据库或构建工具。 +基础版与专业版购买按钮已连接 Stripe，旗舰版按钮连接商务邮箱。 diff --git a/assets/_vinext_fonts/geist-8ac0455e797f/geist-001175b1.woff2 b/assets/_vinext_fonts/geist-8ac0455e797f/geist-001175b1.woff2 new file mode 100644 index 0000000..8a1d3df Binary files /dev/null and b/assets/_vinext_fonts/geist-8ac0455e797f/geist-001175b1.woff2 differ diff --git a/assets/_vinext_fonts/geist-8ac0455e797f/geist-52306abf.woff2 b/assets/_vinext_fonts/geist-8ac0455e797f/geist-52306abf.woff2 new file mode 100644 index 0000000..0bcca1b Binary files /dev/null and b/assets/_vinext_fonts/geist-8ac0455e797f/geist-52306abf.woff2 differ diff --git a/assets/_vinext_fonts/geist-8ac0455e797f/geist-875ccdd4.woff2 b/assets/_vinext_fonts/geist-8ac0455e797f/geist-875ccdd4.woff2 new file mode 100644 index 0000000..f385e23 Binary files /dev/null and b/assets/_vinext_fonts/geist-8ac0455e797f/geist-875ccdd4.woff2 differ diff --git a/assets/_vinext_fonts/geist-8ac0455e797f/geist-98bbbccb.woff2 b/assets/_vinext_fonts/geist-8ac0455e797f/geist-98bbbccb.woff2 new file mode 100644 index 0000000..8f01e76 Binary files /dev/null and b/assets/_vinext_fonts/geist-8ac0455e797f/geist-98bbbccb.woff2 differ diff --git a/assets/_vinext_fonts/geist-8ac0455e797f/geist-ff2310f5.woff2 b/assets/_vinext_fonts/geist-8ac0455e797f/geist-ff2310f5.woff2 new file mode 100644 index 0000000..7ab581f Binary files /dev/null and b/assets/_vinext_fonts/geist-8ac0455e797f/geist-ff2310f5.woff2 differ diff --git a/assets/_vinext_fonts/geist-mono-00e989178794/geist-mono-013b2f2f.woff2 b/assets/_vinext_fonts/geist-mono-00e989178794/geist-mono-013b2f2f.woff2 new file mode 100644 index 0000000..cf24126 Binary files /dev/null and b/assets/_vinext_fonts/geist-mono-00e989178794/geist-mono-013b2f2f.woff2 differ diff --git a/assets/_vinext_fonts/geist-mono-00e989178794/geist-mono-0638449e.woff2 b/assets/_vinext_fonts/geist-mono-00e989178794/geist-mono-0638449e.woff2 new file mode 100644 index 0000000..29dd20f Binary files /dev/null and b/assets/_vinext_fonts/geist-mono-00e989178794/geist-mono-0638449e.woff2 differ diff --git a/assets/_vinext_fonts/geist-mono-00e989178794/geist-mono-44745446.woff2 b/assets/_vinext_fonts/geist-mono-00e989178794/geist-mono-44745446.woff2 new file mode 100644 index 0000000..751a04d Binary files /dev/null and b/assets/_vinext_fonts/geist-mono-00e989178794/geist-mono-44745446.woff2 differ diff --git a/assets/_vinext_fonts/geist-mono-00e989178794/geist-mono-44e03052.woff2 b/assets/_vinext_fonts/geist-mono-00e989178794/geist-mono-44e03052.woff2 new file mode 100644 index 0000000..4fc15d1 Binary files /dev/null and b/assets/_vinext_fonts/geist-mono-00e989178794/geist-mono-44e03052.woff2 differ diff --git a/assets/_vinext_fonts/geist-mono-00e989178794/geist-mono-971fb274.woff2 b/assets/_vinext_fonts/geist-mono-00e989178794/geist-mono-971fb274.woff2 new file mode 100644 index 0000000..873f580 Binary files /dev/null and b/assets/_vinext_fonts/geist-mono-00e989178794/geist-mono-971fb274.woff2 differ diff --git a/assets/_vinext_fonts/geist-mono-00e989178794/geist-mono-f6b33328.woff2 b/assets/_vinext_fonts/geist-mono-00e989178794/geist-mono-f6b33328.woff2 new file mode 100644 index 0000000..c7700cd Binary files /dev/null and b/assets/_vinext_fonts/geist-mono-00e989178794/geist-mono-f6b33328.woff2 differ diff --git a/assets/apple.css b/assets/apple.css new file mode 100644 index 0000000..ab666df --- /dev/null +++ b/assets/apple.css @@ -0,0 +1,365 @@ +@font-face { + font-family: Geist; + src: url("_vinext_fonts/geist-8ac0455e797f/geist-98bbbccb.woff2") format("woff2"); + font-style: normal; + font-weight: 100 900; + font-display: swap; +} + +:root { + --black: #060607; + --surface: #121214; + --surface-2: #1c1c1e; + --paper: #f5f5f7; + --white: #ffffff; + --ink: #1d1d1f; + --secondary: #86868b; + --line-dark: rgba(255, 255, 255, 0.12); + --line-light: rgba(29, 29, 31, 0.12); + --orange: #ff6b3d; + --blue: #2997ff; + --green: #30d158; + --ease: cubic-bezier(.22, 1, .36, 1); + font: 100%/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", Geist, sans-serif; + color-scheme: dark; +} + +* { box-sizing: border-box; } +html { scroll-behavior: smooth; background: var(--black); } +body { margin: 0; overflow-x: hidden; background: var(--black); color: var(--white); font-family: inherit; -webkit-font-smoothing: antialiased; } +a { color: inherit; text-decoration: none; } +button { border: 0; color: inherit; font: inherit; } +img { display: block; max-width: 100%; } +[hidden] { display: none !important; } +::selection { background: var(--orange); color: #fff; } + +@view-transition { navigation: auto; } +::view-transition-old(root) { animation: page-fade-out .18s ease-in both; } +::view-transition-new(root) { animation: page-fade-in .34s var(--ease) both; } +@keyframes page-fade-out { to { opacity: 0; } } +@keyframes page-fade-in { from { opacity: 0; } } + +.skip-link { position: fixed; z-index: 200; top: -5rem; left: 1rem; border-radius: .6rem; padding: .7rem 1rem; background: #fff; color: #111; transition: top .2s; } +.skip-link:focus { top: 1rem; } +:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } + +/* Floating navigation */ +.site-header { position: fixed; z-index: 80; top: .75rem; right: 0; left: 0; opacity: 1; pointer-events: none; will-change: opacity; transition: opacity .26s ease; } +.site-header.is-scroll-hidden { opacity: 0; } +.site-header.is-scroll-hidden .nav-island { pointer-events: none; } +.nav-island { --glass-x: 50%; --glass-y: 0%; position: relative; isolation: isolate; overflow: hidden; width: min(calc(100% - 2rem), 62rem); height: 3.3rem; margin: auto; padding: 0 .55rem 0 .95rem; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,.23); border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.025) 48%, rgba(255,255,255,.05)), rgba(18,18,20,.42); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 -1px 0 rgba(0,0,0,.16) inset, 0 8px 26px rgba(0,0,0,.14), 0 24px 54px rgba(0,0,0,.13); -webkit-backdrop-filter: blur(28px) saturate(190%) contrast(1.05); backdrop-filter: blur(28px) saturate(190%) contrast(1.05); pointer-events: auto; transition: background .32s ease, border-color .32s ease, box-shadow .32s ease, backdrop-filter .32s ease; } +.nav-island::before { content: ""; position: absolute; z-index: -2; inset: 0; border-radius: inherit; background: radial-gradient(15rem 4.5rem at var(--glass-x) var(--glass-y), rgba(255,255,255,.24), transparent 70%), linear-gradient(105deg, rgba(255,255,255,.11), transparent 32%, rgba(255,255,255,.07) 58%, transparent 76%), linear-gradient(180deg, rgba(255,255,255,.08), transparent 55%); opacity: .88; pointer-events: none; } +.nav-island::after { content: ""; position: absolute; z-index: -1; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(105deg, rgba(255,255,255,.72), rgba(100,210,255,.16) 30%, rgba(255,255,255,.12) 50%, rgba(255,107,61,.12) 72%, rgba(255,255,255,.48)); opacity: .72; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } +.nav-island > * { position: relative; z-index: 1; } +.site-header.is-scrolled .nav-island { border-color: rgba(255,255,255,.26); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.035) 48%, rgba(255,255,255,.055)), rgba(18,18,20,.62); box-shadow: 0 1px 0 rgba(255,255,255,.24) inset, 0 -1px 0 rgba(0,0,0,.2) inset, 0 10px 30px rgba(0,0,0,.19), 0 28px 60px rgba(0,0,0,.17); -webkit-backdrop-filter: blur(32px) saturate(195%) contrast(1.06); backdrop-filter: blur(32px) saturate(195%) contrast(1.06); } +.wordmark { display: inline-flex; align-items: center; gap: .56rem; white-space: nowrap; font-size: .86rem; font-weight: 700; } +.wordmark b { margin-left: -.25rem; color: #8e8e93; font-size: .66rem; font-weight: 650; } +.wordmark-logo { width: 1.85rem; height: 1.85rem; flex: 0 0 auto; object-fit: contain; } +.desktop-nav { display: flex; align-items: center; gap: .18rem; padding: .18rem; border-radius: 999px; } +.desktop-nav a { min-width: 3.55rem; padding: .5rem .7rem; border-radius: 999px; color: #d2d2d7; text-align: center; font-size: .76rem; transition: color .2s, background .2s, transform .1s; } +.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { background: rgba(255,255,255,.09); color: #fff; } +.desktop-nav a:active { transform: scale(.95); } +.nav-actions { display: flex; align-items: center; gap: .5rem; } +.nav-contact { min-height: 2.25rem; padding: 0 .82rem 0 .92rem; display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; background: rgba(255,255,255,.92); color: #111113; font-size: .72rem; font-weight: 650; transition: background .18s, transform .1s; } +.nav-contact span { color: #6e6e73; font-size: .78rem; transition: transform .18s var(--ease); } +.nav-contact:hover { background: #fff; } +.nav-contact:hover span { transform: translateX(.12rem); } +.nav-contact:active { transform: scale(.96); } +.menu-button { display: none; position: relative; width: 2.55rem; height: 2.55rem; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: rgba(255,255,255,.08); box-shadow: inset 0 1px rgba(255,255,255,.08); cursor: pointer; transition: background .2s, transform .1s; } +.menu-button:hover { background: rgba(255,255,255,.14); } +.menu-button:active { transform: scale(.94); } +.menu-button span { position: absolute; left: .76rem; right: .76rem; height: 1px; background: #fff; transition: top .28s var(--ease), transform .28s var(--ease); } +.menu-button span:first-child { top: 1.03rem; } +.menu-button span:last-child { top: 1.48rem; } +.menu-button[aria-expanded="true"] span:first-child { top: 1.26rem; transform: rotate(45deg); } +.menu-button[aria-expanded="true"] span:last-child { top: 1.26rem; transform: rotate(-45deg); } +.mobile-menu { position: absolute; top: 4.15rem; right: 1rem; width: min(20rem, calc(100vw - 2rem)); padding: .55rem; border: 1px solid rgba(255,255,255,.15); border-radius: 1rem; background: rgba(25,25,28,.88); box-shadow: 0 28px 70px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.08); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); pointer-events: auto; transform-origin: top right; animation: menu-in .34s var(--ease) both; } +.mobile-menu a { display: block; padding: .9rem 1rem; border-radius: .8rem; font-size: .94rem; } +.mobile-menu a:hover { background: rgba(255,255,255,.08); } +@keyframes menu-in { from { opacity: 0; transform: translateY(-.5rem) scale(.95); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } } + +/* Hero */ +.hero { position: relative; height: calc(100svh - 5.5rem); min-height: 46rem; max-height: 60rem; overflow: hidden; background: #07090b; } +.hero-media { position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(4,5,7,.7) 0%, rgba(4,5,7,.45) 42%, rgba(4,5,7,.88) 100%), linear-gradient(90deg, rgba(3,5,7,.55), transparent 55%), url("../hero-cinema.png"); background-position: center 45%; background-size: cover; animation: hero-materialize 1.35s var(--ease) both; } +.hero-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 20%, transparent 0, rgba(3,4,6,.22) 48%, rgba(3,4,6,.72) 100%); } +@keyframes hero-materialize { from { opacity: .25; transform: scale(1.08); filter: blur(12px) saturate(.5); } to { opacity: 1; transform: scale(1.01); filter: none; } } +.hero-inner { position: relative; z-index: 2; width: min(calc(100% - 2rem), 74rem); height: 100%; margin: auto; padding-top: 6.4rem; display: flex; flex-direction: column; align-items: center; } +.hero-copy { position: relative; z-index: 3; max-width: 48rem; text-align: center; } +.hero-eyebrow { margin: 0 0 .65rem; display: flex; align-items: center; justify-content: center; gap: .55rem; color: #d2d2d7; font-size: .67rem; font-weight: 700; } +.hero-eyebrow span { width: .42rem; height: .42rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .25rem rgba(48,209,88,.13); } +.hero h1 { margin: 0; font-size: clamp(4.8rem, 9vw, 8.2rem); font-weight: 720; line-height: .9; letter-spacing: -.07em; } +.hero-product { margin: .65rem 0 0; color: #d2d2d7; font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 600; } +.hero-lead { max-width: 34rem; margin: .9rem auto 0; color: #b9b9be; font-size: .98rem; line-height: 1.65; } +.hero-actions { margin-top: 1.35rem; display: flex; align-items: center; justify-content: center; gap: .8rem; } +.button { min-height: 2.85rem; padding: 0 1.2rem; display: inline-flex; align-items: center; justify-content: center; gap: .72rem; border-radius: 999px; font-size: .8rem; font-weight: 700; transition: transform .12s, box-shadow .25s, background .25s; } +.button:active, .text-button:active, .console-tab:active, .feature-rail-controls button:active, .plan-button:active { transform: scale(.96); transition-duration: .08s; } +.button-primary { background: rgba(255,255,255,.94); color: #111113; box-shadow: inset 0 1px #fff, 0 10px 24px rgba(0,0,0,.2); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); } +.button-primary:hover { background: #fff; box-shadow: inset 0 1px #fff, 0 14px 30px rgba(0,0,0,.26); transform: translateY(-1px); } +.text-button { min-height: 2.85rem; padding: 0 .4rem; display: inline-flex; align-items: center; gap: .55rem; color: #f5f5f7; font-size: .8rem; font-weight: 650; transition: opacity .2s, transform .1s; } +.text-button:hover { opacity: .72; } + +.product-stage { --stage-width: min(57rem, 78vw); position: relative; width: var(--stage-width); margin-top: 2rem; perspective: 1200px; } +.product-window { --rx: 0deg; --ry: 0deg; position: relative; overflow: hidden; height: 24rem; border: 1px solid rgba(255,255,255,.2); border-radius: 1rem; background: rgba(17,18,21,.79); box-shadow: 0 42px 100px rgba(0,0,0,.58), 0 1px 0 rgba(255,255,255,.08), inset 0 1px rgba(255,255,255,.11); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%); transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; will-change: transform; animation: product-in 1.05s .28s var(--ease) both; } +@keyframes product-in { from { opacity: 0; transform: perspective(1200px) translateY(2.4rem) rotateX(4deg) scale(.94); filter: blur(10px); } to { opacity: 1; transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)); filter: none; } } +.window-bar { height: 2.8rem; padding: 0 .9rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); } +.traffic-lights { display: flex; gap: .32rem; } +.traffic-lights i { width: .48rem; height: .48rem; border-radius: 50%; background: #ff5f57; } +.traffic-lights i:nth-child(2) { background: #febc2e; } +.traffic-lights i:nth-child(3) { background: #28c840; } +.window-title { display: flex; align-items: center; gap: .4rem; color: #a1a1a6; font-size: .62rem; font-weight: 650; } +.window-mark { width: .55rem; height: .55rem; border-radius: .18rem .18rem .3rem .3rem; background: var(--orange); box-shadow: 0 0 1rem rgba(255,107,61,.55); } +.window-status { justify-self: end; display: flex; align-items: center; gap: .4rem; color: #9bd8ae; font-size: .58rem; } +.window-status span { width: .36rem; height: .36rem; border-radius: 50%; background: var(--green); } +.window-layout { height: calc(100% - 2.8rem); display: grid; grid-template-columns: 4rem 1fr; } +.window-sidebar { padding: .8rem .42rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; border-right: 1px solid rgba(255,255,255,.07); } +.console-tab { width: 3.05rem; min-height: 3rem; padding: .35rem 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .16rem; border-radius: .72rem; background: transparent; color: #6e6e73; cursor: pointer; transition: color .2s, background .2s, transform .1s; } +.console-tab i { font-style: normal; font-size: .82rem; line-height: 1; } +.console-tab span { font-size: .54rem; } +.console-tab:hover { color: #fff; background: rgba(255,255,255,.055); } +.console-tab.is-active { color: #fff; background: rgba(255,255,255,.11); box-shadow: 0 4px 12px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.08); } +.window-main { min-width: 0; padding: 1.05rem 1.2rem; } +.console-view { height: 100%; animation: view-in .34s var(--ease) both; } +@keyframes view-in { from { opacity: 0; transform: translateY(.5rem); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } } +.console-heading { display: flex; align-items: center; justify-content: space-between; } +.console-heading small { display: block; color: #6e6e73; font-size: .56rem; } +.console-heading h2 { margin: .08rem 0 0; font-size: 1rem; letter-spacing: -.025em; } +.view-chip { padding: .3rem .5rem; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.05); color: #8e8e93; font-size: .53rem; } +.metric-row { margin-top: .75rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } +.metric-row article { min-width: 0; padding: .7rem .78rem; border: 1px solid rgba(255,255,255,.065); border-radius: .6rem; background: rgba(255,255,255,.048); } +.metric-row small { display: block; color: #77777d; font-size: .54rem; } +.metric-row strong { display: block; margin: .2rem 0 .12rem; font-size: 1.15rem; letter-spacing: -.03em; } +.metric-row span { color: #77777d; font-size: .49rem; } +.metric-row .trend { color: #73d995; } +.chart-panel { height: 9.25rem; margin-top: .5rem; padding: .7rem .78rem; border: 1px solid rgba(255,255,255,.065); border-radius: .6rem; background: rgba(255,255,255,.032); } +.panel-title { display: flex; justify-content: space-between; font-size: .56rem; } +.panel-title small { color: #65656a; } +.bar-chart { height: 6.8rem; padding: .6rem .15rem 0; display: flex; align-items: flex-end; gap: .38rem; background: repeating-linear-gradient(to top, transparent 0, transparent 1.55rem, rgba(255,255,255,.042) 1.58rem, rgba(255,255,255,.042) 1.62rem); } +.bar-chart i { flex: 1; height: var(--h); min-width: .24rem; border-radius: .18rem .18rem .04rem .04rem; background: var(--orange); opacity: .88; } +.media-list { margin-top: .8rem; display: grid; gap: .45rem; } +.media-list article { padding: .55rem; display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: center; gap: .7rem; border: 1px solid rgba(255,255,255,.07); border-radius: .55rem; background: rgba(255,255,255,.042); } +.poster { height: 2.75rem; border-radius: .35rem; } +.poster-one { background: linear-gradient(140deg, #2c5269, #d49b6e); } +.poster-two { background: linear-gradient(140deg, #785b4d, #1f2d34); } +.poster-three { background: linear-gradient(140deg, #1b2741, #b84d42); } +.media-list b { display: block; font-size: .66rem; } +.media-list small { display: block; margin-top: .16rem; color: #77777d; font-size: .52rem; } +.media-list em { color: #a1a1a6; font-size: .52rem; font-style: normal; } +.node-map { position: relative; height: 13.5rem; margin-top: .75rem; overflow: hidden; border: 1px solid rgba(255,255,255,.07); border-radius: .6rem; background: rgba(255,255,255,.035); } +.map-grid, .network-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 2rem 2rem; -webkit-mask-image: radial-gradient(circle, #000, transparent 72%); mask-image: radial-gradient(circle, #000, transparent 72%); } +.node { position: absolute; display: flex; align-items: center; gap: .32rem; color: #a1a1a6; font-size: .52rem; } +.node i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .28rem rgba(48,209,88,.12), 0 0 1rem rgba(48,209,88,.4); } +.node-a { left: 26%; top: 34%; }.node-b { left: 48%; top: 65%; }.node-c { right: 18%; top: 28%; }.node-d { left: 12%; bottom: 15%; } +.node-summary { margin-top: .45rem; display: flex; justify-content: space-between; color: #77777d; font-size: .52rem; } +.node-summary span { display: flex; align-items: center; gap: .3rem; } +.node-summary i { width: .3rem; height: .3rem; border-radius: 50%; background: var(--green); } +.node-summary b { color: #b9b9be; } +.live-activity { position: absolute; z-index: 4; right: -1rem; bottom: 1rem; min-width: 8.6rem; padding: .58rem .76rem; display: flex; align-items: center; gap: .62rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(30,30,33,.66); box-shadow: 0 16px 40px rgba(0,0,0,.4), inset 1px 1px rgba(255,255,255,.13), inset -1px -1px rgba(255,255,255,.04); -webkit-backdrop-filter: blur(24px) saturate(185%); backdrop-filter: blur(24px) saturate(185%); animation: live-in .55s 1.15s var(--ease) both; } +.live-activity > span:last-child { display: flex; align-items: baseline; gap: .4rem; } +.live-activity small { color: #a1a1a6; font-size: .52rem; } +.live-activity strong { font-size: .73rem; } +.live-activity-icon { height: .9rem; display: flex; align-items: flex-end; gap: .1rem; } +.live-activity-icon i { width: .13rem; border-radius: 1rem; background: var(--orange); } +.live-activity-icon i:nth-child(1) { height: .4rem; }.live-activity-icon i:nth-child(2) { height: .8rem; }.live-activity-icon i:nth-child(3) { height: .56rem; } +@keyframes live-in { from { opacity: 0; transform: translateX(1rem) scale(.9); filter: blur(7px); } to { opacity: 1; transform: none; filter: none; } } + +.signal-strip { width: min(calc(100% - 2rem), 70rem); min-height: 5.5rem; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 4rem; color: #d2d2d7; } +.signal-strip div { display: flex; align-items: baseline; gap: .7rem; } +.signal-strip span { color: #6e6e73; font-size: .65rem; } +.signal-strip strong { font-size: .9rem; } +.signal-strip > i { width: 1px; height: 1.5rem; background: rgba(255,255,255,.13); } + +/* Content bands */ +.section-kicker { margin: 0 0 1rem; color: var(--orange); font-size: .68rem; font-weight: 750; text-transform: uppercase; } +.platform { padding: 9rem max(1.25rem, calc((100vw - 70rem) / 2)); background: var(--paper); color: var(--ink); } +.platform-intro { max-width: 62rem; } +.platform-intro h2, .capabilities-head h2, .delivery-head h2, .closing h2, .plans-heading h2, .comparison-head h2, .pricing-cta h2 { margin: 0; font-size: clamp(3rem, 6vw, 5.8rem); font-weight: 680; line-height: 1; letter-spacing: -.055em; } +.platform-intro h2 span { color: #86868b; } +.platform-intro > p:last-child { max-width: 38rem; margin: 2rem 0 0 auto; color: #6e6e73; font-size: 1.02rem; line-height: 1.8; } +.principle-grid { margin-top: 6rem; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); } +.principle-grid article { min-height: 13rem; padding: 2rem 2rem 2rem 0; } +.principle-grid article + article { padding-left: 2rem; border-left: 1px solid var(--line-light); } +.principle-grid span { color: #a1a1a6; font-size: .66rem; } +.principle-grid h3 { margin: 2.2rem 0 .55rem; font-size: 1.55rem; letter-spacing: -.03em; } +.principle-grid p { max-width: 17rem; margin: 0; color: #6e6e73; font-size: .82rem; line-height: 1.65; } + +.capabilities { padding: 9rem max(1.25rem, calc((100vw - 70rem) / 2)); background: #080809; } +.capabilities-head { display: grid; grid-template-columns: 1fr 19rem; align-items: end; gap: 4rem; } +.capabilities-side { display: grid; gap: 1.25rem; } +.capabilities-side > p { margin: 0; color: #86868b; font-size: .88rem; line-height: 1.75; } +.feature-rail-controls { display: flex; gap: .45rem; } +.feature-rail-controls button { width: 2.45rem; height: 2.45rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; background: rgba(255,255,255,.07); box-shadow: inset 0 1px rgba(255,255,255,.06); color: #fff; cursor: pointer; transition: background .2s, opacity .2s, transform .1s; } +.feature-rail-controls button:hover { background: rgba(255,255,255,.13); } +.feature-rail-controls button:disabled { opacity: .28; cursor: default; } +.feature-rail { margin-top: 5rem; padding-bottom: .7rem; display: grid; grid-auto-flow: column; grid-auto-columns: min(35rem, calc(92vw - 2rem)); gap: 1rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: none; scrollbar-width: none; cursor: grab; } +.feature-rail:active { cursor: grabbing; } +.feature-rail::-webkit-scrollbar { display: none; } +.feature-card { height: 18.5rem; min-height: 0; padding: 1.35rem; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 1.25rem; border: 1px solid rgba(255,255,255,.11); border-radius: 1rem; background: #121214; box-shadow: inset 0 1px rgba(255,255,255,.06), 0 30px 70px rgba(0,0,0,.26); } +.feature-card:nth-child(4n + 1) { border-top-color: rgba(255,107,61,.42); } +.feature-card:nth-child(4n + 2) { border-top-color: rgba(41,151,255,.42); } +.feature-card:nth-child(4n + 3) { border-top-color: rgba(100,210,255,.38); } +.feature-card:nth-child(4n + 4) { border-top-color: rgba(48,209,88,.38); } +.feature-copy p { margin: 0 0 .85rem; color: var(--orange); font-size: .66rem; font-weight: 750; } +.feature-copy p b { margin-right: .42rem; color: #5f5f64; font-weight: 650; } +.feature-copy { min-width: 0; } +.feature-copy h3 { margin: 0; font-size: clamp(1.55rem, 2.1vw, 2.05rem); font-weight: 650; line-height: 1.08; letter-spacing: 0; } +.feature-copy span { display: block; max-width: 24rem; margin-top: 1rem; color: #86868b; font-size: .74rem; line-height: 1.6; } +.portal-preview { min-width: 0; height: 15.75rem; padding: .75rem .75rem 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: .8rem; background: #09090a; box-shadow: 0 24px 60px rgba(0,0,0,.35); } +.portal-bar { height: 1.6rem; display: flex; align-items: center; justify-content: space-between; }.portal-bar i { width: .55rem; height: .55rem; border-radius: 50%; background: #fff; }.portal-bar span { width: 3.5rem; height: .2rem; border-radius: 1rem; background: #343437; } +.portal-hero { height: 7rem; padding: .9rem; display: flex; flex-direction: column; justify-content: flex-end; border-radius: .55rem; background: linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.1)), url("../hero-cinema.png") center / cover; } +.portal-hero small { color: #b9b9be; font-size: .55rem; }.portal-hero b { margin-top: .15rem; font-size: 1.25rem; }.portal-hero em { margin-top: .35rem; color: #d2d2d7; font-size: .6rem; font-style: normal; } +.portal-posters { margin-top: .55rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }.portal-posters i { height: 5.5rem; border-radius: .4rem; background: linear-gradient(145deg, #28364d, #7f9bb0); }.portal-posters i:nth-child(2) { background: linear-gradient(145deg, #3d3f2b, #98a368); }.portal-posters i:nth-child(3) { background: linear-gradient(145deg, #4b3037, #b66f68); }.portal-posters i:nth-child(4) { background: linear-gradient(145deg, #273e3a, #71a597); } +.operations-preview { position: relative; min-width: 0; height: 15.75rem; padding: .8rem; border: 1px solid rgba(255,255,255,.1); border-radius: .8rem; background: #0b0b0c; } +.op-chart { height: 14rem; padding: 1rem; border-radius: .65rem; background: #18181a; }.op-chart > span { color: #86868b; font-size: .62rem; }.op-chart > strong { display: block; margin-top: .25rem; font-size: 1.5rem; }.op-chart > div { height: 7rem; margin-top: .8rem; display: flex; align-items: flex-end; gap: .45rem; }.op-chart i { flex: 1; height: var(--h); border-radius: .25rem .25rem .08rem .08rem; background: var(--blue); opacity: .86; } +.op-event { position: absolute; right: 1.8rem; bottom: 1.4rem; left: 3.5rem; padding: .85rem; display: grid; grid-template-columns: .55rem 1fr auto; align-items: center; gap: .65rem; border: 1px solid rgba(255,255,255,.14); border-radius: .65rem; background: rgba(37,37,40,.8); box-shadow: 0 16px 40px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }.op-event > i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); }.op-event b { display: block; font-size: .68rem; }.op-event small { display: block; margin-top: .1rem; color: #86868b; font-size: .52rem; }.op-event em { color: #a9dfba; font-size: .62rem; font-style: normal; } +.pipeline-preview { min-width: 0; min-height: 15.75rem; display: flex; flex-direction: column; justify-content: center; gap: .35rem; } +.pipeline-step { min-height: 3.7rem; padding: 0 .8rem; display: flex; align-items: center; gap: .7rem; border: 1px solid rgba(255,255,255,.09); border-radius: .7rem; background: #19191b; }.pipeline-step > i { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border: 1px solid #4b4b50; border-radius: 50%; color: #a1a1a6; font-size: .6rem; font-style: normal; }.pipeline-step b { display: block; font-size: .7rem; }.pipeline-step small { display: block; margin-top: .1rem; color: #77777d; font-size: .52rem; }.pipeline-step.is-done > i { border-color: rgba(48,209,88,.32); background: rgba(48,209,88,.12); color: #83d99c; }.pipeline-step.is-active { border-color: rgba(41,151,255,.3); background: rgba(41,151,255,.07); }.pipeline-step.is-active > i { border: .26rem solid rgba(41,151,255,.2); background: var(--blue); box-shadow: 0 0 1.3rem rgba(41,151,255,.4); }.pipeline-preview > em { width: 1px; height: .65rem; margin-left: 1.58rem; background: #343437; } +.network-preview { position: relative; min-width: 0; height: 15.75rem; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: .8rem; background: #0b0b0c; }.network-card { position: absolute; top: 50%; left: 50%; width: 9rem; padding: 1rem; border: 1px solid rgba(255,255,255,.14); border-radius: .75rem; background: rgba(29,29,32,.8); box-shadow: 0 22px 50px rgba(0,0,0,.4); transform: translate(-50%,-50%); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }.network-card span { color: #86868b; font-size: .58rem; }.network-card strong { display: block; margin-top: .25rem; font-size: 1.55rem; }.network-card small { display: block; margin-top: .25rem; color: #81d89a; font-size: .54rem; }.pulse { position: absolute; width: .55rem; height: .55rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .45rem rgba(48,209,88,.1), 0 0 1.5rem rgba(48,209,88,.42); }.p1 { left: 18%; top: 30%; }.p2 { right: 16%; top: 24%; }.p3 { left: 26%; bottom: 20%; }.p4 { right: 24%; bottom: 24%; } + +.delivery { padding: 9rem max(1.25rem, calc((100vw - 70rem) / 2)); background: var(--paper); color: var(--ink); } +.delivery-head { max-width: 58rem; } +.delivery-steps { margin: 5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-light); } +.delivery-steps li { min-height: 7.5rem; display: grid; grid-template-columns: 4rem 1fr 2rem; align-items: center; border-bottom: 1px solid var(--line-light); transition: padding .3s var(--ease), background .3s; } +.delivery-steps li:hover { padding: 0 1rem; background: rgba(255,255,255,.7); } +.delivery-steps > li > span { color: #a1a1a6; font-size: .65rem; } +.delivery-steps h3 { margin: 0; font-size: 1.15rem; letter-spacing: -.025em; } +.delivery-steps p { margin: .25rem 0 0; color: #6e6e73; font-size: .78rem; } +.delivery-steps i { color: #8e8e93; font-style: normal; text-align: right; } +.closing { position: relative; min-height: 44rem; padding: 7rem max(1.25rem, calc((100vw - 70rem) / 2)); display: flex; align-items: center; overflow: hidden; } +.closing-media { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,5,6,.96), rgba(4,5,6,.72) 48%, rgba(4,5,6,.24)), linear-gradient(0deg, #060607, transparent 52%), url("../hero-cinema.png") center 68% / cover; } +.closing-copy { position: relative; z-index: 1; max-width: 48rem; } +.closing-copy > p:nth-of-type(2) { max-width: 34rem; margin: 1.5rem 0 0; color: #b9b9be; font-size: .92rem; line-height: 1.75; } +.closing .hero-actions { justify-content: flex-start; } + +.site-footer { padding: 3rem max(1.25rem, calc((100vw - 70rem) / 2)); background: #060607; } +.footer-main { padding-bottom: 3rem; display: flex; align-items: center; justify-content: space-between; } +.footer-main p { margin: 0; color: #77777d; font-size: .74rem; } +.footer-meta { padding-top: 1.35rem; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.1); color: #5f5f64; font-size: .66rem; } +.footer-meta div { display: flex; gap: 1.4rem; }.footer-meta a { color: #a1a1a6; } + +/* Pricing */ +.pricing-page { background: var(--paper); color: var(--ink); } +.pricing-page .site-header { color: #fff; } +.pricing-hero { min-height: 43rem; padding: 9rem max(1.25rem, calc((100vw - 70rem) / 2)) 5rem; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 2rem; overflow: hidden; background: #070708; color: #fff; } +.pricing-hero-copy h1 { margin: 0; font-size: clamp(3.8rem, 6vw, 5.3rem); font-weight: 680; line-height: .95; letter-spacing: -.06em; white-space: nowrap; } +.pricing-hero-copy h1 span { color: #86868b; } +.pricing-hero-copy > p:last-child { max-width: 38rem; margin: 1.6rem 0 0; color: #a1a1a6; font-size: .92rem; line-height: 1.75; } +.pricing-orbit { position: relative; height: 28rem; } +.orbit-core { position: absolute; z-index: 3; top: 50%; left: 50%; width: 6.4rem; height: 6.4rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 1.7rem; background: rgba(35,35,38,.72); box-shadow: 0 28px 70px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.1); transform: translate(-50%,-50%); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }.orbit-core i { position: absolute; top: 1rem; width: .48rem; height: .48rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 1rem rgba(48,209,88,.45); }.orbit-core b { font-size: 1.25rem; } +.orbit-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; transform: translate(-50%,-50%); }.ring-one { width: 17rem; height: 17rem; }.ring-two { width: 25rem; height: 25rem; } +.orbit-node { position: absolute; z-index: 2; min-width: 4.2rem; padding: .65rem .8rem; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(31,31,34,.62); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 12px 28px rgba(0,0,0,.2); color: #d2d2d7; text-align: center; font-size: .62rem; -webkit-backdrop-filter: blur(18px) saturate(165%); backdrop-filter: blur(18px) saturate(165%); }.node-one { top: 17%; left: 15%; }.node-two { top: 25%; right: 8%; }.node-three { right: 18%; bottom: 14%; } +.plans { padding: 5rem max(1.25rem, calc((100vw - 70rem) / 2)) 8rem; background: var(--paper); } +.plans-heading { display: grid; grid-template-columns: 1fr 19rem; align-items: end; gap: 4rem; } +.plans-heading > p { margin: 0; color: #6e6e73; font-size: .85rem; line-height: 1.72; } +.plan-grid { margin-top: 4.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; align-items: stretch; } +.plan { position: relative; padding: 2rem; display: flex; flex-direction: column; border: 1px solid rgba(29,29,31,.09); border-radius: .9rem; background: #fff; box-shadow: 0 14px 38px rgba(0,0,0,.045); } +.plan-featured { background: #121214; color: #fff; border-color: #121214; box-shadow: 0 28px 70px rgba(0,0,0,.18); transform: translateY(-.65rem); } +.plan-recommend { position: absolute; top: 1rem; right: 1rem; padding: .32rem .5rem; border-radius: 999px; background: rgba(255,107,61,.14); color: #ff9c7a; font-size: .55rem; font-weight: 750; } +.plan-top { display: flex; align-items: center; justify-content: space-between; } +.plan-label { margin: 0; color: var(--orange); font-size: .61rem; font-weight: 750; text-transform: uppercase; } +.plan-top > span { color: #a1a1a6; font-size: .58rem; } +.plan h3 { margin: 1.3rem 0 0; font-size: 1.45rem; letter-spacing: -.035em; } +.plan-desc { min-height: 3.4rem; margin: .55rem 0 0; color: #6e6e73; font-size: .76rem; line-height: 1.6; } +.plan-featured .plan-desc { color: #8e8e93; } +.plan-price { margin: 1.6rem 0 1.4rem; display: flex; align-items: baseline; gap: .55rem; } +.plan-price strong { font-size: 2.55rem; letter-spacing: -.055em; } +.plan-price span { color: #8e8e93; font-size: .62rem; } +.plan-button { min-height: 2.85rem; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; border-radius: 999px; background: #1d1d1f; color: #fff; font-size: .75rem; font-weight: 700; transition: background .2s, transform .1s; } +.plan-button:hover { background: #303034; } +.plan-featured .plan-button { background: #f5f5f7; color: #111; }.plan-featured .plan-button:hover { background: #fff; } +.plan ul { margin: 1.7rem 0 0; padding: 1.5rem 0 0; display: grid; gap: .7rem; border-top: 1px solid rgba(29,29,31,.1); list-style: none; } +.plan-featured ul { border-color: rgba(255,255,255,.1); } +.plan li { display: flex; gap: .55rem; color: #4f4f54; font-size: .7rem; } +.plan-featured li { color: #c7c7cc; } +.plan li span { color: var(--orange); } +.payment-note { width: max-content; max-width: 100%; margin: 2rem auto 0; padding: .62rem .85rem; display: flex; justify-content: center; align-items: center; gap: .5rem; border: 1px solid rgba(29,29,31,.08); border-radius: 999px; background: rgba(255,255,255,.62); box-shadow: 0 8px 24px rgba(0,0,0,.045), inset 0 1px rgba(255,255,255,.85); color: #6e6e73; font-size: .68rem; -webkit-backdrop-filter: blur(18px) saturate(145%); backdrop-filter: blur(18px) saturate(145%); }.payment-note i { flex: 0 0 auto; width: .38rem; height: .38rem; border-radius: 50%; background: var(--green); } +.comparison { padding: 8rem max(1.25rem, calc((100vw - 70rem) / 2)); background: #fff; } +.comparison-head { max-width: 50rem; }.comparison-head > p:last-child { max-width: 35rem; margin: 1.3rem 0 0; color: #6e6e73; font-size: .86rem; line-height: 1.7; } +.comparison-list { margin-top: 4rem; border-top: 1px solid var(--line-light); } +.comparison-row { min-height: 4.4rem; display: grid; grid-template-columns: 1.45fr repeat(3, 1fr); align-items: center; border-bottom: 1px solid var(--line-light); } +.comparison-row > * { padding: 0 1rem; font-size: .72rem; } +.comparison-row > *:first-child { padding-left: 0; } +.comparison-header { min-height: 3.4rem; color: #86868b; }.comparison-header span { font-size: .62rem; font-weight: 650; } +.comparison-row b { font-weight: 650; }.comparison-row span { color: #55555a; }.comparison-row .positive { color: #16894e; font-weight: 650; }.comparison-row .muted { color: #b1b1b6; } +.pricing-cta { position: relative; min-height: 41rem; padding: 7rem max(1.25rem, calc((100vw - 70rem) / 2)); display: flex; align-items: center; overflow: hidden; color: #fff; } +.pricing-cta-media { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,5,6,.96), rgba(4,5,6,.72) 50%, rgba(4,5,6,.28)), linear-gradient(0deg, #060607, transparent 55%), url("../hero-cinema.png") center 62% / cover; } +.pricing-cta-copy { position: relative; z-index: 1; max-width: 48rem; }.pricing-cta-copy > p:nth-of-type(2) { max-width: 36rem; margin: 1.4rem 0 2rem; color: #b9b9be; font-size: .88rem; line-height: 1.75; } + +.reveal { opacity: 0; transform: translateY(1.6rem); transition: opacity .72s var(--ease), transform .72s var(--ease); } +.reveal.is-visible { opacity: 1; transform: none; } + +@media (max-width: 960px) { + .desktop-nav { display: none; } + .nav-contact { display: none; } + .menu-button { display: block; } + .hero { min-height: 48rem; } + .hero-inner { padding-top: 6.2rem; } + .product-stage { --stage-width: min(44rem, 92vw); } + .product-window { height: 23rem; } + .platform, .capabilities, .delivery, .plans, .comparison { padding-top: 7rem; padding-bottom: 7rem; } + .capabilities-head, .plans-heading { grid-template-columns: 1fr; gap: 1.2rem; } + .capabilities-side > p, .plans-heading > p { max-width: 30rem; } + .feature-card { gap: 1.1rem; } + .feature-copy span { max-width: 34rem; } + .plan-grid { grid-template-columns: 1fr; max-width: 40rem; margin-right: auto; margin-left: auto; } + .plan-featured { transform: none; } + .plan-desc { min-height: auto; } + .pricing-hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 8rem; } + .pricing-orbit { height: 22rem; } +} + +@media (max-width: 640px) { + .site-header { top: .5rem; } + .nav-island { width: calc(100% - 1rem); height: 3.45rem; padding-left: .8rem; border-radius: 999px; } + .wordmark b { display: none; } + .mobile-menu { top: 3.85rem; right: .5rem; left: .5rem; width: auto; } + .hero { height: calc(100svh - 5rem); min-height: 45rem; max-height: 54rem; } + .hero-inner { width: calc(100% - 1rem); padding-top: 5.5rem; } + .hero h1 { font-size: 4.45rem; } + .hero-product { font-size: .92rem; } + .hero-lead { max-width: 22rem; font-size: .86rem; } + .hero-actions { width: min(100%, 22rem); margin-top: 1rem; } + .button { flex: 1; } + .product-stage { --stage-width: calc(100vw - 1.2rem); margin-top: 1.55rem; } + .product-window { height: 18.8rem; border-radius: .8rem; transform: none; } + .window-bar { height: 2.5rem; }.window-status { display: none; }.window-title { grid-column: 2; } + .window-layout { height: calc(100% - 2.5rem); grid-template-columns: 3.25rem 1fr; } + .window-sidebar { padding: .55rem .28rem; }.console-tab { width: 2.55rem; min-height: 2.55rem; }.console-tab span { display: none; } + .window-main { padding: .8rem; }.console-heading h2 { font-size: .87rem; }.view-chip { display: none; } + .metric-row { gap: .3rem; }.metric-row article { padding: .55rem; }.metric-row strong { font-size: .9rem; }.metric-row span { display: none; } + .chart-panel { height: 7.7rem; }.bar-chart { height: 5.6rem; gap: .2rem; } + .media-list article { grid-template-columns: 2.6rem 1fr auto; }.poster { height: 2.25rem; }.media-list article { padding: .42rem; } + .node-map { height: 10.8rem; } + .live-activity { display: none; } + .signal-strip { min-height: 4.4rem; gap: 1rem; }.signal-strip div { gap: .32rem; }.signal-strip span { font-size: .55rem; }.signal-strip strong { font-size: .7rem; }.signal-strip > i { height: 1rem; } + .platform, .capabilities, .delivery, .plans, .comparison { padding: 5.5rem 1rem; } + .platform-intro h2, .capabilities-head h2, .delivery-head h2, .closing h2, .plans-heading h2, .comparison-head h2, .pricing-cta h2 { font-size: 2.75rem; } + .platform-intro > p:last-child { margin: 1.4rem 0 0; font-size: .9rem; } + .principle-grid { margin-top: 3.5rem; grid-template-columns: 1fr; }.principle-grid article { min-height: auto; padding: 1.5rem 0; }.principle-grid article + article { padding-left: 0; border-top: 1px solid var(--line-light); border-left: 0; }.principle-grid h3 { margin: .9rem 0 .35rem; } + .feature-rail { margin-top: 3.5rem; grid-auto-columns: calc(94vw - 1rem); gap: .75rem; }.feature-rail-controls { display: none; }.feature-card { height: 15.5rem; min-height: 0; padding: .9rem; grid-template-columns: .94fr 1.06fr; gap: .7rem; }.feature-copy p { margin-bottom: .55rem; font-size: .58rem; }.feature-copy h3 { font-size: 1.12rem; line-height: 1.12; }.feature-copy span { margin-top: .72rem; font-size: .63rem; line-height: 1.5; }.portal-preview, .operations-preview, .network-preview { height: 13.7rem; border-radius: .65rem; }.portal-preview { padding: .55rem .55rem 0; }.portal-bar { height: 1.15rem; }.portal-bar i { width: .4rem; height: .4rem; }.portal-bar span { width: 2.3rem; }.portal-hero { height: 6.2rem; padding: .65rem; }.portal-hero small { font-size: .44rem; }.portal-hero b { font-size: .88rem; }.portal-hero em { font-size: .48rem; }.portal-posters { gap: .25rem; margin-top: .4rem; }.portal-posters i { height: 4.6rem; }.operations-preview { padding: .55rem; }.op-chart { height: 12.5rem; padding: .7rem; }.op-chart > span { font-size: .5rem; }.op-chart > strong { font-size: 1rem; }.op-chart > div { height: 7rem; margin-top: .65rem; gap: .25rem; }.op-event { right: .8rem; bottom: .8rem; left: 1.2rem; padding: .55rem; grid-template-columns: .4rem 1fr; gap: .4rem; }.op-event > i { width: .4rem; height: .4rem; }.op-event b { font-size: .55rem; }.op-event small { font-size: .45rem; }.op-event em { display: none; }.pipeline-preview { min-height: 13.7rem; gap: .28rem; }.pipeline-step { min-height: 3.25rem; padding: 0 .55rem; gap: .5rem; }.pipeline-step > i { width: 1.35rem; height: 1.35rem; font-size: .5rem; }.pipeline-step b { font-size: .58rem; }.pipeline-step small { font-size: .44rem; }.pipeline-preview > em { height: .45rem; margin-left: 1.2rem; }.network-card { width: 7rem; padding: .72rem; }.network-card strong { font-size: 1.2rem; }.network-card span, .network-card small { font-size: .45rem; }.pulse { width: .42rem; height: .42rem; box-shadow: 0 0 0 .3rem rgba(48,209,88,.1), 0 0 1rem rgba(48,209,88,.42); } + .delivery-steps { margin-top: 3.5rem; }.delivery-steps li { min-height: 6.4rem; grid-template-columns: 2.7rem 1fr 1.5rem; }.delivery-steps li:hover { padding: 0 .5rem; }.delivery-steps p { padding-right: .5rem; } + .closing, .pricing-cta { min-height: 39rem; padding: 5rem 1rem; }.closing-copy > p:nth-of-type(2), .pricing-cta-copy > p:nth-of-type(2) { font-size: .84rem; }.closing .hero-actions { align-items: flex-start; flex-direction: column; }.closing .button { flex: none; width: 100%; } + .footer-main, .footer-meta { align-items: flex-start; flex-direction: column; gap: 1rem; }.footer-meta div { width: 100%; justify-content: space-between; } + .pricing-hero { min-height: 45rem; padding: 7.5rem 1rem 4rem; display: block; }.pricing-hero-copy h1 { font-size: 2.55rem; }.pricing-hero-copy > p:last-child { font-size: .84rem; }.pricing-orbit { height: 18rem; margin-top: 1.5rem; }.ring-one { width: 13rem; height: 13rem; }.ring-two { width: 18rem; height: 18rem; }.orbit-core { width: 5rem; height: 5rem; border-radius: 1.35rem; }.node-one { top: 15%; left: 6%; }.node-two { top: 21%; right: 2%; }.node-three { right: 10%; bottom: 8%; } + .plans-heading > p { font-size: .8rem; }.plan-grid { margin-top: 3.5rem; }.plan { padding: 1.5rem; }.payment-note { width: 100%; align-items: flex-start; border-radius: 1rem; text-align: left; line-height: 1.5; } + .comparison-list { overflow-x: auto; }.comparison-row { min-width: 40rem; } +} + +@media (prefers-reduced-motion: reduce) { + html { scroll-behavior: auto; } + *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } + .reveal { opacity: 1; transform: none; } + .hero-media, .product-window { transform: none; } + .site-header.is-scroll-hidden { opacity: 1; } + ::view-transition-old(root), ::view-transition-new(root) { animation: none; } +} + +@media (prefers-reduced-transparency: reduce) { + .nav-island, .mobile-menu, .product-window, .live-activity, .orbit-core, .orbit-node, .op-event, .network-card { background: #171719; -webkit-backdrop-filter: none; backdrop-filter: none; } + .button-primary, .payment-note { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } + .nav-island::before, .nav-island::after { display: none; } +} + +@media (prefers-contrast: more) { + .nav-island, .mobile-menu, .product-window, .feature-card { border-color: #fff; background: #050506; } + .payment-note { border-color: #1d1d1f; background: #fff; } +} diff --git a/assets/index-CtkHR7Eh.css b/assets/index-CtkHR7Eh.css new file mode 100644 index 0000000..9fe8fb2 --- /dev/null +++ b/assets/index-CtkHR7Eh.css @@ -0,0 +1,2 @@ +/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */ +@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.relative{position:relative}.start{inset-inline-start:var(--spacing)}.table{display:table}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}:root{--ink:#f7f6f2;--muted:#aaa9a6;--night:#060708;--paper:#f1efe9;--ember:#df9a5e;--cyan:#7cbbc5;--line:#ffffff24}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--night)}body{background:var(--night);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:SF Pro Display,SF Pro Text,PingFang SC,Microsoft YaHei,Arial,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}::selection{background:var(--ember);color:#111}.nav-shell{z-index:50;-webkit-backdrop-filter:saturate(150%)blur(20px);backdrop-filter:saturate(150%)blur(20px);background:#0507099e;border-bottom:1px solid #ffffff14;position:fixed;inset:0 0 auto}.nav{justify-content:space-between;align-items:center;max-width:1280px;height:64px;margin:auto;padding:0 28px;display:flex}.brand{letter-spacing:-.02em;align-items:center;gap:8px;font-size:15px;font-weight:650;display:inline-flex}.brand em{color:#85878b;letter-spacing:.05em;font-size:11px;font-style:normal;font-weight:600}.brand-mark{border:1.5px solid;border-radius:4px 4px 9px 9px;width:25px;height:19px;position:relative;transform:translateY(2px)}.brand-mark:before,.brand-mark:after,.brand-mark i{content:"";background:currentColor;border-radius:99px;width:1.5px;height:7px;animation:2.6s ease-in-out infinite steam;position:absolute;top:-10px}.brand-mark:before{left:5px}.brand-mark i{animation-delay:.3s;left:11px}.brand-mark:after{animation-delay:.6s;left:17px}@keyframes steam{0%,to{opacity:.2;transform:translateY(2px)scaleY(.8)}50%{opacity:1;transform:translate(1px,-3px)scaleY(1.1)}}.nav-links{color:#c9c9c9;gap:38px;font-size:13px;display:flex}.nav-links a{transition:color .2s}.nav-links a:hover{color:#fff}.nav-cta{color:#111;background:#f5f5f3;border-radius:99px;padding:9px 17px;font-size:12px;font-weight:650;transition:transform .25s,box-shadow .25s}.nav-cta:hover,.button:hover{transform:translateY(-2px);box-shadow:0 14px 34px #00000042}.hero{--mx:0;--my:0;background:#071016;align-items:center;min-height:100svh;padding:112px max(28px,50vw - 640px) 80px;display:flex;position:relative;overflow:hidden}.hero-art{filter:saturate(.7)contrast(1.04);transform:translate3d(calc(var(--mx) * -12px), calc(var(--my) * -8px), 0) scale(1.05);background-image:linear-gradient(90deg,#040709fa 0%,#040709d1 40%,#04070994 75%,#040709b8 100%),linear-gradient(#0000 52%,#070809 100%),url(../hero-cinema.png);background-position:50%;background-size:cover;transition:transform .2s ease-out;animation:2.2s cubic-bezier(.16,1,.3,1) both heroReveal;position:absolute;inset:-4%}@keyframes heroReveal{0%{opacity:0;filter:saturate(.4)brightness(.35)blur(8px);transform:scale(1.14)}to{opacity:1;filter:saturate(.7)brightness()blur()}}.hero-grain{z-index:4;opacity:.045;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");position:absolute;inset:0}.hero-aurora{z-index:1;filter:blur(90px);pointer-events:none;mix-blend-mode:screen;border-radius:50%;position:absolute}.aurora-one{background:#c6733d33;width:520px;height:420px;animation:8s ease-in-out infinite alternate auroraFloat;top:6%;right:4%}.aurora-two{background:#3b879929;width:460px;height:360px;animation:11s ease-in-out 1s infinite alternate-reverse auroraFloat;bottom:-15%;right:28%}@keyframes auroraFloat{to{opacity:.65;transform:translate(35px,-24px)scale(1.18)}}.hero-layout{z-index:5;grid-template-columns:.92fr 1.08fr;align-items:center;gap:42px;width:100%;display:grid;position:relative}.hero-content{min-width:0}.hero-kicker,.section-label{color:#b9babc;letter-spacing:.18em;text-transform:uppercase;margin:0 0 25px;font-size:10px;font-weight:650}.hero-kicker{opacity:0;align-items:center;gap:10px;animation:.9s .35s forwards rise;display:flex}.hero-kicker span{background:var(--ember);width:24px;height:1px}.hero h1{letter-spacing:-.068em;opacity:0;max-width:700px;margin:0;font-size:clamp(54px,5.8vw,88px);font-weight:620;line-height:.98;animation:1.1s cubic-bezier(.16,1,.3,1) .46s forwards rise}.hero h1 span{color:var(--ember)}.hero-copy{color:#b9bbbd;opacity:0;max-width:560px;margin:30px 0 0;font-size:16px;line-height:1.8;animation:.9s .62s forwards rise}.hero-actions{opacity:0;align-items:center;gap:28px;margin-top:33px;animation:.9s .76s forwards rise;display:flex}@keyframes rise{0%{opacity:0;filter:blur(5px);transform:translateY(28px)}to{opacity:1;filter:blur();transform:translateY(0)}}.button{border-radius:99px;justify-content:center;align-items:center;gap:14px;min-height:48px;padding:0 22px;font-size:14px;font-weight:650;transition:transform .25s,box-shadow .25s;display:inline-flex}.button-light{background:var(--paper);color:#111}.button-dark{color:#fff;background:#101214}.text-link{color:#d2d2d2;font-size:13px}.text-link span{color:var(--ember);margin-left:7px;animation:1.8s ease-in-out infinite arrowBounce;display:inline-block}@keyframes arrowBounce{50%{transform:translateY(4px)}}.console-stage{perspective:1400px;transform:translate3d(calc(var(--mx) * 14px), calc(var(--my) * 10px), 0);opacity:0;transition:transform .2s ease-out;animation:1.5s cubic-bezier(.16,1,.3,1) .55s forwards consoleEnter;position:relative}@keyframes consoleEnter{0%{opacity:0;filter:blur(12px);transform:translate(70px,35px)rotateY(-8deg)rotateX(5deg)scale(.88)}to{opacity:1;filter:blur()}}.console-shadow{filter:blur(55px);background:#000000b8;border-radius:40%;position:absolute;inset:12% 3% -7%}.console-window{z-index:2;color:#d9dcdf;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);background:#0c1013e6;border:1px solid #ffffff29;border-radius:18px;animation:6s ease-in-out 2s infinite consoleFloat;position:relative;overflow:hidden;transform:rotateY(-2deg)rotateX(1deg);box-shadow:inset 0 1px #ffffff14,0 35px 80px #0000007a}@keyframes consoleFloat{50%{transform:rotateY(.5deg)rotateX(-.5deg)translateY(-8px)}}.console-topbar{background:#ffffff09;border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;height:52px;padding:0 17px;display:flex}.console-brand{letter-spacing:.03em;align-items:center;gap:8px;font-size:10px;font-weight:650;display:flex}.console-dot{background:var(--ember);border-radius:3px 3px 5px 5px;width:8px;height:8px;box-shadow:0 0 16px #df9a5ebf}.topbar-tools{align-items:center;gap:10px;display:flex}.topbar-tools>span:not(.avatar){background:#555b60;border-radius:50%;width:4px;height:4px}.topbar-tools .avatar{color:#202326;background:#e8e3db;border-radius:50%;place-items:center;width:25px;height:25px;font-size:7px;font-weight:700;display:grid}.console-body{grid-template-columns:108px 1fr;min-height:390px;display:grid}.console-sidebar{color:#777d82;border-right:1px solid #ffffff12;flex-direction:column;gap:7px;padding:18px 13px;font-size:8px;display:flex}.console-sidebar span,.console-sidebar b{border-radius:6px;padding:8px 9px;font-weight:500}.console-sidebar b{color:#fff;background:#ffffff14}.console-main{min-width:0;padding:21px}.console-heading,.card-title,.data-card-head{justify-content:space-between;align-items:center;display:flex}.console-heading>div{flex-direction:column;gap:4px;display:flex}.console-heading small{color:#6f7579;font-size:8px}.console-heading strong{font-size:14px;font-weight:580}.live-pill{color:#a4cfb6;background:#49926614;border:1px solid #6fc4912e;border-radius:99px;align-items:center;gap:6px;padding:6px 9px;font-size:7px;display:flex}.live-pill i,.status-line span i{background:#6fc491;border-radius:50%;width:5px;height:5px;animation:1.8s ease-in-out infinite pulse;box-shadow:0 0 9px #6fc491}@keyframes pulse{50%{opacity:.5}}.metric-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px;display:grid}.metric-grid>div{background:#ffffff09;border:1px solid #ffffff12;border-radius:9px;grid-template-columns:1fr auto;gap:5px;min-width:0;padding:12px;display:grid}.metric-grid small{color:#70767a;grid-column:1/-1;font-size:7px}.metric-grid strong{font-size:16px;font-weight:580}.metric-grid em{color:#79c296;align-self:end;font-size:6px;font-style:normal}.dashboard-row{grid-template-columns:1.55fr .9fr;gap:8px;margin-top:8px;display:grid}.chart-card,.status-card{background:#ffffff07;border:1px solid #ffffff12;border-radius:9px;height:185px;padding:13px}.card-title{color:#c4c7c9;font-size:8px}.card-title small{color:#656b6f;font-size:6px}.chart{align-items:end;gap:6px;height:128px;margin-top:14px;padding:0 3px;display:flex;position:relative;overflow:hidden}.chart-grid{background:repeating-linear-gradient(0deg,#0000 0 31px,#ffffff0d 32px);position:absolute;inset:0}.chart i{z-index:2;transform-origin:bottom;background:linear-gradient(#dda169,#7f5538);border-radius:3px 3px 0 0;flex:1;min-width:3px;animation:1.2s cubic-bezier(.16,1,.3,1) 1.5s both barsIn}@keyframes barsIn{0%{opacity:0;transform:scaleY(0)}}.status-card{flex-direction:column;display:flex}.status-line{color:#7d8387;border-bottom:1px solid #ffffff0d;flex:1;justify-content:space-between;align-items:center;font-size:7px;display:flex}.status-line:last-child{border:0}.status-line span{align-items:center;gap:6px;display:flex}.status-line em{color:#83b696;font-size:6px;font-style:normal}.float-card{z-index:5;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#15191cc2;border:1px solid #ffffff29;border-radius:11px;align-items:center;gap:9px;padding:10px 13px;display:flex;position:absolute;box-shadow:0 20px 35px #00000052}.float-card>div{flex-direction:column;gap:2px;display:flex}.float-card small{color:#747a7e;font-size:7px}.float-card strong{font-size:10px;font-weight:580}.float-users{animation:4.5s ease-in-out 1.2s infinite floatCard;top:20%;right:-5%}.float-node{animation:5.5s ease-in-out 1.6s infinite reverse floatCard;bottom:11%;left:-4%}@keyframes floatCard{50%{transform:translateY(-12px)rotate(1deg)}}.float-icon{width:25px;height:25px;color:var(--ember);background:#df9a5e26;border-radius:7px;place-items:center;font-size:11px;display:grid}.node-wave{background:#7cbbc51c;border-radius:8px;justify-content:center;align-items:end;gap:2px;width:28px;height:28px;padding:7px;display:flex}.node-wave i{background:var(--cyan);width:2px;animation:1s ease-in-out infinite alternate wave}.node-wave i:first-child{height:7px}.node-wave i:nth-child(2){height:12px;animation-delay:.2s}.node-wave i:nth-child(3){height:9px;animation-delay:.4s}@keyframes wave{to{transform:scaleY(.4)}}.orbit{pointer-events:none;border:1px solid #df9a5e29;border-radius:50%;position:absolute}.orbit-a{width:520px;height:170px;animation:14s linear infinite orbitSpin;top:35%;right:-10%;transform:rotate(-18deg)}.orbit-b{border-color:#7cbbc524;width:410px;height:130px;animation:19s linear infinite reverse orbitSpin;top:45%;left:-8%;transform:rotate(19deg)}@keyframes orbitSpin{to{rotate:360deg}}.hero-bottom{z-index:5;color:#777d81;letter-spacing:.08em;white-space:nowrap;opacity:0;align-items:center;gap:20px;font-size:8px;animation:1s 1.25s forwards rise;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}.hero-bottom i{background:#474b4e;width:22px;height:1px}.statement{background:var(--paper);color:#0b0c0d;flex-direction:column;justify-content:center;min-height:92vh;padding:150px max(28px,50vw - 550px);display:flex}.statement .section-label,.capabilities .section-label,.delivery .section-label{color:#8d7967}.statement h2,.section-head h2,.showcase-copy h2,.delivery h2,.contact h2{letter-spacing:-.065em;margin:0;font-size:clamp(50px,6.8vw,100px);font-weight:620;line-height:1.02}.statement-bottom{grid-template-columns:1.3fr .7fr;align-items:end;gap:80px;margin-top:55px;display:grid}.statement-bottom>p{color:#66625e;max-width:680px;margin:0;font-size:clamp(17px,1.75vw,23px);line-height:1.72}.statement-stat{border-left:1px solid #c9c4ba;flex-direction:column;padding-left:28px;display:flex}.statement-stat strong{letter-spacing:-.05em;font-size:37px;font-weight:580}.statement-stat span{color:#88827a;margin-top:8px;font-size:11px}.capabilities{color:#101112;background:#d9d5cc;padding:140px max(28px,50vw - 640px)}.section-head{justify-content:space-between;align-items:end;padding-bottom:58px;display:flex}.section-head .section-label{margin-bottom:18px}.section-head h2{font-size:clamp(52px,6vw,82px)}.section-head>p{color:#77736d;width:290px;margin:0 0 10px;font-size:14px;line-height:1.7}.capability-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.capability-card{background:#edeae3;border:1px solid #1f1f1d17;border-radius:5px;min-height:590px;padding:27px;transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s;position:relative;overflow:hidden}.capability-card:hover{z-index:2;transform:translateY(-9px);box-shadow:0 32px 80px #2a251f24}.capability-top{color:#938d84;justify-content:space-between;font-size:10px;display:flex}.capability-top p{margin:0}.capability-visual{background:#111518;border-radius:4px;height:310px;margin:24px 0 28px;position:relative;overflow:hidden}.capability-card h3{letter-spacing:-.055em;max-width:520px;margin:0;font-size:clamp(27px,3vw,42px);font-weight:580;line-height:1.12}.capability-text{color:#716d67;max-width:500px;margin:20px 0 0;font-size:14px;line-height:1.75}.mini-site{background:#090b0c;border:1px solid #35393b;border-radius:7px;width:78%;height:82%;padding:10px;animation:5s ease-in-out infinite miniSiteFloat;position:absolute;top:12%;left:11%;overflow:hidden;transform:perspective(900px)rotateX(8deg);box-shadow:0 30px 60px #0000008c}@keyframes miniSiteFloat{50%{transform:perspective(900px)rotateX(5deg)translateY(-9px)}}.mini-nav{border-bottom:1px solid #22272a;width:100%;height:14px}.mini-hero{background:radial-gradient(circle at 72% 35%,#d8965c 0 8%,#0000 9%),linear-gradient(135deg,#16252c,#090b0d 68%);height:58%;margin-top:7px;position:relative;overflow:hidden}.mini-hero:after{content:"";background:#080a0b;position:absolute;inset:60% -10% -20%;transform:rotate(-5deg)}.mini-hero span,.mini-hero i{z-index:2;background:#e3e2df;border-radius:99px;height:4px;position:absolute;left:10%}.mini-hero span{width:33%;top:35%}.mini-hero i{opacity:.35;width:22%;top:44%}.mini-posters{grid-template-columns:repeat(3,1fr);gap:5px;margin-top:8px;display:grid}.mini-posters span{background:linear-gradient(150deg,#304c55,#111517);border-radius:2px;height:55px}.mini-posters span:nth-child(2){background:linear-gradient(150deg,#80533b,#151313)}.mini-posters span:nth-child(3){background:linear-gradient(150deg,#78756d,#17191a)}.ops-rings{place-items:center;display:grid;position:absolute;inset:0}.ops-rings>span{border:1px solid #ffffff1f;border-radius:50%;position:absolute}.ring-one{width:210px;height:210px;animation:3.4s ease-in-out infinite ringPulse}.ring-two{width:125px;height:125px;animation:3.4s ease-in-out .6s infinite reverse ringPulse;border-color:#df9a5e6b!important}@keyframes ringPulse{50%{opacity:.4;transform:scale(1.08)}}.ops-rings strong{color:#fff;letter-spacing:-.05em;font-size:34px;font-weight:540}.pulse-dot{background:var(--ember);width:7px;height:7px;box-shadow:0 0 18px var(--ember);border-radius:50%;animation:5s linear infinite dotOrbit;position:absolute}.dot-a{transform:translate(105px)}.dot-b{animation-delay:-1.6s;transform:translate(-70px,-78px)}.dot-c{background:var(--cyan);box-shadow:0 0 18px var(--cyan);animation-delay:-3.2s;transform:translate(-82px,66px)}@keyframes dotOrbit{to{rotate:360deg}}.media-flow{position:absolute;inset:0}.media-core,.flow-node{color:#cfd2d4;background:#171c1f;border:1px solid #ffffff24;place-items:center;display:grid;position:absolute}.media-core{width:64px;height:64px;color:var(--ember);border-radius:18px;font-size:17px;font-weight:700;animation:2.5s ease-in-out infinite coreGlow;top:calc(50% - 32px);left:calc(50% - 32px);box-shadow:0 0 50px #df9a5e29}@keyframes coreGlow{50%{box-shadow:0 0 80px #df9a5e59}}.flow-node{border-radius:99px;width:62px;height:31px;font-size:8px}.node-a{top:25%;left:12%}.node-b{top:22%;right:12%}.node-c{bottom:20%;right:16%}.flow-line{transform-origin:0;background:linear-gradient(90deg,#0000,#6c7478,#0000);height:1px;position:absolute;overflow:hidden}.flow-line:after{content:"";background:#fff;width:20%;height:100%;animation:2s linear infinite flow;position:absolute;box-shadow:0 0 9px #fff}@keyframes flow{0%{left:-20%}to{left:110%}}.line-a{width:40%;top:34%;left:23%;transform:rotate(21deg)}.line-b{width:36%;top:47%;left:53%;transform:rotate(-34deg)}.line-c{width:39%;top:55%;left:54%;transform:rotate(31deg)}.connect-grid{grid-template-columns:repeat(3,1fr);gap:12px;padding:48px 15%;display:grid;position:absolute;inset:0}.connect-grid span{color:#939a9e;border:1px solid #ffffff1a;border-radius:10px;place-items:center;font-size:9px;animation:3s ease-in-out infinite connectPulse;display:grid}@keyframes connectPulse{50%{color:#fff;background:#df9a5e14;border-color:#df9a5e75;transform:translateY(-3px)}}.control-showcase{background:#070809;grid-template-columns:.8fr 1.2fr;align-items:center;gap:95px;min-height:100vh;padding:150px max(28px,50vw - 640px);display:grid;overflow:hidden}.showcase-copy h2{font-size:clamp(50px,5.6vw,80px)}.showcase-copy>p:not(.section-label){color:#909296;max-width:470px;margin:34px 0;font-size:16px;line-height:1.75}.showcase-tags{flex-wrap:wrap;gap:9px;display:flex}.showcase-tags span{color:#b5b7b9;letter-spacing:.08em;border:1px solid #343638;border-radius:99px;padding:7px 12px;font-size:9px}.data-visual{place-items:center;min-height:560px;display:grid;position:relative}.data-glow{filter:blur(90px);background:#b665372e;border-radius:50%;width:460px;height:350px;animation:8s ease-in-out infinite alternate auroraFloat;position:absolute}.data-card{z-index:3;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);background:#14181be0;border:1px solid #ffffff21;border-radius:18px;position:absolute;box-shadow:0 40px 90px #0000008c}.data-card-main{width:82%;min-height:380px;padding:28px;animation:6s ease-in-out infinite dataCardFloat;transform:rotate(-3deg)}@keyframes dataCardFloat{50%{transform:rotate(-1.3deg)translateY(-10px)}}.data-card-head{color:#cfd1d2;font-size:11px}.data-card-head small{color:#72c08f;letter-spacing:.13em;font-size:8px}.big-number{letter-spacing:-.07em;margin-top:42px;font-size:clamp(60px,7vw,100px);font-weight:560}.load-bars{border-bottom:1px solid #45484a;align-items:end;gap:8px;height:150px;margin-top:25px;display:flex}.load-bars i{transform-origin:bottom;background:linear-gradient(#e3a16a,#62422e);border-radius:4px 4px 0 0;flex:1;animation:2.8s ease-in-out infinite alternate barsWave}.load-bars i:nth-child(2n){animation-delay:.35s}.load-bars i:nth-child(3n){animation-delay:.7s}@keyframes barsWave{to{opacity:.55;transform:scaleY(.62)}}.data-card-small{z-index:5;flex-direction:column;width:220px;padding:20px;animation:5s ease-in-out infinite floatCard;display:flex;bottom:40px;right:0}.data-card-small>span{color:#7f8589;font-size:9px}.data-card-small strong{margin-top:7px;font-size:30px;font-weight:570}.data-card-small small{color:#70bd8d;margin-top:6px;font-size:8px}.data-orbit{z-index:1;border:1px solid #ffffff17;border-radius:50%;position:absolute}.data-orbit.orbit-one{width:600px;height:240px;animation:16s linear infinite orbitSpin;transform:rotate(22deg)}.data-orbit.orbit-two{border-color:#df9a5e26;width:500px;height:180px;animation:22s linear infinite reverse orbitSpin;transform:rotate(-18deg)}.delivery{background:var(--paper);color:#101112;padding:140px max(28px,50vw - 640px)}.delivery-head{max-width:920px;margin-bottom:70px}.delivery h2{font-size:clamp(48px,6vw,86px)}.delivery-list{border-top:1px solid #bdb8af}.delivery-item{border-bottom:1px solid #c8c3ba;grid-template-columns:.2fr .65fr 1fr auto;align-items:center;gap:28px;min-height:160px;transition:padding .35s,background .35s;display:grid}.delivery-item:hover{background:#ffffff73;padding:0 20px}.delivery-item>span{color:#9a948c;font-size:11px}.delivery-item h3{letter-spacing:-.045em;margin:0;font-size:clamp(25px,3vw,40px);font-weight:580}.delivery-item p{color:#77736d;max-width:460px;margin:0;font-size:14px;line-height:1.7}.delivery-item>i{border:1px solid #bbb6ae;border-radius:50%;place-items:center;width:38px;height:38px;font-size:12px;font-style:normal;transition:transform .35s,background .35s;display:grid}.delivery-item:hover>i{color:#fff;background:#111;transform:rotate(45deg)}.contact{color:#111315;text-align:center;background:#e7e3db;place-items:center;min-height:96vh;padding:120px 28px;display:grid;position:relative;overflow:hidden}.contact-grid{opacity:.17;grid-template-rows:repeat(5,1fr);grid-template-columns:repeat(6,1fr);display:grid;position:absolute;inset:0}.contact-grid i{border-bottom:1px solid #8f8b85;border-right:1px solid #8f8b85;animation:5s ease-in-out infinite gridGlow}@keyframes gridGlow{50%{background:#da9a6247}}.contact-inner{z-index:3;max-width:920px;position:relative}.contact .section-label{color:#9b6a42}.contact h2{font-size:clamp(60px,8.4vw,120px)}.contact-inner>p:not(.section-label){color:#6b6863;max-width:600px;margin:34px auto;font-size:17px;line-height:1.7}.contact-orb{aspect-ratio:1;filter:blur(3px);border-radius:50%;width:500px;animation:10s ease-in-out infinite alternate orbDrift;position:absolute}.orb-left{background:radial-gradient(circle at 60% 60%,#dfa065,#0000 70%);top:-190px;left:-300px}.orb-right{background:radial-gradient(circle at 35% 35%,#86aeb5,#0000 70%);animation-direction:alternate-reverse;bottom:-230px;right:-310px}@keyframes orbDrift{to{transform:translate(45px,30px)scale(1.12)}}footer{background:#060708;flex-direction:column;min-height:420px;padding:90px max(28px,50vw - 640px) 36px;display:flex}.footer-brand{font-size:19px}footer>p{color:#707276;letter-spacing:-.05em;margin:42px 0 auto;font-size:clamp(28px,4.5vw,60px);font-weight:560}.footer-bottom{color:#686a6d;border-top:1px solid #242526;justify-content:space-between;padding-top:24px;font-size:11px;display:flex}.footer-bottom div{gap:25px;display:flex}.footer-bottom a:hover{color:#fff}@supports (animation-timeline:view()){.reveal{opacity:0;filter:blur(8px);animation:linear both reveal;animation-timeline:view();animation-range:entry 5% cover 32%;transform:translateY(46px)}@keyframes reveal{to{opacity:1;filter:blur();transform:translateY(0)}}}@media (width<=980px){.hero{min-height:auto;padding-top:130px;padding-bottom:100px}.hero-layout{grid-template-columns:1fr;gap:70px}.hero h1{max-width:760px}.console-stage{width:min(760px,95%);margin:auto}.hero-bottom{display:none}.control-showcase{grid-template-columns:1fr;gap:45px}.data-visual{min-height:500px}}@media (width<=720px){.nav{height:58px;padding:0 18px}.nav-links,.brand em{display:none}.hero{padding:105px 20px 80px}.hero-art{background-image:linear-gradient(#0407098c 0%,#040709bd 38%,#040709f7 100%),url(../hero-cinema.png);background-position:65%}.hero h1{font-size:clamp(48px,14.5vw,72px)}.hero-copy{font-size:14px}.hero-actions{flex-direction:column;align-items:flex-start;gap:20px}.console-stage{width:108%;margin-left:-4%}.console-window{border-radius:12px}.console-body{grid-template-columns:66px 1fr;min-height:280px}.console-topbar{height:39px}.console-sidebar{padding:10px 7px}.console-sidebar span,.console-sidebar b{padding:6px 4px;font-size:6px}.console-main{padding:12px}.metric-grid>div{padding:7px}.metric-grid strong{font-size:10px}.chart-card,.status-card{height:128px;padding:8px}.chart{gap:3px;height:86px}.float-users{top:16%;right:-1%}.float-node{bottom:7%;left:-2%}.statement{min-height:80vh;padding:100px 24px}.statement-bottom{grid-template-columns:1fr;gap:35px;margin-top:38px}.capabilities{padding:100px 20px}.section-head{flex-direction:column;align-items:start;gap:22px}.section-head>p{width:auto}.capability-grid{grid-template-columns:1fr}.capability-card{min-height:540px;padding:20px}.capability-visual{height:280px}.control-showcase{min-height:auto;padding:105px 24px}.data-visual{min-height:410px}.data-card-main{width:93%;min-height:310px;padding:20px}.load-bars{height:110px}.data-card-small{width:170px;padding:15px;right:-2%}.data-orbit.orbit-one,.data-orbit.orbit-two{width:115%}.delivery{padding:100px 24px}.delivery-head{margin-bottom:45px}.delivery-item{grid-template-columns:38px 1fr;gap:14px;min-height:190px;padding:28px 0}.delivery-item p{grid-column:2}.delivery-item>i{display:none}.contact{min-height:84vh}.contact h2{font-size:clamp(52px,15vw,74px)}footer{min-height:360px;padding:70px 24px 28px}.footer-bottom{flex-direction:column;gap:30px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.pricing-page{background:#080a0c}.pricing-nav-shell{background:#080a0ccc}.nav-current{color:#fff!important}.pricing-hero{text-align:center;background:#090b0d;place-items:center;min-height:82vh;padding:150px 28px 90px;display:grid;position:relative;overflow:hidden}.pricing-hero-inner{z-index:3;max-width:1100px;position:relative}.pricing-kicker{color:#aeb1b3;letter-spacing:.19em;opacity:0;justify-content:center;align-items:center;gap:10px;margin:0 0 28px;font-size:10px;font-weight:650;animation:.9s .15s forwards rise;display:flex}.pricing-kicker span{background:var(--ember);width:23px;height:1px}.pricing-hero h1{letter-spacing:-.07em;opacity:0;margin:0;font-size:clamp(58px,7.5vw,108px);font-weight:620;line-height:.98;animation:1.1s cubic-bezier(.16,1,.3,1) .28s forwards rise}.pricing-hero h1 span{color:var(--ember)}.pricing-hero-inner>p:not(.pricing-kicker){color:#9da0a2;opacity:0;max-width:660px;margin:34px auto 0;font-size:17px;line-height:1.75;animation:.9s .44s forwards rise}.billing-note{color:#777c7f;opacity:0;background:#ffffff06;border:1px solid #ffffff1a;border-radius:99px;align-items:center;gap:8px;width:fit-content;margin:30px auto 0;padding:8px 13px;font-size:9px;animation:.9s .58s forwards rise;display:flex}.billing-note i{background:var(--ember);width:5px;height:5px;box-shadow:0 0 10px var(--ember);border-radius:50%;animation:1.8s ease-in-out infinite pulse}.pricing-glow{filter:blur(110px);opacity:.22;border-radius:50%;animation:9s ease-in-out infinite alternate auroraFloat;position:absolute}.glow-left{background:#944d2b;width:520px;height:390px;top:5%;left:-12%}.glow-right{background:#326d77;width:480px;height:390px;animation-direction:alternate-reverse;bottom:-10%;right:-12%}.pricing-grid-bg{opacity:.18;background-image:linear-gradient(#ffffff14 1px,#0000 1px),linear-gradient(90deg,#ffffff14 1px,#0000 1px);background-size:90px 90px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle,#000,#0000 70%);mask-image:radial-gradient(circle,#000,#0000 70%)}.pricing-plans{background:#090b0d;padding:0 max(28px,50vw - 640px) 140px}.plan-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:14px;display:grid}.plan-card{color:#dfe1e2;background:#111417;border:1px solid #ffffff1a;border-radius:7px;min-height:720px;padding:35px;transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .5s,box-shadow .5s;position:relative}.plan-card:hover{border-color:#ffffff38;transform:translateY(-10px);box-shadow:0 35px 90px #00000061}.plan-featured{background:linear-gradient(160deg,#df9a5e17,#0000 34%),#141719;border-color:#df9a5e6b;box-shadow:0 25px 90px #df9a5e14}.popular-label{color:#111;background:var(--ember);letter-spacing:.05em;border-radius:99px;padding:6px 10px;font-size:8px;font-weight:700;position:absolute;top:18px;right:18px}.plan-eyebrow{color:#858b8f;letter-spacing:.19em;margin:0 0 17px;font-size:9px;font-weight:650}.plan-card h2{letter-spacing:-.055em;margin:0;font-size:38px;font-weight:580}.plan-description{color:#898e91;min-height:72px;margin:18px 0 0;font-size:13px;line-height:1.7}.plan-price{align-items:baseline;gap:7px;min-height:72px;margin:30px 0 25px;display:flex}.plan-price strong{letter-spacing:-.065em;font-size:clamp(46px,4.5vw,65px);font-weight:570}.plan-price span{color:#74797c;font-size:11px}.plan-button{color:#e1e3e4;border:1px solid #ffffff29;border-radius:99px;justify-content:space-between;align-items:center;width:100%;min-height:48px;padding:0 18px;font-size:12px;font-weight:600;transition:background .25s,color .25s,transform .25s;display:flex}.plan-button:hover{color:#111;background:#fff;transform:translateY(-2px)}.plan-button-light{color:#111;background:#f0eee9;border-color:#0000}.plan-divider{background:#ffffff17;height:1px;margin:31px 0 25px}.includes{color:#aeb1b3;margin:0 0 18px;font-size:10px;font-weight:650}.plan-card ul{flex-direction:column;gap:14px;margin:0;padding:0;list-style:none;display:flex}.plan-card li{color:#92979a;align-items:center;gap:10px;font-size:12px;display:flex}.plan-card li span{color:#80b692;background:#5da4771a;border-radius:50%;flex:0 0 18px;place-items:center;width:18px;height:18px;font-size:8px;display:grid}.pending-hint{color:#5f6467;text-align:center;margin:20px 0 0;font-size:9px}.comparison{color:#111315;background:var(--paper);padding:140px max(28px,50vw - 590px)}.comparison-head{margin-bottom:60px}.comparison-head .section-label{color:#8d7967}.comparison-head h2{letter-spacing:-.065em;margin:0;font-size:clamp(55px,6vw,86px);font-weight:620}.comparison-head>p:not(.section-label){color:#77726c;margin:20px 0 0;font-size:15px}.comparison-table-wrap{overflow-x:auto}.comparison table{border-collapse:collapse;width:100%;min-width:720px}.comparison th,.comparison td{text-align:center;border-bottom:1px solid #c9c4bc;padding:23px 18px;font-size:13px}.comparison thead th{color:#77726b;letter-spacing:.08em;font-size:10px;font-weight:650}.comparison th:first-child{color:#3d3d3b;text-align:left;width:34%;padding-left:0;font-weight:580}.comparison tbody td{color:#716d67}.comparison tbody td:nth-child(3){color:#a5612c;background:#df9a5e0f}.pricing-custom{color:#111315;text-align:center;background:#ddd8cf;place-items:center;min-height:88vh;padding:110px 28px;display:grid;position:relative;overflow:hidden}.pricing-custom-inner{z-index:3;max-width:980px;position:relative}.pricing-custom .section-label{color:#99663e}.pricing-custom h2{letter-spacing:-.07em;margin:0;font-size:clamp(55px,7.5vw,105px);font-weight:620;line-height:1}.pricing-custom-inner>p:not(.section-label){color:#6f6b65;max-width:620px;margin:32px auto;font-size:16px;line-height:1.75}.custom-orb{aspect-ratio:1;filter:blur(4px);border-radius:50%;width:500px;animation:10s ease-in-out infinite alternate orbDrift;position:absolute}.custom-orb-left{background:radial-gradient(circle at 62% 62%,#dd9b61,#0000 70%);top:-200px;left:-290px}.custom-orb-right{background:radial-gradient(circle at 35% 35%,#77a1aa,#0000 70%);animation-direction:alternate-reverse;bottom:-230px;right:-310px}.pricing-footer{min-height:410px}@media (width<=900px){.plan-grid{grid-template-columns:1fr}.plan-card,.plan-description,.plan-price{min-height:auto}}@media (width<=720px){.pricing-hero{min-height:76vh;padding:120px 20px 75px}.pricing-hero h1{font-size:clamp(50px,14.5vw,72px)}.pricing-hero-inner>p:not(.pricing-kicker){font-size:14px}.pricing-plans{padding:0 18px 90px}.plan-card{padding:27px 23px}.comparison{padding:100px 20px}.pricing-custom{min-height:78vh}.pricing-custom h2{font-size:clamp(48px,14vw,70px)}} diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 0000000..ca747cb --- /dev/null +++ b/favicon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/hero-cinema.png b/hero-cinema.png new file mode 100644 index 0000000..1f8cd61 Binary files /dev/null and b/hero-cinema.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..66fea65 --- /dev/null +++ b/index.html @@ -0,0 +1,168 @@ + + + + + + + 煮糊了 OverCooked｜影视流媒体平台 + + + + + + +
+ + +
+ +
+
+ +
+
+

为影视运营而生

+

OverCooked

+

新一代流媒体一体服务平台

+

让天下的服主安心开服。

+
+ 查看服务定价 + 了解平台 +
+
+ +
+
+
+ +
Manage Console
+
服务正常
+
+
+ +
+
+
7 月 29 日 · 今天

运营概览

实时更新
+
+
活跃用户8,642↑ 12.4%
+
正在播放1,284实时
+
节点可用率99.98%稳定
+
+
+
播放趋势最近 24 小时
+
+
+
+ + +
+
+
+
实时播放1,284
+
+
+
+ +
+
可用率99.98%
关键服务7 × 24
统一控制台1 个
+
+ +
+
+

OverCooked Platform

+

复杂留在幕后。
运营回到一眼看清。

+

门户、用户、订单、片库和播放节点不再散落在不同系统。所有关键状态围绕你的工作流出现，常用动作始终触手可及。

+
+
+
01

看见

重要状态实时呈现，异常不再藏在报表深处。

+
02

行动

控制与对象相邻，减少页面切换和重复确认。

+
03

扩展

从一个品牌到多节点网络，能力随业务自然生长。

+
+
+ +
+
+

核心能力

一个界面，
四种关键视角。

+
+

连续浏览四种工作视角，看平台如何把复杂任务压缩成清楚、连贯的操作。

+
+ + +
+
+
+
+
+

01 品牌门户

从第一帧开始，
就是你的品牌。

首页、详情页和播放体验完整定制，多端适配与独立域名默认就绪。
+ +
+
+

02 统一运营

用户、套餐与订单，
在同一条时间线上。

清楚掌握用户生命周期与经营数据，把日常运营动作放回业务上下文。
+ +
+
+

03 媒体处理

内容进入之后，
流程自动向前。

检查、转码、归类和可用性验证持续运行，团队只处理真正需要判断的部分。
+ +
+
+

04 节点网络

让每一次播放，
走更合适的线路。

按区域、延迟和健康状态自动调度，同时保留清楚的人工控制与审计记录。
+ +
+
+
+ +
+

清晰交付

从想法到上线，
没有黑箱。

+
    +
  1. 01

    理解业务

    品牌、内容来源、用户规模与部署环境。

    2. +
  2. 02

    配置平台

    门户、控制台、权限和线路策略。

    3. +
  3. 03

    接入数据

    媒体库、存储节点与现有用户体系。

    4. +
  4. 04

    上线陪跑

    测试、迁移、上线与持续运行支持。

    5. +
+
+ +
+ +

准备好开始了吗

把注意力留给内容，
把平台交给我们。

告诉我们你的业务模式和现有环境，我们会给出合适的建设与迁移方案。

联系团队 查看方案
+
+
+ + + + + diff --git a/overcooked-white.png b/overcooked-white.png new file mode 100644 index 0000000..e4ef199 Binary files /dev/null and b/overcooked-white.png differ diff --git a/pricing.html b/pricing.html new file mode 100644 index 0000000..bc9dc49 --- /dev/null +++ b/pricing.html @@ -0,0 +1,88 @@ + + + + + + + 服务定价｜煮糊了 OverCooked + + + + + + +
+ + +
+ +
+
+
+

永久授权 · 按需升级

+

从刚刚好开始。
随业务一起成长。

+

一次购买，永久使用。规模变化时，保留已有配置和数据，平滑升级到下一阶段。

+
+ +
+ +
+

选择方案

现在需要多少，
就从多少开始。

每个方案都包含完整部署能力。区别只在规模、自动化深度与支持等级。

+
+
+

Starter

个人 / 小团队
+

OCM 基础版

用于启动第一套独立影视服务。

+
¥399一次付费
+ 选择基础版 +
  • ✓1 个品牌门户
  • ✓基础用户与套餐管理
  • ✓2 个媒体或播放节点
  • ✓移动端完整适配
  • ✓基础运行监控
  • ✓工作日技术支持
+
+
+
推荐
+

Professional

成长型业务
+

OCM 专业版

用于已有稳定用户规模的影视服务。

+
¥599一次付费
+ 选择专业版 +
  • ✓3 个品牌门户
  • ✓完整用户、套餐与订单管理
  • ✓10 个媒体或播放节点
  • ✓高级品牌定制
  • ✓实时监控与操作审计
  • ✓开放接口与自动化
  • ✓优先技术支持
+
+
+

Enterprise

多品牌 / 私有化
+

旗舰版

用于多节点、深度集成或独立资源环境。

+
定制按需报价
+ 联系定制方案 +
  • ✓品牌与门户数量按需配置
  • ✓多节点及私有化部署
  • ✓独立资源与数据迁移
  • ✓既有系统深度集成
  • ✓专属功能与接口开发
  • ✓上线陪跑与持续运维
  • ✓专属服务响应
+
+
+

基础版与专业版通过 Stripe 安全结账。所有方案均为永久授权。

+
+ +
+

详细比较

差异，清楚列出。

选择当前真正会用到的能力，不为暂时不需要的规模付费。

+
+
平台能力基础版专业版旗舰版
+
品牌门户1 个3 个按需配置
+
媒体及播放节点2 个10 个按需配置
+
用户与套餐管理基础完整完整
+
实时监控基础完整完整 + 定制
+
API 与自动化—支持深度定制
+
私有化部署——支持
+
技术支持工作日优先响应专属响应
+
+
+ +
+ +

需要不同的组合？

让方案适应业务，
而不是反过来。

多品牌、特殊存储、数据迁移、私有部署或既有系统集成，都可以按实际需求组合。

获取定制报价
+
+
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..f328f88 --- /dev/null +++ b/script.js @@ -0,0 +1,289 @@ +(() => { + const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)"); + const header = document.querySelector("[data-header]"); + const menuButton = document.querySelector("[data-menu-button]"); + const mobileMenu = document.querySelector("[data-mobile-menu]"); + + let headerScrollTimer = 0; + let lastHeaderScrollY = window.scrollY; + + const updateHeader = () => header?.classList.toggle("is-scrolled", window.scrollY > 20); + const handleHeaderScroll = () => { + updateHeader(); + if (!header) return; + + const currentScrollY = window.scrollY; + if (!reducedMotion.matches && Math.abs(currentScrollY - lastHeaderScrollY) >= 2) { + header.classList.add("is-scroll-hidden"); + } + lastHeaderScrollY = currentScrollY; + + window.clearTimeout(headerScrollTimer); + headerScrollTimer = window.setTimeout(() => { + header.classList.remove("is-scroll-hidden"); + }, 180); + }; + + updateHeader(); + window.addEventListener("scroll", handleHeaderScroll, { passive: true }); + reducedMotion.addEventListener("change", () => { + if (reducedMotion.matches) header?.classList.remove("is-scroll-hidden"); + }); + + const glassNav = document.querySelector(".nav-island"); + if (glassNav && !reducedMotion.matches && window.matchMedia("(pointer: fine)").matches) { + glassNav.addEventListener("pointermove", (event) => { + const rect = glassNav.getBoundingClientRect(); + glassNav.style.setProperty("--glass-x", `${event.clientX - rect.left}px`); + glassNav.style.setProperty("--glass-y", `${event.clientY - rect.top}px`); + }, { passive: true }); + + glassNav.addEventListener("pointerleave", () => { + glassNav.style.setProperty("--glass-x", "50%"); + glassNav.style.setProperty("--glass-y", "0%"); + }); + } + + if (menuButton && mobileMenu) { + const closeMenu = () => { + menuButton.setAttribute("aria-expanded", "false"); + menuButton.setAttribute("aria-label", "打开导航"); + mobileMenu.hidden = true; + }; + + menuButton.addEventListener("click", () => { + const opening = menuButton.getAttribute("aria-expanded") !== "true"; + menuButton.setAttribute("aria-expanded", String(opening)); + menuButton.setAttribute("aria-label", opening ? "关闭导航" : "打开导航"); + mobileMenu.hidden = !opening; + }); + + mobileMenu.addEventListener("click", (event) => { + if (event.target.closest("a")) closeMenu(); + }); + + document.addEventListener("pointerdown", (event) => { + if (!mobileMenu.hidden && !header.contains(event.target)) closeMenu(); + }); + + document.addEventListener("keydown", (event) => { + if (event.key === "Escape") closeMenu(); + }); + + window.addEventListener("resize", () => { + if (window.innerWidth > 960) closeMenu(); + }, { passive: true }); + } + + const activateSet = (buttons, panels, button, buttonKey, panelKey) => { + const target = button.dataset[buttonKey]; + buttons.forEach((item) => { + const active = item === button; + item.classList.toggle("is-active", active); + item.setAttribute("aria-pressed", String(active)); + }); + panels.forEach((panel) => { + const active = panel.dataset[panelKey] === target; + panel.hidden = !active; + panel.classList.toggle("is-active", active); + }); + }; + + const bindButtonSet = (buttonSelector, panelSelector, buttonKey, panelKey) => { + const buttons = [...document.querySelectorAll(buttonSelector)]; + const panels = [...document.querySelectorAll(panelSelector)]; + buttons.forEach((button, index) => { + button.addEventListener("click", () => activateSet(buttons, panels, button, buttonKey, panelKey)); + button.addEventListener("keydown", (event) => { + if (!["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(event.key)) return; + event.preventDefault(); + const direction = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : -1; + const next = buttons[(index + direction + buttons.length) % buttons.length]; + next.focus(); + activateSet(buttons, panels, next, buttonKey, panelKey); + }); + }); + }; + + bindButtonSet("[data-console-tab]", "[data-console-view]", "consoleTab", "consoleView"); + + const featureRail = document.querySelector("[data-feature-rail]"); + const featurePrev = document.querySelector("[data-feature-prev]"); + const featureNext = document.querySelector("[data-feature-next]"); + if (featureRail && featurePrev && featureNext) { + const originalCards = [...featureRail.querySelectorAll(".feature-card")]; + const autoPauses = new Set(); + let railFrame = 0; + let motionFrame = 0; + let lastMotionTime = 0; + let manualPauseUntil = 0; + + // Three identical sets keep both automatic and manual movement seamless. + const cloneSet = () => { + const fragment = document.createDocumentFragment(); + originalCards.forEach((card) => { + const clone = card.cloneNode(true); + clone.setAttribute("aria-hidden", "true"); + fragment.append(clone); + }); + return fragment; + }; + + featureRail.prepend(cloneSet()); + featureRail.append(cloneSet()); + + const getStep = () => { + const card = originalCards[0]; + if (!card) return 0; + const gap = parseFloat(getComputedStyle(featureRail).columnGap) || 0; + return card.getBoundingClientRect().width + gap; + }; + + const getLoopSpan = () => getStep() * originalCards.length; + + const normalizeRail = () => { + const loopSpan = getLoopSpan(); + if (!loopSpan) return; + if (featureRail.scrollLeft >= loopSpan * 2) featureRail.scrollLeft -= loopSpan; + if (featureRail.scrollLeft <= 1) featureRail.scrollLeft += loopSpan; + }; + + featureRail.scrollLeft = getLoopSpan(); + + const scheduleRailUpdate = () => { + if (railFrame) return; + railFrame = requestAnimationFrame(() => { + railFrame = 0; + normalizeRail(); + }); + }; + + const scrollRail = (direction) => { + const step = getStep(); + if (!step) return; + manualPauseUntil = performance.now() + 700; + featureRail.scrollBy({ + left: direction * step, + behavior: reducedMotion.matches ? "auto" : "smooth" + }); + }; + + const stopAuto = () => { + cancelAnimationFrame(motionFrame); + motionFrame = 0; + lastMotionTime = 0; + }; + + const animateRail = (time) => { + if (!lastMotionTime) lastMotionTime = time; + const elapsed = Math.min(time - lastMotionTime, 40); + lastMotionTime = time; + if (!autoPauses.size && time >= manualPauseUntil) { + featureRail.scrollLeft += elapsed * 0.032; + normalizeRail(); + } + motionFrame = requestAnimationFrame(animateRail); + }; + + const startAuto = () => { + if (reducedMotion.matches || document.hidden) { + stopAuto(); + return; + } + if (!motionFrame) motionFrame = requestAnimationFrame(animateRail); + }; + + const pauseAuto = (reason) => autoPauses.add(reason); + + const resumeAuto = (reason) => { + autoPauses.delete(reason); + startAuto(); + }; + + const moveManually = (direction) => { + scrollRail(direction); + startAuto(); + }; + + featurePrev.addEventListener("click", () => moveManually(-1)); + featureNext.addEventListener("click", () => moveManually(1)); + featureRail.addEventListener("scroll", scheduleRailUpdate, { passive: true }); + featureRail.addEventListener("keydown", (event) => { + if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return; + event.preventDefault(); + moveManually(event.key === "ArrowRight" ? 1 : -1); + }); + featureRail.addEventListener("pointerdown", () => pauseAuto("pointer"), { passive: true }); + window.addEventListener("pointerup", () => resumeAuto("pointer"), { passive: true }); + window.addEventListener("pointercancel", () => resumeAuto("pointer"), { passive: true }); + featureRail.addEventListener("wheel", () => { + manualPauseUntil = performance.now() + 900; + }, { passive: true }); + document.addEventListener("visibilitychange", () => { + if (document.hidden) stopAuto(); + else startAuto(); + }); + reducedMotion.addEventListener("change", startAuto); + window.addEventListener("resize", () => { + featureRail.scrollLeft = getLoopSpan(); + scheduleRailUpdate(); + }, { passive: true }); + startAuto(); + } + + const productStage = document.querySelector("[data-product-stage]"); + const productWindow = document.querySelector("[data-product-window]"); + if (productStage && productWindow && !reducedMotion.matches && window.matchMedia("(pointer: fine)").matches) { + let currentX = 0; + let currentY = 0; + let targetX = 0; + let targetY = 0; + let velocityX = 0; + let velocityY = 0; + let frame = 0; + + const animateTilt = () => { + velocityX = (velocityX + (targetX - currentX) * 0.16) * 0.72; + velocityY = (velocityY + (targetY - currentY) * 0.16) * 0.72; + currentX += velocityX; + currentY += velocityY; + productWindow.style.setProperty("--rx", `${currentX.toFixed(3)}deg`); + productWindow.style.setProperty("--ry", `${currentY.toFixed(3)}deg`); + const moving = Math.abs(targetX - currentX) + Math.abs(targetY - currentY) + Math.abs(velocityX) + Math.abs(velocityY) > 0.003; + frame = moving ? requestAnimationFrame(animateTilt) : 0; + }; + + const scheduleTilt = () => { + if (!frame) frame = requestAnimationFrame(animateTilt); + }; + + productStage.addEventListener("pointermove", (event) => { + const rect = productStage.getBoundingClientRect(); + const x = (event.clientX - rect.left) / rect.width - 0.5; + const y = (event.clientY - rect.top) / rect.height - 0.5; + targetX = Math.max(-1.5, Math.min(1.5, -y * 3)); + targetY = Math.max(-2.1, Math.min(2.1, x * 4.2)); + scheduleTilt(); + }, { passive: true }); + + productStage.addEventListener("pointerleave", () => { + targetX = 0; + targetY = 0; + scheduleTilt(); + }); + } + + const reveals = document.querySelectorAll(".reveal"); + if (reducedMotion.matches || !("IntersectionObserver" in window)) { + reveals.forEach((item) => item.classList.add("is-visible")); + } else { + const observer = new IntersectionObserver((entries) => { + entries.forEach((entry) => { + if (!entry.isIntersecting) return; + entry.target.classList.add("is-visible"); + observer.unobserve(entry.target); + }); + }, { rootMargin: "0px 0px -7%", threshold: 0.08 }); + reveals.forEach((item) => observer.observe(item)); + } +})();