/* chrome.css — ЕДИНЫЙ источник стилей шапки и подвала для ВСЕХ страниц. Подключается последним в → выигрывает каскад над локальными правилами. Токены (--accent и т.д.) берутся из :root страницы (style.css / country.css / inline). Правишь здесь → меняется на всех 85 страницах. */ /* ===== HEADER ===== */ .site-header { background: var(--bg); border-bottom: 1px solid var(--border); padding: 0 24px; position: sticky; top: 0; z-index: 100; } .site-header__inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; height: 64px; gap: 24px; } .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex-shrink: 0; } .logo-icon { width: 32px; height: 32px; flex-shrink: 0; } .logo-text { font-size: 12px; font-weight: 800; letter-spacing: -0.4px; line-height: 1; } .logo-text em { color: var(--accent); font-style: normal; } .logo-tagline { font-size: 11px; color: var(--text-muted); font-weight: 400; margin-top: 2px; letter-spacing: 0; } .header-nav { display: flex; gap: 4px; } .header-nav a { font-size: 14px; color: var(--text-muted); text-decoration: none; padding: 6px 12px; border-radius: 8px; transition: color .15s, background .15s; } .header-nav a:hover { color: var(--text); background: var(--bg-soft); } .header-sep { flex: 1; } .header-cta { background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 8px; text-decoration: none; transition: background .15s; white-space: nowrap; } .header-cta:hover { background: var(--accent-dark); } /* Переключатель языков (только у переводных страниц) */ .lang-switcher { display: flex; gap: 4px; align-items: center; } .lang-switcher a { font-size: 13px; text-decoration: none; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--border); color: var(--text-muted); transition: color .15s, background .15s, border-color .15s; white-space: nowrap; } .lang-switcher a:hover { color: var(--text); background: var(--bg-soft); } .lang-switcher a.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; pointer-events: none; } /* ===== FOOTER (горизонтальный ряд — единый) ===== */ .site-footer { background: var(--text); padding: 40px 24px; color: rgba(255,255,255,0.5); font-size: 13px; } .site-footer__inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer-logo { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -0.3px; } .footer-logo em { color: var(--accent); font-style: normal; } .footer-links { display: flex; gap: 20px; flex-wrap: wrap; } .footer-links a { color: rgba(255,255,255,0.5); text-decoration: none; transition: color .15s; } .footer-links a:hover { color: #fff; } .footer-payments { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 4px 0; } .footer-copy { color: rgba(255,255,255,0.35); font-size: 12px; text-align: center; width: 100%; } .footer-copy a { color: inherit; text-decoration: none; } .pay-badge { display: inline-flex; align-items: center; justify-content: center; height: 26px; border-radius: 5px; font-size: 11px; font-weight: 800; letter-spacing: .3px; padding: 0 8px; text-decoration: none; white-space: nowrap; } .pay-visa { background: #1A1F71; color: #fff; font-style: italic; font-size: 13px; letter-spacing: 1px; } .pay-mc { background: #fff; padding: 0 6px; gap: 0; position: relative; } .pay-mc__left { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #EB001B; } .pay-mc__right { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #F79E1B; margin-left: -6px; } .pay-mir { background: #00A64B; color: #fff; } .pay-tbank { background: #FFDD2D; color: #333; font-weight: 900; font-size: 11px; } /* ===== Адаптив ===== */ @media (max-width: 640px) { .header-nav { display: none; } .logo-tagline { display: none; } .site-header__inner { height: 56px; gap: 12px; } } @media (max-width: 768px) { .site-footer__inner { justify-content: center; text-align: center; } .footer-links { justify-content: center; } .footer-payments { justify-content: center; } }