/* Copyright (C) 2025-2026 adcitymag.ru */ /* adcm-plus / ui */ /* ---- «Аа» и «Поделиться» в строке с датой ---- */ .adcx-tools { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding-left: 1rem; } .adcx-toolbtn { display: inline-flex; align-items: baseline; gap: 1px; margin: 0; padding: 3px 10px; border: 1px solid var(--borderColor, rgba(128, 128, 128, .4)); border-radius: var(--adcm-r-sm); background: transparent; color: var(--adcmMuted, var(--greyColor)); font-family: inherit; font-size: var(--t-meta, 12px); line-height: 1.4; white-space: nowrap; cursor: pointer; } .adcx-toolbtn:hover { color: var(--hoverColor); border-color: currentColor; } .adcx-toolbtn span:first-child { font-size: var(--t-meta, 11px); } .adcx-toolbtn span:last-child { font-size: var(--t-body, 16px); } /* размер текста статьи */ html[data-adcx-fs="lg"] body.single .post-content { font-size: 1.15em; } html[data-adcx-fs="xl"] body.single .post-content { font-size: 1.3em; } /* то же на страницах конкурса, события и проекта */ html[data-adcx-fs="lg"] body.single :is(.adcm-evt-body, .adcm-single-body) { font-size: calc(var(--t-card-lg, 1.15rem) * 1.15); } html[data-adcx-fs="xl"] body.single :is(.adcm-evt-body, .adcm-single-body) { font-size: calc(var(--t-card-lg, 1.15rem) * 1.3); } .adcx-tools-row { display: flex; justify-content: flex-end; margin: 0 0 var(--adcm-space-4, 16px); } .adcx-tools-row .adcx-tools { margin-left: 0; padding-left: 0; } /* ---- Индикатор чтения ---- */ .adcx-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 3px; background: var(--adcmAccent, #8c4a3c); transform: scaleX(0); transform-origin: 0 50%; } /* ---- Оглавление ---- */ .adcx-toc { margin: 0 0 2rem; padding: 1rem 1.4rem; border-left: 3px solid var(--mainColor); border-radius: 0 var(--adcm-r-md, 12px) var(--adcm-r-md, 12px) 0; background: rgba(128, 128, 128, .08); } .adcx-toc__title { display: block; margin-bottom: .5rem; font-weight: var(--bold, 600); } .adcx-toc ol { margin: 0; padding-left: 1.2rem; } .adcx-toc a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(128, 128, 128, .4); } .adcx-toc a:hover { color: var(--hoverColor); border-bottom-color: currentColor; text-decoration: none; } .adcx-toc a.is-active { font-weight: var(--bold, 600); border-bottom-color: currentColor; } body.single .post-content h2 { scroll-margin-top: 90px; } /* ---- Карточка «Читать дальше»: слева, чтобы не накрывать кнопку «наверх» ---- */ .adcx-nextup { position: fixed; left: 24px; bottom: 24px; z-index: 80; width: 300px; max-width: calc(100vw - 48px); padding: 10px 12px; border: 1px solid var(--borderColor, rgba(128, 128, 128, .3)); border-radius: var(--adcm-r-lg); background: var(--lightColor, #fff); box-shadow: var(--adcm-shadow-4, 0 16px 40px rgba(0, 0, 0, .2)); opacity: 0; transform: translateY(24px); transition: transform var(--adcm-dur-base, .22s) ease, opacity var(--adcm-dur-base, .22s) ease; } .adcx-nextup[hidden] { display: none; } .adcx-nextup.is-visible { opacity: 1; transform: none; } .adcx-nextup__link { display: flex; align-items: center; gap: var(--adcm-space-3); color: inherit; text-decoration: none; } .adcx-nextup__link:hover { text-decoration: none; } .adcx-nextup__img { flex: 0 0 auto; width: 72px; height: 48px; object-fit: cover; border-radius: var(--adcm-r-sm); } .adcx-nextup__text { display: flex; flex-direction: column; gap: 2px; } .adcx-nextup__label { font-size: var(--fs-xs, .75rem); font-weight: var(--bold, 600); letter-spacing: .06em; text-transform: uppercase; color: var(--adcmMuted, var(--greyColor)); } .adcx-nextup__title { display: -webkit-box; -webkit-line-clamp: 2; /* не больше двух строк */ -webkit-box-orient: vertical; overflow: hidden; font-size: var(--t-ui, .9rem); font-weight: var(--bold, 600); line-height: 1.3; } .adcx-nextup__close { position: absolute; top: 2px; right: 6px; border: 0; background: none; color: var(--adcmMuted, var(--greyColor)); font-family: inherit; font-size: var(--t-c-h2, 22px); line-height: 1; cursor: pointer; } @media (max-width: 900px) { .adcx-nextup { display: none; } } /* на телефоне внизу есть панель навигации */ /* ---- Нижняя панель навигации: только на телефонах ---- */ .adcx-bottombar { display: none; } @media (max-width: 768px) { .adcx-bottombar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--adcm-z-bottombar); /* выше выезжающего меню: «Меню» остаётся доступным и закрывает его */ display: flex; justify-content: space-around; padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--borderColor, rgba(128, 128, 128, .25)); background: var(--lightColor, #fff); } .adcx-bottombar__item { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 56px; min-height: 44px; font-size: var(--t-meta, 11px); color: var(--adcmMuted, var(--greyColor)); text-decoration: none; } .adcx-bottombar__item:hover { color: var(--hoverColor); text-decoration: none; } .adcx-bottombar__icon { position: relative; font-size: var(--t-h3, 20px); line-height: 1; } .adcx-bottombar__badge { position: absolute; top: -6px; left: 55%; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: var(--adcm-r-pill); background: var(--adcmAccent, #c2410c); color: var(--adcm-c-white, #fff); font-size: var(--t-label, 10px); line-height: 16px; text-align: center; } .adcx-bottombar__badge[hidden] { display: none; } .adcx-bottombar__item.is-active { color: var(--mainColor); font-weight: var(--medium, 500); } /* кнопка «наверх» и подвал не прячутся под панелью */ body { padding-bottom: 56px; } html body .back-to-top { bottom: calc(56px + 16px + env(safe-area-inset-bottom, 0px)); right: 14px; z-index: calc(var(--adcm-z-bottombar, 1000) - 1); } } @media (max-height: 480px) and (orientation: landscape) { .adcx-bottombar { display: none; } body { padding-bottom: 0; } html body .back-to-top { bottom: 16px; } } /* ---- Подписка ---- */ .adcx-subscribe { margin: 32px 0; padding: 20px; border-radius: var(--adcm-r-md); background: rgba(128, 128, 128, .08); } .adcx-subscribe__title { display: block; margin-bottom: 12px; font-weight: var(--bold, 600); } .adcx-subscribe__row { display: flex; flex-wrap: wrap; gap: var(--adcm-space-2); } .adcx-subscribe__row input[type="email"] { flex: 1 1 220px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--borderColor, rgba(128, 128, 128, .4)); border-radius: var(--adcm-r-sm); background: var(--bodyBg, transparent); color: var(--mainColor); font: inherit; } .adcx-subscribe__row input[type="email"]:focus-visible { outline: 2px solid var(--hoverColor, currentColor); outline-offset: 1px; } .adcx-subscribe__row button { min-height: 44px; padding: 10px 20px; border: 0; border-radius: var(--adcm-r-sm); background: var(--mainColor); color: var(--lightColor, #fff); font: inherit; cursor: pointer; } .adcx-subscribe__agree { display: block; margin-top: 8px; font-size: var(--fs-xs, .75rem); color: var(--adcmMuted, var(--greyColor)); } /* отступы над подвалом: блоки главной не складывают поля с полем подвала */ .adcx-home-end { margin: 2rem auto 0; width: 100%; } .adcx-home-end .adcx-subscribe { margin: 0; } .main > .adcx-trending:last-child, .main > .adcx-showcase:last-child { margin-bottom: 0; } /* кнопка «Загрузить ещё»: состояние ошибки с возможностью повторить */ .load-more-posts.is-error, #load-more-posts:not(:disabled)[aria-busy="false"] { border-color: var(--adcm-danger, #b91c1c); color: var(--adcm-danger, #b91c1c); } .load-more-posts[aria-busy="true"], #load-more-posts[aria-busy="true"] { cursor: progress; } /* ========================================================================== Кнопки шапки: «Сохранённое», тема, поиск, соцсети, меню. Одинаковый размер, фон, значки и расстояния между ними. ========================================================================== */ :root { --adcm-hbtn: 40px; /* размер круглой кнопки */ --adcm-hbtn-icon: 22px; /* размер значка внутри */ --adcm-hbtn-gap: 8px; /* расстояние между кнопками */ } html body .site-header__btns { display: flex; align-items: center; justify-content: flex-end; gap: var(--adcm-hbtn-gap); } html body .site-header__btns :is(.adcx-hbtn, .theme-switch, .site-search-btn, .mobile-socials-btn, .mobile-menu-btn) { box-sizing: border-box; flex: 0 0 auto; margin: 0; padding: 0; width: var(--adcm-hbtn); height: var(--adcm-hbtn); border: 0; border-radius: var(--adcm-r-circle, 50%); background-color: var(--greyBg); color: var(--mainColor); transition: background-color var(--adcm-dur-fast, .15s) ease, color var(--adcm-dur-fast, .15s) ease; } /* показ кнопок: «три полоски» (.mobile-menu-btn) сюда не входит, её показ на планшете и телефоне задаёт style.css, на компьютере она скрыта */ html body .site-header__btns :is(.adcx-hbtn, .theme-switch, .site-search-btn, .mobile-socials-btn) { display: inline-flex; align-items: center; justify-content: center; } html body .site-header__btns :is(.adcx-hbtn, .site-search-btn, .mobile-socials-btn):hover { color: var(--hoverColor); } html body .site-header__btns :is(.adcx-hbtn, .site-search-btn, .mobile-socials-btn) svg { width: var(--adcm-hbtn-icon); height: var(--adcm-hbtn-icon); flex: 0 0 auto; } html body .site-header__btns :is(.site-search-btn, .mobile-socials-btn) svg { fill: currentColor; } /* значок «Сохранённое» линейный, заливку не получает */ /* переключатель темы рисует значок фоном: приводим его к тому же размеру */ html body .site-header__btns .theme-switch { background-size: var(--adcm-hbtn-icon) var(--adcm-hbtn-icon); } html body .site-header__btns .theme-switch .switch { width: 100%; height: 100%; display: block; } /* в тёмной теме у всех кнопок одинаковый фон (раньше «Сохранённое» отличалось) */ html[data-theme="dark"] body .site-header__btns :is(.adcx-hbtn, .theme-switch, .site-search-btn, .mobile-socials-btn, .mobile-menu-btn) { background-color: #2a2a2a; color: var(--adcm-c-gray-100, #ededed); } html[data-theme="dark"] body .site-header__btns .theme-switch { filter: none; } @media (min-width: 700px) and (max-width: 1100px) { :root { --adcm-hbtn: 44px; } } /* ========================================================================== Скругления и рамки: единая шкала, как в современных системах (Apple и др.) Шкала: xs 4 (метки, мелкие элементы) · sm 8 (кнопки, поля) · md 12 (малые карточки, превью) lg 16 (карточки) · xl 20 (крупные панели) · 2xl 28 (обложки, большие блоки) pill (таблетки, чипы) · circle (круглые кнопки, аватары) Правила: 1. Вложенные углы концентричны: радиус внутреннего = радиус внешнего минус отступ между ними. 2. Рамки в 1 px цветом --borderColor, акцентная рамка 2 px только у фокуса и выбранного. 3. Плавные «непрерывные» углы (squircle, как у Apple) включаются там, где браузер их поддерживает. ========================================================================== */ :root { --adcm-concentric-pad: 12px; } /* картинка внутри карточки: радиус на отступ меньше радиуса карточки */ body :is(.adcm-tcard, .adcm-feat-card, .re-card, .kk-card, .tag-post-card, .adcx-nv-row) :is(img, .adcm-tcard__img, .adcm-tcard__thumb) { border-radius: max(var(--adcm-r-xs, 4px), calc(var(--adcm-card-radius, 16px) - var(--adcm-concentric-pad))); } /* непрерывные углы: в браузерах без поддержки остаются обычные скругления */ @supports (corner-shape: squircle) { body :is(.adcm-card, .adcm-tcard, .adcm-feat-card, .adcm-folio-card, .adcm-chip, .adcm-evt-facts, .adcm-etl__card, .re-card, .kk-card, .tag-post-card, .hne-col, .adcx-nv-lead, .adcx-hero, .adcx-bu, .adcx-trending__thumb, .load-more-posts, .submit-btn, .site-search-btn, .theme-switch, .adcx-hbtn, input:not([type="checkbox"]):not([type="radio"]), select, textarea, button) { corner-shape: squircle; } } /* Меню шапки на широком экране: одна строка, лишние пункты в «Ещё» */ @media (min-width: 1101px) { html:not(.adcm-compact) body .site-header__wrap--inline .site-nav--inline .nav-menu { flex-wrap: nowrap; white-space: nowrap; } html:not(.adcm-compact) body .site-header__wrap--inline .site-nav--inline { min-width: 0; } } body .nav-menu .adcx-more { position: relative; } body .nav-menu .adcx-more > .sub-menu { right: 0; left: auto; width: 240px; white-space: normal; } body .nav-menu .adcx-more:hover > .sub-menu, body .nav-menu .adcx-more:focus-within > .sub-menu, body .nav-menu .adcx-more.is-open > .sub-menu { display: block; } /* Шапка на компьютере: всё меню в одну строку без «Ещё». Шапка шире основного контейнера (как у крупных изданий), промежутки плотнее. «Ещё» остаётся только как запасной вариант на узких окнах от 1101 до ~1280 px. */ @media (min-width: 1101px) { html body .site-header .site-header__wrap--inline { gap: 16px; } html body .site-header__wrap--inline .site-nav--inline .menu-item:not(:last-child) { margin-right: .85rem; } } @media (min-width: 1280px) { html body .site-header .site-header__wrap--inline { max-width: max(var(--width, 1100px), min(1480px, calc(100% - 48px))); } } /* на окнах 1101–1439 px пункты чуть мельче и теснее, чтобы всё меню оставалось в одной строке */ @media (min-width: 1101px) and (max-width: 1439px) { html body .site-header__wrap--inline .site-nav--inline .menu-item > a { font-size: var(--t-ui, .9rem); } html body .site-header__wrap--inline .site-nav--inline .menu-item:not(:last-child) { margin-right: .65rem; } } /* подписка через Telegram, если нет сервиса рассылки */ .adcx-subscribe--social { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--adcm-space-3, 12px); } .adcx-subscribe__btn { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: var(--adcm-r-sm, 8px); background: var(--hoverColor); color: var(--bodyBg, #fff); font-size: var(--t-ui, .88rem); font-weight: var(--medium, 500); text-decoration: none; } .adcx-subscribe__btn:hover { opacity: .9; text-decoration: none; } /* ========================================================================== Выпадающие списки по всему сайту: единый вид и скруглённые углы. 1. Закрытое поле: скругление 12 px, своя стрелка, одинаковая высота. 2. Раскрытый список: в браузерах с настраиваемым