до
11.09.2026.
*
* Причина правки — не вид, а структура документа: языковые модели и парсеры
* читают
как раздел статьи, и «Комментарии:» вместе с карточками соседних
* статей вставали в один ряд с содержательными разделами. «Источники:» остались
* намеренно: это часть статьи, а не обвязка.
*
* .h2-atricles-other компенсации не требует — класс сам задаёт font-size,
* font-weight, line-height и оба margin'а. А .article-comment задаёт только
* размер и отступы, поэтому вес и высоту строки, приходившие от тега h2
* (h2,h4,h6,label{font-weight:700} и h2,h3{line-height:36px} в экспорте
* Webflow), возвращаем здесь. Селектор с div, чтобы не задеть «Источники:».
*/
div.article-comment { font-weight: 700; line-height: 36px; }
/* Блок «Краткое содержание» (.quest-1) — перенесён 12.09.2026 из свежего экспорта
* Webflow (страница /ru/articles/pochemu-nikotin-...). Стоит в каждой русской
* статье сразу после первого абзаца.
*
* Здесь только то, чего нет в css/nicotine-detox.webflow.css. Классы .type,
* .article-text(.margin-0), .article-point-number, .article-points-number там уже
* есть и совпадают с макетом байт в байт — не дублируем, иначе при следующем
* переносе будет два источника правды.
*
* Порядок медиазапросов повторяет экспорт: min-1280 → min-1440 → min-1920 →
* max-991 → max-479 (для этих классов max-767 в макете нет). Раскрытие/сворачивание
* — анимация IX2 (a-77 / a-78 в js/webflow.js), стартовое состояние футера
* лежит инлайном в HTML, как и в экспорте.
*/
.faq-card { grid-column-gap: 1rem; grid-row-gap: 1rem; display: flex; }
.faq-card.margin-faq { margin-bottom: 1rem; }
.h2-quest { text-transform: none; margin-top: 0; margin-bottom: .25rem; font-size: 1.4vw; font-style: normal; font-weight: 700; line-height: 160%; }
.hghh { width: 1rem; }
.arrow-quest { background-color: var(--retail-button); border-radius: 5rem; justify-content: center; align-self: center; align-items: center; width: 3.25rem; height: 3rem; display: flex; }
.quest-1 { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); width: 100%; margin-top: 2rem; margin-bottom: 2rem; transition: all .3s; }
.quest-head-1 { grid-column-gap: 1rem; grid-row-gap: 1rem; cursor: pointer; justify-content: space-between; align-items: center; margin-top: 0; padding: 1rem .5rem 1.25rem 1rem; display: flex; }
.quest-footer-1 { border-top: 1px solid var(--line); height: auto; padding-left: 1rem; padding-right: 1rem; overflow: hidden; }
.quest-footer-1.hidden { display: none; }
.question { grid-column-gap: .75rem; grid-row-gap: .75rem; flex-flow: wrap; padding-top: 1.5rem; padding-bottom: 1.5rem; display: flex; }
.h3-quest { text-transform: none; margin-top: 0; margin-bottom: .25rem; font-size: 1.1vw; font-style: normal; font-weight: 700; line-height: 140%; }
.quest-discrip { color: var(--text-article); text-align: left; font-family: Georgia, sans-serif; font-size: .935rem; font-weight: 300; }
.quest-discrip.margin-0 { text-align: left; margin-bottom: 0; }
@media screen and (min-width:1280px) {
.h2-quest { font-size: 1.125rem; }
.h3-quest { font-size: .9rem; }
}
@media screen and (min-width:1440px) {
.question { padding-top: 2rem; padding-bottom: 2rem; }
.quest-discrip { font-size: 1rem; }
}
@media screen and (min-width:1920px) {
.h2-quest { margin-bottom: .35rem; font-size: 1.35rem; }
.h3-quest { font-size: 1rem; }
.quest-discrip { font-size: 1.125rem; }
}
@media screen and (max-width:991px) {
.h2-quest { font-size: 1.125rem; }
.question { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.h3-quest { font-size: .935rem; }
}
@media screen and (max-width:479px) {
.faq-card.margin-faq { grid-column-gap: .75rem; grid-row-gap: .75rem; }
.h2-quest { margin-bottom: 0; font-size: 1.05rem; line-height: 150%; }
.arrow-quest { flex: none; }
.quest-1 { padding-right: 0; }
.quest-head-1 { grid-column-gap: 2rem; grid-row-gap: 2rem; padding-bottom: 1rem; padding-left: .5rem; padding-right: .5rem; }
.quest-footer-1 { padding-left: 0; padding-right: 0; }
.question { grid-column-gap: .65rem; grid-row-gap: .65rem; padding-left: .5rem; padding-right: .5rem; }
.h3-quest { font-size: .9rem; line-height: 150%; }
.quest-discrip { font-size: .935rem; }
}
/* Списки и абзацы внутри ответов блока «Краткое содержание» (13.09.2026).
* Шрифт и кегль берутся от .article-text — списку и абзацам даются те же классы,
* здесь только отступы и нумерация. */
.div-question .article-text + .article-text,
.div-question .article-text + .faq-list { margin-top: .6rem; }
.faq-list { list-style: decimal; margin: 0; padding-left: 1.5rem; }
.faq-list li { margin-bottom: .35rem; padding-left: .2rem; }
.faq-list li:last-child { margin-bottom: 0; }
.faq-list li::marker { color: var(--black); font-weight: 700; }
/* ── Ревизия 15.09.2026 ──
*
* Ссылки на другие статьи внутри текста. До этого в тексте статей ссылок не
* было вовсе — только карточки «другие статьи» внизу. Вид как у ссылок на
* источники (.reference-link), но синим: ссылка на статью — приглашение
* читать дальше, а не сноска. */
/* Селектор без привязки к контейнеру: ссылки стоят в абзацах, врезках,
* списках и в карточках таймлайна (.phase-body) — один класс на все случаи. */
/* Цвет по просьбе владельца 15.09.2026: в покое тёмно-синий, как заголовки
* (--black), синий — только под курсором. Начертание — как у окружающего
* текста, не жирное. */
a.text-link { color: var(--black); font-weight: inherit; text-decoration: underline dashed; text-underline-offset: 3px; text-underline-position: under; transition: color .25s ease-out; }
a.text-link:hover { color: var(--blue); }
/* Кнопка «Отправить» под комментариями (по просьбе владельца 15.09.2026):
* в покое тёмно-синяя с белым текстом, под курсором — синяя. В экспорте
* Webflow она серая (--no-work) и выглядит выключенной. Файл подключён
* только на статьях, поэтому форму обратной связи на главной, где тот же
* класс, правило не задевает. */
.email-button { background-color: var(--black); color: var(--white); }
.email-button:hover { background-color: var(--blue); color: var(--white); }
/* Пока имя и текст не заполнены, кнопка выключена (js/comments.js ставит
* disabled) — серая #b1bbc8 (это --dark-gray из экспорта), без реакции на
* курсор. Владелец: «неактивна, пока человек не заполнил имя и комментарий». */
.email-button:disabled,
.email-button:disabled:hover { background-color: #b1bbc8; color: var(--white); cursor: default; }
/* Переносы слов (hyphens:auto) на телефоне для .article-text ставились
* 15.09.2026 и в тот же день сняты по требованию владельца: «ку-рить»,
* «пред-сказуемая» выглядят хуже, чем дыры от выравнивания по ширине.
* Не возвращать. */
/* Вместо переносов — выравнивание по левому краю на телефоне (в экспорте
* text-align:justify), чтобы не было дыр между словами. */
@media (max-width: 767px) {
.article-text { text-align: left; }
}