/* ============================================================================
footer-evolve.css — точечная модернизация существующего подвала apmo.ru.
ВАЖНО: НЕ заменяет HTML, НЕ конфликтует с .footer/style_template.css,
НЕ требует правок include/footer_contacts.php или footer_content.php.
Работает чистым CSS-оверлеем поверх существующих классов:
.footer / .f-content / .f-content__col / .f-content__col-title
.footer__card--contacts / .contact-line / .contact-icon
.footer__bottom / .footer-social / .footer-links / .footer-copy
.totop / .totop span
Откат — удалить этот файл и строку в header.php (rollback.sh).
Структура:
§1 — иконки (SVG-mask data:URI, Bootstrap Icons MIT)
§2 — заголовки колонок: ::before иконка слева
§3 — колонки: hover-lift translateY(-2px) + soft shadow
§4 — соцсети: brand-color пилюли с иконкой
§5 — контакты: SVG-иконки вместо emoji
§6 — кнопка «Наверх»: круглый Primary CTA
§7 — мобильные брейкпоинты
§8 — reduced-motion
============================================================================ */
/* ──────────────────────────────────────────────────────────────────────── *
* §1. Базовые иконки (SVG-mask). Используются во всех секциях ниже.
* Префикс .fe-ico-* — изолирован от .lk-ico-*, чтобы не конфликтовать
* с lk-components.css §11/§12 шапки и L2-страниц.
* ──────────────────────────────────────────────────────────────────────── */
[class*="fe-ico-"] {
display: inline-block;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.fe-ico-shield-check {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.fe-ico-journal-text {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.fe-ico-people {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.fe-ico-award {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.fe-ico-envelope-paper {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.fe-ico-geo-alt-fill {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.fe-ico-telephone-fill {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.fe-ico-headset {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.fe-ico-envelope-fill {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.fe-ico-telegram {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.fe-ico-vk {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.fe-ico-music-note {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.fe-ico-archive {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.fe-ico-arrow-up {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* ──────────────────────────────────────────────────────────────────────── *
* §2. Заголовки колонок: тонкая иконка слева. Делается через ::before на
* селекторе .footer__content .f-content__col-title — чтобы НЕ затронуть
* заголовки на других страницах сайта (классы общеупотребимы).
* ──────────────────────────────────────────────────────────────────────── */
.footer .footer__content .f-content__col-title,
.footer .footer__content .f-content__col-title--second-in-col {
display: flex;
align-items: center;
gap: 8px;
line-height: 1.25;
}
.footer .footer__content .f-content__col-title::before,
.footer .footer__content .f-content__col-title--second-in-col::before {
content: "";
width: 18px;
height: 18px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
opacity: .9;
}
/* «О палате» — щит */
.footer .f-content__col--first > .f-content__col-title::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* «Документы» — журнал */
.footer .f-content__col--second > .f-content__col-title::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* «Претендентам» — люди */
.footer .f-content__col--third > .f-content__col-title:not(.f-content__col-title--second-in-col)::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* «Адвокаты палаты» (sub-title) — награда */
.footer .f-content__col-title--second-in-col::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* «Контактная информация» — конверт */
.footer .f-content__col--cont > .f-content__col-title::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* ──────────────────────────────────────────────────────────────────────── *
* §3. Колонки: hover-lift translateY(-2px) + soft shadow.
* Не трогает базовый layout, только визуальная микро-интеракция.
* ──────────────────────────────────────────────────────────────────────── */
.footer .footer__content .f-content__col {
transition: transform 180ms ease, box-shadow 180ms ease;
border-radius: 8px;
}
.footer .footer__content .f-content__col:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
}
/* Контактная колонка имеет свой синий фон через legacy CSS — у её hover'а
shadow заменяем на чуть более тёмный, чтобы было видно на синем. */
.footer .footer__content .f-content__col--cont:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
/* ──────────────────────────────────────────────────────────────────────── *
* §4. Соцсети — пилюли с иконкой и brand-color hover.
* Оставляем текстовый label (Telegram / ВК АПМО / …), просто оборачиваем
* ссылки в pill-стиль. В legacy footer_content.php разметка такая:
*
* ──────────────────────────────────────────────────────────────────────── */
.footer .footer-social,
.footer__bottom .footer-social {
display: inline-flex;
flex-wrap: wrap;
gap: 8px;
margin-right: 0;
}
.footer .footer-social a,
.footer__bottom .footer-social a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
margin-right: 0 !important; /* перебиваем margin-right из legacy */
border-radius: 999px;
background: rgba(255, 255, 255, .9);
border: 1px solid rgba(15, 23, 42, .08);
color: #003366;
text-decoration: none !important;
font-weight: 500;
font-size: 13px;
line-height: 1;
transition: background-color 180ms, color 180ms, transform 180ms, border-color 180ms;
}
.footer .footer-social a:hover,
.footer__bottom .footer-social a:hover,
.footer .footer-social a:focus,
.footer__bottom .footer-social a:focus {
transform: translateY(-1px);
text-decoration: none !important;
}
/* Иконка ::before через SVG-mask (currentColor — чтобы наследовать hover-цвет) */
.footer .footer-social a::before,
.footer__bottom .footer-social a::before {
content: "";
width: 14px;
height: 14px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Telegram — бирюзово-голубой */
.footer .footer-social a[href*="t.me"]::before,
.footer__bottom .footer-social a[href*="t.me"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.footer .footer-social a[href*="t.me"]:hover,
.footer__bottom .footer-social a[href*="t.me"]:hover {
background: #0088cc;
color: #ffffff;
border-color: #0088cc;
}
/* ВКонтакте */
.footer .footer-social a[href*="vk.com"]::before,
.footer__bottom .footer-social a[href*="vk.com"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.footer .footer-social a[href*="vk.com"]:hover,
.footer__bottom .footer-social a[href*="vk.com"]:hover {
background: #0077FF;
color: #ffffff;
border-color: #0077FF;
}
/* Яндекс.Музыка */
.footer .footer-social a[href*="music.yandex"]::before,
.footer__bottom .footer-social a[href*="music.yandex"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.footer .footer-social a[href*="music.yandex"]:hover,
.footer__bottom .footer-social a[href*="music.yandex"]:hover {
background: #FFCC00;
color: #1a1a1a;
border-color: #FFCC00;
}
/* Веб-музей АПМО */
.footer .footer-social a[href*="apmo.online"]::before,
.footer__bottom .footer-social a[href*="apmo.online"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.footer .footer-social a[href*="apmo.online"]:hover,
.footer__bottom .footer-social a[href*="apmo.online"]:hover {
background: #6c47ff;
color: #ffffff;
border-color: #6c47ff;
}
/* footer-links: «Все контакты», «Схема проезда» — оставляем как обычные ссылки,
только поднимаем читаемость и hover-фон */
.footer__bottom .footer-links a {
color: #003366;
border-bottom: 1px dotted #003366;
text-decoration: none !important;
margin-right: 12px;
transition: color 180ms, border-color 180ms;
}
.footer__bottom .footer-links a:hover {
color: #0056a6;
border-bottom-color: #0056a6;
}
/* ──────────────────────────────────────────────────────────────────────── *
* §5. Контакты — заменяем emoji-иконки на SVG-mask без правки PHP.
* В footer_contacts.php есть структура:
*
* Скрываем .contact-icon и рисуем нашу иконку через ::before на .contact-line.
* Используем :nth-of-type — порядок строк фиксирован: address, phone1, phone2, email.
* ──────────────────────────────────────────────────────────────────────── */
.footer__card--contacts .contact-line {
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
.footer__card--contacts .contact-line .contact-icon {
display: none !important; /* эмодзи скрываем */
}
.footer__card--contacts .contact-line::before {
content: "";
width: 16px;
height: 16px;
flex-shrink: 0;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
opacity: .9;
}
/* 1: адрес → geo-alt */
.footer__card--contacts .contact-line:nth-of-type(1)::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* 2: телефон 1 → telephone-fill */
.footer__card--contacts .contact-line:nth-of-type(2)::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* 3: телефон 2 → headset (ЕЦ-СЮП) */
.footer__card--contacts .contact-line:nth-of-type(3)::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* 4: email → envelope-fill */
.footer__card--contacts .contact-line:nth-of-type(4)::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* ──────────────────────────────────────────────────────────────────────── *
* §6. Кнопка «Наверх» — обновляем визуал.
* Legacy `.totop span` управляется JS из footer.php через jQuery fadeIn/Out.
* JS НЕ трогаем, только перерисуем span как круглый Primary CTA с SVG-стрелкой.
* ──────────────────────────────────────────────────────────────────────── */
.totop {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 100;
}
.totop span {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #0056a6;
color: #ffffff;
border-radius: 50%;
cursor: pointer;
font-size: 0; /* скрываем текстовый «Наверх» */
box-shadow: 0 4px 12px rgba(0, 86, 166, .35);
transition: background-color 180ms, transform 180ms, box-shadow 180ms;
-webkit-tap-highlight-color: transparent;
}
.totop span::before {
content: "";
width: 22px;
height: 22px;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.totop span:hover,
.totop span:focus {
background: #003366;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 86, 166, .45);
outline: none;
}
/* ──────────────────────────────────────────────────────────────────────── *
* §7. Мобильные брейкпоинты. Не ломаем layout, только тонкие правки.
* ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
.footer .footer-social,
.footer__bottom .footer-social {
gap: 6px;
}
.footer .footer-social a,
.footer__bottom .footer-social a {
font-size: 12px;
padding: 5px 10px;
}
}
@media (max-width: 767px) {
.footer .footer__content .f-content__col:hover {
transform: none;
box-shadow: none;
}
.totop {
right: 12px;
bottom: 12px;
}
.totop span {
width: 44px;
height: 44px;
}
.totop span::before {
width: 20px;
height: 20px;
}
}
/* ──────────────────────────────────────────────────────────────────────── *
* §8. Reduced-motion preference
* ──────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.footer .footer__content .f-content__col,
.footer .footer-social a,
.footer__bottom .footer-social a,
.totop span {
transition: none;
}
.footer .footer__content .f-content__col:hover,
.footer .footer-social a:hover,
.footer__bottom .footer-social a:hover,
.totop span:hover {
transform: none;
}
}