/* ============================================================ Nordic Club UA — pages/news.css Новини клубу: news.html (список і окрема новина) та блок «Новини клубу» на index.html. Підключається ОСТАННІМ, після animations.css (на головній — після pages/index.css). УСІ СЕЛЕКТОРИ — .news-*. Файл вантажиться й на головній, тому загальні класи (.page-header, .section, .card) тут НЕ перевизначаються — лише уточнюються в парі з .news-*. Тільки токени та поверхневі змінні --c-*; жодних !important. ============================================================ */ /* ---- Стан до відповіді бази на ?n= ---- html.news-slug ставить інлайновий скрипт у news.html; news.js знімає клас за будь-якого результату. */ .news-slug [data-news-head="list"], .news-slug [data-news-list-section] { visibility: hidden; } /* ---- Шапка ---- */ .news-header .page-header__media img { opacity: 0.34; } .news-header .page-header__inner { position: relative; z-index: 1; } .news-header__list .page-header__lead { margin-inline: auto; } .news-header__article { max-width: 70ch; margin-inline: auto; } .news-header__title { font-size: var(--fs-h2); max-width: 26ch; overflow-wrap: break-word; } .news-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-block-end: 18px; font-size: var(--fs-sm); color: var(--c-muted); } .news-header__meta:empty { display: none; } .news-back { margin-block-end: clamp(24px, 4vw, 40px); font-size: var(--fs-sm); } .news-back__link { color: var(--c-muted); text-decoration: none; transition: color var(--t-fast) var(--ease-ui); } .news-back__link:hover { color: var(--c-text); text-decoration: underline; text-underline-offset: 3px; } /* ---- Сітка карток ---- */ .news-grid { align-items: stretch; } /* ---- Картка новини ---- База — .card з components.css. Картинка йде в край картки, тому внутрішні поля несе тіло, а не сама картка. Уся картка клікабельна через розтягнуте посилання заголовка (::before на весь розмір). */ .card.news-card { padding: 0; gap: 0; overflow: hidden; } /* overflow: hidden не лише для zoom-ефекту: без нього flex-елемент з aspect-ratio розтягується під вертикальний постер (min-height: auto). */ .news-card__media { aspect-ratio: 16 / 9; overflow: hidden; min-height: 0; background: var(--c-surface); border-block-end: 1px solid var(--c-line); } .news-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; /* Постери клубу вертикальні, а головне в них — угорі (заголовок, лого). */ object-position: center 22%; transition: transform var(--t-slow) var(--ease-ui); } .news-card:hover .news-card__media img { transform: scale(1.03); } .news-card__media--empty { background: radial-gradient(60% 80% at 80% 100%, var(--gold-glow), transparent 70%), var(--c-surface); } .news-card__body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: clamp(22px, 2.6vw, 30px); } /* Рядок дати однакової висоти з позначкою «Важливе» і без неї — інакше заголовки сусідніх карток стоять на різній висоті. */ .news-card .card__meta { min-height: 28px; } .news-card .card__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } .news-card__link { color: inherit; text-decoration: none; } .news-card__link::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .news-card__link:focus-visible { outline: none; } .news-card:has(.news-card__link:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 3px; } .news-card__more { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 500; color: var(--c-text); } .news-card__more .icon { width: 18px; height: 18px; color: var(--c-accent-text); transition: transform var(--t-fast) var(--ease-ui); } .news-card:hover .news-card__more .icon { transform: translateX(4px); } /* ---- Новина ---- */ .news-article-section { padding-block: var(--sect-pad-tight) var(--sect-pad); } .news-article { max-width: 70ch; margin-inline: auto; } .news-article__media { margin-block-end: clamp(32px, 5vw, 56px); border-radius: var(--r); overflow: hidden; background: var(--paper-50); border: 1px solid var(--c-line); } /* Постери бувають і вертикальні (1212×1600): стеля висоти, а не обрізання — на картинках буває текст. */ .news-article__media img { display: block; width: 100%; height: auto; max-height: min(78vh, 820px); object-fit: contain; } .news-article__note { margin-block-end: 24px; padding: 12px 16px; border-inline-start: 2px solid var(--gold-500); background: var(--c-surface); font-size: var(--fs-sm); color: var(--c-muted); } .news-article__cta { margin-block-start: clamp(36px, 5vw, 56px); } /* ---- Текст новини ---- */ .news-prose { font-size: var(--fs-body); line-height: var(--lh-body); overflow-wrap: break-word; } .news-prose > * + * { margin-block-start: 1.1em; } .news-prose > p:first-child { font-size: var(--fs-lead); line-height: 1.55; color: var(--c-text); } /* Абзац, що закінчується «:», — вступ до списку нижче. */ .news-prose > .news-prose__intro { margin-block-start: 1.8em; font-weight: 600; color: var(--c-text); } .news-prose > .news-prose__intro + * { margin-block-start: 0.7em; } .news-prose a { overflow-wrap: anywhere; } /* Нумерований список модулів: число — акцентом, назва — жирним, опис — тихіше. Список, що починається не з 1, news.js зсуває інлайновим counter-reset. */ .news-steps { list-style: none; padding: 0; counter-reset: news-step; display: grid; gap: 18px; } .news-steps__item { position: relative; counter-increment: news-step; padding-inline-start: 3.1em; } .news-steps__item::before { content: counter(news-step); position: absolute; inset-inline-start: 0; inset-block-start: 0.05em; width: 2.1em; height: 2.1em; display: grid; place-items: center; border: 1px solid var(--c-accent-text); border-radius: 50%; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--c-accent-text); } .news-steps__title { display: block; font-family: var(--font-display); font-weight: 700; color: var(--c-text); line-height: var(--lh-sub); } .news-steps__text { margin-block-start: 4px; color: var(--c-muted); } /* ---- Список, «Інші новини», порожній стан ---- */ .news-list-section { padding-block-start: clamp(56px, 7vw, 96px); } .news-foot { margin-block-start: clamp(36px, 5vw, 64px); } .news-note { padding: clamp(32px, 5vw, 56px); border: 1px solid var(--c-line); border-radius: var(--r); text-align: center; } .news-note .btn-row { justify-content: center; margin-block-start: 20px; } @media (prefers-reduced-motion: reduce) { .news-card__media img, .news-card__more .icon { transition: none; } .news-card:hover .news-card__media img { transform: none; } }