/* Оформление контентных страниц HeatCalc: города, смета, статьи. * * Один файл на все 23 страницы — правка стиля делается здесь, а не в каждой. * * Палитра, шрифт, радиусы и кривые анимации взяты из style.css калькулятора, * чтобы статьи не выглядели чужим сайтом. Имена переменных те же намеренно: * если в калькуляторе поменяют цвет, здесь будет видно, что менять. * * Тёмная тема — общий флаг с калькулятором: localStorage['stout_save'].darkMode. * Переключил на статье — переключилось и в калькуляторе, и наоборот. Тот же * приём уже используется на странице рейтинга. Класс dark-mode вешается * на инлайн-скриптом в (в калькуляторе он на , но там * скрипт работает после загрузки; здесь класс нужен до первой отрисовки, * иначе тёмная страница моргает белым, а в этот момент ещё нет). */ :root { --primary: #2563EB; --primary-light: #EFF6FF; --bg: #F3F4F6; --surface: #FFFFFF; --surface-light: #F9FAFB; --text-main: #111827; --text-sec: #6B7280; --border: #E5E7EB; --radius: 12px; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --dur-fast: 150ms; --dur-base: 250ms; --measure: 760px; color-scheme: light; } html.dark-mode { --bg: #000000; --surface: #121212; --surface-light: #1E1E1E; --text-main: #F3F4F6; --text-sec: #9CA3AF; --border: #1E1E1E; --primary: #6366F1; --primary-light: rgba(99, 102, 241, 0.15); color-scheme: dark; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text-main); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.65; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .wrap { max-width: var(--measure); margin: 0 auto; padding: 0 20px; } /* ── Шапка ───────────────────────────────────────────────────────── */ header.top { background: var(--surface); border-bottom: 1px solid var(--border); padding: 14px 0; margin-bottom: 32px; } header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .logo { font-weight: 800; font-size: 18px; color: var(--text-main); text-decoration: none; letter-spacing: -0.02em; } .logo span { color: var(--primary); } .head-actions { display: flex; align-items: center; gap: 8px; } .head-link { font-size: 14px; font-weight: 600; color: #fff; background: var(--primary); text-decoration: none; border-radius: var(--radius); padding: 8px 14px; white-space: nowrap; transition: opacity var(--dur-fast) var(--ease-out); } .head-link:hover { opacity: 0.88; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; padding: 0; background: var(--surface-light); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-sec); cursor: pointer; line-height: 1; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .theme-toggle:hover { color: var(--primary); border-color: var(--primary); } .theme-toggle .i-sun { display: none; } .theme-toggle .i-moon { display: block; } html.dark-mode .theme-toggle .i-sun { display: block; } html.dark-mode .theme-toggle .i-moon { display: none; } /* ── Текст ───────────────────────────────────────────────────────── */ .crumbs { font-size: 13px; color: var(--text-sec); margin-bottom: 20px; } .crumbs a { color: var(--text-sec); text-decoration: none; } .crumbs a:hover { color: var(--primary); } h1 { font-size: 28px; line-height: 1.22; font-weight: 800; color: var(--text-main); letter-spacing: -0.02em; margin: 0 0 18px; } h2 { font-size: 20px; line-height: 1.3; font-weight: 800; color: var(--text-main); letter-spacing: -0.02em; margin: 36px 0 14px; } /* Как в калькуляторе: мелкий заголовок капителью, разрядка вместо кегля */ h3 { font-size: 15px; font-weight: 800; color: var(--text-main); text-transform: uppercase; letter-spacing: 0.03em; margin: 28px 0 10px; } p { margin: 0 0 16px; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } strong, b { color: var(--text-main); font-weight: 700; } .lead { font-size: 18px; line-height: 1.55; color: var(--text-main); margin-bottom: 22px; } ul, ol { margin: 0 0 16px; padding-left: 22px; } li { margin-bottom: 8px; } li::marker { color: var(--text-sec); } .note { font-size: 13px; line-height: 1.55; color: var(--text-sec); margin: 0 0 22px; } /* ── Таблицы ─────────────────────────────────────────────────────── */ .table-scroll { overflow-x: auto; margin: 0 0 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } table { width: 100%; border-collapse: collapse; margin: 0; font-size: 15px; } th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; } tr:last-child td { border-bottom: none; } th { font-weight: 700; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-sec); background: var(--surface-light); white-space: nowrap; } td { color: var(--text-main); } td.num { white-space: nowrap; font-variant-numeric: tabular-nums; } td.minus { color: #DC2626; font-weight: 700; } html.dark-mode td.minus { color: #F87171; } td strong { color: var(--primary); } /* ── Кнопка-призыв ───────────────────────────────────────────────── */ .cta { display: block; background: var(--primary); color: #fff; text-decoration: none; text-align: center; font-weight: 700; font-size: 16px; padding: 15px 24px; border-radius: var(--radius); margin: 28px 0; transition: opacity var(--dur-fast) var(--ease-out); } .cta:hover { opacity: 0.9; text-decoration: none; } .cta small { display: block; font-weight: 500; font-size: 13px; opacity: 0.85; margin-top: 3px; } /* ── Графики ─────────────────────────────────────────────────────── */ /* Рисуются прямо в разметке как inline SVG: ни одного запроса к серверу, цвета берутся из тех же переменных, поэтому график сам переключается вместе с темой. Данные — из справочников проекта, не из головы. */ .chart { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin: 0 0 12px; } .chart svg { display: block; width: 100%; height: auto; font-family: inherit; } .chart-title { font-size: 13px; font-weight: 700; color: var(--text-main); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 14px; } .chart + .note { margin-top: -2px; } @media (max-width: 600px) { .chart { padding: 14px; } .chart-title { font-size: 12px; margin-bottom: 10px; } } /* ── Врезки ──────────────────────────────────────────────────────── */ .callout { background: var(--primary-light); border-left: 3px solid var(--primary); border-radius: 0 var(--radius) var(--radius) 0; padding: 14px 18px; margin: 0 0 22px; font-size: 15px; } .callout p:last-child { margin-bottom: 0; } .formula { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; margin: 0 0 22px; font-size: 15px; } .formula p { margin: 0 0 12px; } .formula p:last-child { margin-bottom: 0; } .formula b { color: var(--primary); } /* ── Вопрос-ответ ────────────────────────────────────────────────── */ details { border-bottom: 1px solid var(--border); } details summary { cursor: pointer; font-weight: 700; font-size: 16px; color: var(--text-main); padding: 15px 0; list-style: none; display: flex; align-items: flex-start; gap: 12px; transition: color var(--dur-fast) var(--ease-out); } /* Иконка слева, вопрос занимает остаток строки, плюс прижат вправо */ .faq-icon { flex: none; margin-top: 3px; color: var(--primary); } .faq-q { flex: 1; } details summary:hover { color: var(--primary); } details summary::-webkit-details-marker { display: none; } details summary::after { content: '+'; color: var(--primary); font-size: 20px; font-weight: 500; line-height: 1.3; flex: none; } details[open] summary::after { content: '−'; } details .answer { padding: 0 0 18px; font-size: 15px; color: var(--text-main); } details .answer p:last-child { margin-bottom: 0; } /* ── Список городов на странице /goroda/ ─────────────────────────── */ .city-list { list-style: none; padding: 0; margin: 0 0 22px; } .city-list li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 8px; transition: border-color var(--dur-fast) var(--ease-out); } .city-list li:hover { border-color: var(--primary); } .city-list a { font-weight: 700; font-size: 16px; } .city-list .fact { font-size: 14px; color: var(--text-sec); margin-top: 3px; } /* ── Подвал ──────────────────────────────────────────────────────── */ footer.bottom { background: var(--surface); border-top: 1px solid var(--border); margin-top: 48px; padding: 22px 0 40px; font-size: 13px; color: var(--text-sec); } footer.bottom a { color: var(--text-sec); margin-right: 16px; display: inline-block; } footer.bottom a:hover { color: var(--primary); } footer.bottom p { margin: 0 0 10px; } footer.bottom p:last-child { margin-bottom: 0; } /* ── Доступность ─────────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ── Узкие экраны ────────────────────────────────────────────────── */ @media (max-width: 600px) { .wrap { padding: 0 16px; } header.top { margin-bottom: 24px; } h1 { font-size: 24px; } h2 { font-size: 18px; margin: 30px 0 12px; } .lead { font-size: 17px; } .head-link { display: none; } th, td { padding: 10px 12px; } table { font-size: 14px; } .cta { padding: 14px 20px; font-size: 15px; } } /* ── Печать ──────────────────────────────────────────────────────── */ @media print { body { background: #fff; color: #000; } .cta, .theme-toggle, .head-link { display: none; } a { color: #000; } header.top, footer.bottom { background: none; } }