/* Витрина: светлая тема по умолчанию, тёмная — по выбору человека. Отдельный файл, а не правки в style.css: у панели своя рабочая тема. Все цвета живут в переменных, и тем ровно две: значения по умолчанию светлые, а при data-theme="dark" на переопределяются тёмными. Ни одно правило ниже не знает, какая тема включена, — иначе вторая тема жила бы отдельной копией стилей и расходилась бы с первой после каждой правки. Выбор запоминается в браузере и подставляется до отрисовки: если ставить его после загрузки, тёмной теме предшествует белая вспышка на всю страницу. Шрифты лежат у нас, а не тянутся с Google: внешний запрос на каждой загрузке — это и задержка, и зависимость от чужой доступности. Sora — только латиница (кириллицы в ней нет вовсе), поэтому русский текст идёт IBM Plex Sans, а Sora достаётся то, ради чего её и брали: цифры, коды карточек и заголовки на латинице. */ @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/ibm-plex-mono-0.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/ibm-plex-mono-1.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/ibm-plex-mono-2.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/ibm-plex-mono-3.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/ibm-plex-mono-4.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/ibm-plex-mono-5.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/ibm-plex-mono-6.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/ibm-plex-mono-7.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/ibm-plex-mono-8.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/ibm-plex-mono-9.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/ibm-plex-mono-10.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/ibm-plex-mono-11.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/ibm-plex-sans-12.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/ibm-plex-sans-13.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/ibm-plex-sans-14.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/ibm-plex-sans-15.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/ibm-plex-sans-12.woff2') format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/ibm-plex-sans-13.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/ibm-plex-sans-14.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/ibm-plex-sans-15.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/sora-16.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Sora';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/sora-17.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Sora';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/sora-16.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Sora';font-style:normal;font-weight:500;font-display:swap;src:url('/static/fonts/sora-17.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/sora-16.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/static/fonts/sora-17.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/sora-16.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/static/fonts/sora-17.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('/static/fonts/sora-16.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('/static/fonts/sora-17.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} :root{ color-scheme:light; --bg:#f7f9fb; /* основной фон */ --bg2:#eef2f7; /* полоса-разделитель между разделами */ --bg3:#e9eef4; /* подвал */ --card:#ffffff; --card2:#f4f7fa; /* наведение */ --line:rgba(17,25,34,.10); --line2:rgba(17,25,34,.20); --ink:#131a21; --ink2:#414d5a; --mute:#5d6975; --mute2:#8d97a3; /* Акцент на светлом фоне взят темнее витринного циана: сам циан на белом читается как выцветший и не проходит по контрасту ни в ссылках, ни в подписях. */ --acc:#0e7c85; --acc2:#0a5b62; --onacc:#ffffff; /* текст на акцентной заливке */ --ok:#2e8b3d; --warn:#8a6d00; --bad:#c23c3b; --head:rgba(255,255,255,.85); /* шапка поверх содержимого */ /* Поля ввода — с холодным отливом, а не белые. Белое поле на белой карточке видно только по рамке, и отбор из десятка полей выглядит набором пустых рамок; лёгкая подложка сразу говорит, куда писать. Оттенок голубоватый, чтобы не спорить с бежевыми предупреждениями и не читаться серым «выключено». */ --field:#f3f7fa; /* поля ввода */ --winbar:#e7ecf2; /* полоска «окна браузера» в карточке */ --hero:linear-gradient(100deg,#e7eefb 0%,#f7f9fb 48%,#e2f2f2 100%); --grid:rgba(17,25,34,.035); /* сетка поверх первого экрана */ --soft:rgba(17,25,34,.05); /* лёгкая подложка */ --soft2:rgba(17,25,34,.10); --accsoft:rgba(14,124,133,.10); --accsoft2:rgba(14,124,133,.20); --accline:rgba(14,124,133,.40); --okline:rgba(46,139,61,.40); --warnline:rgba(138,109,0,.40); --badline:rgba(194,60,59,.45); /* Мягкие заливки трёх ступеней истории. Взяты прозрачностью от самого цвета, а не подобраны отдельными шестнадцатеричными значениями: так они одинаково лягут и на карточку, и на полосу фона, и не придётся заводить по паре оттенков на каждый случай. */ --oksoft:rgba(46,139,61,.12); --warnsoft:rgba(138,109,0,.13); --badsoft:rgba(194,60,59,.11); --shadow:0 8px 30px rgba(17,25,34,.14); /* Всплывающая подсказка — тёмная в обеих темах. Светлая на светлом не отделяется от страницы, а в тёмной теме светится белым пятном; тёмная читается и там, и там, и сразу видно, что это слой поверх, а не часть таблицы. */ --tip:#1b232c; --tipink:#e8edf2; /* Основной шрифт витрины — Sora, как в макете. Кириллицы в ней нет вовсе, поэтому следом стоит IBM Plex Sans: браузер подставляет его на те буквы, которых в Sora не нашлось, и русская версия остаётся читаемой без единого правила в стилях. */ /* Отступ сверху для всего, что прилипает. Пока шапка сайта тоже была липкой, здесь стояла её высота — иначе прилипшее уезжало под неё. Шапку открепили, и отступу стало неоткуда браться: ноль. Переменную оставляем именно потому, что мест, которые от неё зависят, два, и менять их порознь однажды забудут. */ --headh:0px; /* Ширина колонки содержимого. Каталог живёт таблицей на девять столбцов, и лишние триста пикселей там — это ещё один столбец цифр вместо переноса. Но текст по такой ширине читать нельзя: строка в полтораста знаков теряется глазом на возврате, поэтому у абзацев своё ограничение — --measure. */ --wide:1560px; --measure:74ch; --sans:'Sora','IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --disp:'Sora','IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; } /* Тёмная тема — прежний вид витрины. Включается только выбором человека: витрина светлая по умолчанию, и системная настройка её не переключает, иначе один и тот же адрес выглядел бы у двух людей по-разному без всякого их участия. */ html[data-theme="dark"]{ color-scheme:dark; --bg:#283039; --bg2:#1e242d; --bg3:#1a1f27; --card:#313a45; --card2:#39434f; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16); --ink:#eef1f4; --ink2:#a4acb6; --mute:#8f97a2; --mute2:#6b7480; --acc:#3fe0e0; --acc2:#8bf0f0; --onacc:#10161c; --ok:#5fc36a; --warn:#e8c14e; --bad:#e0605f; --oksoft:rgba(95,195,106,.16); --warnsoft:rgba(232,193,78,.15); --badsoft:rgba(224,96,95,.16); --head:rgba(34,42,52,.85); --field:#232b34; --winbar:#2a323c; --hero:linear-gradient(100deg,#2a3a52 0%,#283039 48%,#22484b 100%); --grid:rgba(255,255,255,.025); --soft:rgba(255,255,255,.07); --soft2:rgba(255,255,255,.13); --accsoft:rgba(63,224,224,.10); --accsoft2:rgba(63,224,224,.20); --accline:rgba(63,224,224,.45); --okline:rgba(95,195,106,.38); --warnline:rgba(232,193,78,.40); --badline:rgba(224,96,95,.50); --shadow:0 8px 30px rgba(0,0,0,.35); } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--sans); -webkit-font-smoothing:antialiased} a{color:var(--acc);text-decoration:none;transition:color .15s} a:hover{color:var(--acc2)} ::selection{background:var(--acc);color:var(--onacc)} h1,h2,h3{font-family:var(--disp);letter-spacing:-.02em;margin:0 0 12px; text-wrap:balance} h1{font-size:44px;line-height:1.06;font-weight:700} h2{font-size:30px;line-height:1.12;font-weight:700} h3{font-size:19px;font-weight:600} p{margin:0 0 14px} code{font-family:var(--mono);font-size:.92em} /* Надзаголовок: моноширинный, вразрядку, цианом. Приём прототипа — он задаёт всему разделу тон ещё до заголовка. */ .eyebrow{font:600 12px var(--mono);letter-spacing:.16em;text-transform:uppercase; color:var(--acc);margin-bottom:14px} .lead{font-size:17px;color:var(--ink2);max-width:660px} .muted{color:var(--mute)} .mono{font-family:var(--mono)} /* ── шапка и подвал ─────────────────────────────────────────────────── */ /* Полоса шапки во всю ширину, содержимое — по колонке страницы. Ширина и боковые отступы те же, что у .pub, иначе логотип стоит левее заголовка, а кнопка входа правее кнопок в тексте. */ /* Шапка сайта не прилипает. Раньше прилипала, и на каталоге это отнимало полосу экрана под меню, которое при просмотре списка не нужно: человек листает домены, а не ходит по разделам. Липкой осталась одна шапка таблицы — вот она нужна всегда, потому что без неё на третьем экране не вспомнить, что за число стоит четвёртым слева. */ .pubhead{padding:14px 0; background:var(--head); border-bottom:1px solid var(--line)} .pubhead__in{max-width:var(--wide);margin:0 auto;padding:0 40px;display:flex; align-items:center;justify-content:space-between;gap:24px} /* Кошелёк в шапке: остаток и пополнение одной плашкой. Обведён и подкрашен нарочно — это единственное число на витрине, от которого зависит, может ли человек купить прямо сейчас, и голым текстом среди прочих кнопок оно терялось. */ .wallet{display:inline-flex;align-items:center;gap:8px;padding:5px 6px 5px 11px; border:1px solid var(--acc);border-radius:9px;background:var(--accsoft); white-space:nowrap} .wallet__sum{font:700 14px var(--mono);color:var(--acc2); font-variant-numeric:tabular-nums} .wallet__cur{font:600 10.5px var(--mono);color:var(--acc2);opacity:.72; letter-spacing:.04em} .wallet__add{display:inline-block;padding:4px 9px;border-radius:6px; background:var(--acc);color:var(--onacc);font:600 11.5px var(--sans); white-space:nowrap} .wallet__add:hover{filter:brightness(1.09);color:var(--onacc)} .pubhead__logo{display:flex;align-items:center;gap:10px;flex:none; font:700 17px var(--disp);letter-spacing:-.02em;color:var(--ink);white-space:nowrap} .pubhead__logo:hover{color:var(--ink)} .pubhead__logo b{color:var(--acc);font-weight:700} .pubhead nav{flex:1;min-width:0;display:flex;justify-content:center;gap:18px; font-size:13.5px;white-space:nowrap;overflow:hidden} .pubhead nav a{color:var(--ink2)} .pubhead nav a:hover{color:var(--ink)} .pubhead__side{flex:none;display:flex;gap:12px;align-items:center; font-size:13.5px;color:var(--mute);white-space:nowrap} /* Переключатель языка: две буквы, а не флажок. Флажок означает страну, а язык и страна — разные вещи: английским пользуются далеко не только в Британии. */ .lang{font:600 12px var(--mono);letter-spacing:.06em;color:var(--mute); border:1px solid var(--line);border-radius:6px;padding:3px 7px} .lang:hover{color:var(--ink);border-color:var(--mute)} /* Переключатель темы. Кнопка, а не ссылка: адрес страницы от неё не меняется, и поисковику незачем ходить по второму адресу с тем же содержимым. Значок показывает, что будет после нажатия, а не что включено сейчас: человек нажимает ради результата. Подпись рядом со значком выводится только на широком экране — на телефоне в шапке и без неё тесно. */ .theme{display:inline-flex;align-items:center;gap:6px;cursor:pointer; font:600 12px var(--mono);letter-spacing:.06em;color:var(--mute); background:transparent;border:1px solid var(--line);border-radius:6px; padding:3px 8px;width:auto;transition:color .15s,border-color .15s} .theme:hover{color:var(--ink);border-color:var(--mute)} .theme::before{content:"\25D0";font-size:13px;line-height:1} .theme__t::after{content:"Тёмная"} html[data-theme="dark"] .theme__t::after{content:"Светлая"} html[lang="en"] .theme__t::after{content:"Dark"} html[lang="en"][data-theme="dark"] .theme__t::after{content:"Light"} @media (max-width:1080px){ .theme__t{display:none} } .pubfoot{padding:44px 0 36px;background:var(--bg3); border-top:1px solid var(--line);margin-top:64px;font-size:13.5px; color:var(--mute)} .pubfoot__in{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between} .pubfoot a{color:var(--ink2)} .pubfoot a:hover{color:var(--ink)} /* ── обёртки разделов ───────────────────────────────────────────────── */ /* Одна колонка на всю витрину. Ширина считается вместе с отступами, поэтому первый экран, каталог и подвал должны пользоваться одним и тем же правилом — иначе их левые края разъезжаются на величину отступа, и это видно невооружённым глазом. */ .pub{max-width:var(--wide);margin:0 auto;padding:32px 40px 8px} .pub--narrow{max-width:900px} .pub--flush{padding-top:0;padding-bottom:0} .band{background:var(--bg2);border-top:1px solid var(--line); border-bottom:1px solid var(--line);padding:40px 0;margin:32px 0} .band .pub{padding-top:0;padding-bottom:0} /* Первый экран: тот же наклонный переход и сетка поверх него. */ .hero{position:relative;padding:56px 0 0; background:var(--hero); border-bottom:1px solid var(--line)} .hero::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(var(--grid) 1px,transparent 1px), linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:46px 46px} .hero h1{max-width:900px} .hero h1 em{color:var(--acc);font-style:normal} .stats{position:relative;margin-top:40px;display:flex; border-top:1px solid var(--line);flex-wrap:wrap} .stats div{flex:1 1 160px;padding:20px 24px} .stats div+div{border-left:1px solid var(--line)} .stats b{display:block;font:700 26px var(--disp);color:var(--ink)} .stats b.acc{color:var(--acc)} .stats span{display:block;font:500 12px var(--mono);letter-spacing:.08em; text-transform:uppercase;color:var(--mute);margin-top:3px} /* ── кнопки ─────────────────────────────────────────────────────────── */ /* Скрытое остаётся скрытым. Правило нужно вот почему: браузер прячет элементы с пометкой hidden своим стилем display:none, но любой наш стиль с display перебивает его — авторские правила всегда сильнее встроенных. У кнопок как раз стоит display:inline-block, поэтому «Открыть отмеченные» и «снять отметки» показывались всегда, хотя в разметке помечены скрытыми и скрипт их не трогал. Прячем через !important нарочно: это единственный случай, когда намерение «не показывать» должно побеждать любое оформление. */ [hidden]{display:none !important} .btn{display:inline-block;font:600 15px var(--sans);color:var(--onacc); background:var(--acc);border:1px solid var(--acc);padding:13px 24px; border-radius:10px;cursor:pointer;transition:filter .15s,transform .15s; text-align:center} .btn:hover{filter:brightness(1.09);transform:translateY(-1px);color:var(--onacc)} .btn--ghost{background:transparent;color:var(--ink);border-color:var(--line2)} .btn--ghost:hover{background:var(--soft); border-color:var(--line2);color:var(--ink);filter:none} .btn--sm{font-size:13.5px;padding:9px 16px;border-radius:8px} /* ── карточки ───────────────────────────────────────────────────────── */ .card{background:var(--card);border:1px solid var(--line);border-radius:14px; padding:22px;margin:16px 0} .card--flat{background:var(--bg2)} /* ── поля ───────────────────────────────────────────────────────────── */ label{display:block;font-size:13.5px;color:var(--ink2);margin:0 0 4px} input,select,textarea{width:100%;font:400 14px var(--sans);color:var(--ink); background:var(--field);border:1px solid var(--line2);border-radius:8px; padding:9px 11px;transition:border-color .15s} /* Поле под курсором — с мягким кольцом вокруг рамки. Одной сменой цвета рамки на пиксель толщиной поле не находится глазами, когда их в отборе десяток: кольцо видно боковым зрением, а цвет остаётся тем же самым, что и у всего остального выбранного. */ input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc); box-shadow:0 0 0 3px var(--accsoft)} input::placeholder{color:var(--mute2)} select{appearance:none;background-image: linear-gradient(45deg,transparent 50%,var(--mute) 50%), linear-gradient(135deg,var(--mute) 50%,transparent 50%); background-position:calc(100% - 16px) 18px,calc(100% - 11px) 18px; background-size:5px 5px;background-repeat:no-repeat;padding-right:32px} .hint,.f-hint{font-size:12px;color:var(--mute);line-height:1.4} /* ── таблицы ────────────────────────────────────────────────────────── */ .tbl{width:100%;border-collapse:collapse;font-size:13.5px} .tbl td,.tbl th{padding:8px 10px;border-bottom:1px solid var(--line); text-align:left;vertical-align:top} .tbl tr:last-child td{border-bottom:0} .tbl .num{text-align:right;font-family:var(--mono)} .nowrap{white-space:nowrap} /* История архива. Отдельно от прочих таблиц, потому что в одной её клетке лежит то, чего в других не бывает: строка перенаправления — это ссылка без пробелов длиной в полторы сотни знаков. Обычная таблица растягивается по самой длинной клетке, и на телефоне такая строка уносит за собой ширину всей страницы — двигается вся вёрстка, а не таблица. Отсюда три правила: ширина столбцов задана, остаток отдан описанию, и длинная ссылка в нём рвётся где придётся. Рвать посреди слова обычно плохо, но здесь выбор не между красивым и некрасивым, а между переносом и уехавшей страницей. */ /* ── окно знакомства ──────────────────────────────────────────────── Поверх страницы, а не вместо неё: под затемнением остаётся видна та самая выдача, ради которой человек пришёл. Это не украшение — окно просит войти, и довод в его пользу лежит прямо за ним. */ .wall{position:fixed;inset:0;z-index:60;display:flex; align-items:center;justify-content:center;padding:20px} .wall[hidden]{display:none} .wall__back{position:absolute;inset:0;background:rgba(10,14,20,.62); backdrop-filter:blur(2px)} .wall__card{position:relative;max-width:420px;width:100%; background:var(--card);border:1px solid var(--line2);border-radius:14px; padding:26px 26px 20px;box-shadow:0 24px 60px rgba(0,0,0,.35)} .wall__card h3{margin:0 0 10px;font:700 21px var(--disp)} .wall__card p{margin:0 0 12px;font-size:14px;line-height:1.55} .wall__card .gbtn{width:100%;justify-content:center;margin-top:4px} .wall__alt{margin:12px 0 0;text-align:center;font-size:13px} .wall__no{display:block;margin:14px auto 0;font-size:13px} /* Крестик. Область нажатия крупнее самого знака: на телефоне попасть по символу в двенадцать пикселей нельзя, и человек, промахнувшись дважды, закрывает вкладку вместо окна. */ .wall__x{position:absolute;top:8px;right:8px;width:36px;height:36px; display:flex;align-items:center;justify-content:center; appearance:none;-webkit-appearance:none;background:none;border:0; padding:0;border-radius:9px;cursor:pointer; font:400 22px/1 var(--sans);color:var(--mute)} .wall__x:hover{color:var(--ink);background:var(--bg2)} @media (max-width:520px){ .wall__card{padding:22px 18px 16px} } .tbl--hist{table-layout:fixed} .tbl--hist .hist__when{width:118px} .tbl--hist .hist__code{width:56px} .tbl--hist .hist__n{width:92px} .tbl--hist .hist__what{overflow-wrap:anywhere;word-break:break-word} .ok{color:var(--ok)} .warn{color:var(--warn)} .bad{color:var(--bad)} .flash{border-radius:10px;padding:12px 16px;margin:14px 0;font-size:14px; border:1px solid var(--line2);background:var(--card)} .flash--ok{border-color:var(--okline)} .flash--error{border-color:var(--badline)} @media (max-width:820px){ .pubhead{padding:12px 0} .pubhead__in{padding:0 16px;gap:12px} .pubhead nav{display:none} .pub{padding:24px 16px 8px} .hero{padding:36px 0 0} h1{font-size:32px} h2{font-size:24px} } /* Телефон. Столбец с периодом перестаёт быть неразрывным: «2019–2022» там помещается, а «August 2019» — уже нет, и держать его в одну строку значит отнимать место у описания, ради которого таблицу и читают. */ @media (max-width:560px){ .tbl--hist{font-size:12.5px} .tbl--hist td{padding:6px 6px} .tbl--hist .hist__when{width:74px;white-space:normal} .tbl--hist .hist__code{width:44px} .tbl--hist .hist__n{width:58px} } /* ── список доменов ─────────────────────────────────────────────────── */ /* Карточка товара повторяет пример из прототипа: окошко браузера сверху, под ним название, описание, значки, цифры моноширинным и подвал с ценой. Вместо снимка сайта — полосы: показывать настоящий снимок нельзя, по нему домен находится за минуту. */ .drops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; margin:20px 0 8px;align-items:stretch} .drops .card{margin:0;padding:0;overflow:hidden;display:flex; flex-direction:column;position:relative; transition:transform .16s,border-color .16s} .drops .card:hover{transform:translateY(-3px); border-color:var(--accline)} .win{height:126px;background:var(--bg2);border-bottom:1px solid var(--line); flex:none} .win__bar{display:flex;align-items:center;gap:6px;padding:9px 12px; background:var(--winbar)} .win__bar i{width:8px;height:8px;border-radius:50%;background:var(--bad)} .win__bar i+i{background:var(--warn)} .win__bar i+i+i{background:var(--ok)} .win__url{margin-left:8px;flex:1;min-width:0;overflow:hidden; font:500 10.5px var(--mono);color:var(--mute);background:var(--bg2); padding:3px 10px;border-radius:5px;white-space:nowrap} .win__body{padding:12px 14px} .win__body i{display:block;border-radius:3px;background:var(--soft2); height:6px;margin-bottom:6px} .win__body i.t{height:9px;width:46%;background:var(--accline); margin-bottom:9px} .win__body u{display:flex;gap:7px;margin-top:11px} .win__body u b{flex:1;height:22px;border-radius:5px; background:var(--soft)} .drop__in{padding:18px 20px;display:flex;flex-direction:column;gap:11px; flex:1} .drop__name{font:600 15px var(--disp);color:var(--ink);margin:0} .drop__name span{color:var(--mute);font-weight:400} .drop__text{margin:0;font-size:12.5px;line-height:1.5;color:var(--mute); display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical; overflow:hidden} .tag{display:inline-block;font:500 11px var(--mono);color:var(--ink2); border:1px solid var(--line2);padding:3px 9px;border-radius:20px} .tag--warn{color:var(--warn);border-color:var(--warnline)} .tag--ok{color:var(--ok);border-color:var(--okline)} /* Найденная запретная тема — не «внимание», а «мимо»: цвет должен отличаться от жёлтого предупреждения. */ .tag--bad{color:var(--bad);border-color:var(--badline)} .tags{display:flex;flex-wrap:wrap;gap:7px} .nums{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:2px 0} .nums b{display:block;font:600 18px var(--mono);color:var(--ink)} .nums span{display:block;font-size:11px;color:var(--mute)} .drop__foot{margin-top:auto;display:flex;align-items:center; justify-content:space-between;gap:10px;padding-top:14px; border-top:1px solid var(--line)} .drop__price{font:600 18px var(--mono);color:var(--ink)} .drop__price small{display:block;font:400 11px var(--sans);color:var(--mute)} /* Кнопка перехода в карточку. Раньше она была растянута на весь блок невидимым слоем — вся карточка работала как ссылка. Это удобно, пока карточку только смотрят, и мешает, как только её нужно отмечать: слой перекрывал флажок, и одиночный выбор не срабатывал вовсе. Теперь ссылка занимает своё место, а нажатие по остальной карточке отмечает её. */ .drop__go{font:600 12.5px var(--disp);color:var(--acc); padding:9px 16px;border:1px solid var(--accline);border-radius:9px; background:var(--accsoft);white-space:nowrap; transition:background .15s,border-color .15s} .drop__go:hover{background:var(--accsoft2); border-color:var(--acc);color:var(--acc2)} /* ── отбор ──────────────────────────────────────────────────────────── */ /* Одна карточка в четыре ряда вместо четырёх групп подписанных полей. Прежний отбор занимал полтора экрана и потому сворачивался; подписи в нём весили больше самих полей и объясняли очевидное — рядом с полем «DR» слово «от» не добавляло ничего. Теперь ряды разделены чертой, а не заголовками, и прятать блок не нужно. */ .fbar{background:var(--card);border:1px solid var(--line); border-radius:14px;padding:14px 16px;margin:20px 0} /* Весь отбор стоит на одной сетке: шесть колонок, один отступ, и всё, у чего есть рамка, занимает целое число колонок. Раньше каждый ряд укладывался по-своему — списки по своей ширине, пороги своей сеткой, чипсы по числу чипсов, — и ни одна рамка не совпадала с рамкой над ней. Шесть выбраны не наугад: порогов без цены ровно шесть и чипсов ровно шесть, поэтому пустых клеток не остаётся. Из сетки выпадает только поиск словами: ему нужна длина строки, а не клетка, и он занимает три колонки разом. */ .fbar{--fcols:6;--fgap:10px} .fbar__row{display:grid;grid-template-columns:repeat(var(--fcols),minmax(0,1fr)); align-items:center;gap:var(--fgap)} .fbar__row + .fbar__row{margin-top:11px;padding-top:11px; border-top:1px solid var(--line)} .fbar__q{grid-column:span 3} /* Группа чипсов занимает столько колонок, сколько в ней чипсов, а чипсы делят её поровну — отступ внутри группы тот же, что между колонками, поэтому каждый чипс приходит ровно в свою клетку. */ .fbar__row--chips{align-items:end} .fgrp--1{grid-column:span 1} .fgrp--2{grid-column:span 2} .fgrp--3{grid-column:span 3} /* Границу между тремя условиями показывает волосок в отступе. Он нарисован пустышкой поверх, а не рамкой и не увеличенным отступом: и то и другое сдвинуло бы колонки, а сетка здесь важнее. */ .fgrp{position:relative} .fgrp + .fgrp::before{content:'';position:absolute; left:calc(var(--fgap) / -2 - 0.5px);top:1px;bottom:1px;width:1px; background:var(--line2)} /* Нижняя полоса в сетку не входит: кнопка, счётчик, сброс и порядок не поля отбора, а действия над ним, и клетки им не нужны. */ .fbar__row--foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px} /* Подпись ряда — мелкая и вразрядку: она называет ряд, а не спорит с ним за внимание. */ .fbar__cap{grid-column:1 / -1;font:600 10.5px var(--mono); letter-spacing:.13em; text-transform:uppercase;color:var(--mute);white-space:nowrap} /* Поиск словами занимает весь остаток ряда. Ограничение по ширине здесь стояло, и из-за него справа от поля оставалась пустая треть — ряд выглядел оборванным. Списки зон и тематик своё место получают минимальной шириной, а не за счёт обрезки соседа. */ .fbar__q{min-width:0;padding:9px 13px; border-radius:9px;border:1px solid var(--line2);background:var(--field); color:var(--ink);font-size:13.5px} /* Кнопка стоит первой в нижней полосе и никуда не отжимается. Прежде она висела в конце ряда с чипсами, оторванная от всего остального, и читалась как чужой элемент. */ .fbar__go{padding:10px 30px;font-size:13.5px} .fbar__found{font:500 13px var(--sans);color:var(--ink2)} .fbar__sort{display:flex;align-items:center;gap:9px;margin-left:auto} /* Приписка к порядку: любой выбранный порядок работает внутри ступени качества. Мелкая и серая — это сноска, а не условие. */ .fbar__note{font:500 11.5px var(--sans);color:var(--mute);white-space:nowrap} .fbar__sort select{padding:8px 11px;border-radius:9px; border:1px solid var(--line2);background:var(--field);color:var(--ink2); font-size:13px;cursor:pointer} .fgrp{display:flex;flex-direction:column;gap:8px;min-width:0} /* Порог показателя: подпись приклеена к полю, и плитка читается одной вещью — «DR от такого-то». Шесть порогов так укладываются в один ряд вместо шести подписанных строк. */ /* Пороги — та же сетка, что у всего отбора: шесть плиток, шесть колонок. Подпись ряда стоит над ними отдельной строкой, поэтому плитки занимают ряд целиком. */ .fmins{grid-column:1 / -1;display:grid;gap:var(--fgap); grid-template-columns:repeat(var(--fcols),minmax(0,1fr))} .fmin{display:flex;align-items:stretch;border:1px solid var(--line2); border-radius:9px;background:var(--field);overflow:hidden} .fmin__cap{display:flex;align-items:center;padding:0 10px; font:600 10.5px var(--mono);letter-spacing:.09em;text-transform:uppercase; color:var(--mute);white-space:nowrap} /* Поле забирает остаток плитки: подпись занимает столько, сколько ей нужно, а всё лишнее достаётся числу. Так плитки одной ширины выглядят намеренными, а не растянутыми. */ .fmin input{flex:1 1 auto;width:100%;min-width:44px;padding:9px 8px;border:0; border-left:1px solid var(--line2);background:transparent;color:var(--ink); font:600 13px var(--mono);font-variant-numeric:tabular-nums; text-align:center} .fmin input:focus{outline:none;background:var(--soft)} /* Чипс с галочкой. Квадратик рисуем сами, а не показываем системный: системный не покрасить в цвет ступени, а цвет здесь и есть смысл. */ .fchips{display:flex;gap:var(--fgap)} /* Чипс делит долю группы поровну с соседями и приходит к той же ширине, что плитка порога в ряду выше. Отступы тоже общие с ней: два ряда условий должны читаться одной сеткой, а не двумя разными. Подпись остаётся слева, число уходит вправо — читают подпись, а не пустоту вокруг неё. */ .fchip{flex:1 1 0;display:inline-flex;align-items:center;gap:8px; cursor:pointer; padding:9px 12px;border-radius:9px;border:1px solid var(--line2); background:var(--field);color:var(--ink2);user-select:none; font:500 13px var(--sans);white-space:nowrap; transition:background .14s,border-color .14s,color .14s} .fchip:hover{color:var(--ink)} .fchip input{position:absolute;opacity:0;width:0;height:0} .fchip i{width:15px;height:15px;flex:none;border-radius:4px; border:1px solid var(--line2);background:var(--card); display:flex;align-items:center;justify-content:center} .fchip i::after{content:'';width:7px;height:4px;margin-top:-2px; border:2px solid var(--onacc);border-top:0;border-right:0; transform:rotate(-45deg);opacity:0} .fchip input:checked ~ i::after{opacity:1} /* Число прижато к правому краю чипса: подпись слева, счёт справа — в трёх ступенях качества счета выстраиваются в столбик и их можно сравнить глазом, не читая подписи. */ .fchip b{margin-left:auto;font-weight:600;font-size:11.5px;opacity:.62; font-variant-numeric:tabular-nums} /* Отмеченный чипс. Клавиатурный обвод рисуем на самом чипсе: сама галочка спрятана, и без этого пройти отбор с клавиатуры вслепую. */ .fchip input:checked ~ i{background:var(--acc);border-color:var(--acc)} .fchip:has(input:checked){background:var(--accsoft);border-color:var(--acc); color:var(--acc2)} .fchip:focus-within{outline:2px solid var(--acc);outline-offset:2px} /* Ступени качества покрашены всегда, а не только отмеченными. Цвет здесь — не подсветка выбора, а сам предмет: те же три цвета стоят на ярлыке в каждой строке списка и на кромке строки, и если в отборе они серые, связь между отбором и списком приходится вычитывать словами. Отмеченность показывает заливка: у невыбранного чипса цветные только рамка, подпись и квадратик, у выбранного заливается ещё и фон, а квадратик становится сплошным. */ .fchip--ok{color:var(--ok);border-color:var(--okline)} .fchip--ok i{border-color:var(--okline)} .fchip--ok:hover{background:var(--oksoft)} .fchip--ok:has(input:checked){background:var(--oksoft); border-color:var(--ok);color:var(--ok)} .fchip--ok input:checked ~ i{background:var(--ok);border-color:var(--ok)} .fchip--warn{color:var(--warn);border-color:var(--warnline)} .fchip--warn i{border-color:var(--warnline)} .fchip--warn:hover{background:var(--warnsoft)} .fchip--warn:has(input:checked){background:var(--warnsoft); border-color:var(--warn);color:var(--warn)} .fchip--warn input:checked ~ i{background:var(--warn);border-color:var(--warn)} .fchip--bad{color:var(--bad);border-color:var(--badline)} .fchip--bad i{border-color:var(--badline)} .fchip--bad:hover{background:var(--badsoft)} .fchip--bad:has(input:checked){background:var(--badsoft); border-color:var(--bad);color:var(--bad)} .fchip--bad input:checked ~ i{background:var(--bad);border-color:var(--bad)} /* Выпадающий список с галочками — на details, без единой строки кода: он сам открывается и закрывается и работает, даже если скрипты не выполнились. Скрипт добавляет только закрытие щелчком мимо и поиск по длинному списку. */ .fdrop{position:relative} /* Кнопка списка занимает клетку целиком — как плитка порога и как чипс. Своей минимальной ширины у неё больше нет: ширину задаёт сетка, а не длина самого длинного названия тематики. Раскрытый список при этом шире клетки, и это нормально: он всплывает поверх. */ .fdrop__btn{display:flex;width:100%;box-sizing:border-box; align-items:center;gap:8px;cursor:pointer; justify-content:space-between; list-style:none;padding:9px 13px;border-radius:9px; border:1px solid var(--line2);background:var(--field);color:var(--ink2); font:500 13px var(--sans);white-space:nowrap} .fdrop__btn::-webkit-details-marker{display:none} .fdrop__btn:hover{color:var(--ink)} .fdrop__btn.is-on{background:var(--accsoft);border-color:var(--acc); color:var(--acc2);font-weight:600} .fdrop__btn i{font-style:normal;font-size:10px;opacity:.55} .fdrop__panel{position:absolute;z-index:20;top:100%;left:0;margin-top:6px; width:266px;max-width:calc(100vw - 40px);padding:10px; background:var(--card);border:1px solid var(--line2);border-radius:11px; box-shadow:var(--shadow)} .fdrop__find{width:100%;box-sizing:border-box;margin-bottom:7px; padding:8px 10px;border-radius:7px;border:1px solid var(--line2); background:var(--field);color:var(--ink);font-size:13px} .fdrop__list{max-height:264px;overflow-y:auto;display:flex; flex-direction:column;gap:1px} .fdrop__i{display:flex;align-items:center;gap:9px;cursor:pointer; padding:7px 8px;border-radius:7px;font-size:13px;color:var(--ink)} .fdrop__i:hover{background:var(--soft)} .fdrop__i input{width:15px;height:15px;flex:none;accent-color:var(--acc); cursor:pointer} .fdrop__i span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis} .fdrop__i b{font-weight:500;font-size:11.5px;color:var(--mute)} /* Колонок становится меньше, а спаны — уже: шесть клеток в ряд помещаются только на широком экране. Поиск и группы условий при этом занимают ряд целиком — рвать их по клеткам бессмысленно. */ @media (max-width:1180px){ .fbar{--fcols:3} .fbar__q{grid-column:1 / -1} } @media (max-width:760px){ .fbar{--fcols:2;padding:12px} .fgrp--3{grid-column:span 2} .fmin input{width:54px} } @media (max-width:520px){ .fbar{--fcols:1} .fgrp--2,.fgrp--3{grid-column:span 1} .fchips{flex-wrap:wrap} .fgrp + .fgrp::before{display:none} } /* ── карточка домена ────────────────────────────────────────────────── */ .deal{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px; align-items:start;margin:22px 0} .deal__main{grid-column:1;grid-row:1;min-width:0} .deal__buy{grid-column:2;grid-row:1;position:sticky; top:calc(var(--headh) + 12px)} .deal__buy .card{margin:0;padding:0;overflow:hidden} .buy__head{padding:22px 24px 18px;border-bottom:1px solid var(--line); background:var(--bg2)} .buy__price{font:700 34px var(--disp);letter-spacing:-.02em;line-height:1} .buy__price small{display:block;font:400 12px var(--mono);color:var(--mute); margin-top:8px;letter-spacing:.04em} .buy__body{padding:18px 24px 24px} .buy__btn{display:block;width:100%;font-size:15px;padding:14px} .buy__list{list-style:none;margin:16px 0 0;padding:0;font-size:12.5px; line-height:1.5;color:var(--mute)} .buy__list li{padding-left:20px;position:relative;margin:8px 0} .buy__list li::before{content:"✓";position:absolute;left:0;color:var(--acc)} .buy__note{font-size:12px;color:var(--mute);margin:12px 0 0} .facts2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; margin:0 0 22px} .facts2 div{background:var(--card);border:1px solid var(--line); border-radius:12px;padding:14px 16px} .facts2 dt{font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase; color:var(--mute);margin:0 0 5px} .facts2 dd{margin:0;font:600 18px var(--mono);color:var(--ink); overflow-wrap:anywhere} .facts2 dd.small{font-size:14px;font-family:var(--sans);font-weight:500} @media (max-width:1000px){ .drops{grid-template-columns:repeat(2,minmax(0,1fr))} .facts2{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:900px){ .deal{grid-template-columns:1fr} .deal__main,.deal__buy{grid-column:1} .deal__buy{grid-row:1;position:static} .deal__main{grid-row:2} } @media (max-width:680px){ .drops{grid-template-columns:1fr} } /* Мелочи, которые остались на других страницах витрины: кабинет, заказ сайта, «как это работает». Своих правил им не надо — хватит тех же карточек и кнопок, но классы должны существовать. */ .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:16px 0} .row form{margin:0} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .right{text-align:right} .num{text-align:right;font-family:var(--mono)} .chip{display:inline-block;font:500 11px var(--mono);color:var(--ink2); border:1px solid var(--line2);padding:3px 10px;border-radius:20px; margin:0 6px 6px 0} .btn--danger{background:var(--bad);border-color:var(--bad);color:#fff} .btn--danger:hover{color:#fff} .steps{counter-reset:s;list-style:none;padding:0;margin:0} .steps li{counter-increment:s;position:relative;padding:0 0 18px 46px; border-left:1px solid var(--line);margin-left:14px} .steps li::before{content:counter(s);position:absolute;left:-14px;top:0; width:28px;height:28px;border-radius:50%;background:var(--card); border:1px solid var(--line2);color:var(--acc);font:600 13px var(--mono); display:flex;align-items:center;justify-content:center} .steps li:last-child{border-left-color:transparent} @media (max-width:680px){ .grid2{grid-template-columns:1fr} } /* Выбор карточек для выдачи списком. Флажок стоит в самом верху карточки и занимает всю её ширину: попасть по нему нужно с одного движения, в том числе пальцем. */ .pick{display:flex;align-items:center;gap:8px;padding:10px 14px; border-bottom:1px solid var(--line);color:var(--ink2);font-size:13px; cursor:pointer;user-select:none;position:relative;z-index:2} .pick input{width:16px;height:16px;accent-color:var(--acc);cursor:pointer} .pick:hover{color:var(--ink)} /* Панель отмеченного. Липнет к низу экрана: отметив десяток карточек в длинном списке, покупатель не должен искать кнопку прокруткой. */ .picked{position:sticky;bottom:12px;z-index:20;margin:18px 0 0} .picked__in{display:flex;align-items:center;gap:14px;flex-wrap:wrap; padding:12px 16px;border-radius:12px;background:var(--card); border:1px solid var(--line2);box-shadow:var(--shadow)} .picked__n{font-weight:600} .pickrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap; margin:14px 0 0;color:var(--ink2);font-size:13px} .pickrow .hint{color:var(--ink2);font-size:12px} /* Открытые имена: моноширинный столбец, который удобно выделить целиком и унести регистратору. */ .names{margin:14px 0;padding:14px 16px;border-radius:10px; background:var(--soft);border:1px solid var(--line); font:14px/1.9 var(--mono);white-space:pre-wrap;word-break:break-all} .plain{list-style:none;padding:0;margin:14px 0} .plain li{padding:6px 0;border-bottom:1px solid var(--line)} /* Полоса хода работы: выдача длинного списка идёт минутами, и человеку нужно видеть, что она движется, а не гадать, завис ли экран. */ .bar{height:8px;border-radius:6px;background:var(--soft2); overflow:hidden;margin:16px 0 8px} .bar i{display:block;height:100%;background:var(--acc); transition:width .4s ease} /* Пачки в кабинете. Свёрнуты по умолчанию: раскрытая пачка на сотню имён закрывает собой всё остальное. */ .batch{border:1px solid var(--line);border-radius:12px;margin:0 0 10px; background:var(--card)} .batch>summary{cursor:pointer;padding:12px 16px;display:flex;gap:12px; align-items:center;flex-wrap:wrap;list-style:none} .batch>summary::-webkit-details-marker{display:none} .batch>summary::before{content:'▸';color:var(--acc);font-size:12px} .batch[open]>summary::before{content:'▾'} .batch__n{font-weight:600} .batch__body{padding:0 16px 14px} /* Отмеченная карточка. Галочка в углу теряется среди трёх столбцов — рамка и подсветка видны боковым зрением. */ .drops .card--on{border-color:var(--acc); box-shadow:0 0 0 1px var(--accline) inset} .drops .card--on .pick{color:var(--acc)} /* Всю карточку можно нажимать для выбора — курсор должен об этом говорить, иначе выглядит как обычный текст. */ .drops .card{cursor:pointer} .drops .card a{cursor:pointer} /* Таблица порогов по монетам: два столбца пар, чтобы двадцать строк не растягивали страницу вдвое. */ .mins{width:100%;font-size:14px} .mins .num{text-align:right} .mins td,.mins th{padding:7px 10px} /* Хлебные крошки и соседние срезы. Обе вещи нужны и человеку, и поисковику: первое отвечает «где я», второе — «куда дальше». */ .crumbs{font-size:13px;color:var(--ink2);margin:0 0 14px} .crumbs a{color:var(--ink2)} .crumbs a:hover{color:var(--acc)} .pubrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0} .near{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px} .near__a{display:inline-flex;align-items:center;gap:7px;padding:7px 13px; border:1px solid var(--line);border-radius:999px;background:var(--card); font-size:13.5px;color:var(--ink);transition:border-color .15s} .near__a:hover{border-color:var(--acc);color:var(--acc)} .near__a .muted{font:500 12px var(--mono)} /* Свёрнутый отбор. На посадочной он закрыт: туда приходят за готовым срезом, и восемь полей поверх товара только мешают. */ /* ── список доменов строками ────────────────────────────────────────────── */ /* Шесть колонок: имя с кнопкой, четыре показателя и прошлое домена словами. Карточки хороши, когда домен разглядывают поштучно; когда их сравнивают десятком, нужна строка — иначе на экран влезает три товара, и выбор превращается в прокрутку. */ /* clip, а не hidden. Разница здесь решающая: hidden делает список областью прокрутки, и прилипшая шапка внутри него прилипает к этой области, которая никогда не прокручивается, — то есть не прилипает вовсе. clip скругляет углы так же, но области прокрутки не создаёт. */ /* overflow-clip-margin разрешает рисовать за рамкой на заданный запас. Он нужен развёрнутому по наведению описанию: без него подсказка у нижних строк обрезалась бы по рамке списка. Браузеры постарше его не знают — для них те же строки разворачивают подсказку вверх. */ .drows{margin:16px 0 6px;border:1px solid var(--line);border-radius:14px; background:var(--card);overflow:clip;overflow-clip-margin:220px} /* Одиннадцать столбцов: отметка, имя, качество, возраст, DR, TF, CF, доноры, ссылки, архив, прошлое. Раньше их было восемь — качество делило клетку с архивом, TF с CF, а галочка стояла внутри клетки имени. Склейка экономила ширину, но убивала главное свойство таблицы: столбец читается сверху вниз и сравнивается сам с собой, а у склеенной клетки столбца нет. */ .drows__head,.drow{display:grid; grid-template-columns:minmax(180px,.85fr) 116px 52px 48px 44px 44px 72px 80px 132px 56px minmax(260px,1.5fr); gap:12px;align-items:start} /* Столбец отметок появляется только там, где есть что покупать. Отдельным набором столбцов, а не пустой клеткой всегда: пустой столбец слева на главной сдвигал бы весь список вправо ни за чем. */ .drows--pick .drows__head,.drows--pick .drow{ grid-template-columns:30px minmax(180px,.85fr) 116px 52px 48px 44px 44px 72px 80px 132px 56px minmax(260px,1.5fr)} /* Шапка прилипает к верху экрана. В каталоге двадцать строк по девять столбцов, и без неё на третьем экране приходится держать в голове, что за число стоит четвёртым слева. Отступ сверху — высота шапки сайта, она тоже прилипшая: без этого заголовки столбцов уехали бы под неё. Слой выше строк, но ниже шапки сайта — порядок наложения должен повторять порядок вещей на экране. */ .drows__head{position:sticky;top:var(--headh);z-index:3; padding:11px 18px;border-bottom:1px solid var(--line); background:var(--bg2);font:600 11px var(--mono);letter-spacing:.08em; text-transform:uppercase;color:var(--mute); /* Выравнивание по центру, а не по верху: «ссылающиеся домены» переносится на две строки, остальные подписи в одну, и прижатые к верху они выглядели ступенькой. */ align-items:center;min-height:44px} /* Числа по центру столбца — и заголовки, и значения. Прижатые вправо читались лучше по одному столбцу: единицы под единицами, порядок величины виден по длине строки. Но у крайнего правого столбца число упиралось в картинку архива, а между столбцами оставались широкие пустоты — на живом каталоге это выглядело так, будто выравнивания нет вовсе. Центр даёт ровные вертикали и одинаковые зазоры со всех сторон. Моноширинный шрифт с одинаковой шириной цифры остаётся: без него центрированные числа плясали бы. */ .drows__head .num{text-align:center} /* Заголовок-ссылка: щелчок задаёт порядок, повторный переворачивает. Цветом выделен только тот столбец, по которому список отсортирован сейчас, — иначе десять подсвеченных подписей не выделяют ничего. */ /* Заголовок-кнопка должен выглядеть ровно как прежняя ссылка: это подпись столбца, а не кнопка на странице. Собственное оформление у кнопок разное во всех браузерах, поэтому снимаем его целиком — рамку, фон, отступы, шрифт и выравнивание. */ .drows__sort{display:flex;align-items:center;gap:4px;color:inherit; text-decoration:none;appearance:none;-webkit-appearance:none; background:none;border:0;padding:0;margin:0;font:inherit; letter-spacing:inherit;text-transform:inherit;text-align:left; cursor:pointer;width:100%} .drows__form{display:contents} /* ── листалка ─────────────────────────────────────────────────────── Номера, а не одна кнопка «вперёд»: до конца каталога в четыреста страниц иначе четыреста нажатий. Текущая страница — не ссылка: ссылка на саму себя сбивает и человека, и обход. */ .pager{display:flex;gap:10px;align-items:center;justify-content:center; flex-wrap:wrap;margin:28px 0 8px} .pager__nums{display:flex;gap:4px;align-items:center;flex-wrap:wrap} .pager__n,.pager__step{display:inline-flex;align-items:center; justify-content:center;min-width:34px;height:32px;padding:0 9px; border:1px solid var(--line2);border-radius:8px;font:500 13px var(--mono); color:var(--mute);text-decoration:none} .pager__n:hover,.pager__step:hover{color:var(--ink);border-color:var(--ink2)} .pager__n.is-on{background:var(--acc);border-color:var(--acc); color:var(--onacc)} .pager__n.is-on:hover{color:var(--onacc)} .pager__step.is-off{opacity:.35;pointer-events:none} .pager__gap{color:var(--mute);padding:0 2px} @media (max-width:560px){ /* На телефоне круглые десятки и края уводят строку в две-три: оставляем шаги и ближайшие номера. */ .pager__nums .pager__n:not(.is-on){display:none} .pager__gap{display:none} } .drows__sort.num{justify-content:center} .drows__sort:hover{color:var(--ink)} .drows__sort.is-on{color:var(--ink)} .drows__sort i{font-style:normal;font-size:10px;color:var(--acc)} /* Одинаковая высота у всех строк. Раньше её задавало содержимое: у одного домена одна метка прошлого, у другого три, описание то в строку, то в пять, — и список выглядел рваным. Хуже того, на главной и в каталоге ширина колонок разная, поэтому переносы ложились по-разному, и две одинаковые по устройству таблицы воспринимались как разные. Порог здесь — только нижняя граница на случай совсем пустой строки. Ровняет строки между собой не он, а две другие вещи: у домена без тематики на её месте остаётся пустая метка той же высоты, а кнопка прижата к низу клетки (margin-top:auto ниже). Подбирать порог числом было бы гаданием: высота зависит от шрифта, а он подставной и на разных машинах разный. */ .drow{padding:16px 18px;border-bottom:1px solid var(--line); min-height:104px; /* Цветная кромка по левому краю в цвет ступени. Внутренней тенью, а не рамкой: рамка съела бы три пикселя ширины и сдвинула сетку столбцов, а тень рисуется поверх отступа. */ box-shadow:inset 3px 0 0 var(--line2)} .drow--ok{box-shadow:inset 3px 0 0 var(--ok)} .drow--warn{box-shadow:inset 3px 0 0 var(--warn)} .drow--bad{box-shadow:inset 3px 0 0 var(--bad)} .drow:last-child{border-bottom:0} .drow:hover{background:var(--soft)} /* Левая колонка — имя, кнопка и дата проверки. Кнопка растянута по ширине колонки, а имя набрано крупнее остальных чисел: этот блок в строке главный, и куцым он выглядеть не должен. */ /* Левая колонка. Имя набрано крупнее прочих чисел — в строке оно главное; кнопка не растянута во всю ширину, а ровно по своему тексту, зато повыше: растянутая кнопка выглядела полосой. */ /* Порядок внутри клетки: имя, тематика, дата, кнопка. Кнопка стоит последней нарочно — она закрывает чтение клетки, а не прерывает его посередине. Раньше она шла сразу за именем, и тематику с датой приходилось искать под ней. */ /* Клетка тянется во всю высоту строки, а кнопка прижата к её низу. Это и уравнивает домены с тематикой и без: пустое место уходит между датой и кнопкой, а не под кнопку, и кнопки во всём списке стоят на одной линии. Без растяжки клетка сжалась бы по своему содержимому и кнопка уехала бы вверх. */ .drow__name{display:flex;flex-direction:column;gap:5px;align-items:flex-start; align-self:stretch} .drow__code{font:600 17px var(--mono);color:var(--ink);overflow-wrap:anywhere; letter-spacing:-.01em} .drow__code:hover{color:var(--acc)} /* Кнопка по своему тексту, одной строкой. Растянутая на всю колонку и в две строки, она была самым тяжёлым пятном ряда и задавала высоту всему списку; двадцать таких полос подряд читаются как двадцать призывов, а не как товар. Ширину держит min-width, а не растяжка: цены у нас от семи до двадцати одного, и без него кнопка дёргалась бы на символ от строки к строке. Значение подобрано под самую длинную надпись — «Открыть · 100 USD» моноширинным в двенадцать пунктов; min() рядом на случай, если колонка окажется уже кнопки. Само слово короткое: в списке кнопок двадцать, рядом с каждой стоит цена, и «домен» на всех двадцати — это двадцать раз повторённое то, что и так понятно из столбца. В окне покупки и на карточке кнопка по-прежнему называет предмет целиком: там она одна на экран. */ .drow__buy{align-self:flex-start;margin-top:auto; min-width:min(158px,100%);padding:7px 13px; font:600 12px var(--mono);letter-spacing:.01em;line-height:1.3} .drow__sum{font-weight:700;font-variant-numeric:tabular-nums} .drow__when{font-size:11.5px} /* Тематика сразу под именем: это второе, что читают после домена. */ .drow__topic{align-self:flex-start;max-width:100%} /* Место под метку у домена без тематики. Неразрывный пробел внутри нужен затем, что пустой inline-block высоты не имеет вовсе, и зарезервировать он бы ничего не зарезервировал. visibility, а не display:none: скрытый так элемент место занимает. */ .drow__topic--none{visibility:hidden} .drow__topic--none::before{content:"\00a0"} .drow__n{font-family:var(--mono);font-size:13px;color:var(--ink2); font-variant-numeric:tabular-nums;padding-top:4px;text-align:center} .drow__n b{font-weight:600;color:var(--ink)} /* Подкраска DR. Три ступени, а не плавный переход: цвет здесь нужен, чтобы сильный домен нашёлся при пролистывании, а разницу в оттенке на десять единиц глаз всё равно не различает. Слабый DR приглушён, а не покрашен в красное: низкий показатель — не брак, а обычный товар витрины, и обвинять его цветом не за что. */ .dr{font-weight:600} .dr--hi{color:var(--ok)} .dr--mid{color:var(--ink)} .dr--lo{color:var(--mute);font-weight:500} /* История столбиками: один столбик — один год. Год без снимков — низкий серый огрызок, а не пропуск: провал в середине истории надо видеть, а не домысливать по обрыву ряда. */ /* Число снимков и картинка в одной строке: сколько всего и как распределено — разные вопросы, и отвечать на них лучше порознь. */ .arcrow{display:flex;align-items:flex-end;gap:7px} .arcrow__n{flex:none;font:600 13px var(--mono);color:var(--ink2); font-variant-numeric:tabular-nums;line-height:1} /* Столбики по годам. Высота задаётся разметкой в процентах от самого густого года — она и есть второе, что говорит картинка помимо цвета. Выравнивание по нижнему краю обязательно: иначе столбики разной высоты повиснут в воздухе и перестанут читаться рядом. */ .yrs{display:flex;align-items:flex-end;gap:1px;height:20px;width:100%} .yrs__i{flex:1 1 auto;min-width:3px;height:100%;border-radius:2px 2px 0 0; background:var(--sn-fail)} .yrs__i--live{background:var(--sn-live)} .yrs__i--move{background:var(--sn-move)} .yrs__i--empty{background:var(--sn-empty)} .yrs__i--park{background:var(--sn-park)} .yrs__i--spam{background:var(--sn-spam)} .yrs__i--fail{background:var(--sn-fail)} .yrs__i--none{background:var(--sn-empty)} /* Год без снимков — низкий огрызок вне общей шкалы. Высота задана разметкой, здесь только цвет и скругление: провал в середине истории надо видеть, а не домысливать по обрыву ряда. */ .yrs__i--gap{border-radius:2px;align-self:flex-end} .drow__arc{min-width:0;padding-top:2px} /* Индекс: три состояния тремя знаками. Галочка — измеренное «да», прочерк — Google ответил «ничего нет», точка — не спрашивали. Последнюю намеренно делаем еле заметной: это не ответ о домене, а признание пробела, и притягивать к нему взгляд не за чем. */ .drow__idx{padding-top:3px;text-align:center} .idx{font:600 15px var(--sans);line-height:1.2} .idx--yes{color:var(--ok)} .idx--no{color:var(--mute2)} .idx--none{color:var(--line2);font-size:13px} .drow__hist{min-width:0;padding-left:10px;border-left:1px solid var(--line)} /* Описание прошлого: две строки, полный текст по наведению. Разворачивается сам абзац, а не его копия в подсказке — иначе единственный уникальный текст страницы стоял бы на ней дважды. Обёртка .drow__peek нужна против мигания: развёрнутый абзац вылезает за клетку, и если бы наведение считалось по клетке, курсор над вылезшей частью терял бы её, абзац схлопывался, курсор снова попадал на клетку — и так по кругу. Абзац остаётся потомком обёртки, а наведение на потомка считается наведением на родителя, где бы он ни был нарисован. */ .drow__peek{position:relative;margin:7px 0 6px} .drow__text{margin:0;font-size:12.5px;line-height:1.5; color:var(--mute);display:-webkit-box;-webkit-line-clamp:3; -webkit-box-orient:vertical;overflow:hidden} .drow__peek:hover .drow__text{position:absolute;z-index:6; top:-9px;left:-11px;right:-11px; display:block;-webkit-line-clamp:initial;overflow:visible; padding:10px 12px;border-radius:10px; background:var(--tip);color:var(--tipink); box-shadow:0 14px 34px rgba(17,25,34,.32)} /* Последним строкам разворачиваем вверх: вниз им некуда — список обрезан по своей рамке, иначе скруглённые углы не работали бы. */ .drow:nth-last-child(-n+3) .drow__peek:hover .drow__text{ top:auto;bottom:-9px} .drow__more{font:600 12px var(--disp);color:var(--acc);white-space:nowrap} /* Ступень истории. Цвет — единственное, что работает боковым зрением, когда в столбце два десятка строк; поэтому ярлык цветной, а не просто набран словами. Заливка мягкая, а текст насыщенный: три ярких плашки в ряд перетягивают на себя весь экран и заглушают цену, ради которой список и открывают. */ .vtag{display:inline-block;font:600 11.5px var(--disp);line-height:1.35; padding:5px 9px;border-radius:7px;letter-spacing:.01em; border:1px solid transparent} .vtag--ok{background:var(--oksoft);color:var(--ok);border-color:var(--okline)} .vtag--warn{background:var(--warnsoft);color:var(--warn);border-color:var(--warnline)} .vtag--bad{background:var(--badsoft);color:var(--bad);border-color:var(--badline)} .vtag--none{background:var(--bg2);color:var(--mute);border-color:var(--line)} .drow__verdict{padding-top:2px} /* Полоса долей на главной: ширина куска равна числу доменов на ступени, поэтому картинка не может разойтись с каталогом. */ .vbar{display:flex;height:34px;border:1px solid var(--line2); border-radius:10px;overflow:hidden;margin:20px 0 22px} .vbar__i--ok{background:var(--ok)} .vbar__i--warn{background:var(--warn)} .vbar__i--bad{background:var(--bad)} .vdot{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none} .vdot--ok{background:var(--ok)} .vdot--warn{background:var(--warn)} .vdot--bad{background:var(--bad)} /* На узком экране колонки складываются: показатели идут строкой с подписями, взятыми из заголовка таблицы, — иначе четыре числа подряд ничего не значат. */ @media (max-width:900px){ .drows__head{display:none;position:static} .drow,.drows--pick .drow{grid-template-columns:repeat(3,1fr); gap:10px 14px;padding:16px;min-height:0} .drow__hist{border-left:0;padding-left:0} /* Отметка и имя — одной строкой во всю ширину: столбец в тридцать пикселей на телефоне съел бы треть экрана. */ .drow__pick{grid-column:1 / -1;justify-content:flex-start;padding:0} .drow__name{grid-column:1 / -1} .drow__verdict{grid-column:1 / -1} .drow__n{text-align:left;display:flex;flex-direction:column;gap:1px} .drow__n::before{content:attr(data-cap);font:500 10px var(--mono); letter-spacing:.06em;text-transform:uppercase;color:var(--mute)} .drow__arc{grid-column:1 / -1} /* На узком экране знак сам по себе непонятен — подписываем его так же, как числовые клетки. */ .drow__idx{text-align:left;display:flex;align-items:center;gap:7px} .drow__idx::before{content:attr(data-cap);font:500 10px var(--mono); letter-spacing:.06em;text-transform:uppercase;color:var(--mute)} .drow__hist{grid-column:1 / -1} /* На телефоне наведения нет, поэтому описание показываем целиком: обрезанный до двух строк текст без способа его развернуть — это просто потерянный текст. Места здесь достаточно, столбцов нет. */ .drow__text{-webkit-line-clamp:initial;display:block} .drow__peek:hover .drow__text{position:static;padding:0;background:none; color:var(--mute);box-shadow:none} .drow__buy{min-width:0} } /* Логотип: свой файл на каждую тему, лишний прячем. */ .logo{display:block;height:56px;width:auto} .logo--dark{display:none} html[data-theme="dark"] .logo--light{display:none} html[data-theme="dark"] .logo--dark{display:block} @media (max-width:820px){ .logo{height:38px} } /* Телефон. Шапка распирала страницу, но только у вошедшего: гостю в ней логотип, два переключателя и «Вход» — триста пикселей, помещается. После входа добавляются кошелёк и кабинет, выходит четыреста пятьдесят при экране в триста шестьдесят, и переносы везде запрещены. Строка не помещается, и горизонтально едет весь документ: у заголовков срезает первые буквы, у шапки — кнопку кабинета. Лечим переносом, а не подбором ширин. Правая группа переносится целиком, одним куском: логотип остаётся наверху, всё остальное уходит под него и прижимается вправо. Это работает при любой ширине и переживёт что угодно — длинный остаток, третий язык, новую кнопку. Подобранные под сегодняшний набор пиксели не пережили бы и первой такой добавки. */ @media (max-width:640px){ .pubhead__in{flex-wrap:wrap;gap:10px;padding:0 12px} .pubhead__side{margin-left:auto} } /* Обёртка для остальных таблиц: на телефоне они прокручиваются вбок, а не ломаются переносами. */ .tblwrap{overflow-x:auto;margin:14px 0 6px} /* Неделя одной полосой: семь столбиков вместо семи строк таблицы — так видно форму, а не только числа. */ .week{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 6px} .week__d{flex:1 1 110px;display:flex;flex-direction:column;gap:2px; padding:12px 14px;border:1px solid var(--line);border-radius:12px; background:var(--card)} .week__d b{font:700 22px var(--disp);color:var(--ink)} .week__d span{font-size:11.5px} /* Две колонки карточек для текстовых блоков главной: источники, способы покупки, сценарии. Одна колонка на всю ширину заставляет глаз ехать через весь экран и обратно на каждой строке. */ .cards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;margin:16px 0} .cards2 .card{margin:0} @media (max-width:820px){ .cards2{grid-template-columns:1fr} } /* Словарь терминов: определение с отступом под термином — так видно, где кончается одно и начинается другое, без разделительных линий. */ .gloss{margin:16px 0;max-width:var(--measure)} .gloss dt{font:600 15px var(--disp);color:var(--ink);margin:14px 0 4px} .gloss dd{margin:0;color:var(--mute);font-size:14px} /* Вопрос и ответ. Свёрнуто: десять развёрнутых ответов — это экран текста, в котором свой вопрос не находится. */ .qa{border-bottom:1px solid var(--line);padding:2px 0} .qa>summary{cursor:pointer;list-style:none;padding:13px 0; font:600 15px var(--sans);color:var(--ink);display:flex;gap:12px; align-items:baseline} .qa>summary::-webkit-details-marker{display:none} .qa>summary::before{content:'+';color:var(--acc);font:600 16px var(--mono); flex:none} .qa[open]>summary::before{content:'–'} .qa p{margin:0 0 14px 24px;max-width:var(--measure);color:var(--mute);font-size:14px} /* Первый экран в две колонки: слева обещание, справа — что разобрано последним. Правая колонка отвечает на «а живой ли этот сайт» до того, как человек прокрутит до каталога. */ .hero__in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:40px;align-items:center} .feed{border:1px solid var(--line);border-radius:14px;background:var(--card); box-shadow:var(--shadow);overflow:hidden} .feed__cap{display:flex;justify-content:space-between;align-items:center; gap:10px;padding:12px 16px;border-bottom:1px solid var(--line); background:var(--bg2);font:600 11.5px var(--mono);letter-spacing:.06em; text-transform:uppercase;color:var(--mute)} .feed__row{display:flex;gap:13px;align-items:flex-start;padding:12px 16px; border-bottom:1px solid var(--line);color:var(--ink)} .feed__row:last-child{border-bottom:0} .feed__row:hover{background:var(--soft);color:var(--ink)} /* В ленте вместо оценки стоит DR: ступень истории названа словами в строке под именем, и дублировать её квадратиком незачем, а число рядом даёт то, чего в словах нет. */ .feed__dr{flex:none;min-width:52px;height:42px;display:flex; align-items:center;justify-content:center;border-radius:10px; font:600 13px var(--mono);color:var(--ink); background:var(--accsoft);border:1px solid var(--accline)} .feed__body{min-width:0;display:flex;flex-direction:column;gap:3px} .feed__dom{font-size:13px;overflow-wrap:anywhere} .feed__why{font:500 11.5px/1.4 var(--mono);color:var(--mute)} @media (max-width:900px){ .hero__in{grid-template-columns:1fr;gap:28px} } /* ── полосы содержимого ─────────────────────────────────────────────────── */ /* Главная идёт полосами во всю ширину с чередующимся фоном: так видно, где кончается один разговор и начинается другой, — на длинной странице это важнее любых отступов. */ .pub--none{max-width:none;padding:0} .band2{border-bottom:1px solid var(--line);padding:42px 0} .band2--tint{background:var(--bg2)} .band2 h2{margin-bottom:10px} .band2 .lead{margin:0 0 24px} .h2--sm{font-size:21px} .note{font-size:14px;color:var(--ink2);max-width:76ch;margin:8px 0 0; padding-top:16px;border-top:1px solid var(--line)} /* Колонки без карточек: заголовок с чертой под ним, текст, моно-строка. Приём из макета — он делает страницу справочником, а не витриной плиток. */ .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:0 36px} .cols__i{padding:0 0 22px} .cols__i h3{font:600 16px var(--disp);padding-bottom:9px;margin:0 0 10px; border-bottom:1px solid var(--ink)} .cols__i p{font-size:14.5px;color:var(--ink2);margin:0 0 10px;max-width:46ch} .cols__note{font:600 12.5px var(--mono);color:var(--acc);margin:0} .cols--w .cols__i h3{border:0} /* Полоса весов оценки. Ширина куска равна весу: доли видно раньше, чем прочитаны названия. */ .wbar{display:flex;width:100%;height:60px;border:1px solid var(--line2); border-radius:9px;overflow:hidden;margin:0 0 22px} .wbar__i{display:flex;align-items:center;justify-content:center; font:700 13px var(--mono);color:var(--onacc)} .wbar__i--1{background:var(--ink)} .wbar__i--2{background:var(--acc)} .wbar__i--3{background:var(--acc);opacity:.82} .wbar__i--4{background:var(--acc);opacity:.64} .wbar__i--5{background:var(--acc);opacity:.46} .wbar__i--6{background:var(--acc);opacity:.3} .wrow{display:flex;align-items:center;gap:8px;margin-bottom:7px} .wname{font-size:14.5px;font-weight:600;color:var(--ink)} .wpct{font-size:13.5px;font-weight:700;color:var(--acc);margin-left:auto} .wdot{width:11px;height:11px;border-radius:3px;flex:none} .wdot--1{background:var(--ink)} .wdot--2{background:var(--acc)} .wdot--3{background:var(--acc);opacity:.82} .wdot--4{background:var(--acc);opacity:.64} .wdot--5{background:var(--acc);opacity:.46} .wdot--6{background:var(--acc);opacity:.3} /* Нумерованный список проверок: номер моноширинным в своей колонке. */ .numlist{list-style:none;padding:0;margin:0;max-width:84ch; border-top:1px solid var(--line)} .numlist li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:16px; padding:16px 0;border-bottom:1px solid var(--line)} .numlist__n{font:700 13px var(--mono);color:var(--acc);padding-top:3px} .numlist h3{font:600 16px var(--disp);margin:0 0 5px} .numlist p{font-size:14.5px;color:var(--ink2);margin:0;max-width:74ch} /* Сценарии: слева название, справа объяснение. */ .deflist{max-width:88ch;border-top:1px solid var(--line)} .deflist>div{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:8px 28px;padding:16px 0;border-bottom:1px solid var(--line)} .deflist h3{font:600 16px var(--disp);margin:0} .deflist p{font-size:14.5px;color:var(--ink2);margin:0 0 6px;max-width:66ch} .deflist__a{font-size:14px;font-weight:600} /* Словарь: две колонки терминов. */ .gloss{margin:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 36px} .gloss>div{padding:11px 0;border-bottom:1px solid var(--line)} .gloss dt{font-size:14.5px;font-weight:600;color:var(--ink);margin:0 0 3px} .gloss dd{font-size:14px;color:var(--ink2);margin:0;max-width:48ch} .qas{max-width:86ch;border-top:1px solid var(--line2)} /* Ссылки перелинковки в подвале. */ .foothub{display:grid;grid-template-columns:2fr 1fr;gap:24px 36px; padding-bottom:26px;margin-bottom:22px;border-bottom:1px solid var(--line)} .foothub__ls{display:flex;flex-wrap:wrap;gap:8px 18px} .foothub__ls a{font-size:13.5px;color:var(--ink2)} .foothub__ls a:hover{color:var(--acc)} @media (max-width:820px){ .foothub{grid-template-columns:1fr} } /* ── лента разбора ──────────────────────────────────────────────────────── */ /* Показываем четыре строки из дюжины и прокручиваем их. Точка рядом с заголовком мигает — этого хватает, чтобы блок читался как живой; бегущих цифр и подставных доменов здесь нет. */ .feed__live{width:8px;height:8px;flex:none;border-radius:50%; background:var(--acc);box-shadow:0 0 0 3px var(--accsoft); animation:feedpulse 1.8s ease-in-out infinite} @keyframes feedpulse{0%,100%{opacity:1}50%{opacity:.35}} .feed__list{max-height:264px;overflow:hidden;position:relative} .feed__row{transition:opacity .45s ease,transform .45s ease} .feed__flag{flex:none;margin-left:auto;align-self:center;width:22px; height:22px;display:flex;align-items:center;justify-content:center; border-radius:6px;font-size:12px;color:var(--mute);background:var(--soft)} .feed__flag--ok{color:var(--ok);background:var(--okline)} .feed__flag--bad{color:var(--bad);background:var(--badline)} @media (prefers-reduced-motion:reduce){ .feed__live{animation:none} .feed__row{transition:none} } /* Отметка строки для выдачи списком — свой столбец у левого края. Раньше галочка с подписью «отметить» стояла внутри клетки имени, над доменом, и отодвигала вниз всё остальное; при этом сама она была в каждой строке на новом месте, потому что клетки разной высоты. Столбцом она стоит ровным рядом и попадается под курсор сама — а подпись ей не нужна, галочку у края таблицы читают без объяснений. */ .drow__pick{display:flex;align-items:center;justify-content:center; padding-top:5px} .drow__pick input{width:16px;height:16px;accent-color:var(--acc);cursor:pointer} .drow--on{background:var(--accsoft)} .drows form{margin:0} /* Строка во всю ширину колонки: обычный .lead обрезан по длине, удобной для чтения абзаца, но одиночная строка под заголовком выглядит из-за этого недорисованной. */ .lead--wide{max-width:none} /* Ступень истории на карточке домена. Полоса под заголовком, а не ярлык в углу: это главный вывод страницы, и он должен читаться раньше цены. Левая цветная граница вместо заливки во всю ширину — плашка на четверть экрана перетягивает внимание с самой истории, ради которой карточку и открыли. */ .vhead{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap; margin:18px 0 4px;padding:14px 16px;border:1px solid var(--line); border-left-width:4px;border-radius:12px;background:var(--card)} .vhead--ok{border-left-color:var(--ok)} .vhead--warn{border-left-color:var(--warn)} .vhead--bad{border-left-color:var(--bad)} .vhead--none{border-left-color:var(--line2)} .vhead p{margin:0;flex:1 1 320px;font-size:14px;line-height:1.55; color:var(--ink2)} /* Цвета типов снимков. Один набор на полоску в списке и на график в карточке: два набора разошлись бы, и один и тот же домен выглядел бы в списке и на своей странице по-разному. */ :root{ --sn-live:#2e8b3d; --sn-move:#5a7fb5; --sn-empty:#c9d0d8; --sn-park:#8a6d3b; --sn-spam:#8a2e86; --sn-fail:#aab3bd; } html[data-theme="dark"]{ --sn-live:#4fb48c; --sn-move:#6e93c9; --sn-empty:#2a323c; --sn-park:#b08a4e; --sn-spam:#b478c4; --sn-fail:#3d4650; } /* Полоска истории. Ширина во всю колонку, высота в одиннадцать пикселей: это не график, а форма, которую ловят боковым зрением при прокрутке списка. */ .strip__lab{display:block;margin-top:5px;font-size:10.5px;color:var(--mute); letter-spacing:.02em} /* График истории в карточке: та же история, но по настоящему времени. Здесь важны промежутки — год без единого снимка это год, когда сайта не было, и равномерная раскладка его бы спрятала. */ .arc{margin:6px 0 0} .arc__svg{display:block;width:100%;height:auto} .arc__key{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px; font-size:11.5px;color:var(--mute);font-family:var(--mono)} .arc__key span{display:inline-flex;align-items:center;gap:6px} .arc__key i{width:9px;height:9px;border-radius:2px;flex:none} /* Кнопка входа через Google. Своей рисовки, а не гугловой картинкой: картинка тянулась бы с чужого сервера на каждой загрузке страницы входа, а значок — это четыре пути, и он ложится в тот же файл стилей, что и всё остальное. */ .gbtn{display:flex;align-items:center;justify-content:center;gap:10px; width:100%;padding:12px 16px;font-size:14.5px} .gbtn__i{width:18px;height:18px;flex:none} .gor{text-align:center;margin:14px 0;font-size:13px;position:relative} .gor::before,.gor::after{content:'';position:absolute;top:50%;width:28%; height:1px;background:var(--line2)} .gor::before{left:0} .gor::after{right:0} /* Постоянный адрес кабинета. Поле, а не просто ссылка: адрес длинный, и выделять его мышью по строке текста неудобно — а именно выделять и копировать с ним и нужно. */ .mylink{margin:14px 0 18px} .mylink label{display:block;font:600 12px var(--mono);letter-spacing:.06em; text-transform:uppercase;color:var(--mute);margin-bottom:6px} .mylink__row{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap} .mylink__row input{flex:1 1 320px;min-width:0;padding:10px 12px; border:1px solid var(--line2);border-radius:9px;background:var(--field); color:var(--ink2);font-size:13px} .mylink p{margin:8px 0 0;font-size:12.5px} .drow__foot{display:flex;align-items:baseline;gap:2px;margin-top:6px} /* Окно покупки. Родное диалоговое окно браузера, а не свой слой: оно само перехватывает управление с клавиатуры, закрывается по Esc и не даёт прокручивать страницу под собой — всё это пришлось бы писать руками и делать хуже. */ /* Окно покупки. Узкое — четыреста семьдесят, а не шестьсот двадцать: в нём одно решение и одно число, и растянутое на полэкрана оно выглядит страницей, а не вопросом. overflow:hidden держит скруглённые углы под цветной шапкой; ничего всплывающего внутри окна нет, так что обрезать нечего. */ .peek{width:min(470px,92vw);padding:0;border:1px solid var(--line2); border-radius:14px;background:var(--card);color:var(--ink); overflow:hidden;box-shadow:0 24px 70px rgba(17,25,34,.3)} .peek::backdrop{background:rgba(17,25,34,.55)} .peek__dom{font:700 15px var(--mono);color:var(--ink); overflow-wrap:anywhere} /* Крестик рамкой, а не голым знаком: голый теряется в шапке рядом с крупным именем домена, и по нему промахиваются. */ .peek__x{flex:none;width:30px;height:30px;border:1px solid var(--line2); background:var(--card);border-radius:7px;font:400 16px/1 var(--sans); color:var(--ink2);cursor:pointer;padding:0} .peek__x:hover{color:var(--ink);background:var(--soft)} /* Шапка полосой поверх окна. Подпись над именем нужна затем, что имя здесь — это код вида D-3F9A21.com, и без неё непонятно, что окно вообще предлагает. */ .buy__cap{display:flex;align-items:flex-start;justify-content:space-between; gap:14px;padding:16px 18px;background:var(--bg2); border-bottom:1px solid var(--line)} .buy__who{min-width:0} .buy__eye{display:block;font:600 10.5px var(--mono);letter-spacing:.13em; text-transform:uppercase;color:var(--mute);margin-bottom:6px} .buy__in{padding:18px} /* Сумма — крупно и отдельной плашкой. Это единственное число в окне, и согласие человек даёт именно на него. */ .buy__fee{display:flex;align-items:baseline;justify-content:space-between; gap:14px;padding:13px 15px;border-radius:10px; background:var(--accsoft);border:1px solid var(--acc)} .buy__fee span{font-size:13.5px;color:var(--ink2)} .buy__fee b{font:700 21px var(--mono);color:var(--acc2); font-variant-numeric:tabular-nums;white-space:nowrap} /* Оговорка гостю: кнопка ниже ведёт на вход, а не покупает. Цвет предупреждения, а не ошибки — ничего не сломалось, человеку просто надо сделать шаг раньше. */ .buy__warn{display:flex;gap:9px;align-items:flex-start;margin:14px 0 0; padding:11px 13px;border-radius:9px;font-size:13px;line-height:1.5; background:var(--warnsoft);border:1px solid var(--warnline); color:var(--warn)} .buy__warn span:first-child{flex:none;font-weight:700} /* Порядок действий по шагам. Номера рисуем сами: у обычного списка номер стоит за краем текста, а здесь он должен читаться как часть строки — их всего четыре, и это последовательность, а не перечень. */ .buy__how{list-style:none;margin:9px 0 0;padding:0;display:flex; flex-direction:column;gap:9px;counter-reset:step} .buy__how li{display:flex;gap:10px;font-size:13.5px;line-height:1.5; color:var(--ink2);counter-increment:step} .buy__how li::before{content:counter(step);flex:none; font:700 13px var(--mono);color:var(--acc)} [data-buy-tell]{margin-top:18px} .buy__out{margin:14px 0 0;padding:12px 14px;border-radius:10px; font-size:14.5px;line-height:1.55} .buy__out--ok{background:var(--oksoft);color:var(--ok); border:1px solid var(--okline)} .buy__out--bad{background:var(--badsoft);color:var(--bad); border:1px solid var(--badline)} /* Подтверждение растянуто, отказ по своему тексту: две одинаковые кнопки рядом заставляют читать обе, чтобы понять, какая из них что делает. */ .buy__row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px} .buy__row .btn{flex:1 1 190px;padding:12px 18px;font-size:14px} .buy__row .btn--ghost{flex:0 1 auto}