/* ===== Токены ===== Приглушённая серо-голубая палитра (по просьбе пользователя — "менее яркие цвета, построже, серые, серо-голубые, с тенями, с границами еле различимыми"): вместо бирюзы/золота (v2) — сдержанный serye-синий основной цвет и такой же приглушённый вторичный, без насыщенных пятен; различие между блоками теперь в основном держится на мягкой тени (--shadow/--shadow-hover), а не на контрастной границе — --line специально очень близок к --bg. */ :root { --brand: #56697c; --brand-dark: #1e2530; --accent: #97a3b0; --accent-dark: #71808f; --ink: #2a3542; --ink-soft: #74808d; --line: #e4e7ea; --bg: #f4f5f6; --card-bg: #ffffff; --success: #5f7a68; --error: #a15d56; --radius: 4px; --radius-lg: 6px; --shadow: 0 1px 2px rgba(30, 41, 54, 0.05), 0 1px 1px rgba(30, 41, 54, 0.04); --shadow-hover: 0 10px 26px rgba(30, 41, 54, 0.12); --container-w: 1360px; --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-main); color: var(--ink); background: var(--bg); line-height: 1.5; } button, input, select, textarea { font-family: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; } p { margin: 0 0 1em; } ul { margin: 0; padding: 0; list-style: none; } .container { max-width: var(--container-w); margin: 0 auto; padding: 0 20px; } /* ===== Кнопки ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--radius); font-weight: 600; font-size: .95rem; padding: 12px 22px; cursor: pointer; border: 1.5px solid transparent; transition: all .15s ease; text-align: center; } .btn-primary { background: var(--brand); color: #fff; } .btn-primary:hover { background: #465666; } .btn-outline { background: transparent; border-color: var(--brand-dark); color: var(--brand-dark); } .btn-outline:hover { background: var(--brand-dark); color: #fff; } .btn-text { background: transparent; color: var(--ink-soft); border: none; } .btn-text:hover { color: var(--brand); } .btn-large { padding: 15px 28px; font-size: 1.05rem; } .btn-small { padding: 8px 16px; font-size: .85rem; } .btn-block { width: 100%; } /* ===== Header ===== */ .site-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; } .header-bar { background: var(--brand-dark); color: #b9c4d4; font-size: .8rem; display: flex; align-items: center; justify-content: space-between; padding: 7px 20px; gap: 12px; flex-wrap: wrap; } .header-bar a { color: #fff; font-weight: 600; } .header-inner { display: flex; align-items: center; gap: 20px; height: 64px; } .logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--brand-dark); letter-spacing: -.01em; } .logo-icon { color: var(--brand); display: inline-flex; } .logo-icon img { display: block; } .logo-text-accent { color: var(--brand); } .header-contacts { display: flex; align-items: center; gap: 12px; margin-left: auto; } .header-phone { font-weight: 700; color: var(--ink); white-space: nowrap; } .header-nav-strip { background: var(--bg); border-bottom: 1px solid var(--line); } .main-nav { display: flex; gap: 6px; max-width: var(--container-w); margin: 0 auto; padding: 0 20px; } .main-nav a { font-weight: 600; font-size: .88rem; color: var(--ink-soft); padding: 11px 16px; border-bottom: 2.5px solid transparent; } .main-nav a:hover, .main-nav a.active { color: var(--brand-dark); border-color: var(--brand); } /* "Позвонить"/"Оставить заявку" (templates/header.php, сосед