/* ── Блоки фактов журнала (С272) ─────────────────────────────────────────── Чек-лист уходит из прозы в структуру: факты — в блоки, проза — под простой человеческий текст. Три знака разметки (`?!`/`?.`, `%%`, `$1..$3`) разбирает ОДИН парсер `journal/render.py` (инвариант 21.3.1), рисует ОДИН партиал `journal/templates/journal/_fact_blocks.html`. СВОЙ ФАЙЛ, а не кусок et-journal.css (С272.3): партиал живёт на ТРЁХ поверхностях (статья журнала, гид модели, гид марки) на ДВУХ каркасах, а `et-journal.css` грузят только страницы журнала — на гидах блоки стояли бы голыми. Копировать правила в `base.html` парно (приём `.jr-link`, С33.5) здесь нельзя: семьдесят строк копии разъедутся на первой правке. Один файл, три подключения — и сторож проверяет, что все три на месте. Цвета — СВОИ токены блока, как `--rm-*` у карты (С272.1, решение владельца по живой странице): тревога и «дорого» — терракота одобренного прототипа, «обычный износ» и «копейки» — его же зелёный; палитровый `--warn` в теме «матовое стекло» бурый (#715635) и тревогой не читается. Четыре состояния темы, метки шкалы — текст, поэтому AA на подложках обязателен. */ :root{ --jr-calm:#3f6b52; --jr-alarm:#9c4a34; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]):not([data-theme="warm-glass"]){ --jr-calm:#6fbf92; --jr-alarm:#e0876b; } } :root[data-theme="dark"]{ --jr-calm:#6fbf92; --jr-alarm:#e0876b; } :root[data-theme="warm-glass"]{ --jr-calm:#3f6b52; --jr-alarm:#9c4a34; } /* ── Диагностика: панель с полосой состояния (вариант А, решение владельца 16.09 по трём макетам) ─────────────────────────────────────────────────── Первая редакция стояла голой таблицей с точками и подписями «о чём:» в строке — владелец прочитал это как распечатку формы, а не как страницу журнала. Материал панели взят у «дверей» разбора на странице модели (21.5): матовое стекло с левитацией, тот же радиус и та же тень. Состояние говорит ПОЛОСА во всю высоту строки, а не точка: точка — значок, который надо расшифровать, полоса читается как край строки. Панель — на ОБЁРТКЕ, а не на самой таблице: скругление с `overflow:hidden` на `` обрезает углы не во всех браузерах, а обёртка делает это всегда и пригодится, когда узкой странице понадобится прокрутка. Таблица при этом остаётся таблицей: три колонки данных с заголовками — это таблица и для читалки экрана. */ .jr-panel{margin:28px 0; border-radius:var(--r-md); background:var(--glass-strong); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); box-shadow:var(--lift-1); overflow:hidden} .jr-diag{width:100%; border-collapse:collapse; font-size:15.5px} .jr-diag th{text-align:left; font:700 10.5px/1.3 var(--font); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); padding:15px 16px 11px 0; vertical-align:bottom} .jr-diag th:first-child{padding-left:26px} .jr-diag th:last-child{padding-right:22px} /* Линии строк — компонентами цвета через rgba (С272.3): `--line-c` это «25,47,64», и `1px solid var(--line-c)` CSS молча выбрасывает — разделителей не было вовсе. */ .jr-diag td{padding:15px 16px 15px 0; border-top:1px solid rgba(var(--line-c),.10); vertical-align:top; line-height:1.5; color:var(--ink-faint)} .jr-diag td:first-child{position:relative; padding-left:26px; color:var(--ink); font-weight:700} .jr-diag td:first-child::before{content:""; position:absolute; left:0; top:13px; bottom:13px; width:3px; border-radius:0 2px 2px 0; background:var(--jr-calm)} .jr-diag tr.lvl-alarm td:first-child::before{background:var(--jr-alarm)} .jr-diag td:last-child{color:var(--ink-soft); padding-right:22px} /* ── Осмотр по шагам: нумерация считает CSS, минуты складывает парсер ── */ .jr-steps{list-style:none; counter-reset:st; margin:28px 0; padding:0} .jr-steps li{counter-increment:st; display:grid; grid-template-columns:auto 1fr auto; gap:2px 14px; align-items:baseline; padding:13px 0; border-top:1px solid rgba(var(--line-c),.10)} .jr-steps li::before{content:counter(st); font:400 20px/1 var(--font-display); color:var(--accent); grid-row:span 2} .jr-steps .w{color:var(--ink); font-weight:700} .jr-steps .n{grid-column:2; color:var(--ink-faint); font-size:14.5px; line-height:1.5} .jr-steps .m{color:var(--ink-faint); font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums} .jr-steps-total{display:flex; justify-content:space-between; gap:14px; margin-top:2px; padding-top:13px; border-top:1px solid var(--ink-faint); font-size:14px; color:var(--ink-faint)} .jr-steps-total b{font:400 20px/1 var(--font-display); color:var(--ink)} /* ── Шкала «во что обходится»: три ступени, метка словом ── */ .jr-cost{margin:28px 0} .jr-cost-row{display:grid; grid-template-columns:120px 1fr; gap:16px; padding:14px 0; border-top:1px solid rgba(var(--line-c),.10); align-items:start} .jr-cost-row:first-child{border-top:0} .jr-cost-row .k{font:700 11px/1.4 var(--font); letter-spacing:.12em; text-transform:uppercase; padding-top:2px} .jr-cost-row.w1 .k{color:var(--jr-calm)} .jr-cost-row.w2 .k{color:var(--accent)} .jr-cost-row.w3 .k{color:var(--jr-alarm)} .jr-cost-row .t{font-size:15.5px; line-height:1.55} .jr-cost-row .bar{grid-column:2; display:flex; gap:4px; margin-top:8px} .jr-cost-row .bar i{height:4px; flex:1; background:rgba(var(--line-c),.14); border-radius:2px} .jr-cost-row.w1 .bar i:nth-child(1){background:var(--jr-calm)} .jr-cost-row.w2 .bar i:nth-child(-n+2){background:var(--accent)} .jr-cost-row.w3 .bar i{background:var(--jr-alarm)} /* ── Тихая дверь в точке узнавания (ПР22) ────────────────────────────────── Блок фактов — то место, где читатель узнаёт свою машину, и там уместно предложить проверить это на конкретной. Дверь СТРОКОЙ ТЕКСТА, а не кнопкой-плашкой: заливка с тенью посреди журнального разбора читается рекламой, а реклама убивает доверие к самому разбору. Настоящая `