/* ===================================================================== ОБЩИЕ СТИЛИ КАТАЛОГА >>> АКЦЕНТНЫЙ ЦВЕТ: меняйте только --accent / --accent-dark <<< ===================================================================== */ :root{ /* Затемнён с #e8542a: белым по нему выходило 3.66 при норме 4.5. Сейчас 4.51 и белым по акценту, и акцентом по белому. */ --accent:#ce4b25; --accent-dark:#b03f1f; --bg:#ffffff; --bg-soft:#f5f6f8; --text:#1c1f24; --text-soft:#5b6470; /* Публичная тема не объявляла --muted, хотя к нему обращались в 22 местах: свойство было недействительно, и цвет наследовался от родителя — где-то случайно совпадал с --text-soft, где-то выходил почти чёрным (.ls-qr__fail). Все обращения мельче 18.7px, то есть норма 4.5; на --bg-soft её держит самый светлый серый вплоть до #6b717b (4.54), по белому 4.91. Значение админки #6b7280 не подошло: на --bg-soft оно даёт 4.47. */ --muted:#6b717b; --border:#e6e8ec; --white:#fff; --green:#1aa251; --amber:#b8860b; /* Зелёный и жёлтый — для заливок и значков. Текстом они давали 3.3 по белому и 2.6 по своей подложке при норме 4.5; для текста — свои тона, затемнённые Contrast::ink() до нормы на подложке поверх серого фона. Синий текст меток (в проекте было четыре разных синих) — тоже один. */ --green-ink:#13753a; --amber-ink:#846008; --blue-ink:#325dc3; /* Золото оценок. Шкала объявлений уже ездила на этом тоне, а каталог, кабинет и карта — на прежнем светлом: тот давал по белому 2.03 при норме 3 для графики. Шкала объявлена role="img" с подписью «Оценка: 4,7 из 5», а в списке отзывов рядом с ней числа нет — послабление «дублируется текстом» там не действует. Здесь 3.5 по белому и 3.29 по --bg-soft. */ --gold:#bf7a00; --radius:14px; --shadow:0 8px 24px rgba(20,25,35,.07); --maxw:1100px; } *{margin:0;padding:0;box-sizing:border-box} /* Атрибут hidden должен скрывать всегда. Браузерное правило [hidden]{display:none} — самое слабое по специфичности, и любое .foo{display:flex} его перебивает. Скрипты по всему проекту прячут элементы через element.hidden = true, и там, где у элемента был свой display, это молча не работало: cookie-баннер не закрывался, фильтры категорий ничего не скрывали, стрелки галереи висели у объявления с одной фотографией. Правило то же, что в preflight Tailwind. */ [hidden]:where(:not([hidden="until-found"])){display:none!important} html{scroll-behavior:smooth} body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; color:var(--text);background:var(--bg-soft);line-height:1.55;-webkit-font-smoothing:antialiased} /* Заголовки и название сайта — фирменным Onest: системный шрифт на Windows, iPhone и Android разный, и заголовки выглядели по-разному. В файле только латиница и кириллица и одно начертание, 800 (18 КБ); заголовки в 700 берут его же. Лицензия OFL — рядом с файлом. Файл кэшируется на год (.htaccess): поменяли шрифт — меняйте и имя файла. На странице создателя заголовки — его шрифтом (creators.css, .cr-page). */ @font-face{font-family:Onest;font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/onest-800.woff2) format("woff2")} h1,h2,.nav__brand{font-family:Onest,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif} a{color:inherit;text-decoration:none} /* Кнопки и поля — шрифтом страницы. Браузер даёт им свой (Arial, 13.33px): «Войти», «Хорошо» в плашке cookie и счётчик в донате были набраны не тем шрифтом, что всё вокруг. Только гарнитура и размер — не весь font: он сбросил бы и высоту строки, и поля стали бы выше. */ button,input,select,textarea{font-family:inherit;font-size:inherit} /* Найденное в поиске по записям и по чату. */ mark{background:#fff3bf;color:inherit;padding:0 3px;border-radius:4px} /* Общая обёртка: шапка, подвал и страницы. Не мёртвый стиль — class="container" стоит в шаблонах; без него подвал и шапка прижимались к краям экрана. */ .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px} /* Шапка */ /* overflow-x:clip, а не hidden: hidden сделал бы шапку прокручиваемым блоком и обрезал бы выпадающие меню снизу. clip обрезает только вбок и вертикаль оставляет видимой. Это страховка: если ряд ссылок когда- нибудь снова перестанет помещаться, поедет он, а не вся страница. */ .nav{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20; overflow-x:clip;transition:box-shadow .2s} /* Страницу прокрутили — тень под шапкой: видно, что под ней что-то есть. */ .nav.is-scrolled{box-shadow:0 8px 24px -16px rgba(20,25,35,.35)} /* Ширина — от .container, как у страниц и подвала: логотип стоит над краем текста. Прежние 1180 были под девять ссылок вошедшего и страницы форума; разделы сняты, и шапка торчала на 40 пикселей с каждой стороны. */ .nav__in{display:flex;align-items:center;gap:8px;height:62px} .nav__brand{font-weight:800;font-size:19px;letter-spacing:-.02em;flex:none} .nav__brand span{color:var(--accent)} /* gap:3 и отступы по 12, а не по 13: с прежними ряд ссылок у вошедшего пользователя требовал 1109 пикселей при контейнере в 1100 — меню профиля вылезало за край на любой ширине экрана. */ .nav__links{margin-left:auto;display:flex;gap:3px;align-items:center;min-width:0} .nav__links a{padding:8px 12px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--text-soft);white-space:nowrap; display:inline-flex;align-items:center;gap:6px;transition:background .15s,color .15s} .nav__links a:hover{background:var(--bg-soft);color:var(--text)} /* Всё в ряду шапки — 44 в высоту, как обычная кнопка (3.3, владелец 04.10: все таблеткой, главная 44); было 38, 40 и 42 вперемешку. Только сам ряд (>): в меню пользователя и в окне колокольчика ссылки свои. */ .nav__links>a{min-height:44px} /* Где вы сейчас — светлой подложкой цвета сайта. Залита целиком только главная кнопка («Регистрация», «Создать страницу»): залитый активный пункт рядом с ней читался второй такой же кнопкой — на «Входе» «Войти» и «Регистрация» слипались в одну оранжевую полосу (3.3, п. 7). */ .nav__links a.is-active{background:color-mix(in srgb,var(--accent) 10%,#fff);color:var(--accent-dark)} .nav__links a.nav__cta{background:var(--accent);color:var(--white);font-weight:700} .nav__links a.nav__cta:hover{background:var(--accent-dark);color:var(--white)} .nav__links a.nav__search{padding:8px 10px} /* Справочные страницы для гостя — только в бургере (см. layouts/app). */ .nav__links a.nav__extra{display:none} .nav__search svg{width:18px;height:18px} .nav__links a .tkico{width:17px;height:17px;flex:none} /* «Создатели» — главное место сайта: цветом сайта и жирнее даже вне раздела, в разделе — ещё и светлой подложкой, как любой активный пункт. Подложка вне раздела выдавала бы его за активный. */ .nav__links a.nav__main{color:var(--accent-dark);font-weight:700} .nav__links a.nav__main:hover,.nav__links a.nav__main.is-active{background:color-mix(in srgb,var(--accent) 10%,#fff);color:var(--accent-dark)} /* «Моя страница» — своя, поэтому обведена: её ищут глазами чаще других. */ .nav__links a.nav__mine{border:1px solid var(--border);padding:7px 13px 7px 11px;color:var(--text)} .nav__links a.nav__mine:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));background:var(--white)} /* На своей странице — светлой подложкой, как «Создатели» в разделе. Своё правило, а не общее .is-active: правила .nav__mine выше перебивают его (цвет текста, а под мышью — белый фон). */ .nav__links a.nav__mine.is-active{border-color:transparent;background:color-mix(in srgb,var(--accent) 10%,#fff);color:var(--accent-dark)} /* Меню пользователя. Имя — до 260 пикселей: при прежних 180 «Аудит Проверка» обрезалось при пустой половине шапки. Сжимается кнопка, только когда ряду не хватает места, — тогда и обрежется имя, а шапка не вылезет за край; уже аватара со стрелкой (82 пикселя) — нет. */ .nav__user{position:relative;flex:0 1 auto;min-width:82px} .nav__user>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer; padding:5px 12px 5px 5px;border-radius:999px;border:1px solid var(--border);background:var(--white); font-size:14px;font-weight:700;color:var(--text);max-width:min(260px,100%);transition:border-color .15s,background .15s} .nav__user>summary::-webkit-details-marker{display:none} .nav__user>summary:hover{border-color:var(--accent)} .nav__user[open]>summary{border-color:var(--accent);background:#fff5f1} /* Аватар 32 в рамке 44 с отступом 5 — круги концентрические. */ .nav__ava{position:relative;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#ff7a3d,var(--accent)); color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:none} .nav__uname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nav__caret{width:15px;height:15px;color:var(--text-soft);flex:none;transition:transform .15s} .nav__user[open] .nav__caret{transform:rotate(180deg)} .nav__menu{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;background:var(--white); border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 40px rgba(20,25,35,.16);padding:6px;z-index:30} .nav__menu a,.nav__menu button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;border-radius:9px; font-size:14px;font-weight:600;color:var(--text);border:none;background:none;cursor:pointer;font-family:inherit;text-align:left} .nav__menu a:hover,.nav__menu button:hover{background:var(--bg-soft)} .nav__menu hr{border:none;border-top:1px solid var(--border);margin:5px 8px} /* Кто вошёл — над пунктами: имя на средних экранах из шапки спрятано. */ .nav__who{display:flex;flex-direction:column;gap:1px;margin:0 0 5px;padding:8px 12px 10px;border-bottom:1px solid var(--border)} .nav__who b{font-size:14px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nav__who span{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Баланс и Премиум — с числом справа. */ .nav__menu a.nav__num{justify-content:space-between} .nav__num small{font-size:12.5px;font-weight:700;color:var(--text-soft);font-variant-numeric:tabular-nums} .nav__num small.is-on{color:#8a6c1a} .nav__menu .out{color:#d23f31} .nav__menu .out:hover{background:rgba(210,63,49,.07)} /* «Войти» гостя рядом с бургером — только на телефоне (см. layouts/app). */ .nav__enter{display:none} /* Бургер (мобильные) */ .nav__burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--border);border-radius:50%; background:var(--white);cursor:pointer;flex:none;align-items:center;justify-content:center;font-size:18px;color:var(--text)} .nav__burger .tkico{width:20px;height:20px} /* Два значка в кнопке вместо подмены текста: иначе бургер оставался символом ☰ и не мог быть иконкой. Видимый выбирается классом .open у nav. */ .nav__burger .i-close,.nav.open .nav__burger .i-open{display:none} .nav.open .nav__burger .i-close{display:block} @media (max-width:900px){ .nav__burger{display:inline-flex} .nav__enter{display:inline-flex;align-items:center;min-height:44px;margin-left:auto;padding:9px 14px;border-radius:999px; font-size:15px;font-weight:600;color:var(--text-soft);white-space:nowrap} .nav__enter:hover{background:var(--bg-soft);color:var(--text)} .nav__enter.is-active{background:color-mix(in srgb,var(--accent) 10%,#fff);color:var(--accent-dark)} .nav__enter + .nav__burger{margin-left:6px} .nav__links a.nav__login{display:none} .nav__links{display:none;position:absolute;left:0;right:0;top:100%;margin:0;padding:10px 16px 14px; background:var(--white);border-bottom:1px solid var(--border);box-shadow:0 18px 34px rgba(20,25,35,.12); flex-direction:column;align-items:stretch;gap:2px} .nav.open .nav__links{display:flex} .nav__links a{padding:11px 14px;font-size:15px} .nav__links a.nav__extra{display:inline-flex} .nav__user{align-self:stretch} .nav__user>summary{width:100%;max-width:none;margin-top:4px} .nav__menu{position:static;box-shadow:none;border:none;padding:0 0 0 14px;min-width:0} .nav__links a.nav__mine{border-color:transparent} } /* Заголовок страницы */ .head{padding:38px 0 6px} .head h1{font-size:clamp(24px,4vw,34px);font-weight:800;letter-spacing:-.02em} .head p{color:var(--text-soft);margin-top:6px;font-size:16px} /* Кнопки — одна форма на весь сайт, кроме страниц создателей (3.3, владелец 04.10: все таблеткой, обычная — 44 пикселя, норма места нажатия). Маленькая (--sm) — 34, для строк списков и мелких действий. Рамка — у всех, у залитых прозрачная: залитая и с обводкой одной высоты (были 45 и 47). Высота строки — своя: