/* ============================================================ Библиотека нейросетей — оформление Журнальная типографика: без скруглений, без теней, вся структура держится на линейках и наборе. Правится вручную, пересборка не нужна. ============================================================ */ /* fonts.css подключается отдельной строкой в — с отпечатком версии в адресе. Через @import он грузился бы без версии (и только после того, как доедет этот файл), а значит, мог зависнуть в кэше на сутки. */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Скрытое скрыто. Браузер прячет [hidden] правилом display: none из своей таблицы стилей, но любое наше display в классе его перебивает — так кнопка «Сохранённые» (у неё .nav-item с display: flex) оставалась видна в журнале, хотя скрипт честно ставил hidden. */ [hidden] { display: none !important; } :root { --bg: #fbfaf9; --bg-hover: #f3f1ed; --ink: #111114; --ink-2: #2c2a25; --text: #4b4740; --text-2: #57534b; /* Лестница серых. Обе темы держат одни и те же ступени контраста к фону: muted 6.3 — muted-2 5.1 — faint 4.6 — faint-3 3.0. Всё, что несёт текст, не опускается ниже 4.5; faint-3 — только для линеек, разделителей и порядковых номеров, текстом его красить нельзя. */ --muted: #615d55; --muted-2: #6f6b64; --faint: #75726c; --faint-3: #959189; --rule: #e4e1db; --rule-ink: #111114; --accent: #3d2ee0; --overlay: rgba(17, 17, 20, 0.28); --display: 'Unbounded', system-ui, sans-serif; --body: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif; --gutter: 40px; --rail: 96px; --nav-w: 236px; } /* Тёмная тема в той же эстетике: тёплый near-black, те же линейки, акцент высветлен, чтобы держать контраст на тёмном фоне. Атрибут ставится на до отрисовки — так тёмная не мигает светлым. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --bg: #121211; --bg-hover: #1c1b19; --ink: #f6f4f0; --ink-2: #e6e3dd; --text: #c9c4ba; --text-2: #b6b1a7; --muted: #9a958b; --muted-2: #8a857c; --faint: #827d74; --faint-3: #646059; --rule: #2c2b27; --rule-ink: #f6f4f0; --accent: #9b8dff; --overlay: rgba(0, 0, 0, 0.6); } } html[data-theme="dark"] { --bg: #121211; --bg-hover: #1c1b19; --ink: #f6f4f0; --ink-2: #e6e3dd; --text: #c9c4ba; --text-2: #b6b1a7; --muted: #9a958b; --muted-2: #8a857c; --faint: #827d74; --faint-3: #646059; --rule: #2c2b27; --rule-ink: #f6f4f0; --accent: #9b8dff; --overlay: rgba(0, 0, 0, 0.6); } html { background: var(--bg); } body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.5; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--ink); } ::selection { background: var(--accent); color: var(--bg); } input::placeholder { color: var(--faint); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--bg); padding: 12px 20px; font-weight: 600; } .skip-link:focus { left: 0; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ---------- Шапка ---------- */ /* Название выключено по левому краю страницы — на одну вертикаль с подписью «Поиск» в строке ниже. Значок темы стоит на первой строке названия, справа: так у шапки одна горизонталь сверху и один левый край. */ .masthead { --title-size: clamp(34px, 4.4vw, 62px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 20px; padding: 24px var(--gutter) 24px; } .masthead-title { font-family: var(--display); font-weight: 800; font-size: var(--title-size); line-height: 0.9; letter-spacing: -0.045em; text-transform: uppercase; color: var(--ink); } .masthead-title a { color: inherit; } .masthead-title a:hover { color: var(--accent); } /* Значок центрируется по первой строке названия, а не по всему блоку из двух строк, — иначе он повисает между строк. Высота строки = кегль × 0.9. */ .masthead .theme-toggle { margin-top: max(0px, calc((var(--title-size) * 0.9 - var(--toggle-size)) / 2)); } /* Под названием — только счёт каталога. Обещание сайта («что работает из России, что требует VPN, сколько стоит») живёт в описании страницы: в выдаче поисковика и в превью ссылки оно нужно, а на самой странице спорило с заголовком. */ .masthead-meta { grid-column: 1 / -1; margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--muted-2); } /* ---------- Переключатель темы ---------- */ /* Значок вместо подписи: подпись занимала место в ряду фильтров и читалась как ещё один фильтр. Что нарисовано — солнце или месяц — решает CSS по выбранной теме, поэтому значок верен и до загрузки скрипта. */ .theme-toggle { --toggle-size: 34px; display: inline-flex; align-items: center; justify-content: center; width: var(--toggle-size); height: var(--toggle-size); padding: 0; cursor: pointer; background: none; border: 1px solid var(--rule); color: var(--muted-2); transition: color 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover { color: var(--ink); border-color: var(--rule-ink); } .theme-toggle svg { width: 17px; height: 17px; display: block; } /* Значок называет тему, в которую переключит: в светлой — месяц, в тёмной — солнце */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } html:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } html[data-theme="light"] .theme-toggle .icon-sun { display: none; } html[data-theme="light"] .theme-toggle .icon-moon { display: block; } /* ---------- Строка поиска и фильтров ---------- */ .toolbar { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr) auto; align-items: center; border-top: 1px solid var(--rule-ink); border-bottom: 1px solid var(--rule); } .toolbar-label { font-size: 12px; color: var(--faint); padding-left: var(--gutter); } /* Отступ слева — не для красоты: рамка фокуса уведена внутрь поля (см. ниже), а текст без отступа начинался ровно от края и оказывался под ней. */ .search-input { width: 100%; background: transparent; border: none; font-family: var(--display); font-weight: 400; font-size: 21px; letter-spacing: -0.03em; color: var(--ink); padding: 20px 12px 19px 16px; } /* Рамку убираем только по клику мышью: :focus-visible из общего блока выше перебивался бы здешним outline: none — специфичность равная, а это правило ниже по файлу. */ .search-input:focus:not(:focus-visible) { outline: none; } /* Поле во всю ширину полосы, поэтому рамку уводим внутрь — снаружи она ложится поверх подписи «Поиск» и упирается в края экрана. */ .search-input:focus-visible { outline-offset: -3px; } .toolbar-actions { display: flex; align-items: center; gap: 22px; padding: 0 var(--gutter) 0 24px; min-width: 0; } .filter-btn { border: none; background: none; padding: 6px 0 5px; cursor: pointer; font-family: var(--body); font-size: 14px; font-weight: 400; color: var(--muted-2); border-bottom: 2px solid transparent; white-space: nowrap; transition: color 0.15s ease; } .filter-btn:hover { color: var(--ink); } .filter-btn[aria-pressed="true"] { font-weight: 600; color: var(--ink); border-bottom-color: var(--accent); } /* ---------- Каркас ---------- */ .layout { display: grid; grid-template-columns: var(--nav-w) 1fr; align-items: start; } /* Без этого колонки грида растягиваются по содержимому (min-width: auto), и на узком экране лента разделов вместо своей прокрутки утаскивает вбок всю страницу. То же самое с рядом фильтров. */ .layout > * { min-width: 0; } .sidenav { position: sticky; top: 0; padding: 30px 24px 60px var(--gutter); } .tabs { display: flex; gap: 18px; margin-bottom: 30px; } .tab { border: none; background: none; padding: 0 0 4px; cursor: pointer; font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: -0.02em; color: var(--faint); border-bottom: 2px solid transparent; transition: color 0.15s ease; } .tab:hover { color: var(--ink); } .tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); } .nav-item { display: flex; width: 100%; gap: 12px; align-items: baseline; background: none; border: none; padding: 7px 0 6px; cursor: pointer; text-align: left; font-family: var(--body); font-size: 15px; font-weight: 400; color: var(--ink); transition: color 0.15s ease; } .nav-item:hover { color: var(--accent); } .nav-item[aria-current="true"] { color: var(--accent); font-weight: 600; } .nav-item span:first-child { flex: 1; } .nav-count { font-size: 12px; color: var(--faint); } .nav-fav { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--rule); } .main { min-height: 60vh; padding: 0 var(--gutter) 120px 0; } /* ---------- Разделы каталога ---------- */ .group { padding-top: 34px; } .group-head { display: grid; grid-template-columns: 60px 1fr; align-items: baseline; padding-bottom: 10px; } .group-num { font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--accent); } .group-title { font-family: var(--display); font-size: 25px; font-weight: 600; letter-spacing: -0.04em; text-transform: uppercase; color: var(--ink); } /* Левый рельс держит выключку с номером раздела: колонки под номер строки больше нет, но начало названий совпадает с началом заголовка. */ .row { display: grid; grid-template-columns: minmax(140px, 0.9fr) minmax(0, 1.6fr) 168px; align-items: baseline; padding: 15px 0 14px 60px; border-top: 1px solid var(--rule); color: inherit; transition: background-color 0.12s ease; } .row:hover { background: var(--bg-hover); color: inherit; } /* Названия сервисов набраны заголовочным шрифтом — той же гарнитурой, что логотип и названия разделов. Unbounded шире Golos, поэтому кегль ниже. */ .row-name { font-family: var(--display); font-size: 16px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.25; color: var(--ink); } /* Две строки вместо одной: в одну влезала едва половина описания. Высота строк каталога из-за этого гуляет — так и задумано. */ .row-desc { font-size: 14px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-right: 20px; } /* Пометки. Акцентом красится то, что потребует от читателя усилий: деньги или VPN. «Бесплатно» и доступность из РФ остаются серыми — там делать нечего, и подсвечивать нечего. */ .row-tags { font-size: 13px; color: var(--muted); } .tag-paid, .tag-vpn { color: var(--accent); } .empty { font-size: 15px; color: var(--faint); padding: 90px 0 0 60px; } .empty button { display: block; margin-top: 16px; background: none; border: none; padding: 0; font-family: var(--body); font-size: 15px; color: var(--accent); cursor: pointer; border-bottom: 1px solid currentColor; } /* ---------- Журнал ---------- */ .journal { max-width: 760px; padding-top: 34px; } .post-item { display: grid; grid-template-columns: 60px 1fr; border-top: 1px solid var(--rule); padding: 24px 0 26px; color: inherit; text-align: left; width: 100%; transition: background-color 0.12s ease; } .post-item:hover { background: var(--bg-hover); color: inherit; } .post-type { font-size: 12px; color: var(--accent); padding-top: 6px; } /* Заголовок, анонс и дата — теги : внутри ссылки блочных элементов быть не может. Строчным вертикальные отступы не действуют, поэтому все три строки слипались в один абзац — переводим их в блоки. */ .post-title, .post-preview, .post-date { display: block; } .post-title { font-family: var(--display); font-size: 25px; font-weight: 600; line-height: 1.14; letter-spacing: -0.04em; color: var(--ink); margin-bottom: 12px; } .post-preview { font-size: 16px; line-height: 1.5; color: var(--text-2); margin-bottom: 14px; text-wrap: pretty; } .post-date { font-size: 13px; color: var(--faint); } /* ---------- Выдвижная панель ---------- */ .drawer-overlay { position: fixed; inset: 0; background: var(--overlay); z-index: 40; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .drawer-overlay.open { opacity: 1; visibility: visible; } .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 92vw; background: var(--bg); border-left: 1px solid var(--rule-ink); z-index: 41; padding: 26px 38px 60px; overflow-y: auto; transform: translateX(100%); visibility: hidden; transition: transform 0.22s ease, visibility 0.22s ease; } .drawer.open { transform: translateX(0); visibility: visible; } .drawer.wide { width: 580px; max-width: 94vw; padding: 26px 44px 70px; } .drawer-close { background: none; border: none; cursor: pointer; font-family: var(--body); font-size: 14px; color: var(--faint); padding: 0 0 30px; } .drawer-close:hover { color: var(--accent); } .drawer-kicker { font-size: 13px; color: var(--accent); margin-bottom: 10px; } .drawer-title { font-family: var(--display); font-size: 38px; font-weight: 600; line-height: 1.0; letter-spacing: -0.05em; margin-bottom: 22px; color: var(--ink); } .drawer-title.post { font-size: 34px; line-height: 1.08; letter-spacing: -0.045em; } .drawer-text { font-size: 17px; line-height: 1.55; color: var(--ink-2); margin-bottom: 28px; text-wrap: pretty; } .facts { font-size: 14px; color: var(--text); } .fact { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-top: 1px solid var(--rule); } .fact:last-child { border-bottom: 1px solid var(--rule); } .fact-key { color: var(--faint); } .fact-val { text-align: right; } .checked-note { font-size: 13px; color: var(--faint); margin-top: 16px; } .cta { display: inline-block; margin-top: 30px; background: var(--accent); color: var(--bg); font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: -0.02em; padding: 14px 24px; transition: background-color 0.15s ease; } .cta:hover { background: var(--ink); color: var(--bg); } /* Сохранение живёт в карточке сервиса, а не в строке каталога: в строке квадрат стоял без подписи и отвлекал, здесь он подписан словом. */ .drawer-actions, .page-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 30px; } .drawer-actions .cta, .page-actions .cta { margin-top: 0; } .fav-toggle { display: inline-flex; align-items: center; gap: 10px; background: none; border: 1px solid var(--rule-ink); color: var(--ink); cursor: pointer; font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: -0.02em; padding: 13px 20px; transition: color 0.15s ease, border-color 0.15s ease; } .fav-toggle::before { content: ''; width: 11px; height: 11px; flex: 0 0 auto; border: 1px solid currentColor; transition: background-color 0.12s ease; } .fav-toggle:hover { color: var(--accent); border-color: var(--accent); } .fav-toggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); } .fav-toggle[aria-pressed="true"]::before { background: var(--accent); } .drawer-links { margin-top: 22px; font-size: 14px; display: flex; gap: 20px; flex-wrap: wrap; } .drawer-links button { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--body); font-size: 14px; color: var(--accent); } .drawer-links button:hover { color: var(--ink); } .article-body { font-size: 17px; line-height: 1.62; color: var(--ink-2); } .article-body h3 { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin: 26px 0 8px; color: var(--ink); } .article-body p { margin-bottom: 14px; } .article-body ul { padding-left: 20px; margin-bottom: 14px; } .article-body li { margin-bottom: 6px; } .article-body code { font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 14px; background: var(--bg-hover); padding: 2px 6px; word-break: break-word; } /* ---------- Отдельные страницы ---------- */ /* Шапка: логотип, поиск и переключатель темы. Своего каталога у страницы нет, поиск уводит на главную — но с неё человек больше не выпадает в тупик. */ .subpage-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; max-width: 780px; margin: 0 auto; padding: 26px var(--gutter) 14px; border-bottom: 1px solid var(--rule); } .subpage-logo { display: inline-block; font-family: var(--display); font-weight: 800; font-size: 15px; line-height: 1.05; letter-spacing: -0.03em; text-transform: uppercase; color: var(--ink); } .subpage-logo:hover { color: var(--accent); } .subpage-search { min-width: 0; } .subpage-input { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--rule); outline: none; font-family: var(--body); font-size: 14px; color: var(--ink); padding: 7px 0 6px; } .subpage-input:focus { border-bottom-color: var(--accent); } .subpage-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .subpage { max-width: 780px; padding: 30px var(--gutter) 110px; margin: 0 auto; } .breadcrumbs { font-size: 13px; color: var(--faint); margin-bottom: 26px; line-height: 1.8; } .crumb-sep { margin: 0 9px; color: var(--faint-3); } .page-kicker { font-size: 13px; color: var(--accent); margin-bottom: 10px; } .page-title { font-family: var(--display); font-weight: 600; font-size: clamp(32px, 5vw, 46px); line-height: 1.0; letter-spacing: -0.05em; margin-bottom: 16px; color: var(--ink); } .page-title.section { text-transform: uppercase; font-size: clamp(28px, 4vw, 38px); letter-spacing: -0.045em; } .page-lead { font-size: 17px; line-height: 1.55; color: var(--text-2); margin-bottom: 26px; max-width: 62ch; text-wrap: pretty; } .subpage h2 { font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -0.03em; margin: 38px 0 12px; color: var(--ink); } .long-read { max-width: 68ch; } .long-read h2 { margin: 34px 0 12px; } .long-read p { font-size: 17px; line-height: 1.65; margin-bottom: 14px; color: var(--ink-2); } .long-read ul, .long-read ol { padding-left: 20px; margin-bottom: 16px; } .long-read li { font-size: 17px; line-height: 1.6; margin-bottom: 7px; color: var(--ink-2); } .long-read strong { font-weight: 600; } .related-list { border-top: 1px solid var(--rule-ink); } .related-row { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 1.4fr) auto; gap: 20px; align-items: baseline; padding: 13px 0 12px; border-bottom: 1px solid var(--rule); color: inherit; transition: background-color 0.12s ease; } .related-row:hover { background: var(--bg-hover); color: inherit; } .related-name { font-family: var(--display); font-size: 15px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.25; color: var(--ink); } .related-desc { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .related-tags { font-size: 13px; color: var(--muted); white-space: nowrap; } /* ---------- Страницы сравнений ---------- */ /* Таблица на две колонки в той же линейной эстетике, что и «Таблица сведений»: ни рамок вокруг ячеек, ни заливки — только горизонтальные линейки. */ .compare-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 26px 0 34px; } .compare-table thead th { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); text-align: left; padding: 0 20px 10px 0; border-bottom: 1px solid var(--rule-ink); } .compare-table th[scope="row"] { font-weight: 400; color: var(--faint); text-align: left; padding: 12px 20px 12px 0; white-space: nowrap; } .compare-table td { padding: 12px 20px 12px 0; color: var(--ink-2); vertical-align: top; } .compare-table tbody tr { border-bottom: 1px solid var(--rule); } .compare-table tbody tr:last-child { border-bottom: none; } .compare-verdict { padding-left: 20px; margin-top: 10px; } .compare-verdict li { font-size: 17px; line-height: 1.6; margin-bottom: 8px; color: var(--ink-2); } .compare-verdict b { font-weight: 600; color: var(--ink); } .compare-links { margin-top: 40px; } .compare-links ul { list-style: none; padding: 0; border-top: 1px solid var(--rule-ink); } .compare-links li { border-bottom: 1px solid var(--rule); } .compare-links a { display: block; padding: 12px 0 11px; font-family: var(--display); font-size: 15px; font-weight: 400; letter-spacing: -0.03em; } .back-link { margin-top: 44px; font-size: 15px; } .plain-list { margin-top: 46px; border-top: 1px solid var(--rule-ink); padding-top: 18px; } .plain-list summary { cursor: pointer; font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: -0.02em; list-style: none; } .plain-list summary::-webkit-details-marker { display: none; } .plain-list summary::after { content: ' +'; color: var(--accent); } .plain-list[open] summary::after { content: ' −'; } .plain-list h3 { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: -0.03em; margin: 26px 0 6px; } .plain-list dt { font-size: 15px; font-weight: 500; margin-top: 14px; } .plain-list dd { font-size: 14px; line-height: 1.55; color: var(--muted); margin-top: 3px; max-width: 74ch; } .plain-tags { font-size: 12px; color: var(--faint); margin-left: 8px; font-weight: 400; } .more-link { font-size: 13px; white-space: nowrap; } /* ---------- Подвал ---------- */ .site-footer { border-top: 1px solid var(--rule); margin: 0 var(--gutter); padding: 22px 0 40px; font-size: 13px; color: var(--faint); display: flex; gap: 22px; flex-wrap: wrap; } /* ---------- Мобильные ---------- */ @media (max-width: 900px) { :root { --gutter: 20px; --rail: 0px; } /* «НЕЙРОСЕТЕЙ» в Unbounded 800 — примерно 8.7 кегля в ширину. На узком экране при 34 px строка не помещается в свою колонку и лезет под значок, поэтому кегль привязан к ширине окна, а значок и зазор ужаты. */ .masthead { --title-size: clamp(24px, 8.4vw, 34px); gap: 0 12px; padding: 20px var(--gutter); } .masthead .theme-toggle { --toggle-size: 30px; } .masthead-meta { margin-top: 12px; } .toolbar { grid-template-columns: 1fr; } .toolbar-label { padding: 12px var(--gutter) 0; } .search-input { font-size: 19px; padding: 6px var(--gutter) 14px; } .toolbar-actions { padding: 8px var(--gutter); gap: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Пальцем нужно попадать. Растёт только невидимая зона нажатия: добавь мы отступы, акцентная линейка активного фильтра отъехала бы от слова. Поля запаса у .toolbar-actions — чтобы зону не обрезал горизонтальный скролл. */ .filter-btn, .tab { position: relative; } .filter-btn::after, .tab::after { content: ''; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; } .tab::after { top: -12px; bottom: -12px; } .layout { grid-template-columns: 1fr; } .sidenav { position: static; padding: 18px var(--gutter) 0; } .tabs { margin-bottom: 10px; } .nav-list { display: flex; gap: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 10px; border-bottom: 1px solid var(--rule); } .nav-item { width: auto; white-space: nowrap; padding: 13px 0; } .nav-item span:first-child { flex: 0 0 auto; } /* Линейка над «Сохранённые» тянется во всю ширину: кнопка носит класс .nav-item, а он на мобильном сжимается по содержимому и утаскивал линейку за собой. */ .nav-fav { width: 100%; margin-top: 4px; padding-top: 13px; } .main { padding: 0 var(--gutter) 70px; } .group-head { grid-template-columns: 34px 1fr; } .group-title { font-size: 20px; } .row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0 13px; } .row-name { font-size: 15px; } /* На узком экране описание и так переносится — обрезать его нечем и незачем. */ .row-desc { display: block; padding-right: 0; font-size: 13px; } .row-tags { font-size: 12px; } .post-item { grid-template-columns: 1fr; gap: 6px; } .post-type { padding-top: 0; } .post-title { font-size: 21px; } .drawer, .drawer.wide { width: 100%; max-width: 100%; padding: 20px var(--gutter) 50px; } .drawer-title { font-size: 30px; } /* Втроём в одну строку они на телефоне не помещаются: логотип и кнопка темы делят верхнюю строку, поиск уходит под них во всю ширину. */ .subpage-head { grid-template-columns: 1fr auto; gap: 10px 16px; padding: 20px var(--gutter) 12px; } .subpage-search { grid-column: 1 / -1; grid-row: 2; } .subpage-input { padding: 11px 0 10px; } /* Смысл сравнения — увидеть обе колонки разом. Поэтому на узком экране таблица ужимается, а подпись строки переносится по словам, вместо того чтобы уезжать за край и заставлять листать вбок. */ .compare-table { font-size: 14px; } .compare-table thead th { font-size: 14px; padding-right: 10px; } .compare-table th[scope="row"] { white-space: normal; padding: 11px 10px 11px 0; } /* Адреса сайтов в последней строке — длинные и неразрывные: без переноса по любому месту они одни распирали таблицу за край экрана. */ .compare-table td { padding: 11px 10px 11px 0; overflow-wrap: anywhere; } .subpage { padding: 22px var(--gutter) 70px; } .related-row { grid-template-columns: 1fr; gap: 3px; } .related-desc { white-space: normal; } .site-footer { margin: 0 var(--gutter); } } /* ---------- Печать ---------- */ @media print { .toolbar, .sidenav, .drawer, .drawer-overlay, .site-footer, .theme-toggle { display: none !important; } .layout { grid-template-columns: 1fr; } .row { break-inside: avoid; } } /* ---------- Страница дизайн-системы ---------- */ .sg-demo { border: 1px dashed var(--rule); padding: 22px; margin-bottom: 16px; background: var(--bg); } .sg-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .sg-scroll { overflow-x: auto; margin-bottom: 16px; } .sg-tokens { width: 100%; border-collapse: collapse; font-size: 13px; } .sg-tokens th, .sg-tokens td { text-align: left; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--rule); white-space: nowrap; } .sg-tokens thead th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); border-bottom-color: var(--rule-ink); } .sg-tokens code { font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 12px; } .sg-swatch { display: inline-block; width: 16px; height: 16px; margin-right: 9px; vertical-align: -3px; border: 1px solid var(--rule); } .sg-swatch-none { background: repeating-linear-gradient(45deg, var(--rule) 0 3px, transparent 3px 6px); } /* Подвал отдельных страниц выравнивается по колонке текста */ .subpage-footer { max-width: 780px; margin: 0 auto; }