/* * Новости (макет News.dc.html, README §14): список /news и страница статьи /news/<адрес>. Разметка — template/information/ivanko_news_*.twig * и template/ivanko/news/*.twig, поведение — js/ivanko-news.js, сервер — controller/information/ivanko_news.php. * * Корень тот же #ii, что у информационных страниц (css/ivanko-info.css: токены, крошки, кнопки, карточка контактов, бар, плитки товаров, * плашка, призыв) — здесь только то, чего там нет, и всё под #ii.ii--news (id-специфичность перебивает blue.css и responsive.css темы). * Префикс классов in-. Раскладка: список 3 колонки (>=1024) / 2 / строки на телефоне; статья — колонка чтения 720 + карточка 360 (>=1280), * 320 (1024-1279), ниже 1024 — одна колонка, карточка после текста, на телефоне ещё и липкий бар (появляется после обложки). */ #ii.ii--news .in-tag { display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 8px; border-radius: 4px; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; } #ii.ii--news .in-tag--promo { background: #FFF1D6; color: #8A5300; } #ii.ii--news .in-tag--ended { background: #EEF0F2; color: #454B53; } #ii.ii--news .in-tag--l { align-self: flex-start; height: 24px; font-size: 13px; } /* ============================== Список ============================== */ #ii.ii--news .in-top { display: flex; flex-direction: column; gap: 10px; } #ii.ii--news .in-lead { font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; } #ii.ii--news .in-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } #ii.ii--news .in-date { font-size: 13px; color: var(--muted-2); } /* Обложка: рамка 16:9 на bg-panel. cover заполняет рамку, иначе картинка вписана без увеличения; нет картинки — плашка с иконкой */ #ii.ii--news .in-cover { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; min-width: 0; overflow: hidden; background: var(--bg-panel); } #ii.ii--news .in-cover-img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; } #ii.ii--news .in-cover-img.is-cover { width: 100%; height: 100%; object-fit: cover; } #ii.ii--news .in-cover-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--brand-tint); color: var(--brand); } #ii.ii--news .in-cover-ph .ii-i { font-size: 44px; } #ii.ii--news .is-ended .in-cover-img { opacity: .55; filter: grayscale(1); } #ii.ii--news .is-ended .in-cover-ph { opacity: .55; } /* Главная новость: карточка во всю ширину, обложка слева */ #ii.ii--news .in-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: #fff; color: var(--ink); } #ii.ii--news .in-hero:hover { color: var(--ink); text-decoration: none; } #ii.ii--news .in-hero .in-cover { align-self: stretch; } #ii.ii--news .in-hero .in-cover-ph .ii-i { font-size: 56px; } #ii.ii--news .in-hero-b { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; padding: 32px 32px 32px 0; } #ii.ii--news .in-hero-t { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; text-wrap: pretty; overflow-wrap: anywhere; } #ii.ii--news .in-hero-x { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; font-size: 16px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; } #ii.ii--news .in-readmore { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 15px; font-weight: 600; color: var(--brand); } #ii.ii--news .in-readmore .ii-i { font-size: 18px; } #ii.ii--news .in-hero:hover .in-hero-t, #ii.ii--news .in-tile:hover .in-tile-t { color: var(--brand); } /* Сетка */ #ii.ii--news .in-grid-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } #ii.ii--news .in-tile { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--ink); } #ii.ii--news .in-tile:hover { color: var(--ink); text-decoration: none; } #ii.ii--news .in-tile .in-cover { margin-bottom: 6px; border-radius: 12px; } #ii.ii--news .in-tile-b { display: flex; flex-direction: column; gap: 8px; min-width: 0; } #ii.ii--news .in-tile-t { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 18px; font-weight: 700; line-height: 1.3; text-wrap: pretty; overflow-wrap: anywhere; } #ii.ii--news .in-tile-x { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 14px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; } /* Одна новость: две плитки-ссылки под карточкой */ #ii.ii--news .in-one { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #ii.ii--news .in-one-l { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 16px 20px; border-radius: 12px; background: var(--bg-subtle); font-size: 16px; font-weight: 600; color: var(--ink); } #ii.ii--news .in-one-l:hover { background: var(--brand-tint); color: var(--ink); text-decoration: none; } #ii.ii--news .in-one-l .ii-i { color: var(--brand); } #ii.ii--news .in-one-ar { margin-left: auto; } /* Пагинация: «Показать ещё N» + номера обычными ссылками ?page=N */ #ii.ii--news .in-pager { display: flex; flex-direction: column; align-items: center; gap: 16px; } #ii.ii--news .in-morebtn { height: 48px; padding: 0 28px; border: 1.5px solid var(--brand); border-radius: 10px; background: #fff; font-size: 16px; font-weight: 600; color: var(--brand); } #ii.ii--news .in-morebtn:hover { background: var(--brand-tint); } #ii.ii--news .in-morebtn[disabled] { opacity: .65; cursor: default; } #ii.ii--news .in-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } #ii.ii--news .in-pg { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border-input); border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--ink); } #ii.ii--news .in-pg:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; } #ii.ii--news .in-pg.is-cur { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); } /* Пусто */ #ii.ii--news .in-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 24px; border: 1px solid var(--border); border-radius: 16px; text-align: center; } #ii.ii--news .in-empty-ic { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); } #ii.ii--news .in-empty-ic .ii-i { font-size: 36px; } #ii.ii--news .in-empty-t { font-size: 22px; font-weight: 700; } #ii.ii--news .in-empty-x { max-width: 420px; font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; } #ii.ii--news .in-empty-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; } /* ============================== Статья ============================== */ #ii.ii--news .in-back { display: none; } #ii.ii--news .in-layout { display: grid; grid-template-columns: minmax(0, 720px) 360px; gap: 48px; justify-content: space-between; align-items: start; } #ii.ii--news .in-art { display: flex; flex-direction: column; gap: 24px; min-width: 0; } #ii.ii--news .in-head { display: flex; flex-direction: column; gap: 12px; min-width: 0; } #ii.ii--news .in-h1 { line-height: 1.2; text-wrap: pretty; overflow-wrap: anywhere; } #ii.ii--news .in-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 44px; } #ii.ii--news .in-info-d { font-size: 14px; color: var(--muted); } #ii.ii--news .in-info-dot { font-size: 14px; color: var(--muted-2); } #ii.ii--news .in-info-sp { flex: 1; } /* Поделиться: Telegram, Viber, «Ссылка»; на телефоне — одна кнопка системного share (JS ставит .is-native) */ #ii.ii--news .in-share { display: flex; align-items: center; gap: 8px; } #ii.ii--news .in-share-l { font-size: 13px; color: var(--muted-2); } #ii.ii--news .in-sbtn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border-input); border-radius: 8px; background: #fff; font-size: 13px; font-weight: 600; color: var(--muted); } #ii.ii--news .in-sbtn:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; } #ii.ii--news .in-sbtn--link { width: auto; padding: 0 10px; } #ii.ii--news .in-sbtn--link.is-copied { border-color: var(--ok); color: var(--ok-text); } #ii.ii--news .in-sbtn--sys { display: none; } #ii.ii--news .in-sbtn .ii-i { font-size: 20px; } #ii.ii--news .in-ended { max-width: none; align-items: center; } #ii.ii--news .in-ended-x { font-size: 15px; line-height: 1.5; text-wrap: pretty; } #ii.ii--news .in-ended-x a { font-weight: 600; } /* Обложка статьи: никогда не обрезается. Широкая — на всю колонку; мелкая (251x180, 515x180) — натуральный размер на поле bg-panel с отступом 24 */ #ii.ii--news .in-acover { display: flex; align-items: center; justify-content: center; max-height: 440px; overflow: hidden; border-radius: 16px; background: var(--bg-panel); } #ii.ii--news .in-acover-f { display: flex; align-items: center; justify-content: center; max-width: 100%; max-height: 440px; padding: 24px; } #ii.ii--news .in-acover-f img { display: block; width: auto; height: auto; max-width: 100%; max-height: 392px; } #ii.ii--news .in-acover-f.is-wide { width: 100%; padding: 0; } #ii.ii--news .in-acover-f.is-wide img { width: 100%; max-height: 440px; object-fit: contain; } #ii.ii--news .in-acover.is-ended img { opacity: .55; filter: grayscale(1); } /* Текст из редактора после нормализации (system/library/ivanko_news_html.php) */ #ii.ii--news .in-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; text-wrap: pretty; } #ii.ii--news .in-body p, #ii.ii--news .in-body li { overflow-wrap: anywhere; } #ii.ii--news .in-body strong { font-weight: 700; } #ii.ii--news .in-body a { text-decoration: underline; text-underline-offset: 2px; } #ii.ii--news .in-body a:hover { color: var(--brand-hover); } #ii.ii--news .in-body h2 { margin-top: 8px; font-size: 22px; font-weight: 700; line-height: 1.3; } #ii.ii--news .in-body h3 { display: flex; align-items: center; gap: 10px; margin: 8px 0 -4px; font-size: 18px; font-weight: 600; line-height: 1.35; } #ii.ii--news .in-h3-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--brand-tint); color: var(--brand); } #ii.ii--news .in-h3-ic .ii-i { font-size: 20px; } #ii.ii--news .in-body ul { display: flex; flex-direction: column; gap: 8px; } #ii.ii--news .in-body ul > li { position: relative; padding-left: 18px; } #ii.ii--news .in-body ul > li::before { content: ''; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); } #ii.ii--news .in-body ol { display: flex; flex-direction: column; gap: 8px; padding-left: 24px; list-style: decimal; } #ii.ii--news .in-body ol > li::marker { color: var(--brand); font-weight: 600; } #ii.ii--news .in-body li > ul, #ii.ii--news .in-body li > ol { margin-top: 8px; } #ii.ii--news .in-body blockquote { padding-left: 16px; border-left: 3px solid var(--brand-line); color: var(--ink-2); } #ii.ii--news .in-body figure { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; } #ii.ii--news .in-body figure img { display: block; max-width: 100%; height: auto; border-radius: 12px; } #ii.ii--news .in-body figcaption { font-size: 13px; color: var(--muted-2); } #ii.ii--news .in-body img { max-width: 100%; height: auto; } #ii.ii--news .in-table { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; } #ii.ii--news .in-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; line-height: 1.45; } #ii.ii--news .in-table th { padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg-panel); text-align: left; font-weight: 600; color: var(--muted); overflow-wrap: normal; } #ii.ii--news .in-table td { padding: 10px 14px; border-top: 1px solid #F0F2F4; vertical-align: top; overflow-wrap: normal; } /* Товары акции: лента плиток, scroll-snap */ #ii.ii--news .in-rel { display: flex; flex-direction: column; gap: 14px; min-width: 0; } #ii.ii--news .in-rel-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 3); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; margin: -2px; } #ii.ii--news .in-rel-row::-webkit-scrollbar { display: none; } #ii.ii--news .in-rel-row .ii-tile { scroll-snap-align: start; } #ii.ii--news .in-abtn { align-self: flex-start; padding: 0 28px; } /* Карточка контактов: по строке на отдел города */ #ii.ii--news .in-aside { top: 16px; gap: 12px; } #ii.ii--news .in-dept { display: flex; flex-direction: column; gap: 3px; padding-top: 12px; border-top: 1px solid var(--border); } #ii.ii--news .in-dept-n { font-size: 13px; line-height: 1.35; color: var(--muted); } #ii.ii--news .in-dept-tel { display: flex; align-items: center; min-height: 28px; font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } #ii.ii--news .in-dept-tel:hover { color: var(--brand); } /* Другие новости — на всю ширину под сеткой */ #ii.ii--news .in-others { display: flex; flex-direction: column; gap: 20px; padding-top: 32px; border-top: 1px solid var(--border); } #ii.ii--news .in-others-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #ii.ii--news .in-others-all { display: flex; align-items: center; gap: 2px; min-height: 44px; font-size: 15px; font-weight: 600; } #ii.ii--news .in-others-all .ii-i { font-size: 18px; } /* Липкий бар телефона: скрыт, пока не пройдена обложка (js/ivanko-news.js ставит .is-bar-on на корень) */ #ii.ii--news .ii-bar { display: none; } /* ============================== Адаптив ============================== */ @media (max-width: 1279px) { #ii.ii--news .in-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; } } @media (max-width: 1023px) { #ii.ii--news .in-hero { grid-template-columns: minmax(0, 1fr); gap: 0; } #ii.ii--news .in-hero-b { padding: 24px; } #ii.ii--news .in-grid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } #ii.ii--news .in-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } #ii.ii--news .in-layout .in-aside { position: static; max-width: 520px; } } @media (max-width: 767px) { #ii.ii--news .in-lead { font-size: 15px; } #ii.ii--news .in-hero-b { gap: 8px; padding: 16px; } #ii.ii--news .in-hero-t { font-size: 20px; } #ii.ii--news .in-hero-x { -webkit-line-clamp: 3; font-size: 15px; } /* Сетка — строки как на главной: фото 96x72, дата, заголовок 15/700 clamp 3, без анонса */ #ii.ii--news .in-grid-list { display: flex; flex-direction: column; gap: 0; } #ii.ii--news .in-tile { flex-direction: row; gap: 12px; min-height: 96px; padding: 12px 0; border-top: 1px solid var(--border); } #ii.ii--news .in-tile .in-cover { flex: none; width: 96px; height: 72px; margin: 0; aspect-ratio: auto; border-radius: 8px; } #ii.ii--news .in-tile .in-cover-ph .ii-i { font-size: 30px; } #ii.ii--news .in-tile-b { flex: 1; gap: 4px; } #ii.ii--news .in-tile .in-meta { gap: 8px; } #ii.ii--news .in-tile .in-tag { height: 20px; padding: 0 6px; font-size: 11px; } #ii.ii--news .in-tile-t { font-size: 15px; line-height: 1.3; } #ii.ii--news .in-tile-x { display: none; } #ii.ii--news .in-one { grid-template-columns: minmax(0, 1fr); } #ii.ii--news .in-morebtn { width: 100%; } #ii.ii--news .in-empty { padding: 32px 16px; } #ii.ii--news .in-empty-btns { width: 100%; } #ii.ii--news .in-empty-btns .ii-btn { flex: 1 1 100%; } /* Статья: «← Новости» вместо крошек, одна кнопка share, карточка контактов после текста */ #ii.ii--news.ii--news-article .ii-crumbs { display: none; } #ii.ii--news .in-back { display: flex; align-items: center; align-self: flex-start; gap: 4px; min-height: 44px; margin: -10px 0 -8px; font-size: 15px; font-weight: 600; } #ii.ii--news .in-back .ii-i { font-size: 20px; } #ii.ii--news .in-art { gap: 20px; } #ii.ii--news .in-share-l, #ii.ii--news .in-share.is-native .in-sbtn:not(.in-sbtn--sys) { display: none; } #ii.ii--news .in-share.is-native .in-sbtn--sys { display: flex; width: 44px; height: 44px; border-radius: 10px; } #ii.ii--news .in-acover-f { padding: 16px; } #ii.ii--news .in-body { font-size: 15px; } #ii.ii--news .in-body h2 { font-size: 20px; } #ii.ii--news .in-rel-row { grid-auto-columns: 62%; } #ii.ii--news .in-abtn { align-self: stretch; } #ii.ii--news .in-layout .in-aside { max-width: none; } #ii.ii--news .in-others { gap: 8px; padding-top: 24px; } #ii.ii--news .in-others .in-grid-list .in-tile:first-child { border-top: 0; } #ii.ii--news.is-bar-on .ii-bar { display: flex; } } @media print { #ii.ii--news .in-share, #ii.ii--news .in-others, #ii.ii--news .in-pager, #ii.ii--news .in-back { display: none !important; } }