index.html - master - Matcher/Studio

index.html
225 строк15 KB
Matcher
Create: index.html
08 июл 2026, 19:36
08 июл 2026, 19:365e66c08
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Match Studio — AI для кино</title>
  <link rel="icon" type="image/png" href="/favicon.png" />
  <style>
    :root {
      --bg: #000000;
      --fg: #ffffff;
      --muted: rgba(255,255,255,0.72);
      --line: rgba(255,255,255,0.10);
      --line-strong: rgba(255,255,255,0.22);
      --accent: #ECA72C;
      --glow: rgba(236,167,44,0.18);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(1200px 600px at 15% -10%, var(--glow), transparent 60%),
        radial-gradient(1000px 600px at 90% 110%, rgba(236,167,44,0.10), transparent 60%),
        var(--bg);
      color: var(--fg); line-height: 1.55; -webkit-font-smoothing: antialiased;
    }
    body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
    a { color: inherit; text-decoration: none; }
    .page { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }
    header { border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
    .nav { max-width: 1040px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .brand { font-size: 18px; letter-spacing: 0.02em; color: var(--fg); font-weight: 800; }
    .btn { padding: 10px 20px; font-size: 11px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; border-radius: 0; transition: 0.2s; white-space: nowrap; }
    .btn-primary { border: 1px solid transparent; background: linear-gradient(120deg, #d08e18, #ECA72C); color: #241a05; }
    .btn-primary:hover { filter: brightness(1.1); }
    .btn-outline { border: 1px solid var(--line-strong); background: transparent; color: var(--fg); }
    .btn-outline:hover { border-color: rgba(255,255,255,0.7); }
    main { flex: 1; }
    section { border-bottom: 1px solid var(--line); }

    /* HERO: текст в колонке, видео — на всю ширину */
    .hero { padding: 56px 0 56px; display: flex; flex-direction: column; gap: 40px; }
    .hero-text { max-width: 820px; margin: 0 auto; padding: 0 24px; text-align: center; }
    .hero-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--accent); }
    h1 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; margin: 16px auto 32px; font-weight: 800; letter-spacing: -0.02em; max-width: 28ch; }
    .hero-sub { font-size: clamp(15px, 1.7vw, 18px); max-width: 40rem; color: var(--muted); margin: 0 auto; }

    /* ВИДЕО НА ВСЮ ШИРИНУ С ВОЗДУХОМ ПО БОКАМ */
    .hero-visual { width: 100%; padding: 0 40px; }
    .reel-video {
      width: 100%;
      aspect-ratio: 21 / 9;
      display: block;
      background: #000;
      object-fit: cover;
      border: 1px solid var(--line-strong);
      border-radius: 14px;
      box-shadow: 0 30px 80px -30px rgba(0,0,0,0.9);
    }

    .section-inner { max-width: 1040px; margin: 0 auto; padding: 64px 24px 68px; text-align: center; }
    .section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 16px; }
    .section-lead { font-size: clamp(17px, 2.2vw, 24px); max-width: 44rem; color: var(--fg); margin: 0 auto 40px; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }
    .services-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); text-align: left; }
    .service-item { background: var(--bg); padding: 28px 26px; }
    .service-num { font-size: 11px; letter-spacing: 0.18em; color: var(--accent); margin-bottom: 12px; }
    .service-item h3 { font-size: 17px; margin: 0 0 8px; font-weight: 600; }
    .service-item p { font-size: 14px; color: var(--muted); margin: 0; }

    /* PIPELINE */
    .pipeline-list { max-width: 720px; margin: 8px auto 0; text-align: left; border-top: 1px solid var(--line); }
    .step { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 26px 4px; border-bottom: 1px solid var(--line); align-items: start; }
    .step-num { font-size: 28px; font-weight: 800; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
    .step-body h3 { font-size: clamp(16px, 1.9vw, 19px); margin: 0 0 6px; font-weight: 700; letter-spacing: -0.01em; }
    .step-body p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.5; }

    .why-inner { max-width: 780px; margin: 0 auto; padding: 72px 24px 76px; text-align: center; }
    .why-inner .section-label { margin-bottom: 48px; }
    .why-block { margin: 0 auto 36px; max-width: 62ch; }
    .why-block:last-child { margin-bottom: 0; }
    .why-block h3 { font-size: clamp(18px, 2.2vw, 22px); margin: 0 0 10px; font-weight: 700; letter-spacing: -0.01em; }
    .why-block p { font-size: clamp(15px, 1.9vw, 18px); color: var(--muted); margin: 0; line-height: 1.55; }
    .contact-box { max-width: 460px; margin: 0 auto; border: 1px solid var(--line-strong); padding: 26px 24px; font-size: 14px; background: rgba(255,255,255,0.015); }
    .contact-box .row { margin: 8px 0; }
    .contact-box a { color: var(--accent); }
    .contact-note { margin-top: 12px; font-size: 12px; opacity: 0.7; }
    .contact-actions { margin-top: 20px; }
    h2.contact-h { font-size: clamp(22px, 2.8vw, 30px); margin: 0 auto 14px; font-weight: 700; letter-spacing: -0.01em; }
    .contact-sub { font-size: 15px; color: var(--muted); max-width: 44rem; margin: 0 auto 32px; }
    footer { padding: 26px 24px 34px; font-size: 11px; color: rgba(255,255,255,0.5); text-align: center; letter-spacing: 0.06em; }

    /* планшет */
    @media (max-width: 720px) {
      .services-grid { grid-template-columns: 1fr; }
      h1 { max-width: none; }
      .hero-visual { padding: 0 28px; }
    }

    /* мобильные */
    @media (max-width: 600px) {
      .nav { padding: 14px 18px; }
      .brand { font-size: 16px; }
      .btn { padding: 9px 16px; font-size: 10px; letter-spacing: 0.08em; }

      .hero { padding: 36px 0 40px; gap: 28px; }
      .hero-text { padding: 0 18px; }
      h1 { margin: 14px auto 24px; }
      .hero-sub { font-size: 15px; }

      .hero-visual { padding: 0 16px; }
      .reel-video { aspect-ratio: 16 / 9; border-radius: 10px; }

      .section-inner { padding: 44px 18px 48px; }
      .section-lead { font-size: 18px; margin-bottom: 28px; }

      .service-item { padding: 22px 20px; }

      .step { grid-template-columns: 48px 1fr; gap: 14px; padding: 22px 2px; }
      .step-num { font-size: 22px; }

      .why-inner { padding: 48px 18px 52px; }
      .why-inner .section-label { margin-bottom: 32px; }
      .why-block { margin-bottom: 28px; }

      .contact-box { padding: 22px 20px; }
      .contact-sub { margin-bottom: 24px; }
      .btn-outline { display: block; text-align: center; }

      footer { padding: 22px 18px 30px; }
    }

    /* очень узкие экраны */
    @media (max-width: 360px) {
      .brand { font-size: 15px; }
      .btn { padding: 8px 12px; }
      .hero-visual { padding: 0 12px; }
    }
  </style>
</head>
<body>
  <div class="page">
    <header>
      <div class="nav">
        <div class="brand">Match Studio</div>
        <a class="btn btn-primary" href="#contact">Связаться</a>
      </div>
      <div class="hero">
        <div class="hero-text">
          <div class="hero-kicker">AI для кино</div>
          <h1>Искусственный интеллект и классический VFX для точной редактуры кадров</h1>
          <p class="hero-sub">От замены лиц и персонажей до удаления объектов и генерации недостающих сцен — аккуратно, реалистично и в логике продакшна.</p>
        </div>
        <div class="hero-visual">
          <video class="reel-video" autoplay muted loop playsinline preload="metadata" poster="cover.jpg">
            <source src="video/reel.mp4" type="video/mp4" />
            Ваш браузер не поддерживает видео.
          </video>
        </div>
      </div>
    </header>
    <main>
      <section id="services">
        <div class="section-inner">
          <div class="section-label">Что мы делаем</div>
          <p class="section-lead">Используем AI-генерацию, композинг и ручную доработку, чтобы вносить сложные изменения в уже снятый материал — от замены лиц до создания недостающих кадров.</p>
          <div class="services-grid">
            <div class="service-item"><div class="service-num">01</div><h3>Лица и персонажи</h3><p>Генерируем и вручную меняем лица. При необходимости — полностью заменяем человека в кадре.</p></div>
            <div class="service-item"><div class="service-num">02</div><h3>Внешность и возраст</h3><p>Изменяем возраст персонажа, корректируем грим и дорабатываем визуальные детали внешности.</p></div>
            <div class="service-item"><div class="service-num">03</div><h3>Объекты и окружение</h3><p>Удаляем лишние предметы, добавляем новые и встраиваем их в кадр с учётом света, движения и композиции.</p></div>
            <div class="service-item"><div class="service-num">04</div><h3>Недостающий материал</h3><p>Создаём новые кадры при помощи AI. Сохраняем контекст уже снятой сцены.</p></div>
          </div>
        </div>
      </section>
      <section id="pipeline">
        <div class="section-inner">
          <div class="section-label">По шагам</div>
          <p class="section-lead">Прозрачный пайплайн — от трекинга исходного материала до финального цвета и экспорта.</p>
          <div class="pipeline-list">
            <div class="step"><div class="step-num">01</div><div class="step-body"><h3>Tracking / Matchmove</h3><p>Трекинг камеры и объектов по реальному видео, чтобы ИИ-генерация точно совпадала с движением камеры.</p></div></div>
            <div class="step"><div class="step-num">02</div><div class="step-body"><h3>AI-генерация</h3><p>Создание необходимых объектов, персонажей и элементов средствами нейросетей.</p></div></div>
            <div class="step"><div class="step-num">03</div><div class="step-body"><h3>Simulation / FX</h3><p>Дым, огонь, жидкость, ткань, волосы, частицы, разрушения, взрывы, пыль, дождь, магия.</p></div></div>
            <div class="step"><div class="step-num">04</div><div class="step-body"><h3>Rendering</h3><p>Настройка рендера: камеры, AOV/passes, sampling, denoise, оптимизация сцены, финальный вывод кадров.</p></div></div>
            <div class="step"><div class="step-num">05</div><div class="step-body"><h3>Rotoscoping / Cleanup</h3><p>Ротоскоп, маски, удаление лишнего, вырезание объектов, подготовка plate’ов.</p></div></div>
            <div class="step"><div class="step-num">06</div><div class="step-body"><h3>Compositing</h3><p>Сборка в After Effects / Nuke: цвет, маски, glow, blur, depth, lens effects, интеграция CG в видео.</p></div></div>
            <div class="step"><div class="step-num">07</div><div class="step-body"><h3>Color / Final</h3><p>Финальный цвет, контраст, зерно, резкость, экспорт в нужный формат.</p></div></div>
          </div>
        </div>
      </section>
      <section id="why">
        <div class="why-inner">
          <div class="section-label">Почему Match Studio</div>
          <div class="why-block">
            <h3>Люди из кино.</h3>
            <p>Более 20 лет опыта в кино и рекламе. Понимаем производственный процесс и требования постпродакшна.</p>
          </div>
          <div class="why-block">
            <h3>Прямое общение</h3>
            <p>Работа с исполнителями. Без аккаунт-менеджеров и лишних согласований.</p>
          </div>
          <div class="why-block">
            <h3>AI, встроенный в пайплайн.</h3>
            <p>Результат готов к дальнейшей работе композинга, цветокоррекции и финальной сборки проекта.</p>
          </div>
        </div>
      </section>
      <section id="contact">
        <div class="section-inner">
          <div class="section-label">Контакты</div>
          <h2 class="contact-h">Покажите задачу — обсудим, как её сделать.</h2>
          <p class="contact-sub">Готовы обсудить идеи, сценарии или технические вопросы на любом этапе продакшна.</p>
          <div class="contact-box">
            <div class="row"><strong>Telegram </strong><a href="https://t.me/imvid">@imvid</a></div>
            <div class="row"><strong>Email </strong><a href="mailto:mrzayts@gmail.com">mrzayts@gmail.com</a></div>
            <div class="contact-note">Задавайте любые вопросы — ответим по существу.</div>
            <div class="contact-actions"><a class="btn btn-outline" href="/files/shooting-guide.pdf" target="_blank">Скачать гид по съёмке (PDF)</a></div>
          </div>
        </div>
      </section>
    </main>
    <footer>© 2026 Match Studio — AI и VFX для кино и рекламы. Точная редактура кадров.</footer>
  </div>
</body>
</html>