/* 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/video-lightbox.css?17901608725602*/ /* ========================================================================== TURBOLEMONS BLOG — UNIVERSAL VIDEO LIGHTBOX VK + YouTube + uploaded/direct video. Horizontal articles: 16:9. Shorts: 9:16. ========================================================================== */ .tl-news-video-card__media{ padding:0; border:0; outline:0; font:inherit; color:inherit; text-align:left; cursor:pointer; appearance:none; -webkit-appearance:none; } .tl-news-video-card__media:focus-visible, .tl-detail-video-trigger:focus-visible, .tl-news-short-card__open:focus-visible{ outline:2px solid #171717; outline-offset:3px; } .tl-detail-hero--video{ position:relative; } .tl-detail-video-trigger{ position:relative; display:block; width:100%; height:100%; padding:0; border:0; margin:0; overflow:hidden; background:#171717; color:inherit; cursor:pointer; appearance:none; -webkit-appearance:none; } .tl-detail-video-trigger > img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s ease; } .tl-detail-video-trigger__placeholder{ display:block; width:100%; height:100%; background: linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,0)), #171717; } .tl-detail-video-trigger__play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; } .tl-detail-video-trigger__duration{ position:absolute; right:12px; bottom:12px; z-index:2; 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:#fff; } @media (hover:hover){ .tl-detail-video-trigger:hover > img{ transform:scale(1.025); } } /* -------------------------------------------------------------------------- LIGHTBOX BASE -------------------------------------------------------------------------- */ .tl-video-lightbox{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:32px; background:rgba(0,0,0,.90); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .tl-video-lightbox[hidden]{ display:none !important; } .tl-video-lightbox__dialog{ position:relative; width:min(1280px,calc(100vw - 64px)); max-height:calc(100vh - 64px); } .tl-video-lightbox__stage{ position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; background:#000; box-shadow:0 28px 90px rgba(0,0,0,.5); } .tl-video-lightbox__iframe, .tl-video-lightbox__video{ display:block; width:100%; height:100%; border:0; background:#000; } .tl-video-lightbox__video{ object-fit:contain; } /* -------------------------------------------------------------------------- SHORTS / PORTRAIT 9:16 -------------------------------------------------------------------------- */ .tl-video-lightbox--short .tl-video-lightbox__dialog{ width:auto; max-width:calc(100vw - 64px); } .tl-video-lightbox--short .tl-video-lightbox__stage{ width:min( 480px, calc(100vw - 64px), calc((100vh - 96px) * 9 / 16) ); aspect-ratio:9 / 16; margin:0 auto; } /* -------------------------------------------------------------------------- CLOSE -------------------------------------------------------------------------- */ .tl-video-lightbox__close{ position:absolute; right:0; top:-56px; width:48px; height:48px; display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:0; background:#fff; color:#171717; cursor:pointer; appearance:none; -webkit-appearance:none; transition:background-color .2s ease; z-index:5; } .tl-video-lightbox__close::before, .tl-video-lightbox__close::after{ content:""; position:absolute; width:22px; height:2px; background:currentColor; } .tl-video-lightbox__close::before{ transform:rotate(45deg); } .tl-video-lightbox__close::after{ transform:rotate(-45deg); } .tl-video-lightbox__close:hover{ background:#D2FF00; } .tl-video-lightbox__close:focus-visible{ outline:2px solid #D2FF00; outline-offset:3px; } .tl-video-lightbox__error{ min-height:240px; display:flex; align-items:center; justify-content:center; padding:32px; background:#171717; font-family:Inter,sans-serif; font-size:16px; line-height:22px; text-align:center; color:#fff; } html.tl-video-lightbox-open, body.tl-video-lightbox-open{ overflow:hidden !important; } @media (max-width:767px){ .tl-video-lightbox{ padding:16px; } .tl-video-lightbox__dialog{ width:calc(100vw - 32px); max-height:calc(100vh - 32px); } .tl-video-lightbox--short .tl-video-lightbox__dialog{ width:auto; max-width:calc(100vw - 32px); } .tl-video-lightbox--short .tl-video-lightbox__stage{ width:min( calc(100vw - 32px), calc((100vh - 80px) * 9 / 16) ); } .tl-video-lightbox__close{ top:-48px; width:40px; height:40px; } .tl-detail-video-trigger__duration{ right:8px; bottom:8px; } } /* End */ /* Start:/local/templates/turbolemons-template/components/bitrix/news.detail/blog-detail/detail.css?179015809084881*/ /* ========================================================================== TURBOLEMONS BLOG DETAIL — DESKTOP 1920 Mobile/tablet will reuse the same PHP structure and only override layout. ========================================================================== */ .tl-detail-page, .tl-detail-page *, .tl-detail-page *::before, .tl-detail-page *::after{ box-sizing:border-box; } .tl-detail-page{ width:1920px; min-width:1920px; max-width:none; margin:0 auto; background:#F5F5F5; color:#171717; } .tl-detail-breadcrumbs{ width:1920px; min-height:48px; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:24px 90px 0; font-family:Inter,sans-serif; font-size:14px; line-height:18px; letter-spacing:-.3px; } .tl-detail-breadcrumbs a, .tl-detail-breadcrumbs span{ color:#A3A3A3; } .tl-detail-breadcrumbs a:hover{ color:#171717; } .tl-detail-breadcrumbs__current{ max-width:760px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#171717 !important; } .tl-detail-breadcrumbs__arrow{ font-size:18px; line-height:16px; } /* -------------------------------------------------------------------------- OUTER LAYOUT 90 | 330 | 48 | 1362 | 90 -------------------------------------------------------------------------- */ .tl-detail-layout{ position:relative; width:1920px; display:grid; grid-template-columns:330px 1362px; align-items:stretch; gap:48px; padding:48px 90px 72px; } .tl-detail-left-slot{ position:relative; width:330px; min-width:0; align-self:stretch; } .tl-detail-left{ position:relative; width:330px; z-index:50; } .tl-detail-left .tl-news-menu, .tl-detail-left .tl-news-topics, .tl-detail-left .tl-news-topics__list, .tl-detail-left .tl-news-menu__item{ width:330px; } .tl-detail-left.is-detail-fixed, .tl-detail-toc.is-detail-fixed, .tl-detail-new.is-detail-fixed{ position:fixed !important; top:140px !important; right:auto !important; bottom:auto !important; margin:0 !important; z-index:70; } .tl-detail-left.is-detail-bottom, .tl-detail-toc.is-detail-bottom, .tl-detail-new.is-detail-bottom{ position:absolute !important; top:auto !important; right:auto !important; bottom:0 !important; margin:0 !important; z-index:60; } .tl-detail-main{ width:1362px; min-width:0; display:flex; flex-direction:column; gap:48px; } /* -------------------------------------------------------------------------- ARTICLE WHITE BLOCK -------------------------------------------------------------------------- */ .tl-detail-article{ width:1362px; padding:48px 72px; background:#FFFFFF; } .tl-detail-article__inner{ width:1218px; min-width:0; } .tl-detail-header{ width:1218px; display:flex; flex-direction:column; gap:16px; } .tl-detail-header__meta-row{ width:100%; min-height:28px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .tl-detail-header__meta{ display:flex; align-items:center; gap:16px; min-width:0; } .tl-detail-meta-text{ display:flex; align-items:center; gap:8px; font-family:Inter,sans-serif; font-weight:400; font-size:16px; line-height:22px; letter-spacing:-.4px; color:#A3A3A3; } .tl-detail-title{ width:1218px; margin: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; font-variation-settings:"wght" 700; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; } .tl-detail-hero{ width:1218px; height:446px; margin:28px 0 0; overflow:hidden; background:#F5F5F5; } .tl-detail-hero img{ display:block; width:100%; height:100%; object-fit:cover; } /* -------------------------------------------------------------------------- ARTICLE ROW: 800 + 98 + 320 -------------------------------------------------------------------------- */ .tl-detail-article-row{ width:1218px; display:grid; grid-template-columns:800px 320px; gap:98px; align-items:stretch; margin-top:0; } .tl-detail-article-row.has-no-toc{ display:block; } .tl-detail-article-row.has-no-toc .tl-detail-body-col{ margin:0 auto; } .tl-detail-body-col{ width:800px; min-width:0; padding-top:60px; } /* -------------------------------------------------------------------------- FREE ARTICLE HTML -------------------------------------------------------------------------- */ .tl-detail-body{ width:800px; font-family:Inter,sans-serif; font-size:16px; line-height:22px; letter-spacing:-.4px; color:#171717; } .tl-detail-body > *:first-child{ margin-top:0 !important; } .tl-detail-body > *:last-child{ margin-bottom:0 !important; } .tl-detail-body p{ margin:0 0 28px; } .tl-detail-body h2{ margin:48px 0 28px; font-family:Inter,sans-serif; font-style:normal; font-weight:600; font-size:24px; line-height:28px; letter-spacing:-.8px; color:#171717; scroll-margin-top:164px; } .tl-detail-body h3{ margin:36px 0 20px; font-family:Inter,sans-serif; font-weight:600; font-size:20px; line-height:24px; letter-spacing:-.6px; } .tl-detail-body a{ color:#3B82F6; text-decoration:underline; text-underline-offset:2px; } .tl-detail-body ul, .tl-detail-body ol{ margin:0 0 28px; padding-left:22px; } .tl-detail-body li{ margin:0 0 16px; } .tl-detail-body img{ display:block; width:auto; max-width:100%; height:auto; margin:28px 0 8px; } .tl-detail-body figure{ width:100%; margin:28px 0 48px; } .tl-detail-body figure img{ width:100%; margin:0; } .tl-detail-body figcaption{ margin-top:8px; font-family:Inter,sans-serif; font-size:14px; line-height:18px; letter-spacing:-.3px; color:#A3A3A3; } .tl-detail-body video, .tl-detail-body iframe{ display:block; width:100%; max-width:800px; aspect-ratio:800 / 446; height:auto; margin:28px 0 48px; border:0; background:#171717; } .tl-detail-body table{ width:100%; border-collapse:collapse; margin:28px 0 48px; font-size:14px; line-height:18px; } .tl-detail-body th, .tl-detail-body td{ padding:12px; text-align:left; vertical-align:top; border-bottom:1px solid rgba(82,82,82,.16); } .tl-detail-body th{ background:#F5F5F5; color:#A3A3A3; font-weight:500; } /* -------------------------------------------------------------------------- TOC -------------------------------------------------------------------------- */ .tl-detail-toc-slot{ position:relative; width:320px; min-height:100%; align-self:stretch; padding-top:60px; } .tl-detail-toc{ position:relative; width:320px; padding:24px; display:flex; flex-direction:column; gap:16px; background:#F5F5F5; } .tl-detail-toc__title{ width:272px; font-family:Inter,sans-serif; font-weight:600; font-size:20px; line-height:24px; letter-spacing:-.6px; color:#171717; } .tl-detail-toc__list{ width:272px; display:flex; flex-direction:column; gap:16px; } .tl-detail-toc__item{ width:272px; display:grid; grid-template-columns:22px minmax(0,1fr); gap:8px; font-family:Inter,sans-serif; font-size:14px; line-height:18px; letter-spacing:-.3px; color:#A3A3A3; transition:color .2s ease; } .tl-detail-toc__item:hover, .tl-detail-toc__item.is-active{ color:#171717; } .tl-detail-toc__number{ color:inherit; } /* -------------------------------------------------------------------------- PRODUCTS -------------------------------------------------------------------------- */ .tl-detail-products{ width:800px; margin-top:48px; display:flex; flex-direction:column; gap:28px; } .tl-detail-content-heading{ margin:0; font-family:Inter,sans-serif; font-weight:600; font-size:24px; line-height:28px; letter-spacing:-.8px; color:#171717; } .tl-detail-products__viewport{ width:800px; overflow:hidden; } .tl-detail-products__track{ width:max-content; display:flex; align-items:flex-start; gap:12px; transition:transform .28s ease; } .tl-detail-product-card{ width:308px; flex:0 0 308px; display:flex; flex-direction:column; gap:20px; } .tl-detail-product-card__image{ width:308px; height:299px; display:block; overflow:hidden; border:1px solid rgba(82,82,82,.16); background:#F5F5F5; } .tl-detail-product-card__image img{ display:block; width:100%; height:100%; object-fit:cover; } .tl-detail-product-card__bottom{ width:308px; min-height:208px; display:grid; grid-template-columns:244px 56px; align-items:start; gap:8px; } .tl-detail-product-card__info{ width:244px; min-height:208px; display:flex; flex-direction:column; gap:16px; } .tl-detail-product-card__availability{ width:max-content; min-height:24px; display:flex; align-items:center; padding:0 8px; background:#D2FF00; font-family:Inter,sans-serif; font-weight:500; font-size:14px; line-height:18px; letter-spacing:-.3px; } .tl-detail-product-card__name-price{ width:244px; display:flex; flex-direction:column; gap:4px; } .tl-detail-product-card__name{ width:244px; 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; } .tl-detail-product-card__price{ font-family:Inter,sans-serif; font-weight:500; font-size:16px; line-height:22px; letter-spacing:-.4px; } .tl-detail-product-card__specs{ display:flex; flex-direction:column; gap:8px; } .tl-detail-product-card__spec{ width:244px; display:flex; align-items:flex-start; justify-content:space-between; gap:8px; font-family:Inter,sans-serif; font-size:14px; line-height:18px; letter-spacing:-.3px; } .tl-detail-product-card__spec span{ color:#A3A3A3; } .tl-detail-product-card__spec b{ font-weight:500; color:#171717; white-space:nowrap; } .tl-detail-product-card__cart{ width:56px !important; height:56px !important; display:flex !important; align-items:center; justify-content:center; padding:0 !important; border:0 !important; background:#D2FF00 !important; cursor:pointer; } .tl-detail-product-card__cart.is-loading{ opacity:.55; pointer-events:none; } .tl-detail-product-card__cart.is-added{ background:#171717 !important; } .tl-detail-product-card__cart.is-added svg path{ fill:#D2FF00; } .tl-detail-placeholder{ display:block; width:100%; height:100%; background: linear-gradient(45deg,#f3f3f3 25%,transparent 25%) 0 0/32px 32px, linear-gradient(45deg,transparent 75%,#f3f3f3 75%) 0 0/32px 32px, linear-gradient(45deg,transparent 75%,#f3f3f3 75%) -16px 16px/32px 32px, linear-gradient(45deg,#f3f3f3 25%,#fafafa 25%) -16px 16px/32px 32px; } /* -------------------------------------------------------------------------- ARTICLE BOTTOM SHARE -------------------------------------------------------------------------- */ .tl-detail-actions{ width:800px; margin-top:48px; padding-top:24px; border-top:1px solid rgba(82,82,82,.08); display:flex; justify-content:flex-end; } .tl-detail-actions__share{ display:flex; align-items:center; gap:12px; font-family:Inter,sans-serif; font-size:14px; line-height:18px; color:#171717; } .tl-detail-social{ width:32px; height:32px; padding:4px; display:flex; align-items:center; justify-content:center; border:0; background:#F5F5F5; cursor:pointer; } .tl-detail-social svg{ display:block; } /* -------------------------------------------------------------------------- SLIDER COMMON -------------------------------------------------------------------------- */ .tl-detail-slider-controls{ display:flex; align-items:center; gap:8px; } .tl-detail-slider-controls button{ width:32px; height:32px; padding:0; border:0; display:flex; align-items:center; justify-content:center; background:rgba(82,82,82,.08); font-family:Inter,sans-serif; font-size:22px; line-height:1; color:#171717; cursor:pointer; } .tl-detail-slider-controls button:disabled{ opacity:.35; cursor:default; } .tl-detail-products__controls{ align-self:flex-end; } /* -------------------------------------------------------------------------- LOWER AREA: 984 + 48 + 330 -------------------------------------------------------------------------- */ .tl-detail-lower{ width:1362px; display:grid; grid-template-columns:984px 330px; gap:48px; align-items:stretch; } .tl-detail-lower__main{ width:984px; min-width:0; display:flex; flex-direction:column; gap:48px; } .tl-detail-section-head{ width:920px; height:48px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .tl-detail-section-head h2, .tl-detail-useful__title{ 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; font-variation-settings:"wght" 700; } /* Еще по теме */ .tl-detail-topic{ width:984px; padding:32px; display:flex; flex-direction:column; gap:24px; background:#FFFFFF; } .tl-detail-topic__viewport{ width:920px; overflow:hidden; } .tl-detail-topic__track{ width:max-content; display:flex; gap:12px; } .tl-detail-related-card{ width:350px; height:320px; flex:0 0 350px; display:flex; flex-direction:column; gap:12px; padding:8px; background:#FFFFFF; } .tl-detail-related-card__media{ width:334px; height:176px; display:block; overflow:hidden; border:1px solid rgba(82,82,82,.16); background:#F5F5F5; } .tl-detail-related-card__media img{ width:100%; height:100%; object-fit:cover; } .tl-detail-related-card__info{ width:334px; height:116px; padding:0 12px 12px; display:flex; flex-direction:column; justify-content:space-between; gap:12px; } .tl-detail-related-card__top{ display:flex; flex-direction:column; gap:8px; } .tl-detail-related-card__title{ 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; } .tl-detail-related-card__meta, .tl-detail-useful-card__meta{ display:flex; align-items:center; gap:8px; font-family:Inter,sans-serif; font-size:16px; line-height:22px; letter-spacing:-.4px; color:#A3A3A3; } /* Больше полезного */ .tl-detail-useful{ width:984px; display:flex; flex-direction:column; gap:24px; } .tl-detail-useful__grid{ width:984px; display:grid; grid-template-columns:486px 486px; gap:12px; } .tl-detail-useful__grid > [hidden]{ display:none !important; } .tl-detail-useful-card{ width:486px; min-height:348px; display:flex; flex-direction:column; gap:12px; padding:8px; background:#FFFFFF; } .tl-detail-useful-card__media{ width:470px; height:176px; display:block; overflow:hidden; border:1px solid rgba(82,82,82,.16); background:#F5F5F5; } .tl-detail-useful-card__media img{ display:block; width:100%; height:100%; object-fit:cover; } .tl-detail-useful-card__info{ width:470px; min-height:144px; padding:0 12px 12px; display:flex; flex-direction:column; justify-content:space-between; gap:20px; } .tl-detail-useful-card__top{ display:flex; flex-direction:column; gap:8px; } .tl-detail-useful-card__title{ 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; } .tl-detail-more{ width:156px; height:56px; align-self:center; display:flex; align-items:center; justify-content:center; padding:0 24px; border:0; background:rgba(82,82,82,.08); font-family:"Roboto Flex Custom",sans-serif; font-style:italic; font-weight:700; font-size:16px; line-height:22px; text-transform:uppercase; color:#171717; font-variation-settings:"wght" 700; cursor:pointer; } /* -------------------------------------------------------------------------- RIGHT NEW -------------------------------------------------------------------------- */ .tl-detail-new-slot{ position:relative; width:330px; align-self:stretch; } .tl-detail-new{ position:relative; width:330px !important; padding-left:32px !important; border-left:1px solid rgba(82,82,82,.16); } .tl-detail-new .tl-news-heading, .tl-detail-new .tl-news-new__list, .tl-detail-new .tl-news-new-card, .tl-detail-new .tl-news-new-card__top, .tl-detail-new .tl-news-new-card__title{ width:297px; } /* -------------------------------------------------------------------------- SHARE DROPDOWN POSITION -------------------------------------------------------------------------- */ .tl-detail-share{ position:relative; flex:0 0 28px; } .tl-detail-share .tl-news-share__menu{ right:0; top:36px !important; bottom:auto !important; } /* -------------------------------------------------------------------------- HOVER -------------------------------------------------------------------------- */ @media (hover:hover){ .tl-detail-related-card__media img, .tl-detail-useful-card__media img, .tl-detail-product-card__image img{ transition:transform .35s ease; } .tl-detail-related-card:hover .tl-detail-related-card__media img, .tl-detail-useful-card:hover .tl-detail-useful-card__media img, .tl-detail-product-card:hover .tl-detail-product-card__image img{ transform:scale(1.035); } } /* ========================================================================== DETAIL — FLUID DESKTOP 1601 / 1919 Не даём странице жить в жёстких размерах 1920. Как на главной блога: left = 330 gap = 48 padding = 90 центральная часть сжимается. ========================================================================== */ @media (min-width:1601px) and (max-width:1919px){ /* ====================================================================== PAGE / BREADCRUMBS ====================================================================== */ .tl-detail-page{ width:100%; min-width:0; max-width:none; } .tl-detail-breadcrumbs{ width:100%; padding: 24px 90px 0; } /* ====================================================================== OUTER GRID 90 | 330 | 48 | FLUID | 90 ====================================================================== */ .tl-detail-layout{ width:100%; grid-template-columns: 330px minmax(0,1fr); gap:48px; padding: 48px 90px 72px; } /* LEFT */ .tl-detail-left-slot, .tl-detail-left{ width:330px; } .tl-detail-left .tl-news-menu, .tl-detail-left .tl-news-topics, .tl-detail-left .tl-news-topics__list, .tl-detail-left .tl-news-menu__item{ width:330px; } /* ====================================================================== MAIN ====================================================================== */ .tl-detail-main, .tl-detail-article{ width:100%; min-width:0; } /* * На 1600 padding ≈ 32 * На 1920 padding = 72 * * То есть статья плавно приходит * к desktop 1920. */ .tl-detail-article{ padding: clamp( 32px, calc(12.5vw - 168px), 72px ); } .tl-detail-article__inner, .tl-detail-header, .tl-detail-title, .tl-detail-hero{ width:100%; } /* HERO */ .tl-detail-hero{ height:446px; margin-top: clamp( 20px, calc(2.5vw - 20px), 28px ); } /* ====================================================================== ARTICLE BODY Содержание плавно: 250 -> 320 Gap: 24 -> 98 ====================================================================== */ .tl-detail-article-row{ width:100%; grid-template-columns: minmax(0,1fr) clamp( 250px, calc(21.875vw - 100px), 320px ); gap: clamp( 24px, calc(23.125vw - 346px), 98px ); } .tl-detail-body-col{ width:100%; min-width:0; } .tl-detail-body{ width:100%; } /* * Если в статье вообще нет H2, * текст не раздуваем на всю статью. */ .tl-detail-article-row.has-no-toc .tl-detail-body-col{ width:100%; max-width:800px; margin-left:auto; margin-right:auto; } /* MEDIA INSIDE ARTICLE */ .tl-detail-body img, .tl-detail-body figure, .tl-detail-body video, .tl-detail-body iframe, .tl-detail-body table{ max-width:100%; } /* ====================================================================== TOC ====================================================================== */ .tl-detail-toc-slot, .tl-detail-toc{ width: clamp( 250px, calc(21.875vw - 100px), 320px ); } .tl-detail-toc__title, .tl-detail-toc__list, .tl-detail-toc__item{ width:100%; } /* ====================================================================== PRODUCTS ====================================================================== */ .tl-detail-products, .tl-detail-products__viewport, .tl-detail-actions{ width:100%; } /* ====================================================================== LOWER AREA Right: 250 -> 330 Gap: 24 -> 48 ====================================================================== */ .tl-detail-lower{ width:100%; grid-template-columns: minmax(0,1fr) clamp( 250px, calc(25vw - 150px), 330px ); gap: clamp( 24px, calc(7.5vw - 96px), 48px ); } .tl-detail-lower__main{ width:100%; min-width:0; } /* ====================================================================== MORE ON TOPIC ====================================================================== */ .tl-detail-topic{ width:100%; } .tl-detail-section-head, .tl-detail-topic__viewport{ width:100%; } /* ====================================================================== MORE USEFUL ====================================================================== */ .tl-detail-useful, .tl-detail-useful__grid{ width:100%; } .tl-detail-useful__grid{ grid-template-columns: repeat( 2, minmax(0,1fr) ); } .tl-detail-useful-card{ width:100%; } .tl-detail-useful-card__media, .tl-detail-useful-card__info{ width:100%; } /* ====================================================================== RIGHT NEW ====================================================================== */ .tl-detail-new-slot, .tl-detail-new{ width: clamp( 250px, calc(25vw - 150px), 330px ) !important; } .tl-detail-new{ padding-left: clamp( 20px, calc(3.75vw - 40px), 32px ) !important; } .tl-detail-new .tl-news-heading, .tl-detail-new .tl-news-new__list, .tl-detail-new .tl-news-new-card, .tl-detail-new .tl-news-new-card__top, .tl-detail-new .tl-news-new-card__title{ width:100%; } } /* ========================================================================== DETAIL — FIGMA 1440 ========================================================================== */ @media (min-width:1200px) and (max-width:1600px){ /* ====================================================================== PAGE ====================================================================== */ .tl-detail-page{ width:100%; min-width:0; max-width:none; } /* ====================================================================== BREADCRUMBS ====================================================================== */ .tl-detail-breadcrumbs{ width:100%; padding: 24px 90px 0; } /* ====================================================================== OUTER LAYOUT 90 | 250 | 24 | CENTER | 90 На 1440: center = 986px ====================================================================== */ .tl-detail-layout{ width:100%; grid-template-columns: 250px minmax(0,1fr); gap:24px; padding: 48px 90px 72px; } /* ====================================================================== LEFT MENU ====================================================================== */ .tl-detail-left-slot, .tl-detail-left{ width:250px; } .tl-detail-left .tl-news-menu, .tl-detail-left .tl-news-topics, .tl-detail-left .tl-news-topics__list, .tl-detail-left .tl-news-menu__item{ width:250px; } /* ====================================================================== MAIN exact 1440 = 986px ====================================================================== */ .tl-detail-main{ width:100%; min-width:0; gap:32px; } /* ====================================================================== ARTICLE Figma: outer 986 padding 32 inside 922 ====================================================================== */ .tl-detail-article{ width:100%; padding:32px; } .tl-detail-article__inner, .tl-detail-header, .tl-detail-title, .tl-detail-hero{ width:100%; } /* ====================================================================== HEADER ====================================================================== */ .tl-detail-title{ font-size:56px; line-height:50px; letter-spacing:-.6px; } /* ====================================================================== HERO Figma: 922 × 446 ====================================================================== */ .tl-detail-hero{ width:100%; height:446px; margin-top:20px; } /* ====================================================================== ARTICLE CONTENT exact 1440: 648 | 24 | 250 ====================================================================== */ .tl-detail-article-row{ width:100%; grid-template-columns: minmax(0,1fr) 250px; gap:24px; } /* ====================================================================== BODY exact 1440 = 648px ====================================================================== */ .tl-detail-body-col{ width:100%; min-width:0; padding-top:32px; } .tl-detail-body{ width:100%; } /* * Нет содержания — оставляем * нормальную читабельную колонку. */ .tl-detail-article-row.has-no-toc .tl-detail-body-col{ width:100%; max-width:648px; margin-left:auto; margin-right:auto; } /* ====================================================================== ARTICLE MEDIA ====================================================================== */ .tl-detail-body img, .tl-detail-body figure, .tl-detail-body video, .tl-detail-body iframe, .tl-detail-body table{ max-width:100%; } .tl-detail-body video, .tl-detail-body iframe{ width:100%; } /* ====================================================================== CONTENT / TOC Figma: outer 250 padding 24 inner 202 ====================================================================== */ .tl-detail-toc-slot{ width:250px; padding-top:32px; } .tl-detail-toc{ width:250px; padding:24px; } .tl-detail-toc__title, .tl-detail-toc__list, .tl-detail-toc__item{ width:100%; } /* ====================================================================== PRODUCTS exact 1440 = 648px card stays 308px ====================================================================== */ .tl-detail-products, .tl-detail-products__viewport, .tl-detail-actions{ width:100%; } /* * Сами карточки НЕ уменьшаем. * В Figma они по-прежнему 308px. */ .tl-detail-product-card, .tl-detail-product-card__image, .tl-detail-product-card__bottom{ width:308px; } /* ====================================================================== LOWER AREA exact 1440: 712 | 24 | 250 ====================================================================== */ .tl-detail-lower{ width:100%; grid-template-columns: minmax(0,1fr) 250px; gap:24px; } .tl-detail-lower__main{ width:100%; min-width:0; gap:32px; } /* ====================================================================== MORE ON TOPIC exact 1440: outer 712 padding 32 inside 648 ====================================================================== */ .tl-detail-topic{ width:100%; padding:32px; } .tl-detail-section-head, .tl-detail-topic__viewport{ width:100%; } /* * Карточка остается 350px. */ .tl-detail-related-card{ width:350px; flex:0 0 350px; } /* ====================================================================== MORE USEFUL Figma: 712px 350 + 12 + 350 ====================================================================== */ .tl-detail-useful, .tl-detail-useful__grid{ width:100%; } .tl-detail-useful__grid{ grid-template-columns: repeat( 2, minmax(0,1fr) ); gap:12px; } .tl-detail-useful-card{ width:100%; min-width:0; } .tl-detail-useful-card__media{ width:100%; height:176px; } .tl-detail-useful-card__info{ width:100%; } /* ====================================================================== RIGHT — NEW Figma: outer = 250 padding-left = 20 inner = 229 ====================================================================== */ .tl-detail-new-slot{ width:250px; } .tl-detail-new{ width:250px !important; padding-left:20px !important; } .tl-detail-new .tl-news-heading, .tl-detail-new .tl-news-new__list, .tl-detail-new .tl-news-new-card, .tl-detail-new .tl-news-new-card__top, .tl-detail-new .tl-news-new-card__title{ width:229px; } /* ====================================================================== SHARE ====================================================================== */ .tl-detail-share .tl-news-share__menu{ right:0; left:auto; top:36px !important; bottom:auto !important; } } /* ========================================================================== DETAIL — TABLET 600 / 1199 ========================================================================== */ @media (min-width:600px) and (max-width:1199px){ /* ====================================================================== PAGE ====================================================================== */ .tl-detail-page{ width:100%; min-width:0; max-width:none; margin:0; background:#F5F5F5; } /* ====================================================================== BREADCRUMBS НЕ закрепляем. ====================================================================== */ .tl-detail-breadcrumbs{ position:static !important; width:100%; min-height:40px; padding:16px 16px 0; gap:8px; } .tl-detail-breadcrumbs__current{ max-width:calc(100vw - 180px); } /* ====================================================================== OUTER LAYOUT ====================================================================== */ .tl-detail-layout{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:32px; padding:32px 16px 32px; } /* ====================================================================== TABLET TOP MENU Desktop left menu -> horizontal chips. ====================================================================== */ .tl-detail-left-slot{ position:relative; width:100%; height:44px; min-height:44px; align-self:stretch; } .tl-detail-left{ position:relative; width:100%; height:44px; z-index:80; } .tl-detail-left .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; scrollbar-width:none; -ms-overflow-style:none; background:#F5F5F5; } .tl-detail-left .tl-news-tablet-nav-scroll::-webkit-scrollbar{ display:none; } /* первая группа */ .tl-detail-left .tl-news-menu{ width:max-content !important; height:44px; 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-detail-left .tl-news-topics{ width:max-content !important; height:44px; flex:0 0 auto; display:flex; flex-direction:row; align-items:flex-start; padding:0; border:0; } .tl-detail-left .tl-news-topics__badge{ display:none; } .tl-detail-left .tl-news-topics__list{ width:max-content !important; height:44px; display:flex; flex-direction:row; align-items:flex-start; gap:8px; } /* chips */ .tl-detail-left .tl-news-menu__item{ width:auto !important; 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-weight:600; font-size:16px; line-height:22px; letter-spacing:-.4px; color:#171717; white-space:nowrap; } .tl-detail-left .tl-news-menu__item.is-active{ background:#D2FF00; color:#171717; } /* ====================================================================== FIXED TABLET MENU Шапка = 88px. Сам серый слой прилегает прямо к шапке. 8px сверху/снизу — внутренний воздух. Хлебные крошки сюда НЕ входят. ====================================================================== */ .tl-detail-left.is-tablet-fixed .tl-news-tablet-nav-scroll{ position:fixed; top:88px; height:60px; box-sizing:border-box; padding:8px 0; background:#F5F5F5; z-index:900; } /* desktop sticky classes на планшете не нужны */ .tl-detail-left.is-detail-fixed, .tl-detail-left.is-detail-bottom{ position:relative !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; width:100% !important; margin:0 !important; } /* ====================================================================== MAIN ====================================================================== */ .tl-detail-main{ width:100%; min-width:0; display:flex; flex-direction:column; gap:32px; } /* ====================================================================== ARTICLE Figma: outer = 736 padding = 24 inner = 688 ====================================================================== */ .tl-detail-article{ width:100%; padding:24px; background:#FFF; } .tl-detail-article__inner{ width:100%; min-width:0; } /* ====================================================================== HEADER ====================================================================== */ .tl-detail-header{ width:100%; gap:16px; } .tl-detail-header__meta-row{ width:100%; } .tl-detail-title{ width:100%; font-size:40px; line-height:38px; letter-spacing:-1.2px; } /* ====================================================================== HERO 688 × 300 ====================================================================== */ .tl-detail-hero{ width:100%; height:300px; margin:20px 0 0; } /* ====================================================================== ARTICLE ROW Содержание теперь НЕ справа. Оно становится отдельным блоком перед текстом. ====================================================================== */ .tl-detail-article-row, .tl-detail-article-row.has-no-toc{ width:100%; display:flex; flex-direction:column; gap:32px; margin-top:32px; } /* ====================================================================== TABLET TOC Содержание идет первым. ====================================================================== */ .tl-detail-toc-slot{ order:1; position:relative; width:100%; min-height:0; padding:0; } .tl-detail-toc{ position:relative !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; width:100% !important; display:flex; flex-direction:column; gap:16px; padding:24px; background:#F5F5F5; } .tl-detail-toc.is-detail-fixed, .tl-detail-toc.is-detail-bottom{ position:relative !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; width:100% !important; } .tl-detail-toc__title{ position:relative; width:100%; padding-right:40px; font-size:18px; line-height:24px; letter-spacing:-.4px; } /* * Стрелка как в макете. * Само содержание остается открытым. */ .tl-detail-toc__title::after{ content:""; position:absolute; top:8px; right:3px; width:8px; height:8px; border-top:1.5px solid #A3A3A3; border-left:1.5px solid #A3A3A3; transform:rotate(45deg); } .tl-detail-toc__list{ width:100%; gap:16px; } .tl-detail-toc__item{ width:100%; grid-template-columns:22px minmax(0,1fr); } /* ====================================================================== BODY ====================================================================== */ .tl-detail-body-col{ order:2; width:100%; padding-top:0; margin:0 !important; } .tl-detail-body{ width:100%; } /* * В Figma первый вводный текст и H2 * становятся 20 / 24. */ .tl-detail-body h2{ font-size:20px; line-height:24px; letter-spacing:-.6px; margin:48px 0 28px; /* * Если кликнули по содержанию, * заголовок не прячется под header+menu. */ scroll-margin-top:172px; } /* ====================================================================== ARTICLE MEDIA ====================================================================== */ .tl-detail-body img, .tl-detail-body figure, .tl-detail-body video, .tl-detail-body iframe, .tl-detail-body table{ max-width:100%; } .tl-detail-body video, .tl-detail-body iframe{ width:100%; max-width:none; } /* ====================================================================== PRODUCTS 688px viewport. Карточки остаются 308px. Можно свайпать горизонтально. ====================================================================== */ .tl-detail-products{ width:100%; margin-top:48px; gap:28px; } .tl-detail-content-heading{ font-size:20px; line-height:24px; letter-spacing:-.6px; } .tl-detail-products__viewport{ width:100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; } .tl-detail-products__viewport::-webkit-scrollbar{ display:none; } .tl-detail-product-card{ width:308px; flex:0 0 308px; } .tl-detail-product-card__image, .tl-detail-product-card__bottom{ width:308px; } /* * На touch стрелки не нужны. */ .tl-detail-products__controls{ display:none; } /* ====================================================================== BOTTOM SHARE ====================================================================== */ .tl-detail-actions{ width:100%; margin-top:48px; padding-top:24px; } /* ====================================================================== LOWER AREA На планшете правого "Новое" уже нет. ====================================================================== */ .tl-detail-lower{ width:100%; display:block; } .tl-detail-lower__main{ width:100%; gap:32px; } .tl-detail-new-slot{ display:none !important; } /* ====================================================================== MORE ON TOPIC Figma: block = 736 padding = 32 inside = 672 ====================================================================== */ .tl-detail-topic{ width:100%; padding:32px; gap:24px; } .tl-detail-section-head{ width:100%; height:30px; } .tl-detail-section-head h2, .tl-detail-useful__title{ font-size:32px; line-height:30px; letter-spacing:-1px; } .tl-detail-topic .tl-detail-slider-controls{ display:none; } .tl-detail-topic__viewport{ width:100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; } .tl-detail-topic__viewport::-webkit-scrollbar{ display:none; } .tl-detail-related-card{ width:350px; height:312px; flex:0 0 350px; padding:0; } .tl-detail-related-card__media{ width:350px; height:176px; } .tl-detail-related-card__info{ width:350px; height:124px; padding:0; } .tl-detail-related-card__title{ font-size:20px; line-height:24px; letter-spacing:-.6px; } /* ====================================================================== MORE USEFUL Figma: width 736 362 + 12 + 362 ====================================================================== */ .tl-detail-useful{ width:100%; gap:24px; } .tl-detail-useful__title{ width:100%; } .tl-detail-useful__grid{ width:100%; grid-template-columns: repeat(2,minmax(0,1fr)); gap:12px; } .tl-detail-useful-card{ width:100%; min-width:0; min-height:340px; } .tl-detail-useful-card__media{ width:100%; height:176px; } .tl-detail-useful-card__info{ width:100%; min-height:136px; } .tl-detail-useful-card__title{ font-size:20px; line-height:24px; letter-spacing:-.6px; } /* ====================================================================== SHARE DROPDOWN ====================================================================== */ .tl-detail-share .tl-news-share__menu{ right:0; } } /* ========================================================================== DETAIL — MOBILE 0 / 599 ========================================================================== */ @media (max-width:599px){ /* ====================================================================== PAGE ====================================================================== */ .tl-detail-page{ width:100%; min-width:0; max-width:none; margin:0; background:#F5F5F5; } /* ====================================================================== BREADCRUMBS НЕ фиксируем. ====================================================================== */ .tl-detail-breadcrumbs{ position:static !important; width:100%; min-height:40px; padding:16px 16px 0; gap:8px; overflow:hidden; } .tl-detail-breadcrumbs__current{ min-width:0; max-width:177px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ====================================================================== OUTER ====================================================================== */ .tl-detail-layout{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:32px; padding:32px 0 32px; } /* ====================================================================== MOBILE NEWS MENU PLACEHOLDER ====================================================================== */ .tl-detail-left-slot{ position:relative; width:100%; height:44px; min-height:44px; align-self:stretch; } .tl-detail-left{ position:relative !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; width:100% !important; height:44px; margin:0 !important; z-index:80; } /* ====================================================================== HORIZONTAL MENU ====================================================================== */ .tl-detail-left .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; scrollbar-width:none; -ms-overflow-style:none; background:#F5F5F5; -webkit-overflow-scrolling:touch; } .tl-detail-left .tl-news-tablet-nav-scroll::-webkit-scrollbar{ display:none; } /* first group */ .tl-detail-left .tl-news-menu{ width:max-content !important; height:44px; 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-detail-left .tl-news-topics{ width:max-content !important; height:44px; flex:0 0 auto; display:flex; flex-direction:row; align-items:flex-start; padding:0; border:0; } .tl-detail-left .tl-news-topics__badge{ display:none; } .tl-detail-left .tl-news-topics__list{ width:max-content !important; height:44px; display:flex; flex-direction:row; align-items:flex-start; gap:8px; } /* chips */ .tl-detail-left .tl-news-menu__item{ width:auto !important; 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-weight:600; font-size:16px; line-height:22px; letter-spacing:-.4px; color:#171717; white-space:nowrap; } .tl-detail-left .tl-news-menu__item.is-active{ background:#D2FF00; color:#171717; } /* ====================================================================== FIXED MOBILE MENU Как на предыдущих страницах: header заканчивается на 88px. ====================================================================== */ .tl-detail-left.is-tablet-fixed .tl-news-tablet-nav-scroll{ position:fixed; top:88px; left:0 !important; width:100% !important; height:60px; box-sizing:border-box; padding:8px 16px; background:#F5F5F5; z-index:900; } .tl-detail-left.is-detail-fixed, .tl-detail-left.is-detail-bottom{ position:relative !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; width:100% !important; } /* ====================================================================== MAIN ====================================================================== */ .tl-detail-main{ width:100%; min-width:0; display:flex; flex-direction:column; gap:32px; } /* ====================================================================== ARTICLE 393 outer padding 24px 16px inner 361 ====================================================================== */ .tl-detail-article{ width:100%; padding:24px 16px; background:#FFF; } .tl-detail-article__inner{ width:100%; min-width:0; } /* ====================================================================== HEADER ====================================================================== */ .tl-detail-header{ width:100%; gap:16px; } .tl-detail-header__meta-row{ width:100%; gap:12px; } .tl-detail-header__meta{ min-width:0; gap:12px; } .tl-detail-meta-text{ gap:6px; font-size:16px; line-height:22px; } .tl-detail-title{ width:100%; font-size:40px; line-height:38px; letter-spacing:-1.2px; } /* ====================================================================== HERO Figma 361 × 300 ====================================================================== */ .tl-detail-hero{ width:100%; height:300px; margin:20px 0 0; } /* ====================================================================== ARTICLE CONTENT На телефоне: CONTENTS ↓ ARTICLE TEXT ====================================================================== */ .tl-detail-article-row, .tl-detail-article-row.has-no-toc{ width:100%; display:flex; flex-direction:column; gap:32px; margin-top:32px; } /* ====================================================================== CONTENTS 361 outer padding 24 inner 313 ====================================================================== */ .tl-detail-toc-slot{ order:1; position:relative; width:100%; min-height:0; padding:0; } .tl-detail-toc, .tl-detail-toc.is-detail-fixed, .tl-detail-toc.is-detail-bottom{ position:relative !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; width:100% !important; padding:24px; gap:16px; background:#F5F5F5; } .tl-detail-toc__title{ position:relative; width:100%; padding-right:40px; font-size:18px; line-height:24px; letter-spacing:-.4px; } .tl-detail-toc__title::after{ content:""; position:absolute; top:8px; right:3px; width:8px; height:8px; border-top:1.5px solid #A3A3A3; border-left:1.5px solid #A3A3A3; transform:rotate(45deg); } .tl-detail-toc__list{ width:100%; gap:16px; } .tl-detail-toc__item{ width:100%; grid-template-columns: 22px minmax(0,1fr); gap:8px; line-height:18px; } /* ====================================================================== ARTICLE BODY ====================================================================== */ .tl-detail-body-col{ order:2; width:100%; min-width:0; padding-top:0; margin:0 !important; } .tl-detail-body{ width:100%; font-size:16px; line-height:22px; letter-spacing:-.4px; } .tl-detail-body p{ margin:0 0 24px; } .tl-detail-body h2{ margin:40px 0 24px; font-size:20px; line-height:24px; letter-spacing:-.6px; scroll-margin-top:172px; } .tl-detail-body h3{ margin:32px 0 20px; font-size:18px; line-height:24px; } .tl-detail-body ul, .tl-detail-body ol{ margin:0 0 24px; } /* ====================================================================== IMAGES / VIDEO Не задаём всем картинкам жесткую высоту: статья может содержать изображения любого ratio. ====================================================================== */ .tl-detail-body img{ display:block; width:100%; max-width:100%; height:auto; margin:24px 0 8px; } .tl-detail-body figure{ width:100%; margin:24px 0 40px; } .tl-detail-body figure img{ width:100%; height:auto; margin:0; } .tl-detail-body video, .tl-detail-body iframe{ display:block; width:100%; max-width:none; aspect-ratio:361 / 250; height:auto; margin:24px 0 40px; } /* tables: horizontal scroll on mobile */ .tl-detail-body table{ display:block; width:100%; max-width:100%; min-width:0; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; scrollbar-width:thin; } /* * Не даём колонкам сжаться до нечитаемого состояния. * Если таблица шире экрана — прокручивается только она, * а не вся страница. */ .tl-detail-body th, .tl-detail-body td{ min-width:160px; } .tl-detail-body{ overflow-wrap:anywhere; } /* ====================================================================== PRODUCTS viewport 361 card 308 horizontal swipe ====================================================================== */ .tl-detail-products{ width:100%; margin-top:40px; gap:24px; } .tl-detail-content-heading{ font-size:20px; line-height:24px; letter-spacing:-.6px; } .tl-detail-products__viewport{ width:100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; } .tl-detail-products__viewport::-webkit-scrollbar{ display:none; } .tl-detail-products__track{ gap:12px; } .tl-detail-product-card{ width:308px; flex:0 0 308px; } .tl-detail-product-card__image{ width:308px; height:299px; } .tl-detail-product-card__bottom{ width:308px; min-height:200px; } .tl-detail-products__controls{ display:none; } /* ====================================================================== BOTTOM SHARE В Figma: Поделиться + 3 × 48 buttons ====================================================================== */ .tl-detail-actions{ width:100%; margin-top:40px; padding-top:24px; justify-content:flex-start; } .tl-detail-actions__share{ width:auto; gap:16px; font-size:16px; line-height:22px; } .tl-detail-social{ width:48px; height:48px; padding:12px; } /* ====================================================================== LOWER ====================================================================== */ .tl-detail-lower{ width:100%; display:block; } .tl-detail-lower__main{ width:100%; gap:32px; } .tl-detail-new-slot{ display:none !important; } /* ====================================================================== MORE ON TOPIC outer 393 padding 16 inside 361 slider cards 350 ====================================================================== */ .tl-detail-topic{ width:100%; padding:16px; gap:24px; background:#FFF; } .tl-detail-section-head{ width:100%; height:30px; } .tl-detail-section-head h2{ font-size:32px; line-height:30px; letter-spacing:-1px; } .tl-detail-topic .tl-detail-slider-controls{ display:none; } .tl-detail-topic__viewport{ width:100%; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; } .tl-detail-topic__viewport::-webkit-scrollbar{ display:none; } .tl-detail-topic__track{ gap:16px; } .tl-detail-related-card{ width:350px; height:312px; flex:0 0 350px; padding:0; gap:12px; } .tl-detail-related-card__media{ width:350px; height:176px; } .tl-detail-related-card__info{ width:350px; height:124px; padding:0; gap:20px; } .tl-detail-related-card__title{ font-size:20px; line-height:24px; letter-spacing:-.6px; } /* ====================================================================== MORE USEFUL title padding 0 16 cards full 393 ====================================================================== */ .tl-detail-useful{ width:100%; gap:16px; } .tl-detail-useful__title{ width:100%; padding:0 16px; font-size:32px; line-height:30px; letter-spacing:-1px; } .tl-detail-useful__grid{ width:100%; display:flex; flex-direction:column; gap:12px; } .tl-detail-useful-card{ width:100%; min-height:340px; padding:8px; gap:12px; } .tl-detail-useful-card__media{ width:100%; height:176px; } .tl-detail-useful-card__info{ width:100%; min-height:136px; padding:0 12px 12px; } .tl-detail-useful-card__title{ font-size:20px; line-height:24px; letter-spacing:-.6px; } /* ====================================================================== LOAD MORE Figma mobile: 361 × 48 ====================================================================== */ .tl-detail-more{ width:calc(100% - 32px); height:48px; align-self:center; margin:0 16px; padding:0 24px; font-size:14px; line-height:18px; letter-spacing:-.3px; } /* ====================================================================== SHARE DROPDOWN ====================================================================== */ .tl-detail-share{ flex:0 0 28px; } .tl-detail-share .tl-news-share__menu{ right:0; left:auto; } } /* ========================================================================== MOBILE FIXED CONTENTS ========================================================================== */ @media (max-width:599px){ /* ====================================================================== ROOT ====================================================================== */ .tl-detail-mobile-toc{ display:block; } /* ====================================================================== COLLAPSED BAR Показывается JS только после того, как обычное содержание было пролистано. ====================================================================== */ .tl-detail-mobile-toc__bar{ position:fixed; left:0; right:0; bottom:0; width:100%; height:56px; display:flex; flex-direction:row; align-items:center; justify-content:space-between; padding:16px; border:0; background:#FFFFFF; box-shadow: 0 -4px 20px rgba(26,26,26,.08); z-index:1500; cursor:pointer; } .tl-detail-mobile-toc__bar-title{ font-family:Inter,sans-serif; font-style:normal; font-weight:600; font-size:20px; line-height:24px; letter-spacing:-.6px; color:#171717; } /* ====================================================================== ARROW UP ====================================================================== */ .tl-detail-mobile-toc__arrow{ position:relative; display:block; width:24px; height:24px; flex:0 0 24px; } .tl-detail-mobile-toc__arrow::before{ content:""; position:absolute; left:50%; top:50%; width:9px; height:9px; border-top: 1.5px solid #A3A3A3; border-left: 1.5px solid #A3A3A3; transform: translate(-50%,-25%) rotate(45deg); } /* ====================================================================== MODAL ====================================================================== */ .tl-detail-mobile-toc__modal{ position:fixed; inset:0; width:100%; height:100%; z-index:5000; } .tl-detail-mobile-toc__modal[hidden]{ display:none !important; } /* ====================================================================== OVERLAY Figma rgba(26,26,26,.64) ====================================================================== */ .tl-detail-mobile-toc__overlay{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background: rgba(26,26,26,.64); cursor:pointer; } /* ====================================================================== SHEET Figma max: 56 header 320 content = 376 ====================================================================== */ .tl-detail-mobile-toc__sheet{ position:absolute; left:0; right:0; bottom:0; width:100%; max-height:376px; display:flex; flex-direction:column; background:#FFFFFF; z-index:1; } /* ====================================================================== HEADER ====================================================================== */ .tl-detail-mobile-toc__header{ width:100%; height:56px; flex:0 0 56px; display:flex; flex-direction:row; align-items:center; justify-content:space-between; padding:16px; background:#FFFFFF; } .tl-detail-mobile-toc__title{ font-family:Inter,sans-serif; font-style:normal; font-weight:600; font-size:20px; line-height:24px; letter-spacing:-.6px; color:#171717; } .tl-detail-mobile-toc__close{ width:24px; height:24px; flex:0 0 24px; display:flex; align-items:center; justify-content:center; padding:0; border:0; background:transparent; cursor:pointer; } /* ====================================================================== CONTENT Figma: padding 8px 16px 16px max height 320px ====================================================================== */ .tl-detail-mobile-toc__content{ width:100%; max-height:320px; padding: 8px 16px 16px; overflow-y:auto; overflow-x:hidden; background:#FFFFFF; overscroll-behavior:contain; scrollbar-width:none; } .tl-detail-mobile-toc__content::-webkit-scrollbar{ display:none; } /* ====================================================================== LIST 361px at viewport 393 ====================================================================== */ .tl-detail-mobile-toc__list{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:16px; } /* ====================================================================== ITEM Figma item = 36px ====================================================================== */ .tl-detail-mobile-toc__item{ width:100%; min-height:36px; display:flex; 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:#A3A3A3; text-decoration:none; transition: color .15s ease; } .tl-detail-mobile-toc__item.is-active{ color:#171717; } /* ====================================================================== OPEN STATE ====================================================================== */ html.is-detail-mobile-toc-open, body.is-detail-mobile-toc-open{ overflow:hidden; } } @media (min-width:600px){ .tl-detail-mobile-toc{ display:none !important; } } /* Roboto Flex — fix left italic clipping */ .tl-detail-title, .tl-detail-content-heading, .tl-detail-section-head h2, .tl-detail-useful__title, .tl-detail-related-card__title, .tl-detail-useful-card__title, .tl-detail-product-card__name{ padding-left:2px; } /* ========================================================================== DETAIL — FINAL FIGMA CORRECTIONS — 2026-08-27 ========================================================================== */ /* -------------------------------------------------------------------------- PAGE BACKGROUND detail.css is loaded only on the article page, therefore the body itself can safely use the Figma gray. This keeps the area outside the 1920 layout gray instead of white on wide screens / horizontal overflow. -------------------------------------------------------------------------- */ html, body{ background:#F5F5F5; } .tl-detail-page{ background:#F5F5F5 !important; } /* -------------------------------------------------------------------------- LEFT NEWS MENU Only the selected topic is black. All non-selected items are secondary. -------------------------------------------------------------------------- */ .tl-detail-left .tl-news-menu__item{ color:#A3A3A3 !important; } .tl-detail-left .tl-news-menu__item.is-active{ color:#171717 !important; } @media (hover:hover){ .tl-detail-left .tl-news-menu__item:not(.is-active):hover{ color:#737373 !important; } } /* -------------------------------------------------------------------------- COPY LINK ALERT Desktop Figma: 240 × 48, centered, top 140px. -------------------------------------------------------------------------- */ .tl-news-copy-alert{ position:fixed; left:50%; top:140px; z-index:1500; 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:inherit; 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; } @media (max-width:1199px){ .tl-news-copy-alert{ top:104px; } } /* -------------------------------------------------------------------------- CONTENT-DRIVEN HEIGHTS Figma values are the minimum visual sizes. Real text is allowed to grow the card instead of leaving the card or being clipped by a fixed box. Media keeps its Figma dimensions. -------------------------------------------------------------------------- */ .tl-detail-related-card{ height:auto !important; min-height:320px; align-self:flex-start; } .tl-detail-related-card__info{ height:auto !important; min-height:116px; } .tl-detail-useful-card{ height:auto !important; min-height:348px; } .tl-detail-useful-card__info{ height:auto !important; min-height:144px; } .tl-detail-new .tl-news-new-card{ height:auto !important; min-height:130px; } .tl-detail-product-card__bottom, .tl-detail-product-card__info{ height:auto !important; } .tl-detail-section-head{ height:auto !important; min-height:48px; } /* Keep the buttons centered even if another Roboto clipping fix changes one side of the padding. */ .tl-detail-more{ padding-left:24px !important; padding-right:24px !important; } /* -------------------------------------------------------------------------- TABLET + MOBILE FIXED NEWS MENU Figma / previous news pages: header 88 + 10px white air + 44px menu + 20px white air = 74px fixed white strip below the header. The white backing spans the FULL viewport, so there are no gray side bands. -------------------------------------------------------------------------- */ @media (max-width:1199px){ .tl-detail-left .tl-news-menu__item{ color:#A3A3A3 !important; } .tl-detail-left .tl-news-menu__item.is-active{ color:#171717 !important; background:#D2FF00 !important; } .tl-detail-left.is-tablet-fixed{ background:#FFFFFF !important; } .tl-detail-left.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; box-sizing:border-box; padding: 10px 16px 20px !important; background:#FFFFFF !important; opacity:1 !important; transform:none !important; z-index:900; } .tl-detail-body h2{ scroll-margin-top:186px !important; } .tl-detail-related-card{ height:auto !important; min-height:312px; } .tl-detail-related-card__info{ height:auto !important; min-height:124px; } .tl-detail-section-head{ height:auto !important; min-height:30px; } } /* -------------------------------------------------------------------------- MOBILE CONTENT-DRIVEN CARDS -------------------------------------------------------------------------- */ @media (max-width:599px){ .tl-detail-related-card{ height:auto !important; min-height:312px; } .tl-detail-related-card__info{ height:auto !important; min-height:124px; } .tl-detail-useful-card{ height:auto !important; min-height:340px; } .tl-detail-useful-card__info{ height:auto !important; min-height:136px; } } /* ========================================================================== BREADCRUMBS — ONE LINE ========================================================================== */ .tl-detail-breadcrumbs{ flex-wrap:nowrap !important; white-space:nowrap; overflow:hidden; } .tl-detail-breadcrumbs a, .tl-detail-breadcrumbs span{ flex:0 0 auto; } .tl-detail-breadcrumbs__current{ min-width:0; max-width:none !important; flex:1 1 auto !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* ========================================================================== AUTO ARTICLE GALLERY ========================================================================== */ .tl-detail-body .tl-detail-gallery{ width:100%; min-width:0; display:grid; align-items:start; gap:12px; margin: 0 0 36px; padding:0; } /* -------------------------------------------------------------------------- SINGLE IMAGE -------------------------------------------------------------------------- */ .tl-detail-body .tl-detail-gallery--single{ grid-template-columns: minmax(0,1fr); } /* -------------------------------------------------------------------------- TWO IMAGES -------------------------------------------------------------------------- */ .tl-detail-body .tl-detail-gallery--pair{ grid-template-columns: repeat( 2, minmax(0,1fr) ); } /* -------------------------------------------------------------------------- IMAGE ITEM -------------------------------------------------------------------------- */ .tl-detail-body .tl-detail-gallery__item{ position:relative; width:100%; min-width:0; margin:0; padding:0; overflow:hidden; background:#F5F5F5; } /* * Одна большая ГОРИЗОНТАЛЬНАЯ фотография — * пропорции близки к hero новости. * Вертикальные изображения исключаем из этого правила. */ .tl-detail-body .tl-detail-gallery--single .tl-detail-gallery__item:not(.tl-detail-gallery__item--portrait){ aspect-ratio:800 / 446; } /* * Две ГОРИЗОНТАЛЬНЫЕ фотографии рядом. * Вертикальные изображения сохраняют реальные пропорции. */ .tl-detail-body .tl-detail-gallery--pair .tl-detail-gallery__item:not(.tl-detail-gallery__item--portrait){ aspect-ratio:16 / 10; } /* -------------------------------------------------------------------------- IMAGE — DEFAULT / HORIZONTAL -------------------------------------------------------------------------- */ .tl-detail-body .tl-detail-gallery__item img{ display:block; width:100%; max-width:none; height:100%; margin:0; padding:0; object-fit:cover; object-position:center; transition: transform .35s ease; } /* -------------------------------------------------------------------------- PORTRAIT IMAGE Класс .tl-detail-gallery__item--portrait добавляется в template.php, если HEIGHT > WIDTH. Важно: у вертикального изображения НЕ задаём горизонтальный aspect-ratio. Высота берётся из реальных пропорций самого изображения, поэтому оно показывается целиком и не обрезается. -------------------------------------------------------------------------- */ .tl-detail-body .tl-detail-gallery__item--portrait{ aspect-ratio:auto; height:auto; align-self:start; overflow:hidden; background:#F5F5F5; } .tl-detail-body .tl-detail-gallery__item--portrait img{ display:block; width:100%; max-width:100%; height:auto; margin:0; padding:0; object-fit:contain; object-position:center; transform:none; } /* -------------------------------------------------------------------------- HOVER Только горизонтальные изображения немного увеличиваем. Вертикальные оставляем без scale, чтобы края никогда не обрезались. -------------------------------------------------------------------------- */ @media (hover:hover){ .tl-detail-body .tl-detail-gallery__item:not(.tl-detail-gallery__item--portrait):hover img{ transform:scale(1.025); } } /* ========================================================================== AUTO GALLERY — MOBILE ========================================================================== */ @media (max-width:599px){ .tl-detail-body .tl-detail-gallery{ width:100%; grid-template-columns: minmax(0,1fr); align-items:start; gap:12px; margin: 0 0 28px; } /* * На телефоне любые пары * превращаются в фотографии * друг под другом. */ .tl-detail-body .tl-detail-gallery--pair{ grid-template-columns: minmax(0,1fr); } /* * Горизонтальные фото на мобильном остаются 16:10. */ .tl-detail-body .tl-detail-gallery--single .tl-detail-gallery__item:not(.tl-detail-gallery__item--portrait), .tl-detail-body .tl-detail-gallery--pair .tl-detail-gallery__item:not(.tl-detail-gallery__item--portrait){ aspect-ratio:16 / 10; } /* * Вертикальные фото и на мобильном сохраняют * собственные реальные пропорции. */ .tl-detail-body .tl-detail-gallery__item--portrait{ aspect-ratio:auto; height:auto; } .tl-detail-body .tl-detail-gallery__item--portrait img{ width:100%; height:auto; object-fit:contain; } } /* End */ /* Start:/local/templates/turbolemons-template/components/bitrix/news.detail/blog-detail/image-lightbox.css?17901693936502*/ /* ========================================================================== TURBOLEMONS BLOG — IMAGE LIGHTBOX ========================================================================== */ .tl-image-lightbox-source{ cursor:zoom-in; } .tl-image-lightbox-source:focus-visible{ outline:2px solid #171717; outline-offset:4px; } .tl-image-lightbox{ position:fixed; inset:0; z-index:100000; visibility:hidden; opacity:0; pointer-events:none; transition:opacity .18s ease, visibility .18s ease; font-family:Inter,sans-serif; } .tl-image-lightbox.is-open{ visibility:visible; opacity:1; pointer-events:auto; } .tl-image-lightbox__backdrop{ position:absolute; inset:0; background:rgba(8,8,8,.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .tl-image-lightbox__shell{ position:absolute; inset:0; display:grid; grid-template-columns:72px minmax(0,1fr) 72px; grid-template-rows:72px minmax(0,1fr) 64px; padding:16px 24px 20px; } .tl-image-lightbox__toolbar{ position:relative; z-index:4; grid-column:1 / -1; grid-row:1; display:flex; justify-content:flex-end; align-items:flex-start; gap:8px; } .tl-image-lightbox__tool, .tl-image-lightbox__zoom-value, .tl-image-lightbox__close, .tl-image-lightbox__arrow{ border:0; border-radius:0; margin:0; padding:0; color:#171717; background:#fff; cursor:pointer; -webkit-appearance:none; appearance:none; transition:background-color .16s ease, opacity .16s ease; } .tl-image-lightbox__tool, .tl-image-lightbox__close{ width:48px; height:48px; flex:0 0 48px; display:flex; align-items:center; justify-content:center; font-size:27px; line-height:1; font-weight:400; } .tl-image-lightbox__zoom-value{ min-width:72px; height:48px; padding:0 12px; display:flex; align-items:center; justify-content:center; font-size:14px; line-height:18px; font-weight:500; } .tl-image-lightbox__tool:hover, .tl-image-lightbox__zoom-value:hover, .tl-image-lightbox__close:hover, .tl-image-lightbox__arrow:hover{ background:#D2FF00; } .tl-image-lightbox__tool:focus-visible, .tl-image-lightbox__zoom-value:focus-visible, .tl-image-lightbox__close:focus-visible, .tl-image-lightbox__arrow:focus-visible{ outline:2px solid #D2FF00; outline-offset:3px; } .tl-image-lightbox__close{ position:relative; margin-left:8px; } .tl-image-lightbox__close span{ position:absolute; left:13px; top:23px; width:22px; height:2px; background:#171717; } .tl-image-lightbox__close span:first-child{ transform:rotate(45deg); } .tl-image-lightbox__close span:last-child{ transform:rotate(-45deg); } .tl-image-lightbox__stage{ position:relative; z-index:2; grid-column:2; grid-row:2; min-width:0; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:none; cursor:zoom-in; } .tl-image-lightbox__stage.is-zoomed{ cursor:grab; } .tl-image-lightbox__stage.is-dragging{ cursor:grabbing; } .tl-image-lightbox__image{ display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; opacity:0; transform:translate3d(0,0,0) scale(1); transform-origin:center center; will-change:transform; transition:opacity .16s ease; pointer-events:auto; } .tl-image-lightbox__image.is-loaded{ opacity:1; } .tl-image-lightbox__loader{ position:absolute; left:50%; top:50%; width:36px; height:36px; margin:-18px 0 0 -18px; border:2px solid rgba(255,255,255,.22); border-top-color:#D2FF00; border-radius:50%; opacity:0; pointer-events:none; } .tl-image-lightbox__loader.is-visible{ opacity:1; animation:tl-image-lightbox-spin .7s linear infinite; } @keyframes tl-image-lightbox-spin{ to{transform:rotate(360deg)} } .tl-image-lightbox__arrow{ position:relative; z-index:4; align-self:center; width:48px; height:64px; display:flex; align-items:center; justify-content:center; } .tl-image-lightbox__arrow--prev{ grid-column:1; grid-row:2; justify-self:start; } .tl-image-lightbox__arrow--next{ grid-column:3; grid-row:2; justify-self:end; } .tl-image-lightbox__arrow svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; } .tl-image-lightbox__bottom{ position:relative; z-index:4; grid-column:2; grid-row:3; min-width:0; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding-top:14px; color:#fff; } .tl-image-lightbox__caption{ min-width:0; max-width:calc(100% - 90px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; line-height:18px; letter-spacing:-.3px; color:rgba(255,255,255,.68); } .tl-image-lightbox__counter{ flex:0 0 auto; font-size:14px; line-height:18px; letter-spacing:-.3px; color:#fff; } @media (max-width:767px){ .tl-image-lightbox__shell{ grid-template-columns:48px minmax(0,1fr) 48px; grid-template-rows:60px minmax(0,1fr) 48px; padding:12px 8px 12px; } .tl-image-lightbox__tool, .tl-image-lightbox__close{ width:40px; height:40px; flex-basis:40px; } .tl-image-lightbox__zoom-value{ min-width:58px; height:40px; padding:0 8px; font-size:12px; } .tl-image-lightbox__close{ margin-left:0; } .tl-image-lightbox__close span{ left:10px; top:19px; width:20px; } .tl-image-lightbox__arrow{ width:40px; height:56px; background:rgba(255,255,255,.9); } .tl-image-lightbox__bottom{ grid-column:1 / -1; padding:10px 8px 0; } .tl-image-lightbox__caption{ display:none; } } @media (prefers-reduced-motion:reduce){ .tl-image-lightbox, .tl-image-lightbox__image, .tl-image-lightbox__tool, .tl-image-lightbox__zoom-value, .tl-image-lightbox__close, .tl-image-lightbox__arrow{ transition:none !important; } } /* 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/video-lightbox.css?17901608725602 */ /* /local/templates/turbolemons-template/components/bitrix/news.detail/blog-detail/detail.css?179015809084881 */ /* /local/templates/turbolemons-template/components/bitrix/news.detail/blog-detail/image-lightbox.css?17901693936502 */