/* ========================================================== ZVUKATO NEWS Article page ========================================================== */ /* ---------------------------------------------------------- ARTICLE CONTAINER ---------------------------------------------------------- */ .news-article { width: 100%; max-width: 1040px; margin: 28px 0 64px; padding: 42px 48px 50px; box-sizing: border-box; background: linear-gradient( 145deg, rgba(17, 43, 63, 0.96), rgba(8, 29, 47, 0.98) ); border: 1px solid rgba(48, 215, 216, 0.16); border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.16); } /* ---------------------------------------------------------- HEADER ---------------------------------------------------------- */ .news-article__header { width: 100%; max-width: 900px; margin: 0 auto 30px; } /* ---------------------------------------------------------- META ---------------------------------------------------------- */ .news-article__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; font-size: 13px; line-height: 1.4; } .news-article__type { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 11px; box-sizing: border-box; color: #2de2d6; background: rgba(45, 226, 214, 0.08); border: 1px solid rgba(45, 226, 214, 0.20); border-radius: 999px; font-weight: 700; } .news-article__date { color: rgba(222, 235, 246, 0.62); } /* ---------------------------------------------------------- TITLE ---------------------------------------------------------- */ .news-article__title { max-width: 900px; margin: 0; color: #ffffff; font-size: clamp(30px, 3vw, 46px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 800; } /* ---------------------------------------------------------- HERO IMAGE ---------------------------------------------------------- */ .news-article__hero { width: 100%; max-width: 944px; margin: 0 auto 38px; overflow: hidden; border-radius: 16px; border: 1px solid rgba(45, 226, 214, 0.14); background: rgba(8, 27, 44, 0.8); } .news-article__hero img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; } /* ---------------------------------------------------------- ARTICLE BODY ---------------------------------------------------------- */ .news-article__content { width: 100%; max-width: 820px; margin: 0 auto; color: rgba(231, 240, 248, 0.86); font-size: 17px; line-height: 1.78; } /* Paragraphs */ .news-article__content p { margin: 0 0 22px; } /* Section headings */ .news-article__content h2 { position: relative; margin: 42px 0 18px; padding-bottom: 13px; color: #ffffff; font-size: 25px; line-height: 1.25; font-weight: 800; } .news-article__content h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: #2de2d6; border-radius: 2px; } /* H3 */ .news-article__content h3 { margin: 32px 0 14px; color: #ffffff; font-size: 20px; line-height: 1.35; font-weight: 750; } /* Links */ .news-article__content a { color: #36ded8; text-decoration: none; border-bottom: 1px solid rgba(54, 222, 216, 0.32); transition: color 0.18s ease, border-color 0.18s ease; } .news-article__content a:hover { color: #63f2eb; border-bottom-color: #63f2eb; } /* Lists */ .news-article__content ul, .news-article__content ol { margin: 0 0 24px; padding-left: 24px; } .news-article__content li { margin-bottom: 8px; } /* Strong */ .news-article__content strong { color: #ffffff; font-weight: 750; } /* ========================================================== NEWS PAGE HEADER ========================================================== */ .news-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; width: 100%; max-width: 1040px; margin: 28px 0 18px; } .news-page-head__text { min-width: 0; } .news-page-head__eyebrow { display: block; margin-bottom: 6px; color: #2de2d6; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .news-page-head__title { margin: 0; color: #ffffff; font-size: 28px; line-height: 1.2; font-weight: 800; } .news-page-head__subtitle { margin: 6px 0 0; color: rgba(222, 235, 246, 0.62); font-size: 14px; line-height: 1.5; } .news-page-head__back, .news-article__all-news { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; color: #2de2d6; background: rgba(45, 226, 214, 0.07); border: 1px solid rgba(45, 226, 214, 0.18); border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .news-page-head__back:hover, .news-article__all-news:hover { color: #ffffff; background: rgba(45, 226, 214, 0.13); border-color: rgba(45, 226, 214, 0.34); } /* ========================================================== ARTICLE FOOTER ========================================================== */ .news-article__footer { width: 100%; max-width: 820px; margin: 38px auto 0; padding-top: 24px; border-top: 1px solid rgba(45, 226, 214, 0.12); } /* ========================================================== NEWS FEED — ONE COLUMN ========================================================== */ .news-card { display: grid; grid-template-columns: minmax(300px, 390px) minmax(0, 1fr); width: 100%; max-width: 1180px; min-height: 250px; margin: 0 0 28px; overflow: hidden; box-sizing: border-box; background: linear-gradient( 135deg, rgba(17, 45, 66, 0.98), rgba(10, 31, 49, 0.99) ); border: 1px solid rgba(45, 226, 214, 0.16); border-radius: 18px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14); } /* ---------------------------------------------------------- IMAGE ---------------------------------------------------------- */ .news-card__media { position: relative; display: block; width: 100%; height: 100%; min-height: 250px; overflow: hidden; background: rgba(7, 24, 39, 0.85); text-decoration: none; } .news-card__media img { display: block; width: 100%; height: 100%; min-height: 250px; max-height: 310px; object-fit: cover; object-position: center; transition: transform 0.35s ease, opacity 0.35s ease; } .news-card:hover .news-card__media img { transform: scale(1.025); } /* ---------------------------------------------------------- CONTENT ---------------------------------------------------------- */ .news-card__content { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 30px 34px; box-sizing: border-box; } /* ---------------------------------------------------------- META ---------------------------------------------------------- */ .news-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; } .news-card__type { display: inline-flex; align-items: center; padding: 5px 10px; color: #2de2d6; background: rgba(45, 226, 214, 0.08); border: 1px solid rgba(45, 226, 214, 0.20); border-radius: 999px; font-size: 12px; line-height: 1.3; font-weight: 800; } .news-card__date { color: rgba(222, 235, 246, 0.58); font-size: 12px; line-height: 1.4; } /* ---------------------------------------------------------- TITLE ---------------------------------------------------------- */ .news-card__title { margin: 0 0 14px; font-size: 25px; line-height: 1.22; font-weight: 800; } .news-card__title a { color: #ffffff; text-decoration: none; transition: color 0.18s ease; } .news-card__title a:hover { color: #48e4de; } /* ---------------------------------------------------------- EXCERPT ---------------------------------------------------------- */ .news-card__excerpt { max-width: 660px; margin-bottom: 22px; color: rgba(226, 237, 246, 0.74); font-size: 15px; line-height: 1.65; } .news-card__excerpt p { margin: 0; } /* ---------------------------------------------------------- READ MORE ---------------------------------------------------------- */ .news-card__more { display: inline-flex; align-items: center; gap: 9px; width: fit-content; padding: 10px 15px; color: #071823; background: linear-gradient( 135deg, #35ded9, #27cdd9 ); border-radius: 10px; font-size: 13px; line-height: 1; font-weight: 800; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease; } .news-card__more:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(45, 226, 214, 0.16); } /* ========================================================== NEWS ARTICLE — DESKTOP WIDTH BALANCE ========================================================== */ .news-page-head, .news-article { max-width: 1180px; } .news-article { padding: 46px 56px 52px; } .news-article__header { max-width: 940px; } .news-article__content, .news-article__footer { max-width: 860px; } /* ========================================================== NEWS FEED — FINAL BASE CLEANUP ========================================================== */ .news-card { width: 100%; max-width: none; overflow: hidden !important; } .news-card::before, .news-card::after, .news-card__media::before, .news-card__media::after { display: none !important; content: none !important; } .news-card__media { border: 0 !important; box-shadow: none !important; background: transparent !important; } .news-card__media img { box-shadow: none !important; } .section:has(.news-card) { margin-top: 0 !important; padding-bottom: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; } .section:has(.news-card) .news-card { margin-bottom: 0 !important; } /* ---------------------------------------------------------- READ MORE — STABLE TEXT COLOR ---------------------------------------------------------- */ .news-card__more, .news-card__more:link, .news-card__more:visited, .news-card__more:hover, .news-card__more:focus, .news-card__more:active { color: #071823 !important; text-decoration: none !important; } .news-card__more span { color: inherit !important; } /* ========================================================== NEWS FEED — DESKTOP 1281px+ ========================================================== */ @media screen and (min-width: 1281px) { .news-card { display: grid; grid-template-columns: 480px minmax(0, 1fr); align-items: center; min-height: 0; } .news-card__media { display: flex; align-items: center; justify-content: center; width: 100%; height: auto; min-height: 0; padding: 22px 26px; box-sizing: border-box; overflow: hidden; } .news-card__media img { display: block; width: 100%; height: auto; min-width: 0; min-height: 0; max-width: 100%; max-height: none; margin: auto; object-fit: contain; object-position: center; border-radius: 10px; transform: none !important; } .news-card:hover .news-card__media img { transform: none !important; } .news-card__content { display: flex; flex-direction: column; justify-content: center; width: 100%; min-width: 0; padding: 34px 44px; box-sizing: border-box; } .news-card__excerpt { width: 100%; max-width: 900px; } } /* ========================================================== NEWS — RELATED ARTISTS ========================================================== */ .news-artists { margin-top: 46px; padding-top: 30px; border-top: 1px solid rgba(60, 233, 231, 0.12); } .news-artists__header { margin-bottom: 20px; } .news-artists__eyebrow { display: block; margin-bottom: 5px; color: rgba(60, 233, 231, 0.78); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .news-artists__title { margin: 0; color: #f4f8fb; font-size: 22px; font-weight: 800; line-height: 1.25; } .news-artists__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .news-artist-card { display: grid; grid-template-columns: 58px minmax(0, 1fr) 24px; align-items: center; gap: 13px; min-width: 0; padding: 12px 14px; border: 1px solid rgba(60, 233, 231, 0.11); border-radius: 14px; background: rgba(10, 31, 48, 0.58); text-decoration: none !important; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .news-artist-card:hover { transform: translateY(-2px); border-color: rgba(60, 233, 231, 0.34); background: rgba(13, 40, 58, 0.82); } .news-artist-card__photo { display: block; width: 58px; height: 58px; overflow: hidden; border-radius: 50%; background: rgba(255, 255, 255, 0.035); } .news-artist-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .news-artist-card__body { display: block; min-width: 0; } .news-artist-card__name { display: block; overflow: hidden; color: #f3f8fb !important; font-size: 14px; font-weight: 800; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .news-artist-card__label { display: block; margin-top: 4px; overflow: hidden; color: rgba(205, 220, 230, 0.55) !important; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .news-artist-card__arrow { color: rgba(60, 233, 231, 0.78) !important; font-size: 19px; line-height: 1; transition: transform 0.18s ease; } .news-artist-card:hover .news-artist-card__arrow { transform: translateX(3px); } /* ========================================================== NEWS ARTISTS — TABLET ========================================================== */ @media screen and (max-width: 1000px) { .news-artists__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================== NEWS ARTISTS — MOBILE ========================================================== */ @media screen and (max-width: 620px) { .news-artists { margin-top: 34px; padding-top: 24px; } .news-artists__grid { grid-template-columns: 1fr; gap: 10px; } .news-artist-card { grid-template-columns: 52px minmax(0, 1fr) 22px; padding: 10px 12px; } .news-artist-card__photo { width: 52px; height: 52px; } } /* ========================================================== NEWS PAGE HEADER — FINAL POSITION ========================================================== */ .news-page-head { margin-top: 0 !important; margin-bottom: 22px !important; align-items: flex-end; } /* Single clean section title */ .news-page-head__eyebrow { display: none !important; } .news-page-head__title { position: relative; margin: 0 !important; padding-bottom: 12px; color: #ffffff; font-size: 28px; line-height: 1.2; font-weight: 800; } .news-page-head__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px; border-radius: 2px; background: #2de2d6; } .news-page-head__subtitle { margin: 8px 0 0 !important; color: rgba(215, 229, 239, 0.58); font-size: 13px; line-height: 1.5; } /* * News page begins immediately below the common search area. */ .section:has(.news-page-head) { margin-top: 0 !important; padding-top: 0 !important; } @media screen and (max-width: 700px) { .news-page-head { margin-top: 0 !important; margin-bottom: 18px !important; } .news-page-head__title { font-size: 24px; } } /* ========================================================== NEWS FEED — MOBILE META ========================================================== */ .news-card__mobile-meta { display: none; } /* ========================================================== NEWS FEED — MOBILE 375 FINAL ========================================================== */ @media screen and (max-width: 700px) { .news-card { display: flex !important; flex-direction: column !important; padding: 14px 0 0 !important; overflow: hidden; } /* ---------------------------------------------- Meta above artwork ---------------------------------------------- */ .news-card__mobile-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; order: 1; padding: 0 14px 13px; box-sizing: border-box; } /* * Desktop copy of meta is hidden on mobile. */ .news-card__content .news-card__meta { display: none !important; } /* ---------------------------------------------- Artwork ---------------------------------------------- */ .news-card__media { order: 2; width: calc(100% - 28px) !important; height: auto !important; min-height: 0 !important; margin: 0 14px !important; padding: 0 !important; aspect-ratio: auto !important; overflow: hidden; border-radius: 12px; background: transparent !important; } .news-card__media img { display: block; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; object-fit: contain !important; object-position: center !important; border-radius: 12px; } /* ---------------------------------------------- Text content ---------------------------------------------- */ .news-card__content { order: 3; padding: 22px 20px 24px !important; } .news-card__title { margin-top: 0 !important; } } /* ========================================================== SMALL PHONES ========================================================== */ @media screen and (max-width: 390px) { .news-card__media { width: calc(100% - 24px) !important; margin: 0 12px !important; } .news-card__mobile-meta { padding-left: 12px; padding-right: 12px; } .news-card__content { padding-left: 16px !important; padding-right: 16px !important; } } /* ========================================================== NEWS ARTICLE — MOBILE COMPACT FINAL ========================================================== */ @media screen and (max-width: 700px) { /* ---------------------------------------------- Page header ---------------------------------------------- */ .news-page-head { width: 100%; margin: 6px 0 16px !important; align-items: flex-start !important; text-align: left !important; } .news-page-head__text { width: 100%; } .news-page-head__title { margin: 0 !important; padding-bottom: 10px; font-size: 24px !important; line-height: 1.15 !important; text-align: left !important; } .news-page-head__subtitle { margin: 7px 0 0 !important; font-size: 13px; line-height: 1.4; text-align: left !important; } .news-page-head__back { margin-top: 8px; align-self: flex-start; } /* ---------------------------------------------- Article card ---------------------------------------------- */ .news-article { margin: 0 0 30px !important; padding: 22px 16px 28px !important; border-radius: 16px; } /* ---------------------------------------------- Article header ---------------------------------------------- */ .news-article__header { margin: 0 0 20px !important; max-width: none; } .news-article__meta { margin-bottom: 10px !important; gap: 8px; } .news-article__title { margin: 0 !important; font-size: 28px !important; line-height: 1.13 !important; letter-spacing: -0.02em; } /* ---------------------------------------------- Hero image ---------------------------------------------- */ .news-article__hero { margin: 0 0 24px !important; border-radius: 12px; } /* ---------------------------------------------- Article content ---------------------------------------------- */ .news-article__content { max-width: none; font-size: 16px !important; line-height: 1.62 !important; } .news-article__content p { margin: 0 0 15px !important; } .news-article__content h2 { margin: 28px 0 14px !important; padding-bottom: 10px !important; font-size: 21px !important; line-height: 1.25 !important; } .news-article__content h3 { margin: 24px 0 12px !important; font-size: 18px !important; } /* ---------------------------------------------- Related artists ---------------------------------------------- */ .news-artists { margin-top: 30px !important; padding-top: 22px !important; } .news-artists__header { margin-bottom: 14px !important; } .news-article__footer { margin-top: 28px !important; padding-top: 20px !important; } } /* ========================================================== NEWS ARTICLE — SMALL PHONE 390 ========================================================== */ @media screen and (max-width: 390px) { .news-page-head { margin-bottom: 14px !important; } .news-page-head__title { font-size: 23px !important; } .news-article { padding: 20px 14px 26px !important; } .news-article__title { font-size: 25px !important; line-height: 1.12 !important; } .news-article__content { font-size: 15px !important; line-height: 1.58 !important; } .news-article__content p { margin-bottom: 14px !important; } .news-article__content h2 { margin-top: 25px !important; font-size: 20px !important; } } /* ========================================================== NEWS CARD — STACKED TABLET / COMPACT DESKTOP 701px–1280px ========================================================== */ @media screen and (min-width: 701px) and (max-width: 1280px) { .news-card { display: flex !important; flex-direction: column !important; width: 100% !important; min-height: 0 !important; height: auto !important; padding: 24px 26px 28px !important; box-sizing: border-box; gap: 0 !important; } /* ------------------------------------------------------ TOP META ------------------------------------------------------ */ .news-card__mobile-meta { display: flex !important; align-items: center; flex-wrap: wrap; gap: 10px; order: 1; width: 100%; margin: 0 0 10px !important; padding: 0 !important; } /* * Avoid duplicate meta inside content. */ .news-card__content .news-card__meta { display: none !important; } /* ------------------------------------------------------ CONTENT BECOMES TRANSPARENT WRAPPER ------------------------------------------------------ */ .news-card__content { display: contents !important; } /* ------------------------------------------------------ TITLE ABOVE IMAGE ------------------------------------------------------ */ .news-card__title { order: 2; width: 100%; margin: 0 0 20px !important; font-size: clamp(23px, 3vw, 30px) !important; line-height: 1.18 !important; letter-spacing: -0.015em; } /* ------------------------------------------------------ IMAGE ------------------------------------------------------ */ .news-card__media { order: 3; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 0 22px !important; padding: 0 !important; aspect-ratio: auto !important; background: transparent !important; overflow: hidden; border-radius: 12px; } .news-card__media img { display: block !important; width: 100% !important; height: auto !important; max-width: 760px !important; max-height: none !important; margin: auto !important; object-fit: contain !important; object-position: center !important; border-radius: 12px; } /* ------------------------------------------------------ EXCERPT BELOW IMAGE ------------------------------------------------------ */ .news-card__excerpt { order: 4; width: 100% !important; max-width: none !important; margin: 0 0 18px !important; font-size: 15px !important; line-height: 1.6 !important; } /* ------------------------------------------------------ BUTTON ------------------------------------------------------ */ .news-card__more { order: 5; align-self: flex-start; margin: 0 !important; } } /* ========================================================== NARROW TABLET 701px–850px ========================================================== */ @media screen and (min-width: 701px) and (max-width: 850px) { .news-card { padding: 22px 20px 24px !important; } .news-card__title { margin-bottom: 18px !important; font-size: 24px !important; } .news-card__media { margin-bottom: 18px !important; } .news-card__media img { max-width: 620px !important; } .news-card__excerpt { font-size: 14px !important; line-height: 1.55 !important; } } /* ========================================================== NEWS — FINAL RESPONSIVE SPACING ========================================================== */ /* ========================================================== 1. PHONE — KEEP "УСІ НОВИНИ" IN ONE LINE ========================================================== */ @media screen and (max-width: 700px) { .news-page-head__back, .news-article__all-news { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; padding: 10px 13px !important; font-size: 13px !important; line-height: 1 !important; white-space: nowrap !important; flex: 0 0 auto !important; } .news-page-head { gap: 10px !important; } } /* ========================================================== 2. iPAD AIR / 701–850 REDUCE VERTICAL EMPTY SPACE ========================================================== */ @media screen and (min-width: 701px) and (max-width: 850px) { .news-page-head { margin-bottom: 14px !important; } .news-card { padding: 18px 20px 20px !important; } .news-card__mobile-meta { margin-bottom: 6px !important; } .news-card__title { margin-bottom: 14px !important; } .news-card__media { margin-bottom: 14px !important; } .news-card__excerpt { margin-bottom: 14px !important; } .news-card__more { margin-top: 0 !important; } } /* ========================================================== 3. iPAD PRO / 851–1100 RAISE HEADER + CARD ========================================================== */ @media screen and (min-width: 851px) and (max-width: 1100px) { .section:has(.news-page-head) { margin-top: 0 !important; padding-top: 0 !important; } .news-page-head { margin-top: 0 !important; margin-bottom: 12px !important; } .news-card { margin-top: 0 !important; padding: 20px 24px 22px !important; } .news-card__mobile-meta { margin-bottom: 6px !important; } .news-card__title { margin-bottom: 16px !important; } .news-card__media { margin-bottom: 16px !important; } .news-card__excerpt { margin-bottom: 14px !important; } } /* ========================================================== 4. REDUCE GAP BEFORE FOOTER ========================================================== */ @media screen and (min-width: 701px) { .section:has(.news-card) { margin-bottom: 0 !important; padding-bottom: 0 !important; } .news-card { margin-bottom: 20px !important; } .site-footer { margin-top: 24px !important; } } /* Wider desktop can keep a little more breathing room */ @media screen and (min-width: 1281px) { .site-footer { margin-top: 34px !important; } } /* ========================================================== NEWS — FINAL SPACING TIGHTEN ========================================================== */ /* ========================================================== 1. MOBILE <=700 IMAGE -> TEXT CLOSER LESS SPACE AROUND "УСІ НОВИНИ" ========================================================== */ @media screen and (max-width: 700px) { .news-card__media { margin-bottom: 14px !important; } .news-card__excerpt { margin-top: 0 !important; margin-bottom: 14px !important; } .news-page-head { margin-bottom: 12px !important; } .news-page-head__back { margin-top: 4px !important; margin-bottom: 0 !important; } .news-article__all-news, .news-page-head__back { padding: 9px 12px !important; } .news-article__footer { margin-top: 20px !important; padding-top: 16px !important; } .news-artists { margin-top: 22px !important; padding-top: 18px !important; } } /* ========================================================== 2. 701–850 IMAGE -> TEXT CLOSER LESS AIR AROUND CTA ========================================================== */ @media screen and (min-width: 701px) and (max-width: 850px) { .news-card__media { margin-bottom: 12px !important; } .news-card__excerpt { margin-top: 0 !important; margin-bottom: 12px !important; } .news-card__more { margin-top: 0 !important; } .news-article__hero { margin-bottom: 18px !important; } .news-article__content { padding-top: 0 !important; } .news-article__footer { margin-top: 20px !important; padding-top: 16px !important; } .news-artists { margin-top: 22px !important; padding-top: 18px !important; } } /* ========================================================== 3. 851–1100 MOVE PAGE TITLE + ARTICLE CARD UP ========================================================== */ @media screen and (min-width: 851px) and (max-width: 1100px) { .main__inner { padding-top: 10px !important; } .news-page-head { margin-top: 0 !important; margin-bottom: 10px !important; } .section:has(.news-page-head) { margin-top: 0 !important; padding-top: 0 !important; } .news-card { margin-top: 0 !important; } .news-article { margin-top: 0 !important; } .news-article__header { margin-bottom: 16px !important; } .news-article__hero { margin-bottom: 18px !important; } .news-article__content { padding-top: 0 !important; } .news-page-head__back { margin-top: 0 !important; } } /* ========================================================== 4. ARTICLE CTA "УСІ НОВИНИ" REDUCE SPACE BELOW ========================================================== */ .news-article__footer { margin-bottom: 0 !important; } .news-article__all-news { margin-bottom: 0 !important; } /* ========================================================== 5. RELATED ARTISTS -> FOOTER REDUCE LARGE EMPTY GAP ========================================================== */ .news-artists { margin-bottom: 0 !important; } .news-article { margin-bottom: 0 !important; } @media screen and (min-width: 701px) { .site-footer { margin-top: 18px !important; } } @media screen and (max-width: 700px) { .site-footer { margin-top: 16px !important; } } /* ========================================================== 6. 1024 / 1100 RANGE EXTRA TIGHT TOP SPACING ========================================================== */ @media screen and (min-width: 950px) and (max-width: 1100px) { .topbar { margin-bottom: 22px !important; } .news-page-head { margin-bottom: 8px !important; } .news-card { margin-top: 0 !important; } } /* ========================================================== NEWS — SIDEBAR + ARTICLE FINAL ALIGNMENT ========================================================== */ /* ========================================================== 1. DESKTOP / TABLET SIDEBAR MOVE NAVIGATION CLOSER TO LOGO ========================================================== */ @media screen and (min-width: 901px) { html body .sidebar__nav { position: relative !important; top: -46px !important; } /* * News button belongs visually to the same navigation * group, so move it by the same amount. */ html body .sidebar-news { position: relative !important; top: -46px !important; } } /* ========================================================== 2. ARTICLE IMAGE -> TEXT REDUCE EMPTY SPACE ON ALL WIDTHS ========================================================== */ .news-article__hero { margin-bottom: 14px !important; } .news-article__hero + .news-article__content { margin-top: 0 !important; padding-top: 0 !important; } .news-article__content > p:first-child { margin-top: 0 !important; } /* ========================================================== 3. TABLET / COMPACT DESKTOP ========================================================== */ @media screen and (min-width: 701px) and (max-width: 1280px) { .news-article__hero { margin-bottom: 12px !important; } .news-article__content { margin-top: 0 !important; padding-top: 0 !important; } .news-article__content > p:first-child { margin-top: 0 !important; } } /* ========================================================== 4. MOBILE ========================================================== */ @media screen and (max-width: 700px) { .news-article__hero { margin-bottom: 10px !important; } .news-article__content { margin-top: 0 !important; padding-top: 0 !important; } .news-article__content > p:first-child { margin-top: 0 !important; } } /* ========================================================== 5. VERY SMALL PHONES ========================================================== */ @media screen and (max-width: 390px) { .news-article__hero { margin-bottom: 8px !important; } } /* ========================================================== NEWS — FINAL VISUAL GAP + 1280 SIDEBAR ALIGNMENT 2026-08-22 ========================================================== */ /* ========================================================== 1. ARTICLE IMAGE -> FIRST CONTENT ELEMENT Do not depend on p:first-child. Reset top margin of whatever element DLE puts first inside full-story. ========================================================== */ .news-article__hero { margin-bottom: 16px !important; } .news-article__content { margin-top: 0 !important; padding-top: 0 !important; } .news-article__content > :first-child { margin-top: 0 !important; } /* ========================================================== 2. TABLET / COMPACT DESKTOP ========================================================== */ @media screen and (min-width: 701px) and (max-width: 1280px) { .news-article__hero { margin-bottom: 16px !important; } .news-article__content > :first-child { margin-top: 0 !important; } } /* ========================================================== 3. MOBILE ========================================================== */ @media screen and (max-width: 700px) { .news-article__hero { margin-bottom: 14px !important; } .news-article__content > :first-child { margin-top: 0 !important; } } /* ========================================================== 4. COMPACT DESKTOP SIDEBAR 1200–1280 Previous global desktop rule = -46px. At this width we need the first nav item lower, approximately level with the NEWS heading. ========================================================== */ @media screen and (min-width: 1200px) and (max-width: 1280px) { html body .sidebar__nav { top: -8px !important; } html body .sidebar-news { top: -8px !important; } } /* ========================================================== NEWS ARTICLE — REMOVE EMPTY DLE PARAGRAPH DLE full-story may begin with:


That empty paragraph creates the false large gap between the hero image and the first real paragraph. ========================================================== */ .news-article__content > p:first-child:has(> br:only-child) { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; line-height: 0 !important; } /* Keep the first REAL paragraph tight to the artwork */ .news-article__content > p:first-child:has(> br:only-child) + p { margin-top: 0 !important; } /* ========================================================== SIDEBAR — RESTORE ORIGINAL DESKTOP POSITION news.css is loaded globally, so news-page experiments must not move the site's primary navigation. ========================================================== */ @media screen and (min-width: 901px) { html body .sidebar__nav { position: static !important; top: auto !important; } html body .sidebar-news { position: static !important; top: auto !important; } } /* ========================================================== NEWS — FINAL SPACING + FULL ARTICLE IMAGE FIX ========================================================== */ /* Space between cards on /news/ */ .news-card { margin-bottom: 28px !important; } /* Show the complete article cover without cropping */ .news-article__hero img { width: 100%; height: auto; max-height: none; object-fit: contain; object-position: center; } /* ========================================================== NEWS FEED — GUARANTEED GAP BETWEEN CARDS ========================================================== */ .news-card + .news-card { margin-top: 24px !important; } /* ========================================================== NEWS FEED — FINAL CLEAN LAYOUT ========================================================== */ /* * Remove generic track-list panel only when * #dle-content contains news cards. */ #dle-content.track-list:has(> .news-card) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; } /* Do not use old card bottom margin for spacing */ #dle-content.track-list > .news-card { margin-bottom: 0 !important; } /* Clear visible space between news cards */ #dle-content.track-list > .news-card + .news-card { margin-top: 36px !important; }