/* Стили блога ФотоНабора. Отдельный файл: главная (index.html) держит стили внутри себя ради быстрой первой отрисовки, а блогу лишний запрос не страшен — зато один файл на все статьи, и правка цвета не расползается по 6 страницам. Цвета заданы переменными и продублированы для тёмной темы: сайт переключается тумблером (ключ pn_theme в памяти браузера, атрибут data-theme на ), и статьи обязаны переключаться вместе с ним, иначе переход из блога на главную бьёт по глазам. Умолчание — СВЕТЛАЯ тема (решение владельца 16.08.2026), как и на главной. Медиазапрос prefers-color-scheme отсюда убран: статья больше не темнеет сама от настройки телефона, тёмная включается только тумблером. */ :root { --blue: #5B4BFF; --blue-ink: #3A2FD6; --amber: #F59E0B; --ink: #141A2E; --body: #344054; --muted: #5B6580; --faint: #98A2B3; --ground: #FFFFFF; --card: #FFFFFF; --line: #E7ECF5; --soft: #F7F9FC; --sans: 'Onest', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } :root[data-theme="dark"] { --blue: #8B7CFF; --blue-ink: #A99BFF; --amber: #FBBF24; --ink: #EAEDF7; --body: #C3C9DB; --muted: #9AA3BC; --faint: #6E7794; --ground: #0E1120; --card: #161B2E; --line: #262C44; --soft: #131829; } * { box-sizing: border-box; } /* ⚠️ Писать «light dark» сюда НЕЛЬЗЯ. При такой записи браузер берёт цвет текста по умолчанию от СИСТЕМЫ, и у человека с тёмной системой на нашей светлой странице текст становится белым по белому. На главной эту ловушку уже обезвредили 15.08.2026, в блоге она оставалась. Схема должна повторять тему САЙТА, а не системы. */ :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } body { margin: 0; background: var(--ground); color: var(--body); font-family: var(--sans); line-height: 1.7; font-size: 16px; -webkit-font-smoothing: antialiased; } .wrap { max-width: 760px; margin: 0 auto; padding: 26px 20px 80px; } .wrap.wide { max-width: 1060px; } /* Шапка: логотип слева, возврат на сайт справа — как на юридических страницах */ .top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; } .top-logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; color: var(--ink); text-decoration: none; letter-spacing: -.3px; } .top-mark { position: relative; width: 22px; height: 22px; flex: none; } .top-mark i { position: absolute; top: 3px; width: 13px; height: 16px; border-radius: 4px; display: block; } .top-mark i:first-child { left: 0; background: var(--blue); } .top-mark i:last-child { left: 6px; background: var(--amber); opacity: .92; } .top-back { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; } .top-back:hover { color: var(--ink); } .crumbs { font-size: 13px; color: var(--faint); margin-bottom: 14px; } .crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--blue-ink); } .kicker { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; } h1 { font-size: 32px; line-height: 1.22; letter-spacing: -.7px; color: var(--ink); margin: 0 0 12px; } h2 { font-size: 21px; line-height: 1.3; letter-spacing: -.3px; color: var(--ink); margin: 38px 0 10px; } h3 { font-size: 17px; line-height: 1.35; color: var(--ink); margin: 26px 0 8px; } p { margin: 0 0 14px; } a { color: var(--blue-ink); } ul, ol { padding-left: 22px; margin: 0 0 16px; } li { margin-bottom: 7px; } strong, b { color: var(--ink); } .meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--faint); margin-bottom: 24px; } .lead { font-size: 17.5px; line-height: 1.6; color: var(--ink); margin-bottom: 26px; } /* Заметка на полях: без серой заливки — на этом сайте серых подложек не делаем, отделяем цветной чертой слева (правило владельца от 11.08.2026). */ .note { border-left: 3px solid var(--blue); padding: 2px 0 2px 16px; margin: 22px 0; color: var(--body); } .note b { color: var(--ink); } /* Таблица (размеры, форматы). На узком экране прокручивается внутри себя, страница целиком вбок не едет. */ .tbl-wrap { overflow-x: auto; margin: 20px 0; } table { border-collapse: collapse; width: 100%; font-size: 14.5px; min-width: 420px; } th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); } th { color: var(--ink); font-weight: 700; white-space: nowrap; } td { color: var(--body); } /* Призыв к действию — единственный цветной блок в статье */ .cta { border: 1px solid var(--line); border-radius: 16px; padding: 24px; margin: 32px 0; text-align: center; background: radial-gradient(80% 120% at 50% -20%, rgba(91,75,255,.10), transparent 70%); } .cta h3 { margin: 0 0 6px; font-size: 19px; } .cta p { color: var(--muted); margin-bottom: 16px; font-size: 15px; } .cta-btn { display: inline-block; background: var(--blue); color: #fff; text-decoration: none; padding: 12px 26px; border-radius: 999px; font-weight: 700; font-size: 15px; box-shadow: 0 10px 24px -10px rgba(91,75,255,.7); transition: transform .18s, box-shadow .18s; } .cta-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(91,75,255,.8); color: #fff; } /* Список статей */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 26px; } .card { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); transition: transform .22s, box-shadow .22s, border-color .22s; } .card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px -22px rgba(20,26,46,.5); border-color: var(--blue); } /* Обложка рисуется стилями, а не картинкой: 6 файлов по 200 КБ ради заголовка грузили бы список дольше, чем он того стоит. Значок — символ инструмента. */ /* Плашка статьи. Раньше здесь стоял значок эмодзи на градиенте — теперь настоящая обложка (blog/covers/, рисует scripts/make-blog-covers.mjs). Градиент оставлен фоном: он виден, пока картинка грузится, и заменяет её, если она не дошла. */ /* ⚠️ height: auto здесь обязателен. В разметке у картинки стоят width="1200" height="630" — они нужны, чтобы место под неё занялось сразу и текст не прыгал. Но без height: auto браузер берёт высоту ИЗ АТРИБУТА, то есть 630 px: плашка вытягивается на пол-экрана, а object-fit вырезает из обложки середину. Проверено глазами 22.08.2026 — выглядело как сломанная вёрстка. */ .card-cover { aspect-ratio: 16/9; display: block; width: 100%; height: auto; object-fit: cover; font-size: 42px; background: linear-gradient(135deg, #4B34E8, #7A2FE0 52%, #00A8C7); } /* Обложка в самой статье. Размеры проставлены в разметке, поэтому место под неё занимается сразу и текст не прыгает, пока картинка догружается. */ .cover { display: block; width: 100%; height: auto; border-radius: 16px; margin: 22px 0 4px; background: linear-gradient(135deg, #4B34E8, #7A2FE0 52%, #00A8C7); } .card-body { padding: 16px 18px 20px; } .card-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; } .card h2 { font-size: 17.5px; margin: 0 0 6px; line-height: 1.3; } .card p { color: var(--muted); font-size: 14px; margin: 0; line-height: 1.55; } /* Переход к соседним статьям */ .post-nav { display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14.5px; } .post-nav a { text-decoration: none; } .post-nav a:hover { text-decoration: underline; } .foot { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; } .foot a { color: var(--muted); text-decoration: none; } .foot a:hover { color: var(--blue-ink); } @media (max-width: 560px) { h1 { font-size: 26px; } h2 { font-size: 19px; } .lead { font-size: 16.5px; } .wrap { padding: 20px 16px 60px; } }