/* Сайт Inkling — один файл стилей на весь сайт. * * Цвета, кегли и отступы не пишутся числами по месту: наверху стоят токены, * ниже только var(). * * Белая основа: страница белая, полосы разделов овсяные, охра — только * на малых площадях (подсветка термина, чипы, подчёркивание ссылки). * Охра как текст запрещена: контраст 1,93 : 1. * * Ни одного обращения на чужой сервер: шрифты системные с попыткой поднять * Fraunces и Inter, если они у человека стоят. Скриптов нет ни одного. * * Откуда взяты палитра, шкалы и разметка — сказано в описании сборщика. * Здесь этих ссылок нет намеренно: файл грузится каждой страницей, а пути * к внутренним документам и рабочие заметки на живом сайте читает кто угодно. */ :root { /* ── палитра, creative-spec §3 ── */ --ink-bg-page: #FFFFFF; --ink-bg-oat: #F7F2E8; --ink-bg-sand: #F0E7D6; --ink: #1F2733; --ink-muted: #4A5666; --ink-ochre: #E8A33D; --ink-ochre-soft: #F4D9A6; --ink-rule: #DDD4C3; /* ── кегли: четырнадцать ступеней ── */ --t-1: 0.75rem; --t-2: 0.875rem; --t-3: 0.9375rem; --t-4: 1rem; --t-5: 1.125rem; --t-6: 1.25rem; --t-7: 1.375rem; --t-8: 1.625rem; --t-9: 2rem; --t-10: 2.625rem; --t-11: 3.375rem; /* ── интерлиньяж берётся из той же сетки, что и поля ── */ --l-1: 1rem; --l-2: 1.25rem; --l-3: 1.5rem; --l-4: 1.75rem; --l-5: 1.875rem; --l-6: 2rem; --l-7: 2.5rem; --l-8: 3rem; /* ── отступы: та же сетка ── */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3.5rem; /* значок App Store: 40 px — минимум Apple для экрана; ниже нельзя */ --store-badge-h: 2.5rem; /* логотип: лок-ап 28 px в шапке, 20 px в подвале — размеры из макета; зона покоя вокруг — половина высоты, её дают отступы шапки и подвала */ --logo-h: 1.75rem; --logo-h-small: 1.25rem; /* высота закреплённой шапки: от неё считается отступ якорей */ --head-h: 4.5rem; /* тень карточки на схеме — единственная тень на сайте */ --shadow-card: 0 4px 14px rgba(31, 39, 51, 0.08); /* схема карточки: расстояние от текста выноски до карточки (линия + зазор) */ --anat-gap: 5rem; /* окно экрана в рамке iPhone — доли от рамки; подставляет сборщик из JSON рядом с рамкой, руками здесь ничего не пишется */ --frame-w: 1350; --frame-h: 2760; --frame-win-left: 5.333%; --frame-win-top: 2.500%; --frame-win-width: 89.333%; --frame-win-height: 95.000%; --frame-win-rx: 15.423%; --frame-win-ry: 7.094%; /* ── скругления ── */ --r-1: 4px; --r-2: 6px; --r-3: 10px; --r-4: 14px; --r-pill: 999px; /* ── сетка ── */ --col-text: 680px; --col-wide: 1080px; /* ── гарнитуры ── */ --font-voice: Fraunces, "Iowan Old Style", "Palatino Linotype", Georgia, serif; --font-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ink-bg-page); color: var(--ink); font-family: var(--font-ui); font-size: var(--t-5); line-height: var(--l-4); font-weight: 400; /* Слово длиннее экрана — единственный перелив, который не ловится сито по стилям и разметке: связка без пробелов на 375 px давала 915 px. Это решение по типографике, а не заплатка: слово, которому не хватает строки, рвётся, а не выталкивает тело страницы вбок. Проверка стережёт это правило здесь, на body. */ overflow-wrap: anywhere; } /* Письменности без пробелов. Корейский переносится по словам — между пробелами (`keep-all`), а не посреди слога; японский — по знакам, со строгими правилами кинсоку (знак препинания не начинает строку). Слово длиннее строки в обоих рвётся, как везде: `overflow-wrap: anywhere` на body наследуется, перелива вбок не бывает. Язык страницы — ``. */ :lang(ko) { word-break: keep-all; } :lang(ja) { word-break: normal; line-break: strict; } .skip { position: absolute; left: -9999px; } .skip:focus { left: var(--s-4); top: var(--s-4); z-index: 10; background: var(--ink); color: var(--ink-bg-oat); padding: var(--s-2) var(--s-4); border-radius: var(--r-2); } .wrap { max-width: var(--col-wide); margin: 0 auto; padding: 0 var(--s-5); } /* ─── шапка ─── */ /* Закреплена при прокрутке: фон и тонкая линия снизу, чтобы страница под ней не просвечивала. Якоря отступают от неё на --head-h (ниже). */ .head { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--ink-rule); background: var(--ink-bg-page); } .head__row { display: flex; align-items: center; gap: var(--s-6); min-height: var(--head-h); flex-wrap: wrap; } /* Значок App Store справа в шапке — правка владельца. Отступ значка сверху, нужный ему в колонке текста, в строке шапки не нужен. */ .head__store { margin-left: auto; line-height: 0; } .head__store .store--badge { margin-top: 0; } .head__nav + .head__store, .head__langs + .head__store { margin-left: 0; } /* Цель перехода по якорю — не под закреплённой шапкой. */ .sect, .term, main { scroll-margin-top: calc(var(--head-h) + var(--s-4)); } /* Логотип — инлайн-SVG, залит currentColor: цвет берёт у хозяина (--ink). line-height: 0 — чтобы строчная коробка не добавляла воздуха под знаком. */ .brand { display: inline-flex; color: var(--ink); box-shadow: none; line-height: 0; } .brand:hover { background: none; } .logo { display: block; height: var(--logo-h); width: auto; fill: currentColor; } .logo--small { height: var(--logo-h-small); } .head__nav { display: flex; gap: var(--s-5); flex-wrap: wrap; margin-left: auto; min-width: 0; } .head__nav a, .head__langs a { color: var(--ink); box-shadow: none; font-size: var(--t-3); } .head__nav a:hover, .head__langs a:hover { box-shadow: inset 0 -2px 0 var(--ink-ochre); } .head__nav a.is-here { box-shadow: inset 0 -2px 0 var(--ink-ochre); } /* Переключатель языков — `
`: свёрнут — один ярлык текущего языка пилюлей, раскрыт — список всех написанных языков под ним, текущий выделен охряной чертой, как пункт навигации. Без скриптов: раскрытие — родное поведение браузера. Общие правила `details`/`summary` (вопросы FAQ) здесь сняты: в шапке ни линии сверху, ни отступов блока. */ .head__langs { position: relative; margin: 0; border: 0; padding: 0; font-size: var(--t-2); color: var(--ink); } .head__langs > summary { list-style: none; font-weight: 500; font-size: var(--t-2); padding: var(--s-1) var(--s-3); border: 1px solid var(--ink-rule); border-radius: var(--r-pill); line-height: var(--l-2); } .head__langs > summary::-webkit-details-marker { display: none; } .head__langs[open] > summary { border-color: var(--ink); } .head__langs__list { position: absolute; right: 0; top: calc(100% + var(--s-1)); z-index: 30; margin: 0; padding: var(--s-2); list-style: none; min-width: 6rem; background: var(--ink-bg-page); border: 1px solid var(--ink-rule); border-radius: var(--r-3); } .head__langs__list li { margin: 0; } .head__langs__list a, .head__langs__list b { display: block; padding: var(--s-1) var(--s-2); font-size: var(--t-3); font-weight: 400; color: var(--ink); box-shadow: none; } .head__langs__list a:hover { background: var(--ink-bg-oat); box-shadow: none; } .head__langs__list .is-here { box-shadow: inset 0 -2px 0 var(--ink-ochre); } /* ─── разделы ─── */ .sect { padding: var(--s-7) 0; } .sect--band { background: var(--ink-bg-oat); } /* Раздел с отбивкой: больше воздуха снизу и линия во всю ширину — как у подвала. Блок колод на главной стоит перед закрывающим экраном, оба на белом, и без линии чипы сливались с афишей (правка владельца). */ .sect--rule { padding-bottom: var(--s-8); border-bottom: 1px solid var(--ink-rule); } /* Текстовые блоки держат колонку 680 px; сетки, полосы чипов и герой шире * по построению — им ширина задаётся именем, а не «*», иначе `.hero` * проигрывает по весу селектора и герой ужимается до колонки текста. */ .sect > .wrap > * { max-width: var(--col-text); } .sect > .wrap > .hero, .sect > .wrap > .anat, .sect > .wrap > .bridge-app, .sect > .wrap > .grid, .sect > .wrap > .tablewrap, .sect > .wrap > .chips--strip, .sect > .wrap > .feats, .sect > .wrap > .topics, .sect > .wrap > .figure--wide { max-width: var(--col-wide); } .sect--wide > .wrap > * { max-width: none; } h1 { font-family: var(--font-voice); font-weight: 600; font-size: var(--t-10); line-height: var(--l-7); margin: 0 0 var(--s-4); max-width: 18ch; } h2 { font-family: var(--font-voice); font-weight: 600; font-size: var(--t-8); line-height: var(--l-6); margin: 0 0 var(--s-4); } h3 { font-family: var(--font-voice); font-weight: 600; font-size: var(--t-6); line-height: var(--l-4); margin: 0 0 var(--s-2); } p { margin: 0 0 var(--s-4); } p:last-child { margin-bottom: 0; } a { color: var(--ink); text-decoration: none; box-shadow: inset 0 -2px 0 var(--ink-ochre); } a:hover { background: var(--ink-ochre-soft); } .prose, .lead { max-width: var(--col-text); } .lead { font-size: var(--t-6); line-height: var(--l-6); } .sub { color: var(--ink-muted); font-size: var(--t-3); line-height: var(--l-4); } /* ─── герой ─── */ .hero { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: var(--s-7); align-items: start; max-width: none; } .hero__text { max-width: var(--col-text); } .hero__art .device { margin: 0 auto; } /* Заголовок занимает всю ширину, иллюстрация начинается на уровне текста под ним, а не заголовка (правка владельца на главной; та же сетка у шапки и блока письма на «Компаниям»). */ .hero--wide-title { row-gap: var(--s-4); } .hero--wide-title > h1, .hero--wide-title > h2 { grid-column: 1 / -1; margin-bottom: 0; } /* ─── мост к приложению: текст и кадр в рамке ─── */ .bridge-app { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--s-7); align-items: center; } .bridge-app__text { max-width: var(--col-text); } .bridge-app .device { justify-self: center; } /* ─── кадр телефона в рамке iPhone ─── */ /* Так стоит каждый кадр приложения (правка владельца, сентябрь 2026): мост и афиша главной, пара кадров в разборе, одиночные на /ru/app/ — одна конструкция. Кадр лежит в окне рамки по долям из JSON (подставляет сборщик); рамка поверх. Окно прозрачное насквозь до угла корпуса, поэтому кадр режется скруглением экрана — иначе его прямые углы вылезли бы за корпус. Пропорция рамки — у коробки `device__box`, а не у figure: подпись, если есть, стоит под коробкой. */ .device { width: 100%; max-width: 17rem; margin: 0; } .device__box { position: relative; aspect-ratio: var(--frame-w) / var(--frame-h); } .device__frame { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; background: none; pointer-events: none; } .device__shot, .device .shot__pending { position: absolute; left: var(--frame-win-left); top: var(--frame-win-top); width: var(--frame-win-width); height: var(--frame-win-height); border-radius: var(--frame-win-rx) / var(--frame-win-ry); object-fit: cover; aspect-ratio: auto; } /* ─── иллюстрации ─── */ figure { margin: 0 0 var(--s-5); } figure img, figure video { display: block; width: 100%; height: auto; border-radius: var(--r-4); background: var(--ink-bg-oat); } figcaption { color: var(--ink-muted); font-size: var(--t-2); line-height: var(--l-3); margin-top: var(--s-2); } .figure--wide { max-width: var(--col-wide); } .figure--hero { margin-bottom: 0; } /* Перебивка во всю ширину окна (/ru/app/): раздел без колонки, картинка от края до края тела страницы, высота зажата — это пауза, а не экран. */ .sect--bleed { padding: 0; } .figure--bleed { margin: 0; } .figure--bleed img { width: 100%; height: clamp(240px, 36vw, 480px); object-fit: cover; border-radius: 0; } /* ─── чипы ─── */ .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-4); } .chips--strip { max-width: none; } .chip { display: inline-block; background: var(--ink-ochre-soft); color: var(--ink); border-radius: var(--r-pill); padding: var(--s-1) var(--s-3); font-size: var(--t-2); line-height: var(--l-2); box-shadow: none; } .chip:hover { background: var(--ink-ochre); } .chip--big { font-size: var(--t-3); padding: var(--s-2) var(--s-4); } /* ─── блок термина ─── */ .terms { max-width: var(--col-text); } .term { padding: var(--s-5) 0; border-top: 1px solid var(--ink-rule); } .term__head, .anat__term { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); } .term__ru { box-shadow: inset 0 -0.45em 0 var(--ink-ochre-soft); } .term__en { font-family: var(--font-ui); font-weight: 400; font-size: var(--t-3); color: var(--ink-muted); } .def { margin-bottom: var(--s-3); } .live { font-style: italic; color: var(--ink-muted); border-left: 2px solid var(--ink-rule); padding-left: var(--s-4); } .term__more { text-align: right; font-size: var(--t-3); } .group { margin-top: var(--s-7); font-family: var(--font-ui); font-size: var(--t-2); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); } .group--rest { font-style: normal; } /* ─── кадры телефона ─── */ .shots { display: flex; gap: var(--s-4); flex-wrap: wrap; margin: var(--s-5) 0; } /* Пара кадров в разборе. Рамка шире экрана на долю окна из JSON рамки, поэтому кадр в рамке — 19.5rem: сам экран остаётся прежних ~280 px. Пара в колонке 680 умещается (2 × 312 + отступ), на 375 кадры встают в столбик, каждый уже колонки (327 px). */ .shots .device { flex: 1 1 15rem; max-width: 19.5rem; } /* Одиночный кадр прямо в колонке (/ru/app/): правило колонки `.sect > .wrap > *` тяжелее по селектору и растягивало кадр телефона на всю ширину текста (680px). Кадр — ширины телефона, как в мосте главной. */ .sect > .wrap > .device { max-width: 17rem; } .shot__pending { aspect-ratio: 9 / 19.5; border: 2px dashed var(--ink-rule); border-radius: var(--r-4); background: var(--ink-bg-oat); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); color: var(--ink-muted); text-align: center; padding: var(--s-4); } .shot__pending span { font-size: var(--t-3); } .shot__pending code { font-size: var(--t-1); word-break: break-all; } /* ─── сцена ─── */ .scene { border-left: 3px solid var(--ink-ochre); padding: var(--s-2) 0 var(--s-2) var(--s-5); max-width: var(--col-text); } .scene__cap { font-size: var(--t-2); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); } .scene__line { margin-bottom: var(--s-3); } /* Реплика, отвечающая предыдущей: сдвиг и короткая линия слева. Это разметка ветки комментариев, а не диалога двух людей. */ .scene__line--reply { margin-left: var(--s-5); padding-left: var(--s-4); border-left: 2px solid var(--ink-rule); } .scene__line b { font-weight: 600; } /* Термин разбора в реплике — охра на слове, как у термина в блоке и на афише: носитель ограниченной площади, текст остаётся чернильным. Браузерную жёлтую заливку снимаем. */ .scene__term { background: none; color: inherit; box-shadow: inset 0 -0.45em 0 var(--ink-ochre); } /* Сцена в шапке главной: те же классы сцены, что на разборе, плюс ссылка на весь разбор под ней. */ .hero__scene { margin: var(--s-5) 0; } /* Ссылка на весь разбор — кнопка-призрак (обводка без заливки), а не сноска мелким: она зовёт читать дальше, это действие (правка владельца). Стили кнопки — ниже, вместе с `.btn`; разметка ссылки не менялась. */ .scene__more { margin: var(--s-4) 0 0; } /* ─── сетки карточек ─── */ .grid { display: grid; gap: var(--s-5); max-width: var(--col-wide); } .grid--1 { grid-template-columns: minmax(0, 1fr); max-width: var(--col-text); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .rcard, .dcard { display: block; box-shadow: none; border: 1px solid var(--ink-rule); border-radius: var(--r-4); padding: var(--s-4); background: var(--ink-bg-page); } .rcard:hover, .dcard:hover { background: var(--ink-bg-oat); } .rcard__cover { width: 100%; height: auto; border-radius: var(--r-3); margin-bottom: var(--s-3); } .rcard__title, .dcard__title { font-size: var(--t-5); } .rcard__chips, .dcard__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); } .rcard__deck, .dcard__count { color: var(--ink-muted); font-size: var(--t-2); margin-bottom: 0; } .ccard { border: 1px solid var(--ink-rule); border-radius: var(--r-4); padding: var(--s-4); background: var(--ink-bg-page); } .ccard__icon { display: block; margin-bottom: var(--s-3); } .form { border: 1px solid var(--ink-rule); border-radius: var(--r-4); padding: var(--s-5); background: var(--ink-bg-page); } /* ─── разметка карточки по макету ─── */ /* Карточка посередине, выноски по сторонам; линии-указки упираются в обводку карточки. Выноска стоит в той же строке сетки, что и часть карточки, на которую указывает: карточка отдаёт свои строки общей сетке (`subgrid`), и текст любой длины не сдвигает указку с её части. */ .anat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 25rem) minmax(0, 1fr); grid-template-rows: repeat(10, auto); column-gap: var(--anat-gap); align-items: start; max-width: var(--col-wide); margin: var(--s-5) auto; } .anat__card { grid-column: 2; grid-row: 1 / span 10; display: grid; grid-template-rows: subgrid; border: 1px solid var(--ink-rule); border-radius: var(--r-4); background: var(--ink-bg-page); box-shadow: var(--shadow-card); padding: var(--s-5); } .anat__top { grid-row: 1; display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-4); } .anat__pill { display: inline-block; background: var(--ink-bg-sand); color: var(--ink-muted); border-radius: var(--r-pill); padding: var(--s-1) var(--s-3); font-size: var(--t-1); line-height: var(--l-2); font-weight: 500; } .anat__audio { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ink-bg-sand); color: var(--ink-muted); } .anat__audio svg { width: 1.0625rem; height: 1.0625rem; } /* метка языка над термином — как в кадре приложения: мелко, капителью, разрядкой */ .anat__lang { grid-row: 2; font-size: var(--t-1); line-height: var(--l-1); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--s-1); } .anat__term { grid-row: 3; font-size: var(--t-7); line-height: var(--l-6); margin: 0 0 var(--s-2); } .anat .def { grid-row: 4; font-size: var(--t-3); line-height: var(--l-3); } .anat .live { grid-row: 5; font-size: var(--t-3); line-height: var(--l-3); margin-bottom: var(--s-4); } .anat__sep { grid-row: 6; border: 0; border-top: 1px solid var(--ink-rule); margin: 0 0 var(--s-4); } .anat__lang--en { grid-row: 7; } .anat__term--en { grid-row: 8; font-size: var(--t-6); line-height: var(--l-5); } .anat .def--en { grid-row: 9; } .anat .live--en { grid-row: 10; margin-bottom: 0; } /* выноски: список отдаёт пункты сетке, каждый пункт — в строке своей части */ .anat__legend { display: contents; margin: 0; padding: 0; list-style: none; } .anat__label { position: relative; display: block; max-width: 15rem; font-weight: 500; font-size: var(--t-3); line-height: var(--l-3); padding-top: var(--s-1); } .anat__label::after { content: ""; position: absolute; top: calc(var(--s-1) + var(--l-3) / 2); width: 4.375rem; height: 1px; background: var(--ink-rule); } .anat__label--term, .anat__label--term-en { grid-column: 1; justify-self: end; text-align: right; } .anat__label--term::after, .anat__label--term-en::after { right: calc(-1 * var(--anat-gap)); } .anat__label--audio, .anat__label--definition, .anat__label--example { grid-column: 3; justify-self: start; } .anat__label--audio::after, .anat__label--definition::after, .anat__label--example::after { left: calc(-1 * var(--anat-gap)); } .anat__label--term { grid-row: 3; } .anat__label--term-en { grid-row: 8; } .anat__label--audio { grid-row: 1; padding-top: calc(var(--s-5) + var(--s-1)); } /* у этой выноски отступ сверху больше (строка с кнопкой начинается под полем карточки), и указка считается от него же — иначе она висит над кнопкой */ .anat__label--audio::after { top: calc(var(--s-5) + var(--s-1) + var(--l-3) / 2); } .anat__label--definition { grid-row: 4; } .anat__label--example { grid-row: 5; } /* ─── плашка приложения и врезка ─── */ .plaque { display: grid; gap: var(--s-3); justify-items: start; } .plaque__line { font-family: var(--font-voice); font-size: var(--t-7); margin: 0; } .callout { background: var(--ink-bg-sand); border-radius: var(--r-4); padding: var(--s-6); max-width: var(--col-text); } .store { display: inline-block; margin: 0; } .btn, .scene__more a { display: inline-block; background: var(--ink); color: var(--ink-bg-oat); border-radius: var(--r-2); padding: var(--s-3) var(--s-5); box-shadow: none; font-size: var(--t-3); } .btn:hover { background: var(--ink-muted); color: var(--ink-bg-oat); } /* Значок App Store — единственная форма перехода в магазин (все), артворк Apple как есть: ни фона, ни рамки, ни тени, ничего на наведении (правило Apple: не менять, не наклонять, не анимировать). Серая рамка внутри файла — часть артворка. Охранное поле — четверть высоты; отступ сверху даёт его с запасом, слева его даёт колонка, плашка и врезка. */ .store--badge { padding: 0; background: none; line-height: 0; margin-top: var(--s-5); /* Подчёркивание ссылок сайта — охряный inset box-shadow у `a` — под значком не стоит (владелец увидел линию под значком в шапке и в афише); текстового подчёркивания и рамки у якоря тоже нет, и на наведении ничего не появляется. */ box-shadow: none; text-decoration: none; border-bottom: 0; } .store--badge:hover { background: none; box-shadow: none; } .store--badge img { display: block; height: var(--store-badge-h); width: auto; } .btn--ghost, .scene__more a { background: transparent; color: var(--ink); border: 1px solid var(--ink); } .btn--ghost:hover, .scene__more a:hover { background: var(--ink-bg-oat); color: var(--ink); } .store--off { display: block; border: 1px dashed var(--ink-rule); border-radius: var(--r-3); padding: var(--s-4); color: var(--ink-muted); font-size: var(--t-3); max-width: var(--col-text); } .store--off b { color: var(--ink); } .strip { font-family: var(--font-voice); font-size: var(--t-8); line-height: var(--l-6); } .hl { font-family: var(--font-voice); font-weight: 600; font-size: var(--t-10); line-height: var(--l-7); margin-bottom: var(--s-3); } .hl > span { box-shadow: inset 0 -0.4em 0 var(--ink-ochre); } /* Термин вне интерфейса — как цитата в журнале: за ним на фоне большая охряная открывающая кавычка (правка владельца, сентябрь 2026). Одна, только открывающая, „ шрифтом заголовков; охра из токена, бледная — лежит под текстом, а не рядом. Изолированный контекст — чтобы уйти под термин, а не под страницу. Ширины у неё нет: абсолютная, без размера. Стоит слева-сверху от термина, целиком (правка владельца: у базовой линии её закрывала охряная подсветка): за левый край текста — на половину своей ширины (0.15 em при 4 em ≈ 25 px на 1280, ≈ 21 px на 375 — в поле колонки 24 px, перелива нет), низ глифа — у верха строки термина. */ .hl { position: relative; isolation: isolate; } .hl::before { content: "\201E"; position: absolute; left: -0.15em; top: -0.95em; z-index: -1; font-family: var(--font-voice); font-weight: 600; font-size: 4em; line-height: 1; color: var(--ink-ochre); opacity: 0.45; pointer-events: none; } /* ─── /ru/app/: ряды «что умеет», веер тем, три шага дня ─── */ /* Ряд: текст и кадр в рамке; через ряд — местами. Ряды делит линия, не фон. */ .feats { max-width: var(--col-wide); } .feat { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--s-7); align-items: center; padding: var(--s-7) 0; } .feat + .feat { border-top: 1px solid var(--ink-rule); } .feat:first-child { padding-top: 0; } .feat:last-child { padding-bottom: 0; } .feat__text { max-width: var(--col-text); } .feat--flip .feat__text { order: 2; } .feat .device { justify-self: center; } /* чип — имя ряда, той же плашкой, что название колоды на схеме карточки */ .feat__chip { display: inline-block; background: var(--ink-bg-sand); color: var(--ink-muted); border-radius: var(--r-pill); padding: var(--s-1) var(--s-3); font-size: var(--t-1); line-height: var(--l-2); font-weight: 500; margin-bottom: var(--s-3); } .feat h3 { font-size: var(--t-8); line-height: var(--l-6); margin-bottom: var(--s-3); } /* Блоки «день» и «полка» стоят сразу за рядами «что умеет» и читаются с ними одним разделом (правка владельца): линия сверху вместо отступа между разделами, отступы ряда те же. У ряда «полка» заголовок — h2 блока. */ .sect--cont > .wrap { border-top: 1px solid var(--ink-rule); padding-top: var(--s-7); } .sect--cont { padding-top: 0; } .feat h2 { margin-bottom: var(--s-3); } /* Темы: текст слева, справа веер лицевых сторон карточек из данных. Карточки лежат в одной клетке сетки и расходятся поворотом и сдвигом (правила по номеру — строчного style нет); на узком экране остаются три, по одной на тему. Обрезка — чтобы повёрнутые углы не двигали ширину страницы; поле внутри — чтобы обрезка не резала тень. */ .topics { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-7); align-items: center; margin-bottom: var(--s-6); } .topics__text { max-width: var(--col-text); } .topics__all { margin: var(--s-4) 0 0; } .fan { display: grid; justify-items: center; align-items: end; min-height: 16rem; padding: var(--s-4); overflow: hidden; } /* Сдвиг — до поворота, чтобы карточки расходились по прямой, а поворот шёл от нижней кромки: верх веера раскрыт шире низа. Из-под верхней карточки у каждой видна левая полоса — термин стоит на ней первой строкой. */ .fan__card { grid-area: 1 / 1; width: 9.5rem; border: 1px solid var(--ink-rule); border-radius: var(--r-4); background: var(--ink-bg-page); box-shadow: var(--shadow-card); padding: var(--s-4); transform-origin: 50% 100%; transform: translateX(var(--fan-x)) rotate(var(--fan-r)); } .fan__card:nth-child(1) { --fan-r: -8deg; --fan-x: -125%; } .fan__card:nth-child(2) { --fan-r: -5deg; --fan-x: -75%; } .fan__card:nth-child(3) { --fan-r: -2deg; --fan-x: -25%; } .fan__card:nth-child(4) { --fan-r: 2deg; --fan-x: 25%; } .fan__card:nth-child(5) { --fan-r: 5deg; --fan-x: 75%; } .fan__card:nth-child(6) { --fan-r: 8deg; --fan-x: 125%; } .fan__pill { display: inline-block; background: var(--ink-bg-sand); color: var(--ink-muted); border-radius: var(--r-pill); padding: var(--s-1) var(--s-3); font-size: var(--t-1); line-height: var(--l-2); font-weight: 500; margin: var(--s-3) 0 0; } .fan__lang { font-size: var(--t-1); line-height: var(--l-1); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--s-1); } .fan__lang--en { margin-top: var(--s-3); } .fan__term { font-family: var(--font-voice); font-weight: 600; font-size: var(--t-6); line-height: var(--l-4); margin: 0; } .fan__pair { font-size: var(--t-3); line-height: var(--l-3); color: var(--ink-muted); margin: 0; } /* ─── списки, вопросы, таблица ─── */ .lines { margin: 0 0 var(--s-4); padding-left: var(--s-5); } .lines li { margin-bottom: var(--s-3); } /* Вопросы — списком в одну колонку на ширину колонки текста (правка владельца: две колонки сняты). */ .faq { max-width: var(--col-text); } details { border-top: 1px solid var(--ink-rule); padding: var(--s-3) 0; break-inside: avoid; } summary { cursor: pointer; font-weight: 500; } .tablewrap { overflow-x: auto; max-width: var(--col-wide); } .cmp { border-collapse: collapse; width: 100%; font-size: var(--t-3); } .cmp th, .cmp td { border-bottom: 1px solid var(--ink-rule); padding: var(--s-3); text-align: left; vertical-align: top; /* Слово в ячейке не рвётся посередине («приложен-ие» на 375): перенос только по пробелам, а таблица шире колонки прокручивается внутри `.tablewrap` — это и есть правило сайта для широкого содержимого. */ overflow-wrap: normal; } .cmp thead th { color: var(--ink-muted); font-weight: 500; } /* ─── сноски на чужие данные («Компаниям») ─── */ /* Маркер в тексте — ссылка-надстрочник; line-height 0, чтобы надстрочник не раздвигал строки абзаца. Список внизу страницы — мелким кеглем, без маркеров браузера: знак «[1]» пишет копирайт, он же стоит в тексте. */ .fn__ref { font-size: var(--t-1); line-height: 0; vertical-align: super; } .fn__ref a { box-shadow: none; } .fn__ref a:hover { box-shadow: inset 0 -2px 0 var(--ink-ochre); } .fn { list-style: none; margin: 0; padding: var(--s-5) 0 0; border-top: 1px solid var(--ink-rule); color: var(--ink-muted); font-size: var(--t-2); line-height: var(--l-3); } .fn li { margin-bottom: var(--s-2); scroll-margin-top: calc(var(--head-h) + var(--s-4)); } .fn__mark { display: inline-block; min-width: 1.75rem; } /* ─── закрывающий экран главной: афиша во всю ширину и высоту окна ─── */ /* Текст на белом сверху, иллюстрация полосой во всю ширину внизу; кадр в рамке и значок стоят справа поверх полосы — там художник оставил пустое место. Ширина — от тела страницы, не от окна: `100vw` вместе с полосой прокрутки дал бы перелив. */ .sect--closing { padding: 0; } .closing { min-height: 100svh; display: grid; grid-template-rows: auto 1fr; } /* Элемент сетки с auto-полями ужимается до содержимого — ширина задана явно, чтобы текст стоял у левого края колонки, а не по центру под телефоном. */ .closing__body { width: 100%; padding-top: var(--s-8); padding-bottom: var(--s-6); } .closing__body > * { max-width: var(--col-text); } .closing__line { font-family: var(--font-voice); font-size: var(--t-7); line-height: var(--l-6); } .closing__stage { position: relative; align-self: end; } .closing__art { display: block; width: 100%; height: auto; } .closing__cta { position: absolute; right: 8%; bottom: 8%; width: 22%; display: grid; justify-items: center; } .closing__cta .device { max-width: none; } .crumbs, .crumbs__deck { font-size: var(--t-2); color: var(--ink-muted); margin-bottom: var(--s-2); } .oneline { font-size: var(--t-4); } .actions { display: flex; gap: var(--s-3); flex-wrap: wrap; } /* ─── подвал ─── */ .foot { border-top: 1px solid var(--ink-rule); padding: var(--s-6) 0; margin-top: var(--s-8); } .foot__logo { margin: 0 0 var(--s-4); color: var(--ink); line-height: 0; } .foot__nav { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-bottom: var(--s-3); } .foot__nav a { font-size: var(--t-3); box-shadow: none; color: var(--ink-muted); } .foot__nav a:hover { color: var(--ink); background: none; box-shadow: inset 0 -2px 0 var(--ink-ochre); } .foot__line { color: var(--ink-muted); font-size: var(--t-2); margin: 0; } .foot__legal { color: var(--ink-muted); font-size: var(--t-2); margin: var(--s-2) 0 0; } .foot__copy { color: var(--ink-muted); font-size: var(--t-2); margin: var(--s-2) 0 0; } /* ─── узкий экран ─── */ @media (max-width: 900px) { .hero, .anat, .bridge-app, .feat, .topics { grid-template-columns: minmax(0, 1fr); } .feat--flip .feat__text { order: 0; } /* три карточки, по одной на тему; сдвиг и поворот меньше — на 320 px повёрнутый угол не должен выйти за край колонки */ .fan__card { width: 8.5rem; } .fan__card:nth-child(n + 4) { display: none; } .fan__card:nth-child(1) { --fan-r: -6deg; --fan-x: -30%; } .fan__card:nth-child(2) { --fan-r: 0deg; --fan-x: 0%; } .fan__card:nth-child(3) { --fan-r: 6deg; --fan-x: 30%; } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* схема карточки: карточка целиком, выноски списком под ней, указок нет */ .anat { grid-template-rows: none; row-gap: var(--s-5); } .anat__card { grid-column: 1; grid-row: auto; display: block; } .anat__legend { display: block; padding-left: var(--s-5); } .anat__label { grid-column: auto; grid-row: auto; justify-self: auto; text-align: left; max-width: none; display: list-item; padding-top: 0; margin-bottom: var(--s-2); } .anat__label::after { display: none; } .anat__label--audio { padding-top: 0; } /* закрывающий экран: кадр и значок между текстом и полосой, не поверх неё */ .closing__cta { position: static; width: 60%; margin: 0 auto var(--s-6); } .closing__cta .device { max-width: 17rem; } } @media (max-width: 640px) { :root { --head-h: 7rem; } body { font-size: var(--t-4); line-height: var(--l-3); } /* шапка: имя и значок в первой строке, навигация — второй */ .head__row { gap: var(--s-3) var(--s-4); padding: var(--s-2) var(--s-5); } .head__nav { order: 3; } .head__store { margin-left: auto; } h1 { font-size: var(--t-9); line-height: var(--l-6); } h2 { font-size: var(--t-7); line-height: var(--l-5); } .lead { font-size: var(--t-5); line-height: var(--l-4); } .hl { font-size: var(--t-9); line-height: var(--l-6); } .feat h3 { font-size: var(--t-7); line-height: var(--l-5); } .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); } .sect { padding: var(--s-6) 0; } .sect--rule { padding-bottom: var(--s-7); } /* Навигация — в одну строку на любом телефоне. Четыре пункта на 375 px при кегле --t-3 и зазоре --s-4 давали 339 px против 327 колонки: «Компаниям» падал на вторую строку и съедал 40 px у первого экрана. Кегль --t-2 и зазор --s-3 вмещают все четыре на 375 без прокрутки; уже (320) полоса прокручивается внутри себя, пункты не прячутся — полосу прокрутки не рисуем, скриптов и «бургера» нет. Поле --s-1 со всех сторон — чтобы рамка фокуса не резалась прокруткой: полоса с overflow режет всё за своим краем, а браузерная рамка рисуется снаружи ссылки. Слева и справа поле компенсируется отрицательными полями, чтобы пункты остались на линии колонки; scroll-padding — чтобы пункт, к которому подъехала полоса по Tab, встал с тем же отступом. */ .head__nav { gap: var(--s-3); margin: 0 calc(-1 * var(--s-1)); width: calc(100% + 2 * var(--s-1)); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: var(--s-1); scroll-padding: var(--s-1); } .head__nav::-webkit-scrollbar { display: none; } .head__nav a { flex: 0 0 auto; font-size: var(--t-2); } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }