/** * Шапка и футер сайта (модуль site-chrome). * Подключается через include/site-chrome.php → site_chrome_styles_once() * или явной ссылкой в (тогда задайте $GLOBALS['site_chrome_css_injected'] = true). */ .site-chrome { width: 100%; max-width: 100%; box-sizing: border-box; } .site-chrome--header { display: block; position: relative; z-index: 1; flex-shrink: 0; } /* * Вне главной — как .index-top-sticky: липкость на обёртке. У самого .header стоит * overflow:hidden (контент строки); в части WebKit это мешает sticky на самом header. */ body:not(.page-index) .site-chrome--header { position: -webkit-sticky; position: sticky; top: 0; z-index: 1000; background: var(--card); align-self: flex-start; width: 100%; } body:not(.page-index) .site-chrome--header .header { position: relative; top: auto; z-index: auto; } .site-chrome--footer { display: block; margin-top: auto; flex-shrink: 0; /* Палитра футера: заголовки и ссылки колонок — один приглушённый цвет; hover — акцент (синий) */ --sf-bg: #1a1a2e; --sf-text: #c4c9d4; --sf-heading: #9ca3af; --sf-link-hover: var(--primary, #005bff); --sf-muted: #9099b0; --sf-border: rgba(255, 255, 255, 0.12); } [data-theme="dark"] .site-chrome--footer { --sf-bg: #10121a; --sf-text: #c8cedd; --sf-heading: #a8b4d0; --sf-link-hover: var(--primary, #4d9aff); --sf-muted: #8f97ac; --sf-border: rgba(255, 255, 255, 0.1); } /* Футер */ .site-chrome .site-footer { background: var(--sf-bg) !important; color: var(--sf-text) !important; padding: 40px 0 20px; margin-top: 40px; } .site-chrome .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; margin-bottom: 24px; } .site-chrome .footer-col { display: flex; flex-direction: column; gap: 8px; } .site-chrome .footer-col h4 { color: var(--sf-heading) !important; font-size: 0.9rem; margin: 0 0 4px; font-weight: 600; } .site-chrome .footer-col a { color: var(--sf-heading) !important; font-size: 0.85rem; text-decoration: none !important; transition: color 0.2s; } .site-chrome .footer-col a:hover { color: var(--sf-link-hover) !important; text-decoration: none !important; } .site-chrome .footer-col a:focus-visible { outline: 2px solid var(--sf-link-hover); outline-offset: 2px; } /* Ссылка в строке копирайта (название магазина) — синяя, как основные ссылки сайта */ .site-chrome .footer-bottom a { color: var(--primary, #005bff) !important; text-decoration: none !important; transition: color 0.2s; } .site-chrome .footer-bottom a:hover { color: var(--primary-hover, #0050e0) !important; text-decoration: underline !important; } .site-chrome .footer-bottom { border-top: 1px solid var(--sf-border) !important; padding-top: 16px; text-align: center; font-size: 0.82rem; color: var(--sf-muted) !important; } .site-chrome .footer-other-wrap { display: flex; flex-direction: column; gap: 8px; } .site-chrome .footer-other-hidden { display: none; flex-direction: column; gap: 8px; } .site-chrome .footer-other-wrap.open .footer-other-hidden { display: flex; } .site-chrome .footer-other-toggle { background: none; border: none; color: var(--sf-heading) !important; font-size: 0.85rem; cursor: pointer; padding: 4px 0; text-align: left; transition: color 0.2s; } .site-chrome .footer-other-toggle:hover { color: var(--sf-link-hover) !important; } /* Мобильный: контент футера уже общего .container — 95% ширины экрана, отступы по бокам */ @media (max-width: 768px) { .site-chrome .site-footer > .container { width: 95%; max-width: 95%; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; box-sizing: border-box; } }