/* ========================================================= NEWS ARTICLE PAGE — pixel-perfect to Figma 1920 ========================================================= */ .big_block_home--news { background: #FFFFFF; height: auto; min-height: 0; position: relative; } .big_block_home--news > .container { padding: 0; height: auto; } /* Mega-menu logo override */ .big_block_home--news header .mega-menu .logo img { filter: none; } /* Vertical rails — Figma Lines 64 (x=1824) & 100 (x=96). Rails are placed on so they span the full document height (article + footer) as a single continuous line, not two segments. */ body:has(.big_block_home--news) { position: relative; } body:has(.big_block_home--news)::before, body:has(.big_block_home--news)::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1.6px; background: #E1E1E1; z-index: 200; pointer-events: none; } body:has(.big_block_home--news)::before { left: max(96px, calc(50% - 864px)); } body:has(.big_block_home--news)::after { right: max(96px, calc(50% - 864px)); } /* Footer covers the body rails — it has its own dark frame & borders, so the body rail must not bleed through inside the footer. */ body:has(.big_block_home--news) footer { position: relative; z-index: 300; } /* Tablet/laptop ≤1500px: header padding is 60px in this range, so the rails must sit 60px from each edge to wrap around the header instead of slicing through it (Figma pixel-perfect 1920 keeps 96px; this covers 1200–1500). */ @media (max-width: 1500px) { body:has(.big_block_home--news)::before { left: 60px; } body:has(.big_block_home--news)::after { right: 60px; } .big_block_home--news header .about_block .top_header_group::after { left: 60px; right: 60px; } } /* Phone ≤768px: rails sit at the article container gutter (30px) */ @media (max-width: 768px) { body:has(.big_block_home--news)::before { left: 30px; } body:has(.big_block_home--news)::after { right: 30px; } .big_block_home--news header .about_block .top_header_group::after { left: 30px; right: 30px; } } /* Phone ≤360px: rails hug the screen edges so they never cross text */ @media (max-width: 360px) { body:has(.big_block_home--news)::before { left: 16px; } body:has(.big_block_home--news)::after { right: 16px; } .big_block_home--news header .about_block .top_header_group::after { left: 16px; right: 16px; } } /* Hide rails when mega-menu is open */ body:has(.mega-menu.active) .big_block_home--news::before, body:has(.mega-menu.active) .big_block_home--news::after { display: none; } /* Crop the header's full-width horizontal divider so it doesn't cross the rails */ .big_block_home--news header .about_block .top_header_group { border-bottom: 0; position: relative; } .big_block_home--news header .about_block .top_header_group::after { content: ""; position: absolute; left: max(96px, calc(50% - 864px)); right: max(96px, calc(50% - 864px)); bottom: 0; height: 1px; background: #010101; pointer-events: none; } /* ----- ARTICLE BLOCK ----- */ .news_article { background: #FFFFFF; padding: 64px 0 96px; } .news_article__breadcrumbs { display: inline-flex; align-items: center; gap: 8px; font-family: "Inter", sans-serif; font-weight: 300; font-size: 25px; line-height: 130%; color: #C4C4C4; margin: 0 0 64px; } .news_article__breadcrumbs a, .news_article__breadcrumbs span { color: #C4C4C4; text-decoration: none; transition: color .2s; } .news_article__breadcrumbs a:hover { color: #010101; } .news_article__layout { display: grid; /* Figma: sidebar 642 (94 padding + 510 + ~38 gap) | main 1184 */ grid-template-columns: 642fr 1184fr; position: relative; z-index: 250; } /* When mega-menu overlay is open, drop the layout's z-index so its photo/text doesn't punch through the menu's white background. */ body:has(.mega-menu.active) .news_article__layout { z-index: 1; } /* Sidebar (left) — subcategory + date. Content is pushed down so the subcategory aligns with the article photo top and the date sits around the photo bottom area (per Figma). */ .news_article__sidebar { padding-right: 32px; /* Title (h=176) + 32 margin-bottom + ~24 visual offset ≈ 232 */ padding-top: 232px; } .news_article__category { font-family: "Felidae", "Cormorant Garamond", serif; font-weight: 400; font-size: 44px; line-height: 110%; letter-spacing: 0.02em; color: #010101; margin: 0; max-width: 510px; } .news_article__date { display: block; font-family: "Inter", sans-serif; font-weight: 300; font-size: 32px; line-height: 120%; color: #C4C4C4; /* Position date around the photo bottom (Figma: ~424px below subcategory) */ margin-top: 424px; } /* Main (right) — title + photo + body */ .news_article__main { max-width: 1184px; } .news_article__title { font-family: "Felidae", "Cormorant Garamond", serif; font-weight: 400; font-size: 80px; line-height: 110%; letter-spacing: 0.02em; color: #010101; text-transform: uppercase; margin: 0 0 32px; max-width: 1182px; } .news_article__photo { width: 100%; margin-bottom: 32px; } .news_article__photo img { width: 100%; height: 598px; object-fit: cover; display: block; } .news_article__lead { font-family: "Inter", sans-serif; font-weight: 300; font-size: 25px; line-height: 130%; color: #3C3C3B; margin: 0 0 64px; max-width: 1115px; } .news_article__h2 { /* Figma 1920/H2: Felidae 400 / 44px / 110% / letter-spacing 2% + 0.32px stroke #010101 */ font-family: "Felidae", "Cormorant Garamond", serif; font-weight: 400; font-size: 44px; line-height: 110%; letter-spacing: 0.02em; color: #010101; -webkit-text-stroke: 0.32px #010101; margin: 0 0 32px; max-width: 848px; } .news_article__h3 { /* Figma 1920/T2 (upp): Inter Light 300 / 32px / 120% / letter-spacing 0% / uppercase / #3C3C3B */ font-family: "Inter", sans-serif; font-weight: 300; font-size: 32px; line-height: 120%; color: #3C3C3B; margin: 32px 0 16px; text-transform: uppercase; letter-spacing: 0; } .news_article__p { font-family: "Inter", sans-serif; font-weight: 300; font-size: 25px; line-height: 130%; color: #3C3C3B; margin: 0 0 16px; max-width: 1085px; } /* ========================================================= ADAPTIVE — 1200px (Figma 1200_НОВОСТЬ: 1200x2377) Title 50px Felidae, sidebar category 28px Felidae, date 20px Inter, section h2 28px Felidae, body 16px Inter, h3 sub 20px Inter ========================================================= */ @media (max-width: 1200px) { .news_article { padding: 48px 0 64px; } .news_article__breadcrumbs { padding: 0 60px; margin-bottom: 32px; font-size: 16px; gap: 6px; } .news_article__layout { padding: 0 60px; grid-template-columns: 320px 1fr; } .news_article__category { font-size: 28px; line-height: 110%; letter-spacing: 0.02em; margin-bottom: 24px; } .news_article__date { font-size: 20px; line-height: 120%; margin-top: 380px; } .news_article__sidebar { padding-top: 200px; padding-right: 24px; } .news_article__title { font-size: 50px; line-height: 110%; letter-spacing: 0.02em; max-width: 740px; margin-bottom: 32px; } .news_article__photo img { height: 420px; } .news_article__lead { font-size: 16px; line-height: 150%; margin-bottom: 32px; max-width: 700px; } .news_article__h2 { font-size: 28px; line-height: 110%; letter-spacing: 0.02em; margin-bottom: 16px; max-width: 678px; } .news_article__h3 { font-size: 20px; line-height: 120%; letter-spacing: 0.02em; margin: 24px 0 12px; max-width: 370px; } .news_article__p { font-size: 16px; line-height: 150%; margin-bottom: 16px; max-width: 700px; } } /* ========================================================= ADAPTIVE — 768px (Figma 768_НОВОСТЬ: 768x1773) Title 35px Felidae, category 20px Felidae, body 14px Inter ========================================================= */ @media (max-width: 768px) { .news_article { padding: 32px 0 48px; } .news_article__breadcrumbs { padding: 0 30px; margin-bottom: 24px; font-size: 12px; gap: 6px; } .news_article__layout { padding: 0 30px; grid-template-columns: 1fr; gap: 16px; } .news_article__sidebar { padding-right: 0; padding-top: 0; } .news_article__category { font-size: 20px; line-height: 110%; letter-spacing: 0.02em; margin-bottom: 8px; } .news_article__date { font-size: 14px; margin-top: 0; } .news_article__title { font-size: 35px; line-height: 110%; letter-spacing: 0.02em; margin-bottom: 16px; } .news_article__photo img { height: 320px; } .news_article__lead { font-size: 14px; line-height: 150%; margin-bottom: 24px; max-width: 100%; } .news_article__h2 { font-size: 20px; line-height: 110%; letter-spacing: 0.02em; margin-bottom: 12px; max-width: 100%; } .news_article__h3 { font-size: 16px; margin: 16px 0 8px; } .news_article__p { font-size: 14px; line-height: 150%; max-width: 100%; } } /* ========================================================= ADAPTIVE — 360px (Figma 360_НОВОСТЬ: 360x2671) Title 30px Felidae, category 20px Felidae, body 14px Inter ========================================================= */ @media (max-width: 360px) { .news_article { padding: 24px 0 32px; } .news_article__breadcrumbs { padding: 0 16px; margin-bottom: 16px; font-size: 12px; gap: 4px; } .news_article__layout { padding: 0 16px; grid-template-columns: 1fr; gap: 12px; } .news_article__sidebar { padding-right: 0; padding-top: 0; } .news_article__category { font-size: 20px; margin-bottom: 4px; } .news_article__date { font-size: 12px; margin-top: 0; } .news_article__title { font-size: 30px; line-height: 110%; letter-spacing: 0.02em; margin-bottom: 16px; } .news_article__photo img { height: 200px; } .news_article__lead { font-size: 14px; line-height: 150%; margin-bottom: 16px; } .news_article__h2 { font-size: 20px; line-height: 110%; margin-bottom: 12px; } .news_article__h3 { font-size: 14px; margin: 16px 0 8px; } .news_article__p { font-size: 14px; line-height: 150%; margin-bottom: 12px; } }