/* Главная v2 «показать, что получишь» — стили витрины (макет П32). Все классы с приставкой hm- (правило: у нового раздела своё пространство имён). Токены — из ai.css (:root). Подключается ПОСЛЕ ai.css. */ /* ── общее ── Редизайн 20.09 (выкат 2): экраны, не полотно. Каждый .hm-sec — минимум на высоту окна (без шапки 58px), центрируется по вертикали; контент выше — секция просто растёт, ничего не режем. Без scroll-snap (решение дизайна под холстом 2 П34а: «прилипание ломает трекпад и окна ниже 800px»). .hm-flow — две секции естественной высоты (лента, финал/FAQ). */ .hm-sec { margin-top: 0; padding-block: clamp(28px, 6vh, 72px); min-height: calc(var(--vvh, 100dvh) - 58px); display: flex; flex-direction: column; justify-content: center; } .hm-flow { min-height: auto; padding-block: clamp(24px, 5vh, 56px); } @media (max-width: 860px) { .hm-sec { min-height: auto; padding-block: 34px; } } /* Секции проявляются по одной, когда доезжают до экрана, а не все разом при открытии (класс/наблюдатель — вгОживить в home.js, once-триггер). Кривая — та же, что у .card,.step{animation:rise} в ai.css. */ .hm-reveal { opacity: 0; transform: translateY(16px); } .hm-reveal.hm-in { animation: hm-rise .26s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--hm-d, 0ms); } @keyframes hm-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .hm-reveal { opacity: 1; transform: none; } .hm-reveal.hm-in { animation: none; } } /* Кикер на бумаге: --primary давал 3,26:1, --primary-ink — 4,32 при 11,5 px. Темнее на полтона — 4,9:1 (придирки, выкат Г). */ .hm-kick { color: color-mix(in srgb, var(--primary-ink) 86%, var(--ink)); font: 800 .72rem/1 var(--head); letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; } .hm-kick::before { content: none; } /* Лист стиля П34 (холст 1): заголовки Montserrat 800 в обычном регистре, капс — только у кикеров. На макетах h2 ≈ 32–36px на 1440. */ .hm-h { font: 800 clamp(1.9rem, 3.6vw, 3.25rem)/1.1 var(--head); text-transform: none; letter-spacing: -.02em; margin: 12px 0 10px; text-wrap: balance; } .hm-sub { font-size: clamp(1rem, 1.2vw, 1.12rem); } .hm-sub { color: var(--muted); max-width: 640px; margin: 0 0 18px; } .hm-note { color: var(--faint); font-size: .8rem; margin-top: 14px; } .hm-price { color: var(--muted); font-size: .85rem; } .hm-price b { color: var(--text); } /* ⚠️ Глобальный .cap из ai.css — капсула-чип: в наших карточках он превращал заголовки («Совещание прошло…», «История списаний») в блеклые таблетки. Нейтрализуем в скоупе витрины; секционные .cap-правила ниже добавят своё. */ .hm .cap { background: none; border: 0; padding: 0; border-radius: 0; color: var(--text); white-space: normal; letter-spacing: normal; } /* Пауза бегущих полос вне экрана (IntersectionObserver вешает .hm-still). */ .hm-still .hm-row, .hm-still .hm-filmrow { animation-play-state: paused; } /* Вторая кнопка-«стекло» рядом с оранжевой */ .hm-ghost { background: transparent; border: 1px solid var(--border-hi); color: var(--text); border-radius: 12px; padding: 12px 18px; font: 600 .86rem/1.2 var(--font); letter-spacing: 0; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: var(--tr); transition-property: var(--tr-ui); } .hm-ghost:hover { border-color: var(--primary); color: var(--primary-h); } .hm-ghost svg, .gbtn svg { width: 16px; height: 16px; flex: none; vertical-align: -3px; margin-right: 8px; } .hm-ghost svg { margin-right: 0; } /* ── 1. Хиро ── */ .hm-hero .heroin { max-width: 720px; } .hm-hero .herorow { display: flex; gap: 10px; flex-wrap: wrap; } /* Счётчик лежит на графитовом острове (.hero2 на --ink), поэтому роли острова (--on-ink / --ink-muted, как у .hero2 p и .hnote в ai.css), а не страницы: var(--text) на var(--ink) в светлой теме давал контраст 1,04 — цифра пропадала. */ .hm-counters { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; color: var(--ink-muted); font-size: .82rem; } .hm-counters b { color: var(--on-ink); font: 800 1rem/1 var(--head); margin-right: 5px; } .hm-cnt-lead { color: var(--ink-muted); } /* CTA в строках-парах — компактные, а не полосы во всю ширину (аудит): глобальный .gbtn из ai.css блочный, возвращаем кнопке её естественный размер. Кнопки внутри карточек-экспонатов не трогаем — там полная ширина уместна. */ .hm-ctarow .gbtn, .hm-closed .gbtn, .hm-tease .row .gbtn, .hm-final .gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: auto; padding: 0 28px; min-height: 56px; font-size: 1rem; } .hm-final .gbtn { padding: 0 40px; } /* Суффикс после разделителя («5 вопросов», «от 3 сол.») — обычным начертанием, приглушён. */ /* Было opacity .8 — белый на оранжевом давал 3,43:1 при 11 px, примесь цвета подняла лишь до 4,12. Оставляем чистый белый и отделяем весом. */ .gbtn .hm-sep + span { font-weight: 400; color: var(--on-primary); } .hm-ctarow .hm-ghost, .hm-final .hm-ghost { min-height: 56px; padding: 0 22px; font-size: .95rem; } /* ── 2. Лента работ ── */ .hm-belt { position: relative; overflow: hidden; margin: 16px calc(-1 * var(--поле)); padding: 4px 0; /* маска: работает только непрозрачность, цвет не тема */ -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); } .hm-row { display: flex; gap: 14px; width: max-content; padding: 12px 0 16px; align-items: flex-start; animation: hm-slide 150s linear infinite; } .hm-row.rev { animation-direction: reverse; } .hm-ghostrow { display: contents; } .hm-belt:hover .hm-row { animation-play-state: paused; } @keyframes hm-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .hm-belt { overflow-x: auto; } .hm-row { animation: none; } } .hm-card { position: relative; flex: none; height: 210px; border-radius: 14px; overflow: hidden; margin: 0; border: 1px solid var(--border); background: var(--surface-2); cursor: zoom-in; padding: 0; } .hm-card img { height: 100%; width: auto; display: block; } .hm-card figcaption { position: absolute; inset: auto 0 0 0; padding: 22px 10px 8px; background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 88%, transparent) 55%); font-size: .68rem; color: var(--muted); text-align: left; } .hm-card figcaption b { color: var(--text); display: block; font-size: .72rem; } .hm-card figcaption i { color: var(--primary-h); font-style: normal; } /* ── 3. Картинки: веер + промпты ── */ .hm-fan { display: flex; justify-content: center; padding: 26px 0 10px; } .hm-fan .hm-card { height: 260px; margin: 0 -18px; box-shadow: var(--sh); cursor: zoom-in; transition: transform .25s cubic-bezier(.16, 1, .3, 1); } .hm-fan .hm-card:nth-child(1) { transform: rotate(-6deg) translateY(14px); } .hm-fan .hm-card:nth-child(2) { transform: rotate(-3deg) translateY(4px); } .hm-fan .hm-card:nth-child(3) { transform: none; z-index: 1; } .hm-fan .hm-card:nth-child(4) { transform: rotate(3deg) translateY(4px); } .hm-fan .hm-card:nth-child(5) { transform: rotate(6deg) translateY(14px); } .hm-fan .hm-card:hover { transform: rotate(0) translateY(-8px) scale(1.05); z-index: 2; } .hm-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 16px; } .hm-island-img .hm-pills { margin-top: 40px; } .hm-pill { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 8px 14px; font-size: .8rem; cursor: pointer; transition: var(--tr); transition-property: var(--tr-ui); } .hm-pill:hover { border-color: var(--primary); color: var(--primary-h); } .hm-models { color: var(--faint); font-size: .74rem; margin-top: 10px; } .hm-ctarow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; } /* ── 4. Аудио ── */ .hm-audio { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; } /* ⚠️ min-width:0 обязателен: min-content волны с подписью (378 px) иначе распирает единственный трек на мобиле шире экрана (грабля min-height:0, только по горизонтали). Касается всех наших грид-разкладок. */ .hm-audio > *, .hm-insta > *, .hm-teaser > *, .hm-honest > *, .hm-chain > * { min-width: 0; } .hm-wave { min-width: 0; overflow: hidden; } .hm-voicecard { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; } .hm-voicecard .cap { font: 800 .78rem/1.3 var(--head); text-transform: uppercase; margin-bottom: 12px; } .hm-voicecard .hm-voices { flex: 1; min-width: 0; } .hm-voices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; grid-auto-rows: 1fr; } .hm-voice { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; cursor: pointer; transition: var(--tr); transition-property: var(--tr-ui); } .hm-voice:hover { border-color: var(--border-hi); } .hm-voice.on { border-color: var(--primary); } .hm-voice .pl { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-h); font-size: .8rem; } .hm-voice b { display: block; font-size: .82rem; } .hm-voice span { color: var(--muted); font-size: .72rem; } .hm-protocol { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; } .hm-protocol .cap { font: 800 .78rem/1.3 var(--head); text-transform: uppercase; margin-bottom: 12px; } .hm-wave { display: flex; align-items: center; gap: 2px; height: 44px; margin: 8px 0; } .hm-wave i { width: 3px; border-radius: 2px; background: var(--primary); opacity: .75; } .hm-wave .lab { margin-left: 10px; color: var(--muted); font-size: .76rem; white-space: nowrap; } .hm-doc { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-top: 10px; } .hm-doc b { font-size: .8rem; } .hm-doc ul { margin: 8px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: .78rem; } .hm-doc li { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; } .hm-doc li b { color: var(--text); } /* ── 4. Видео: графитовый остров — правила в блоке «острова» в конце файла ── */ /* ── 6. Ещё для бизнеса: четыре плитки (было 4 отдельными экранами) ── Карточка — тот же язык, что у .hm-exhibit (Инста), но без внутреннего грида: содержимое плитки простое, ему хватает потока. */ .hm-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; margin-top: 10px; } .hm-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; } .hm-tile .cap { font: 800 1.05rem/1.25 var(--head); text-transform: none; letter-spacing: -.01em; color: var(--text); margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .hm-tile .cap .hm-badge { margin-left: 0; } .hm-tile p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5; } .hm-tile p b { color: var(--text); } /* Экспонат плитки (холст 3): бежевый блок с мини-мокапом; тянется на свободное место, чтобы низ у четырёх плиток стоял на одной линии. */ .hm-exh { flex: none; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 150px; } .hm-tile .hm-tfoot { margin-top: auto; } .hm-exhcap { display: flex; justify-content: space-between; gap: 8px; font-size: .72rem; color: var(--faint); } .hm-exhdoc { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; font-size: .76rem; color: var(--text); } .hm-exhdoc b { font: 800 .62rem/1.4 var(--head); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: 4px; } .hm-exhdoc b:first-child { margin-top: 0; } .hm-exhdoc i { font-style: normal; color: var(--primary-ink); } .hm-exhdoc span { color: var(--muted); } .hm-exhdoc strong { font-weight: 600; color: var(--text); } .hm-exh-voice { flex-direction: row; flex-wrap: wrap; align-items: center; min-height: 120px; } .hm-exh-voice .hm-voice-one { width: 44px; height: 44px; border-radius: 999px; padding: 0; display: grid; place-items: center; background: var(--primary-fill); color: var(--on-primary); border: 0; margin: 0; flex: none; } .hm-exh-voice .hm-voice-one .pl { width: 44px; height: 44px; background: none; color: var(--on-primary); font-size: .9rem; } .hm-exh-voice .hm-voice-one.on { background: var(--ink); } .hm-wave { flex: 1; display: flex; align-items: center; gap: 3px; height: 32px; min-width: 90px; } .hm-wave i { display: block; width: 3px; border-radius: 2px; background: var(--text); height: 30%; } .hm-wave i:nth-child(2n) { height: 70%; } .hm-wave i:nth-child(3n) { height: 100%; } .hm-wave i:nth-child(5n) { height: 55%; } .hm-wave i:nth-child(n+8) { opacity: .35; } .hm-vchipsrow { width: 100%; display: flex; gap: 6px; flex-wrap: wrap; } .hm-vchipsrow .hm-chip { font-size: .72rem; } /* .hm-cal2 — не .hm-cal: тот класс занят старым экспонатом Инсты ниже по файлу. */ .hm-cal2 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .hm-cal2 i { display: block; aspect-ratio: 1; border-radius: 4px; background: var(--surface); border: 1px solid var(--border); } .hm-cal2 i.on { background: var(--primary); border-color: var(--primary); } .hm-exh-code { background: var(--ink); border-color: var(--ink-2); color: var(--on-ink); } .hm-exh-code pre { margin: 0; font: .72rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; color: var(--on-ink); } .hm-exh-code .c { color: var(--ink-muted); } .hm-exh-code .s { color: var(--primary); } .hm-tfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 2px; } .hm-tfoot .hm-ghost { padding: 10px 16px; min-height: 44px; } .hm-api .hm-ctarow .hm-ghost { min-height: 44px; padding: 10px 16px; font-size: .86rem; } .hm-tprice { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; } /* На бежевой подложке мокапа --primary-ink давал 4,32:1 — чуть темнее. */ .hm-tlink { color: color-mix(in srgb, var(--primary-ink) 86%, var(--ink)); font-size: .8rem; text-decoration: none; } .hm-tlink:hover { text-decoration: underline; } /* Тап-цель 44px у строчных ссылок без раздувания вёрстки: поле нажатия растёт паддингом, отрицательный margin возвращает строку на место. */ @media (max-width: 860px) { .hm-tlink { display: inline-block; padding: 15px 0; margin: -15px 0; } } .hm-tile .gbtn, .hm-tile .hm-ghost { align-self: flex-start; } @media (max-width: 1180px) { .hm-tiles { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .hm-tiles { grid-template-columns: 1fr; } } /* Знак СОЛЬ на экране «Живые люди» — без фильтра (--лого-фильтр:none на светлой теме сам подставляет исходный чёрный знак). */ .hm-people-logo { height: 34px; width: auto; flex: none; filter: var(--лого-фильтр); } /* ── 5. Инста: три экспоната ── */ .hm-insta { display: grid; grid-template-columns: 1.35fr .9fr 1fr; gap: 16px; align-items: stretch; } .hm-exhibit { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; } .hm-exhibit .cap { font: 800 .74rem/1.3 var(--head); text-transform: uppercase; display: flex; align-items: center; gap: 8px; justify-content: space-between; } .hm-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; flex: 1; } .hm-cal i { aspect-ratio: 1; border-radius: 5px; background: var(--surface-hi); border: 1px solid var(--border); position: relative; } .hm-cal i::after { content: ''; position: absolute; right: 3px; top: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--dot, transparent); } /* Дни без обложки слегка подкрашены рубрикой — план читается заполненным. */ .hm-cal i:not(.ph) { background: color-mix(in srgb, var(--dot, transparent) 9%, var(--surface-hi)); } .hm-cal i.ph { background-size: cover; background-position: center; border-color: var(--border-hi); } .hm-cal i.ph::after { width: 6px; height: 6px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg) 60%, transparent); } .hm-legend { display: flex; gap: 12px; flex-wrap: wrap; color: var(--faint); font-size: .68rem; } .hm-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; } .hm-phone { border: 1px solid var(--border-hi); border-radius: 22px; overflow: hidden; background: var(--bg); position: relative; flex: 1; min-height: 260px; } .hm-phone img { width: 100%; height: 100%; object-fit: cover; display: block; } .hm-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; gap: 5px; justify-content: center; } .hm-dots i { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--on-ink) 40%, transparent); } .hm-dots i.on { background: var(--on-ink); } .hm-mutual { display: flex; justify-content: space-between; align-items: center; background: var(--primary-soft); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 10px; padding: 9px 12px; font-size: .78rem; } .hm-mutual b { color: var(--primary-h); } /* «Экран телефона»: список подписок, похожий на настоящий Instagram — узнаваемее с первого взгляда, чем карточка с голыми цифрами (была здесь раньше). */ .hm-igphone { padding: 0; display: flex; flex-direction: column; } .hm-igtop { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); flex: none; } .hm-igtop b { flex: 1; text-align: center; margin-right: 16px; font-size: .8rem; } .hm-igback, .hm-igsearch { color: var(--faint); font-size: .9rem; flex: none; } .hm-iglist { flex: 1; padding: 2px 12px; overflow: hidden; } .hm-igrow { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--border); } .hm-igrow:first-child { border-top: 0; } .hm-igrow .av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-hi); color: var(--muted); font: 700 .74rem/1 var(--head); } .hm-igrow .nm { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; } .hm-igrow .nm b { font-size: .76rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hm-igrow .nm span { font-size: .66rem; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hm-igbtn { flex: none; font-style: normal; font-size: .64rem; padding: 5px 9px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); white-space: nowrap; } .hm-igbtn.warn { color: var(--danger); background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); } .hm-docbtn { background: var(--surface-hi); border: 1px solid var(--border-hi); color: var(--text); border-radius: 10px; padding: 9px 12px; font-size: .76rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .hm-docbtn:hover { border-color: var(--primary); color: var(--primary-h); } /* ── 6. Презентации: кинолента ── */ .hm-film { overflow: hidden; margin: 14px calc(-1 * var(--поле)); /* маска: работает только непрозрачность, цвет не тема */ -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent); mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent); } .hm-filmrow { display: flex; gap: 12px; width: max-content; padding: 8px 0; animation: hm-slide 55s linear infinite; } .hm-film:hover .hm-filmrow { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .hm-film { overflow-x: auto; } .hm-filmrow { animation: none; } } .hm-slide { flex: none; width: 250px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); transform: rotate(-1.2deg); } .hm-filmrow .hm-slide:nth-child(even) { transform: rotate(1.1deg); } .hm-slide img { width: 100%; height: auto; display: block; } .hm-closed { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-top: 10px; } .hm-closed span { color: var(--muted); font-size: .84rem; flex: 1; min-width: 220px; } /* ── 7. Чат: мокап ── */ .hm-chatmock { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; max-width: 560px; } .hm-msg { border-radius: 12px; padding: 10px 14px; font-size: .84rem; margin: 8px 0; max-width: 92%; } .hm-msg.q { background: var(--primary-soft); margin-left: auto; } .hm-msg.a { background: var(--surface-2); border: 1px solid var(--border); color: var(--muted); } .hm-msg.a b { color: var(--text); } .hm-chatmock .pill { margin-top: 4px; } .hm-chip { display: inline-block; background: var(--surface-hi); border: 1px solid var(--border-hi); border-radius: 999px; padding: 4px 10px; font-size: .7rem; color: var(--muted); margin-left: 8px; } /* ── 8. Тизер: Видео + Конвейер ── */ .hm-teaser { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; } .hm-tease { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .hm-tease .cap { font: 800 .78rem/1.3 var(--head); text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; gap: 8px; } .hm-tvid { border-radius: 12px; overflow: hidden; border: 1px solid var(--border); position: relative; } .hm-tvid video, .hm-tvid img { width: 100%; display: block; } .hm-tease p { color: var(--muted); font-size: .82rem; margin: 0; flex: 1; } /* В карточке со схемой конвейера тянется сама схема (по центру свободного места), а не текст — иначе между схемой и текстом дыра ~150px. */ .hm-tease:has(.hm-chain) p { flex: none; } .hm-tease .hm-chain { flex: 1; align-content: center; } .hm-chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; align-items: stretch; } .hm-step { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px; text-align: center; position: relative; } .hm-step:not(:last-child)::after { content: '→'; position: absolute; right: -11px; top: 50%; transform: translateY(-50%); color: var(--primary); font-weight: 700; z-index: 1; } .hm-step img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 7px; display: block; } .hm-step .sb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; aspect-ratio: 1; } .hm-step .sb i { background: var(--surface-hi); border: 1px solid var(--border); border-radius: 4px; } .hm-step span { display: block; color: var(--muted); font-size: .66rem; margin-top: 6px; } .hm-tease .row { display: flex; gap: 10px; flex-wrap: wrap; } /* ── 9. Честность цены ── */ .hm-honest { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; } .hm-args { display: flex; flex-direction: column; gap: 12px; } .hm-arg { display: flex; gap: 12px; align-items: baseline; font-size: .9rem; } .hm-arg::before { content: '—'; color: var(--primary); font-weight: 800; } .hm-ledger { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; } .hm-ledger .cap { font: 800 .72rem/1.3 var(--head); text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .hm-ledger li { display: flex; justify-content: space-between; gap: 12px; list-style: none; padding: 6px 0; border-bottom: 1px dashed var(--border); font-size: .8rem; color: var(--muted); } .hm-ledger li:last-child { border-bottom: 0; } .hm-ledger li b { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; } .hm-vs { margin-top: 18px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .hm-vs .r { display: grid; grid-template-columns: 1fr 1fr; } .hm-vs .r > div { padding: 10px 14px; font-size: .8rem; border-top: 1px solid var(--border); } .hm-vs .r:first-child > div { border-top: 0; font: 800 .72rem/1.3 var(--head); text-transform: uppercase; } .hm-vs .r > div:first-child { background: var(--primary-soft); } .hm-vs .r > div:last-child { color: var(--muted); border-left: 1px solid var(--border); } /* ── 10. Кому это надо ── */ .hm-whom { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .hm-who { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: var(--tr); transition-property: var(--tr-ui); } .hm-who:hover { border-color: var(--primary); } /* Фото крупнее и кадр по верхней трети — низ карточек резался ужасно (Максим). */ .hm-who img { width: 100%; height: 170px; object-fit: cover; object-position: 50% 18%; border-radius: 9px; } .hm-who b { font-size: .86rem; } .hm-who span { color: var(--muted); font-size: .76rem; } /* ── 11. Живые люди ── */ .hm-people { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--surface); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 16px; padding: 20px; } .hm-people p { flex: 1; min-width: 260px; color: var(--muted); margin: 0; } .hm-people p b { color: var(--text); } /* ── 14. FAQ ── */ .hm-faq { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .hm-q { border-top: 1px solid var(--border); } .hm-q:first-child { border-top: 0; } .hm-q > button { width: 100%; text-align: left; display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; background: none; border: 0; color: var(--text); font: 600 .88rem/1.4 var(--font); cursor: pointer; } .hm-q > button { transition: background var(--tr); } .hm-q > button:hover { background: var(--surface-2); } /* Шеврон — SVG (лист стиля: иконки SVG, не глифы), 16px в правом поле карточки. */ .hm-q > button::after { content: ''; flex: none; width: 16px; height: 16px; opacity: .55; background: currentColor; transition: transform var(--tr); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; } .hm-q.open > button::after { transform: rotate(180deg); } .hm-q > div { padding: 0 16px 14px; color: var(--muted); font-size: .84rem; } /* ⚠️ Аудит 05.09: стрелка ехала плавно, а сам ответ схлопывался рывком — половина движения была, половина нет. Высота — единственное свойство, где у аккордеона нет замены через transform, и навык animate это допускает именно здесь. grid-template-rows анимируется корректно, в отличие от auto. */ .hm-q > div { display: grid; grid-template-rows: 1fr; } .hm-q > div > * { min-height: 0; overflow: hidden; margin: 0; } @media (prefers-reduced-motion: no-preference) { .hm-q > div { transition: grid-template-rows var(--tr), opacity var(--tr), padding var(--tr), visibility var(--tr); } } /* ⚠️ Ниже по файлу стоит страж `.hm [hidden]{display:none !important}` — он защищает от давней грабли проекта (display перебивает hidden). Аккордеону нужно исключение: скрытый ответ должен остаться в раскладке, чтобы схлопывание было видно. Поэтому здесь тоже !important, осознанно и точечно. */ /* visibility обязателен: без него исключение из стража возвращает скрытый ответ в дерево доступности — скринридер читал все восемь, а Ctrl+F находил невидимое (аудит 05.09). Visibility гаснет по завершении перехода, поэтому схлопывание остаётся видимым. */ .hm-q > div[hidden] { display: grid !important; grid-template-rows: 0fr; opacity: 0; visibility: hidden; padding-top: 0; padding-bottom: 0; overflow: hidden; } /* ── 15. Финал ── */ .hm-final { text-align: center; padding: 40px 16px 8px; } .hm-final .hm-h { font-size: clamp(1.6rem, 3vw, 2.4rem); } .hm-final .gbtn { margin-top: 14px; padding: 14px 34px; } .hm-final-ink .gbtn, .hm-final-ink .hm-ghost { margin-top: 0; } /* ── интерес («позовём») ── */ .hm-ghost.done { border-color: var(--good); color: var(--good); cursor: default; } /* ── мобилка ── */ @media (max-width: 860px) { .hm-audio, .hm-honest, .hm-teaser { grid-template-columns: 1fr; } .hm-insta { grid-template-columns: 1fr; } .hm-fan { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 14px 4px; -webkit-overflow-scrolling: touch; } .hm-fan .hm-card { margin: 0 6px 0 0; transform: none !important; height: 200px; } .hm-belt, .hm-film { margin: 10px calc(-1 * var(--поле)); } .hm-card { height: 175px; } .hm-voices { grid-template-columns: 1fr; } .hm-chain { grid-template-columns: repeat(2, 1fr); } .hm-step:not(:last-child)::after { display: none; } .hm-counters { gap: 10px; flex-direction: column; } } /* ── Сведение с макетом П32 (04.09, вечер) ────────────────────────────────── */ /* Хиро гостя — высокий, как в макете: почти экран, крупный заголовок. */ .hm-hero.tall { min-height: clamp(480px, 60vh, 640px); } .hm-hero.tall .heroin { padding-bottom: 44px; max-width: 760px; } .hm-hero.tall h1 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); } .hm-hero.tall .heroin > p:first-of-type { font-size: clamp(1.05rem, 1.25vw, 1.2rem); max-width: 560px; } .pane.home .hm-hero .heroin .hnote { font-size: .9rem; max-width: 600px; } .hm-apidoc { align-self: flex-start; font-size: .8rem; } /* Оранжевая «Спросить бесплатно» в шапке гостя. В тесной шапке (≤1080) прячем. */ .hm-topask { padding: 9px 14px; font-size: .72rem; } /* На телефоне кнопка остаётся (макет холста 15: пилюля «Спросить» в липкой шапке — на странице в 7 000 px у гостя должен быть CTA под рукой), только короче: длинную подпись прячет .hm-topask i. */ @media (max-width: 1080px) { .hm-topask { padding: 0 12px; font-size: .74rem; min-height: 44px; } .hm-topask i { display: none; } } .hm-topask i { font-style: normal; } /* Строка заголовка с легендой-капсулой (лента работ). */ .hm-headrow { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .hm-cap { background: var(--surface); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 6px 12px; font-size: .7rem; white-space: nowrap; } /* Ценник-капсула на карточках веера (по макету — цена лежит прямо на работе). */ .hm-tag { position: absolute; left: 10px; bottom: 10px; background: color-mix(in srgb, var(--bg) 82%, transparent); border: 1px solid var(--border-hi); border-radius: 999px; padding: 5px 10px; font: 700 .68rem/1 var(--font); color: var(--text); } /* Чат (макет 03/2): центрированный столбик — кикер, H2, подпись, мокап 860 по центру, под ним одна кнопка. Пузырь человека — графит, ответ — белый с аватаром-знаком, под ответом строка «цена · модель · Все модели →». */ .hm-chatwrap { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; } .hm-chatwrap > * { min-width: 0; } .hm-chatwrap .hm-sub { max-width: 640px; } .hm-chatbig { width: 100%; max-width: 860px; margin: 28px auto 24px; text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px; padding: 18px 20px 20px; box-shadow: var(--sh-lo); cursor: pointer; } .hm-chatbig:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .hm-chatbig .hm-msg { max-width: 72%; font-size: .9rem; line-height: 1.5; padding: 12px 16px; } .hm-chatbig .hm-msg.q { background: var(--ink); color: var(--on-ink); border-radius: 14px 14px 4px 14px; } .hm-chatbig .hm-msg.q .hm-file { color: var(--ink-muted); } .hm-chatbig .hm-msg.a { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 4px 14px 14px 14px; max-width: none; flex: 1; margin: 0; } .hm-arow { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; } .hm-aava { flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; } .hm-aava img { width: 20px; height: auto; filter: var(--лого-фильтр); } .hm-file { display: block; margin-top: 6px; font-size: .72rem; color: var(--primary-h); } .hm-chatbig ol { margin: 8px 0 0; padding-left: 18px; } .hm-chatbig ol li { margin: 6px 0; font-size: .84rem; color: var(--muted); } .hm-chatbig ol li b { color: var(--text); } .hm-ameta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 0 42px; font-size: .78rem; } .hm-ameta .pill { margin: 0; } .hm-ameta .hm-chip { margin: 0; background: var(--surface); } .hm-ameta .hm-tlink { font-size: .78rem; } .hm-ameta-r { margin-left: auto; margin-top: 0; line-height: 1.2; } .hm-composer { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 8px 12px 16px; margin-top: 16px; color: var(--faint); font-size: .88rem; } .hm-composer i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-fill); color: var(--on-primary); font-style: normal; } .hm-chatwrap .hm-ctarow { justify-content: center; } /* История списаний — подписи строк и шапка с пополнением (макет, холст 04). */ .hm-ledger .cap { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .hm-ledger .cap i { font-style: normal; text-transform: none; font-weight: 600; color: var(--good); font-size: .72rem; } .hm-ledger li span u { display: block; text-decoration: none; color: var(--faint); font-size: .68rem; margin-top: 2px; } /* Разделение секций: «не одним полотном» (Максим, 04.09) — чередуем полосы на всю ширину с лёгкой подложкой. Отступ между секциями теперь даёт min-height экрана (см. «общее» выше), второй margin-top тут не нужен. */ .hm-band { margin-left: calc(-1 * var(--поле)); margin-right: calc(-1 * var(--поле)); padding: 36px var(--поле) 40px; border-block: 1px solid var(--border); background: var(--surface-2); } .hm-band + .hm-band { border-top: 0; } /* Подвал: реквизиты не бледнее --muted (макет + аудит про контраст 3,53). */ /* var(--muted) на графите подвала — 2,31:1: реквизиты и юр-ссылки нечитаемы (придирки, выкат Г). На тёмном приглушаем светлым, а не тёмным. */ .hfoot .hflegal, .hfoot .hflegal a, .hfoot .hflegal span { color: color-mix(in srgb, var(--on-ink) 72%, var(--ink)); } @media (max-width: 1100px) { .hm-island-vid { grid-template-columns: minmax(0, 1fr) 340px; } } @media (max-width: 860px) { .hm-hero.tall { min-height: 60vh; } .hm-chatbig .hm-msg { max-width: 92%; } .hm-ameta { margin-left: 0; } .hm-ameta-r { margin-left: 0; width: 100%; } .hm-cap { display: none; } /* Бриф: «Лента работ — свайп». Вечная анимация на таче — лотерея вместо клика, поэтому полосы скроллятся пальцем, дубль состава не рисуем (JS). */ /* На таче лента листается пальцем — десктопная маска затухания гасила первую карточку. */ .hm-belt { -webkit-mask-image: none; mask-image: none; } .hm-row { padding-inline: var(--поле); } /* Кнопки Главной на телефоне — во всю ширину, одна ширина на всех экранах. */ .hm-hero .herorow .gbtn, .hm-hero .herorow .hm-ghost, .hm-people-text .hm-ctarow .gbtn, .hm-people-text .hm-ctarow .hm-ghost, .hm-final-ink .hm-ctarow .gbtn, .hm-final-ink .hm-ctarow .hm-ghost, .hm-money .hm-ctarow .gbtn { width: 100%; } .hm-belt, .hm-film { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .hm-belt::-webkit-scrollbar, .hm-film::-webkit-scrollbar { display: none; } .hm-row, .hm-filmrow { animation: none; } /* Дубль состава нужен только бегущей ленте: на таче она свайпается, и вторая копия карточек была бы просто лишней прокруткой. Решение принимает ТОТ ЖЕ медиазапрос, что глушит анимацию (аудит 05.09). */ .hm-ghostrow { display: none; } .hm-card figcaption { font-size: .74rem; } .hm-fan { margin-inline: calc(-1 * var(--поле)); padding-inline: var(--поле); scrollbar-width: none; } .hm-fan::-webkit-scrollbar { display: none; } /* Тап-цели не мельче 44px. */ .hm-pill, .hm-ghost, .hm-docbtn { min-height: 44px; } .hm-ghost { display: inline-flex; align-items: center; justify-content: center; } } /* Композер-мокап чата выглядит полем ввода — пусть и ведёт в чат. */ .hm-composer { cursor: pointer; } /* Гость оставил интерес: мягко зовём войти, без стены. */ .hm-int-note { display: block; width: 100%; color: var(--faint); font-size: .74rem; margin-top: 4px; } .hm-int-note a { color: var(--primary-h); } /* ── Починка по живым замечаниям Максима (04.09, поздний вечер) ──────────── */ /* ⚠️ Классика проекта (шестой раз): наши display:flex/grid перебивали [hidden] — в Презентациях светились ОБЕ кнопки. Страж на всю витрину. */ .hm-sec [hidden], .hm [hidden] { display: none !important; } /* Календарь контент-плана: aspect-ratio ячеек распирал сетку за карточку. Ячейки прямоугольные (как в макете), ряды делят высоту, ничего не вылезает. */ .hm-cal { grid-auto-rows: 1fr; overflow: hidden; min-height: 0; } .hm-cal i { aspect-ratio: auto; min-height: 34px; } /* Телефону — корпус: тёмная рамка, чёлка, кнопка. Экран остаётся .hm-phone. */ .hm-phonebody { background: var(--ink); border: 1px solid var(--border-hi); border-radius: 30px; padding: 12px 10px 14px; flex: 1; display: flex; flex-direction: column; position: relative; box-shadow: var(--sh); } .hm-phonebody::before { content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 74px; height: 5px; border-radius: 3px; background: var(--ink-2); } .hm-phonebody .hm-phone { border-radius: 18px; border: 1px solid var(--border); } /* ── API: те же модели в вашем коде (макет П33б, холст 9) ─────────────────── Экспонат секции — код, а не картинка. Значения сняты с макета один в один (.apcode, .aptag, .hmprice в П33б). Классы .ap* здесь одеваем сами: api.css на Главную не приезжает — файлы раздела грузятся только при заходе в него, и до первого захода капсулы стояли бы голым текстом. */ .hm-api { max-width: 720px; } /* ⚠️ Шрифт задан списком, а не var(--mono): такого токена в ai.css нет — он объявлен только на body.apdpage публичной страницы /api. Список тот же, поэтому код на Главной и в разделе выглядит одинаково. */ .hm-code { border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); } .hm-code pre { margin: 0; padding: 14px 16px; font-size: .82rem; line-height: 1.55; color: var(--text); overflow-x: auto; white-space: pre; scrollbar-width: thin; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .hm-taglist { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; } .hm-api .aptag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-hi); font-size: .72rem; color: var(--muted); white-space: nowrap; background: transparent; } /* «Скоро» — нейтральная, не оранжевая: оранжевых капсул на экране максимум две, и здесь это не выбор человека, а состояние раздела (янтаря в палитре П34 нет — недоступное читается серым, как чип «недоступен» на листе стиля). */ .hm-api .aptag.warn { color: var(--muted); border-color: var(--border-hi); background: var(--surface-hi); } .hm-api .hm-price { margin: 20px 0 0; font-variant-numeric: tabular-nums; } /* Ряд кнопок отбит от строки цен на 20 px — как в макете. */ .hm-api .hm-ctarow { margin-top: auto; padding-top: 12px; } /* «Документация» — настоящая ссылка на страницу /api, а не кнопка: .hm-ghost рассчитан на