@charset "UTF-8"; /* ============================================================================ user.css — Joomla 5 / Cassiopeia Переработка старого стиля Joomla 3. Расположение: media/templates/site/cassiopeia/css/user.css (лучше — в дочернем шаблоне, см. заметки в конце файла) Порядок разделов: 01. Токены (переменные) 02. Темизация рубрик (Page Class Suffix) 03. База поверх Bootstrap 5 / Cassiopeia 04. Типографика контента 05. Ссылки и фокус 06. Раскладка и контейнеры Cassiopeia 07. Шапка и логотип 08. Хлебные крошки 09. Карточки блога 10. Страница статьи 11. Цитаты 12. Таблицы 13. Картинки в тексте 14. Списки и служебные классы контента 15. Теги 16. Пагинация 17. Навигация «предыдущая / следующая» 18. Сайдбары, меню, модули 19. Комментарии 20. Аккордеоны и слайдеры 21. Галерея 22. Подвал 23. Утилиты 24. Адаптив 25. Motion / печать ========================================================================== */ /* ========================================================================== 01. ТОКЕНЫ Всё, что нужно перекрасить, меняется здесь, а не по всему файлу. Цвета ссылок затемнены относительно старых: #8075F9 и #ff840b давали контраст 3.6:1 и 2.4:1 — ниже нормы WCAG AA (нужно 4.5:1). ========================================================================== */ :root { /* --- Цвет --- */ --c-text: #3E230F; --c-text-soft: #6B533F; --c-muted: #8A8A8A; --c-link: #6A5DF5; /* было #8075F9 */ --c-link-hover: #C25400; /* было #ff840b */ --c-glow: #FF840B; /* яркий оранжевый — только для рамок и теней */ --c-paper: #FCF8E7; --c-page-bg: #F1F3D5; --c-rule: #C4C6B3; --c-rule-soft: #E4E0D0; --c-white: #FFFFFF; /* --- Цвета рубрик --- */ --cat-success: #F2595E; --cat-ayurveda: #F9B164; --cat-human-life: #F0D955; --cat-family: #8CC974; --cat-mistakes: #ADB6FF; --cat-inspiration: #4ACCF5; /* --- Активный акцент (переопределяется в разделе 02) --- */ --accent: #CEC5F0; --accent-ink: var(--c-text); /* текст поверх акцента */ --accent-texture: none; /* фоновая текстура рубрики */ /* --- Путь к картинкам --- */ /* user.css лежит в .../cassiopeia/css/, значит ../images/ ведёт в .../cassiopeia/images/. Старые картинки нужно скопировать туда. */ --img: "../images"; /* --- Шрифты --- */ /* Подхватываем переменные Cassiopeia, если они есть, иначе системный стек. */ --font-body: var(--cassiopeia-font-family-body, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif); --font-head: var(--cassiopeia-font-family-headings, var(--font-body)); --font-quote: Georgia, "Times New Roman", Times, serif; /* --- Типографическая шкала (fluid, без брейкпоинтов) --- */ --fs-xs: 0.8125rem; /* 13px */ --fs-sm: 0.9375rem; /* 15px */ --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); --fs-h1: clamp(1.625rem, 1.30rem + 1.6vw, 2.25rem); --fs-h2: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem); --fs-h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); --fs-h4: 1.125rem; --lh-tight: 1.25; --lh-body: 1.65; /* было 1.42 — тесно для кириллицы */ /* --- Ритм --- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --radius-sm: 0.375rem; --radius: 0.625rem; --radius-lg: 1.25rem; /* --- Ширина колонки текста --- */ --measure: 68ch; /* --- Красная строка --- */ --indent: 1.5em; --ease: cubic-bezier(0.2, 0, 0.2, 1); --dur: 180ms; } /* ========================================================================== 02. ТЕМИЗАЦИЯ РУБРИК Cassiopeia подставляет Page Class Suffix в class у . Одна переменная вместо шести почти одинаковых блоков правил. Если суффикс окажется не на , а на .item-page — раскомментируйте вторую группу селекторов. ========================================================================== */ .item-success { --accent: var(--cat-success); } .item-ayurveda { --accent: var(--cat-ayurveda); } .item-human-life { --accent: var(--cat-human-life); } .item-family { --accent: var(--cat-family); } .item-mistakes { --accent: var(--cat-mistakes); } .item-inspiration { --accent: var(--cat-inspiration); } .item-success { --accent-texture: url("../images/bg-success.jpg"); } .item-ayurveda { --accent-texture: url("../images/bg-ayurveda.jpg"); } .item-human-life { --accent-texture: url("../images/bg-human-life.jpg"); } .item-family { --accent-texture: url("../images/bg-family.jpg"); } .item-mistakes { --accent-texture: url("../images/bg-mistakes.jpg"); } .item-inspiration { --accent-texture: url("../images/bg-inspiration.jpg"); } /* Тёмный текст поверх светлых акцентов, светлый — поверх насыщенных. Проверено вручную: жёлтый и салатовый требуют тёмного текста. */ .item-human-life, .item-family, .item-ayurveda, .item-mistakes, .item-inspiration { --accent-ink: #2B1A0A; } .item-success { --accent-ink: #FFFFFF; } /* ========================================================================== 03. БАЗА Убран `* { margin:0; padding:0 }` — он ломает Bootstrap 5. Убран `font-size: 62.5% !important` на body: этот приём растягивал всю вёрстку на em от 10px и конфликтует с rem-шкалой Joomla 5. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { /* 1rem = 16px. Никакого 62.5%. */ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body.site { font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--c-text); background-color: var(--c-page-bg); /*background-image: url("../images/bg.jpg");*/ background-repeat: no-repeat; background-position: 0 0; } img, picture, video, iframe { max-width: 100%; height: auto; border: 0; } img { font-style: italic; } /* alt-текст читается как подпись, если картинка не загрузилась */ /* Длинные слова и URL не рвут макет на узких экранах */ body.site p, body.site li, body.site h1, body.site h2, body.site h3, body.site h4, body.site td { overflow-wrap: break-word; } /* ========================================================================== 04. ТИПОГРАФИКА КОНТЕНТА Скоуп .com-content-article, .com-content-category-blog, .item-page — современная разметка Joomla 5. #article-text, #article-intro, #article-pic оставлены: это разметка, вбитая руками внутрь старых статей, её нельзя выкинуть, пока статьи не переписаны. ========================================================================== */ .item-page, .com-content-article, .com-content-category-blog, #article-text { font-size: var(--fs-base); line-height: var(--lh-body); } .item-page p, .com-content-article p, #article-text p { margin: 0 0 var(--sp-4); } /* Красная строка: со второго абзаца подряд. Русская типографская традиция, поэтому оставлена. */ .item-page p + p, .com-content-article p + p, #article-text p + p { text-indent: var(--indent); margin-top: calc(var(--sp-4) * -0.35); } /* Картинка внутри абзаца с отступом не должна уезжать вправе */ .item-page p + p > img, #article-text p + p > img { margin-left: calc(var(--indent) * -1); } .item-page h1, .com-content-article h1, #article-text h1 { font-family: var(--font-head); font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: 0.01em; word-spacing: 0.2em; text-align: center; text-wrap: balance; margin: 0 0 var(--sp-5); padding: var(--sp-5) var(--sp-3) var(--sp-3); color: var(--c-text); /* text-transform: uppercase убран: капслок в кириллице читается заметно хуже и ломает переносы. Если нужен — верните на .page-header h1. */ } .item-page h2, .com-content-article h2, #article-text h2 { font-family: var(--font-head); font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-tight); letter-spacing: 0.01em; text-wrap: balance; margin: var(--sp-6) 0 var(--sp-2); padding: 0; text-indent: 0; } .item-page h3, .com-content-article h3, #article-text h3 { font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-tight); margin: var(--sp-5) 0 var(--sp-2); } .item-page h4, .com-content-article h4, #article-text h4 { font-size: var(--fs-h4); font-weight: 700; margin: var(--sp-4) 0 var(--sp-2); } /* ========================================================================== 05. ССЫЛКИ И ФОКУС `outline: none` из старого файла удалён — это прямое нарушение доступности: с клавиатуры не видно, где находишься. ========================================================================== */ a { color: var(--c-link); text-decoration: none; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } /* Ссылки внутри текста статьи — подчёркнутые пунктиром, как было */ .item-page a:not(.btn):not(.page-link), .com-content-article a:not(.btn):not(.page-link), #article-text a:not(.btn) { color: var(--c-text); border-bottom: 1px dotted currentColor; } .item-page a.usual-link, #article-text a.usual-link { color: var(--c-link); border-bottom: 0; } a:hover, .item-page a:not(.btn):hover, .com-content-article a:not(.btn):hover, #article-text a:not(.btn):hover { color: var(--c-link-hover); } /* Видимый фокус для клавиатуры */ :focus-visible { outline: 3px solid var(--c-link); outline-offset: 3px; border-radius: var(--radius-sm); } a.hidden, a.no-underline { border-bottom: 0; text-decoration: none; } /* Ссылка на скачивание */ .item-page a.download-link, .item-page a.downloadlink, #article-text a.download-link, #article-text a.downloadlink { display: inline-flex; align-items: center; gap: var(--sp-2); color: #1B6E1B; border-bottom: 0; padding: var(--sp-2) 0; min-height: 2.75rem; /* тап-таргет 44px */ background: url("../images/download-link.gif") no-repeat left center; padding-left: 2.5rem; } /* ========================================================================== 06. РАСКЛАДКА И КОНТЕЙНЕРЫ CASSIOPEIA ========================================================================== */ /* Комфортная длина строки в основной колонке */ .container-component .item-page, .container-component .com-content-article__body, #article-text { max-width: var(--measure); margin-inline: auto; padding-inline: var(--sp-4); width: auto; /* было width: 550px */ } /* ========================================================================== 07. ШАПКА И ЛОГОТИП И ПОИСК и FOOTER Старый #logo был жёстко 350×125px с margin-left: 255px и приёмом text-indent: -9999px. Заменено на гибкий блок и современное скрытие текста. ========================================================================== */ .container-header {display:flex} .container-header { position: relative; /* Наша базовая идеальная оливковая подложка контента */ background-color: #f0f3d2; background-image: /* --- 1. ВНУТРЕННИЙ РАЗБАВИТЕЛЬ (На месте — Y: 44%) --- */ radial-gradient(22% 50% at 63% 44%, rgba(218,226,247,0.55) 0%, rgba(218,226,247,0) 100%), /* --- 2. СИНЯЯ СТУПЕНЬКА (Строго на месте — Y: 46% и 40%) --- */ radial-gradient(14% 55% at 64% 46%, rgba(168,208,240,0.35) 0%, rgba(168,208,240,0) 100%), radial-gradient(16% 60% at 69% 40%, rgba(168,208,240,0.32) 0%, rgba(168,208,240,0) 100%), /* --- 3. ПРАВЫЙ ЛАВАНДОВЫЙ МОСТ (Y: 30%) --- */ radial-gradient(22% 50% at 74% 30%, rgba(231,210,243,0.65) 0%, rgba(231,210,243,0) 100%), /* --- 4. БИРЮЗОВО-САЛАТОВЫЙ ПЕРЕХОД (ПРИПОДНЯТ НА 5% ВВЕРХ) --- */ /* Координаты Y скорректированы до сбалансированных 58% и 60% */ radial-gradient(45% 60% at 59% 58%, rgba(201,236,215,0.78) 0%, rgba(201,236,215,0) 100%), radial-gradient(20% 50% at 54% 60%, rgba(174,233,220,0.65) 0%, rgba(174,233,220,0) 100%), /* --- 5. САЛАТОВЫЙ ПОДПОР ПОД СИНЕВУ (Y: 55%) --- */ radial-gradient(25% 45% at 60% 55%, rgba(215,236,140,0.5) 0%, rgba(215,236,140,0) 100%), /* --- 6. ТЕПЛЫЕ СЛОИ (РОЗОВЫЙ И ЗОЛОТОЙ ОСТАЮТСЯ ВЫСОКО ВВЕРХУ) --- */ radial-gradient(55% 65% at 65% 22%, rgba(226,199,235,0.5) 0%, rgba(226,199,235,0) 100%), radial-gradient(75% 85% at 80% 12%, rgba(248,208,198,0.6) 0%, rgba(248,208,198,0) 100%), radial-gradient(70% 65% at 96% 8%, rgba(253,236,160,0.85) 0%, rgba(253,236,160,0) 100%), /* --- 7. ЗЕЛЕНАЯ ЗОНА СЛЕВА (Подложка логотипа) --- */ radial-gradient(85% 75% at 2% 10%, rgba(215,236,140,0.6) 0%, rgba(215,236,140,0) 100%), /* Базовая подложка */ linear-gradient(105deg, #f0f3d2 0%, #fbf5e6 45%, #fdf5cf 80%, #f0f3d2 100%); } .container-header .navbar-brand, #logo { display: flex; align-items: center; justify-content: flex-start; padding-block: var(--sp-3); margin-left:2rem } .container-header .container-search { align-content: center; margin-right: 2em; } .footer{ background-color: #f0f3d2; position: relative; background-image: /* Мягкий лавандовый мост, уводящий в тишину */ radial-gradient(30% 60% at 45% 50%, rgba(231,210,243,0.45) 0%, rgba(231,210,243,0) 100%), /* Возвращение нежного мятного тепла, но теперь в правой части */ radial-gradient(25% 60% at 65% 45%, rgba(174,233,220,0.45) 0%, rgba(174,233,220,0) 100%), /* Мягкий розовый закатный оттенок слева */ radial-gradient(75% 80% at 20% 60%, rgba(248,208,198,0.5) 0%, rgba(248,208,198,0) 100%), /* Светлый золотистый финиш в левом нижнем углу */ radial-gradient(80% 90% at 5% 85%, rgba(253,236,160,0.6) 0%, rgba(253,236,160,0) 100%), /* Спокойная кремово-песочная подложка */ linear-gradient(285deg, #f4f8e5 0%, #fbf5e6 50%, #fdf8e2 100%); } #back-top {margin-right:5rem } .back-to-top-link { color: #75603e; border: 1px solid #75603e; background: rgba(249, 229, 205, 0.7); bottom: 0rem !important; } .back-to-top-link:hover, .back-to-top-link:focus { background-color: #c3c1fa; } /* ========================================================================== 08. ХЛЕБНЫЕ КРОШКИ / .breadcrumb Актуальные классы: , .breadcrumb-item, .mod-breadcrumbs__here. Старые селекторы оставлены как алиасы на случай, если где-то ещё живут. ========================================================================== */ .mod-breadcrumbs {background-color: transparent;} .mod-breadcrumbs__wrapper { background: none; padding: 0px; transition: all 0.3s ease; /* Плавный переход цвета при смене страниц */ } .item-success .mod-breadcrumbs__wrapper {border-bottom: 1px dashed var(--cat-success)} .item-ayurveda .mod-breadcrumbs__wrapper {border-bottom: 1px dashed var(--cat-ayurveda)} .item-human-life .mod-breadcrumbs__wrapper {border-bottom: 1px dashed var(--cat-human-life)} .item-family .mod-breadcrumbs__wrapper {border-bottom: 1px dashed var(--cat-family)} .item-mistakes .mod-breadcrumbs__wrapper {border-bottom: 1px dashed var(--cat-mistakes)} .item-inspiration .mod-breadcrumbs__wrapper {border-bottom: 1px dashed var(--cat-inspiration)} /* Наложение цвета конкретного раздела (Кораллово-красный пастельный) */ .cat-wishes .mod-breadcrumbs__wrapper { /* Берем цвет вашей тени, но делаем его сильно разбеленным и прозрачным */ background-color: rgba(253, 225, 225, 0.6) !important; /* Добавляем едва заметную, нежную контурную обводку в тон */ border: 1px solid rgba(252, 192, 192, 0.4); } /* Стили для текста и ссылок внутри крошек, чтобы они гармонировали с новым фоном */ .cat-wishes .mod-breadcrumbs a { color: #a34c4c !important; /* Глубокий благородный приглушенно-красный */ text-decoration: none; } .cat-wishes .mod-breadcrumbs a:hover { color: #bd3a3a !important; /* Ярче при наведении */ } /* Разделители (слэши) и последний активный пункт */ .cat-wishes .mod-breadcrumbs li, .cat-wishes .mod-breadcrumbs span { color: #8c6e6e !important; /* Спокойный кофейно-коралловый для обычного текста */ } /* ========================================================================== 09. КАРТОЧКИ БЛОГА (анонсы в категории) Было: width: 450px, картинка float: left width: 200px, шесть блоков box-shadow с вендорными префиксами. Стало: одна сетка + var(--accent). ========================================================================== */ /* - стиль для применения фона категории .com-content-category-blog { background-image: var(--accent-texture, none); background-size: cover; background-position: center top; background-repeat: no-repeat; } */ .blog .item > section, .blog-item, #article-intro { display: grid; gap: var(--sp-4); align-items: start; width: min(100%, 34rem); margin: var(--sp-6) auto; padding: var(--sp-4); border: 1px dashed var(--c-rule-soft); border-radius: var(--radius); background: url("../images/article-head-back.jpg"); box-shadow: 0 0 1.25rem var(--accent); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .blog .item > section img, .blog-item img, #article-intro img { width: 100%; border-radius: var(--radius-sm); } .blog .item > section h1, .blog .item > section h5, .blog-item h1, .blog-item h5, #article-intro h1, #article-intro h5 { font-size: var(--fs-lg); font-weight: 700; line-height: var(--lh-tight); margin: 0 0 var(--sp-2); padding: 0; color: var(--c-text); text-align: left; text-transform: none; } .blog .item > section p, .blog-item p, #article-intro p { margin: 0 0 var(--sp-2); text-indent: 0; color: var(--c-text); } /* Наведение — только на устройствах с настоящим курсором. На тач-экранах :hover «залипает» после тапа. */ @media (hover: hover) { .blog .item > section:hover, .blog-item:hover, #article-intro:hover { border-color: var(--c-glow); box-shadow: 0 0 0.75rem var(--c-glow); background-image: url("../images/article-head-back-over.jpg"); } .blog .item > section:hover :is(h1, h5), .blog-item:hover :is(h1, h5), #article-intro:hover :is(h1, h5) { color: var(--c-link-hover); } } /* Кнопка «Подробнее». В Joomla 5 это .readmore > .btn */ .readmore, .readon { display: flex; justify-content:center ; } .readmore .btn, a.readon { background: transparent; } /* ========================================================================== 10. СТРАНИЦА СТАТЬИ ========================================================================== */ .item-page, .com-content-article /*#article-text */{ border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); background-color: var(--c-paper); background-image: var(--accent-texture); background-repeat: repeat-x; border-bottom: 2px solid var(--accent); box-shadow: inset 0 0 1.25rem var(--accent); padding-block: var(--sp-5) var(--sp-6); } /* Заголовок и лид на цветной подложке рубрики */ .page-header, .com-content-article__title, article > header { padding: var(--sp-5) var(--sp-4) var(--sp-4); } article > header p, .at-intro, #article-pic p { color: var(--accent-ink); font-size: var(--fs-lg); font-weight: 700; margin: 0 0 var(--sp-3); } article > header img, #article-pic img { float: left; margin: 0 var(--sp-4) var(--sp-4) 0; max-width: min(100%, 18rem); border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.12); } #article-pic + p, #article-pic + h2, #article-pic + h3 { clear: both; margin: var(--sp-4) 0 var(--sp-3); } /* Метаданные статьи в Joomla 5 */ .com-content-article__info, .article-info { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: var(--sp-4); } .article-info dd { margin: 0; } .vcshare.vcs--box, .vcshare { background: transparent; } /* ========================================================================== 11. ЦИТАТЫ ========================================================================== */ .qtn, blockquote:not(.text_file) { margin: var(--sp-6) 0 var(--sp-6) var(--sp-5); padding: var(--sp-4) var(--sp-4) var(--sp-5); border-left: 5px solid var(--accent); border-radius: var(--radius); box-shadow: inset 2px 2px 5px color-mix(in srgb, var(--accent) 70%, transparent); font-family: var(--font-quote); font-size: var(--fs-lg); font-style: italic; color: var(--c-text-soft); text-align: left; text-indent: 0; } .qtn p { text-indent: 0; } .qtn a, #article-text .qtn a { color: var(--c-text-soft); } /* Подпись под цитатой */ .qtn2, .qtn cite, blockquote cite { display: block; text-align: right; text-indent: 0; font-family: var(--font-quote); font-size: var(--fs-sm); font-style: normal; font-weight: 700; color: color-mix(in srgb, var(--accent) 75%, #000); padding-top: var(--sp-2); float: none; /* было float: right — ломало поток */ } /* Модуль «случайная цитата» */ #r-quot { padding: var(--sp-3) var(--sp-4); border-block: 2px dashed var(--c-rule); border-radius: var(--radius-sm); box-shadow: 0 0 1.5rem rgba(243, 250, 129, 0.55); } blockquote.text_file { font-size: var(--fs-lg); font-style: italic; margin: 0; } .mod_rquote_quote_text_file { color: var(--c-text); } /* ========================================================================== 12. ТАБЛИЦЫ Добавлена горизонтальная прокрутка: широкие таблицы больше не рвут макет на телефоне. Оберните таблицу в
или используйте .table-responsive из Bootstrap 5. ========================================================================== */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--sp-5); } .item-page table, #article-text table { border-collapse: collapse; width: 100%; } .item-page th, .item-page td, #article-text th, #article-text td { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); vertical-align: top; } .infotab { border: 1px solid var(--accent); } .infotab_head { background-color: color-mix(in srgb, var(--accent) 55%, white); font-weight: 700; } .infotab_tr { background-color: color-mix(in srgb, var(--accent) 25%, white); } .infotab_trsp { background-color: #D3F0FF; } .infotab_tremp { border: 1px solid #CCCCCC; } .infotab_td-date{ background-color: #EFE5F7; } /* Дефолт вне рубрики, чтобы таблица не оставалась бесцветной */ :root .infotab { border-color: #A7B7FF; } .item-success .infotab, .item-ayurveda .infotab, .item-human-life .infotab, .item-family .infotab, .item-mistakes .infotab, .item-inspiration .infotab { border-color: var(--accent); } /* ========================================================================== 13. КАРТИНКИ В ТЕКСТЕ ========================================================================== */ .left-pict, .right-pict { margin-bottom: var(--sp-4); border-radius: var(--radius-sm); } .left-pict { float: left; margin-right: var(--sp-4); } .right-pict { float: right; margin-left: var(--sp-4); } .left-pict-after { clear: left; } .right-pict-after { clear: both; } /* На телефоне обтекание отключается — см. раздел 24 */ .wf_caption { padding: var(--sp-1); font-size: var(--fs-sm); color: var(--c-text-soft); } figure { margin: var(--sp-5) 0; } figcaption { font-size: var(--fs-sm); color: var(--c-text-soft); text-align: center; padding-top: var(--sp-2); } /* ========================================================================== 14. СПИСКИ И СЛУЖЕБНЫЕ КЛАССЫ КОНТЕНТА ========================================================================== */ .item-page ul, .item-page ol, #article-text ul, #article-text ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-6); } .item-page ul, #article-text ul { list-style-type: disc; } .item-page li, #article-text li { line-height: var(--lh-body); margin-bottom: var(--sp-2); font-size: inherit; /* было жёстко 13px */ } .item-page ol.sm-leter, #article-text ol.sm-leter { list-style-type: lower-alpha; } /* Блок с отступом («выноска») */ .otstup { text-indent: 0; margin: var(--sp-4) 0 var(--sp-4) var(--sp-5); padding: 0 var(--sp-3) var(--sp-3) var(--sp-3); border-left: 2px solid var(--c-rule-soft); } .no-otstup { text-indent: 0; } .txt { display: inline; } /* ========================================================================== 15. ТЕГИ Joomla 5: