/* Оформление трёх порталов: wikicompass, adposium, wikipulse. ------------------------------------------------------------------ Устройство файла: 1. Одна таблица цветов на светлую и тёмную тему. Всё остальное берёт цвета только отсюда — иначе вторая тема разъезжается при каждой правке. 2. Акцент и наборный характер задаются ОДНИМ атрибутом : compass — справочник, набран рубленым, акцент бирюзово-зелёный; adposium и pulse — издания, набраны антиквой, акценты свои. Так три сайта остаются одной семьёй, а не тремя разными вёрстками. 3. Приёмы, на которых держится вид: четыре уровня заголовков и ни одного пятого; плотные ряды с волосяными линейками; цифры моноширинные и выровнены по правому краю; у каждого факта рядом источник. Шрифты пока системные. Когда появятся свои файлы — добавить @font-face и подменить --display / --text ниже, остальное не тронется. */ :root{ /* нейтральные — общие для трёх сайтов, слегка холодные */ --paper:#F4F5F6; --paper-2:#EAECEE; --paper-3:#DFE2E5; --surface:#FFFFFF; --rule:#D5D9DC; --rule-soft:#E4E7E9; --ink:#111417; --ink-2:#41474C; --ink-3:#666D74; /* акцент по умолчанию — справочник */ --brand:#0F5F57; --brand-2:#0B4A44; --brand-soft:#E4F0EE; /* смысловые цвета событий: НЕ акцент, приглушены нарочно */ --hire:#1F6146; --leave:#8E3423; --deal:#6E4A0C; --rank:#3E3577; --job:#1B5468; --fin:#4A5157; /* тёмная панель для данных — не зависит от темы страницы */ --deep:#101416; --deep-ink:#E8EBED; --deep-ink-2:#98A1A6; --deep-rule:#242B2E; --display:"Helvetica Neue","Arial Nova","Segoe UI",system-ui,sans-serif; --text:"PT Serif",Charter,"Iowan Old Style",Georgia,serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --wide:1200px; } /* издания набираются антиквой и имеют свои акценты */ html[data-site="adposium"]{ --display:"PT Serif",Charter,"Iowan Old Style",Georgia,serif; --brand:#8E2C22; --brand-2:#71211A; --brand-soft:#F7E9E7; } html[data-site="pulse"]{ --display:"PT Serif",Charter,"Iowan Old Style",Georgia,serif; --brand:#2F3AAE; --brand-2:#252E8C; --brand-soft:#E9EAF7; } @media (prefers-color-scheme: dark){ :root{ --paper:#0E1113; --paper-2:#161A1C; --paper-3:#1E2326; --surface:#141819; --rule:#252B2E; --rule-soft:#1E2427; --ink:#E7EAEC; --ink-2:#AEB5B9; --ink-3:#7E868C; --brand:#57C3B4; --brand-2:#7BD3C7; --brand-soft:#11251F; --hire:#6DC49B; --leave:#E1907C; --deal:#D2A551; --rank:#A69CE8; --job:#6FB6D2; --fin:#9AA3A9; } html[data-site="adposium"]{ --brand:#E0897A; --brand-2:#EDA192; --brand-soft:#2A1613; } html[data-site="pulse"]{ --brand:#9B9BFF; --brand-2:#B4B4FF; --brand-soft:#181A33; } } :root[data-theme="dark"]{ --paper:#0E1113; --paper-2:#161A1C; --paper-3:#1E2326; --surface:#141819; --rule:#252B2E; --rule-soft:#1E2427; --ink:#E7EAEC; --ink-2:#AEB5B9; --ink-3:#7E868C; --brand:#57C3B4; --brand-2:#7BD3C7; --brand-soft:#11251F; --hire:#6DC49B; --leave:#E1907C; --deal:#D2A551; --rank:#A69CE8; --job:#6FB6D2; --fin:#9AA3A9; } :root[data-theme="dark"][data-site="adposium"]{ --brand:#E0897A; --brand-2:#EDA192; --brand-soft:#2A1613; } :root[data-theme="dark"][data-site="pulse"]{ --brand:#9B9BFF; --brand-2:#B4B4FF; --brand-soft:#181A33; } :root[data-theme="light"]{ --paper:#F4F5F6; --paper-2:#EAECEE; --paper-3:#DFE2E5; --surface:#FFFFFF; --rule:#D5D9DC; --rule-soft:#E4E7E9; --ink:#111417; --ink-2:#41474C; --ink-3:#666D74; --brand:#0F5F57; --brand-2:#0B4A44; --brand-soft:#E4F0EE; --hire:#1F6146; --leave:#8E3423; --deal:#6E4A0C; --rank:#3E3577; --job:#1B5468; --fin:#4A5157; } :root[data-theme="light"][data-site="adposium"]{ --brand:#8E2C22; --brand-2:#71211A; --brand-soft:#F7E9E7; } :root[data-theme="light"][data-site="pulse"]{ --brand:#2F3AAE; --brand-2:#252E8C; --brand-soft:#E9EAF7; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--text);font-size:17px;line-height:1.62; -webkit-font-smoothing:antialiased; } a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline;text-underline-offset:2px} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{ outline:2px solid var(--brand);outline-offset:2px;border-radius:2px; } /* ---------- четыре уровня и ни одного пятого ---------- 1 — обложка страницы, 2 — раздел, 3 — блок, метка — моношириной. */ h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance} h1{font-weight:700;letter-spacing:-.025em;line-height:1.03} h2{font-weight:700;letter-spacing:-.015em;line-height:1.1} h3{font-weight:700;letter-spacing:-.01em;line-height:1.2} html[data-site="adposium"] h1,html[data-site="pulse"] h1, html[data-site="adposium"] h2,html[data-site="pulse"] h2, html[data-site="adposium"] h3,html[data-site="pulse"] h3{font-weight:400;letter-spacing:-.012em} p{margin:0 0 .82em} p:last-child{margin-bottom:0} .label,.eyebrow,.k,.src,.when,.build,.sr,.c{ font-family:var(--mono);font-size:11.5px;letter-spacing:.11em; text-transform:uppercase;color:var(--ink-3); } .wrap{max-width:var(--wide);margin:0 auto;padding:0 clamp(16px,3vw,36px)} /* ---------- полоса демо-данных ---------- */ .demo-bar{ background:var(--deep);color:var(--deep-ink-2); font-family:var(--mono);font-size:12px;padding:7px 0;letter-spacing:.04em; } .demo-bar .wrap{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline} .demo-bar span:first-child{color:var(--deep-ink);letter-spacing:.14em} /* ---------- шапка: имя, разделы, ничего лишнего ---------- */ .top{border-bottom:1px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:20} .top .wrap{display:flex;align-items:stretch;gap:clamp(14px,3vw,34px);min-height:56px} .logo{ font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.03em; color:var(--ink);white-space:nowrap;display:flex;align-items:center; } .logo:hover{text-decoration:none} .logo b{color:var(--brand);font-weight:700} html[data-site="adposium"] .logo,html[data-site="pulse"] .logo{font-weight:400;letter-spacing:-.02em;font-size:22px} .nav{ display:flex;gap:clamp(12px,1.8vw,24px);flex:1;align-items:stretch; overflow-x:auto;scrollbar-width:none;font-family:var(--display); font-size:14.5px;letter-spacing:-.005em; } .nav::-webkit-scrollbar{display:none} .nav a{ color:var(--ink-2);white-space:nowrap;display:flex;align-items:center; border-bottom:2px solid transparent;margin-bottom:-1px; } .nav a:hover{color:var(--ink);text-decoration:none} .nav a.on{color:var(--ink);border-bottom-color:var(--brand);font-weight:600} html[data-site="adposium"] .nav,html[data-site="pulse"] .nav{font-family:var(--text);font-size:16px} /* ---------- поиск и кнопки ---------- */ .search{display:flex;gap:8px} .search input[type=search],.search input[type=text]{ flex:1;min-width:0;padding:12px 15px;font-size:16.5px;font-family:var(--text); background:var(--surface);color:var(--ink); border:1px solid var(--rule);border-radius:0; } .search input::placeholder{color:var(--ink-3)} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 22px;font-size:15px;font-family:var(--display);font-weight:600; background:var(--ink);color:var(--paper);border:1px solid var(--ink); border-radius:0;cursor:pointer;white-space:nowrap;letter-spacing:-.005em; } .btn:hover{background:var(--brand);border-color:var(--brand);color:#fff;text-decoration:none} .btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)} .btn.ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)} /* ---------- обложка страницы ---------- */ .hero{padding:clamp(40px,6.5vw,84px) 0 clamp(26px,4vw,40px)} .hero h1{font-size:clamp(36px,6.4vw,74px);max-width:20ch;margin-bottom:20px} .hero .lede{font-size:clamp(18px,1.7vw,21px);color:var(--ink-2);max-width:54ch;margin-bottom:28px} .hero .search{max-width:640px} .hero .hint{margin-top:14px;font-size:15px;color:var(--ink-3)} .hero .hint a{color:var(--ink-2)} /* ---------- сводка рынка ---------- Первое, что видит человек: не лента, а сравнение с обычным уровнем. Поэтому блок стоит выше счётчиков и набран крупнее ленты. */ .pulse-wrap{border-top:1px solid var(--ink);border-bottom:1px solid var(--rule); background:var(--paper-2);padding:26px 0 28px} .pulse-head{display:flex;justify-content:space-between;align-items:baseline; gap:16px;flex-wrap:wrap;margin-bottom:20px} .pulse-head h2{font-size:clamp(22px,2.6vw,30px)} .pulse-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px;background:var(--rule);border:1px solid var(--rule);margin-bottom:18px} .pulse-n{background:var(--paper);padding:16px 18px 15px} /* «чаще обычного» вынесено из сетки с числами: в общей сетке две плитки растягивались пустотой под высоту этого списка */ .pulse-rise{background:var(--paper);border:1px solid var(--rule); padding:15px 18px 17px;margin-bottom:22px} .pulse-n b{display:block;font-family:var(--mono);font-size:34px;line-height:1; letter-spacing:-.03em;font-variant-numeric:tabular-nums} .pulse-n span{display:block;font-size:15px;color:var(--ink-2);margin-top:7px} .pulse-n i{display:block;font-style:normal;font-family:var(--mono);font-size:12px; color:var(--ink-3);margin-top:8px;letter-spacing:.03em} .pulse-n i.up{color:var(--hire)} .pulse-n i.down{color:var(--leave)} .pulse-rise ul{list-style:none;margin:11px 0 0;padding:0;display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:11px 26px} .pulse-rise li{display:flex;flex-direction:column;gap:1px;font-size:14.5px} .pulse-rise li b{font-family:var(--display);font-weight:600;font-size:15.5px} html[data-site="adposium"] .pulse-rise li b,html[data-site="pulse"] .pulse-rise li b{ font-family:var(--text);font-weight:700} .pulse-rise li span{color:var(--ink-3);font-size:13.5px} .pulse-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px} .pulse-box h3{font-size:18px;margin-bottom:12px;padding-bottom:9px; border-bottom:1px solid var(--rule)} .pulse-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .pulse-list li{display:flex;flex-direction:column;gap:2px;padding:10px 0; border-bottom:1px solid var(--rule-soft)} .pulse-list li:last-child{border-bottom:none} .pulse-list .t{font-size:16px;color:var(--ink)} .pulse-list .sub{font-size:13.5px;color:var(--ink-3)} .pulse-list .kind{margin-bottom:2px} /* ---------- цифра как объект: число, подпись, происхождение ---------- */ .counters{ display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px; background:var(--rule);border-top:1px solid var(--ink);border-bottom:1px solid var(--rule); } .counters > div{background:var(--paper);padding:16px 18px 15px} .counters .n{ font-family:var(--mono);font-size:27px;font-weight:600;line-height:1; font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--ink); } .counters .l{font-size:14px;color:var(--ink-3);margin-top:6px;line-height:1.34} section.block{padding:clamp(34px,4.6vw,58px) 0;border-top:1px solid var(--rule)} .block-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-bottom:22px;flex-wrap:wrap} .block-head h2{font-size:clamp(24px,3vw,34px)} .block-head .more{font-family:var(--display);font-size:14.5px;font-weight:600} /* ---------- лента поводов: плотно, линейки волосяные ---------- */ .feed{display:flex;flex-direction:column;border-top:1px solid var(--ink)} .item{ display:grid;grid-template-columns:104px 1fr 200px;gap:22px; padding:12px 2px 13px;border-bottom:1px solid var(--rule-soft);align-items:start; } .item:hover{background:var(--paper-2)} .item .when{padding-top:4px;white-space:nowrap;letter-spacing:.06em} .item .main{min-width:0} .item .why{ font-family:var(--display);font-size:13.5px;font-weight:600;color:var(--brand); margin-bottom:5px;line-height:1.3;letter-spacing:-.005em; } .item .t{font-family:var(--display);font-size:17px;font-weight:600;color:var(--ink);margin-bottom:3px;line-height:1.28} html[data-site="adposium"] .item .t,html[data-site="pulse"] .item .t{font-family:var(--text);font-weight:700} .item .d{font-size:15.5px;line-height:1.44;color:var(--ink-2);margin-bottom:5px} /* Готовая фраза для звонка — не пересказ события, поэтому набрана курсивом и мельче: глаз должен отличать её от факта, а не читать как факт. */ .ice{font-size:15px;line-height:1.42;font-style:italic;color:var(--ink-2);margin-bottom:6px} .item .src{letter-spacing:.06em;text-transform:none;line-height:1.5} .item .src a{color:var(--ink-3);text-decoration:underline} .flag-btn{ background:none;border:none;padding:0;font-family:var(--mono);font-size:11.5px; color:var(--ink-3);cursor:pointer;text-decoration:underline;letter-spacing:.06em; } .flag-btn:hover{color:var(--ink-2)} .item .side{font-size:15px;color:var(--ink-2);display:flex;flex-direction:column;gap:3px} .item .side .co{font-family:var(--display);font-weight:600;font-size:15px} .item .side .meta{font-size:13.5px;color:var(--ink-3)} /* Вид события: не плашка, а моношиная метка с засечкой цветом. Плашки на каждой строке спорят с плотностью и старят страницу. */ .kind{ display:inline-flex;align-items:center;gap:6px; font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-3);margin-bottom:6px; } .kind::before{content:"";width:3px;height:11px;background:var(--fin);flex:none} .kind.hire::before{background:var(--hire)} .kind.leave::before{background:var(--leave)} .kind.deal::before{background:var(--deal)} .kind.launch::before{background:var(--brand)} .kind.rank::before{background:var(--rank)} .kind.job::before{background:var(--job)} /* ---------- плитки ---------- */ .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)} .tile{background:var(--paper);padding:16px 18px;display:flex;flex-direction:column;gap:5px} .tile:hover{background:var(--paper-2);text-decoration:none} .tile .n{font-family:var(--display);font-size:17.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em} html[data-site="adposium"] .tile .n,html[data-site="pulse"] .tile .n{font-family:var(--text);font-weight:700} .tile .c{letter-spacing:.08em} .tile .i{font-size:15px;color:var(--ink-2)} /* ---------- таблицы: цифры строго друг под другом ---------- */ .scroll{overflow-x:auto;border-top:1px solid var(--ink)} table{border-collapse:collapse;width:100%;min-width:620px;font-size:15.5px} th,td{text-align:left;padding:10px 16px 10px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top} thead th{ font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase; color:var(--ink-3);font-weight:400;border-bottom:1px solid var(--rule);white-space:nowrap; padding-top:9px;padding-bottom:9px; } tbody tr:last-child td{border-bottom:none} tbody tr:hover{background:var(--paper-2)} td.num,th.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right;padding-right:0} td.rank{font-family:var(--mono);color:var(--ink-3);width:54px;font-variant-numeric:tabular-nums} /* ---------- каталог ---------- */ .layout{display:grid;grid-template-columns:236px 1fr;gap:40px;padding:30px 0 64px;align-items:start} .filters{position:sticky;top:72px;display:flex;flex-direction:column;gap:22px} .fgroup{display:flex;flex-direction:column;gap:7px} .fgroup .h{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);padding-bottom:5px;border-bottom:1px solid var(--rule)} .fgroup a{font-size:15.5px;color:var(--ink-2);display:flex;justify-content:space-between;gap:10px} .fgroup a:hover{color:var(--ink);text-decoration:none} .fgroup a.on{color:var(--ink);font-weight:700} .fgroup a .n{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums} .results-head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;margin-bottom:18px;flex-wrap:wrap} .results-head .count{font-size:15px;color:var(--ink-3)} .results-head .mix{display:inline-flex;flex-wrap:wrap;gap:6px;margin-left:10px;vertical-align:middle} .results-head .mix-i{font-family:var(--mono);font-size:11px;color:var(--ink-2);border:1px solid var(--rule);padding:2px 7px} .sorts{display:flex;gap:16px;font-family:var(--display);font-size:14.5px} .sorts a{color:var(--ink-3)} .sorts a.on{color:var(--ink);font-weight:700} .cards{display:flex;flex-direction:column;border-top:1px solid var(--ink)} .card{display:grid;grid-template-columns:1fr 150px 130px;gap:20px;padding:14px 2px;border-bottom:1px solid var(--rule-soft);align-items:center} .card:hover{background:var(--paper-2)} .card .n{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.01em} .card .n a{color:var(--ink)} .card .m{font-size:14.5px;color:var(--ink-3);margin-top:2px} .card .rev{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;text-align:right;color:var(--ink-2)} .card .ev{font-size:13.5px;color:var(--ink-3);text-align:right} .card .ev b{color:var(--hire);font-weight:700} .pager{display:flex;gap:6px;padding:26px 0;flex-wrap:wrap} .pager a,.pager span{font-family:var(--mono);font-size:13px;padding:7px 12px;border:1px solid var(--rule);color:var(--ink-2);font-variant-numeric:tabular-nums} .pager span.cur{background:var(--ink);color:var(--paper);border-color:var(--ink)} .pager a:hover{border-color:var(--ink);color:var(--ink);text-decoration:none} /* ---------- карточка компании: у каждого поля виден источник ---------- */ .co-head{padding:32px 0 26px;border-bottom:1px solid var(--ink)} .crumbs{font-size:14.5px;color:var(--ink-3);margin-bottom:14px} .crumbs a{color:var(--ink-3)} .co-head h1{font-size:clamp(30px,4.4vw,52px);margin-bottom:10px} .co-head .legal{font-size:16px;color:var(--ink-2);margin-bottom:16px} .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:20px} /* Только ПРЯМЫЕ потомки — иначе отступы ячейки достаются ещё и метке со значением внутри, и строка реквизитов раздувается вдвое. */ .facts > div{background:var(--paper);padding:12px 16px 11px} .facts .k{display:block;margin-bottom:2px;font-size:11px;line-height:1.5} .facts .v{font-size:16.5px;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--ink)} .facts .src{display:block;margin-top:5px;text-transform:none;letter-spacing:.04em;font-size:11px} .cols{display:grid;grid-template-columns:1fr 316px;gap:44px;padding:30px 0 64px;align-items:start} .side-box{border:1px solid var(--rule);padding:18px 20px;margin-bottom:18px;background:var(--surface)} .side-box h3{font-size:17.5px;margin-bottom:13px} .side-box ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15.5px} .side-box li{display:flex;flex-direction:column;gap:1px} .side-box .sub{font-size:13.5px;color:var(--ink-3)} .side-box.cta{background:var(--brand-soft);border-color:var(--brand)} .side-box.cta p{font-size:15.5px;color:var(--ink-2)} .sec{margin-bottom:40px} .sec h2{font-size:24px;margin-bottom:15px} .people-list{display:flex;flex-direction:column;border-top:1px solid var(--ink)} .person{display:flex;justify-content:space-between;gap:20px;padding:12px 2px;border-bottom:1px solid var(--rule-soft);flex-wrap:wrap} .person .nm{font-family:var(--display);font-weight:600;font-size:16px} .person .ti{font-size:15px;color:var(--ink-2)} .person .sr{text-transform:none;letter-spacing:.04em} .notice{border-left:2px solid var(--brand);background:var(--paper-2);padding:15px 19px;font-size:15.5px;color:var(--ink-2);margin:18px 0} .notice b{color:var(--ink)} /* ---------- тёмная панель: на ней данные светятся ---------- */ .dark-panel{background:var(--deep);color:var(--deep-ink);padding:26px clamp(18px,3vw,30px)} .dark-panel h2,.dark-panel h3{color:var(--deep-ink)} .dark-panel .label{color:var(--deep-ink-2)} .dark-panel table th{color:var(--deep-ink-2);border-bottom-color:var(--deep-rule)} .dark-panel table td{border-bottom-color:var(--deep-rule)} .dark-panel tbody tr:hover{background:#181D20} /* ---------- формы ---------- */ form.lead{display:flex;flex-direction:column;gap:11px;max-width:470px;margin-top:18px} form.lead input,form.lead textarea{ padding:12px 14px;font-size:16px;font-family:var(--text);background:var(--surface); color:var(--ink);border:1px solid var(--rule);border-radius:0;width:100%; } form.lead textarea{min-height:92px;resize:vertical} .ok{background:var(--brand-soft);color:var(--brand);padding:14px 17px;font-size:15.5px;margin-top:15px} /* ---------- текстовые страницы ---------- */ .doc{max-width:66ch;padding:38px 0 76px;display:flex;flex-direction:column;gap:19px} .doc h1{font-size:clamp(30px,4vw,46px);line-height:1.06} .doc h2{font-size:24px;margin-top:16px} .doc ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:7px;color:var(--ink-2)} .doc p{color:var(--ink-2)} .doc p b,.doc li b{color:var(--ink)} /* ---------- подвал ---------- */ .foot{border-top:1px solid var(--ink);background:var(--paper);padding:34px 0 50px;font-size:15px;color:var(--ink-3)} .foot .wrap{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between} .foot a{color:var(--ink-2)} .foot .cols2{display:flex;gap:44px;flex-wrap:wrap} .foot .cols2 div{display:flex;flex-direction:column;gap:6px} .foot .build{letter-spacing:.06em;text-transform:none} @media (max-width:960px){ .layout,.cols{grid-template-columns:1fr;gap:26px} .filters{position:static} .item{grid-template-columns:1fr;gap:6px} .item .when{padding-top:0} .item .side{flex-direction:row;gap:12px;flex-wrap:wrap} .card{grid-template-columns:1fr;gap:4px} .card .rev,.card .ev{text-align:left} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* Страница одной новости. Ширина текста намеренно узкая: читают глазами, а не сканируют таблицу, и строка длиннее 70 знаков утомляет. */ .news{max-width:44rem;margin:0 auto;padding:2rem 0 4rem} .news-meta{font-size:.85rem;color:var(--muted);text-transform:uppercase; letter-spacing:.06em;margin-bottom:.6rem} .news h1{font-size:2rem;line-height:1.18;margin:0 0 1.4rem} .news-card{width:100%;height:auto;border-radius:10px;margin:0 0 1.6rem;display:block} .news-text p{font-size:1.06rem;line-height:1.65;margin:0 0 1.1rem} .news-source{font-size:.92rem;color:var(--muted);margin-top:1.8rem} .news-back{margin-top:2rem} /* ---------- страница компании: подвид, происхождение, дыры, правка ---------- Три вещи, которых на странице раньше не было. 1. Подвид. Порядок разделов задаёт не шаблон, а подвид компании, и рядом написано, по чему он определён: у ПИКа основной ОКВЭД — «венчурное инвестирование», и без этой строки читатель решил бы, что мы ошиблись. 2. Происхождение у каждого числа. `.src` уже была; теперь у неё варианты: mod — наш вывод без ссылки, hum — со слов компании, gap — не знаем. Разница показана не только цветом: у `gap` стоит слово «не знаем», а у «со слов компании» — подпись словами. Цвет здесь подсказка, а не смысл. 3. Дыры и правка. Пустой раздел не прячем: он и есть приглашение рассказать. */ .co-sub{ font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;color:var(--ink-3); margin-top:2px; } .facts .v.none{font-family:var(--text);font-size:15px;color:var(--ink-3)} .src.mod{color:var(--ink-3)} .src.hum{color:var(--deal)} .src.gap{color:var(--ink-3)} .src.gap a{color:var(--brand);text-decoration:underline} /* свод: подчёркивание = откуда фраза. Сплошное — за ней источник, пунктир — наш вывод, без линии и серым — прямо сказано, чего мы не знаем. */ .svod{font-size:17px;line-height:1.62;max-width:66ch;color:var(--ink)} .svod .m-src{border-bottom:1px solid var(--brand)} .svod .m-mod{border-bottom:1px dashed var(--ink-3)} .svod .m-gap{color:var(--ink-3)} .marks-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:13px;color:var(--ink-3)} .marks-legend .m-src{border-bottom:1px solid var(--brand)} .marks-legend .m-mod{border-bottom:1px dashed var(--ink-3)} /* дыра: рамка пунктиром — видно, что раздел пуст не по забывчивости вёрстки */ .gap{ border:1px dashed var(--rule);padding:14px 17px;font-size:15px;color:var(--ink-2); background:transparent; } .gap b{display:block;color:var(--ink);font-family:var(--display);font-weight:600;font-size:16px;margin-bottom:2px} /* плотные ряды факта со ссылкой на источник справа */ .rows{display:flex;flex-direction:column;border-top:1px solid var(--ink)} .rows .r{ display:flex;justify-content:space-between;gap:18px;align-items:baseline; padding:11px 2px;border-bottom:1px solid var(--rule-soft);flex-wrap:wrap; } .rows .rt{font-size:15.5px;color:var(--ink);flex:1 1 320px} .rows .src{white-space:nowrap} .fine{font-size:13.5px;color:var(--ink-3);margin-top:10px;max-width:62ch} .fine-list summary{cursor:pointer;color:var(--brand);font-size:14px} .fine-list ul{margin:10px 0 0;padding-left:1.1em;font-size:14.5px;color:var(--ink-2)} .fine-list li{margin-bottom:5px} .fine-list .sub{color:var(--ink-3);font-size:13px} /* правка: закрыта по умолчанию, чтобы не спорить со чтением страницы */ .pravka{margin-top:14px;border-top:1px solid var(--rule-soft);padding-top:10px} .pravka summary{ cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.06em; color:var(--ink-3);text-transform:lowercase; } .pravka summary:hover{color:var(--brand)} .pravka form{display:flex;flex-direction:column;gap:10px;max-width:560px;margin-top:14px} .pravka .kinds{display:flex;flex-wrap:wrap;gap:14px;font-size:14.5px;color:var(--ink-2)} .pravka .kinds label{display:flex;align-items:center;gap:6px;cursor:pointer} .pravka .row2{display:flex;gap:10px;flex-wrap:wrap} .pravka .row2 select{flex:1 1 220px} .pravka .row2 input{flex:1 1 160px} .pravka input,.pravka select,.pravka textarea{ padding:11px 13px;font-size:15.5px;font-family:var(--text);background:var(--surface); color:var(--ink);border:1px solid var(--rule);border-radius:0; } .pravka textarea{min-height:88px;resize:vertical} .pravka button{align-self:flex-start} .asks{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:16px} .ask{border:1px dashed var(--rule);padding:16px 18px} .ask > b{font-family:var(--display);font-size:16.5px} .ask .pravka{border-top:none;padding-top:4px} /* ---------- страница человека ---------- Фотографии на этой странице не бывает принципиально, поэтому «лицо» ей задают монограмма из инициалов, крупное имя и путь по годам. Путь набран рядами с годом слева — так читается как биография, а не как таблица участий. */ .person-head{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap} .mono-tile{ width:64px;height:64px;flex:none;border:1px solid var(--ink); display:grid;place-items:center;font-family:var(--display);font-weight:600; font-size:24px;letter-spacing:.02em;color:var(--ink);background:var(--paper-2); } .person-head h1{font-size:clamp(28px,4vw,46px);margin-bottom:4px} .way{display:flex;flex-direction:column;border-top:1px solid var(--ink)} .way-year{display:grid;grid-template-columns:74px minmax(0,1fr);gap:18px; padding:13px 2px;border-bottom:1px solid var(--rule-soft)} .way-year .wy{font-family:var(--mono);font-size:15px;color:var(--ink-2); font-variant-numeric:tabular-nums;padding-top:1px} .way-year .wl{display:flex;flex-direction:column;gap:7px;min-width:0} .wl-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px; align-items:baseline;font-size:15px} .wl-row .rank{font-family:var(--mono);font-size:13px;color:var(--brand);white-space:nowrap} .wl-row .what{color:var(--ink)} .wl-row .where{color:var(--ink-2);font-size:14.5px;text-align:right;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .wl-row .src{white-space:nowrap} @media (max-width:700px){ .way-year{grid-template-columns:1fr;gap:6px} .wl-row{grid-template-columns:1fr;gap:2px} .wl-row .where{text-align:left} } /* -------------------------------------------------------------------------- Главная новость — крупный ведущий блок наверху главной (лид, как на РБК). Тема (--brand и пр.) приходит от [data-site]; блок один на все три сайта. -------------------------------------------------------------------------- */ .lead-news-wrap{margin:22px 0 10px} .lead-news{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); background:var(--surface);border:1px solid var(--rule);border-radius:14px; overflow:hidden;text-decoration:none;color:inherit; transition:box-shadow .15s ease,border-color .15s ease} .lead-news:hover{border-color:var(--brand);box-shadow:0 6px 26px rgba(0,0,0,.09)} .lead-news--nocard{grid-template-columns:1fr} .lead-news-img{background:var(--paper-2);min-height:230px} .lead-news-img img{display:block;width:100%;height:100%;object-fit:cover} .lead-news-body{padding:24px 26px;display:flex;flex-direction:column;gap:13px; justify-content:center} .lead-news-badge{align-self:flex-start;font-size:11.5px;font-weight:700; letter-spacing:.07em;text-transform:uppercase;color:#fff;background:var(--brand); padding:4px 11px;border-radius:999px} .lead-news-title{font-size:27px;line-height:1.17;margin:0;color:var(--ink); letter-spacing:-.012em} .lead-news-text{font-size:15.5px;line-height:1.5;color:var(--ink-2);margin:0} .lead-news-more{font-weight:700;color:var(--brand);font-size:14.5px} @media (max-width:720px){ .lead-news{grid-template-columns:1fr} .lead-news-img{min-height:190px} .lead-news-title{font-size:22px} .lead-news-body{padding:18px 18px 20px} } /* -------------------------------------------------------------------------- «Ещё по теме» на странице новости + страница-подборка /tema/<отрасль>. -------------------------------------------------------------------------- */ .news-related{margin:22px 0 6px;padding-top:16px;border-top:1px solid var(--rule)} .news-related-h{font-size:12px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-3);margin-bottom:10px} .news-related-links{display:flex;flex-wrap:wrap;gap:8px} .chip{display:inline-block;padding:7px 13px;border:1px solid var(--rule); border-radius:999px;background:var(--surface);color:var(--ink); font-size:14px;text-decoration:none;transition:border-color .15s,color .15s} .chip:hover{border-color:var(--brand);color:var(--brand)} .tema-wrap{margin:22px 0} .tema-head{margin-bottom:20px} .tema-kicker{font-size:12px;font-weight:700;letter-spacing:.07em; text-transform:uppercase;color:var(--brand)} .tema-head h1{margin:6px 0 6px;font-size:30px;line-height:1.15;color:var(--ink)} .tema-sub{color:var(--ink-2);font-size:15.5px;margin:0} .tema-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px} .tema-item{display:flex;flex-direction:column;background:var(--surface); border:1px solid var(--rule);border-radius:12px;overflow:hidden; text-decoration:none;color:inherit;transition:box-shadow .15s,border-color .15s} .tema-item:hover{border-color:var(--brand);box-shadow:0 5px 20px rgba(0,0,0,.07)} .tema-item-img{background:var(--paper-2);aspect-ratio:1200/675} .tema-item-img img{display:block;width:100%;height:100%;object-fit:cover} .tema-item-body{padding:13px 15px 15px;display:flex;flex-direction:column;gap:7px} .tema-item-title{font-size:16px;line-height:1.28;font-weight:600;color:var(--ink)} .tema-item-meta{font-size:12.5px;color:var(--ink-3)} /* Чип-персона отличается от чипа-компании тонким акцентом слева. */ .chip-person{border-left:3px solid var(--brand)} /* --------------------------------------------------------------------------- Страница новости: досье, комментарии, история и подписка. Всё это добавлено к трём предложениям пересказа не для красоты. Заметка, слово в слово повторяющая пост в канале, не даёт причины перейти по ссылке; досье с нашими числами, живые комментарии рынка и история компании — дают. Стили общие для трёх изданий: страница новости у них одна. --------------------------------------------------------------------------- */ .news-dossier{margin:26px 0 6px;padding:18px 20px;background:var(--paper-2,#f7f5f0); border:1px solid var(--rule);border-radius:12px} .news-dossier-h{font-size:12px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-3);margin-bottom:12px} .news-dossier-h a{color:var(--brand);text-decoration:none} .news-dossier dl{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px 22px} .news-dossier dt{font-size:12px;color:var(--ink-3);margin-bottom:2px} .news-dossier dd{margin:0;font-size:15.5px;line-height:1.35;color:var(--ink)} .news-comments{margin:26px 0 6px;padding-top:16px;border-top:1px solid var(--rule)} .news-comments-h{font-size:12px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-3);margin-bottom:12px} .news-comments blockquote{margin:0 0 14px;padding:0 0 0 14px; border-left:3px solid var(--brand)} .news-comments blockquote p{margin:0 0 5px;font-size:16px;line-height:1.5;color:var(--ink)} .news-comments cite{font-style:normal;font-size:13px;color:var(--ink-3)} .news-comments cite a{color:var(--ink-3)} .news-comments-note{font-size:12.5px;color:var(--muted,#8a8a8a);margin:10px 0 0} .news-earlier{margin:22px 0 6px;padding-top:16px;border-top:1px solid var(--rule)} .news-earlier ul{list-style:none;margin:0 0 12px;padding:0} .news-earlier li{padding:7px 0;border-bottom:1px solid var(--rule);font-size:15.5px} .news-earlier li:last-child{border-bottom:0} .news-earlier .sub{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px} .news-subscribe{margin:24px 0 0;padding:14px 18px;border:1px solid var(--rule); border-radius:12px;font-size:15.5px;background:var(--surface)} /* Сырой поток «Ещё на рынке»: намеренно тише заметок редакции — это чужие заголовки, а не наша работа, и выглядеть они должны как список ссылок. */ .day.stream{margin-top:34px;padding-top:20px;border-top:2px solid var(--rule)} .stream-note{font-size:13.5px;color:var(--ink-3);margin:0 0 12px;max-width:62ch} .stream-list{list-style:none;margin:0;padding:0} .stream-list li{padding:9px 0;border-bottom:1px solid var(--rule)} .stream-list li:last-child{border-bottom:0} .stream-list a{font-size:15.5px;line-height:1.35;color:var(--ink);text-decoration:none} .stream-list a:hover{color:var(--brand)} .stream-list .sub{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px} /* Строка лет над списком рейтингов: полтысячи строк без опоры не читаются. */ .rank-years{display:flex;flex-wrap:wrap;gap:8px 22px;padding:14px 0 0; font-size:13.5px;color:var(--ink-3)} .rank-years b{color:var(--ink)} /* Таблица рейтингов не должна вылезать за край: первая колонка широкая, остальные по содержимому, и весь блок прокручивается внутри себя. */ .scroll{overflow-x:auto} .scroll table{width:100%;border-collapse:collapse} .scroll table th:first-child,.scroll table td:first-child{min-width:22rem}