/* ============================================================================ Слой сайта. Дизайн-система здесь одна — продуктовая (style.css, загружен выше). Этот файл не добавляет к ней ни цвета, ни тени, ни шрифта. Он делает ровно одно: разводит два голоса, чтобы рамка была видна всегда. · голос сайта — моноширинный, разрежённый, с широкими полями и номерами тактов в поле слева. Так говорят подписи к экспонату. · голос продукта — тот же, что в продукте: IBM Plex Sans, плотно, без единого слова от сайта внутри. Отсюда всё остальное: сайт набран моноширинным не «для стиля», а потому что как только подпись сайта наберётся продуктовым шрифтом, гость перестанет различать, кто с ним говорит, и витрина начнёт врать. ============================================================================ */ html, body { height: auto; } body { font-family: var(--mono); font-size: 13px; line-height: 1.62; background: var(--bg); color: var(--text); } .wrap { max-width: 1320px; margin: 0 auto; padding: 0 40px; } /* Тихие серые слоя сайта. Продуктовые токены --dim / --label / --muted дают на этом фоне 2,0–3,3 по WCAG: в панели они держат ярлыки внутри плотных таблиц, где рядом всегда есть опора, а на длинной странице ими набраны целые предложения — и «ДАННЫЕ ВЫДУМАНЫ», строчка, ради которой вся витрина честна. Поэтому сайт берёт те же тона на пару ступеней светлее: 4,5 для текста, 3,0 для крупных цифр. Цвета не прибавилось, сдержанности не убавилось — прибавилось только читаемости. Проверено расчётом контраста, а не на глаз. */ :root { --site-quiet: #717c89; /* 4.56 : 1 — предложения, набранные тихо */ --site-idx: #57606a; /* 3.03 : 1 — номера тактов и разделов, 34 px */ --site-quiet-s1: #747f8d; /* 4.55 : 1 на светлой подложке карточки кода */ } /* Голос сайта: caps-метка, номер такта, тихая строка. */ .eyebrow { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--site-quiet); } .note { font-size: 12.5px; color: var(--sec); } .quiet { font-size: 12px; color: var(--site-quiet); } .lede { font-size: 15px; line-height: 1.7; color: var(--sec); } .hl { color: var(--text); } h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } /* Заголовки — единственное место, где сайт берёт продуктовый шрифт: фраза такой длины моноширинным читается как машинный вывод, а не как речь. */ .title { font-family: var(--sans); font-size: 46px; line-height: 1.12; letter-spacing: -.03em; } .title-2 { font-family: var(--sans); font-size: 27px; line-height: 1.25; letter-spacing: -.025em; } .title-3 { font-family: var(--sans); font-size: 18px; letter-spacing: -.015em; } /* ------------------------------------------------------------- шапка ---- */ .top { position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: 96px 1fr auto; gap: 28px; align-items: center; height: 56px; padding: 0 40px; background: rgba(11, 14, 17, .93); border-bottom: 1px solid var(--line-soft); backdrop-filter: blur(6px); } .top-mark { font-size: 12px; letter-spacing: .16em; } .top-frame { font-size: 11.5px; color: var(--site-quiet); letter-spacing: .04em; } .top-nav { display: flex; gap: 18px; align-items: center; font-size: 11.5px; } .top-nav a { color: var(--sec); } .top-nav a:hover { color: var(--text); } .lang { display: flex; border: 1px solid var(--border-out); border-radius: 2px; overflow: hidden; } .lang span, .lang a { padding: 3px 9px; font-size: 11px; } .lang .is-on { background: var(--s3); color: var(--text); } .lang a { color: var(--site-quiet); } /* -------------------------------------------------------------- герой --- */ .hero { padding-top: 104px; padding-bottom: 88px; display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 64px; align-items: center; } .hero-badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 26px; } .hero-badges .eyebrow + .eyebrow::before { content: "·"; margin-right: 10px; color: var(--nodata); } .hero .title { margin-bottom: 22px; } .hero .lede { max-width: 46em; } .hero-cta { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; } .hero-facts { margin-top: 40px; display: flex; flex-direction: column; gap: 9px; } .hero-facts li { display: flex; gap: 11px; align-items: baseline; font-size: 12.5px; color: var(--sec); } .hero-facts i { width: 5px; height: 5px; border-radius: 50%; background: var(--nodata); flex: none; transform: translateY(-2px); } /* Кнопки сайта — те же, что в продукте, но моноширинные: даже кнопка не должна притворяться кнопкой панели. */ .act { font-family: var(--mono); font-size: 12.5px; padding: 11px 18px; border-radius: 3px; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; transition: background .12s, border-color .12s, color .12s; } .act-main { background: var(--acc); color: var(--acc-ink); font-weight: 500; } .act-main:hover { background: var(--acc-hi); color: var(--acc-ink); } .act-alt { border-color: var(--border); color: var(--text); background: none; } .act-alt:hover { border-color: var(--acc); color: var(--acc); } /* ------------------------------------------------------------- разделы -- */ .band { padding-top: 88px; padding-bottom: 88px; border-top: 1px solid var(--line-soft); } .band-head { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 32px; align-items: start; } .idx { font-size: 34px; line-height: 1; color: var(--site-idx); letter-spacing: -.02em; } .band-body { display: flex; flex-direction: column; gap: 18px; max-width: 78ch; } /* ---------------------------------------------------------------- тур --- */ /* Стенд занимает всю ширину, пояснения идут под ним. Так вышло не из вкуса, а из устройства панели: её адаптив считает ширину ОКНА, а не своего контейнера. В колонке на 900 px она осталась бы в десктопной раскладке и просто сплющилась — гость увидел бы не продукт, а продукт в тисках. Экспонату отдана вся ширина, подписи ушли вниз, в ту же сетку «поле · текст», что и у остальных разделов страницы. */ .tour { max-width: 1520px; padding-bottom: 40px; } .tour-stand { position: sticky; top: 64px; height: 70vh; min-height: 520px; display: flex; flex-direction: column; gap: 9px; z-index: 10; background: var(--bg); padding-bottom: 10px; } .frame-label { display: flex; align-items: baseline; gap: 14px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--site-quiet); } .frame-label b { font-weight: 400; color: var(--text); } .frame-label b::before { content: "· "; color: var(--nodata); } /* Рамка стенда. contain:paint делает её точкой отсчёта для position:fixed внутри — слои и модалки продукта остаются в панели, а не накрывают сайт. Это ровно то, чего требует правило «рамка видна всегда». */ .stand { flex: 1; min-height: 0; position: relative; contain: layout paint; border: 1px solid var(--border-out); border-radius: 5px; overflow: hidden; background: var(--bg-work); font-family: var(--sans); line-height: normal; } .stand #app { height: 100%; } .stand .veil, .stand .layer, .stand .modal-wrap, .stand .toasts { position: absolute; } .stand .modal-wrap { padding: 16px; } .stand .toasts { top: 12px; right: 12px; max-width: 320px; } /* Без JS и при упавшем стенде рамка складывается: пустая коробка в 70vh разрывала бы текст тура, а рассказывать он умеет и сам. */ .no-js .tour-stand, .stand-down .tour-stand { position: static; height: auto; min-height: 0; } .no-js .stand, .stand-down .stand { height: 132px; flex: none; } /* Кадры для версии без JS. Внутри