/* Шрифты лежат у нас. Собрано node sborka/shrifty.mjs — руками не править. */ /* cyrillic */ @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/oformlenie/shrifty/golos-text-400-700-cyrillic.woff2) format('woff2'); unicode-range: U+0401, U+0404, U+0406-0407, U+040E, U+0410-044F, U+0451, U+0454, U+0456-0457, U+045E, U+0490-0491, U+2116; } /* latin-ext */ @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/oformlenie/shrifty/golos-text-400-700-latin-ext.woff2) format('woff2'); unicode-range: U+20BD; } /* latin */ @font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/oformlenie/shrifty/golos-text-400-700-latin.woff2) format('woff2'); unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AD, U+00B0, U+00B7, U+00BB, U+00D7, U+2011-2014, U+2018-2019, U+201C-201E, U+2026; } /* cyrillic */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 600; font-display: swap; src: url(/oformlenie/shrifty/lora-600-cyrillic.woff2) format('woff2'); unicode-range: U+0401, U+0404, U+0406-0407, U+040E, U+0410-044F, U+0451, U+0454, U+0456-0457, U+045E, U+0490-0491, U+2116; } /* latin-ext */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 600; font-display: swap; src: url(/oformlenie/shrifty/lora-600-latin-ext.woff2) format('woff2'); unicode-range: U+20BD; } /* latin */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 600; font-display: swap; src: url(/oformlenie/shrifty/lora-600-latin.woff2) format('woff2'); unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AB, U+00AD, U+00B0, U+00B7, U+00BB, U+00D7, U+2011-2014, U+2018-2019, U+201C-201E, U+2026; } /* ========================================================================== Оформление сайта «Садху-санга». Взято из утверждённого макета 21.08.2026 (docs/mockups/bronirovanie/). Правило: цвета живут ТОЛЬКО здесь, в переменных. Ни один блок не красится сам — иначе сайт снова расползётся, как расползся прежний. ========================================================================== */ :root{ /* ── ШРИФТЫ ───────────────────────────────────────────────────────────── ⚠️ ЖИВУТ ТОЛЬКО ЗДЕСЬ — по тому же правилу, что и цвета выше по файлу. До 01.09 «'Lora',Georgia,serif» стояло в шести местах отдельными строками: смена шрифта была не правкой, а перебором, и одну строку легко пропустить. Оператор попросил в тот день поставить на сайт шрифт старого сайта — и первое, обо что споткнулась эта простая просьба, был именно перебор. Сторож `sborka/proverka-shriftov.mjs` держит, чтобы имя шрифта не расползлось по файлу снова. Набор берётся `node sborka/shrifty.mjs` — там же список того, что качаем. Меняешь шрифт ЗДЕСЬ — поменяй и там, иначе файла не окажется. */ /* ⚠️ TAHOMA ПЕРВОЙ — ШРИФТ СТАРОГО САЙТА, снятый оператором 01.09 прямо с него: `40px Tahoma, Geneva, sans-serif`. Он СИСТЕМНЫЙ: стоит в Windows и на Маке, файла не требует — старый сайт вообще ничего не загружал. ⭐️ А следом — НАШ Golos Text, и это не украшение. На Android и Linux Tahoma не установлена, и без подстраховки заголовок у гостя с телефона взял бы системный шрифт — какой именно, решил бы телефон. С подстраховкой на Windows и Маке всё ровно как на старом сайте, а на телефоне наш шрифт, один и тот же у всех. Файл его уже лежит в `oformlenie/shrifty/`. Geneva и sans-serif оставлены хвостом, как было в старом. */ --shrift-zag:Tahoma,'Golos Text',Geneva,sans-serif; /* заголовки */ --shrift-tekst:'Golos Text',system-ui,sans-serif; /* весь остальной текст */ /* Бирюза на песке — выбрано оператором 21.08.2026 */ --fon:#fdfbf7; --karta:#ffffff; --tihiy:#f6f1e9; --tekst:#221c14; --tekst2:#7d7263; --gran:#e7ddcd; --akc:#12776d; --akc-fon:#f0f8f6; --akc-gran:#c2ded9; --akc-tekst:#0d5b53; --logo:#e07a1f; /* Подвал — прохладный и светлый: страница заканчивается, но не темнеет. */ --podval-fon:#e6f3f0; --podval-tiho:#5d8c85; /* Карточка фактов — тёплая, единственное тёплое пятно среди прохладного. */ --fakty-fon:#f6ecdb; --fakty-gran:#e3d2b2; --fakty-metka:#a3641a; --fakty-tiho:#8a7550; --fakty-tekst:#4a3a1c; --oblozhka:#10312d; /* тёмная земля обложки — под ней читаются белые буквы */ /* Фирменные фигуры. Снято со скриншотов на глаз — оператор заменит точными. */ --figura-1:#f5821f; --figura-2:#ffcc00; --figura-3:#8dc63f; --figura-4:#27bdbe; --figura-5:#ec008c; --figura-6:#92278f; /* Плашки. Раньше все три были одной бледной бирюзой — оттого страница казалась одноцветной, а «важно» ничем не отличалось от «объявления» (оператор, 21.08). Цвета не выдуманы: это те же шесть фигур узора, разведённые до бледного, по одному на роль. Занято и не трогаем: бирюза — ссылки, кнопки, подвал; оранжевый — логотип и карточка «Коротко». */ --vazhno-fon:#fdf6e3; --vazhno-gran:#e8d296; --vazhno-tekst:#5e4712; --obyav-fon:#f3f9e9; --obyav-gran:#c7e0a0; --obyav-tekst:#3d5a18; --obyav-znachok:#6ea22a; --otschet-fon:#fdeef6; --otschet-gran:#f0bfd8; --otschet-tekst:#8c1257; /* Особо важная ссылка. Оператор 25.08: «если красным не выделить, то никто не прочитает». Красный на сайте до сих пор не был занят НИЧЕМ — и это его главная ценность: он значит ровно одно и потому работает. Раздай его по вкусу — и он перестанет значить что-либо через неделю. Поэтому краска одна, а не выбор из палитры, и включается она смыслом («ссылка особо важная»), а не цветом. */ --vazhno-ssylka:#b3261e; --citata-gran:#c3a4d4; /* Единый ритм: столько же между абзацами, сколько между блоками. Иначе перед списком просвет складывался вдвое — отступ последнего абзаца плюс промежуток между блоками (оператор, 21.08). */ --ritm:18px; /* Приподнятость. Поднято всё, но не поровну: карточка «Коротко» выше остальных вдвое. Тень — не украшение, а высказывание о важности; если поднять всё одинаково, она перестаёт что-либо значить. Свет падает сверху: отсюда светлая кромка по верхнему краю. */ --ten:0 1px 2px rgba(122,95,45,.11), 0 10px 20px -8px rgba(122,95,45,.24); --ten-vyshe:0 2px 3px rgba(122,95,45,.18), 0 18px 34px -10px rgba(122,95,45,.34); /* Кромки — грань предмета: верх освещён, низ затенён. Живут ВНУТРИ карточки, поэтому объёма прибавляют, а высоты странице — нет. */ --kromka:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(34,28,20,.055); } html{scrollbar-gutter:stable} *{box-sizing:border-box} body{margin:0;background:var(--fon);color:var(--tekst); font-family:var(--shrift-tekst);-webkit-font-smoothing:antialiased} a{color:var(--akc);text-decoration:none} a:hover{text-decoration:underline} :focus-visible{outline:2px solid var(--akc);outline-offset:2px} .zag{font-family:var(--shrift-zag);letter-spacing:-.01em;text-wrap:balance} .metka{font-size:11px;font-weight:600;color:var(--tekst2);text-transform:uppercase;letter-spacing:.05em} .okno{font-size:11px;color:var(--tekst2);border:1px solid var(--gran);border-radius:4px; padding:2px 7px;white-space:nowrap} .karta{background:var(--karta);border:1px solid var(--gran);border-radius:14px;padding:20px; display:flex;flex-direction:column;gap:11px} /* --- шапка --- */ /* Шапка прижата к верху: при прокрутке уезжала вся, и перейти на другую страницу можно было, только вернувшись наверх (оператор, 21.08). Прокрутили — ужимается, чтобы не съедать экран: подпись уходит, название мельчает, поля сжимаются. Остаётся строка для перехода. */ .shapka{position:sticky;top:0;z-index:20; display:flex;align-items:center;justify-content:space-between;gap:16px; padding:17px 44px;border-bottom:1px solid var(--gran);background:var(--fon); transition:padding .18s ease, box-shadow .18s ease} .shapka.szhata{padding-top:9px;padding-bottom:9px; box-shadow:0 8px 20px -10px rgba(34,28,20,.28)} .shapka.szhata .shapka-imya{font-size:17px} .shapka.szhata .shapka-pod{display:none} @media (prefers-reduced-motion:reduce){ .shapka{transition:none} } .shapka-imya{font-family:var(--shrift-zag);font-size:21px;font-weight:600;color:var(--logo)} .shapka-pod{font-size:11px;color:var(--tekst2)} /* ⚠️ РАЗМЕР МЕНЮ РАЗНЫЙ НА СТОЛЕ И НА ТЕЛЕФОНЕ, И ЭТО НАРОЧНО. Оператор 30.08, показав сайт человеку со свежим взглядом: «на вкладках, где контакты, бронирование, — нужно увеличить, а для мобильной оставить как есть». Было 13 и там и там; поставили 15, оператор посмотрел на макете и выбрал 16. ⚠️ ШЕСТНАДЦАТЬ ВЫБРАНЫ ПО ЗАМЕРУ ЭКРАНОВ, а не на глаз. Считается не разрешение, а то, что видит браузер после увеличения Windows: Full HD при 125 % даёт 1536 точек, при 150 % — 1280; старый ноутбук 1366×768 даёт 1366; планшет поперёк — 1024. Нижняя граница настольной раскладки на деле около 1024, а меню в 16 точек ломается ниже 1000. Запас есть. На столе меню стоит в одну строку рядом с названием и места ему хватает. На телефоне те же восемь пунктов уложены в строку с прокруткой вбок; каждая лишняя точка размера уводит вправо ещё один пункт, и «Контакты» уезжают за край раньше. Поэтому телефону размер закреплён отдельной строкой ниже — иначе он унаследовал бы новый и молча ухудшился. */ .menu{display:flex;gap:22px;font-size:16px;font-weight:500;color:var(--tekst2);flex-wrap:wrap} .menu a{color:inherit} .menu .tut{color:var(--tekst);border-bottom:2px solid var(--akc);padding-bottom:3px} /* ⚠️ УЗКИЙ СТОЛ: ПРОСВЕТ МЕНЬШЕ, ЧТОБЫ МЕНЮ ОСТАЛОСЬ В СТРОКУ. Оператор 30.08: «а если не помещаются в строку, можно сдвинуть их левее? там же много свободного места». Замер показал, что места нет ИМЕННО ТАМ, где перенос: на широком окне свободно 250–410 точек, а на 980 не хватает 5,5. Сдвигать влево нечего — двигать надо не меню, а просвет между пунктами. Замер (окно 980, шрифт 15): ссылки занимают 585 точек, места под меню 691,5. Семь просветов по 16 дают 697 — не влезает на пять с половиной точек. По 12 дают 669, и строка держится до самого края настольной раскладки. ⛔️ Ниже 900 начинается телефонная раскладка со своей прокруткой вбок, и туда это правило не лезет. */ @media (min-width:1025px) and (max-width:1100px){ .menu{gap:16px} } @media (min-width:901px) and (max-width:1024px){ .menu{gap:12px} } /* --- каркас страницы --- */ /* ⚠️ У СТРАНИЦЫ ОДНА СЕРЕДИНА, И ЭТО ГЛАВНОЕ ЗДЕСЬ ПРАВИЛО. Главный столбец раньше тянулся во всю ширину окна (на широком экране — 1457 точек). Абзацы внутри обрезаны по читаемой длине и стояли слева, а карточки — объявление, врезка — занимали столбец целиком и центровали своё содержимое по СВОЕЙ середине. Получались две оси, и глаз это видит: оператор 22.08 — «отцентровки нет». Тот же довод уже записан ниже про узкую раскладку (21.08, страница участника): «две разные середины, и это видно глазом». Здесь то же самое, только на широкой. Лечится не подгонкой каждого блока, а одним потолком столбца: у всех блоков общие края — значит и середина одна. Заодно каркас центруется в окне, иначе на широком экране он жался бы влево. */ .stranica{display:flex;padding:40px 44px;gap:40px;align-items:flex-start; max-width:1388px;margin-inline:auto} .glavnoe{flex:1 1 auto;min-width:0;max-width:960px;display:flex;flex-direction:column; gap:22px;order:2} .bok{flex:0 0 300px;display:flex;flex-direction:column;gap:16px;order:1} /* Телефон: боковой столбец ВЫШЕ дела. Я ставил наоборот — «люди приходят бронировать». Оператор поправил 22.08, и довод сильнее моего: в боковой столбец мы нарочно кладём самое важное — сроки, деньги, справочник, — а на телефоне оно оказывалось в самом низу, где его не видит никто. Подчёркивать что-то и прятать это же — противоречие. */ @media (max-width:900px){ /* Отступ сверху больше, чем кажется нужным: в нём живёт узор у заголовка. Иначе узор вылезал на меню и ложился на слово «Контакты». */ /* `align-items:stretch` обязателен. На столе стоит `flex-start` — чтобы столбцы не растягивались по высоте друг под друга. Развернув столбцы в колонку, мы поменяли смысл этой строки: теперь она про ШИРИНУ, и столбцы стали шириной по содержимому. Из-за одной таблицы страница раздувалась до 688 точек при экране 390 и ездила вбок. Поймано замером 22.08. */ .stranica{flex-direction:column;align-items:stretch;padding:52px 20px 28px;gap:24px} /* Порядок на телефоне: «Коротко» → справочник → дело → «Написать нам». Столбец растворяем (`display:contents`), иначе три карточки уехали бы наверх все вместе, а связаться с нами человек хочет ПОСЛЕ того, как прочитал, — так решил оператор 22.08. */ .bok{display:contents} .bok > *{order:1} .glavnoe{order:2} .bok > .b-kontakty{order:3} .shapka{padding:14px 0;flex-wrap:wrap;gap:10px} .shapka.szhata{padding-top:7px;padding-bottom:0;gap:4px} .shapka.szhata .menu{padding-bottom:5px} .shapka-verh{padding:0 20px} /* Восемь ссылок в строку на телефон не помещаются никак. Складывать их в три строки — значит отдать под меню весь первый экран. Значит одна строка с прокруткой вбок: видно, что она продолжается, и ничего не спрятано. */ .menu{font-size:13px;flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;gap:18px;padding:2px 20px 6px; scrollbar-width:none;-webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(to right,#000 88%,transparent); mask-image:linear-gradient(to right,#000 88%,transparent)} .menu::-webkit-scrollbar{display:none} .menu a{white-space:nowrap;flex:none} } /* --- отзвук фирменного почерка у заголовка --- */ .zaglavie{position:relative;display:flex;flex-direction:column;gap:14px} .zaglavie>svg{position:absolute;left:-30px;top:-76px;width:200px;height:70px;pointer-events:none;z-index:0} .zaglavie>*:not(svg){position:relative;z-index:1} @media (max-width:900px){ .zaglavie>svg{left:-10px;top:-44px;width:150px;height:52px} } /* ========================================================================== БЛОКИ. Вид каждого типа задан один раз и здесь. Редактор его не меняет. ========================================================================== */ .b-zagolovok{font-family:var(--shrift-zag);font-size:28px;font-weight:600;margin:0;text-wrap:balance} /* Подраздел — та же гарнитура, ощутимо мельче: разница должна читаться с первого взгляда, иначе ступень не видна и заводить её было незачем. */ h3.b-zagolovok{font-size:21px} /* ⚠️ ЗАГОЛОВКУ НУЖЕН ЗАПАС СВЕРХУ ПРИ ПЕРЕХОДЕ ПО МЕТКЕ. Без него браузер ставит заголовок вплотную к верхней кромке окна, и он читается как «начало страницы», а не «сюда вас привели»: человек не понимает, что что-то произошло. `scroll-margin-top` двигает только точку остановки, на вид страницы не влияя ничем. */ .b-zagolovok{scroll-margin-top:24px} /* Оглавление: список разделов со ссылками, собирается сам из заголовков. */ .b-oglavlenie ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .b-oglavlenie li{margin:0} .b-oglavlenie li.podrazdel{padding-left:20px} .b-oglavlenie a{display:inline-block;padding:4px 0;color:var(--tekst);text-decoration:none; border-bottom:1px solid transparent} .b-oglavlenie a:hover{color:var(--akc);border-bottom-color:var(--akc)} .b-oglavlenie li.podrazdel a{font-size:15px;color:var(--tekst2)} .b-tekst{font-size:16px;line-height:1.5;color:var(--tekst2);margin:0;max-width:70ch} .b-tekst p{margin:0 0 var(--ritm)} .b-tekst p:last-child{margin-bottom:0} .b-tekst strong{color:var(--tekst);font-weight:600} .b-vazhno{background:var(--vazhno-fon);border:1px solid var(--vazhno-gran);border-radius:14px; padding:18px 22px;display:flex;flex-direction:column;gap:9px} .b-vazhno-zag{font-family:var(--shrift-zag);font-size:18px;font-weight:600;color:var(--vazhno-tekst);margin:0} .b-vazhno p,.b-vazhno li{color:var(--vazhno-tekst);line-height:1.45;margin:0 0 6px} .b-vazhno ol,.b-vazhno ul{margin:0;padding-left:22px;font-size:15px} /* Подчёркнута ВСЕГДА, а не только под курсором: на янтарном поле красная ссылка без подчёркивания читается как выделенное слово, а не как «сюда можно нажать», — и человек, ради которого всё затевалось, мимо неё пройдёт. */ /* ── СВЁРНУТЫЙ БЛОК ───────────────────────────────────────────────────── Блок, спрятанный под заголовком: тяжёлое и не всем нужное — служебная форма, длинная таблица. Оформляем как карточку, а не как голую строку: на старом сайте свёртка выглядела полоской с «---», и по ней было непонятно, стоит ли щёлкать вообще. */ .b-svyortka{background:var(--karta);border:1px solid var(--gran);border-radius:14px; box-shadow:var(--kromka), var(--ten)} .b-svyortka > summary{padding:16px 20px;cursor:pointer;font-weight:600;color:var(--tekst); list-style:none;display:flex;align-items:center;gap:10px} .b-svyortka > summary::-webkit-details-marker{display:none} /* Треугольник рисуем сами: свой знак одинаков во всех браузерах, а родной у каждого свой и в половине из них не поворачивается. */ .b-svyortka > summary::before{content:'';width:8px;height:8px;flex:none; border-right:2px solid var(--akc);border-bottom:2px solid var(--akc); transform:rotate(-45deg);transition:transform .15s ease;margin-left:2px} .b-svyortka[open] > summary::before{transform:rotate(45deg)} @media (prefers-reduced-motion:reduce){ .b-svyortka > summary::before{transition:none} } .b-svyortka > summary:hover{color:var(--akc)} .b-svyortka-nutro{padding:0 20px 20px} /* Внутри свёртки карточка второй рамкой не нужна: рамка уже есть у свёртки. */ .b-svyortka-nutro > .karta,.b-svyortka-nutro > .b-vazhno, .b-svyortka-nutro > .b-obyavlenie,.b-svyortka-nutro > .b-okno{box-shadow:none} .b-vazhno-ssylka a{color:var(--vazhno-ssylka);font-weight:600;text-decoration:underline; text-underline-offset:3px} .b-spisok{margin:0;padding-left:22px;font-size:16px;line-height:1.5;color:var(--tekst2);max-width:70ch} .b-spisok li{margin-bottom:6px} .b-vopros{border-top:1px solid var(--gran)} .b-vopros details{border-bottom:1px solid var(--gran)} .b-vopros summary{cursor:pointer;list-style:none;padding:13px 2px;font-size:16px;font-weight:500; display:flex;align-items:center;justify-content:space-between;gap:12px} .b-vopros summary::-webkit-details-marker{display:none} .b-vopros summary::after{content:'';width:9px;height:9px;flex:none; border-right:2px solid var(--tekst2);border-bottom:2px solid var(--tekst2); transform:rotate(45deg) translateY(-2px)} .b-vopros details[open] summary::after{transform:rotate(-135deg) translateY(-2px)} /* Ответ должен стоять близко к своему вопросу: между ними была дырка в тридцать точек, и вопрос читался как заголовок раздела, а не как вопрос. */ .b-vopros summary{padding-bottom:9px} .b-vopros .telo{padding:0 2px 18px} .b-vopros .telo>*:first-child{margin-top:0} .b-tablica{border:1px solid var(--gran);border-radius:14px;overflow:hidden;background:var(--karta)} .b-tablica td.celoe{white-space:nowrap;font-variant-numeric:tabular-nums} .b-tablica-obertka{overflow-x:auto} .b-tablica table{border-collapse:collapse;width:100%;min-width:560px} .b-tablica th{background:var(--tihiy);text-align:left;padding:12px 16px;font-size:11px;font-weight:600; color:var(--tekst2);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--gran)} .b-tablica td{padding:13px 16px;font-size:14px;color:var(--tekst2);border-bottom:1px solid var(--gran)} .b-tablica td:first-child{font-size:15px;font-weight:500;color:var(--tekst)} .b-tablica td:last-child{text-align:right;font-size:15px;font-weight:600;color:var(--tekst); font-variant-numeric:tabular-nums;white-space:nowrap} /* Подпись последнего столбца — НАД своими числами, а не у левого края. Замечание оператора 04.09 по живой странице трансфера: «С человека» стояло в середине шапки, а суммы прижаты вправо — глазу приходилось искать, к чему относится подпись. Значения этого столбца выровнены вправо всегда, значит и подпись обязана стоять там же. */ .b-tablica th:last-child{text-align:right} .b-tablica tr:last-child td{border-bottom:0} /* Таблица на телефоне разворачивается в стопку. Возить таблицу вбок, чтобы прочитать строку, — худшее, что можно предложить человеку с телефона, а телефонов у нас большинство. Поэтому шапка прячется, строка становится карточкой, а название столбца встаёт над значением (оно приезжает в `data-golova`, см. bloki.mjs). */ @media (max-width:700px){ .b-tablica-obertka{overflow-x:visible} /* Почта и длинные адреса не переносятся сами и торчат за край. */ .b-tablica td{overflow-wrap:anywhere} .b-tablica table{min-width:0;width:100%;display:block} .b-tablica thead{display:none} .b-tablica tbody,.b-tablica tr,.b-tablica td{display:block;width:auto} .b-tablica tr{padding:14px 16px;border-bottom:1px solid var(--gran)} .b-tablica tr:last-child{border-bottom:0} .b-tablica td{padding:0;border:0;font-size:15px;color:var(--tekst)} .b-tablica td + td{margin-top:9px} /* Название столбца — мелкой строкой над значением. Рядом оно не встанет: на 350 точках длинному значению не остаётся места. */ .b-tablica td[data-golova]::before{content:attr(data-golova);display:block; font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; color:var(--tekst2);margin-bottom:2px} /* Первая ячейка — это имя строки, ей подпись не нужна. */ .b-tablica td:first-child{font-size:17px;font-weight:600} .b-tablica td:first-child::before{display:none} /* На столе последний столбец не переносится — там цены и числа. На телефоне в нём оказывается почта и телефон, и без переноса они торчат за край. */ .b-tablica td:last-child{text-align:left;font-size:15px;white-space:normal} .b-tablica td.celoe{white-space:normal} } /* Ряд с переносом, а не сетка, и число мест приходит из разметки (`--kolonok`): его выбирает человек, а «Само» считает по числу снимков. То же устройство, что у сетки участников, — см. `V_RYAD` в `bloki.mjs`. */ .b-foto{display:flex;flex-wrap:wrap;justify-content:center;gap:10px} .b-foto > *{flex:0 0 calc((100% - (var(--kolonok,4) - 1) * 10px) / var(--kolonok,4));min-width:0} .b-foto img,.b-foto .pusto{height:130px;width:100%;object-fit:cover;border-radius:12px; background:var(--tihiy);border:1px solid var(--gran)} /* Два-три снимка, которые смотрят, а не пролистывают. */ /* «Крупно» — по-прежнему сетка: там снимки сами занимают, сколько дадут, и число мест в ряд ни при чём. */ .b-foto.krupno{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px} .b-foto.krupno > *{flex:none} .b-foto.krupno img,.b-foto.krupno .pusto{height:250px;border-radius:14px} @media (max-width:900px){ .b-foto > *{flex-basis:calc((100% - (var(--kolonok-uzko,2) - 1) * 10px) / var(--kolonok-uzko,2))} .b-foto.krupno{grid-template-columns:1fr} .b-foto.krupno img{height:220px} } .b-kartinka figure{margin:0;display:flex;flex-direction:column;gap:8px} .b-kartinka img,.b-kartinka .pusto{width:100%;border-radius:12px;background:var(--tihiy); border:1px solid var(--gran);min-height:220px;display:flex;align-items:center;justify-content:center; font-size:13px;color:var(--tekst2)} .b-kartinka a{display:block} .b-kartinka figcaption{font-size:13px;color:var(--tekst2)} /* ⛔️ ФОРМА КАРТИНКИ. Правил ниже нет, пока форму не выбрали: у блока просто нет признака `data-forma`, и картинка живёт своей высотой, как жила всегда. Так собираются все страницы, заведённые до 30.08, — байт в байт как прежде. Выбрали форму — снимок заполняет её целиком (`cover`), а лишнее уходит за края. Это НЕ вписывание: `contain` оставил бы поля, и ряд снова стал бы неровным, а ради ровности всё и делается. ⚠️ Наводка решает, ЧТО именно уйдёт за края. По умолчанию режется поровну сверху и снизу; «по верху» прижимает снимок верхом к рамке — так лицо не теряет макушку. Это тот самый промах, который оператор поймал глазами на портрете 30.08, а замер не поймал. */ /* Наводка — что именно останется видным, когда рамка режет. Без неё `cover` показывает середину, а лицо на портрете почти всегда выше. */ .b-kartinka[data-forma] img,.b-kartinka[data-forma] .pusto{object-fit:cover;height:auto; object-position:var(--navodka,50% 50%)} .b-kartinka[data-forma='kvadrat'] img,.b-kartinka[data-forma='kvadrat'] .pusto{aspect-ratio:1/1} .b-kartinka[data-forma='vdol'] img,.b-kartinka[data-forma='vdol'] .pusto{aspect-ratio:3/2} .b-kartinka[data-forma='poperyok'] img,.b-kartinka[data-forma='poperyok'] .pusto{aspect-ratio:2/3} .b-kartinka[data-forma='krug'] img,.b-kartinka[data-forma='krug'] .pusto{aspect-ratio:1/1;border-radius:50%} /* Кнопки — бирюзовые, тем же цветом, что ссылки и кнопка ВКонтакте в подвале. Чёрных кнопок на сайте нет нигде (оператор, 22.08): чёрный на песке читается как чужой, будто вставленный из другого места. */ .b-knopka{align-self:flex-start;padding:13px 30px;background:var(--akc);color:#fff; border-radius:10px;font-size:15px;font-weight:500} .b-knopka:hover{text-decoration:none;opacity:.92} .b-citata{border-left:3px solid var(--citata-gran);padding:4px 0 4px 20px; display:flex;flex-direction:column;gap:10px} .b-citata p{font-family:var(--shrift-zag);font-size:17px;line-height:1.5;font-style:italic; color:var(--tekst);margin:0;max-width:62ch} .b-citata cite{font-style:normal;font-size:14px;font-weight:600;color:var(--tekst2)} .b-citata-portret{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap} .b-citata-portret .lico{width:180px;flex:none;border-radius:12px;background:var(--tihiy); border:1px solid var(--gran);aspect-ratio:3/4} .b-citata-portret .b-citata{flex:1 1 320px} .b-dva{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;align-items:start} @media (max-width:900px){ .b-dva{grid-template-columns:1fr} } .b-obyavlenie{border:1px solid var(--obyav-gran);background:var(--obyav-fon);border-radius:14px; padding:26px 24px 24px;display:flex;flex-direction:column;gap:12px;align-items:center; text-align:center;position:relative;margin-top:26px} .b-obyavlenie .znachok{position:absolute;top:-24px;width:48px;height:48px;border-radius:999px; background:var(--obyav-znachok);color:#fff;display:flex;align-items:center;justify-content:center} .b-obyavlenie h3{font-family:var(--shrift-zag);font-size:20px;font-weight:600;margin:4px 0 0; color:var(--obyav-tekst)} .b-obyavlenie p{font-size:15px;line-height:1.5;color:var(--obyav-tekst);margin:0;max-width:60ch} .b-podpis{display:flex;flex-direction:column;gap:2px;font-size:15px;color:var(--tekst2); padding-top:6px;border-top:1px solid var(--gran)} .b-podpis .kto{font-weight:600;color:var(--tekst)} .b-razdelitel{border:0;border-top:1px solid var(--gran);margin:6px 0} .b-zapis{display:flex;flex-direction:column;gap:10px;background:var(--karta); border:1px solid var(--gran);border-radius:14px;overflow:hidden} .b-zapis .snimok{height:190px;background:var(--tihiy);border-bottom:1px solid var(--gran)} .b-zapis .nutro{padding:18px 20px 20px;display:flex;flex-direction:column;gap:9px} .b-zapis h3{font-size:17px;font-weight:600;margin:0;text-transform:uppercase;letter-spacing:.02em} .b-zapis .kogda{font-size:12px;color:var(--tekst2)} .b-vidzhet{border:1px solid var(--gran);border-radius:12px;padding:18px; display:flex;flex-direction:column;gap:10px;background:var(--karta)} /* Окно программы: форма и табло приходят из программы, сайт их не оформляет. */ .b-okno{border:1px solid var(--gran);border-radius:16px;background:var(--karta);overflow:hidden} .b-okno iframe{display:block;width:100%;border:0} /* Окно подгоняется под свою форму плавно: резкий скачок высоты читается как поломка. Кто просил не мельтешить — тому и это мельтешение. */ .b-okno iframe[data-rost=sam]{transition:height .22s cubic-bezier(.22,.61,.36,1)} @media (prefers-reduced-motion:reduce){ .b-okno iframe[data-rost=sam]{transition:none} } /* --- скрытый блок: посетителю не отдаётся вовсе --- */ .skryto{display:none} /* ========================================================================== Справочник: список слева, содержимое — окном посередине экрана. Страница под окном не двигается ни на пиксель: закрыл — ты там же, где был. Прокрутки от нажатия нет намеренно (требование оператора 21.08). ========================================================================== */ .spr-knopka{font:inherit;font-family:inherit;cursor:pointer;width:100%;text-align:left; background:none;border:0;border-bottom:1px solid var(--gran);padding:9px 0;font-size:14px; color:var(--tekst);display:flex;justify-content:space-between;align-items:center;gap:10px} .spr-knopka:last-of-type{border-bottom:0} .spr-knopka:hover{color:var(--akc)} .spr-knopka::after{content:'';width:7px;height:7px;flex:none; border-right:2px solid var(--tekst2);border-bottom:2px solid var(--tekst2);transform:rotate(-45deg)} dialog.okoshko-fon{border:0;padding:0;background:transparent;max-width:none;max-height:none; width:100vw;height:100dvh;inset:0;margin:0} dialog.okoshko-fon[open]{display:flex;align-items:stretch;justify-content:center; padding:var(--verh-okna,64px) clamp(16px,6vw,88px) 0} dialog.okoshko-fon::backdrop{background:rgba(34,28,20,.22)} .okoshko{display:flex;flex-direction:column;overflow:hidden;width:min(840px,100%);height:100%; background:var(--karta);color:var(--tekst);border:1px solid var(--gran);border-bottom:0; border-radius:18px 18px 0 0;box-shadow:0 -8px 64px rgba(34,28,20,.18)} .okoshko-verh{flex:none;background:var(--karta);border-bottom:1px solid var(--gran);padding:18px 26px; display:flex;align-items:center;justify-content:space-between;gap:16px} .okoshko-verh h2{margin:0;font-size:21px;font-weight:600} .okoshko-zakryt{cursor:pointer;border:1px solid var(--gran);background:var(--tihiy);color:var(--tekst2); border-radius:999px;width:36px;height:36px;flex:none;display:flex;align-items:center; justify-content:center;padding:0} .okoshko-zakryt:hover{background:var(--gran);color:var(--tekst)} .okoshko-telo{flex:1 1 auto;overflow-y:auto;padding:22px 26px 32px;overscroll-behavior:contain; display:flex;flex-direction:column;gap:var(--ritm)} /* Раздел справочника переносится в окно ОДНИМ узлом, поэтому промежуток между блоками надо задавать здесь, а не на окне: у окна этот единственный узел — единственный ребёнок, и промежутку не между чем быть. Пока абзацы держали свой отступ снизу, разрыва не было видно; убрали его — и блоки слиплись (оператор, 21.08). */ .okoshko-telo > .razdel{display:flex;flex-direction:column;gap:var(--ritm)} @keyframes okoshko-poyavitsya{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} dialog.okoshko-fon[open] .okoshko{animation:okoshko-poyavitsya .2s cubic-bezier(.22,.61,.36,1)} @media (prefers-reduced-motion:reduce){dialog.okoshko-fon[open] .okoshko{animation:none}} /* --- обложка (главная) --- */ .b-oblozhka{position:relative;min-height:420px;display:flex;align-items:center;justify-content:center; background:var(--oblozhka) var(--navodka,center)/cover no-repeat;text-align:center;padding:60px 32px} /* Высота — чтобы под широкую фотографию не отдавать пол-экрана, а под вертикальную не жалеть места. */ .b-oblozhka[data-rost=nizkaya]{min-height:280px;padding:40px 32px} .b-oblozhka[data-rost=vysokaya]{min-height:560px} /* На телефоне обложка забирала половину первого экрана, и карточка «Коротко» не помещалась целиком. Снимок остаётся крупным, но уступает место делу. */ @media (max-width:700px){ .b-oblozhka{min-height:300px} .b-oblozhka[data-rost=nizkaya]{min-height:220px} .b-oblozhka[data-rost=vysokaya]{min-height:380px} } /* Место надписи. На одной фотографии небо сверху, на другой снизу — одно и то же место подошло бы не всем. */ .b-oblozhka[data-mesto=sleva-vverhu]{align-items:flex-start;justify-content:flex-start;text-align:left} .b-oblozhka[data-mesto=sleva-vnizu]{align-items:flex-end;justify-content:flex-start;text-align:left} .b-oblozhka[data-mesto=sprava-vnizu]{align-items:flex-end;justify-content:flex-end;text-align:right} .b-oblozhka[data-mesto=sleva-vverhu] .b-oblozhka-nutro, .b-oblozhka[data-mesto=sleva-vnizu] .b-oblozhka-nutro, .b-oblozhka[data-mesto=sprava-vnizu] .b-oblozhka-nutro{max-width:min(760px,100%)} /* Надпись у края — значит и поля шире, иначе буквы липнут к краю окна. */ .b-oblozhka:not([data-mesto=po-centru]){padding:44px clamp(20px,5vw,64px)} /* Затемнение поверх узора и фотографии. Без него белые буквы ложились на светлый песок и не читались — поймано браузерной проверкой 21.08.2026. Обложка обязана читаться в обоих случаях: и когда фотография есть, и когда её ещё не поставили. */ .b-oblozhka::after{content:'';position:absolute;inset:0;z-index:1; background:linear-gradient(to bottom,rgba(9,22,20,.52),rgba(9,22,20,.34) 42%,rgba(9,22,20,.66))} /* На фотографии затемнение сгущается только там, где лежит надпись: небо и зелень остаются живыми, а буквы всё равно читаются. */ .b-oblozhka[data-snimok=da]::after{ background:linear-gradient(to top,rgba(9,22,20,.86),rgba(9,22,20,.60) 24%,rgba(9,22,20,.24) 54%,rgba(9,22,20,.10))} .b-oblozhka[data-snimok=da][data-mesto=sleva-vverhu]::after{ background:linear-gradient(to bottom,rgba(9,22,20,.86),rgba(9,22,20,.60) 24%,rgba(9,22,20,.24) 54%,rgba(9,22,20,.10))} .b-oblozhka[data-snimok=da][data-mesto=po-centru]::after{ background:linear-gradient(to bottom,rgba(9,22,20,.42),rgba(9,22,20,.50))} .b-oblozhka-nutro{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px;color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.45)} .b-oblozhka-zag{font-family:var(--shrift-zag);font-size:clamp(32px,5vw,54px);font-weight:600;margin:0; line-height:1.16;text-wrap:balance} .b-oblozhka-pod{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.88)} /* --- сетка почётных участников --- */ /* ⚠️ НЕПОЛНЫЙ ПОСЛЕДНИЙ РЯД СТОИТ ПОСЕРЕДИНЕ, А НЕ ПРИЖАТ ВЛЕВО. Пятеро участников на сетке по четверо: пятый оставался один у левого края, и справа зияла пустота в три места. Оператор 22.08: «будет ли возможность нижнее фото перенести посередине, для симметрии?» Сетка (`grid`) так не умеет: у неё колонки заданы, и одиночка встаёт в первую. Поэтому здесь ряд с переносом — он сам центрует остаток. Ширина места считается вручную, чтобы в ряду по-прежнему было ровно четверо, а не «сколько влезет». */ /* ⛔️ ВЫРАВНИВАНИЕ ТЕКСТА — ОДНО ПРАВИЛО НА ВСЕ БЛОКИ, А НЕ ПО ПРАВИЛУ НА ВИД. Метку `data-ravnenie` ставит сборка на корень блока (`ravnenie` в `bloki.mjs`); видов, которым это дают, четыре — заголовок, абзац, важное, список. Заведи правило каждому — и они разойдутся в первый же месяц. «Слева» метки НЕ ставит вовсе: это умолчание, и страницы, где поле не трогали, не меняются ни на точку. ⛔️ `justify` здесь нет намеренно: на узкой колонке телефона он рвёт строки дырами, а лечится это только переносом по слогам, которого у нас нет. */ [data-ravnenie='po-centru']{text-align:center} [data-ravnenie='sprava']{text-align:right} .b-uchastniki{display:flex;flex-wrap:wrap;justify-content:center;gap:22px 14px} /* Число колонок приходит из разметки (`--kolonok`): его считает сборщик по тому, сколько людей в сетке, — см. `kolonokDlyaSetki` в `bloki.mjs`. Здесь только ширина места. Ряд с переносом, а не сетка: неполный последний ряд сетка прижала бы влево. */ .b-uchastniki > *{flex:0 0 calc((100% - (var(--kolonok,4) - 1) * 14px) / var(--kolonok,4)); min-width:0} .b-uchastniki .uchastnik{display:flex;flex-direction:column;align-items:center;gap:9px;color:inherit} .b-uchastniki .portret{width:100%} /* ⛔️ ПОДПИСЬ СТОИТ СРАЗУ ПОД СНИМКОМ — И ДЕРЖИТСЯ ЭТО ЗАМЕРОМ, А НЕ ВЁРСТКОЙ. Замер 30.08 по всем 32 портретам: КАЖДЫЙ квадратный, доля высоты к ширине 1.000, разброс 0.002. Снимок берёт всю ширину места и живёт своей высотой — значит все снимки в ряду одной высоты, и подписи встают на одну черту сами, без единого правила. ⚠️ ДВА ПРЕДЫДУЩИХ ЗАХОДА ЛЕЧИЛИ БЕДУ, КОТОРОЙ НЕТ, и оба испортили вид. Оба опирались на утверждение «снимки разной высоты, доля 0.86–1.00» — оно попало в D-103 и оказалось НЕВЕРНЫМ, а замером его никто не проверил: · клетка 1:0.91 с `contain` — ужимала любой снимок и делала лицо мелким; · `margin-top:auto` у подписи — тянул подпись к низу карточки, и у соседей двухстрочного имени она уезжала вниз, отрываясь от снимка. Оператор увидел ровно это: «подпись ни на одном уровне» и «далековата». ⛔️ Не возвращать ни то, ни другое, пока замер не покажет РАЗНЫЕ доли. Появятся неквадратные снимки — ровнять надо их, а не вёрстку. */ .b-uchastniki .snimok{width:100%;height:auto;display:block} .b-uchastniki .imya{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase; text-align:center;line-height:1.35} /* На телефоне колонок всегда две, сколько бы ни было людей: считанное число там ни к чему — впятером в ряд лицо станет с ноготь. */ @media (max-width:900px){ .b-uchastniki > *{ flex-basis:calc((100% - (var(--kolonok-uzko,2) - 1) * 14px) / var(--kolonok-uzko,2))} } /* Приподнятость всех блоков — см. токены наверху. Перечисление явное: поднимаются только карточки, а текст, заголовки и списки лежат на странице как лежали, иначе поднимать было бы нечего. Родителя в правиле НЕТ намеренно. Сначала было `.glavnoe > .b-vazhno` — и в редакторе тени пропали: там предпросмотр складывает блоки в свою обёртку, а не в `.glavnoe`. Редактор показывал не то, что увидит посетитель, — то самое, чего мы обещали не допускать. Правило, привязанное к скелету страницы, ломается при первой же перестановке скелета. */ .karta,.b-vazhno,.b-obyavlenie,.b-okno,.b-tablica-obertka,.b-kartinka img{ box-shadow:var(--kromka), var(--ten)} .b-foto img{box-shadow:var(--ten)} /* Подвал — конец страницы, там приподнимать нечего. */ .podval .karta{box-shadow:none} /* --- подвал --- */ .podval{background:var(--podval-fon);color:var(--tekst);padding:44px; border-top:2px solid var(--akc-gran)} .podval-vnutri{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:44px} .podval-stolb{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:14px} .podval-metka{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; color:var(--podval-tiho)} /* Гости в два столбца: в один они вытягивали подвал во весь экран, а рядом пустовало полполосы (оператор, 21.08). Пять человек в два столбца — три ряда вместо пяти, и пустота посередине заполняется ими же. */ /* ── ССЫЛКИ В ПОДВАЛЕ ────────────────────────────────────────────────── Столбик, а не строка: в подвале их читают глазами сверху вниз, и строкой они слиплись бы в кашу. Отбивка мелкая — это не меню, а хвост страницы. */ .b-ssylki{display:flex;flex-direction:column;gap:9px} .b-ssylki a{font-size:14px;line-height:1.35} /* ⚠️ ЧИСЛО СТОЛБЦОВ ВЫБИРАЕТ ЧЕЛОВЕК, А ШИРИНУ — САЙТ (D-133). Один столбец во всю тысячу двести точек читался бы строкой в пол-экрана, поэтому у одиночки ширина ограничена. Два и три делят место поровну: разная ширина колонок — та самая свобода, которая развалила прежний сайт. */ /* Текст «строками подряд» — вариант оформления, а НЕ подгонка под один случай. ⚠️ Сперва я зашил плотный отступ всему тексту подвала. Оператор поправил 03.09: «хочу, чтобы это осталось как вариант оформления, а не то, что ты сейчас подгонишь, и потом снова столкнёмся с той же проблемой». Верно: под абзац и под строку реквизитов нужен РАЗНЫЙ отступ, и выбирать должен человек. Статейный `--ritm` для ИНН/ОГРН/КПП разносил столбец так, что он выглядел разорванным. */ .b-tekst--stroki p{margin-bottom:6px} /* Размер столбца подвала — пять ступеней. Задаётся столбцу целиком и достаётся всему внутри: ссылкам, тексту, заголовку. Так и меряет человек — колонку, а не отдельный блок (правка 03.09 по замечанию оператора: «слева один, справа другой размер, очень сильно отличаются»). */ .podval-stolb--melkiy{font-size:12px} .podval-stolb--melche{font-size:14px} .podval-stolb--krupnee{font-size:18px} .podval-stolb--krupnyy{font-size:20px} .podval-stolb--melkiy .b-tekst,.podval-stolb--melche .b-tekst, .podval-stolb--krupnee .b-tekst,.podval-stolb--krupnyy .b-tekst{font-size:inherit} .podval-stolb--centr{text-align:center;align-items:center} .podval-stolb--pravo{text-align:right;align-items:flex-end} .podval-vnutri[data-stolbcov="1"] .podval-stolb{flex:0 1 520px} .podval-vnutri[data-stolbcov="2"] .podval-stolb{flex:1 1 320px} .podval-vnutri[data-stolbcov="3"] .podval-stolb{flex:1 1 240px} /* На телефоне всегда одна колонка — правило подвалов везде, не настраивается. `flex-wrap` схлопывает их и сам, но опорная ширина у трёх столбцов мала: без этого правила на 390 точках они встали бы в две тесные колонки. */ @media (max-width:700px){ .podval-vnutri{gap:28px} .podval-vnutri .podval-stolb{flex:1 1 100%} } .podval-kto{max-width:1200px;margin:18px auto 0;text-align:right;white-space:nowrap; font-size:13px;color:var(--podval-tiho);line-height:1.5} /* На телефоне строка длиннее экрана — там пусть переносится. */ @media (max-width:700px){ .podval-kto{white-space:normal;text-align:left} } .podval a{color:var(--akc-tekst)} .podval a /* иначе .podval a красит текст в цвет фона кнопки */ /* --- сводка «Коротко» и контакты «Написать нам» --- */ /* Карточка фактов приподнята НАРОЧНО и одна на странице. На неё смотрят первой: там сроки и деньги, а взгляд по умолчанию идёт в середину, а края читаются как неважное (оператор, 21.08). Тени работают, пока они одни: приподнимем ещё что-нибудь — сравняется и это. */ .b-svodka{background:var(--fakty-fon);border:1px solid var(--fakty-gran); border-top:4px solid var(--logo); box-shadow:var(--kromka), var(--ten-vyshe)} .b-svodka .metka{color:var(--fakty-metka)} .b-svodka .svodka-stroka{display:flex;justify-content:space-between;gap:14px;font-size:15px; padding:9px 0;border-bottom:1px solid var(--fakty-gran);font-variant-numeric:tabular-nums} .b-svodka .svodka-stroka:last-child{border-bottom:0} .b-svodka .svodka-stroka>span:first-child{color:var(--fakty-tiho)} .b-svodka .znachenie{font-size:17px;font-weight:600;color:var(--fakty-tekst);white-space:nowrap} /* На узком экране длинное значение не помещается рядом с названием. Ломать его нельзя — «7 800 ₽», разорванное пополам, читается как две вещи. Значит переносим строку целиком: название сверху, значение под ним справа. */ @media (max-width:700px){ .b-svodka .svodka-stroka{flex-wrap:wrap} .b-svodka .svodka-stroka>span:first-child{min-width:0} .b-svodka .znachenie{margin-left:auto} } .b-kontakty .sluzhba{font-size:13px;color:var(--tekst2);line-height:1.5} .b-kontakty .pripiska{font-size:12px;color:var(--tekst2);line-height:1.5;padding-top:8px; border-top:1px solid var(--gran)} /* --- лента новостей --- Карточка повторяет старый сайт: обложка, заголовок, начало текста и дата под ним. Оператор 22.08 показал старый сайт и сказал «нужно сделать как в нём». Отличие одно: там карточки стояли в один столбец на треть ширины и две трети пустовали — здесь ряд заполняется. */ .b-lenta{display:flex;flex-wrap:wrap;gap:22px 18px} .b-lenta > *{flex:0 0 calc((100% - 2 * 18px) / 3);min-width:0} @media (max-width:900px){ .b-lenta > *{flex-basis:calc((100% - 18px) / 2)} } @media (max-width:620px){ .b-lenta > *{flex-basis:100%} } .novost{display:flex;flex-direction:column;background:var(--karta);border:1px solid var(--gran); border-radius:14px;overflow:hidden;color:inherit} .novost:hover{border-color:var(--logo)} .novost-snimok{display:block;aspect-ratio:3/2;background:var(--fon2)} .novost-snimok img{width:100%;height:100%;object-fit:cover;display:block} .novost-nutro{display:flex;flex-direction:column;gap:8px;padding:16px 17px 17px} .novost-imya{font-family:var(--shrift-zag);font-size:18px;font-weight:600;line-height:1.25; color:var(--tekst)} .novost-nachalo{font-size:14px;line-height:1.5;color:var(--tekst2)} /* Дата прижата к низу карточки: иначе у карточек с разным текстом она пляшет по высоте, и ряд выглядит рваным. */ .novost-kogda{font-size:12px;color:var(--tekst2);margin-top:auto;padding-top:4px} /* --- раскладки страниц --- */ .zaglavie-imya{font-size:46px;font-weight:600;line-height:1.08;margin:0} .stranica.shirokaya,.stranica.uzkaya{display:block;max-width:1200px;margin:0 auto} .stranica.shirokaya .glavnoe,.stranica.uzkaya .glavnoe{display:flex;flex-direction:column;gap:22px} /* Узкая раскладка — одна колонка и одна ось. Раньше портрет и имя стояли по центру страницы, а текст под ними — по левому краю колонки поуже: две разные середины, и это видно глазом (оператор, 21.08). Теперь всё в одной колонке: у портрета, имени и текста общие края. Заодно строка стала короче: было 87 знаков, читать тяжело. */ .stranica.uzkaya{max-width:660px} .stranica.uzkaya .glavnoe>*{max-width:none} .stranica.uzkaya .b-citata{max-width:none} .stranica.uzkaya .zaglavie-imya{font-size:38px} /* --- обложка: узор рисуется поверх фотографии, как в фирменном почерке --- */ .b-oblozhka{position:relative;overflow:hidden} .b-oblozhka .uzor-oblozhki{position:absolute;inset:0;z-index:0;width:100%;height:100%;opacity:.92} /* --- РУЧНОЕ РАВНЕНИЕ ПОРТРЕТА --- ⛔️ Оператор просил об этом с утра 30.08: «взять и двигать фотографии». Средства ровняют круги замером — и это верно, но угадать за человека всё равно не выходит: снимки приходят разные, а глаз видит то, чего не видит мерка. Поэтому у каждого портрета есть свой сдвиг и свой размер, и последнее слово — за человеком. ⚠️ КОРОБКА СТОИТ НА МЕСТЕ, ДВИЖЕТСЯ СОДЕРЖИМОЕ. Двигай мы саму ячейку — сдвинутый портрет растолкал бы соседей, и равнять пришлось бы бесконечно. Поэтому `.mesto-portreta` не трогается вовсе, а `transform` висит на том, что внутри неё. Проценты у `translate` считаются от ширины самого портрета, поэтому равнение не рассыпается при смене ширины экрана. */ .mesto-portreta{display:block} .b-uchastniki .mesto-portreta{width:100%} .mesto-portreta > *{transform-origin:center center; transform:translate(var(--sdvig-x,0),var(--sdvig-y,0)) scale(var(--razmer,1))} /* --- портрет, который рисует сам сайт --- Три слоя в квадратной клетке: узор позади, снимок в круге, узор поверх. Одним слоем позади узор выглядит наклейкой за спиной, одним спереди — закрывает лицо; оператор описал это словами «двумя заходами». ⚠️ КЛЕТКА КВАДРАТНАЯ, И ЭТО НЕ ТО ЖЕ САМОЕ, ЧТО У СНИМКА «КАК ЕСТЬ». Там клетки нет нарочно (см. разбор у `.b-uchastniki .snimok`): снимки старого сайта и без того квадратные, а клетка их только ужала бы. Здесь круг рисуем МЫ, и без квадрата он стал бы овалом. ⚠️ Снимок — обычная картинка с `object-fit:cover`, а не `` внутри SVG. В SVG обрезка умеет девять положений, и наводке — «припустить чуть ниже» — там взяться неоткуда. */ .portret{position:relative;width:100%;aspect-ratio:1/1} .portret .uzor{position:absolute;inset:0;width:100%;height:100%;display:block} .portret .krug{position:absolute;inset:0;width:100%;height:100%;border-radius:50%; object-fit:cover;object-position:var(--navodka,50% 50%)} .portret .pusto{background:var(--tihiy)} /* С узором круг уступает место кольцу фигур — ровно столько, сколько занимал круг r=100 в поле 256 у прежнего рисунка: вид не должен поменяться. БЕЗ узора круг забирает клетку целиком, иначе портрет вышел бы мельче соседей, у которых круг нарисован в самом файле. */ .portret[data-uzor] .krug{inset:10.9375%;width:78.125%;height:78.125%} /* --- страница участника --- */ .uchastnik-verh{display:flex;flex-direction:column;align-items:center;gap:6px} /* ⚠️ ПОРТРЕТ НА СВОЕЙ СТРАНИЦЕ — КРУПНЫЙ. Было 280 точек — ровно как плитка в сетке на главной, где их четыре в ряд. Оператор 22.08: «страница большая и широкая, а фотография маленькая; такая обрезанная годится для главной, а не для целой страницы». Он прав: на своей странице человек — главное, что на ней есть, и мельчить его незачем. */ .uchastnik-verh .portret{width:min(420px,80vw)} /* На своей странице портрет крупный — по той же причине, что и `.uzor` выше. Клетки здесь нет и не нужно: портрет один, ровнять его не с чем, а всякая клетка только ужала бы его (см. разбор у `.b-uchastniki .snimok`). */ .uchastnik-verh .snimok{width:min(420px,80vw);height:auto} .uchastnik-verh h1{font-family:var(--shrift-zag);font-size:clamp(24px,4vw,34px);font-weight:600; text-transform:uppercase;letter-spacing:.02em;text-align:center;margin:0;text-wrap:balance} /* --- обратный отсчёт --- Табло скрыто, пока скрипт не посчитал: увидеть прочерки или вчерашнее число хуже, чем не увидеть табло вовсе. Дата словами стоит рядом и читается сама. */ .b-otschet{text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center} .otschet-zag{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase; color:var(--tekst2)} .otschet-tablo{display:none;gap:10px;flex-wrap:wrap;justify-content:center} .b-otschet.gotov .otschet-tablo{display:flex} .otschet-yachejka{background:var(--otschet-fon);border:1px solid var(--otschet-gran);border-radius:12px; padding:12px 18px;min-width:92px;display:flex;flex-direction:column;gap:2px} .otschet-yachejka .chislo{font-family:var(--shrift-zag);font-size:32px;font-weight:600; line-height:1.1;color:var(--otschet-tekst);font-variant-numeric:tabular-nums} .otschet-yachejka .edinica{font-size:12px;color:var(--tekst2)} .otschet-proshlo{display:none;font-size:17px;font-weight:600;color:var(--otschet-tekst)} .b-otschet.proshlo .otschet-proshlo{display:block} .otschet-data{font-size:14px;color:var(--tekst2)}