/* ============================================================
dnk-extra.css — ВНЕШНИЙ слой кастома (вне 65KB-лимита Code Injection).
Лежит в теме: content/themes/skalven/assets/built/dnk-extra.css
Подключён последним в codeinjection_head → перебивает инлайн-блоки.
Правки: scp файла + bump ?v= в Code Injection. Байтового лимита больше нет.
ВНИМАНИЕ: обновление темы стирает файл — перезалить (как и прочие правки темы).
Обновлено: 2026-06-21 — правая панель «в точности как в мокапе».
============================================================ */
/* === ЗАМЕТКА: убрать ЧЁРНУЮ внутреннюю плашку ===
.sidebar-note-content тянула тему --bg-0 (#090b10) → чёрный прямоугольник
внутри градиентного кольца. В мокапе текст лежит прямо на поверхности
панели. Делаем плашку прозрачной — текст ложится на #13161f заметки. */
.right-sidebar .sidebar-note-content{
background:transparent!important;
padding:0!important;
}
/* === ПАНЕЛИ правой колонки — «приподнять» как в мокапе ===
Были на плоском #13161f и читались почти чёрными на тёмном фоне.
Мокап: surface + лёгкий стеклянный налёт сверху → панель явно отделена. */
.dnk-author-widget,
.right-sidebar .sidebar-tags,
.right-sidebar .sidebar-note,
.right-sidebar .sidebar-subscribe-container{
background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.014)),#13161f!important;
}
/* === ЗАГОЛОВКИ ВИДЖЕТОВ — ярче (был тусклый --text-2 темы) ===
«Популярные теги» в мокапе светлый; «все теги» оставляем приглушённым. */
.right-sidebar .sidebar-tags .section-title span{color:var(--text-0)!important}
/* === АВТОР-ВИДЖЕТ: «Об авторе →» не должен срезаться ===
overflow:hidden от кант-блика + плотная высота обрезали ссылку снизу. */
.dnk-author-widget{overflow:visible!important}
/* === FEATURED: фото на всю левую половину карточки, без полей сверху/снизу ===
Тема: .loop-image{height:fit-content;display:flex;align-items:center} → фигура
подгонялась по картинке и центрировала её → band с пустыми полями.
Разрешаем фигуре тянуться на высоту карточки (height:auto, без flex-центра)
и кладём ![]()
абсолютно на всю площадь. */
/* размер карточки 1:1 с мокапом (.featured): r-lg 22px.
Высота: пол 343px = замеренная высота featured в мокапе при 1440px (заголовок 4 строки).
Короткий заголовок → держит 343px (как эталон), длинный → растёт сам. */
.latest-posts-section .loop.is-featured,
.latest-posts-section .featured-lead .loop{border-radius:22px!important;min-height:343px!important}
/* картинка: flex 50%, поля 7px без правого (заподлицо к тексту), рамка .14, радиус 14, пол 252 */
.latest-posts-section .loop.is-featured .loop-image,
.latest-posts-section .featured-lead .loop .loop-image{
flex:0 0 50%!important;height:auto!important;align-self:stretch!important;aspect-ratio:auto!important;
display:block!important;overflow:hidden!important;min-height:252px!important;
margin:7px 0 7px 7px!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:14px!important;
}
.latest-posts-section .loop.is-featured .loop-image img,
.latest-posts-section .featured-lead .loop .loop-image img{
position:absolute!important;inset:0!important;
width:100%!important;height:100%!important;object-fit:cover!important;
}
/* тело: паддинги мокапа + вертикальный центр */
.latest-posts-section .loop.is-featured .loop-content,
.latest-posts-section .featured-lead .loop .loop-content{padding:25px 27px 23px!important;justify-content:flex-start!important;height:auto!important;align-self:stretch!important}
.latest-posts-section .loop.is-featured .loop-title,
.latest-posts-section .featured-lead .loop .loop-title{font-size:clamp(22px,2.35vw,29px)!important;line-height:1.14!important;display:block!important;-webkit-line-clamp:unset!important;line-clamp:unset!important;overflow:visible!important}
.latest-posts-section .loop.is-featured .loop-excerpt,
.latest-posts-section .featured-lead .loop .loop-excerpt{font-size:14px!important;-webkit-line-clamp:3!important;margin-top:12px!important}
/* мета прижата к НИЗУ карточки (margin-top:auto) — линия-разделитель опускается вниз,
как в мокапе; безопасно, т.к. высота карточки зафиксирована min-height:343px */
.latest-posts-section .loop.is-featured .loop-meta,
.latest-posts-section .featured-lead .loop .loop-meta{margin-top:auto!important}
/* === ИКОНКИ карточек как в мокапе ===
1) значок в чипе категории (check-square, цвет акцента) перед текстом;
2) mico справа внизу меты (закладка, приглушённый цвет). Через mask — один цвет. */
.latest-posts-section .loop-chip::before{
content:"";flex:0 0 13px;width:13px;height:13px;margin-right:1px;
background-color:#8B7BFF;
-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2011l3%203L22%204'/%3E%3Cpath%20d='M21%2012v7a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h11'/%3E%3C/svg%3E")center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2011l3%203L22%204'/%3E%3Cpath%20d='M21%2012v7a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h11'/%3E%3C/svg%3E")center/contain no-repeat;
}
.latest-posts-section .loop-meta{width:100%}
.latest-posts-section .loop-meta::after{
content:"";flex:0 0 15px;width:15px;height:15px;margin-left:auto;
background-color:var(--text-3);
-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M19%2021l-7-5-7%205V5a2%202%200%200%201%202-2h10a2%202%200%200%201%202%202z'/%3E%3C/svg%3E")center/contain no-repeat;
mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.9'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M19%2021l-7-5-7%205V5a2%202%200%200%201%202-2h10a2%202%200%200%201%202%202z'/%3E%3C/svg%3E")center/contain no-repeat;
}
/* в «похожих» mico не нужен (там чип скрыт) */
.related .loop-meta::after{display:none}
/* === ЛОГО-БЛОК: убрать чёрную коробку ===
Тема ставит .brand{background:var(--bg-0) (#090b10)} + нижнюю линию-тень —
логотип «120DNK» сидел в тёмной коробке. В мокапе ряд логотипа чистый,
лежит прямо на панели сайдбара. Снимаем фон и подчёркивающую линию. */
.left-sidebar .brand{background:transparent!important;box-shadow:none!important}