/* Стили сайта «ИИ мировой Дайджест от ДНБ66». Вынесены из base.html и отдаются приложением уже сжатыми (роут /s.css, gzip в приложении, т.к. в nginx gzip_types для text/css выключен) с недельным кэшем — чтобы не съедать 4-КБ бюджет каждого ответа страницы (проходимость канала в РФ). */ /* Переменные тем (:root / html.dark), *{box-sizing} и body — инлайном в (критичная тема без мигания). Здесь — всё остальное, использующее эти vars. */ a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline} .wrap{max-width:1380px;margin:0 auto;padding:0 16px} /* Шапка — компактная: логотип + подпись в одну строку, без большого заголовка (экономит высоту, особенно на телефоне в вертикали). */ header.site{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:10px 0} .sitelogo{height:62px;width:auto;display:block; filter:drop-shadow(0 0 1.5px rgba(20,30,50,.55)) drop-shadow(0 1px 2px rgba(0,0,0,.2))} .sitesub{color:var(--dim);font-size:14px;line-height:1.3;max-width:560px} .sitesub a{color:var(--ink)} .btns{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap} .btn{display:inline-block;border:1px solid var(--edge);background:var(--panel); color:var(--ink);border-radius:9px;padding:7px 12px;font-size:14px;cursor:pointer} .btn:hover{text-decoration:none;border-color:var(--accent)} .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff} @media(max-width:700px){ /* Телефон: подпись переносится и помещается справа от логотипа; кнопки — на свою строку под логотипом; Поиск и RSS скрыты (оставляем Телеграм + День/Ночь). Шапка (логотип+кнопки) при скролле уезжает вверх, липкое меню рубрик остаётся сверху. */ header.site{gap:8px 12px;padding:8px 0;align-items:center} .sitelogo{height:46px} .sitesub{flex:1 1 0;min-width:0;max-width:none;font-size:12.5px;line-height:1.25} .btns{flex-basis:100%;margin-left:0;justify-content:flex-start} .hide-mobile{display:none} } /* Строка рубрик. Широкий экран — все пункты в строку (перенос). Телефон (≤700px) — «Все» + 3 рубрики + гамбургер ☰, остальное в выпадашке; ровно одна строка, меню не занимает пол-экрана. */ nav.rubbar{position:sticky;top:0;z-index:50;background:var(--bg); border-bottom:1px solid var(--edge);margin:0 -16px;padding:0 8px 0 16px; display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px} nav.rubbar a{display:inline-block;padding:10px 10px 7px;color:var(--ink); font-size:14px;border-bottom:3px solid transparent;white-space:nowrap} nav.rubbar a:hover{color:var(--accent);text-decoration:none} nav.rubbar a.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600} .rubham{display:none;margin-left:auto;border:none;background:none;color:var(--ink); font-size:19px;line-height:1;padding:8px;cursor:pointer} .rubmore{display:contents} @media(max-width:700px){ nav.rubbar{flex-wrap:nowrap;gap:0 2px} nav.rubbar>a{padding:11px 7px 8px;font-size:13.5px} .rubham{display:block} .rubmore{display:none;position:absolute;top:100%;left:8px;right:8px; flex-direction:column;background:var(--panel);border:1px solid var(--edge); border-top:none;border-radius:0 0 12px 12px;box-shadow:var(--shadow-lift); padding:6px;max-height:72vh;overflow-y:auto;z-index:51} .rubmore.open{display:flex} .rubmore a{padding:10px 12px;border-bottom:1px solid var(--edge);white-space:normal} .rubmore a:last-child{border-bottom:none} } /* Колонки: материал + правая «Лента» */ .cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px; padding:16px 0;align-items:start} .card{background:var(--panel);border:1px solid var(--edge);border-radius:13px; box-shadow:var(--shadow)} .card.pad{padding:14px 16px;margin-bottom:14px} /* Сетка карточек: 3 / 2 / 1 */ .grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))} .gcard{overflow:hidden;display:flex;flex-direction:column; transition:transform .15s ease,box-shadow .15s ease} .gcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)} img.cardimg{width:100%;aspect-ratio:16/9;object-fit:cover;display:block} .cbody{padding:12px 14px;display:flex;flex-direction:column;gap:8px;flex:1} .cmeta{display:flex;align-items:center;gap:6px;font-size:12px;flex-wrap:wrap} .rpill{display:inline-block;background:var(--accent-sub);color:var(--accent); border-radius:6px;padding:1px 8px;font-weight:600} a.rpill:hover{text-decoration:none} .flag{font-size:13px} .ctitle{font-size:16px;font-weight:600;line-height:1.35;margin:0} .ctitle a{color:var(--ink)} .csum{margin:0;color:var(--dim);font-size:13.5px;display:-webkit-box; -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .cfoot{margin-top:auto;border-top:1px dashed var(--edge);padding-top:8px; display:flex;justify-content:space-between;gap:8px;color:var(--dim); font-size:12.5px} /* Таблетки логотипов ИИ-вендоров */ .vrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center} .vpill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--edge); border-radius:99px;padding:2px 9px 2px 3px;font-size:12px;color:var(--dim)} a.vpill:hover{text-decoration:none;border-color:var(--accent);color:var(--accent)} .vpill img{width:18px;height:18px;border-radius:50%;background:#fff;padding:1.5px} /* Молния */ .flashw{border:1.5px solid var(--flash);background:var(--flash-bg); border-radius:13px;box-shadow:var(--shadow);padding:16px 18px;margin-bottom:16px} .flashtag{display:inline-block;background:var(--flash);color:#fff;font-weight:800; letter-spacing:1.5px;border-radius:7px;padding:3px 10px;font-size:13px} .topiccount{display:inline-block;margin-left:8px;border:1px solid var(--flash); color:var(--flash);border-radius:7px;padding:3px 9px;font-size:12.5px;font-weight:700} .morewrap{text-align:center;margin:18px 0} .morebtn{display:inline-block;border:1px solid var(--edge);background:var(--panel); color:var(--ink);border-radius:10px;padding:10px 20px;font-size:14px;font-weight:600;cursor:pointer} .morebtn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none} .flashw h2{font-size:clamp(20px,2.6vw,29px);line-height:1.25;margin:10px 0 6px} .flashw h2 a{color:var(--ink)} .fmeta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:var(--dim); font-size:13px} /* «Лента»: не единый блок, а отдельные мини-посты (структурно как новости). Грузятся отдельным запросом порциями — свежее соединение проходит сквозь обрыв канала в РФ, где цельный блок в конце страницы не доезжает. */ aside .fbox{position:sticky;top:52px} .fhead{font-weight:800;letter-spacing:1px} .fsub{color:var(--dim);font-size:12px;margin-bottom:8px} .lentalist{display:flex;flex-direction:column;gap:8px} a.lpost{display:block;background:var(--panel);border:1px solid var(--edge); border-radius:10px;box-shadow:var(--shadow);padding:8px 11px;color:var(--ink)} a.lpost:hover{text-decoration:none;border-color:var(--accent)} .lpost .lmeta{display:block;font-size:11.5px;color:var(--dim);margin-bottom:2px} .ltime{color:var(--accent);font-weight:700;margin-right:5px} .lrub{color:var(--dim)} .ltitle{display:block;font-size:13.5px;line-height:1.35} .lempty{color:var(--dim);font-size:13px;padding:6px 2px} .lmore{display:block;text-align:center;margin-top:2px;padding:9px; border:1px solid var(--edge);border-radius:9px;background:var(--panel); color:var(--accent);font-size:13px;font-weight:600;cursor:pointer} .lmore:hover{border-color:var(--accent);text-decoration:none} /* Страница статьи */ .lead{font-size:17.5px;line-height:1.5;background:var(--accent-sub); border-left:4px solid var(--accent);border-radius:0 9px 9px 0; padding:12px 14px;margin:12px 0} .rettext{white-space:pre-line;font-size:15.5px} .srcbox{display:inline-block;border:1px solid var(--edge);border-radius:9px; padding:10px 12px;font-size:13.5px;color:var(--dim);margin-top:14px} .retell dt{font-weight:700;margin-top:10px} .retell dd{margin:2px 0 0} h2.rubric{font-size:17px;margin:18px 0 8px} ul.posts{list-style:none;margin:0;padding:0} ul.posts li{padding:7px 0;border-bottom:1px dashed var(--edge)} ul.posts li:last-child{border-bottom:none} .meta{color:var(--dim);font-size:13px} .badge{display:inline-block;border:1px solid var(--edge);border-radius:6px; padding:0 6px;font-size:12px;color:var(--dim);margin-left:6px} input[type=text],input[type=password]{background:var(--panel);color:var(--ink); border:1px solid var(--edge);border-radius:9px;padding:8px 10px;font-size:15px} footer{color:var(--dim);font-size:13px;text-align:center;padding:20px 0} /* Плашка «Есть свежие новости» (класс вместо инлайн-стиля — экономит бюджет каждого ответа; JS показывает её, переключая display на flex). */ .freshbar{display:none;position:fixed;left:50%;bottom:20px; transform:translateX(-50%);z-index:60;background:var(--accent);color:#fff; padding:10px 16px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.28); font-size:14px;align-items:center;gap:12px} .freshbar button{background:#fff;color:var(--accent);border:none;border-radius:8px; padding:6px 12px;font-weight:700;cursor:pointer} /* Полоса прогресса перехода между страницами (pjax): пока идёт fetch с повторами — тонкая линия сверху ползёт вправо, чтобы переход не выглядел зависшим. */ #pjaxbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent); z-index:1000;opacity:0;pointer-events:none;border-radius:0 2px 2px 0} #pjaxbar.on{opacity:1;width:88%; transition:width 12s cubic-bezier(.05,.7,.1,1),opacity .2s} @media(max-width:1100px){ .cols{grid-template-columns:1fr} aside{display:none} .grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:640px){ .grid{grid-template-columns:1fr} }