/* Pulsr — cpro.css: DLE Communities PRO в виде каталога «Сообщества» прототипа (PulsrCommunity). Только оформление — модуль не трогаем. По образцу mpro.css. Без модуля правила ничего не задевают. Цвета — токены base.css (тёмная/светлая). */ /* ---------- Токены модуля → токены Pulsr ---------- */ html:root{ --cpro-accent:var(--ac);--cpro-on-accent:#fff;--cpro-panel:var(--sf);--cpro-line:var(--ln);--cpro-soft:var(--sf2);--cpro-soft2:var(--sf3); --cpro-radius:26px;--cpro-muted:1;--cpro-menu-bg:var(--sf);--cpro-menu-fg:var(--tx) } :root .cpro-page{font-family:var(--f-sans);color:var(--tx)} /* ---------- Каталог: шапка — заголовок, поиск, «Создать» в одну строку, как в прототипе ---------- */ :root .cpro-catalog{display:flex;flex-wrap:wrap;align-items:flex-end;gap:22px 16px;min-width:0;animation:rise .4s ease backwards} :root .cpro-catalog>*{flex:0 0 100%;min-width:0} :root .cpro-catalog>.cpro-head{display:contents} :root .cpro-catalog .cpro-head-text{flex:1 1 260px;order:1;min-width:0} :root .cpro-catalog>.cpro-search{flex:0 1 320px;order:2} :root .cpro-catalog .cpro-head-actions{display:contents} :root .cpro-catalog .cpro-head-actions>.cpro-btn{flex:0 0 auto;order:3} :root .cpro-catalog>.cpro-chips{order:4} :root .cpro-catalog>.cpro-tabs{order:5;flex:1 1 0;align-self:flex-end;margin-top:-8px} /* «Мои сообщества — лента» (в прототипе нет) — тихой ссылкой справа от сортировки */ :root .cpro-page .cpro-catalog .cpro-head-actions>.cpro-btn-ghost{order:6;align-self:flex-end;margin:-8px 0 0;height:35px;min-height:0;padding:0 0 11px;border:0;border-bottom:1px solid var(--ln);border-radius:0;background:none;color:var(--ac)!important;font-size:13.5px;font-weight:600} :root .cpro-page .cpro-catalog .cpro-head-actions>.cpro-btn-ghost::after{content:"\f061";margin-left:7px;font-family:"Font Awesome 7 Free","Font Awesome 6 Free";font-weight:900;font-size:11px} :root .cpro-page .cpro-catalog .cpro-head-actions>.cpro-btn-ghost:hover{border-color:var(--ln);background:none;color:var(--tx)!important} :root .cpro-catalog>.cpro-cards,:root .cpro-catalog>.cpro-empty,:root .cpro-catalog>.cpro-pager,:root .cpro-catalog>:not(.cpro-head):not(.cpro-search):not(.cpro-chips):not(.cpro-tabs){order:7} :root .cpro-page>.cpro-head,:root .cpro-page>*>.cpro-head{margin-bottom:8px} :root .cpro-page .cpro-title{margin:0;font-family:var(--f-serif);font-weight:600;font-size:60px;line-height:1;letter-spacing:normal;color:var(--tx)} :root .cpro-page .cpro-sub{margin:6px 0 0;font-size:14px;line-height:normal;color:var(--mu);opacity:1} /* Кнопки шапки — пилюли Pulsr; «Создать» — с оранжевым кругом «+» */ :root .cpro-page .cpro-head-actions .cpro-btn{gap:10px;height:44px;min-height:44px;padding:0 18px;border:1px solid var(--ln2);border-radius:var(--r-pill);background:var(--sf);color:var(--tx)!important;font-family:var(--f-sans);font-size:13.5px;font-weight:700;line-height:1;white-space:nowrap;transition:border-color .2s,background .2s} :root .cpro-page .cpro-head-actions .cpro-btn:not(.cpro-btn-ghost):hover{filter:none;border-color:var(--ac);background:var(--sf2);text-decoration:none} :root .cpro-page .cpro-head-actions .cpro-btn:not(.cpro-btn-ghost){padding:0 18px 0 6px} :root .cpro-page .cpro-head-actions .cpro-btn:not(.cpro-btn-ghost)>.cpro-ico{box-sizing:content-box;width:12px;height:12px;padding:10px;border-radius:50%;background:var(--ac);color:#fff;vertical-align:middle} /* Поиск — пилюля 44px с лупой */ :root .cpro-page .cpro-search{position:relative;display:flex;align-items:center;max-width:100%} :root .cpro-page .cpro-search>.cpro-ico{left:16px;width:13px;height:13px;color:var(--mu);opacity:1} :root .cpro-page .cpro-search input[type=search]{height:44px;min-height:44px;padding:0 16px 0 39px;border:1px solid var(--ln);border-radius:var(--r-pill);background:var(--sf2);color:var(--tx);font-family:var(--f-sans);font-size:14px;box-shadow:none;transition:border-color .2s} :root .cpro-page .cpro-search input[type=search]:focus{border-color:var(--ac);box-shadow:none} :root .cpro-page .cpro-search input[type=search]::placeholder{color:var(--mu);opacity:1} :root .cpro-page .cpro-search input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none} /* Группы — чипы в одну строку с прокруткой */ :root .cpro-page .cpro-chips{flex-wrap:nowrap;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} :root .cpro-page .cpro-chips::-webkit-scrollbar{display:none} :root .cpro-page .cpro-chip{flex:0 0 auto;height:36px;min-height:36px;padding:0 16px;border:1px solid var(--ln2);border-radius:var(--r-pill);background:transparent;color:var(--tx2)!important;font-size:13px;font-weight:600;line-height:1;white-space:nowrap;transition:border-color .2s,color .2s} :root .cpro-page .cpro-chip:hover{border-color:var(--tx2);color:var(--tx)!important} :root .cpro-page .cpro-chip.is-active{background:var(--tx);border-color:var(--tx);color:var(--bg)!important} /* Сортировка модуля (в прототипе её нет) — тихими вкладками, без переноса */ :root .cpro-page .cpro-tabs{flex-wrap:nowrap;gap:20px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--ln)} :root .cpro-page .cpro-tabs::-webkit-scrollbar{display:none} :root .cpro-page .cpro-tabs a{flex:0 0 auto;gap:7px;padding:2px 0 11px;color:var(--mu)!important;font-size:13.5px;font-weight:600;opacity:1;transition:color .2s} :root .cpro-page .cpro-tabs a .cpro-ico{width:12px;height:12px} :root .cpro-page .cpro-tabs a:hover,:root .cpro-page .cpro-tabs a.is-active{color:var(--tx)!important} :root .cpro-page .cpro-tabs a.is-active .cpro-ico{color:var(--ac)} :root .cpro-page .cpro-tabs a.is-active::after{background:var(--ac)} /* ---------- Карточки ---------- */ :root .cpro-page .cpro-cards{gap:16px} :root .cpro-page .cpro-cards-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))} :root .cpro-page .cpro-card{position:relative;border:1px solid var(--ln);border-radius:26px;background:var(--sf);transition:transform .3s var(--ease),border-color .3s} :root .cpro-page .cpro-card:hover{transform:translateY(-3px);border-color:var(--ln2)} :root .cpro-page .cpro-card-cover{aspect-ratio:3/2;background:var(--sf2)} :root .cpro-page .cpro-card-cover .cpro-tag18{top:12px;right:auto;left:12px;padding:3px 8px;border-radius:8px;background:#E5484D;font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:0;line-height:1.1} :root .cpro-page .cpro-card-body{gap:6px;padding:16px 18px 18px} :root .cpro-page .cpro-card-head{gap:8px} :root .cpro-page .cpro-card .cpro-card-body .cpro-card-head{align-items:center} :root .cpro-page .cpro-card .cpro-card-body .cpro-card-title{padding-top:0} /* Значок сообщества — как в прототипе: значок акцентом перед названием, без плитки и без наезда на обложку */ :root .cpro-page .cpro-card .cpro-card-head .cpro-cicon{width:auto;height:auto;flex:0 0 auto;margin:0;border-radius:0;background:none;box-shadow:none;color:var(--ac);font-size:16px} :root .cpro-page .cpro-card .cpro-card-head .cpro-cicon .cpro-ico{width:1em;height:1em} :root .cpro-page .cpro-card .cpro-card-head .cpro-cicon-img{width:20px;height:20px;flex:0 0 20px;border-radius:6px;background:var(--sf2)} :root .cpro-page .cpro-card-title{font-size:16px;font-weight:700;line-height:normal} :root .cpro-page .cpro-card-title a,:root .cpro-page .cpro-card-title b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal} :root .cpro-page .cpro-card-title a:hover{text-decoration:none!important;color:var(--ac)!important} :root .cpro-page .cpro-card-lock{color:var(--mu);font-size:11px;opacity:1} :root .cpro-page .cpro-card-descr{flex:1;font-size:13.5px;line-height:1.5;color:var(--tx2);opacity:1} :root .cpro-page .cpro-card-foot{flex-wrap:nowrap;gap:10px;margin-top:8px} :root .cpro-page .cpro-card-meta{flex:1 1 auto;min-width:0;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--f-mono);font-size:12px;line-height:1.35;color:var(--mu);opacity:1} /* «Вступить» — пилюля 34px акцентом; «Вы участник» / заявка — контуром */ :root .cpro-page .cpro-card .cpro-join{flex:0 0 auto;height:34px;min-height:34px;margin-left:auto;padding:0 14px;border:1px solid var(--ac);border-radius:var(--r-pill);background:var(--ac);color:#fff;font-family:var(--f-sans);font-size:12.5px;font-weight:700;line-height:1;white-space:nowrap} :root .cpro-page .cpro-card .cpro-join:hover{filter:brightness(1.06)} :root .cpro-page .cpro-card .cpro-join .cpro-ico{display:none} :root .cpro-page .cpro-card :is(.cpro-join-member,.cpro-join-request,.cpro-join-owner,.cpro-join-banned){border-color:var(--ln2);background:transparent;color:var(--tx2)} :root .cpro-page .cpro-card :is(.cpro-join-member,.cpro-join-request,.cpro-join-owner):hover{filter:none;border-color:var(--tx2);color:var(--tx)} /* Пусто и общие коробки модуля */ :root .cpro-page .cpro-box{border:1px solid var(--ln);border-radius:26px;background:var(--sf)} :root .cpro-catalog>.cpro-empty{padding:50px 20px;border:0;background:transparent;text-align:center;color:var(--mu);font-size:14.5px} :root .cpro-catalog>.cpro-empty .cpro-empty-title{font-weight:400} /* ---------- Телефон (< 820) ---------- */ @media (max-width:819px){ :root .cpro-catalog{gap:18px 10px} :root .cpro-catalog .cpro-head-text{flex-basis:100%} :root .cpro-catalog>.cpro-search{flex:0 0 100%} :root .cpro-catalog .cpro-head-actions>.cpro-btn:not(.cpro-btn-ghost){margin-right:auto} :root .cpro-catalog>.cpro-tabs{flex:1 1 auto} :root .cpro-page .cpro-catalog .cpro-head-actions>.cpro-btn-ghost{flex:1 1 100%;justify-content:flex-start;margin-top:-14px;height:auto;padding:0;border:0} :root .cpro-page .cpro-title{font-size:40px} :root .cpro-page .cpro-search input[type=search]{font-size:16px} :root .cpro-page .cpro-cards-grid{grid-template-columns:minmax(0,1fr)} :root .cpro-catalog>.cpro-tabs{margin-top:-6px} } @media (max-width:360px){ :root .cpro-page .cpro-tabs{gap:16px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)} :root .cpro-page .cpro-tabs a{font-size:13px} } /* ---------- Формы модуля: мастер «Создать сообщество» (/communities/new/) и «Настройки» в «Управлении» — W, 16.10.2026 ---------- Модуль кладёт поля в .cpro-step обычным блоком — без промежутков. Как в прототипе (PulsrCommunity, мастер): группы через 22, подпись → поле 10, варианты «Доступ» рядом через 8, плашка-подсказка и кнопки — через 22, кнопки по краям формы. */ :root .cpro-page .cpro-form{gap:22px} :root .cpro-new .cpro-head{margin-bottom:22px} :root .cpro-new .cpro-form.cpro-box,:root .cpro-modbody>.cpro-form{padding:32px;border:1px solid var(--ln);border-radius:30px;background:var(--sf)} :root .cpro-new .cpro-step:not([hidden]){display:flex;flex-direction:column;gap:22px;min-width:0} :root .cpro-page .cpro-form .cpro-field{gap:10px} :root .cpro-page .cpro-form .cpro-label{font-size:13px;font-weight:700;color:var(--tx2)} :root .cpro-new .cpro-steps{gap:18px} :root .cpro-new .cpro-steps li{font-size:14px;color:var(--mu);opacity:1} :root .cpro-new .cpro-steps li.is-active{color:var(--tx)} :root .cpro-new .cpro-steps li span{border-color:var(--ln2);font-family:var(--f-mono);font-size:11.5px} :root .cpro-page .cpro-form .cpro-input{min-height:52px;padding:14px 16px;border-radius:16px;border-color:var(--ln);background:var(--sf2);color:var(--tx);font-size:16px} :root .cpro-page .cpro-form textarea.cpro-input{min-height:0;font-size:14.5px;line-height:1.5;resize:none} :root .cpro-page .cpro-form .cpro-input:focus{border-color:var(--ac)} :root .cpro-page .cpro-form .cpro-input.is-error{border-color:var(--bad,#E5484D)} :root .cpro-page .cpro-form .cpro-counter{top:17px;font-family:var(--f-mono);font-size:11.5px;color:var(--mu);opacity:1} /* 19.10.2026 (отзыв): счётчик «0/40» не наезжает на текст — у поля место справа, у textarea счётчик в правом нижнем углу */ :root .cpro-page .cpro-form .cpro-count-wrap>input.cpro-input{padding-right:66px;text-overflow:ellipsis} :root .cpro-page .cpro-form .cpro-count-wrap>input.cpro-input::placeholder{text-overflow:ellipsis} :root .cpro-page .cpro-form .cpro-count-wrap>textarea.cpro-input{padding-bottom:30px} :root .cpro-page .cpro-form .cpro-count-wrap>textarea~.cpro-counter{top:auto;bottom:10px;right:14px} :root .cpro-page .cpro-form .cpro-count-wrap>input~.cpro-counter{top:50%;transform:translateY(-50%);right:16px} :root .cpro-page .cpro-form .cpro-address{font-family:var(--f-mono);font-size:12px;color:var(--mu);opacity:1;min-width:0;overflow-wrap:anywhere} :root .cpro-page .cpro-form .cpro-address code{padding:0;background:none;font-family:inherit;font-size:inherit} :root .cpro-page .cpro-form .cpro-address b{color:var(--tx);font-weight:500} :root .cpro-page .cpro-form .cpro-hint{font-size:12.5px;line-height:1.5;color:var(--mu);opacity:1} :root .cpro-page .cpro-form .cpro-chipradio span{height:36px;min-height:36px;padding:0 14px;border-color:var(--ln2);color:var(--tx2);font-size:13px} :root .cpro-page .cpro-form .cpro-chipradio input:checked+span{background:var(--tx);border-color:var(--tx);color:var(--bg)} :root .cpro-page .cpro-form .cpro-chipradio input.is-error+span{border-color:var(--bad,#E5484D)} :root .cpro-page .cpro-form .cpro-iconradio span{height:44px;border-radius:14px;border-color:var(--ln);color:var(--tx2);font-size:16px} :root .cpro-page .cpro-form .cpro-iconradio input:checked+span{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 10%,transparent);color:var(--ac)} :root .cpro-page .cpro-form .cpro-coverradio span{border-radius:14px} :root .cpro-page .cpro-form .cpro-file{padding:9px 16px;border-color:var(--ln2);color:var(--tx2);font-size:13px} :root .cpro-page .cpro-form .cpro-file:hover{border-color:var(--ac);color:var(--ac)} /* Варианты («Доступ», «Кто пишет») — карточки рядом через 8 (узко — друг под другом), подпись группы над ними */ :root .cpro-page .cpro-form .cpro-field:has(>.cpro-option){flex-flow:row wrap;gap:10px 8px} :root .cpro-page .cpro-form .cpro-field:has(>.cpro-option)>*{flex:1 1 100%} :root .cpro-page .cpro-form .cpro-field:has(>.cpro-option)>.cpro-option{flex:1 1 220px;min-width:0} :root .cpro-page .cpro-form :is(.cpro-option,.cpro-check){gap:12px;padding:14px;border-radius:16px;border:1px solid var(--ln);background:transparent;color:var(--tx);transition:border-color .2s,background .2s} :root .cpro-page .cpro-form .cpro-option:hover{border-color:var(--ln2)} :root .cpro-page .cpro-form .cpro-option:has(input:checked){border-color:var(--ac);background:color-mix(in srgb,var(--ac) 7%,transparent)} :root .cpro-page .cpro-form :is(.cpro-option,.cpro-check) b{font-size:14px;font-weight:700} :root .cpro-page .cpro-form :is(.cpro-option,.cpro-check) small{margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--mu);opacity:1} /* Флажки («Контент 18+», «Проверять посты») — плашка на --sf2, как в прототипе */ :root .cpro-page .cpro-form .cpro-check{align-items:center;padding:12px 14px;border-color:transparent;background:var(--sf2)} :root .cpro-page .cpro-form .cpro-check input{margin:0} /* «Вы станете создателем…» — пунктирная плашка с лампочкой */ :root .cpro-page .cpro-form .cpro-hint-box{display:flex;gap:10px;padding:14px;border:1px dashed var(--ln2);border-radius:16px;background:transparent;font-size:12.5px;line-height:1.5;color:var(--mu)} :root .cpro-page .cpro-form .cpro-hint-box::before{content:"\f0eb";flex:0 0 auto;margin-top:1px;font-family:"Font Awesome 7 Free","Font Awesome 6 Free";font-weight:900;color:var(--ac)} :root .cpro-page .cpro-form .cpro-form-foot{align-items:center;gap:10px;padding-top:6px} :root .cpro-page .cpro-form .cpro-form-foot .cpro-btn{height:46px;min-height:46px;padding:0 22px;border-radius:var(--r-pill);font-family:var(--f-sans);font-size:14px;font-weight:700} :root .cpro-page .cpro-form .cpro-form-foot .cpro-btn-ghost{padding:0 18px;border-color:var(--ln2);background:transparent;color:var(--tx)!important} :root .cpro-page .cpro-form .cpro-form-error{border-radius:16px;font-size:13.5px} /* Мастер: «Назад» слева, «Дальше / Создать» справа, со стрелкой и галочкой, как в прототипе */ :root .cpro-new .cpro-form-foot{justify-content:space-between;margin-top:auto} :root .cpro-new .cpro-form-foot>.cpro-btn:last-child{margin-left:auto} :root .cpro-new .cpro-form-foot .cpro-btn-ghost::before{content:"\f060";margin-right:2px;font-family:"Font Awesome 7 Free","Font Awesome 6 Free";font-weight:900;font-size:12px} :root .cpro-new .cpro-form-foot .cpro-btn:not(.cpro-btn-ghost)::after{content:"\f061";margin-left:2px;font-family:"Font Awesome 7 Free","Font Awesome 6 Free";font-weight:900;font-size:12px} :root .cpro-new .cpro-step[data-step="2"] .cpro-form-foot .cpro-btn:not(.cpro-btn-ghost)::after{content:"\f00c"} :root .cpro-new .cpro-new-grid{gap:24px} :root .cpro-new .cpro-new-preview-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;color:var(--mu)} /* ---------- «Управление» (/communities/mod/N/): шапка — надпись, значок 64, название; вкладки и содержимое через 22 ---------- */ :root .cpro-modpanel{display:flex;flex-direction:column;gap:22px;min-width:0} :root .cpro-modpanel>.cpro-head{margin:0;align-items:center} :root .cpro-page .cpro-kicker{margin:0 0 12px;font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.18em;color:var(--mu);opacity:1} :root .cpro-modpanel .cpro-title-icon{gap:16px;font-size:46px;min-width:0} :root .cpro-modpanel .cpro-title-icon>span:last-child{min-width:0;overflow-wrap:anywhere} :root .cpro-modpanel .cpro-title-icon .cpro-cicon{display:grid;place-items:center;flex:0 0 64px;width:64px;height:64px;border-radius:20px;font-size:26px} :root .cpro-modpanel .cpro-head-actions .cpro-btn{height:44px;min-height:44px;padding:0 18px;border-color:var(--ln2);border-radius:var(--r-pill);font-size:13.5px;font-weight:700} :root .cpro-modpanel>.cpro-tabs{margin-top:-4px} :root .cpro-modbody{gap:12px} @media (max-width:819px){ :root .cpro-new .cpro-form.cpro-box,:root .cpro-modbody>.cpro-form{padding:22px 18px;border-radius:24px} :root .cpro-page .cpro-form,:root .cpro-new .cpro-step:not([hidden]){gap:20px} :root .cpro-modpanel{gap:18px} :root .cpro-modpanel .cpro-title-icon{gap:12px;font-size:32px} :root .cpro-modpanel .cpro-title-icon .cpro-cicon{flex-basis:48px;width:48px;height:48px;border-radius:16px;font-size:20px} } /* «Мои сообщества», лента модуля и прочие страницы с шапкой: заголовок → содержимое через 22, как каталог */ :root .cpro-page>*:not(.cpro-catalog):not(.cpro-modpanel)>.cpro-head{margin-bottom:22px} /* ---------- C, 16.10: шапка сообщества Pulsr с данными модуля — ссылки, «Приватное», объявление; страница «О сообществе» ---------- */ .pk-hero-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .pk-hero-link{display:inline-flex;align-items:center;gap:7px;max-width:220px;height:32px;padding:0 12px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#F7F2EA;font-size:12.5px;font-weight:600;line-height:1;text-decoration:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .pk-hero-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pk-hero-link i{font-size:13px;opacity:.9} .pk-hero-link:hover{color:#fff;background:rgba(255,255,255,.16);text-decoration:none} .pk-hero-priv{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:3px 9px;border-radius:var(--r-pill);background:rgba(255,255,255,.14);letter-spacing:.08em} .pk-hero-priv i{font-size:10px} .pk-notice{display:flex;align-items:flex-start;gap:14px;margin:16px 0 0;padding:16px 18px;border-radius:24px;border:1px solid color-mix(in srgb,var(--c,var(--ac)) 40%,var(--ln));background:color-mix(in srgb,var(--c,var(--ac)) 8%,var(--sf));color:var(--tx);animation:rise .4s ease backwards} .pk-notice>i{flex:0 0 36px;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:color-mix(in srgb,var(--c,var(--ac)) 18%,transparent);color:var(--c,var(--ac));font-size:15px} .pk-notice-txt{min-width:0;padding-top:7px;font-size:14.5px;line-height:1.55;overflow-wrap:anywhere} .cpro-empty-pulsr .empty-ico svg{width:1em;height:1em} :root .cpro-page-about .pk-hero{margin-bottom:22px} :root .cpro-about{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start} :root .cpro-about>.cpro-box:first-child{grid-row:span 3} :root .cpro-about .cpro-box{padding:22px 24px} :root .cpro-about .cpro-box-title{margin:0 0 12px;font-family:var(--f-serif);font-weight:600;font-size:22px;line-height:1.15;color:var(--tx)} :root .cpro-about-descr{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--tx2)} :root .cpro-about-list{display:flex;flex-direction:column;margin:0} :root .cpro-about-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--ln);font-size:14px} :root .cpro-about-row dt{color:var(--mu);font-weight:500} :root .cpro-about-row dd{margin:0;color:var(--tx);font-weight:600;text-align:right;overflow-wrap:anywhere} :root .cpro-about-row a{color:var(--ac);text-decoration:none} :root .cpro-page .cpro-links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px} :root .cpro-page .cpro-link{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:var(--r-pill);border:1px solid var(--ln);background:var(--sf2);color:var(--tx);font-size:13px;font-weight:600;text-decoration:none} :root .cpro-page .cpro-link:hover{border-color:color-mix(in srgb,var(--ac) 50%,var(--ln));color:var(--tx)} :root .cpro-page .cpro-link svg{width:14px;height:14px;color:var(--ac)} :root .cpro-about .cpro-rules-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:13.5px;line-height:1.5;color:var(--tx2)} :root .cpro-about .cpro-rules-list b{color:var(--tx)} :root .cpro-about .cpro-rules-list span{display:block;color:var(--mu)} :root .cpro-about .cpro-people{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} :root .cpro-about .cpro-people a{display:flex;align-items:center;gap:12px;color:var(--tx);text-decoration:none} :root .cpro-about .cpro-ava{width:38px;height:38px;border-radius:50%;object-fit:cover} @media (max-width:1099px){:root .cpro-about{grid-template-columns:minmax(0,1fr)}:root .cpro-about>.cpro-box:first-child{grid-row:auto}} @media (max-width:819px){ .pk-notice{margin-top:14px;padding:14px 16px;border-radius:20px} .pk-hero-links{gap:6px;margin-top:12px} .pk-hero-link{height:30px;padding:0 10px;font-size:12px} :root .cpro-page-about .pk-hero{margin-bottom:16px} :root .cpro-about .cpro-box{padding:18px 16px} } .pk-notice--suggest{margin:0 0 18px} /* 19.10.2026 (п. 15): каталог сообществ на телефоне — компактные карточки (обложка миниатюрой слева), а не одно сообщество на экран */ @media (max-width:600px){ :root .cpro-page .cpro-cards-grid{gap:10px} :root .cpro-page .cpro-card{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:0 12px;padding:10px;border-radius:22px} :root .cpro-page .cpro-card:hover{transform:none} :root .cpro-page .cpro-card-cover{align-self:stretch;width:76px;height:auto;min-height:76px;aspect-ratio:auto;border-radius:16px;overflow:hidden} :root .cpro-page .cpro-card-cover img{width:100%;height:100%;object-fit:cover} :root .cpro-page .cpro-card-cover .cpro-tag18{top:6px;left:6px;padding:2px 5px;font-size:9.5px} :root .cpro-page .cpro-card-body{gap:3px;padding:2px 2px 2px 0} :root .cpro-page .cpro-card-title{font-size:15px} :root .cpro-page .cpro-card-descr{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.4} :root .cpro-page .cpro-card-foot{margin-top:4px;gap:8px} :root .cpro-page .cpro-card .cpro-join{height:32px;min-height:32px;padding:0 12px;font-size:12.5px} :root .cpro-page .cpro-catalog .cpro-head-actions>.cpro-btn-ghost{margin-top:0;font-size:14px} } @media (max-width:600px){:root .cpro-page .cpro-card-meta{word-spacing:-.3em}}