/* product.css — слой продуктового лендинга поверх материала стекла. * * Требует tokens.css и glass.css. Подключать третьим. * Включается классом .product на вместе с .dark. * * ЗАЧЕМ ОТДЕЛЬНЫЙ СЛОЙ. glass.css описывает МАТЕРИАЛ — как выглядит стекло. * Здесь описан ЖАНР — как выглядит сайт продукта. Материал одинаков у админки * и у лендинга, жанр — нет. * * ОТКУДА ПРАВИЛА. Разбор того, чем топовые AI-продукты 2026 отличаются от * шаблонных лендингов (Linear, Vercel, Attio, Ramp, ElevenLabs): * * 1. Почти чёрная база #000–#0A0A0A. Не тёмно-серая и не цветная. * 2. ОДИН акцент, применённый скупо, плюс свечение. Не четыре цвета. * 3. Бенто-сетка: иерархия задаётся РАЗМЕРОМ ЯЧЕЙКИ, а не кеглем текста. * 4. Продукт и есть визуал. Живая демка вытеснила статичный скриншот; * абстрактные иллюстрации не ставят вообще. * 5. Волосяная граница вместо мягкой тени. Тень — только под тем, что парит. * 6. Моноширинный шрифт как знак технической состоятельности. * 7. Меньше пяти ссылок в навигации, одно главное действие над сгибом. * * Нарушение любого из семи возвращает лендинг в состояние «шаблон мини-стартапа». */ :root.product { /* Почти чёрная база. Тёмно-серый (#1a1a1d) читается как «просто тёмная тема», * почти чёрный — как продукт. Разница в двух шагах яркости, эффект огромный. */ --bg: #08090a; --bg-2: #0e1011; --surface: #121416; /* Ячейка бенто и волосяная линия — основа жанра. */ --cell: #101214; --cell-2: #15181b; /* Волосяная линия — единственное, что отделяет ячейку от фона: тени в этом * жанре нет. На #232629 граница пропадала почти полностью и бенто * рассыпалось в пятна. Смотреть надо на настоящем экране, а не на макете: * контраст 1.4:1 на глаз есть, на скриншоте почти нет. */ --line: #2a2e33; --line-2: #3a3f45; --ink: #f2f3f5; --ink-2: #a8adb4; --ink-3: #6e757d; --ink-4: #464c53; /* Стекло на почти чёрном: тоньше и холоднее, чем на обычной тёмной теме. */ --glass-tint: rgba(255, 255, 255, 0.045); --glass-tint-2: rgba(16, 18, 20, 0.86); --glass-border: rgba(255, 255, 255, 0.09); --rim-light: rgba(255, 255, 255, 0.16); --rim-dark: rgba(0, 0, 0, 0.45); --solid: #101214; --solid-2: #14171a; --mono: ui-monospace, "SF Mono", "Geist Mono", "JetBrains Mono", Menlo, monospace; } /* ── Подложка: почти чёрное + ОДНО свечение + волосяная сетка ─────────────── * Ровно один цвет. Второе пятно другого тона немедленно превращает премиум * в шаблон — это первое, что выдаёт самодельный лендинг. */ .bg-product { position: fixed; inset: 0; z-index: -1; pointer-events: none; /* Свечение — узкое и яркое, а не широкое и мутное. Широкое пятно на 34 % * давало ржавую пелену на верхней трети экрана: цвет вроде есть, а * свечения нет. Читается как источник света только когда ядро плотное, * а спад короткий. */ background: radial-gradient(ellipse 720px 400px at 50% -8%, color-mix(in srgb, var(--accent) 52%, transparent), transparent 58%), radial-gradient(ellipse 1200px 700px at 50% -16%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 64%), radial-gradient(ellipse 900px 520px at 50% 108%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 62%), var(--bg); } /* Сетка. Даёт масштаб и «инженерность»; на глаз почти не видна, но без неё * фон выглядит пустым. Маска гасит её к краям, чтобы не было рамки. */ .bg-product::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(to right, color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 78%); } /* Зерно: убирает бандинг на большом свечении. */ .bg-product::after { content: ''; position: absolute; inset: 0; opacity: .30; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); } /* ── Типографика жанра ────────────────────────────────────────────────── */ .product .t-largetitle { font-size: clamp(40px, 6.4vw, 76px); letter-spacing: -.035em; line-height: .98; } .product .t-title-1 { font-size: clamp(28px, 3.8vw, 40px); letter-spacing: -.028em; line-height: 1.08; } .mono { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; } /* Надзаголовок: моно, капс, точка. Один из самых дешёвых способов * выглядеть технически, и один из самых заметных, если его нет. */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .10em; text-transform: uppercase; color: var(--ink-3); } .eyebrow::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); } /* ── Ячейка: волосяная граница вместо тени ────────────────────────────── */ .cell { position: relative; background: var(--cell); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; overflow: hidden; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .cell:hover { border-color: var(--line-2); background: var(--cell-2); } /* Блик по верхней кромке: намёк на объём без тени. */ .cell::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 16%, transparent), transparent); } /* ── Бенто ──────────────────────────────────────────────────────────────── * Иерархия задаётся размером ячейки, а не кеглем. Крупная ячейка = главное. * Если все ячейки одинаковые — это не бенто, а сетка карточек, то самое, * от чего лендинг выглядит шаблонным. */ .bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .bento .w2 { grid-column: span 2; } .bento .w3 { grid-column: span 3; } .bento .w4 { grid-column: span 4; } .bento .h2 { grid-row: span 2; } @media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento .w3, .bento .w4 { grid-column: span 2; } .bento .h2 { grid-row: span 1; } } @media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .bento .w2, .bento .w3, .bento .w4 { grid-column: span 1; } } /* ── Панель продукта ────────────────────────────────────────────────────── * Главный элемент первого экрана. Продукт и есть визуал: живая демка * вытеснила статичный скриншот, а абстрактные иллюстрации не ставят вообще. */ .panel { border: 1px solid var(--line); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.02) inset; } .panel-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg-2) 70%, transparent); } .panel-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); } .panel-body { padding: 22px; } /* Строка потока: как будто продукт прямо сейчас работает. */ .stream { display: grid; gap: 12px; } .stream-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: color-mix(in srgb, var(--bg-2) 60%, transparent); animation: row-in .5s var(--ease-out) backwards; } .stream-row:nth-child(2) { animation-delay: .12s } .stream-row:nth-child(3) { animation-delay: .24s } .stream-row:nth-child(4) { animation-delay: .36s } @keyframes row-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } } /* Курсор набора текста. Живое движение в одном месте экрана лучше, чем * анимация всего подряд. */ .caret::after { content: ''; display: inline-block; width: 7px; height: 1.05em; margin-left: 3px; vertical-align: -2px; background: var(--accent); animation: caret 1.05s steps(2, start) infinite; } @keyframes caret { to { opacity: 0 } } /* ── Терминал ─────────────────────────────────────────────────────────── */ .term { font-family: var(--mono); font-size: 12.5px; line-height: 1.85; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; } .term .c-dim { color: var(--ink-4); } .term .c-key { color: var(--accent); } .term .c-str { color: #7ee2a8; } .term .c-num { color: #7db8ff; } /* ── Метрики ──────────────────────────────────────────────────────────── */ /* Полоса метрик. Явные четыре колонки, а не auto-fit: auto-fit укладывал их * 3 + 1, и одинокое четвёртое число внизу читалось как поломка вёрстки. */ .metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } @media (max-width: 820px) { .metrics { grid-template-columns: repeat(2, 1fr) } } .metric b { display: block; font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1; } .metric span { display: block; margin-top: 8px; color: var(--ink-3); font-size: 13px; } /* ── Лента логотипов ────────────────────────────────────────────────────── * Края гасятся маской: обрезанный логотип на границе — признак самоделки. */ .marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee-track { display: flex; gap: 56px; width: max-content; animation: marquee 34s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%) } } .marquee b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ink-4); white-space: nowrap; transition: color var(--dur); } .marquee b:hover { color: var(--ink-2); } /* ── Разделитель секций ───────────────────────────────────────────────── */ .rule { height: 1px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--line), transparent); } /* ── Свечение под главным действием ───────────────────────────────────── */ .glow { position: relative; } .glow::after { content: ''; position: absolute; inset: -40% -10%; z-index: -1; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); filter: blur(30px); pointer-events: none; }