/* ===========================================================================
ООД «Экосфера» — перенос дизайна старого сайта на Joomla 6.
Cassiopeia штатно подключает этот файл (asset "template.user" в
joomla.asset.json). Это официальная точка кастомизации: обновления Joomla
её не затирают, дочерний шаблон не нужен.
Палитра снята с оригинала (templates/styles.css + инлайновые стили
header.php + пиксели фоновых гифов):
#9ACAE7 -> #EFF7FB градиент шапки (fon_top.gif, 72px, repeat-x)
#CCFF33 полоса заголовка раздела (manus_top2.gif)
#0000FF заголовок раздела (.style6, tahoma 17px bold)
#2CA62A текст новостей (.style17/.style18) — зелёный, bold
#274381 рамки и основной текст
#DA2D2C акценты, h1
#CDE4F2 боковины новостного блока (news_left.gif)
В отличие от оригинала (таблицы, фикс 1350px) — адаптивно.
=========================================================================== */
:root {
--eco-blue-dark: #274381; /* рамки, основной текст */
--eco-blue-link: #0000FF; /* заголовки разделов */
--eco-red: #DA2D2C; /* акценты, h1 */
--eco-green: #2CA62A; /* текст новостей */
--eco-lime: #CCFF33; /* полоса заголовка */
--eco-sky: #9ACAE7; /* верх градиента */
--eco-sky-pale: #EFF7FB; /* низ градиента */
--eco-box-side: #CDE4F2; /* боковины блока */
--eco-font: tahoma, helvetica, verdana, sans-serif;
}
/* --- Общее --- */
body {
font-family: var(--eco-font);
font-size: 12px;
color: var(--eco-blue-dark);
background: linear-gradient(180deg, var(--eco-sky) 0, var(--eco-sky-pale) 72px, #fff 72px);
background-repeat: repeat-x;
}
a { color: var(--eco-blue-dark); text-decoration: none; }
a:hover { color: var(--eco-red); text-decoration: underline; }
/* --- Шапка ---
Собрана одним модулем (см. setup_layout.php): логотип + лента баннеров +
контакты в ОДНОМ ряду, как в оригинале. Штатные контейнеры Cassiopeia
(логотип в container-header и пустая карточка top-b) прячем целиком —
иначе получаются три отдельные строки и пустая белая рамка. */
.container-header,
.container-top-b { display: none; }
/* Шапка должна стоять ровно по колонкам ниже.
Ловушка: у блока класс full-width, а Cassiopeia задаёт
.site-grid > .full-width { grid-column: full-start/full-end } — то есть
растягивает его на ВСЮ ширину экрана, из-за чего шапка разъезжается
относительно контента. Прибиваем к main-start/main-end: это ровно те же
колонки, что side-l + comp + side-r. */
.site-grid > .container-banner.full-width {
grid-column: main-start / main-end;
padding: 0;
margin: 0;
background: transparent;
max-width: none;
}
/* --- СЕТКА КОЛОНОК ---
Оригинал: общая ширина 1350px, левое меню 285px, лента новостей 600px,
правая колонка 280px + узкая полоса гербов.
Cassiopeia же делит на 4 РАВНЫЕ колонки по 19.875rem (~318px), из-за чего
пропорции уезжают. Переопределяем: области раскладываются как
". side-l comp comp side-r .", то есть comp занимает две средние колонки —
поэтому центр задаём двумя по 300px. */
.site-grid {
grid-gap: 0 8px;
grid-template-columns:
[full-start] minmax(0, 1fr)
[main-start] 285px 300px 300px 440px [main-end]
minmax(0, 1fr) [full-end];
max-width: none;
}
/* Правая колонка в оригинале — два столбца:
слева друг под другом «ПРЯМАЯ РЕЧЬ» и «ПРОГРАММЫ», справа узкая полоса гербов.
ГРИД ЗДЕСЬ НЕ ГОДИТСЯ: колонка гербов очень высокая, и при span на две
строки грид растягивает сами строки под неё — между «ПРЯМОЙ РЕЧЬЮ» и
«ПРОГРАММАМИ» появлялся огромный пробел.
Обтекание такого эффекта не даёт: высота float'а не влияет на соседей. */
.container-sidebar-right { display: block; }
/* гербы стоят первыми в разметке (ordering=0) и прижаты вправо */
.container-sidebar-right > .card:first-child {
float: right;
width: 148px;
margin-left: 8px;
}
.container-sidebar-right > .card:not(:first-child) {
width: 280px;
clear: left;
}
.eco-header {
display: flex;
/* лента баннеров и контакты centered по высоте логотипа:
логотип выше их, при выравнивании по верху они «висели» вверху */
align-items: center;
justify-content: flex-start;
gap: 10px;
padding: 6px 0 0;
}
.eco-header__logo { flex: 0 0 auto; display: block; }
.eco-header__logo img {
height: 110px; /* крупный логотип слева, как в оригинале */
width: auto;
display: block;
}
/* Полоса фото природы (ag1..ag8) в шапке — модуль в позиции banner.
В оригинале это 8 гифов подряд справа от логотипа. */
.eco-banners {
display: flex;
flex-wrap: nowrap;
gap: 0;
justify-content: flex-start;
/* салатовая полоса видна снизу из-под ленты — как в оригинале */
padding: 0 0 12px;
flex: 1 1 auto;
background: var(--eco-lime);
overflow: hidden;
}
/* Не растягивать и не раздвигать.
Две ловушки Cassiopeia:
1) flex:1 1 0 раздувал гифы на всю ширину экрана;
2) .container-banner img{margin:auto} расталкивал их по всей полосе —
нужен селектор той же или большей специфичности, чтобы обнулить margin.
В оригинале это плотный ряд картинок рядом с логотипом. */
/* Баннеры 120x80, как в оригинале. Cassiopeia ставит img{margin:auto} —
расталкивает их по полосе, поэтому margin обнуляем явно. */
.container-banner .eco-banners img,
.eco-banners img {
height: 80px;
width: 120px;
/* при нехватке места сжимаются, но не растягиваются:
Cassiopeia ставит img{margin:auto} — обнуляем явно */
flex: 0 1 120px;
min-width: 0;
margin: 0 0 0 2px;
display: block;
object-fit: cover;
}
/* Контакты справа в шапке: красная полоса со ссылками, ниже телефон и дата
на зелёном #66ff66 — точные цвета оригинала (bgcolor в header.php). */
.eco-contacts {
flex: 0 0 auto;
width: 232px;
background: #66FF66;
border: 1px solid var(--eco-blue-dark);
text-align: center;
}
.eco-contacts__links {
background: #A52019;
padding: 4px 6px;
font-size: 11px;
font-weight: bold;
color: #fff;
}
.eco-contacts__links a { color: #fff; text-decoration: none; }
.eco-contacts__links a:hover { color: var(--eco-lime); }
.eco-contacts__phone,
.eco-contacts__today {
color: #333;
font-weight: bold;
font-size: 12px;
padding: 6px 6px 0;
}
.eco-contacts__today { padding-bottom: 6px; }
/* Флаги в правой колонке */
.eco-flags { text-align: center; }
.eco-flags img { max-width: 100%; height: auto; }
/* --- Блок «ПРЯМАЯ РЕЧЬ» ---
В оригинале это зелёный блок: дата справа сверху, фото, под ним цитата
синим жирным. Модуль mod_articles_news рендерит .mod-articles-news. */
/* Классы модуля — mod-articlesnews / mod-articlesnews__item,
БЕЗ дефиса между articles и news (проверено по разметке). */
.mod-articlesnews {
background: transparent;
font-family: var(--eco-font);
padding: 0;
}
.mod-articlesnews__item {
border-bottom: 1px solid var(--eco-blue-dark);
padding: 8px;
margin: 0;
overflow: hidden; /* держим обтекание внутри элемента */
}
.mod-articlesnews__item:last-child { border-bottom: 0; }
/* фото компактное, а не во всю ширину колонки */
/* Фото цитаты: в оригинале ~150px, прижато влево, а текст идёт ПОД ним
во всю ширину колонки — НЕ обтекает сбоку. Обтекание оставляет тексту
~100px и он рвётся по слогам («Выступле / ние на пленарно / м»).
Селектор с контейнером — чтобы перебить размеры из разметки. */
.container-sidebar-right .mod-articlesnews__item img,
.mod-articlesnews__item img {
width: 150px;
max-width: 150px;
height: auto;
/* !important обязателен: у картинки класс float-start, а Bootstrap задаёт
.float-start{float:left!important} — без !important обтекание не снять. */
float: none !important;
display: block;
margin: 0 0 6px;
border: 1px solid var(--eco-blue-dark);
}
/* абзац с картинкой не должен создавать лишних отступов */
.mod-articlesnews__item p { margin: 0 0 4px; }
/* следующий элемент не должен наезжать на обтекание предыдущего */
.mod-articlesnews__item { clear: both; }
.mod-articlesnews__item,
.mod-articlesnews__item p {
color: var(--eco-blue-link);
font-weight: bold;
font-size: 12px;
line-height: 1.4;
text-align: left;
}
/* --- Блок «ПРОГРАММЫ» (правая колонка) ---
Фото 150px, под ним подпись-ссылка синим жирным, разделители между
элементами — как menu_line.gif в оригинале. Фон зелёный, как у цитат. */
.eco-prog { background: transparent; }
.eco-prog__item {
padding: 10px 8px;
border-bottom: 1px solid var(--eco-blue-dark);
}
.eco-prog__item:last-child { border-bottom: 0; }
.eco-prog__item img {
width: 150px;
max-width: 100%;
height: auto;
display: block;
margin: 0 0 6px;
border: 1px solid var(--eco-blue-dark);
}
.eco-prog__text a {
color: var(--eco-blue-link);
font-family: var(--eco-font);
font-size: 12px;
font-weight: bold;
line-height: 1.35;
text-decoration: none;
display: block;
padding-left: 10px;
position: relative;
}
/* красный маркер перед подписью, как strelka1.gif */
.eco-prog__text a::before {
content: "";
position: absolute;
left: 0;
top: 5px;
border-left: 5px solid var(--eco-red);
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
}
.eco-prog__text a:hover { color: var(--eco-red); text-decoration: underline; }
/* Текст цитаты — ссылка на материал (см. override _item.php).
Цвет и жирность те же, что у обычного текста блока: в оригинале ссылка
не выделяется, только меняет цвет при наведении. */
.newsflash-link,
.newsflash-link p {
color: var(--eco-blue-link);
text-decoration: none;
display: block;
}
.newsflash-link:hover,
.newsflash-link:hover p { color: var(--eco-red); text-decoration: underline; }
/* картинка внутри ссылки не должна подчёркиваться/менять вид */
.newsflash-link img { text-decoration: none; }
/* Дата цитаты — в оригинале красная, справа над фото (см. override _item.php) */
.newsflash-date {
color: var(--eco-red);
font-weight: bold;
font-size: 12px;
text-align: right;
margin: 0 0 4px;
}
.mod-articlesnews__item figure { margin: 0 0 6px; }
/* --- Главное меню ---
Меню выводится модулем в сайдбаре, на БЕЛОМ фоне карточки (.card).
Красить ссылки в белый нельзя — станут невидимы (белым по белому).
Белый цвет только внутри тёмной полосы навигации, если она появится. */
/* Пункты меню: в оригинале ссылки БЕЛЫЕ — там глобальное правило
a:link{color:#ffffff}, а при наведении синие a:hover{color:#0000ff}.
Шрифт tahoma 16px, снизу тонкая линия-разделитель menu_line.gif (#9CAAC4). */
.mod-menu .nav-item > a,
.mod-menu > li > a {
color: #FFFFFF;
font-weight: normal;
font-size: 16px;
font-family: var(--eco-font);
display: block;
padding: 3px 6px 3px 22px;
border-bottom: 1px solid #9CAAC4;
position: relative;
line-height: 1.3;
}
/* красный треугольный маркер перед пунктом */
.mod-menu .nav-item > a::before {
content: "";
position: absolute;
left: 10px;
top: 9px;
border-left: 5px solid var(--eco-red);
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
}
/* при наведении синий — как a:hover{color:#0000ff} в оригинале */
.mod-menu .nav-item > a:hover {
color: var(--eco-blue-link);
background: none;
text-decoration: none;
}
/* Текущий пункт в оригинале ничем не выделен — такой же белый, без подчёркивания.
Cassiopeia подсвечивает его через .active и [aria-current="page"]. */
.mod-menu .nav-item.active > a,
.mod-menu .nav-item > a[aria-current="page"],
.mod-menu .nav-item.current > a {
color: #FFFFFF;
text-decoration: none;
}
/* «Главная» в оригинале набрана вразрядку: Г Л А В Н А Я */
.mod-menu .nav-item.default > a,
.mod-menu .nav-item > a[aria-current="page"] { letter-spacing: 3px; }
/* Заголовки разделов меню (О ДВИЖЕНИИ, ИНФОРМЦЕНТР, ...).
В оригинале это НЕ салатовая плашка, а синий текст вразрядку прямо на
голубом фоне блока, слева — цветные кружки left_circ3.gif (100x12).
Размер по оригиналу: tahoma 15px bold. */
.mod-menu .nav-item > span.nav-header,
.mod-menu .nav-header {
display: block;
/* кружки left_circ3.gif (100x12) слева, текст — сразу за ними */
background: url('/images/ecosfera/images/left_circ3.gif') no-repeat 6px center;
border: 0;
/* бледно-жёлтый — точно как .style5 в оригинале (tahoma 15px bold, #ffff66) */
color: #FFFF66;
font-family: var(--eco-font);
font-size: 15px;
font-weight: bold;
letter-spacing: 2px;
/* колонка всего 285px: кружки занимают 6..106px, дальше текст.
nowrap обязателен — иначе длинный «ИНФОРМЦЕНТР» переносится. */
padding: 8px 4px 6px 112px;
text-align: left;
white-space: nowrap;
margin: 12px 0 2px;
text-transform: uppercase;
}
/* ВСЕГДА РАСКРЫТОЕ ДЕРЕВО.
Joomla'вский media/mod_menu/js/menu.js на загрузке проставляет всем
подменю aria-hidden="true" (строка 63), а Cassiopeia прячет их правилом
:where(.mod-menu__sub[aria-hidden="true"]){display:none}. Меню тогда
раскрывается только по клику. На старом сайте всё дерево видно сразу,
поэтому возвращаем показ. Селектор с классом бьёт :where() (у него
специфичность 0), !important не нужен. */
.container-sidebar-left .mod-menu__sub,
.container-sidebar-left .mod-menu__sub[aria-hidden="true"] {
display: block;
}
/* стрелка-раскрывашка не нужна, дерево и так открыто */
.container-sidebar-left .mod-menu .icon-chevron-down { display: none; }
/* Вложенные уровни: в оригинале 14px (против 16px у верхнего) и с отступом */
.mod-menu .mod-menu__sub { list-style: none; padding-left: 18px; margin: 0; }
/* Размер зависит от УРОВНЯ вложенности, как в оригинале:
первый уровень внутри раздела (Краткая информация, Документы, Устав…) — 16px
второй уровень (Председатель Правления, Состав Правления…) — 14px
Раньше 14px стояло всем вложенным сразу, из-за чего первый уровень был мельче. */
.mod-menu .mod-menu__sub .nav-item > a {
color: #FFFFFF;
font-size: 16px;
font-weight: normal;
padding: 2px 6px 2px 20px;
border-bottom: 0; /* у вложенных пунктов линий в оригинале нет */
}
.mod-menu .mod-menu__sub .mod-menu__sub .nav-item > a { font-size: 14px; }
.mod-menu .mod-menu__sub .nav-item > a::before { left: 8px; top: 8px; }
.mod-menu .mod-menu__sub .nav-item > a:hover { color: var(--eco-blue-link); }
/* Блок меню целиком — синяя рамка, как .ramka3 */
.container-sidebar-left .card { border: 1px solid var(--eco-blue-dark); }
/* Если меню окажется в тёмной горизонтальной полосе — там наоборот */
.container-nav .mod-menu .nav-item > a,
nav.navbar .mod-menu .nav-item > a { color: #fff; border-bottom: 0; }
.container-nav, nav.navbar { background: var(--eco-blue-dark); border-radius: 0; }
/* --- Заголовок раздела: синий текст на салатовой полосе ---
ВАЖНО: .page-header в Joomla используется дважды — как заголовок страницы
(внутри h1) и как заголовок каждой новости в блоге (внутри h2). Красить сам
.page-header нельзя: салатовая полоса появится у каждой новости.
Поэтому полосу вешаем на сам h1. */
.page-header h1 {
/* Салатовая полоса + четыре кружка слева (circles.jpg, 138x36).
Оба слоя заданы одним background — иначе второе правило затрёт первое. */
background: url('/images/ecosfera/images/circles.jpg') no-repeat 6px center,
var(--eco-lime);
border: 1px solid var(--eco-blue-dark);
color: var(--eco-blue-link);
font-family: var(--eco-font);
font-size: 17px;
font-weight: bold;
letter-spacing: 3px;
text-transform: uppercase;
margin: 0 0 8px;
padding: 8px 12px 8px 156px;
min-height: 36px;
line-height: 22px;
}
/* Заголовок «Общероссийское Общественное Движение» над лентой:
в оригинале три строки синим вразрядку, со ступенчатым отступом */
/* Заголовок в центре стоит БЕЗ рамки и фона: в оригинале он просто висит
над лентой. Cassiopeia оборачивает модуль в .card, которому я задал рамку
и заливку — для main-top это надо снять. */
/* Обёртка называется .main-top.card (внутри container-component),
а НЕ .container-main-top — проверено по разметке. */
.main-top.card,
.main-top.card > .card-body {
border: 0;
background: none;
padding: 0;
margin: 0;
}
.eco-center-title {
text-align: center;
padding: 8px 0 12px;
line-height: 1.5;
}
.eco-center-title span {
display: block;
color: #5566B5;
font-family: var(--eco-font);
font-size: 17px;
font-weight: bold;
letter-spacing: 5px;
}
.eco-center-title span:nth-child(2) { padding-left: 60px; }
.eco-center-title span:nth-child(3) { padding-left: 120px; }
/* --- Рамка контента (как .ramka3: белый фон, 1px синяя рамка) --- */
.com-content-category-blog,
.com-content-article {
background: #F2FAFD; /* бледно-голубой фон центра, как в оригинале */
border: 1px solid var(--eco-blue-dark);
/* боковины новостного блока, как news_left/right.gif */
border-left: 4px solid var(--eco-box-side);
border-right: 4px solid var(--eco-box-side);
padding: 12px;
}
/* --- Текст материалов: зелёный жирный, как .style17/.style171 --- */
.item-content p,
.com-content-article__body p,
.com-content-article__body {
color: var(--eco-green);
font-weight: bold;
font-size: 12px;
line-height: 1.5;
text-align: justify;
}
/* Заголовки новостей (h2 внутри .page-header каждого элемента блога) */
.blog-item .page-header h2,
.blog-item .page-header h2 a,
.com-content-article .page-header h2 {
color: var(--eco-green);
font-family: var(--eco-font);
font-size: 16px;
font-weight: bold;
background: none;
border: 0;
padding: 0;
margin: 0 0 6px;
}
.blog-item .page-header h2 a:hover { color: var(--eco-red); }
/* Метаданные. В оригинале над заголовком только дата — ни «Подробности»,
ни «Категория», ни автора. Прячем всё лишнее, оставляем дату. */
.article-info dt.article-info-term { display: none; } /* подпись «Подробности» */
.article-info dd.category-name,
.article-info dd.createdby,
.article-info dd.hits { display: none; }
.article-info dd.published span.icon-calendar { display: none; }
.article-info,
.article-info dd,
.article-info time {
color: var(--eco-green);
font-weight: bold;
font-size: 14px;
margin: 0 0 4px;
padding: 0;
}
/* «Подробнее» — как .style172 */
.readmore .btn,
a.readmore,
.com-content-blog__link,
.com-content-blog__links a {
background: transparent;
border: 0;
color: var(--eco-green);
font-size: 10px;
font-weight: bold;
font-style: italic;
padding: 0;
}
.readmore .btn:hover,
.com-content-blog__links a:hover { color: var(--eco-red); text-decoration: underline; }
/* Картинка в новости обтекается текстом. Сторона берётся из исходных данных
(поле align в .txt): 404 новости — слева, 138 — справа, они чередуются.
Bootstrap-классы float-start / float-end проставляет build_import.py. */
.item-content img,
.com-content-article__body img { max-width: 100%; height: auto; }
.item-content img.float-start,
.com-content-article__body img.float-start { margin: 0 12px 6px 0; }
.item-content img.float-end,
.com-content-article__body img.float-end { margin: 0 0 6px 12px; }
/* абзац-обёртка картинки не должна ломать обтекание */
.item-content p:has(> img.float-start),
.item-content p:has(> img.float-end) { margin: 0; }
/* Разделитель между новостями (как text_sverhu.gif) */
.blog-item + .blog-item,
.com-content-category-blog__item + .com-content-category-blog__item {
border-top: 1px solid var(--eco-box-side);
padding-top: 10px;
margin-top: 10px;
}
/* --- Постраничная навигация в стиле сайта ---
По умолчанию Bootstrap рисует тёмно-синие прямоугольники. Приводим к
палитре сайта: салатовые кнопки с синей рамкой, активная — красная. */
.com-content-category-blog__pagination { text-align: center; }
.pagination__wrapper { display: flex; justify-content: center; }
.pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 3px;
list-style: none;
padding: 0;
margin: 12px 0;
}
.pagination .page-item { margin: 0; }
.pagination .page-link {
display: block;
min-width: 26px;
padding: 3px 8px;
background: var(--eco-lime);
border: 1px solid var(--eco-blue-dark);
border-radius: 0;
color: var(--eco-blue-dark);
font-family: var(--eco-font);
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
box-shadow: none;
}
.pagination .page-link:hover {
background: var(--eco-red);
border-color: var(--eco-red);
color: #fff;
}
/* текущая страница */
.pagination .page-item.active .page-link,
.pagination .active > .page-link {
background: var(--eco-red);
border-color: var(--eco-blue-dark);
color: #fff;
}
/* недоступные стрелки «в начало» / «назад» на первой странице */
.pagination .page-item.disabled .page-link {
background: #E4F2FB;
color: #9DB2C9;
border-color: #A9CFE6;
}
/* счётчик «Страница 2 из 52» */
.com-content-category-blog__counter {
color: var(--eco-blue-dark);
font-family: var(--eco-font);
font-size: 12px;
font-weight: bold;
text-align: center;
}
/* --- Заголовки в тексте --- */
h1 { color: var(--eco-red); font-size: 18px; font-weight: normal; font-family: var(--eco-font); }
h2, h3 { color: var(--eco-blue-dark); font-family: var(--eco-font); }
/* --- Боковые модули (Cassiopeia рендерит их как .card) ---
В оригинале блоки — светло-голубой градиент с декором «осенние листья»
(left_up.jpg, 259x67) поверху. */
/* Фон блоков берём из самих картинок оригинала (left_center.jpg /
right_center.jpg, 290px, repeat-y). Это точнее, чем подбирать градиент:
у оригинала он ГОРИЗОНТАЛЬНЫЙ — слева насыщённее, вправо светлее
(синий #5EB8F4 -> #A4D6F7, зелёный #B5FBB3 -> #81F97E). */
.card {
border: 1px solid var(--eco-blue-dark);
border-radius: 0;
background: url('/images/ecosfera/images/left_center.jpg') repeat-y left top;
background-size: 100% auto;
margin-bottom: 12px;
}
.card-header {
background: var(--eco-lime);
color: var(--eco-blue-link);
font-family: var(--eco-font);
font-size: 13px;
font-weight: bold;
letter-spacing: 2px;
text-transform: uppercase;
border-radius: 0;
border-bottom: 1px solid var(--eco-blue-dark);
padding: 6px 10px;
}
/* Правая колонка — ЗЕЛЁНАЯ: свой фон right_center.jpg и свои листья
right_up.jpg (в оригинале это отдельные картинки, не те же, что слева). */
.container-sidebar-right .card:nth-child(2),
.container-sidebar-right .card:nth-child(3) {
background: url('/images/ecosfera/images/right_center.jpg') repeat-y left top;
background-size: 100% auto;
}
/* Осенние листья над верхним блоком колонки, как в оригинале.
Справа первым в разметке идёт блок гербов (он уходит float'ом вправо),
поэтому листья вешаем на ВТОРУЮ карточку — «ПРЯМУЮ РЕЧЬ». */
.container-sidebar-left .card:first-child {
background-image: url('/images/ecosfera/images/left_up.jpg'),
url('/images/ecosfera/images/left_center.jpg');
/* Листья НЕ повторяем: картинка 259px уже колонки (285px), и при repeat-x
у правого края был виден шов от второго повтора. В оригинале она тоже
растягивалась явно — 
. */
background-repeat: no-repeat, repeat-y;
background-position: top left, left top;
background-size: 100% auto, 100% auto;
padding-top: 67px; /* высота left_up.jpg */
}
.container-sidebar-right .card:nth-child(2) {
background-image: url('/images/ecosfera/images/right_up.jpg'),
url('/images/ecosfera/images/right_center.jpg');
/* то же, что слева: без повтора, растягиваем на ширину колонки */
background-repeat: no-repeat, repeat-y;
background-position: top left, left top;
background-size: 100% auto, 100% auto;
padding-top: 73px; /* высота right_up.jpg */
}
.container-sidebar-left .card:first-child > .card-header,
.container-sidebar-right .card:nth-child(2) > .card-header { margin-top: 0; }
/* Блок гербов: в оригинале стоит на белом, без рамки и заливки */
.container-sidebar-right > .card:first-child {
background: none;
border: 0;
padding-top: 6px;
}
/* Тело блока меню — голубая заливка, как в оригинале (у Cassiopeia белое) */
.container-sidebar-left .card-body {
background: transparent;
padding: 8px 10px;
}
/* Заголовок модуля «МЕНЮ» в оригинале отсутствует: сразу идёт «ГЛАВНАЯ» */
.container-sidebar-left .card > .card-header { display: none; }
/* Разделительных линий между пунктами в оригинале нет — пункты идут плотно */
/* --- Детские рисунки под меню (анимированные гифы 190x190) ---
Модуль «Рисунки» стоит в sidebar-left вторым. У него не должно быть
ни рамки, ни голубой заливки блоков меню — в оригинале рисунки идут
просто столбиком с отступами. */
.container-sidebar-left .card:nth-child(2),
.eco-draw { background: none; border: 0; }
.eco-draw {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
padding: 15px 0 0;
}
.eco-draw img {
width: 190px;
height: 190px;
max-width: 100%;
display: block;
margin: 0;
}
/* Кружки перед заголовком раздела рисуются фоном в правиле .nav-header выше.
Отдельного ::before быть не должно — иначе кружки дублируются, а
inline-block шириной 100px ломает строку и заголовок переносится. */
/* Полоса «НОВОСТИ.» с кружками задана выше, в едином правиле .page-header h1 —
держать её двумя правилами опасно: второе background затирает первое. */
/* Колонка гербов и баннеров справа */
.eco-gerbs { text-align: center; }
.eco-gerbs a { display: block; margin: 0 0 12px; }
.eco-gerbs img { max-width: 100%; height: auto; border: 0; }
/* --- Подвал ---
В оригинале: ряд логотипов партнёров на белом, под ним салатовая полоса
(manus_top1.gif) с копирайтом по центру. */
/* Подвал лежит ВНЕ site-grid (отдельный