/* Start:/local/templates/turbolemons-template/components/bitrix/news/.default/style.css?178749291259775*/ /* ========================================================================== BLOG ========================================================================== */ .blog-page, .blog-page *, .blog-page *::before, .blog-page *::after{ box-sizing:border-box; } /* ========================================================================== PAGE LAYOUT 1920: padding left/right = 90px content = 1740px 300 + 48 + 984 + 48 + 360 = 1740 ========================================================================== */ .blog-page{ width:100%; display:grid; grid-template-columns:300px 984px 360px; align-items:start; column-gap:48px; padding:72px 90px; background:#FFFFFF; } /* ========================================================================== LEFT MENU ========================================================================== */ .blog-page__menu{ width:300px; border-right:1px solid rgba(82,82,82,.16); } .blog-menu{ width:299px; display:flex; flex-direction:column; align-items:stretch; } .blog-menu__item{ width:299px; height:56px; display:flex; align-items:center; padding:0 16px; font-family:Inter,sans-serif; font-style:normal; font-weight:500; font-size:16px; line-height:22px; letter-spacing:-.4px; color:#A3A3A3; text-decoration:none; background:#FFFFFF; transition: color .2s ease, background .2s ease; } .blog-menu__item.is-active{ color:#171717; } .blog-menu__item:hover{ color:#171717; } /* ========================================================================== CENTER ========================================================================== */ .blog-page__content{ width:984px; display:flex; flex-direction:column; align-items:stretch; gap:32px; } /* ========================================================================== COMMON BADGE ========================================================================== */ .blog-badge{ width:max-content; min-width:58px; height:24px; display:inline-flex; flex-direction:row; justify-content:center; align-items:center; padding:0 8px; background:#F5F5F5; font-family:Inter,sans-serif; font-style:normal; font-weight:500; font-size:14px; line-height:18px; letter-spacing:-.3px; color:#171717; white-space:nowrap; } /* ========================================================================== META ========================================================================== */ .blog-meta{ width:100%; min-height:22px; display:flex; flex-direction:row; align-items:center; gap:8px; font-family:Inter,sans-serif; font-style:normal; font-weight:400; font-size:16px; line-height:22px; letter-spacing:-.4px; color:#A3A3A3; } /* ========================================================================== IMAGE PLACEHOLDER ========================================================================== */ .blog-image-placeholder{ width:100%; height:100%; display:block; background:#F5F5F5; } /* ========================================================================== MAIN CARD ========================================================================== */ .blog-main-card{ width:984px; display:flex; flex-direction:column; align-items:stretch; gap:20px; background:#FFFFFF; } /* ========================================================================== MAIN CARD IMAGE Figma: 984 x 538.9 ========================================================================== */ .blog-main-card__image-wrapper{ position:relative; width:984px; height:538.9px; display:block; overflow:hidden; border:1px solid rgba(82,82,82,.16); background:#F5F5F5; text-decoration:none; } .blog-main-card__image{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; } .blog-main-card__image-wrapper:hover .blog-main-card__image{ transform:scale(1.015); } /* ========================================================================== MAIN CARD INFO ========================================================================== */ .blog-main-card__info{ width:984px; display:flex; flex-direction:column; align-items:flex-start; gap:20px; } .blog-main-card__top{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:12px; } /* ========================================================================== MAIN CARD TITLE Figma: Roboto Flex 40 / 38 ========================================================================== */ .blog-main-card__title{ width:100%; margin:0; font-family:"Roboto Flex Custom",sans-serif; font-style:italic; font-weight:700; font-size:40px; line-height:38px; letter-spacing:-1.2px; color:#171717; text-decoration:none; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .blog-main-card__title:hover{ opacity:.72; } /* ========================================================================== SMALL ARTICLES LIST ========================================================================== */ .blog-list{ width:984px; display:flex; flex-direction:column; align-items:stretch; gap:32px; } /* ========================================================================== SMALL CARD Figma: width = 984 height = 188 image = 280 gap = 12 info = 692 280 + 12 + 692 = 984 ========================================================================== */ .blog-small-card{ width:984px; height:188px; display:flex; flex-direction:row; justify-content:flex-start; align-items:stretch; gap:12px; background:#FFFFFF; } .blog-small-card.is-hidden{ display:none; } /* ========================================================================== SMALL CARD IMAGE ========================================================================== */ .blog-small-card__image-wrapper{ position:relative; width:280px; height:188px; flex:0 0 280px; display:block; overflow:hidden; border:1px solid rgba(82,82,82,.16); background:#F5F5F5; text-decoration:none; } .blog-small-card__image{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .35s ease; } .blog-small-card__image-wrapper:hover .blog-small-card__image{ transform:scale(1.025); } /* ========================================================================== PLAY BUTTON ========================================================================== */ .blog-small-card__play{ position:absolute; left:50%; top:50%; width:48px; height:48px; display:flex; align-items:center; justify-content:center; transform:translate(-50%,-50%); border-radius:999px; background:#FFFFFF; pointer-events:none; } .blog-small-card__play svg{ display:block; width:24px; height:24px; } /* ========================================================================== SMALL CARD INFO ========================================================================== */ .blog-small-card__info{ width:692px; height:188px; flex:0 0 692px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; gap:8px; } .blog-small-card__top{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:8px; } /* ========================================================================== SMALL CARD TITLE Figma: 24 / 28 ========================================================================== */ .blog-small-card__title{ width:100%; margin:0; font-family:"Roboto Flex Custom",sans-serif; font-style:italic; font-weight:700; font-size:24px; line-height:28px; letter-spacing:-.8px; color:#171717; text-decoration:none; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .blog-small-card__title:hover{ opacity:.72; } /* ========================================================================== LOAD MORE Figma: 984 x 48 ========================================================================== */ .blog-more{ width:984px; height:48px; flex:none; display:flex; flex-direction:row; align-items:center; justify-content:center; padding:0 24px; border:0; border-radius:0; background:rgba(82,82,82,.08); font-family:"Roboto Flex Custom",sans-serif; font-style:italic; font-weight:700; font-size:14px; line-height:18px; letter-spacing:-.3px; text-transform:uppercase; color:#171717; cursor:pointer; transition:background .2s ease; } .blog-more:hover{ background:rgba(82,82,82,.14); } /* ========================================================================== EMPTY ========================================================================== */ .blog-empty{ width:984px; padding:48px 0; font-family:Inter,sans-serif; font-weight:500; font-size:16px; line-height:22px; letter-spacing:-.4px; color:#A3A3A3; } /* ========================================================================== RIGHT ASIDE Figma: total width = 360 padding-left = 32 border-left = 1 inner content = 327 ========================================================================== */ .blog-page__aside{ width:360px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:0 0 0 32px; border-left:1px solid rgba(82,82,82,.16); } /* ========================================================================== ASIDE TITLE Figma: 40 / 38 ========================================================================== */ .blog-aside__title{ width:327px; margin:0; padding:0; font-family:"Roboto Flex Custom",sans-serif; font-style:italic; font-weight:700; font-size:40px; line-height:38px; letter-spacing:-1.2px; color:#171717; } /* ========================================================================== ASIDE LIST ========================================================================== */ .blog-aside__list{ width:327px; display:flex; flex-direction:column; align-items:stretch; gap:16px; } /* ========================================================================== ASIDE CARD Figma: 327 x 130 ========================================================================== */ .blog-aside-card{ width:327px; min-height:130px; display:flex; flex-direction:column; align-items:flex-start; gap:20px; background:#FFFFFF; } /* ========================================================================== ASIDE CARD TITLE ========================================================================== */ .blog-aside-card__title{ width:327px; margin:0; font-family:"Roboto Flex Custom",sans-serif; font-style:italic; font-weight:700; font-size:24px; line-height:28px; letter-spacing:-.8px; color:#171717; text-decoration:none; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .blog-aside-card__title:hover{ opacity:.72; } /* ========================================================================== BLOG DETAIL ========================================================================== */ .blog-detail-page, .blog-detail-page *, .blog-detail-page *::before, .blog-detail-page *::after{ box-sizing:border-box; } /* ========================================================================== DETAIL PAGE LAYOUT 1920: 90 + 300 + 48 + 984 + 48 + 360 + 90 = 1920 ========================================================================== */ .blog-detail-page{ width:100%; display:grid; grid-template-columns:300px 984px 360px; align-items:start; column-gap:48px; row-gap:24px; padding:72px 90px; background:#FFFFFF; } /* ========================================================================== LEFT MENU ========================================================================== */ .blog-detail-page__menu{ width:300px; border-right:1px solid rgba(82,82,82,.16); } /* ========================================================================== CENTER ========================================================================== */ .blog-detail-page__content{ width:984px; min-width:0; } .blog-article{ width:984px; display:flex; flex-direction:column; align-items:stretch; gap:32px; } /* ========================================================================== ARTICLE HEADER ========================================================================== */ .blog-article__header{ width:984px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; } /* ========================================================================== ARTICLE TITLE Figma: 56 / 50 ========================================================================== */ .blog-article__title{ width:100%; margin:0; padding:0; font-family:"Roboto Flex Custom",sans-serif; font-style:italic; font-weight:700; font-size:56px; line-height:50px; letter-spacing:-.6px; color:#171717; overflow-wrap:anywhere; } .blog-article__header > .blog-meta{ margin-top:8px; } /* ========================================================================== HERO Figma: 984 x 538.9 ========================================================================== */ .blog-article__hero{ width:984px; height:538.9px; overflow:hidden; border:1px solid rgba(82,82,82,.16); background:#F5F5F5; } .blog-article__hero-image{ display:block; width:100%; height:100%; object-fit:cover; } /* ========================================================================== ARTICLE BODY ========================================================================== */ .blog-article__body{ width:984px; font-family:Inter,sans-serif; font-style:normal; font-weight:500; font-size:16px; line-height:22px; letter-spacing:-.4px; color:#171717; } /* ========================================================================== PARAGRAPHS ========================================================================== */ .blog-article__body p{ width:100%; margin:0 0 16px; padding:0; font:inherit; color:inherit; } .blog-article__body p:last-child{ margin-bottom:0; } /* ========================================================================== HEADINGS ========================================================================== */ .blog-article__body h2, .blog-article__body h3, .blog-article__body h4{ width:100%; margin:32px 0 16px; padding:0; font-family:"Roboto Flex Custom",sans-serif; font-style:italic; font-weight:700; color:#171717; scroll-margin-top:32px; } .blog-article__body h2{ font-size:24px; line-height:28px; letter-spacing:-.8px; } .blog-article__body h3{ font-size:24px; line-height:28px; letter-spacing:-.8px; } .blog-article__body h4{ font-size:20px; line-height:24px; letter-spacing:-.6px; } .blog-article__body > h2:first-child, .blog-article__body > h3:first-child, .blog-article__body > h4:first-child{ margin-top:0; } /* ========================================================================== ARTICLE LINKS ========================================================================== */ .blog-article__body a{ color:#171717; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; } .blog-article__body a:hover{ opacity:.65; } /* ========================================================================== ARTICLE LISTS ========================================================================== */ .blog-article__body ul, .blog-article__body ol{ width:100%; margin:0 0 16px; padding-left:24px; font-family:Inter,sans-serif; font-weight:500; font-size:16px; line-height:22px; letter-spacing:-.4px; color:#171717; } .blog-article__body li{ margin:0 0 8px; } .blog-article__body li:last-child{ margin-bottom:0; } /* ========================================================================== ARTICLE IMAGES ========================================================================== */ .blog-article__body img{ display:block; width:100%; max-width:100%; height:auto; margin:32px 0; object-fit:cover; border:1px solid rgba(82,82,82,.16); } /* ========================================================================== FIGURE ========================================================================== */ .blog-article__body figure{ width:100%; margin:32px 0; } .blog-article__body figure img{ margin:0; } .blog-article__body figcaption{ margin-top:8px; font-family:Inter,sans-serif; font-weight:400; font-size:14px; line-height:18px; letter-spacing:-.3px; color:#A3A3A3; } /* ========================================================================== TWO IMAGES HTML:
Figma: 486 + 12 + 486 = 984 ========================================================================== */ .blog-article__body .blog-article-images{ width:984px; display:grid; grid-template-columns:486px 486px; gap:12px; margin:32px 0; } .blog-article__body .blog-article-images img{ width:486px; height:266.16px; margin:0; object-fit:cover; } /* ========================================================================== VIDEO ========================================================================== */ .blog-article__body iframe{ display:block; width:100%; max-width:100%; aspect-ratio:16 / 9; margin:32px 0; border:0; } /* ========================================================================== BLOCKQUOTE ========================================================================== */ .blog-article__body blockquote{ width:100%; margin:32px 0; padding:24px 32px; border-left:3px solid #171717; background:#F5F5F5; font-family:Inter,sans-serif; font-weight:500; font-size:16px; line-height:22px; letter-spacing:-.4px; color:#171717; } .blog-article__body blockquote p{ margin:0; } /* ========================================================================== TABLE ========================================================================== */ .blog-article__body .table-wrapper{ width:100%; margin:32px 0; overflow-x:auto; } .blog-article__body table{ width:100%; margin:32px 0; border-collapse:collapse; border-spacing:0; font-family:Inter,sans-serif; font-size:16px; line-height:22px; letter-spacing:-.4px; color:#171717; } .blog-article__body th, .blog-article__body td{ padding:16px; text-align:left; vertical-align:top; border:1px solid rgba(82,82,82,.16); } .blog-article__body th{ font-weight:600; background:#F5F5F5; } .blog-article__body td{ font-weight:500; background:#FFFFFF; } /* ========================================================================== ACTIONS Figma: total = 984 x 48 left: Telegram button = 231 x 48 right: share = 268 x 48 ========================================================================== */ .blog-article__actions{ width:984px; height:48px; display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:32px; } /* ========================================================================== TELEGRAM SUBSCRIBE ========================================================================== */ .blog-telegram-subscribe{ width:231px; height:48px; flex:0 0 231px; display:flex; flex-direction:row; align-items:center; justify-content:center; padding:0 24px; background:rgba(82,82,82,.08); font-family:"Roboto Flex Custom",sans-serif; font-style:italic; font-weight:700; font-size:14px; line-height:18px; letter-spacing:-.3px; text-transform:uppercase; color:#171717; text-decoration:none; transition:background .2s ease; } .blog-telegram-subscribe:hover{ color:#171717; text-decoration:none; background:rgba(82,82,82,.14); } /* ========================================================================== SHARE ========================================================================== */ .blog-article__share{ width:268px; height:48px; flex:0 0 268px; display:flex; flex-direction:row; align-items:center; gap:16px; } .blog-article__share-title{ width:92px; flex:0 0 92px; font-family:Inter,sans-serif; font-style:normal; font-weight:500; font-size:16px; line-height:22px; letter-spacing:-.4px; color:#171717; } .blog-article__share-buttons{ width:160px; height:48px; display:flex; flex-direction:row; align-items:center; gap:8px; } .blog-share-button{ width:48px; height:48px; flex:0 0 48px; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:0; background:rgba(82,82,82,.08); color:#171717; text-decoration:none; cursor:pointer; transition:background .2s ease; } .blog-share-button:hover{ background:rgba(82,82,82,.14); } .blog-share-button svg{ display:block; width:24px; height:24px; } /* ========================================================================== RELATED COMMON Используется для: - Еще по теме - Больше полезного ========================================================================== */ .blog-related{ width:984px; display:flex; flex-direction:column; align-items:stretch; gap:32px; padding-top:32px; border-top:1px solid rgba(82,82,82,.16); } /* ========================================================================== RELATED HEADER ========================================================================== */ .blog-related__header{ width:984px; height:50px; display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:8px; } /* ========================================================================== RELATED TITLE Figma: 56 / 50 ========================================================================== */ .blog-related__title{ width:auto; flex:1 1 auto; margin:0; padding:0; font-family:"Roboto Flex Custom",sans-serif; font-style:italic; font-weight:700; font-size:56px; line-height:50px; letter-spacing:-.6px; color:#171717; } /* ========================================================================== "ЕЩЕ ПО ТЕМЕ" ARROWS ========================================================================== */ .blog-related__controls{ width:104px; height:48px; flex:0 0 104px; display:flex; flex-direction:row; align-items:center; gap:8px; } .blog-related__arrow{ width:48px; height:48px; flex:0 0 48px; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:0; background:rgba(82,82,82,.08); cursor:pointer; transition: background .2s ease, opacity .2s ease; } .blog-related__arrow:hover:not(:disabled){ background:rgba(82,82,82,.14); } .blog-related__arrow:disabled{ opacity:.4; cursor:default; } .blog-related__arrow svg{ display:block; width:24px; height:24px; } /* ========================================================================== RELATED GRID 476 + 32 + 476 = 984 ========================================================================== */ .blog-related__list{ width:984px; display:grid; grid-template-columns:repeat(2,476px); column-gap:32px; row-gap:32px; } /* ========================================================================== DETAIL ARTICLE CARDS Figma: 476 x 318 image = 476 x 176 info = 476 x 130 gap = 12 ========================================================================== */ .blog-related .blog-small-card{ width:476px; height:318px; display:flex; flex-direction:column; align-items:stretch; gap:12px; background:#FFFFFF; } .blog-related .blog-small-card.is-hidden{ display:none; } .blog-related .blog-small-card__image-wrapper{ position:relative; width:476px; height:176px; flex:0 0 176px; display:block; overflow:hidden; border:1px solid rgba(82,82,82,.16); background:#F5F5F5; text-decoration:none; } .blog-related .blog-small-card__image{ display:block; width:100%; height:100%; object-fit:cover; } .blog-related .blog-image-placeholder{ width:100%; height:100%; } .blog-related .blog-small-card__play{ position:absolute; left:50%; top:50%; width:48px; height:48px; display:flex; align-items:center; justify-content:center; transform:translate(-50%,-50%); border-radius:999px; background:#FFFFFF; pointer-events:none; } .blog-related .blog-small-card__play svg{ width:24px; height:24px; } .blog-related .blog-small-card__info{ width:476px; height:130px; flex:0 0 130px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; gap:20px; } .blog-related .blog-small-card__top{ width:476px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; } .blog-related .blog-small-card__title{ width:476px; margin:0; font-family:"Roboto Flex Custom",sans-serif; font-style:italic; font-weight:700; font-size:24px; line-height:28px; letter-spacing:-.8px; color:#171717; text-decoration:none; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .blog-related .blog-small-card__title:hover{ opacity:.72; } .blog-related .blog-meta{ width:476px; } /* ========================================================================== ЕЩЕ ПО ТЕМЕ ========================================================================== */ .blog-related--topic{ width:984px; } /* * По макету это один ряд из двух карточек. * JavaScript переключает следующие две. */ .blog-related--topic .blog-related__list{ min-height:318px; } /* ========================================================================== БОЛЬШЕ ПОЛЕЗНОГО ========================================================================== */ .blog-related--useful{ width:984px; } /* ========================================================================== LOAD MORE INSIDE DETAIL ========================================================================== */ .blog-more--detail{ width:984px; height:48px; margin-top:0; } /* ========================================================================== RIGHT SIDEBAR ========================================================================== */ .blog-detail-page__aside{ width:360px; padding-left:32px; border-left:1px solid rgba(82,82,82,.16); } /* ========================================================================== TABLE OF CONTENTS ========================================================================== */ .blog-toc{ width:327px; display:flex; flex-direction:column; align-items:flex-start; gap:24px; } /* ========================================================================== TOC TITLE Figma: 40 / 38 ========================================================================== */ .blog-toc__title{ width:327px; margin:0; padding:0; font-family:"Roboto Flex Custom",sans-serif; font-style:italic; font-weight:700; font-size:40px; line-height:38px; letter-spacing:-1.2px; color:#171717; } /* ========================================================================== TOC LIST ========================================================================== */ .blog-toc__list{ width:327px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; } .blog-toc__item{ width:327px; min-height:36px; display:flex; flex-direction:row; align-items:center; padding:0; font-family:Inter,sans-serif; font-style:normal; font-weight:500; font-size:14px; line-height:18px; letter-spacing:-.3px; color:#171717; text-decoration:none; transition:opacity .2s ease; } .blog-toc__item:hover{ color:#171717; text-decoration:none; opacity:.55; } /* нумерации в Figma нет */ .blog-toc__number{ display:none; } .blog-toc__text{ width:100%; } /* ========================================================================== COPY ALERT ========================================================================== */ .blog-copy-alert{ position:fixed; left:50%; bottom:32px; z-index:1000; display:flex; align-items:center; justify-content:center; min-width:180px; height:44px; padding:0 20px; transform:translate(-50%,20px); opacity:0; visibility:hidden; background:#171717; font-family:Inter,sans-serif; font-weight:500; font-size:14px; line-height:18px; letter-spacing:-.3px; color:#FFFFFF; pointer-events:none; transition: opacity .2s ease, transform .2s ease, visibility .2s ease; } .blog-copy-alert.is-visible{ opacity:1; visibility:visible; transform:translate(-50%,0); } /* ========================================================================== BLOG MENU — TOPICS ========================================================================== */ .blog-menu__topics{ width:299px; display:flex; flex-direction:column; margin-top:24px; padding-top:24px; border-top:1px solid rgba(82,82,82,.16); } .blog-menu__topics-title{ width:100%; padding:0 16px; margin-bottom:8px; font-family:Inter,sans-serif; font-weight:500; font-size:14px; line-height:18px; letter-spacing:-.3px; color:#A3A3A3; } .blog-menu__topics-list{ width:100%; display:flex; flex-direction:column; } .blog-menu__topic{ width:299px; min-height:48px; display:flex; align-items:center; padding:0 16px; font-family:Inter,sans-serif; font-weight:500; font-size:16px; line-height:22px; letter-spacing:-.4px; color:#171717; text-decoration:none; transition:opacity .2s ease; } .blog-menu__topic:hover{ color:#171717; text-decoration:none; opacity:.6; } .blog-menu__topic.is-active{ color:#171717; font-weight:600; } /* ========================================================================== RESPONSIVE — COMMON ========================================================================== */ /* ========================================================================== BLOG DETAIL — BREADCRUMBS ========================================================================== */ .blog-detail-page > .blog-detail-breadcrumbs{ display:none; } @media (min-width:1200px){ .blog-detail-page > .blog-detail-page__menu{ grid-column:1; grid-row:2; } .blog-detail-page > .blog-detail-page__content{ grid-column:2; grid-row:2; } .blog-detail-page > .blog-detail-page__aside{ grid-column:3; grid-row:2; } } .blog-detail-breadcrumbs__item, .blog-detail-breadcrumbs__current{ font-family:Inter,sans-serif; font-style:normal; font-weight:500; font-size:14px; line-height:18px; letter-spacing:-.3px; white-space:nowrap; } .blog-detail-breadcrumbs__item{ flex:0 0 auto; color:#A3A3A3; text-decoration:none; } .blog-detail-breadcrumbs__item:hover{ color:#171717; text-decoration:none; } .blog-detail-breadcrumbs__arrow{ width:16px; height:16px; flex:0 0 16px; display:flex; align-items:center; justify-content:center; } .blog-detail-breadcrumbs__arrow svg{ display:block; width:16px; height:16px; } .blog-detail-breadcrumbs__current{ min-width:0; flex:1 1 auto; overflow:hidden; color:#171717; text-overflow:ellipsis; } /* ========================================================================== 1440 / COMPACT DESKTOP ========================================================================== */ @media (min-width:1200px) and (max-width:1600px){ /* BLOG LIST ------------------------------------------------------------ */ .blog-page{ grid-template-columns:170px minmax(0,1fr) 300px; column-gap:48px; padding:72px 90px; } .blog-page .blog-page__menu{ width:170px; } .blog-page .blog-menu, .blog-page .blog-menu__item, .blog-page .blog-menu__topics, .blog-page .blog-menu__topics-list, .blog-page .blog-menu__topic{ width:169px; } .blog-page .blog-page__content, .blog-page .blog-main-card, .blog-page .blog-main-card__info, .blog-page .blog-list, .blog-page .blog-more{ width:100%; } .blog-page .blog-main-card__image-wrapper{ width:100%; height:auto; aspect-ratio:694 / 380.08; } .blog-page .blog-main-card__title{ width:100%; font-size:40px; line-height:38px; letter-spacing:-1.2px; } .blog-page .blog-small-card{ width:100%; height:188px; } .blog-page .blog-small-card__image-wrapper{ width:280px; height:188px; flex:0 0 280px; } .blog-page .blog-small-card__info{ width:auto; height:188px; flex:1 1 auto; min-width:0; } .blog-page .blog-small-card__top, .blog-page .blog-small-card__title, .blog-page .blog-small-card .blog-meta{ width:100%; } .blog-page .blog-page__aside{ width:300px; padding-left:32px; } .blog-page .blog-aside__title, .blog-page .blog-aside__list, .blog-page .blog-aside-card, .blog-page .blog-aside-card__title, .blog-page .blog-aside-card .blog-meta{ width:267px; } /* BLOG DETAIL ---------------------------------------------------------- */ .blog-detail-page{ grid-template-columns:170px minmax(0,1fr) 300px; column-gap:48px; padding:72px 90px; } .blog-detail-page .blog-detail-page__menu{ width:170px; } .blog-detail-page .blog-menu, .blog-detail-page .blog-menu__item, .blog-detail-page .blog-menu__topics, .blog-detail-page .blog-menu__topics-list, .blog-detail-page .blog-menu__topic{ width:169px; } .blog-detail-page .blog-detail-page__content, .blog-detail-page .blog-article, .blog-detail-page .blog-article__header, .blog-detail-page .blog-article__body, .blog-detail-page .blog-article__actions, .blog-detail-page .blog-related, .blog-detail-page .blog-related--topic, .blog-detail-page .blog-related--useful, .blog-detail-page .blog-related__header, .blog-detail-page .blog-related__list, .blog-detail-page .blog-more--detail{ width:100%; } .blog-detail-page .blog-article__hero{ width:100%; height:auto; aspect-ratio:694 / 380.08; } .blog-detail-page .blog-article__body .blog-article-images{ width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .blog-detail-page .blog-article__body .blog-article-images img{ width:100%; height:auto; aspect-ratio:341 / 186.75; } .blog-detail-page .blog-related__list{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px; row-gap:32px; } .blog-detail-page .blog-related .blog-small-card{ width:100%; height:318px; } .blog-detail-page .blog-related .blog-small-card__image-wrapper{ width:100%; height:176px; } .blog-detail-page .blog-related .blog-small-card__info{ width:100%; height:130px; } .blog-detail-page .blog-related .blog-small-card__top, .blog-detail-page .blog-related .blog-small-card__title, .blog-detail-page .blog-related .blog-meta{ width:100%; } .blog-detail-page .blog-detail-page__aside{ width:300px; padding-left:32px; } .blog-detail-page .blog-toc, .blog-detail-page .blog-toc__title, .blog-detail-page .blog-toc__list, .blog-detail-page .blog-toc__item{ width:267px; } } /* ========================================================================== TABLET / 768 ========================================================================== */ @media (max-width:1199px){ /* BLOG LIST ------------------------------------------------------------ */ .blog-page{ width:100%; display:flex; flex-direction:column; align-items:stretch; gap:24px; padding:32px 16px; overflow:hidden; } .blog-page .blog-page__menu{ width:100%; border-right:0; } .blog-page .blog-menu{ width:100%; display:flex; flex-direction:row; flex-wrap:wrap; align-items:flex-start; column-gap:16px; row-gap:16px; } .blog-page .blog-menu > .blog-menu__item{ flex:none; height:56px; } .blog-page .blog-menu > .blog-menu__item:nth-child(1){ width:111px; padding:0 0 0 16px; } .blog-page .blog-menu > .blog-menu__item:nth-child(2){ width:125px; padding:0 16px; } .blog-page .blog-menu > .blog-menu__item:nth-child(3){ width:81px; padding:0 16px; } .blog-page .blog-menu__topics{ width:100%; flex:0 0 100%; margin-top:0; padding-top:16px; border-top:1px solid rgba(82,82,82,.16); } .blog-page .blog-menu__topics-title{ width:100%; margin:0 0 12px; padding:0 16px; } .blog-page .blog-menu__topics-list{ width:100%; display:flex; flex-direction:row; align-items:center; gap:8px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding-bottom:2px; } .blog-page .blog-menu__topics-list::-webkit-scrollbar{ display:none; } .blog-page .blog-menu__topic{ width:auto; min-width:max-content; min-height:40px; flex:none; padding:0 16px; background:#F5F5F5; } .blog-page .blog-menu__topic.is-active{ background:#171717; color:#FFFFFF; } .blog-page .blog-page__content, .blog-page .blog-main-card, .blog-page .blog-main-card__info, .blog-page .blog-list, .blog-page .blog-more{ width:100%; } .blog-page .blog-page__content{ min-width:0; gap:32px; } .blog-page .blog-main-card{ gap:20px; } .blog-page .blog-main-card__image-wrapper{ width:100%; height:auto; aspect-ratio:736 / 403.08; } .blog-page .blog-main-card__title{ width:100%; font-size:32px; line-height:30px; letter-spacing:-1px; -webkit-line-clamp:2; } .blog-page .blog-list{ gap:32px; } .blog-page .blog-small-card{ width:100%; height:auto; display:flex; flex-direction:column; align-items:stretch; gap:12px; } .blog-page .blog-small-card__image-wrapper{ width:100%; height:176px; flex:none; } .blog-page .blog-small-card__info{ width:100%; height:auto; min-height:98px; flex:none; gap:20px; } .blog-page .blog-small-card__top, .blog-page .blog-small-card__title, .blog-page .blog-small-card .blog-meta{ width:100%; } .blog-page .blog-small-card__title{ font-size:20px; line-height:24px; letter-spacing:-.6px; } .blog-page .blog-page__aside{ width:100%; padding:0; border-left:0; gap:16px; } .blog-page .blog-aside__title, .blog-page .blog-aside__list, .blog-page .blog-aside-card, .blog-page .blog-aside-card__title, .blog-page .blog-aside-card .blog-meta{ width:100%; } .blog-page .blog-aside__title{ font-size:32px; line-height:30px; letter-spacing:-1px; } .blog-page .blog-aside-card{ min-height:98px; gap:0; } .blog-page .blog-aside-card .blog-badge{ margin-bottom:8px; } .blog-page .blog-aside-card__title{ margin-bottom:20px; font-size:20px; line-height:24px; letter-spacing:-.6px; } /* BLOG DETAIL ---------------------------------------------------------- */ .blog-detail-page{ width:100%; display:flex; flex-direction:column; align-items:stretch; gap:24px; padding:32px 16px; overflow:hidden; } .blog-detail-page .blog-detail-page__menu, .blog-detail-page .blog-detail-page__aside{ display:none; } .blog-detail-page .blog-detail-breadcrumbs{ width:100%; min-width:0; height:24px; display:flex; flex-direction:row; align-items:center; gap:8px; overflow:hidden; } .blog-detail-page .blog-detail-breadcrumbs__item, .blog-detail-page .blog-detail-breadcrumbs__current{ font-family:Inter,sans-serif; font-style:normal; font-weight:500; font-size:14px; line-height:18px; letter-spacing:-.3px; text-decoration:none; white-space:nowrap; } .blog-detail-page .blog-detail-breadcrumbs__item{ flex:none; color:#A3A3A3; } .blog-detail-page .blog-detail-breadcrumbs__arrow{ width:16px; height:16px; flex:none; display:flex; align-items:center; justify-content:center; } .blog-detail-page .blog-detail-breadcrumbs__current{ min-width:0; flex:1 1 auto; overflow:hidden; color:#171717; text-overflow:ellipsis; } .blog-detail-page .blog-detail-page__content, .blog-detail-page .blog-article, .blog-detail-page .blog-article__header, .blog-detail-page .blog-article__body, .blog-detail-page .blog-article__actions, .blog-detail-page .blog-related, .blog-detail-page .blog-related--topic, .blog-detail-page .blog-related--useful, .blog-detail-page .blog-related__header, .blog-detail-page .blog-related__list, .blog-detail-page .blog-more--detail{ width:100%; } .blog-detail-page .blog-article{ gap:32px; } .blog-detail-page .blog-article__header{ gap:12px; } .blog-detail-page .blog-article__title{ width:100%; font-size:40px; line-height:38px; letter-spacing:-1.2px; } .blog-detail-page .blog-article__hero{ width:100%; height:auto; aspect-ratio:736 / 403.08; } .blog-detail-page .blog-article__body{ font-size:16px; line-height:22px; letter-spacing:-.4px; } .blog-detail-page .blog-article__body h2, .blog-detail-page .blog-article__body h3, .blog-detail-page .blog-article__body h4{ font-size:20px; line-height:24px; letter-spacing:-.6px; } .blog-detail-page .blog-article__body .blog-article-images{ width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .blog-detail-page .blog-article__body .blog-article-images img{ width:100%; height:auto; aspect-ratio:362 / 198.25; } .blog-detail-page .blog-article__actions{ height:48px; display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:32px; } .blog-detail-page .blog-telegram-subscribe{ width:231px; flex:0 0 231px; } .blog-detail-page .blog-article__share{ width:268px; flex:0 0 268px; } .blog-detail-page .blog-related__header{ height:48px; } .blog-detail-page .blog-related__title{ font-size:40px; line-height:38px; letter-spacing:-1.2px; } .blog-detail-page .blog-related__list{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px; row-gap:32px; } .blog-detail-page .blog-related .blog-small-card{ width:100%; height:310px; gap:12px; } .blog-detail-page .blog-related .blog-small-card__image-wrapper{ width:100%; height:176px; flex:0 0 176px; } .blog-detail-page .blog-related .blog-small-card__info{ width:100%; height:122px; flex:0 0 122px; gap:20px; } .blog-detail-page .blog-related .blog-small-card__top, .blog-detail-page .blog-related .blog-small-card__title, .blog-detail-page .blog-related .blog-meta{ width:100%; } .blog-detail-page .blog-related .blog-small-card__title{ font-size:20px; line-height:24px; letter-spacing:-.6px; } } /* ========================================================================== MOBILE / 393 ========================================================================== */ @media (max-width:600px){ /* BLOG LIST ------------------------------------------------------------ */ .blog-page{ padding:32px 16px; gap:24px; } .blog-page .blog-main-card__image-wrapper{ aspect-ratio:361 / 197.71; } .blog-page .blog-main-card__title{ font-size:32px; line-height:30px; letter-spacing:-1px; -webkit-line-clamp:3; } .blog-page .blog-small-card__info{ min-height:122px; } .blog-page .blog-small-card__title{ -webkit-line-clamp:2; } .blog-page .blog-meta{ width:100%; font-size:16px; line-height:22px; gap:8px; white-space:nowrap; } .blog-page .blog-aside-card{ min-height:122px; } /* BLOG DETAIL ---------------------------------------------------------- */ .blog-detail-page{ padding:32px 16px; gap:24px; } .blog-detail-page .blog-detail-page__content, .blog-detail-page .blog-article, .blog-detail-page .blog-article__header, .blog-detail-page .blog-article__body{ width:100%; } .blog-detail-page .blog-article__title{ font-size:40px; line-height:38px; letter-spacing:-1.2px; } .blog-detail-page .blog-article__hero{ width:100%; height:auto; aspect-ratio:361 / 197.71; } .blog-detail-page .blog-article__body .blog-article-images{ width:100%; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .blog-detail-page .blog-article__body .blog-article-images img{ width:100%; height:auto; aspect-ratio:174.5 / 95.57; } .blog-detail-page .blog-article__body .table-wrapper{ max-width:100%; overflow-x:auto; } .blog-detail-page .blog-article__body table{ min-width:600px; } .blog-article__actions{ width:100%; height:48px; display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; gap:32px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .blog-article__actions::-webkit-scrollbar{ display:none; } .blog-telegram-subscribe{ width:231px; min-width:231px; height:48px; flex:0 0 231px; } .blog-article__share{ width:268px; min-width:268px; height:48px; flex:0 0 268px; } .blog-detail-page .blog-related__header{ width:100%; min-height:48px; height:auto; gap:8px; } .blog-detail-page .blog-related__title{ min-width:0; font-size:40px; line-height:38px; letter-spacing:-1.2px; } .blog-detail-page .blog-related__controls{ width:104px; flex:0 0 104px; } .blog-detail-page .blog-related--topic .blog-related__list{ width:100%; display:block; min-height:310px; } .blog-detail-page .blog-related--topic .blog-small-card{ width:320px; height:310px; } .blog-detail-page .blog-related--topic .blog-small-card__image-wrapper{ width:320px; height:176px; } .blog-detail-page .blog-related--topic .blog-small-card__info{ width:320px; height:122px; } .blog-detail-page .blog-related--topic .blog-small-card__top, .blog-detail-page .blog-related--topic .blog-small-card__title, .blog-detail-page .blog-related--topic .blog-meta{ width:320px; } .blog-detail-page .blog-related--useful .blog-related__list{ width:100%; display:grid; grid-template-columns:1fr; column-gap:0; row-gap:32px; } .blog-detail-page .blog-related--useful .blog-small-card{ width:100%; height:310px; } .blog-detail-page .blog-related--useful .blog-small-card__image-wrapper{ width:100%; height:176px; } .blog-detail-page .blog-related--useful .blog-small-card__info{ width:100%; height:122px; } .blog-detail-page .blog-related--useful .blog-small-card__top, .blog-detail-page .blog-related--useful .blog-small-card__title, .blog-detail-page .blog-related--useful .blog-meta{ width:100%; } .blog-detail-page .blog-more--detail{ width:100%; } .blog-detail-page .blog-meta{ white-space:nowrap; } } /* ========================================================================== BLOG — FLUID DESKTOP FIX Плавная сетка от 1200 до 1920+ ========================================================================== */ @media (min-width:1200px){ /* ====================================================================== PAGE GRID ====================================================================== */ .blog-page, .blog-detail-page{ width:100%; max-width:1920px; margin-left:auto; margin-right:auto; /* * 1200: * padding ≈ 32 * * 1440: * padding = 90 * * 1920: * padding = 90 */ padding-left: clamp( 32px, calc(24.1667vw - 258px), 90px ); padding-right: clamp( 32px, calc(24.1667vw - 258px), 90px ); padding-top:72px; padding-bottom:72px; /* * gap: * 1200 ≈ 32 * 1440 = 48 * 1920 = 48 */ column-gap: clamp( 32px, calc(6.6667vw - 48px), 48px ); /* * Левая колонка: * ~160px на небольшом desktop * 170px на 1440 * 300px на 1920 * * Центральная колонка занимает всё * оставшееся место. * * Правая: * ~280px → 300px → 360px. */ grid-template-columns: clamp( 160px, calc(27.0833vw - 220px), 300px ) minmax(0,1fr) clamp( 280px, calc(12.5vw + 120px), 360px ); } /* ====================================================================== LEFT MENU ====================================================================== */ .blog-page .blog-page__menu, .blog-detail-page .blog-detail-page__menu{ width:100%; min-width:0; } .blog-page .blog-menu, .blog-detail-page .blog-menu{ width:100%; } .blog-page .blog-menu__item, .blog-detail-page .blog-menu__item, .blog-page .blog-menu__topics, .blog-detail-page .blog-menu__topics, .blog-page .blog-menu__topics-list, .blog-detail-page .blog-menu__topics-list, .blog-page .blog-menu__topic, .blog-detail-page .blog-menu__topic{ width:100%; } /* ====================================================================== BLOG LIST — CENTER ====================================================================== */ .blog-page .blog-page__content, .blog-page .blog-main-card, .blog-page .blog-main-card__info, .blog-page .blog-list, .blog-page .blog-more{ width:100%; min-width:0; } .blog-page .blog-main-card__image-wrapper{ width:100%; height:auto; aspect-ratio:984 / 538.9; } /* Маленькая карточка */ .blog-page .blog-small-card{ width:100%; } .blog-page .blog-small-card__image-wrapper{ width:280px; height:188px; flex:0 0 280px; } .blog-page .blog-small-card__info{ width:auto; min-width:0; flex:1 1 auto; } .blog-page .blog-small-card__top, .blog-page .blog-small-card__title, .blog-page .blog-small-card .blog-meta{ width:100%; } /* ====================================================================== BLOG LIST — ASIDE ====================================================================== */ .blog-page .blog-page__aside{ width:100%; min-width:0; padding-left:32px; } .blog-page .blog-aside__title, .blog-page .blog-aside__list, .blog-page .blog-aside-card, .blog-page .blog-aside-card__title, .blog-page .blog-aside-card .blog-meta{ width:100%; } /* ====================================================================== DETAIL — GRID POSITIONS ====================================================================== */ .blog-detail-page > .blog-detail-breadcrumbs{ grid-column:1 / -1; grid-row:1; width:100%; min-width:0; } .blog-detail-page > .blog-detail-page__menu{ grid-column:1; grid-row:2; } .blog-detail-page > .blog-detail-page__content{ grid-column:2; grid-row:2; } .blog-detail-page > .blog-detail-page__aside{ grid-column:3; grid-row:2; } /* ====================================================================== DETAIL — CENTER ====================================================================== */ .blog-detail-page .blog-detail-page__content, .blog-detail-page .blog-article, .blog-detail-page .blog-article__header, .blog-detail-page .blog-article__body, .blog-detail-page .blog-article__actions, .blog-detail-page .blog-related, .blog-detail-page .blog-related--topic, .blog-detail-page .blog-related--useful, .blog-detail-page .blog-related__header, .blog-detail-page .blog-related__list, .blog-detail-page .blog-more--detail{ width:100%; min-width:0; } /* ====================================================================== DETAIL — HERO ====================================================================== */ .blog-detail-page .blog-article__hero{ width:100%; height:auto; aspect-ratio:984 / 538.9; } /* ====================================================================== DETAIL — ARTICLE IMAGES ====================================================================== */ .blog-detail-page .blog-article__body .blog-article-images{ width:100%; grid-template-columns: repeat(2,minmax(0,1fr)); gap:12px; } .blog-detail-page .blog-article__body .blog-article-images img{ width:100%; height:auto; aspect-ratio:486 / 266.16; } /* ====================================================================== DETAIL — RELATED GRID ====================================================================== */ .blog-detail-page .blog-related__list{ width:100%; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap:32px; row-gap:32px; } .blog-detail-page .blog-related .blog-small-card{ width:100%; min-width:0; } .blog-detail-page .blog-related .blog-small-card__image-wrapper{ width:100%; } .blog-detail-page .blog-related .blog-small-card__info, .blog-detail-page .blog-related .blog-small-card__top, .blog-detail-page .blog-related .blog-small-card__title, .blog-detail-page .blog-related .blog-meta{ width:100%; min-width:0; } /* ====================================================================== DETAIL — RIGHT ====================================================================== */ .blog-detail-page .blog-detail-page__aside{ width:100%; min-width:0; padding-left:32px; } .blog-detail-page .blog-toc, .blog-detail-page .blog-toc__title, .blog-detail-page .blog-toc__list, .blog-detail-page .blog-toc__item{ width:100%; min-width:0; } } /* End */ /* Start:/local/templates/turbolemons-template/components/bitrix/news/.default/news-main.css?178785564770104*/ /* ========================================================================== ROBOTO FLEX — SAME SOURCE AS ABOUT ========================================================================== */ @font-face{ font-family:"Roboto Flex Custom"; src: url("/local/fonts/RobotoFlex-CompressedItalic-VF.ttf") format("truetype-variations"), url("/local/fonts/RobotoFlex-CompressedItalic-VF.ttf") format("truetype"); font-weight:100 1000; font-style:italic; font-display:swap; } /* ========================================================================== RESET ========================================================================== */ .tl-news-page, .tl-news-page *, .tl-news-page *::before, .tl-news-page *::after{ box-sizing:border-box; } .tl-news-page a{ color:inherit; text-decoration:none; } /* ========================================================================== PAGE — FIGMA 1920 ========================================================================== */ .tl-news-page{ width:1920px; min-width:1920px; max-width:none; margin:0 auto; display:grid; grid-template-columns:330px 984px 330px; align-items:start; gap:48px; padding:72px 90px; background:#F5F5F5; color:#171717; } .tl-news-page{ isolation:isolate; } .tl-news-page::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); background:#F5F5F5; z-index:-1; pointer-events:none; } /* ========================================================================== COMMON TYPOGRAPHY ========================================================================== */ .tl-news-heading{ margin:0; padding:0; font-family:"Roboto Flex Custom",sans-serif; font-style:italic; font-weight:700; font-size:40px; line-height:38px; letter-spacing:-1.2px; color:#171717; font-variation-settings:"wght" 700; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; } .tl-news-badge{ width:max-content; max-width:100%; min-width:58px; height:24px; display:inline-flex; align-items:center; justify-content:center; padding:0 8px; overflow:hidden; background:#F5F5F5; font-family:Inter,sans-serif; font-weight:500; font-size:14px; line-height:18px; letter-spacing:-.3px; white-space:nowrap; text-overflow:ellipsis; color:#171717; } .tl-news-badge--bordered{ border:1px solid rgba(82,82,82,.16); } /* ========================================================================== PLACEHOLDER ========================================================================== */ .tl-news-placeholder{ width:100%; height:100%; background-color:#F7F7F7; background-image: linear-gradient(45deg,#EEEEEE 25%,transparent 25%), linear-gradient(-45deg,#EEEEEE 25%,transparent 25%), linear-gradient(45deg,transparent 75%,#EEEEEE 75%), linear-gradient(-45deg,transparent 75%,#EEEEEE 75%); background-size:32px 32px; background-position: 0 0, 0 16px, 16px -16px, -16px 0; } /* ========================================================================== SVG SLOTS — EMPTY BY DESIGN ========================================================================== */ .tl-news-icon-slot{ display:block; width:24px; height:24px; flex:0 0 24px; } .tl-news-icon-slot--forward{ margin-left:auto; } /* ========================================================================== LEFT SIDEBAR ========================================================================== */ .tl-news-sidebar{ position:sticky; top:24px; align-self:start; width:330px; display:flex; flex-direction:column; align-items:flex-start; gap:28px; border-right:1px solid rgba(82,82,82,.16); } .tl-news-menu, .tl-news-topics__list{ width:330px; display:flex; flex-direction:column; align-items:stretch; } .tl-news-menu__item{ width:330px; height:56px; display:flex; align-items:center; padding:0 16px; font-family:Inter,sans-serif; font-weight:500; font-size:16px; line-height:22px; letter-spacing:-.4px; color:#A3A3A3; transition: color .2s ease, background-color .2s ease; } .tl-news-menu__item:hover, .tl-news-menu__item.is-active{ color:#171717; } .tl-news-topics{ width:330px; display:flex; flex-direction:column; align-items:flex-start; gap:4px; } .tl-news-topics__badge{ min-width:53px; height:24px; display:inline-flex; align-items:center; justify-content:center; padding:0 8px; background:#D2FF00; font-family:Inter,sans-serif; font-weight:500; font-size:14px; line-height:18px; letter-spacing:-.3px; color:#171717; } /* ========================================================================== CENTER ========================================================================== */ .tl-news-content{ width:984px; min-width:0; display:flex; flex-direction:column; align-items:stretch; gap:48px; } /* ========================================================================== POPULAR / NEW BLOCK ========================================================================== */ .tl-news-popular{ width:984px; display:flex; flex-direction:column; align-items:stretch; gap:32px; padding:32px; background:#FFFFFF; } /* ========================================================================== MAIN CARD ========================================================================== */ .tl-news-main-card{ width:920px; display:flex; flex-direction:column; gap:20px; } .tl-news-main-card__media{ width:920px; height:503.85px; display:block; overflow:hidden; border:1px solid rgba(82,82,82,.16); background:#F5F5F5; } .tl-news-main-card__image{ width:100%; height:100%; overflow:hidden; } .tl-news-main-card__image img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; } .tl-news-main-card__info{ width:920px; display:flex; flex-direction:column; gap:20px; } .tl-news-main-card__top{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:12px; } .tl-news-main-card__title{ width:100%; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-family:"Roboto Flex Custom",sans-serif; font-style:italic; font-weight:700; font-size:40px; line-height:38px; letter-spacing:-1.2px; color:#171717; transition:opacity .25s ease; font-variation-settings:"wght" 700; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; } /* ========================================================================== META ========================================================================== */ .tl-news-meta{ width:100%; min-width:0; height:24px; display:flex; align-items:center; justify-content:space-between; gap:8px; } .tl-news-meta__text{ min-width:0; display:flex; align-items:center; gap:8px; overflow:hidden; font-family:Inter,sans-serif; font-weight:400; font-size:16px; line-height:22px; letter-spacing:-.4px; white-space:nowrap; color:#A3A3A3; } /* ========================================================================== COMPACT CARDS ========================================================================== */ .tl-news-compact-list{ width:920px; display:flex; flex-direction:column; gap:24px; } .tl-news-compact-card{ width:920px; height:138px; display:grid; grid-template-columns:138px minmax(0,1fr); gap:12px; } .tl-news-compact-card__media{ position:relative; width:138px; height:138px; overflow:hidden; border:1px solid rgba(82,82,82,.16); background:#F5F5F5; } .tl-news-compact-card__image{ width:100%; height:100%; } .tl-news-compact-card__image img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; } .tl-news-compact-card__info{ width:100%; min-width:0; height:138px; display:flex; flex-direction:column; justify-content:space-between; gap:8px; } .tl-news-compact-card__top{ width:100%; min-width:0; display:flex; flex-direction:column; gap:8px; } .tl-news-compact-card__title{ width:100%; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-family:"Roboto Flex Custom",sans-serif; font-style:italic; font-weight:700; font-size:24px; line-height:28px; letter-spacing:-.8px; color:#171717; transition:opacity .25s ease; font-variation-settings:"wght" 700; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; } /* ========================================================================== PLAY ========================================================================== */ .tl-news-play{ position:absolute; left:50%; top:50%; display:flex; align-items:center; justify-content:center; transform:translate(-50%,-50%); border-radius:999px; background:#FFFFFF; pointer-events:none; } .tl-news-play--small{ width:48px; height:48px; } .tl-news-play--large{ width:56px; height:56px; } /* ========================================================================== ARTICLE VIDEO SLIDER ========================================================================== */ .tl-news-video-slider{ width:984px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; } .tl-news-video-slider__viewport{ width:984px; overflow:hidden; } .tl-news-video-slider__track{ width:100%; display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; scrollbar-width:none; scroll-snap-type:x mandatory; } .tl-news-video-slider__track::-webkit-scrollbar{ display:none; } .tl-news-video-card{ width:984px; height:370px; flex:0 0 984px; display:grid; grid-template-columns:624px 320px; gap:24px; padding:8px; background:#FFFFFF; scroll-snap-align:start; } .tl-news-video-card__media{ position:relative; width:624px; height:354px; display:block; overflow:hidden; background:#F5F5F5; } .tl-news-video-card__image{ width:100%; height:100%; overflow:hidden; } .tl-news-video-card__image img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; } .tl-news-video-card__duration{ position:absolute; right:8px; bottom:8px; min-width:52px; height:26px; display:flex; align-items:center; justify-content:center; padding:4px 8px; background:rgba(255,255,255,.24); font-family:Inter,sans-serif; font-weight:400; font-size:14px; line-height:18px; letter-spacing:-.3px; color:#FFFFFF; } .tl-news-video-card__info{ width:320px; height:354px; display:flex; flex-direction:column; justify-content:space-between; padding:24px 0; } .tl-news-video-card__top{ width:320px; display:flex; flex-direction:column; gap:8px; } .tl-news-video-card__title{ width:320px; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-family:"Roboto Flex Custom",sans-serif; font-style:italic; font-weight:700; font-size:24px; line-height:28px; letter-spacing:-.8px; color:#171717; transition:opacity .25s ease; font-variation-settings:"wght" 700; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; } /* ========================================================================== CONTROLS ========================================================================== */ .tl-news-slider-controls{ width:104px; height:48px; display:flex; gap:8px; } .tl-news-slider-button{ width:48px; height:48px; flex:0 0 48px; display:flex; align-items:center; justify-content:center; padding:0; border:0; background:rgba(82,82,82,.08); cursor:pointer; transition:background-color .2s ease; } .tl-news-slider-button:hover{ background:rgba(82,82,82,.14); } /* ========================================================================== SECTION BLOCK ========================================================================== */ .tl-news-section-block{ width:984px; display:flex; flex-direction:column; align-items:flex-start; gap:24px; } .tl-news-section-grid{ width:984px; display:grid; grid-template-columns:repeat(2,486px); gap:12px; } .tl-news-section-card{ width:486px; height:348px; display:flex; flex-direction:column; gap:12px; padding:8px; background:#FFFFFF; } .tl-news-section-card__media{ position:relative; width:470px; height:176px; flex:0 0 176px; display:block; overflow:hidden; border:1px solid rgba(82,82,82,.16); background:#F5F5F5; } .tl-news-section-card__image{ width:100%; height:100%; } .tl-news-section-card__image img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; } .tl-news-section-card__info{ width:470px; height:144px; display:flex; flex-direction:column; justify-content:space-between; gap:20px; padding:0 12px 12px; } .tl-news-section-card__top{ width:446px; display:flex; flex-direction:column; gap:8px; } .tl-news-section-card__title{ width:100%; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-family:"Roboto Flex Custom",sans-serif; font-style:italic; font-weight:700; font-size:24px; line-height:28px; letter-spacing:-.8px; color:#171717; transition:opacity .25s ease; font-variation-settings:"wght" 700; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; } .tl-news-section-card.is-wide{ width:984px; height:415px; grid-column:1 / -1; } .tl-news-section-card.is-wide .tl-news-section-card__media{ width:968px; height:271px; flex:0 0 271px; } .tl-news-section-card.is-wide .tl-news-section-card__info{ width:968px; height:116px; } .tl-news-section-card.is-wide .tl-news-section-card__top{ width:944px; } .tl-news-section-button{ width:214px; height:56px; display:inline-flex; align-items:center; justify-content:center; padding:0 24px; background:#D2FF00; font-family:"Roboto Flex Custom",sans-serif; font-style:italic; font-weight:700; font-size:16px; line-height:22px; letter-spacing:-.4px; text-transform:uppercase; color:#171717; transition:background-color .2s ease; font-variation-settings:"wght" 700; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; } .tl-news-section-button:hover{ background:#C6F000; } /* ========================================================================== VK VIDEO ========================================================================== */ .tl-news-vk{ width:984px; display:flex; flex-direction:column; align-items:flex-start; gap:24px; } .tl-news-vk__brand{ width:159px; height:34px; display:flex; align-items:center; gap:8px; font-family:Inter,sans-serif; font-weight:600; font-size:16px; line-height:22px; color:#171717; } .tl-news-vk__icon-slot{ width:34px; height:34px; flex:0 0 34px; } .tl-news-vk__viewport{ width:984px; overflow:hidden; } .tl-news-vk__track{ width:984px; display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; scrollbar-width:none; scroll-snap-type:x proximity; } .tl-news-vk__track::-webkit-scrollbar{ display:none; } .tl-news-vk-card{ position:relative; width:486px; height:815px; flex:0 0 486px; display:flex; flex-direction:column; justify-content:space-between; align-items:center; padding:24px; overflow:hidden; background: linear-gradient( 183.5deg, rgba(1,3,14,0) 19.71%, rgba(1,3,14,.60) 90.72% ), var(--vk-bg,none), #EAEAEA; background-size:cover; background-position:center; color:#FFFFFF; scroll-snap-align:start; } .tl-news-vk-card__top{ width:438px; height:32px; display:block; } .tl-news-vk-card__play{ display:flex; flex-direction:column; align-items:center; gap:8px; } .tl-news-vk-card__duration{ font-family:Inter,sans-serif; font-weight:600; font-size:20px; line-height:24px; letter-spacing:-.6px; color:#FFFFFF; } .tl-news-vk-card__title{ width:438px; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-family:Inter,sans-serif; font-weight:600; font-size:20px; line-height:24px; letter-spacing:-.6px; color:#FFFFFF; } /* ========================================================================== USEFUL ========================================================================== */ .tl-news-useful{ width:984px; height:456px; display:flex; flex-direction:column; gap:24px; padding:32px; background:#FFFFFF; } .tl-news-useful__head{ width:920px; height:48px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .tl-news-useful__viewport{ width:920px; overflow:hidden; } .tl-news-useful__track{ width:920px; height:320px; display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; scroll-behavior:smooth; scrollbar-width:none; scroll-snap-type:x proximity; } .tl-news-useful__track::-webkit-scrollbar{ display:none; } .tl-news-useful-card{ width:350px; height:320px; flex:0 0 350px; display:flex; flex-direction:column; gap:12px; scroll-snap-align:start; } .tl-news-useful-card__media{ width:350px; height:176px; flex:0 0 176px; display:block; overflow:hidden; border:1px solid rgba(82,82,82,.16); background:#F5F5F5; } .tl-news-useful-card__image{ width:100%; height:100%; } .tl-news-useful-card__image img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; } .tl-news-useful-card__info{ width:350px; height:132px; display:flex; flex-direction:column; justify-content:space-between; gap:20px; } .tl-news-useful-card__top{ width:350px; display:flex; flex-direction:column; gap:8px; } .tl-news-useful-card__title{ width:350px; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-family:"Roboto Flex Custom",sans-serif; font-style:italic; font-weight:700; font-size:24px; line-height:28px; letter-spacing:-.8px; color:#171717; transition:opacity .25s ease; font-variation-settings:"wght" 700; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; } /* ========================================================================== RIGHT — NEW ========================================================================== */ .tl-news-new{ position:relative; top:auto; align-self:start; width:330px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding-left:32px; border-left:1px solid rgba(82,82,82,.16); } .tl-news-new .tl-news-heading{ width:297px; } .tl-news-new__list{ width:297px; display:flex; flex-direction:column; gap:16px; } .tl-news-new-card{ width:297px; height:130px; display:flex; flex-direction:column; justify-content:space-between; gap:20px; } .tl-news-new-card__top{ width:297px; display:flex; flex-direction:column; gap:8px; } .tl-news-new-card__title{ width:297px; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-family:"Roboto Flex Custom",sans-serif; font-style:italic; font-weight:700; font-size:24px; line-height:28px; letter-spacing:-.8px; color:#171717; transition:opacity .25s ease; font-variation-settings:"wght" 700; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; } /* ========================================================================== SHARE DROPDOWN ========================================================================== */ .tl-news-share{ position:relative; width:24px; height:24px; flex:0 0 24px; margin-left:auto; z-index:20; } .tl-news-share__button{ width:24px; height:24px; display:flex; align-items:center; justify-content:center; padding:0; margin:0; border:0; background:transparent; cursor:pointer; } .tl-news-share__button .tl-news-icon-slot--forward{ margin-left:0; } .tl-news-share__menu{ position:absolute; top:auto; bottom:32px; right:0; width:220px; height:160px; padding:8px 0; background:#FFFFFF; box-shadow:0 4px 24px rgba(203,208,233,.4); z-index:100; } .tl-news-share__menu[hidden]{ display:none !important; } .tl-news-share__list{ width:220px; height:144px; display:flex; flex-direction:column; align-items:flex-start; padding:0 16px; } .tl-news-share__item{ width:188px; height:48px; flex:0 0 48px; display:flex; align-items:center; gap:8px; padding:8px 0; margin:0; border:0; background:transparent; cursor:pointer; color:#171717; } .tl-news-share__icon{ width:24px; height:24px; flex:0 0 24px; display:flex; align-items:center; justify-content:center; } .tl-news-share__icon svg{ display:block; width:24px; height:24px; } .tl-news-share__label{ font-family:Inter,sans-serif; font-style:normal; font-weight:500; font-size:16px; line-height:22px; letter-spacing:-.4px; white-space:nowrap; color:#171717; } .tl-news-share__item:hover{ opacity:.68; } /* ========================================================================== UNIFIED CARD HOVER ========================================================================== */ @media (hover:hover){ /* Hover карточки НЕ срабатывает, когда курсор на кнопке поделиться */ .tl-news-main-card:hover:not(:has(.tl-news-share:hover)) .tl-news-main-card__image img, .tl-news-compact-card:hover:not(:has(.tl-news-share:hover)) .tl-news-compact-card__image img, .tl-news-video-card:hover:not(:has(.tl-news-share:hover)) .tl-news-video-card__image img, .tl-news-section-card:hover:not(:has(.tl-news-share:hover)) .tl-news-section-card__image img{ transform:scale(1.035); } .tl-news-main-card:hover:not(:has(.tl-news-share:hover)) .tl-news-main-card__title, .tl-news-compact-card:hover:not(:has(.tl-news-share:hover)) .tl-news-compact-card__title, .tl-news-video-card:hover:not(:has(.tl-news-share:hover)) .tl-news-video-card__title, .tl-news-section-card:hover:not(:has(.tl-news-share:hover)) .tl-news-section-card__title, .tl-news-new-card:hover .tl-news-new-card__title{ opacity:.68; } /* Отдельный hover только кнопки "Поделиться" */ .tl-news-share__button{ transition:opacity .2s ease; } .tl-news-share__button:hover{ opacity:.55; } } /* ========================================================================== FIXED SIDE MENUS ========================================================================== */ .tl-news-page{ position:relative; } .tl-news-sidebar{ grid-column:1; } .tl-news-content{ grid-column:2; } .tl-news-new{ grid-column:3; } /* fixed */ .tl-news-sidebar.is-news-fixed, .tl-news-new.is-news-fixed{ position:fixed !important; top:140px !important; right:auto !important; bottom:auto !important; margin:0 !important; z-index:50; }.tl-news-sidebar, .tl-news-new{ transition: opacity .22s ease, transform .22s ease; } .tl-news-sidebar.is-news-fading, .tl-news-new.is-news-fading{ pointer-events:none; } .tl-news-tablet-nav-scroll{ display:contents; } /* ========================================================================== FLUID DESKTOP — 1601 / 1919 ========================================================================== */ @media (min-width:1601px) and (max-width:1919px){ .tl-news-page{ width:100%; min-width:0; max-width:none; grid-template-columns: 330px minmax(0,1fr) 330px; gap:48px; padding:72px 90px; } /* LEFT */ .tl-news-sidebar, .tl-news-menu, .tl-news-topics, .tl-news-topics__list, .tl-news-menu__item{ width:330px; } /* CENTER */ .tl-news-content{ width:100%; min-width:0; } .tl-news-popular, .tl-news-video-slider, .tl-news-video-slider__viewport, .tl-news-video-slider__track, .tl-news-section-block, .tl-news-section-grid, .tl-news-vk, .tl-news-vk__viewport, .tl-news-vk__track{ width:100%; } /* POPULAR */ .tl-news-main-card, .tl-news-main-card__media, .tl-news-main-card__info{ width:100%; } .tl-news-main-card__media{ height:auto; aspect-ratio:920 / 503.85; } .tl-news-compact-list, .tl-news-compact-card{ width:100%; } /* VIDEO */ .tl-news-video-card{ width:100%; flex:0 0 100%; grid-template-columns: minmax(0,1fr) 320px; } .tl-news-video-card__media{ width:100%; } .tl-news-video-card__info, .tl-news-video-card__top, .tl-news-video-card__title{ width:100%; } /* SECTIONS */ .tl-news-section-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } .tl-news-section-card{ width:100%; } .tl-news-section-card__media, .tl-news-section-card__info, .tl-news-section-card__top{ width:100%; } .tl-news-section-card.is-wide, .tl-news-section-card.is-wide .tl-news-section-card__media, .tl-news-section-card.is-wide .tl-news-section-card__info, .tl-news-section-card.is-wide .tl-news-section-card__top{ width:100%; } /* VK */ .tl-news-vk-card{ width:calc((100% - 12px) / 2); flex: 0 0 calc((100% - 12px) / 2); } .tl-news-vk-card__top, .tl-news-vk-card__title{ width:100%; } /* RIGHT */ .tl-news-new{ width:330px; padding-left:32px; } .tl-news-new .tl-news-heading, .tl-news-new__list, .tl-news-new-card, .tl-news-new-card__top, .tl-news-new-card__title{ width:100%; } } /* ========================================================================== ADAPTIVE — FIGMA 1440 ========================================================================== */ @media (min-width:1200px) and (max-width:1600px){ /* ====================================================================== PAGE 90 + 250 + 24 + 712 + 24 + 250 + 90 = 1440 ====================================================================== */ .tl-news-page{ width:100%; min-width:0; max-width:1440px; grid-template-columns: 250px minmax(0,1fr) 250px; gap:24px; padding:72px 90px; } /* ====================================================================== LEFT ====================================================================== */ .tl-news-sidebar{ width:250px; grid-column:1; } .tl-news-menu, .tl-news-topics, .tl-news-topics__list{ width:250px; } .tl-news-menu__item{ width:250px; } /* ====================================================================== CENTER ====================================================================== */ .tl-news-content{ width:100%; min-width:0; grid-column:2; gap:48px; } /* ====================================================================== POPULAR Figma: 712px / padding 32px / inside 648px ====================================================================== */ .tl-news-popular{ width:100%; padding:32px; gap:32px; } .tl-news-popular > .tl-news-heading{ width:100%; } /* ====================================================================== MAIN CARD Figma: card 648 image 648 × 354.88 ====================================================================== */ .tl-news-main-card{ width:100%; gap:20px; } .tl-news-main-card__media{ width:100%; height:auto; aspect-ratio:648 / 354.88; } .tl-news-main-card__info, .tl-news-main-card__top, .tl-news-main-card__title{ width:100%; } /* ====================================================================== COMPACT CARDS 138 + 12 + 498 = 648 ====================================================================== */ .tl-news-compact-list{ width:100%; gap:24px; } .tl-news-compact-card{ width:100%; height:138px; grid-template-columns: 138px minmax(0,1fr); gap:12px; } .tl-news-compact-card__media{ width:138px; height:138px; } .tl-news-compact-card__info, .tl-news-compact-card__top, .tl-news-compact-card__title{ width:100%; } /* ====================================================================== VIDEO ARTICLES Figma: block 712 × 430 card 712 × 370 video 352 × 354 info 320 × 354 ====================================================================== */ .tl-news-video-slider, .tl-news-video-slider__viewport, .tl-news-video-slider__track{ width:100%; } .tl-news-video-card{ width:100%; height:370px; flex:0 0 100%; grid-template-columns: minmax(0,1fr) 320px; gap:24px; padding:8px; } .tl-news-video-card__media{ width:100%; height:354px; } .tl-news-video-card__info{ width:320px; height:354px; } .tl-news-video-card__top, .tl-news-video-card__title{ width:320px; } /* ====================================================================== ARTICLE SECTIONS Figma: width 712 350 + 12 + 350 ====================================================================== */ .tl-news-section-block{ width:100%; gap:24px; } .tl-news-section-grid{ width:100%; grid-template-columns: repeat(2,minmax(0,1fr)); gap:12px; } /* regular card */ .tl-news-section-card{ width:100%; height:348px; } .tl-news-section-card__media{ width:100%; height:176px; flex:0 0 176px; } .tl-news-section-card__info{ width:100%; height:144px; } .tl-news-section-card__top{ width:100%; } /* wide fifth card Figma: 712 × 415 image 696 × 271 info 696 × 116 */ .tl-news-section-card.is-wide{ width:100%; height:415px; } .tl-news-section-card.is-wide .tl-news-section-card__media{ width:100%; height:271px; flex:0 0 271px; } .tl-news-section-card.is-wide .tl-news-section-card__info{ width:100%; height:116px; } .tl-news-section-card.is-wide .tl-news-section-card__top{ width:100%; } /* ====================================================================== VK VIDEO Figma: block 712 cards 350 + 12 + 350 card height 530 ====================================================================== */ .tl-news-vk{ width:100%; gap:24px; } .tl-news-vk__viewport, .tl-news-vk__track{ width:100%; } .tl-news-vk-card{ width:calc((100% - 12px) / 2); height:530px; flex: 0 0 calc((100% - 12px) / 2); padding:24px; } .tl-news-vk-card__top{ width:100%; } .tl-news-vk-card__title{ width:100%; } /* ====================================================================== RIGHT — NEW Figma: width 250 padding-left 20 inner width 229 ====================================================================== */ .tl-news-new{ width:250px; grid-column:3; padding-left:20px; } .tl-news-new .tl-news-heading, .tl-news-new__list, .tl-news-new-card, .tl-news-new-card__top, .tl-news-new-card__title{ width:100%; } } /* ========================================================================== TABLET — FIGMA 768 ========================================================================== */ @media (min-width:600px) and (max-width:1200px){ /* ====================================================================== PAGE Figma: 768 / padding 32 16 / gap 40 ====================================================================== */ .tl-news-page{ width:100%; min-width:0; max-width:none; display:flex; flex-direction:column; align-items:flex-start; padding:32px 16px; gap:30px; background:#F5F5F5; } /* ====================================================================== HORIZONTAL MENU ====================================================================== */ .tl-news-sidebar{ position:relative !important; top:auto !important; left:auto !important; right:auto !important; width:100% !important; height:44px; flex:0 0 44px; display:block; margin:0 !important; padding:0; overflow:visible !important; border:0; background:#F5F5F5; opacity:1 !important; transform:none !important; z-index:100; } .tl-news-tablet-nav-scroll{ width:100%; height:44px; display:flex; flex-direction:row; align-items:flex-start; gap:12px; overflow-x:auto; overflow-y:hidden; background:#F5F5F5; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .tl-news-sidebar.is-tablet-fixed .tl-news-tablet-nav-scroll{ position:fixed; top:88px; z-index:900; background:#F5F5F5; padding-top:8px; padding-bottom:8px; height:60px; } .tl-news-tablet-nav-scroll::-webkit-scrollbar{ display:none; } .tl-news-sidebar::-webkit-scrollbar{ display:none; } /* Первая группа: Все новости / Популярное / Новое */ .tl-news-menu{ width:max-content; flex:0 0 auto; display:flex; flex-direction:row; align-items:flex-start; gap:8px; padding:0 12px 0 0; border-right: 1px solid rgba(107,114,128,.08); } /* Темы превращаем в продолжение chips */ .tl-news-topics{ width:max-content; flex:0 0 auto; display:flex; flex-direction:row; align-items:flex-start; gap:0; } .tl-news-topics__badge{ display:none; } .tl-news-topics__list{ width:max-content; flex:0 0 auto; display:flex; flex-direction:row; align-items:flex-start; gap:8px; } /* CHIPS */ .tl-news-menu__item{ width:auto; min-width:max-content; height:44px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding:0 16px; background:rgba(82,82,82,.08); font-family:Inter,sans-serif; font-style:normal; font-weight:600; font-size:16px; line-height:22px; letter-spacing:-.4px; color:#171717; white-space:nowrap; } .tl-news-menu__item:hover{ color:#171717; background:rgba(82,82,82,.12); } .tl-news-menu__item.is-active{ color:#171717; background:#D2FF00; } /* ====================================================================== HIDE RIGHT "NEW" ====================================================================== */ .tl-news-new{ display:none !important; } /* ====================================================================== MAIN CONTENT ====================================================================== */ .tl-news-content{ width:100%; min-width:0; display:flex; flex-direction:column; gap:40px; grid-column:auto; } /* ====================================================================== HEADINGS Figma: 32 / 30 ====================================================================== */ .tl-news-heading{ font-size:32px; line-height:30px; letter-spacing:-1px; } /* ====================================================================== POPULAR Figma: 736 / padding 24 / inner 688 ====================================================================== */ .tl-news-popular{ width:100%; padding:24px; gap:32px; } .tl-news-popular > .tl-news-heading{ width:100%; } /* ====================================================================== MAIN ARTICLE 688 x 536.79 image 688 x 376.79 ====================================================================== */ .tl-news-main-card{ width:100%; gap:20px; } .tl-news-main-card__media{ width:100%; height:auto; aspect-ratio:688 / 376.79; } .tl-news-main-card__info, .tl-news-main-card__top, .tl-news-main-card__title{ width:100%; } .tl-news-main-card__title{ font-size:32px; line-height:30px; letter-spacing:-1px; } /* ====================================================================== COMPACT ARTICLES Figma: 688 × 138 138 + 12 + 538 ====================================================================== */ .tl-news-compact-list{ width:100%; gap:24px; } .tl-news-compact-card{ width:100%; height:138px; grid-template-columns: 138px minmax(0,1fr); gap:12px; } .tl-news-compact-card__media{ width:138px; height:138px; } .tl-news-compact-card__info{ width:100%; height:138px; } .tl-news-compact-card__top{ width:100%; } .tl-news-compact-card__title{ width:100%; font-size:20px; line-height:24px; letter-spacing:-.6px; } /* ====================================================================== ARTICLE VIDEO SLIDER viewport: 736 card: 712 x 370 video: 352 x 354 info: 320 x 354 24px справа остаётся для визуального продолжения слайдера ====================================================================== */ .tl-news-video-slider{ width:100%; } .tl-news-video-slider__viewport{ width:100%; } .tl-news-video-slider__track{ width:100%; gap:12px; } .tl-news-video-card{ width:712px; height:370px; flex:0 0 712px; grid-template-columns: 352px 320px; gap:24px; padding:8px; } .tl-news-video-card__media{ width:352px; height:354px; } .tl-news-video-card__info{ width:320px; height:354px; } .tl-news-video-card__top, .tl-news-video-card__title{ width:320px; } .tl-news-video-card__title{ font-size:20px; line-height:24px; letter-spacing:-.6px; } /* ====================================================================== SECTION Figma: 736 heading -> gap 20 cards 362 + 12 + 362 ====================================================================== */ .tl-news-section-block{ width:100%; gap:20px; } .tl-news-section-grid{ width:100%; grid-template-columns: repeat(2,minmax(0,1fr)); gap:12px; } /* NORMAL SECTION CARD 362 x 340 */ .tl-news-section-card{ width:100%; height:340px; gap:12px; padding:8px; } .tl-news-section-card__media{ width:100%; height:176px; flex:0 0 176px; } .tl-news-section-card__info{ width:100%; height:136px; padding:0 12px 12px; } .tl-news-section-card__top{ width:100%; } .tl-news-section-card__title{ font-size:20px; line-height:24px; letter-spacing:-.6px; } /* WIDE FIFTH CARD Figma: 736 x 415 media 720 x 275 info 720 x 112 */ .tl-news-section-card.is-wide{ width:100%; height:415px; grid-column:1 / -1; } .tl-news-section-card.is-wide .tl-news-section-card__media{ width:100%; height:275px; flex:0 0 275px; } .tl-news-section-card.is-wide .tl-news-section-card__info{ width:100%; height:112px; } .tl-news-section-card.is-wide .tl-news-section-card__top{ width:100%; } /* ====================================================================== SECTION BUTTON Figma: full 736 × 56 ====================================================================== */ .tl-news-section-button{ width:100%; height:56px; flex:0 0 56px; } /* ====================================================================== VK VIDEO Figma: block 736 gap 16 viewport 736 cards 348 × 530 ====================================================================== */ .tl-news-vk{ width:100%; gap:16px; } .tl-news-vk__viewport{ width:100%; } .tl-news-vk__track{ width:100%; gap:12px; } .tl-news-vk-card{ width:348px; height:530px; flex:0 0 348px; padding:24px; } .tl-news-vk-card__top{ width:300px; height:32px; } .tl-news-vk-card__title{ width:300px; font-size:18px; line-height:24px; letter-spacing:-.4px; } .tl-news-vk-card__duration{ font-size:18px; line-height:24px; letter-spacing:-.4px; } /* ====================================================================== SHARE ====================================================================== */ .tl-news-share__menu{ right:0; } } /* ========================================================================== MOBILE — FIGMA 393 ========================================================================== */ @media (max-width:599px){ /* ====================================================================== PAGE ====================================================================== */ .tl-news-page{ width:100%; min-width:0; max-width:none; display:flex; flex-direction:column; align-items:flex-start; padding:32px 0; gap:32px; background:#F5F5F5; } /* ====================================================================== HORIZONTAL TOP MENU Логика такая же, как на планшете ====================================================================== */ .tl-news-sidebar{ position:relative !important; top:auto !important; left:auto !important; right:auto !important; width:100% !important; height:44px; flex:0 0 44px; display:block; margin:0 !important; padding:0; overflow:visible !important; border:0; background:#F5F5F5; opacity:1 !important; transform:none !important; z-index:100; } .tl-news-tablet-nav-scroll{ width:100%; height:44px; display:flex; flex-direction:row; align-items:flex-start; gap:12px; padding:0 16px; overflow-x:auto; overflow-y:hidden; background:#F5F5F5; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .tl-news-tablet-nav-scroll::-webkit-scrollbar{ display:none; } /* * Закреплённое меню. * 88px = низ мобильного header. * Внутри остаётся воздух сверху/снизу. */ .tl-news-sidebar.is-tablet-fixed .tl-news-tablet-nav-scroll{ position:fixed; top:88px; height:60px; padding: 8px 16px; background:#F5F5F5; z-index:900; } /* первая группа */ .tl-news-menu{ width:max-content; flex:0 0 auto; display:flex; flex-direction:row; align-items:flex-start; gap:8px; padding:0 12px 0 0; border-right: 1px solid rgba(107,114,128,.08); } /* темы */ .tl-news-topics{ width:max-content; flex:0 0 auto; display:flex; flex-direction:row; align-items:flex-start; gap:0; } .tl-news-topics__badge{ display:none; } .tl-news-topics__list{ width:max-content; flex:0 0 auto; display:flex; flex-direction:row; align-items:flex-start; gap:8px; } /* chips */ .tl-news-menu__item{ width:auto; min-width:max-content; height:44px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding:0 16px; background:rgba(82,82,82,.08); font-family:Inter,sans-serif; font-style:normal; font-weight:600; font-size:16px; line-height:22px; letter-spacing:-.4px; white-space:nowrap; color:#171717; } .tl-news-menu__item:hover{ color:#171717; background:rgba(82,82,82,.12); } .tl-news-menu__item.is-active{ color:#171717; background:#D2FF00; } /* ====================================================================== RIGHT "NEW" — НЕТ НА MOBILE ====================================================================== */ .tl-news-new{ display:none !important; } /* ====================================================================== CONTENT ====================================================================== */ .tl-news-content{ width:100%; min-width:0; display:flex; flex-direction:column; gap:32px; grid-column:auto; } .tl-news-heading{ font-size:32px; line-height:30px; letter-spacing:-1px; } /* ====================================================================== POPULAR Figma: 393px / padding 24 / inside 345px ====================================================================== */ .tl-news-popular{ width:100%; padding:24px; gap:32px; background:#FFFFFF; } .tl-news-popular > .tl-news-heading{ width:100%; } /* main article */ .tl-news-main-card{ width:100%; gap:20px; } .tl-news-main-card__media{ width:100%; height:auto; aspect-ratio:345 / 188.94; } .tl-news-main-card__info, .tl-news-main-card__top, .tl-news-main-card__title{ width:100%; } .tl-news-main-card__title{ font-size:32px; line-height:30px; letter-spacing:-1px; -webkit-line-clamp:3; } /* ====================================================================== META MOBILE ====================================================================== */ .tl-news-meta__text{ font-size:14px; line-height:18px; letter-spacing:-.3px; } /* ====================================================================== COMPACT ARTICLES Figma: 345 × 120 image 90 × 90 info 243 × 120 ====================================================================== */ .tl-news-compact-list{ width:100%; gap:24px; } .tl-news-compact-card{ width:100%; height:120px; display:grid; grid-template-columns: 90px minmax(0,1fr); gap:12px; } .tl-news-compact-card__media{ width:90px; height:90px; } .tl-news-compact-card__info{ width:100%; height:120px; } .tl-news-compact-card__top, .tl-news-compact-card__title{ width:100%; } .tl-news-compact-card__title{ font-size:20px; line-height:24px; letter-spacing:-.6px; -webkit-line-clamp:2; } .tl-news-compact-card .tl-news-play{ display:none; } /* ====================================================================== VIDEO ARTICLES Figma: общий viewport 393 padding по бокам 16 card 326 × 390 cover 310 × 240 ====================================================================== */ .tl-news-video-slider{ width:100%; padding:0 16px; } .tl-news-video-slider__viewport{ width:100%; overflow:hidden; } .tl-news-video-slider__track{ width:100%; gap:16px; } .tl-news-video-card{ width:326px; height:390px; flex:0 0 326px; display:flex; flex-direction:column; align-items:flex-start; grid-template-columns:none; gap:16px; padding:8px; } .tl-news-video-card__media{ width:310px; height:240px; flex:0 0 240px; } .tl-news-video-card__info{ width:310px; height:118px; padding:0; display:flex; flex-direction:column; justify-content:space-between; } .tl-news-video-card__top, .tl-news-video-card__title{ width:310px; } .tl-news-video-card__title{ font-size:20px; line-height:24px; letter-spacing:-.6px; } /* * В мобильной Figma стрелок нет — * листаем свайпом. */ .tl-news-video-slider .tl-news-slider-controls{ display:none; } /* ====================================================================== NEWS SECTIONS ====================================================================== */ .tl-news-section-block{ width:100%; gap:16px; } /* * Заголовок имеет 16px по краям, * сами карточки идут edge-to-edge. */ .tl-news-section-block > .tl-news-heading{ width:100%; padding:0 16px; } .tl-news-section-grid{ width:100%; display:flex; flex-direction:column; gap:12px; } /* * Все карточки на mobile одинаковые. * Никаких двух колонок. */ .tl-news-section-card, .tl-news-section-card.is-wide{ width:100%; height:340px; flex:none; display:flex; flex-direction:column; gap:12px; padding:8px; } .tl-news-section-card__media, .tl-news-section-card.is-wide .tl-news-section-card__media{ width:100%; height:176px; flex:0 0 176px; } .tl-news-section-card__info, .tl-news-section-card.is-wide .tl-news-section-card__info{ width:100%; height:136px; padding:0 12px 12px; } .tl-news-section-card__top, .tl-news-section-card.is-wide .tl-news-section-card__top{ width:100%; } .tl-news-section-card__title{ font-size:20px; line-height:24px; letter-spacing:-.6px; } /* * play в обычных пресс-центровых карточках * по Figma скрыт */ .tl-news-section-card .tl-news-play{ display:none; } /* ====================================================================== SECTION BUTTON ====================================================================== */ .tl-news-section-button{ width:100%; height:56px; flex:0 0 56px; } /* ====================================================================== VK VIDEO Figma: outer 393 horizontal padding 16 viewport 361 card 348 × 530 ====================================================================== */ .tl-news-vk{ width:100%; gap:16px; padding:0 16px; } .tl-news-vk__viewport{ width:100%; overflow:hidden; } .tl-news-vk__track{ width:100%; gap:12px; } .tl-news-vk-card{ width:348px; height:530px; flex:0 0 348px; padding:24px; } .tl-news-vk-card__top{ width:300px; } .tl-news-vk-card__title{ width:300px; font-size:18px; line-height:24px; letter-spacing:-.4px; } .tl-news-vk-card__duration{ font-size:18px; line-height:24px; letter-spacing:-.4px; } .tl-news-vk .tl-news-slider-controls{ display:none; } /* ====================================================================== SHARE ====================================================================== */ .tl-news-share__menu{ right:0; } } /* ========================================================================== VK VIDEO — REAL VIDEO ========================================================================== */ .tl-news-vk-card{ isolation:isolate; } .tl-news-vk-card__video{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; background:#171717; z-index:0; } /* Затемнение поверх видео как раньше было на background */ .tl-news-vk-card::after{ content:""; position:absolute; inset:0; background: linear-gradient( 183.5deg, rgba(1,3,14,0) 19.71%, rgba(1,3,14,.60) 90.72% ); pointer-events:none; z-index:1; transition:opacity .25s ease; } .tl-news-vk-card__top, .tl-news-vk-card__title{ position:relative; z-index:2; } .tl-news-vk-card__play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; width:80px; min-height:88px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:0; border:0; background:transparent; cursor:pointer; } .tl-news-vk-card__play .tl-news-play{ position:relative; left:auto; top:auto; transform:none; flex:0 0 56px; } .tl-news-vk-card__duration{ position:relative; z-index:1; } .tl-news-vk-card.is-playing::after{ opacity:0; } .tl-news-vk-card.is-playing .tl-news-vk-card__play{ opacity:0; pointer-events:none; } .tl-news-vk-card.is-playing .tl-news-vk-card__title{ opacity:0; pointer-events:none; } .tl-news-heading, .tl-news-main-card__title, .tl-news-new-card__title, .tl-news-compact-card__title, .tl-news-video-card__title, .tl-news-section-card__title, .tl-news-section-button{ padding-left:2px; } /* ========================================================================== NEWS CARDS — AUTO HEIGHT BY CONTENT ========================================================================== */ /* Обычные карточки */ .tl-news-section-card{ height:auto !important; min-height:348px; } .tl-news-section-card__info{ height:auto !important; min-height:144px; flex:1 0 auto; } /* Пятая широкая карточка */ .tl-news-section-card.is-wide{ height:auto !important; min-height:415px; } .tl-news-section-card.is-wide .tl-news-section-card__info{ height:auto !important; min-height:116px; flex:1 0 auto; } /* 1440 */ @media (min-width:1200px) and (max-width:1600px){ .tl-news-section-card{ height:auto !important; min-height:348px; } .tl-news-section-card__info{ height:auto !important; min-height:144px; } .tl-news-section-card.is-wide{ height:auto !important; min-height:415px; } .tl-news-section-card.is-wide .tl-news-section-card__info{ height:auto !important; min-height:116px; } } /* TABLET */ @media (min-width:600px) and (max-width:1199px){ .tl-news-section-card{ height:auto !important; min-height:340px; } .tl-news-section-card__info{ height:auto !important; min-height:136px; } .tl-news-section-card.is-wide{ height:auto !important; min-height:415px; } .tl-news-section-card.is-wide .tl-news-section-card__info{ height:auto !important; min-height:112px; } } /* MOBILE */ @media (max-width:599px){ .tl-news-section-card, .tl-news-section-card.is-wide{ height:auto !important; min-height:340px; } .tl-news-section-card__info, .tl-news-section-card.is-wide .tl-news-section-card__info{ height:auto !important; min-height:136px; flex:1 0 auto; } } /* ========================================================================== FINAL FIGMA CORRECTIONS — 2026-08-27 ========================================================================== */ /* -------------------------------------------------------------------------- 1. MENU — BLACK ONLY SELECTED -------------------------------------------------------------------------- */ .tl-news-menu__item{ color:#A3A3A3 !important; } .tl-news-menu__item.is-active{ color:#171717 !important; } @media (hover:hover){ .tl-news-menu__item:not(.is-active):hover{ color:#737373 !important; } } @media (max-width:1199px){ .tl-news-menu__item{ color:#A3A3A3 !important; } .tl-news-menu__item.is-active{ color:#171717 !important; background:#D2FF00 !important; } } /* -------------------------------------------------------------------------- 2. "СМОТРЕТЬ ВСЕ СТАТЬИ" -------------------------------------------------------------------------- */ .tl-news-section-button{ padding:0 24px !important; } /* -------------------------------------------------------------------------- 3 + 6. DESKTOP FIXED MENUS 68px header + 72px = 140px. ВАЖНО: transform здесь НЕ задаём. Им управляет JS, когда меню подходит к footer. -------------------------------------------------------------------------- */ @media (min-width:1200px){ .tl-news-sidebar, .tl-news-new{ position:relative; top:auto; } .tl-news-sidebar.is-news-fixed, .tl-news-new.is-news-fixed{ position:fixed !important; top:140px !important; right:auto !important; bottom:auto !important; margin:0 !important; opacity:1 !important; pointer-events:auto !important; z-index:50; /* * Нельзя ставить: * transform:none !important; * * JS использует transform для остановки * меню перед footer. */ transition:none !important; will-change:transform; } .tl-news-sidebar.is-news-fading, .tl-news-new.is-news-fading{ opacity:1 !important; pointer-events:auto !important; /* * transform здесь тоже НЕ задаём. */ } } /* -------------------------------------------------------------------------- TABLET / MOBILE MENU — ALWAYS VISIBLE -------------------------------------------------------------------------- */ @media (max-width:1199px){ .tl-news-sidebar, .tl-news-tablet-nav-scroll, .tl-news-sidebar.is-tablet-fixed .tl-news-tablet-nav-scroll{ opacity:1 !important; transform:none !important; } } /* -------------------------------------------------------------------------- 4. PLAY HOVER -------------------------------------------------------------------------- */ .tl-news-play{ transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease; } @media (hover:hover){ .tl-news-video-card__media:hover .tl-news-play, .tl-news-compact-card__media:hover .tl-news-play, .tl-news-section-card__media:hover .tl-news-play{ background:#D2FF00; transform: translate(-50%,-50%) scale(1.08); box-shadow: 0 8px 24px rgba(0,0,0,.10); } .tl-news-vk-card__play:hover .tl-news-play{ background:#D2FF00; transform:scale(1.08); box-shadow: 0 8px 24px rgba(0,0,0,.10); } } /* -------------------------------------------------------------------------- COPY LINK ALERT -------------------------------------------------------------------------- */ .tl-news-copy-alert{ position:fixed; left:50%; top:140px; z-index:1200; width:240px; height:48px; display:flex; flex-direction:row; justify-content:center; align-items:center; padding:12px 16px; gap:8px; background: linear-gradient( 0deg, rgba(34,197,94,.16), rgba(34,197,94,.16) ), #FFFFFF; color:#22C55E; opacity:0; transform: translate(-50%,-8px); pointer-events:none; transition: opacity .18s ease, transform .18s ease; } .tl-news-copy-alert[hidden]{ display:none !important; } .tl-news-copy-alert.is-visible{ opacity:1; transform: translate(-50%,0); } .tl-news-copy-alert__icon{ width:16px; height:18px; flex:0 0 16px; display:flex; align-items:flex-start; justify-content:center; padding-top:2px; } .tl-news-copy-alert__icon svg{ display:block; width:16px; height:16px; } .tl-news-copy-alert__label{ width:184px; height:24px; display:flex; align-items:center; font-family:Inter,sans-serif; font-style:normal; font-weight:600; font-size:18px; line-height:24px; letter-spacing:-.4px; color:#22C55E; white-space:nowrap; } .tl-news-copy-alert.is-error{ background: linear-gradient( 0deg, rgba(239,68,68,.12), rgba(239,68,68,.12) ), #FFFFFF; color:#EF4444; } .tl-news-copy-alert.is-error .tl-news-copy-alert__label{ color:#EF4444; } @media (max-width:1199px){ .tl-news-copy-alert{ top:104px; } } /* -------------------------------------------------------------------------- 7. CONTENT-DRIVEN HEIGHTS Размеры Figma остаются минимальными. Если текста больше — карточка растёт вниз. -------------------------------------------------------------------------- */ .tl-news-compact-card{ height:auto !important; min-height:138px; align-items:stretch; } .tl-news-compact-card__info{ height:auto !important; min-height:138px; } .tl-news-video-card{ height:auto !important; min-height:370px; align-items:stretch; } .tl-news-video-card__info{ height:auto !important; min-height:354px; } .tl-news-section-grid{ align-items:start; } .tl-news-section-card{ height:auto !important; min-height:348px; } .tl-news-section-card__info{ height:auto !important; min-height:144px; } .tl-news-section-card.is-wide{ height:auto !important; min-height:415px; } .tl-news-section-card.is-wide .tl-news-section-card__info{ height:auto !important; min-height:116px; } .tl-news-new-card{ height:auto !important; min-height:130px; } /* -------------------------------------------------------------------------- TABLET — 768 -------------------------------------------------------------------------- */ @media (min-width:600px) and (max-width:1199px){ .tl-news-page{ gap:40px !important; } .tl-news-section-card{ min-height:340px; } .tl-news-section-card__info{ min-height:136px; } .tl-news-section-card.is-wide{ min-height:415px; } .tl-news-section-card.is-wide .tl-news-section-card__info{ min-height:112px; } } /* -------------------------------------------------------------------------- MOBILE -------------------------------------------------------------------------- */ @media (max-width:599px){ .tl-news-section-card, .tl-news-section-card.is-wide{ min-height:340px; } .tl-news-section-card__info, .tl-news-section-card.is-wide .tl-news-section-card__info{ min-height:136px; } } /* ========================================================================== TABLET / MOBILE FIXED NEWS MENU WHITE BACKGROUND ========================================================================== */ @media (max-width:1199px){ .tl-news-sidebar.is-tablet-fixed{ background:#FFFFFF !important; } .tl-news-sidebar.is-tablet-fixed .tl-news-tablet-nav-scroll{ position:fixed; top:88px; height:74px !important; padding-top:10px !important; padding-bottom:20px !important; background:#FFFFFF !important; z-index:900; } } /* -------------------------------------------------------------------------- MOBILE FIXED MENU -------------------------------------------------------------------------- */ @media (max-width:599px){ .tl-news-sidebar.is-tablet-fixed .tl-news-tablet-nav-scroll{ padding-left:16px !important; padding-right:16px !important; } } /* ========================================================================== TABLET FIXED MENU — FULL VIEWPORT WHITE BACKGROUND ========================================================================== */ @media (min-width:600px) and (max-width:1199px){ .tl-news-sidebar.is-tablet-fixed{ background:#FFFFFF !important; } .tl-news-sidebar.is-tablet-fixed .tl-news-tablet-nav-scroll{ left:0 !important; right:0 !important; width:100vw !important; max-width:none !important; padding: 10px 16px 20px !important; background:#FFFFFF !important; } } /* End */ /* Start:/local/templates/turbolemons-template/components/bitrix/news/.default/section.css?178785625938434*/ /* ========================================================================== BLOG SECTION — DESKTOP 1920 Uses news-main.css for the shared shell/menu/right column. ========================================================================== */ .tl-news-section-page{ padding:48px 90px 72px; } /* On category page sidebars are controlled by section.js, not native sticky. */ .tl-news-section-page .tl-news-sidebar, .tl-news-section-page .tl-news-new{ position:relative; top:auto; align-self:start; } .tl-news-section-page .tl-news-sidebar{ grid-column:1; } .tl-section-content{ width:984px; min-width:0; grid-column:2; display:flex; flex-direction:column; align-items:stretch; gap:48px; } .tl-news-section-page .tl-news-new{ grid-column:3; } /* ========================================================================== SECTION HEAD Figma: 984 × 140 / padding 32 / gap 16 ========================================================================== */ .tl-section-head{ width:984px; height:auto !important; min-height:140px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:16px; padding:32px; background:#FFFFFF; } .tl-section-head .tl-news-heading{ width:920px; } .tl-section-head__description{ width:920px; height:auto !important; min-height:0; margin:0; padding:0; font-family:Inter,sans-serif; font-style:normal; font-weight:400; font-size:16px; line-height:22px; letter-spacing:-.4px; color:#171717; } /* ========================================================================== LIST Figma: 984 / cards gap 20 ========================================================================== */ .tl-section-list{ width:984px; display:flex; flex-direction:column; align-items:flex-start; gap:20px; } /* ========================================================================== CARD Figma: 984 × 500 / padding 8 / gap 12 ========================================================================== */ .tl-section-card{ width:984px; height:500px; display:flex; flex-direction:column; align-items:center; gap:12px; padding:8px; background:#FFFFFF; } .tl-section-card[hidden]{ display:none !important; } .tl-section-card__media{ position:relative; width:968px; height:356px; flex:0 0 356px; display:block; overflow:hidden; border:1px solid rgba(82,82,82,.16); background:#F5F5F5; } .tl-section-card__media > img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; } .tl-section-card__media .tl-news-placeholder{ display:block; } .tl-section-card__info{ width:968px; height:116px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; gap:20px; padding:0 12px 12px; } .tl-section-card__top{ width:944px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; } .tl-section-card__title{ width:944px; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-family:"Roboto Flex Custom",sans-serif; font-style:italic; font-weight:700; font-size:24px; line-height:28px; letter-spacing:-.8px; color:#171717; font-variation-settings:"wght" 700; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; transition:opacity .25s ease; } .tl-section-card__meta{ width:944px; height:24px; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:8px; } .tl-section-card__meta-text{ min-width:0; display:flex; flex-direction:row; align-items:center; gap:8px; overflow:hidden; font-family:Inter,sans-serif; font-style:normal; font-weight:400; font-size:16px; line-height:22px; letter-spacing:-.4px; white-space:nowrap; color:#A3A3A3; } .tl-section-share{ width:24px; height:24px; flex:0 0 24px; display:flex; align-items:center; justify-content:center; padding:0; margin:0; border:0; background:transparent; cursor:pointer; transition:opacity .2s ease; } .tl-section-share svg{ display:block; width:24px; height:24px; } .tl-section-share:hover{ opacity:.55; } /* ========================================================================== LOAD MORE Figma: 156 × 56 ========================================================================== */ .tl-section-more{ width:156px; height:56px; align-self:center; display:flex; align-items:center; justify-content:center; padding:0 24px; margin:0; border:0; background:rgba(82,82,82,.08); cursor:pointer; font-family:"Roboto Flex Custom",sans-serif; font-style:italic; font-weight:700; font-size:16px; line-height:22px; letter-spacing:-.4px; text-transform:uppercase; color:#171717; font-variation-settings:"wght" 700; -webkit-font-smoothing:antialiased; transition:background-color .2s ease; } .tl-section-more:hover{ background:rgba(82,82,82,.14); } .tl-section-empty{ width:984px; padding:32px; background:#FFFFFF; font-family:Inter,sans-serif; font-size:16px; line-height:22px; color:#171717; } /* ========================================================================== HOVER ========================================================================== */ @media (hover:hover){ .tl-section-card:hover .tl-section-card__media > img{ transform:scale(1.035); } .tl-section-card:hover .tl-section-card__title{ opacity:.68; } .tl-section-card:has(.tl-news-share:hover) .tl-section-card__media > img{ transform:none; } .tl-section-card:has(.tl-news-share:hover) .tl-section-card__title{ opacity:1; } } /* ========================================================================== CATEGORY — FLUID DESKTOP 1601 / 1919 ========================================================================== */ @media (min-width:1601px) and (max-width:1919px){ /* ====================================================================== PAGE 90 | 330 | 48 | CENTER | 48 | 330 | 90 ====================================================================== */ .tl-news-section-page{ width:100%; min-width:0; max-width:none; grid-template-columns: 330px minmax(0,1fr) 330px; gap:48px; padding: 48px 90px 72px; } /* ====================================================================== LEFT ====================================================================== */ .tl-news-section-page .tl-news-sidebar{ width:330px; grid-column:1; } .tl-news-section-page .tl-news-menu, .tl-news-section-page .tl-news-topics, .tl-news-section-page .tl-news-topics__list, .tl-news-section-page .tl-news-menu__item{ width:330px; } /* ====================================================================== CENTER ====================================================================== */ .tl-section-content{ width:100%; min-width:0; grid-column:2; } /* ====================================================================== HEADER ====================================================================== */ .tl-section-head{ width:100%; } .tl-section-head .tl-news-heading, .tl-section-head__description{ width:100%; } /* ====================================================================== LIST ====================================================================== */ .tl-section-list{ width:100%; } /* ====================================================================== CARDS Высота остаётся как desktop / Figma. Меняется только ширина. ====================================================================== */ .tl-section-card{ width:100%; } .tl-section-card__media{ width:100%; } .tl-section-card__info{ width:100%; } .tl-section-card__top, .tl-section-card__title, .tl-section-card__meta{ width:100%; } /* ====================================================================== EMPTY ====================================================================== */ .tl-section-empty{ width:100%; } /* ====================================================================== RIGHT ====================================================================== */ .tl-news-section-page .tl-news-new{ width:330px; grid-column:3; padding-left:32px; } .tl-news-section-page .tl-news-new .tl-news-heading, .tl-news-section-page .tl-news-new__list, .tl-news-section-page .tl-news-new-card, .tl-news-section-page .tl-news-new-card__top, .tl-news-section-page .tl-news-new-card__title{ width:100%; } } /* ========================================================================== CATEGORY — FIGMA 1440 ========================================================================== */ @media (min-width:1200px) and (max-width:1600px){ /* ====================================================================== PAGE 90 + 250 + 24 + 712 + 24 + 250 + 90 = 1440 ====================================================================== */ .tl-news-section-page{ width:100%; min-width:0; max-width:1440px; grid-template-columns: 250px minmax(0,1fr) 250px; gap:24px; padding: 48px 90px 72px; } /* ====================================================================== LEFT MENU ====================================================================== */ .tl-news-section-page .tl-news-sidebar{ width:250px; grid-column:1; } .tl-news-section-page .tl-news-menu, .tl-news-section-page .tl-news-topics, .tl-news-section-page .tl-news-topics__list{ width:250px; } .tl-news-section-page .tl-news-menu__item{ width:250px; } /* ====================================================================== CENTER Figma: 712px ====================================================================== */ .tl-section-content{ width:100%; min-width:0; grid-column:2; gap:48px; } /* ====================================================================== SECTION HEAD Figma: 712 × 140 padding 32 inner 648 ====================================================================== */ .tl-section-head{ width:100%; min-height:140px; padding:32px; gap:16px; } .tl-section-head .tl-news-heading, .tl-section-head__description{ width:100%; } /* ====================================================================== ARTICLE LIST ====================================================================== */ .tl-section-list{ width:100%; gap:20px; } /* ====================================================================== ARTICLE CARD Figma: card 712 × 500 padding 8 image 696 × 356 info 696 × 116 inner 672 ====================================================================== */ .tl-section-card{ width:100%; height:500px; padding:8px; gap:12px; } /* IMAGE */ .tl-section-card__media{ width:100%; height:356px; flex:0 0 356px; } /* INFO */ .tl-section-card__info{ width:100%; height:116px; padding: 0 12px 12px; gap:20px; } /* INNER 672 */ .tl-section-card__top, .tl-section-card__title, .tl-section-card__meta{ width:100%; } /* ====================================================================== EMPTY ====================================================================== */ .tl-section-empty{ width:100%; } /* ====================================================================== LOAD MORE Figma stays 156 × 56 ====================================================================== */ .tl-section-more{ width:156px; height:56px; } /* ====================================================================== RIGHT — NEW Figma: 250 outer padding-left 20 229 inner ====================================================================== */ .tl-news-section-page .tl-news-new{ width:250px; grid-column:3; padding-left:20px; } .tl-news-section-page .tl-news-new .tl-news-heading, .tl-news-section-page .tl-news-new__list, .tl-news-section-page .tl-news-new-card, .tl-news-section-page .tl-news-new-card__top, .tl-news-section-page .tl-news-new-card__title{ width:100%; } } /* ========================================================================== CATEGORY — TABLET 768 ========================================================================== */ @media (min-width:600px) and (max-width:1199px){ /* ====================================================================== PAGE Figma: 768 padding 32px 16px content 736px ====================================================================== */ .tl-news-section-page{ width:100%; min-width:0; max-width:none; display:flex; flex-direction:column; align-items:flex-start; padding:32px 16px; gap:40px; background:#F5F5F5; } /* ====================================================================== HORIZONTAL MENU PLACEHOLDER Сам aside остаётся в потоке. Фиксируется внутренний scroll-wrapper. ====================================================================== */ .tl-news-section-page .tl-news-sidebar{ position:relative !important; top:auto !important; left:auto !important; right:auto !important; width:100% !important; height:44px; flex:0 0 44px; display:block; margin:0 !important; padding:0; overflow:visible !important; border:0; background:#F5F5F5; opacity:1 !important; transform:none !important; z-index:100; } /* ====================================================================== HORIZONTAL SCROLL ====================================================================== */ .tl-news-section-page .tl-news-tablet-nav-scroll{ width:100%; height:44px; display:flex; flex-direction:row; align-items:flex-start; gap:12px; padding:0; overflow-x:auto; overflow-y:hidden; background:#F5F5F5; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .tl-news-section-page .tl-news-tablet-nav-scroll::-webkit-scrollbar{ display:none; } /* ====================================================================== FIXED TABLET MENU 88px = низ header 8px внутреннего воздуха сверху/снизу ====================================================================== */ .tl-news-section-page .tl-news-sidebar.is-tablet-fixed .tl-news-tablet-nav-scroll{ position:fixed; top:88px; height:60px; padding: 8px 16px; background:#F5F5F5; z-index:900; } /* ====================================================================== FIRST MENU GROUP ====================================================================== */ .tl-news-section-page .tl-news-menu{ width:max-content; flex:0 0 auto; display:flex; flex-direction:row; align-items:flex-start; gap:8px; padding:0 12px 0 0; border-right: 1px solid rgba(107,114,128,.08); } /* ====================================================================== TOPICS ====================================================================== */ .tl-news-section-page .tl-news-topics{ width:max-content; flex:0 0 auto; display:flex; flex-direction:row; align-items:flex-start; gap:0; } .tl-news-section-page .tl-news-topics__badge{ display:none; } .tl-news-section-page .tl-news-topics__list{ width:max-content; flex:0 0 auto; display:flex; flex-direction:row; align-items:flex-start; gap:8px; } /* ====================================================================== CHIPS ====================================================================== */ .tl-news-section-page .tl-news-menu__item{ width:auto; min-width:max-content; height:44px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding:0 16px; background:rgba(82,82,82,.08); font-family:Inter,sans-serif; font-style:normal; font-weight:600; font-size:16px; line-height:22px; letter-spacing:-.4px; color:#171717; white-space:nowrap; } .tl-news-section-page .tl-news-menu__item.is-active{ background:#D2FF00; color:#171717; } /* ====================================================================== RIGHT "NEW" В планшетной Figma его нет ====================================================================== */ .tl-news-section-page .tl-news-new{ display:none !important; } /* ====================================================================== CONTENT Figma: width 736 gap 32 ====================================================================== */ .tl-section-content{ width:100%; min-width:0; display:flex; flex-direction:column; gap:32px; grid-column:auto; } /* ====================================================================== SECTION HEAD Figma: 736 × 108 padding 24 gap 8 inner 688 ====================================================================== */ .tl-section-head{ width:100%; min-height:108px; padding:24px; gap:8px; } .tl-section-head .tl-news-heading{ width:100%; font-size:32px; line-height:30px; letter-spacing:-1px; } .tl-section-head__description{ width:100%; font-size:16px; line-height:22px; letter-spacing:-.4px; } /* ====================================================================== ARTICLE LIST ====================================================================== */ .tl-section-list{ width:100%; gap:20px; } /* ====================================================================== CARD Figma: card 736 × 500 padding 8 image 720 × 360 info 720 × 112 inner 696 ====================================================================== */ .tl-section-card{ width:100%; height:500px; padding:8px; gap:12px; } .tl-section-card__media{ width:100%; height:360px; flex:0 0 360px; } .tl-section-card__info{ width:100%; height:112px; padding: 0 12px 12px; gap:20px; } .tl-section-card__top{ width:100%; height:56px; gap:8px; } .tl-section-card__title{ width:100%; font-size:20px; line-height:24px; letter-spacing:-.6px; -webkit-line-clamp:1; } .tl-section-card__meta{ width:100%; height:24px; } /* ====================================================================== LOAD MORE В планшетной Figma: 736 × 56 ====================================================================== */ .tl-section-more{ width:100%; height:56px; align-self:stretch; } /* ====================================================================== EMPTY ====================================================================== */ .tl-section-empty{ width:100%; } /* ====================================================================== SHARE ====================================================================== */ .tl-news-share__menu{ right:0; } } @media (min-width:1200px) and (max-width:1600px){ .tl-section-card{ height:auto; min-height:500px; } .tl-section-card__info{ height:auto; min-height:116px; flex:1 0 auto; } .tl-section-card__top{ height:auto; min-height:0; } } /* ========================================================================== CATEGORY — MOBILE 393 ========================================================================== */ @media (max-width:599px){ /* ====================================================================== PAGE ====================================================================== */ .tl-news-section-page{ width:100%; min-width:0; max-width:none; display:flex; flex-direction:column; align-items:flex-start; padding:32px 0; gap:32px; background:#F5F5F5; } /* ====================================================================== TOP MENU PLACE ====================================================================== */ .tl-news-section-page .tl-news-sidebar{ position:relative !important; top:auto !important; left:auto !important; right:auto !important; width:100% !important; height:44px; flex:0 0 44px; display:block; margin:0 !important; padding:0; overflow:visible !important; border:0; background:#F5F5F5; opacity:1 !important; transform:none !important; z-index:100; } /* ====================================================================== HORIZONTAL MENU ====================================================================== */ .tl-news-section-page .tl-news-tablet-nav-scroll{ width:100%; height:44px; display:flex; flex-direction:row; align-items:flex-start; gap:12px; padding:0 16px; overflow-x:auto; overflow-y:hidden; background:#F5F5F5; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .tl-news-section-page .tl-news-tablet-nav-scroll::-webkit-scrollbar{ display:none; } /* ====================================================================== FIXED MOBILE MENU Впритык под header. Внутри по 8px воздуха сверху и снизу. ====================================================================== */ .tl-news-section-page .tl-news-sidebar.is-tablet-fixed .tl-news-tablet-nav-scroll{ position:fixed; top:88px; height:60px; padding: 8px 16px; background:#F5F5F5; z-index:900; } /* ====================================================================== FIRST GROUP ====================================================================== */ .tl-news-section-page .tl-news-menu{ width:max-content; flex:0 0 auto; display:flex; flex-direction:row; align-items:flex-start; gap:8px; padding:0 12px 0 0; border-right: 1px solid rgba(107,114,128,.08); } /* ====================================================================== TOPICS ====================================================================== */ .tl-news-section-page .tl-news-topics{ width:max-content; flex:0 0 auto; display:flex; flex-direction:row; align-items:flex-start; } .tl-news-section-page .tl-news-topics__badge{ display:none; } .tl-news-section-page .tl-news-topics__list{ width:max-content; flex:0 0 auto; display:flex; flex-direction:row; align-items:flex-start; gap:8px; } /* ====================================================================== CHIPS ====================================================================== */ .tl-news-section-page .tl-news-menu__item{ width:auto; min-width:max-content; height:44px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding:0 16px; background:rgba(82,82,82,.08); font-family:Inter,sans-serif; font-style:normal; font-weight:600; font-size:16px; line-height:22px; letter-spacing:-.4px; white-space:nowrap; color:#171717; } .tl-news-section-page .tl-news-menu__item.is-active{ background:#D2FF00; color:#171717; } /* ====================================================================== RIGHT NEW ====================================================================== */ .tl-news-section-page .tl-news-new{ display:none !important; } /* ====================================================================== CONTENT Figma: 393px ====================================================================== */ .tl-section-content{ width:100%; min-width:0; display:flex; flex-direction:column; gap:32px; grid-column:auto; } /* ====================================================================== SECTION HEAD Outer 393 16px left/right white block 361 padding 16 inner 329 ====================================================================== */ .tl-section-head{ width:calc(100% - 32px); height:auto !important; min-height:114px; margin:0 16px; padding:16px; gap:8px; } .tl-section-head .tl-news-heading{ width:100%; font-size:32px; line-height:30px; letter-spacing:-1px; } .tl-section-head__description{ width:100%; height:auto !important; min-height:0; font-size:16px; line-height:22px; letter-spacing:-.4px; } /* ====================================================================== ARTICLE LIST ====================================================================== */ .tl-section-list{ width:100%; gap:16px; } /* ====================================================================== ARTICLE CARD Figma: card 393 × 350 image 377 × 186 info 377 × 136 inner 353 ====================================================================== */ .tl-section-card{ width:100%; height:auto; min-height:350px; padding:8px; gap:12px; } /* IMAGE */ .tl-section-card__media{ width:100%; height:186px; flex:0 0 186px; } /* INFO */ .tl-section-card__info{ width:100%; height:auto; min-height:136px; flex:1 0 auto; padding: 0 12px 12px; gap:20px; } /* TITLE AREA */ .tl-section-card__top{ width:100%; height:auto; min-height:80px; gap:8px; } .tl-section-card__title{ width:100%; height:auto; font-size:20px; line-height:24px; letter-spacing:-.6px; -webkit-line-clamp:2; } /* META */ .tl-section-card__meta{ width:100%; height:24px; } .tl-section-card__meta-text{ font-size:16px; line-height:22px; letter-spacing:-.4px; } /* ====================================================================== LOAD MORE Figma: 361 × 56 ====================================================================== */ .tl-section-more{ width:calc(100% - 32px); height:56px; margin:0 16px; align-self:stretch; } /* ====================================================================== EMPTY ====================================================================== */ .tl-section-empty{ width:calc(100% - 32px); margin:0 16px; } /* ====================================================================== SHARE ====================================================================== */ .tl-news-share__menu{ right:0; } } /* Roboto Flex — fix left italic clipping */ .tl-section-head .tl-news-heading, .tl-section-card__title{ padding-left:2px; } /* ========================================================================== FINAL SECTION FIGMA CORRECTIONS — 2026-08-27 Shared behavior with the blog main page. ========================================================================== */ /* -------------------------------------------------------------------------- MENU — only selected item is black -------------------------------------------------------------------------- */ .tl-news-section-page .tl-news-menu__item{ color:#A3A3A3 !important; } .tl-news-section-page .tl-news-menu__item.is-active{ color:#171717 !important; } @media (hover:hover){ .tl-news-section-page .tl-news-menu__item:not(.is-active):hover{ color:#737373 !important; } } @media (max-width:1199px){ .tl-news-section-page .tl-news-menu__item{ color:#A3A3A3 !important; } .tl-news-section-page .tl-news-menu__item.is-active{ color:#171717 !important; background:#D2FF00 !important; } } /* -------------------------------------------------------------------------- LOAD MORE — exact centered label / symmetric Figma padding -------------------------------------------------------------------------- */ .tl-section-more{ padding:0 24px !important; text-align:center; } /* -------------------------------------------------------------------------- CONTENT-DRIVEN HEIGHTS Figma sizes remain minimums; real text can increase blocks naturally. -------------------------------------------------------------------------- */ .tl-section-head{ height:auto !important; } .tl-section-head__description{ height:auto !important; min-height:0 !important; } .tl-section-card{ height:auto !important; min-height:500px; align-items:stretch; } .tl-section-card__info{ height:auto !important; min-height:116px; flex:1 0 auto; } .tl-section-card__top{ height:auto !important; min-height:0 !important; } .tl-section-card__title{ height:auto !important; } .tl-news-section-page .tl-news-new-card{ height:auto !important; min-height:130px; } @media (min-width:600px) and (max-width:1199px){ .tl-section-card{ height:auto !important; min-height:500px; } .tl-section-card__info{ height:auto !important; min-height:112px; } .tl-section-card__top{ height:auto !important; min-height:0 !important; } /* Figma 768 page spacing */ .tl-news-section-page{ gap:40px !important; } } @media (max-width:599px){ .tl-section-card{ height:auto !important; min-height:350px; } .tl-section-card__info{ height:auto !important; min-height:136px; } .tl-section-card__top{ height:auto !important; min-height:80px; } } /* -------------------------------------------------------------------------- DESKTOP FIXED SIDE MENUS Desktop header 68px + Figma air 72px = 140px. JS controls transform near the footer, therefore transform MUST NOT be forced to none here. -------------------------------------------------------------------------- */ @media (min-width:1200px){ .tl-news-section-page .tl-news-sidebar, .tl-news-section-page .tl-news-new{ position:relative; top:auto; align-self:start; } .tl-news-section-page .tl-news-sidebar.is-news-fixed, .tl-news-section-page .tl-news-new.is-news-fixed{ position:fixed !important; top:140px !important; right:auto !important; bottom:auto !important; margin:0 !important; opacity:1 !important; pointer-events:auto !important; z-index:50; transition:none !important; will-change:transform; } .tl-news-section-page .tl-news-sidebar.is-news-fading, .tl-news-section-page .tl-news-new.is-news-fading{ opacity:1 !important; pointer-events:auto !important; } } /* -------------------------------------------------------------------------- TABLET / MOBILE FIXED MENU White background across the entire viewport, 10px above chips, 20px below chips, exactly like the corrected blog main page. -------------------------------------------------------------------------- */ @media (max-width:1199px){ .tl-news-section-page .tl-news-sidebar.is-tablet-fixed{ background:#FFFFFF !important; } .tl-news-section-page .tl-news-sidebar.is-tablet-fixed .tl-news-tablet-nav-scroll{ position:fixed !important; top:88px !important; left:0 !important; right:0 !important; width:100vw !important; max-width:none !important; height:74px !important; padding:10px 16px 20px !important; background:#FFFFFF !important; opacity:1 !important; transform:none !important; z-index:900; } } /* -------------------------------------------------------------------------- COPY LINK ALERT — same as blog main page -------------------------------------------------------------------------- */ .tl-news-copy-alert{ position:fixed; left:50%; top:140px; z-index:1200; width:240px; height:48px; display:flex; flex-direction:row; justify-content:center; align-items:center; padding:12px 16px; gap:8px; background: linear-gradient(0deg,rgba(34,197,94,.16),rgba(34,197,94,.16)), #FFFFFF; color:#22C55E; opacity:0; transform:translate(-50%,-8px); pointer-events:none; transition:opacity .18s ease,transform .18s ease; } .tl-news-copy-alert[hidden]{ display:none !important; } .tl-news-copy-alert.is-visible{ opacity:1; transform:translate(-50%,0); } .tl-news-copy-alert__icon{ width:16px; height:18px; flex:0 0 16px; display:flex; align-items:flex-start; justify-content:center; padding-top:2px; } .tl-news-copy-alert__icon svg{ display:block; width:16px; height:16px; } .tl-news-copy-alert__label{ width:184px; height:24px; display:flex; align-items:center; font-family:Inter,sans-serif; font-style:normal; font-weight:600; font-size:18px; line-height:24px; letter-spacing:-.4px; color:#22C55E; white-space:nowrap; } .tl-news-copy-alert.is-error{ background: linear-gradient(0deg,rgba(239,68,68,.12),rgba(239,68,68,.12)), #FFFFFF; color:#EF4444; } .tl-news-copy-alert.is-error .tl-news-copy-alert__label{ color:#EF4444; } @media (max-width:1199px){ .tl-news-copy-alert{ top:104px; } } /* -------------------------------------------------------------------------- PLAY HOVER — harmless here and identical to the blog main page if a media card with .tl-news-play is added to the section template later. -------------------------------------------------------------------------- */ .tl-news-play{ transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease; } @media (hover:hover){ .tl-section-card__media:hover .tl-news-play{ background:#D2FF00; transform:translate(-50%,-50%) scale(1.08); box-shadow:0 8px 24px rgba(0,0,0,.10); } } /* -------------------------------------------------------------------------- ROBOTO FLEX — italic left overhang without shifting buttons -------------------------------------------------------------------------- */ .tl-section-head .tl-news-heading, .tl-section-card__title{ padding-left:2px; } /* End */ /* /local/templates/turbolemons-template/components/bitrix/news/.default/style.css?178749291259775 */ /* /local/templates/turbolemons-template/components/bitrix/news/.default/news-main.css?178785564770104 */ /* /local/templates/turbolemons-template/components/bitrix/news/.default/section.css?178785625938434 */