/* ===================================================================== 06 · ВОПРОСЫ — «строка оглавления», перенесено из preview-faq/g.* 05.09.2026. До него отвергнуты шесть заходов; каталог всех — в dev-v7/ВАРИАНТЫ.md. Все правила уже ограничены сценой .stage--faqg, голых ноль — при переносе скоблить не пришлось. Вердикт справа от отточия — это ПЕРВАЯ ФРАЗА ответа, вынутая дословно, и полный ответ ровно её теряет. Правишь ответ — проверь, не осиротел ли вердикт. ===================================================================== */ /* ===================================================================== 06 · ВОПРОСЫ · ВАРИАНТ G — «СТРОКА ОГЛАВЛЕНИЯ» ┌─ УСТРОЙСТВО ЛИСТА ─────────────────────────────────────────────────┐ │ Пять строк оглавления. В каждой: вопрос слева, вердикт справа, │ │ отточие через всю меру между ними. Под строкой — подробный ответ │ │ абзацем, втянутым от левого края и набранным мельче и спокойнее. │ └────────────────────────────────────────────────────────────────────┘ ГЛАВНАЯ РАБОТА ЭТОГО ФАЙЛА — НЕ ДАТЬ ЛИСТУ ЧИТАТЬСЯ СПИСКОМ. Структурно это пять пар, и вся разница держится на одном приёме, поэтому приём подпёрт с четырёх сторон: · вердикт — реплика, а не рубрика (текст, а не вёрстка); · выключка вердиктов ПО ПРАВОМУ КРАЮ — второй столбец чтения, которого у списка не бывает; · длина отточий гуляет от 190 до 590 — ровных интервалов, по которым узнают перечень, на листе нет; · два раздела вместо пяти равных пунктов: четыре сомнения, а за двойной линейкой — вопрос того, кто уже согласился. ОТТОЧИЕ СДЕЛАНО ФОНОМ, А НЕ ТОЧКАМИ В ТЕКСТЕ. Точки нарисованы повторяющимся radial-gradient на элементе .fq-dots, который занимает весь свободный промежуток строки (flex: 1). Правка формулировки не оставит «лишнюю точку» и не разорвёт тягу; шаг точек не зависит ни от ширины окна (лист масштабируется целиком), ни от гарнитуры. ЦЕНА РЕШЕНИЙ, ЧЕСТНО: · Отточий пять и они длинные — риск ряби. Лечится не длиной, а весом точки: 1.3px радиуса при шаге 15 и чернилах 0.62. Крупнее или чаще — лист начинает рябить; мельче — тяга ПРОПАДАЕТ НА УЗКОМ ОКНЕ: при 1000px масштаб 0.69, и точка в 1.05px доезжает семью десятыми пикселя, то есть исчезает. Проверять оба размера. · Под колонкой вердиктов остаётся правое поле около 430: абзац ответа туда не доходит. Это не забытое место, а воздух вокруг единственной красной колонки листа — без него пять красных строк упираются в набор. Он же держит меру абзаца читаемой. · Мера набора 1294 (поля 73/73, как на первом экране). Уже — лист бледнеет, шире — некуда. ЧЕГО ЗДЕСЬ НЕТ: скруглений, теней, серых плашек, третьего цвета, рукописи в вопросах и ответах, анимаций, прокруточных состояний и opacity: 0 в исходном состоянии. Лист свёрстан и лежит; единственное движение на нём — маркер посетителя по отточию. ВСЕ СЕЛЕКТОРЫ ОГРАНИЧЕНЫ СЦЕНОЙ .stage--faqg: имена .title, .label, .note, .route, .btn, .cap, .lead, .folio, .stamp, .shot, .nav, .tag, .quote, .head, .cut, .mark на этом сайте уже заняты другими блоками. Собственный префикс листа — .fq-. ===================================================================== */ /* Высота держится соотношением сторон плюс страховкой в vw: формула calc(--scene-h * --k) не работает в Safari, а без высоты секция схлопывается в ноль и страница обрывается. */ .scene--faqg { /* 1010, а не 1190: со снятыми титулом и линейками набор кончается на 845, и лишние 180 висели пустой бумагой под рукописью. */ aspect-ratio: 1440 / 1010; min-height: calc(100vw * 1010 / 1440); } .stage--faqg { --measure: 1294px; /* мера набора: 1440 − 73 − 73. Поля те же, что на первом экране; правое поле здесь не координата, а остаток меры, поэтому своей переменной не имеет */ --fq-q: 32px; /* вопрос — крупнейший набор строки */ --fq-q-lh: 42px; --fq-v: 23px; /* вердикт — мельче вопроса и красный */ --fq-a: 18px; /* подробный ответ — крупнее подписного кегля кита: это основной текст листа, а не подпись к предмету, и мельче он начинает читаться мелким шрифтом договора */ --fq-a-lh: 28px; --fq-svc: 13px; /* служебное: колонтитул, головка, плашка */ --fq-indent: 66px; /* втяжка абзаца от левого края строки */ --fq-a-measure: 800px; /* мера абзаца: 70 знаков — читаемая мера и заодно плотный абзац в две-три строки: во всю меру листа ответы вырождались в две жидкие строчки */ --fq-rule: rgba(0, 0, 0, 0.34); /* линейка между парами — структура */ --fq-rule-hard: rgba(0, 0, 0, 0.9); /* двойная линейка раздела */ --fq-dot: rgba(0, 0, 0, 0.62); /* чернила отточия */ } .stage--faqg .paper { left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); } .stage--faqg .grain { left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); } /* ===================================================================== ШАПКА ЛИСТА ===================================================================== */ /* Со слэшем — нумерует раздел, а не называет предмет: набран мельче и вполсилы. Тот же колонтитул, что в блоке 04. */ .stage--faqg .fq-folio { left: var(--edge-text); top: 60px; font-size: var(--fq-svc); line-height: 18px; opacity: 0.62; } /* .fq-title снят вместе с разметкой — см. index.html. */ /* ===================================================================== ПОЛОСА Единственная координата — левый верхний угол. Всё внутри стоит в потоке и растёт от текста: правка формулировки двигает соседей, а не разъезжается по листу. ===================================================================== */ .stage--faqg .fq { left: var(--edge-text); top: 100px; /* было 226 — под титулом; титула нет, полоса встала на его место, и графа «о чём спрашивают» пришла ровно туда, где в блоке 05 стоит «что говорят» */ width: var(--measure); } /* ГОЛОВКА ГРАФ. Объявляет двойное чтение до того, как прочитана первая строка: слева графа вопросов, справа — графа коротких ответов. */ .stage--faqg .fq-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; } .stage--faqg .fq-graph { /* ТЕПЕРЬ ЭТО НАЗВАНИЕ БЛОКА, А НЕ ПОДПИСЬ ГРАФЫ. Было служебным кеглем и вполсилы (0,62) — под крупным титулом это читалось сноской. Титул снят, и графа заняла его место: тот же кегль и та же полная плотность, что у подписи «что говорят» в блоке 05. */ font-size: var(--caption-fs); line-height: var(--caption-lh); letter-spacing: var(--mono-ls); text-transform: uppercase; color: var(--ink); } /* Указатель второго раздела остаётся служебной строкой — он именно подпись внутри полосы, а не заголовок. */ .stage--faqg .fq-graph--part { font-size: var(--fq-svc); line-height: 18px; opacity: 0.62; text-transform: none; } /* Указатель второго раздела: он не в головке, а внутри полосы, поэтому получает свои поля. */ .stage--faqg .fq-graph--part { margin: 16px 0 20px; } /* Плашка — единственная в блоке. Стоит над колонкой вердиктов и зажигает красным правый верх листа: иначе вся краска собралась бы внизу, у полос обреза. Плашка бывает только красной — серых плашек на этом сайте нет. */ .stage--faqg .fq-plate { display: flex; align-items: center; height: 28px; padding: 0 14px; background: var(--red); color: var(--on-red); font-size: var(--fq-svc); line-height: 18px; } /* --- ЛИНЕЕК БОЛЬШЕ НЕТ ------------------------------------------------ Сняты 05.09 все шесть: и тонкие между парами, и двойные у разделов. Держали они структуру честно, но на листе, где каждая пара и так набрана в два голоса (чёрный вопрос — красный вердикт), линейки превращали разворот в бланк с графами. Пары теперь разделяет воздух: 45 между соседними, 22 внутри пары. Отступ больше расстояния между вопросом и его же ответом — этого хватает, чтобы пара читалась парой. Числа стоят у .fq-row ниже. ------------------------------- */ /* ===================================================================== СТРОКА ОГЛАВЛЕНИЯ
взят не ради семантики вообще, а ради порядка чтения с экрана: в
лежит вопрос ВМЕСТЕ с вердиктом, в
— подробности. Тогда программа чтения выдаёт то же, что видит глаз: сначала быстрый слой, потом медленный. ===================================================================== */ .stage--faqg .fq-list { margin: 0; } /* Воздух вместо линеек: пара от пары отбивается вдвое сильнее, чем ответ от своего вопроса. Последняя пара поля снизу не получает — низ полосы держит закрывающая рукопись. */ .stage--faqg .fq-row { margin-bottom: 45px; } .stage--faqg .fq-row:last-of-type { margin-bottom: 0; } .stage--faqg .fq-list dt, .stage--faqg .fq-list dd { margin: 0; } .stage--faqg .fq-line { display: flex; align-items: baseline; /* вопрос, отточие и вердикт стоят на одной базовой линии, хотя кегли у них разные */ font-size: var(--fq-q); line-height: var(--fq-q-lh); letter-spacing: 0.02em; /* трекинг кита +10 % на строчных 32-го кегля растягивает вопрос почти на всю меру и съедает отточие */ text-transform: none; /* вопросы набраны строчными, как их написал бы человек: это единственная примета голоса в утверждённом тексте */ } .stage--faqg .fq-q { flex: 0 0 auto; } /* ВЕРДИКТ — единственное красное на строке и единственное, что выключено по правому краю. Пять правых концов собираются в колонку у поля: это второй столбец чтения, которого у списка не бывает. */ .stage--faqg .fq-v { flex: 0 0 auto; color: var(--red); font-size: var(--fq-v); line-height: 32px; white-space: nowrap; } /* --- ОТТОЧИЕ ---------------------------------------------------------- Пустой элемент, занимающий весь свободный промежуток строки. Почему у него нет содержимого. Точки в тексте («. . . . .») ломаются при любой правке формулировки: то не добираются до вердикта, то лезут под него, а на переносе строки рвутся пополам. Здесь тяга — фон, и промежуток она держит какой дали, столько и есть. ПОЧЕМУ ТОЧКИ СТОЯТ НА БАЗОВОЙ ЛИНИИ. У пустого блочного элемента базовая линия синтезируется по нижней кромке, а align-items: baseline ставит эту кромку на базовую линию текста. Плитка фона высотой 4px прижата к низу — центр точки оказывается на 2px выше базовой линии, ровно там, где стоит очко настоящей точки. ВЕС ТОЧКИ — САМОЕ ХРУПКОЕ ЧИСЛО ЛИСТА. Радиус 1.3 при шаге 15 и чернилах 0.62: крупнее или чаще — пять длинных тяг начинают рябить; мельче — тяга пропадает на узком окне, где масштаб 0.69 и точка не добирает до пикселя. Правится только со снимком на 1440 И на 1000. */ .stage--faqg .fq-dots { position: relative; flex: 1 1 auto; align-self: baseline; height: 10px; margin: 0 18px; background-image: radial-gradient(circle at 50% 50%, var(--fq-dot) 1.3px, transparent 1.6px); background-size: 15px 4px; background-position: left bottom; background-repeat: repeat-x; } /* МАРКЕР ПОСЕТИТЕЛЯ. Курсор на этом сайте — красный маркер; ведёшь им по строке, и он проводит черту от страха к ответу. Красная тяга лежит ВТОРЫМ СЛОЕМ поверх чернильной и проявляется прозрачностью: перекраска самого градиента не переходит плавно, она щёлкает. */ .stage--faqg .fq-dots::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 50% 50%, var(--red) 1.4px, transparent 1.7px); background-size: 15px 4px; background-position: left bottom; background-repeat: repeat-x; opacity: 0; transition: opacity 0.22s ease; } .stage--faqg .fq-row:hover .fq-dots::after { opacity: 1; } /* Тот же вид адресом: в headless :hover не воспроизвести вовсе. */ html[data-mark="a"] .stage--faqg .fq-row--a .fq-dots::after, html[data-mark="b"] .stage--faqg .fq-row--b .fq-dots::after, html[data-mark="c"] .stage--faqg .fq-row--c .fq-dots::after, html[data-mark="d"] .stage--faqg .fq-row--d .fq-dots::after, html[data-mark="e"] .stage--faqg .fq-row--e .fq-dots::after { opacity: 1; } /* --- ПОДРОБНЫЙ ОТВЕТ -------------------------------------------------- Втянут от левого края строки — так в оглавлении втянут подзаголовок, и так же видно, что абзац принадлежит строке над ним, а не стоит сам по себе. Набран спокойнее: мельче, без прописных, с обычным междусловным ритмом. До правого поля не доходит намеренно — там воздух вокруг колонки вердиктов. white-space возвращён в normal: .mono из кита набран nowrap, и многострочному тексту перенос надо включать самому. -------------- */ .stage--faqg .fq-full { margin: 12px 0 0 var(--fq-indent); max-width: var(--fq-a-measure); font-size: var(--fq-a); line-height: var(--fq-a-lh); letter-spacing: 0.03em; text-transform: none; white-space: normal; } /* ===================================================================== ПУСТОЕ МЕСТО ПОД ЧИСЛО Цифр на листе нет ни одной. Размер предоплаты — пустая красная линейка постоянной ширины: подставят число, строка не поедет. Стоит она В ВЕРДИКТЕ, а не в абзаце, потому что «да, небольшая — ___ ₽» это одна фраза ответа; заодно единственная невыясненная величина попадает в ту графу, где и живёт всё красное. Что вписать — говорит data-verify, оно проявляется на ?dev=1. ===================================================================== */ .stage--faqg .slot { display: inline-block; width: 58px; height: 0.6em; margin: 0 5px; border-bottom: 1.6px solid var(--red); vertical-align: baseline; } html[data-dev] .stage--faqg .slot { position: relative; } html[data-dev] .stage--faqg .slot::after { content: attr(data-verify); position: absolute; left: 0; bottom: -14px; font-family: var(--font-ui); font-size: 9px; letter-spacing: 0; text-transform: none; color: var(--red); white-space: nowrap; } /* ===================================================================== РУКОПИСЬ Denistina комментирует и никогда не подписывает — выноски у неё нет и быть не может. Два слова: больше рукопись в этом проекте не держит, и ровно поэтому ни один вопрос и ни один ответ ею не набран (на пяти-семи словах она перестаёт читаться — на этом разбился вариант c). Стоит в правом поле, под колонкой вердиктов: единственное место листа, где есть воздух, и единственное, где рукопись никого не толкает. ===================================================================== */ .stage--faqg .fq-hand { left: 1006px; top: 885px; /* было 1078. Со снятыми линейками и титулом набор кончается на 845, и рукопись висела в 233 пикселях пустой бумаги ниже — лист читался недоделанным. Теперь 40 после последней строки, как везде. */ font-size: 52px; line-height: 1.3; color: var(--red-hand); transform: rotate(-4deg); transform-origin: 0 50%; } /* ===================================================================== ОБРЕЗ ЛИСТА Полосы, слаг и кресты отсчитаны ОТ НИЖНЕЙ КРОМКИ, а не от набора: набор растёт от текста, кромка — нет. ===================================================================== */ /* Так закрываются блоки 02, 03 и 04: широкая полоса от левого обреза и короткий градиентный обрывок за просветом. */ /* Нижние красные полосы блока сняты 05.09 по правке заказчицы: на листе, где вся краска и так в правой колонке вердиктов, жирная полоса внизу перебивала их и закрывала разворот громче, чем он начинается. */ .stage--faqg .fq-slug { left: var(--edge-text); bottom: 24px; font-size: 11px; line-height: 14px; opacity: 0.5; } /* Приводочные кресты — из печатного слоя заставки. Их два, а не четыре: левая пара пришлась бы ровно на коридор сквозной красной линии, а левее x = 73 не стоит ничего. Верхний чёрной формы, нижний красной — как чередуются кресты на заставке. */ .stage--faqg .fq-cross { right: 26px; width: 34px; height: 34px; color: var(--ink); opacity: 0.45; } .stage--faqg .fq-cross svg { display: block; width: 100%; height: 100%; } .stage--faqg .fq-cross svg circle, .stage--faqg .fq-cross svg path { stroke: currentColor; stroke-width: 1; } .stage--faqg .fq-cross--m { color: var(--red); } .stage--faqg .fq-cross--tr { top: 26px; } .stage--faqg .fq-cross--br { bottom: 26px; } /* ===================================================================== СЛУЖЕБНЫЙ РЕЖИМ ?dev=1 Коридор сквозной красной линии: слева от x = 73 на листе пусто, и маршрут линии проходит там, ничего не задевая. ===================================================================== */ .stage--faqg .fq-ghost { left: 0; top: 0; width: 1440px; height: 1010px; overflow: visible; pointer-events: none; display: none; } html[data-dev] .stage--faqg .fq-ghost { display: block; } .stage--faqg .fq-ghost path { fill: none; stroke: var(--red); stroke-width: 2; stroke-dasharray: 6 8; opacity: 0.5; } /* ===================================================================== СПОКОЙНЫЙ РЕЖИМ Гасить здесь нечего: лист не двигается и не проявляется. Снимаем единственный переход — красная тяга под маркером появляется сразу. ===================================================================== */ @media (prefers-reduced-motion: reduce) { .stage--faqg .fq-dots::after { transition: none; } }