@import url(‘https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,700&display=swap’);
:root {
—ink: #141210;
—ink2: #2a2620;
—paper: #f7f4ef;
—cream: #faf8f4;
—rule: #d8d2c8;
—muted: #8c8278;
—accent: #bf3a20;
—accent2: #1a5c9e;
—card: #fff;
—serif: ‘Libre Baskerville’, Georgia, serif;
—sans: ‘DM Sans’, system-ui, sans-serif;
}
.kb { all: initial; display: block; font-family: var(—sans); background: var(—paper); color: var(—ink); }
.kb *, .kb *::before, .kb *::after { box-sizing: border-box; }
.kb a { text-decoration: none; color: inherit; }
.kb button { font-family: var(—sans); cursor: pointer; }
.kb img { display: block; max-width: 100%; }
/* ── MASTHEAD ─────────────────────────────────── */
.kb-mast {
background: var(—ink);
border-bottom: 4px double var(—accent);
}
.kb-mast-top {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1280px;
margin: 0 auto;
padding: 14px 28px;
gap: 20px;
}
.kb-wordmark {
font-family: var(—serif);
font-size: 26px;
font-weight: 700;
color: #fff;
letter-spacing: -0.01em;
white-space: nowrap;
}
.kb-wordmark em { color: var(—accent); font-style: normal; }
/* Search */
.kb-search-box {
display: flex;
align-items: center;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.15);
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
}
.kb-search-box input {
background: none;
border: none;
outline: none;
color: #fff;
font-family: var(—sans);
font-size: 13px;
padding: 8px 14px;
width: 200px;
}
.kb-search-box input::placeholder { color: rgba(255,255,255,.4); }
.kb-search-box button {
background: var(—accent);
border: none;
color: #fff;
padding: 8px 14px;
font-size: 15px;
transition: background .15s;
}
.kb-search-box button:hover { background: #a82e18; }
/* Category nav */
.kb-cats {
background: var(—ink2);
border-bottom: 1px solid rgba(255,255,255,.06);
}
.kb-cats-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 28px;
display: flex;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
}
.kb-cats-inner::-webkit-scrollbar { display: none; }
.kb-cat-btn {
background: none;
border: none;
color: rgba(255,255,255,.55);
font-size: 12px;
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
padding: 14px 18px;
white-space: nowrap;
border-bottom: 3px solid transparent;
transition: all .2s;
position: relative;
top: 1px;
}
.kb-cat-btn:hover { color: rgba(255,255,255,.85); }
.kb-cat-btn.active { color: #fff; border-bottom-color: var(—accent); }
/* ── HERO DATELINE ────────────────────────────── */
.kb-dateline {
background: var(—accent);
color: #fff;
text-align: center;
padding: 8px 28px;
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
/* ── BODY ─────────────────────────────────────── */
.kb-body {
max-width: 1280px;
margin: 0 auto;
padding: 44px 28px 80px;
}
/* ── FEATURED ─────────────────────────────────── */
.kb-lead-label {
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: var(—accent);
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 18px;
}
.kb-lead-label::after {
content: »;
flex: 1;
height: 1px;
background: var(—rule);
}
.kb-featured {
display: grid;
grid-template-columns: 1fr 360px;
gap: 0;
background: var(—card);
border: 1px solid var(—rule);
border-left: 5px solid var(—accent);
margin-bottom: 52px;
cursor: pointer;
transition: box-shadow .25s;
}
.kb-featured:hover { box-shadow: 0 8px 40px rgba(0,0,0,.1); }
.kb-feat-body { padding: 40px 44px; display: flex; flex-direction: column; justify-content: center; }
.kb-feat-tag {
font-size: 10px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: var(—accent);
margin-bottom: 14px;
}
.kb-feat-title {
font-family: var(—serif);
font-size: clamp(22px, 2.8vw, 36px);
font-weight: 700;
line-height: 1.2;
color: var(—ink);
margin-bottom: 16px;
}
.kb-feat-excerpt {
font-size: 15px; line-height: 1.75; color: var(—muted);
margin-bottom: 28px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kb-feat-byline {
font-size: 12px; color: var(—muted); font-weight: 500;
display: flex; gap: 10px; align-items: center;
}
.kb-feat-byline strong { color: var(—ink); font-weight: 700; }
.kb-feat-byline .dot { color: var(—rule); }
.kb-feat-read {
margin-top: auto;
padding-top: 22px;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
color: var(—accent);
letter-spacing: .04em;
}
.kb-feat-img {
background: linear-gradient(160deg, #1a1410 0%, #2d1f12 50%, #0e1a28 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.kb-feat-img-glyph {
font-family: var(—serif);
font-size: 180px;
font-weight: 700;
line-height: 1;
color: rgba(255,255,255,.05);
user-select: none;
position: relative;
z-index: 1;
}
.kb-feat-img::before {
content: »;
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 20% 60%, rgba(191,58,32,.25), transparent 65%);
}
/* ── SECTION RULE ─────────────────────────────── */
.kb-section-rule {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 14px;
margin: 0 0 28px;
}
.kb-section-rule h2 {
font-family: var(—serif);
font-size: 18px;
font-weight: 700;
white-space: nowrap;
}
.kb-section-rule::before,
.kb-section-rule::after {
content: »;
height: 1px;
background: var(—rule);
}
.kb-view-toggle {
display: flex;
gap: 4px;
}
.kb-view-btn {
background: none;
border: 1px solid var(—rule);
border-radius: 4px;
padding: 5px 9px;
font-size: 14px;
color: var(—muted);
transition: all .15s;
}
.kb-view-btn.on { background: var(—ink); color: #fff; border-color: var(—ink); }
/* ── GRID ─────────────────────────────────────── */
#kbGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(—rule);
margin-bottom: 0;
border: 1px solid var(—rule);
}
@media (max-width: 960px) { #kbGrid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { #kbGrid { grid-template-columns: 1fr; } }
.kb-card {
background: var(—card);
padding: 26px 28px 22px;
cursor: pointer;
transition: background .15s;
display: flex;
flex-direction: column;
position: relative;
}
.kb-card:hover { background: var(—cream); }
.kb-card-num {
font-family: var(—serif);
font-size: 11px;
color: var(—rule);
font-weight: 700;
margin-bottom: 10px;
}
.kb-card-tag {
font-size: 10px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
margin-bottom: 10px;
}
.kb-card-title {
font-family: var(—serif);
font-size: 17px;
font-weight: 700;
line-height: 1.35;
color: var(—ink);
flex: 1;
margin-bottom: 12px;
}
.kb-card-excerpt {
font-size: 13px;
color: var(—muted);
line-height: 1.65;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 16px;
}
.kb-card-foot {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 14px;
border-top: 1px solid var(—rule);
}
.kb-card-date { font-size: 11px; color: var(—muted); font-weight: 500; }
.kb-card-arrow {
font-size: 11px;
font-weight: 700;
color: var(—accent);
letter-spacing: .06em;
}
/* ── LIST VIEW ─────────────────────────────────── */
#kbList {
display: none;
flex-direction: column;
border: 1px solid var(—rule);
background: var(—rule);
gap: 1px;
}
#kbList.on { display: flex; }
.kb-row {
background: var(—card);
display: grid;
grid-template-columns: 52px 1fr auto;
gap: 20px;
align-items: center;
padding: 16px 22px;
cursor: pointer;
transition: background .12s;
}
.kb-row:hover { background: var(—cream); }
.kb-row-num {
font-family: var(—serif);
font-size: 24px;
font-weight: 700;
color: var(—rule);
text-align: right;
line-height: 1;
}
.kb-row-title {
font-family: var(—serif);
font-size: 16px;
font-weight: 700;
line-height: 1.3;
color: var(—ink);
margin-bottom: 3px;
}
.kb-row-meta { font-size: 12px; color: var(—muted); }
.kb-row-pill {
font-size: 10px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 3px;
white-space: nowrap;
border: 1px solid currentColor;
opacity: .7;
}
/* ── PAGINATION ─────────────────────────────────── */
.kb-more-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 36px 0;
border-top: 1px solid var(—rule);
}
.kb-more-btn {
background: var(—ink);
color: #fff;
border: none;
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
padding: 12px 32px;
border-radius: 3px;
transition: background .2s, transform .15s;
}
.kb-more-btn:hover { background: var(—accent); transform: translateY(-1px); }
.kb-more-btn:disabled { opacity: .35; cursor: default; transform: none; background: var(—ink); }
.kb-more-counter { font-size: 12px; color: var(—muted); font-weight: 500; }
/* ── EMPTY / SPINNER ────────────────────────────── */
.kb-empty {
text-align: center;
padding: 80px 24px;
color: var(—muted);
display: none;
}
.kb-empty.on { display: block; }
.kb-empty-ico { font-size: 44px; margin-bottom: 12px; }
.kb-empty h3 { font-family: var(—serif); font-size: 22px; color: var(—ink); margin-bottom: 6px; }
.kb-spin-wrap { text-align: center; padding: 60px 0; }
.kb-spin {
display: inline-block;
width: 32px; height: 32px;
border: 3px solid var(—rule);
border-top-color: var(—accent);
border-radius: 50%;
animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ── FOOTER ─────────────────────────────────────── */
.kb-foot {
background: var(—ink);
color: rgba(255,255,255,.45);
padding: 28px;
text-align: center;
font-size: 12px;
font-weight: 500;
letter-spacing: .04em;
}
.kb-foot a { color: rgba(255,255,255,.7); font-weight: 700; }
.kb-foot a:hover { color: var(—accent); }
/* fade-in */
@keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.kb-card, .kb-row, .kb-featured { animation: fadeUp .35s ease both; }
@media (max-width: 768px) {
.kb-featured { grid-template-columns: 1fr; }
.kb-feat-img { min-height: 160px; }
.kb-feat-body { padding: 26px; }
.kb-mast-top { flex-wrap: wrap; }
.kb-search-box input { width: 140px; }
.kb-row { grid-template-columns: 40px 1fr; }
.kb-row-pill { display: none; }
}
Все статьи
Статей не найдено
Попробуйте другой запрос или категорию
(function(){
var API = ‘https://kapralov.biz/wp-json/wp/v2/posts?_fields=id,date,title,excerpt,link,categories&per_page=100&status=publish&orderby=date&order=desc’;
var CATS = {
1247: {name:’Продажи’, color:’#bf3a20′},
1248: {name:’Маркетинг’, color:’#1a5c9e’},
1249: {name:’Управление’, color:’#1a7a4a’},
1250: {name:’ИИ’, color:’#7a2ac8′},
11: {name:’Блог’, color:’#555′}
};
var PER = 9;
var all = [], filtered = [], curCat = ‘all’, curView = ‘grid’, page = 0;
function txt(html){
var d = document.createElement(‘div’);
d.innerHTML = html;
return (d.textContent||»).replace(/Читать далее/gi,»).trim();
}
function trunc(s,n){ s=txt(s); return s.length>n ? s.slice(0,n)+’…’ : s; }
function cat(cats){
var order=[1247,1249,1250,1248];
for(var i=0;i-1) return order[i];
return 11;
}
function fmtDate(s){
return new Date(s).toLocaleDateString(‘ru-RU’,{day:’numeric’,month:’long’,year:’numeric’});
}
function letter(title){ return txt(title).charAt(0).toUpperCase()||’К’; }
function renderFeat(p){
var c=cat(p.categories), info=CATS[c]||CATS[11], t=txt(p.title.rendered);
document.getElementById(‘kbFeat’).innerHTML =
‘
‘+
‘
‘
‘
‘+
‘
‘+
‘
‘+
‘
‘+
‘
‘+
‘
‘+
‘
‘
‘+
‘
‘+
‘
‘;
}
function cardHTML(p,i){
var c=cat(p.categories), info=CATS[c]||CATS[11], t=txt(p.title.rendered);
var n=String(i+1).padStart(2,’0’);
return ‘
‘
‘+
‘
‘+
‘
‘+
‘
‘+
‘
‘‘+fmtDate(p.date)+’‘+
‘Читать →‘+
‘
‘+
‘
‘;
}
function rowHTML(p,i){
var c=cat(p.categories), info=CATS[c]||CATS[11], t=txt(p.title.rendered);
return ‘
‘
‘+
‘
‘
‘+
‘
‘+
‘
‘+
‘
‘+
‘
‘;
}
function render(append){
var start = append ? page*PER : 0;
var slice = filtered.slice(start, start+PER);
var grid = document.getElementById(‘kbGrid’);
var list = document.getElementById(‘kbList’);
if(!append){ grid.innerHTML=»; list.innerHTML=»; }
slice.forEach(function(p,i){
grid.innerHTML += cardHTML(p, start+i);
list.innerHTML += rowHTML(p, start+i);
});
var shown = Math.min((page+1)*PER, filtered.length);
document.getElementById(‘kbCounter’).textContent = ‘Показано ‘+shown+’ из ‘+filtered.length;
var moreBar = document.getElementById(‘kbMoreBar’);
moreBar.style.display = filtered.length > shown ? ‘flex’ : ‘none’;
}
function applyFilter(){
var q = (document.getElementById(‘kbQ’).value||»).toLowerCase().trim();
filtered = all.filter(function(p){
var catOk = curCat===’all’ || p.categories.indexOf(parseInt(curCat))>-1;
var qOk = !q || txt(p.title.rendered).toLowerCase().indexOf(q)>-1
|| trunc(p.excerpt.rendered,300).toLowerCase().indexOf(q)>-1;
return catOk && qOk;
});
page=0;
var empty = document.getElementById(‘kbEmpty’);
var rule = document.getElementById(‘kbRule’);
var title = document.getElementById(‘kbSectionTitle’);
if(!filtered.length){
empty.className=’kb-empty on’;
rule.style.display=’none’;
document.getElementById(‘kbGrid’).innerHTML=»;
document.getElementById(‘kbList’).innerHTML=»;
document.getElementById(‘kbMoreBar’).style.display=’none’;
} else {
empty.className=’kb-empty’;
rule.style.display=’grid’;
var catInfo = curCat===’all’ ? null : (CATS[parseInt(curCat)]||null);
title.textContent = catInfo ? catInfo.name+’ (‘+filtered.length+’)’ : ‘Все статьи (‘+filtered.length+’)’;
render(false);
}
}
window.kbSearch = function(){ applyFilter(); };
document.getElementById(‘kbQ’).addEventListener(‘keydown’,function(e){
if(e.key===’Enter’) applyFilter();
});
document.getElementById(‘kbCats’).addEventListener(‘click’,function(e){
var btn=e.target.closest(‘.kb-cat-btn’);
if(!btn)return;
document.querySelectorAll(‘.kb-cat-btn’).forEach(function(b){b.classList.remove(‘active’);});
btn.classList.add(‘active’);
curCat=btn.dataset.cat;
applyFilter();
});
window.kbLoadMore = function(){
page++;
render(true);
var shown = Math.min((page+1)*PER, filtered.length);
document.getElementById(‘kbCounter’).textContent = ‘Показано ‘+shown+’ из ‘+filtered.length;
if(filtered.length0) renderFeat(posts[0]);
filtered = posts.slice(1);
document.getElementById(‘kbRule’).style.display=’grid’;
document.getElementById(‘kbSectionTitle’).textContent=’Все статьи (‘+filtered.length+’)’;
render(false);
})
.catch(function(){
document.getElementById(‘kbGrid’).innerHTML=’
Ошибка загрузки статей
‘;
});
})();