.blog-layout {
display: grid;
gap: var(--space-12);
padding-block: var(--space-12);
}
.blog-layout--with-sidebar {
grid-template-columns: 1fr 300px;
align-items: start;
}
.posts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--space-8);
} .post-card {
display: flex;
flex-direction: column;
}
.post-card .card__body {
display: flex;
flex-direction: column;
flex: 1;
}
.category-badge {
display: inline-block;
padding: var(--space-1) var(--space-3);
background: rgba(16,0,240,.08);
color: var(--color-blue);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
text-decoration: none;
margin-bottom: var(--space-3);
transition: background var(--transition-fast);
}
.category-badge:hover {
background: rgba(16,0,240,.15);
color: var(--color-blue);
}
.card__meta {
display: flex;
align-items: center;
gap: var(--space-4);
font-size: var(--text-xs);
color: var(--color-text-muted);
margin-top: auto;
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
margin-bottom: var(--space-4);
}
.card__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
font-weight: 600;
color: var(--color-blue);
text-decoration: none;
transition: gap var(--transition-fast), color var(--transition-fast);
}
.card__link:hover {
gap: var(--space-3);
color: var(--color-violet);
} .page-header {
padding-block: var(--space-12) var(--space-8);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-8);
}
.page-title {
font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
color: var(--color-navy);
} .single-post-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-12);
padding-block: var(--space-12);
max-width: var(--container-lg);
margin-inline: auto;
}
.entry-breadcrumb {
font-size: var(--text-sm);
color: var(--color-text-muted);
margin-bottom: var(--space-6);
}
.entry-breadcrumb a {
color: var(--color-blue);
text-decoration: none;
}
.entry-breadcrumb a:hover { text-decoration: underline; }
.entry-breadcrumb span { margin-inline: var(--space-2); }
.entry-hero {
border-radius: var(--radius-xl);
overflow: hidden;
margin-bottom: var(--space-8);
aspect-ratio: 16/6;
}
.entry-hero img {
width: 100%;
height: 100%;
object-fit: cover;
}
.entry-footer {
padding-top: var(--space-8);
border-top: 1px solid var(--color-border);
margin-top: var(--space-8);
} .entry-tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-6);
}
.entry-tag {
padding: var(--space-1) var(--space-3);
background: var(--color-surface);
color: var(--color-text-muted);
border-radius: var(--radius-full);
font-size: var(--text-xs);
text-decoration: none;
transition: background var(--transition-fast), color var(--transition-fast);
}
.entry-tag:hover {
background: var(--color-navy);
color: var(--color-white);
} .post-navigation {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.post-nav-link {
display: flex;
flex-direction: column;
padding: var(--space-4);
background: var(--color-surface);
border-radius: var(--radius-lg);
text-decoration: none;
transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.post-nav-link:hover {
background: var(--color-border);
box-shadow: var(--shadow-sm);
}
.post-nav-label {
font-size: var(--text-xs);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: var(--space-1);
}
.post-nav-title {
font-weight: 600;
color: var(--color-navy);
font-size: var(--text-sm);
} .blog-sidebar {
position: sticky;
top: calc(80px + var(--space-6));
}
.widget {
background: var(--color-surface);
border-radius: var(--radius-lg);
padding: var(--space-6);
margin-bottom: var(--space-6);
}
.widget__title {
font-size: var(--text-base);
font-weight: 700;
color: var(--color-navy);
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 2px solid var(--color-blue);
} .no-results {
text-align: center;
padding: var(--space-16) var(--space-4);
}
.no-results h2 {
color: var(--color-navy);
margin-bottom: var(--space-4);
} .hero {
background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-violet) 100%);
color: var(--color-white);
padding-block: var(--space-24);
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 70% 50%, rgba(16,0,240,.3) 0%, transparent 60%);
pointer-events: none;
}
.hero__eyebrow {
display: inline-block;
padding: var(--space-2) var(--space-4);
background: rgba(255,255,255,.12);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: var(--space-6);
}
.hero__title {
font-size: clamp(var(--text-4xl), 6vw, 4.5rem);
color: var(--color-white);
max-width: 14ch;
margin-inline: auto;
margin-bottom: var(--space-6);
line-height: 1.1;
}
.hero__subtitle {
font-size: var(--text-xl);
color: rgba(255,255,255,.8);
max-width: 56ch;
margin-inline: auto;
margin-bottom: var(--space-10);
}
.hero__actions {
display: flex;
gap: var(--space-4);
justify-content: center;
flex-wrap: wrap;
} .section {
padding-block: var(--space-20);
}
.section--sm { padding-block: var(--space-12); }
.section--lg { padding-block: var(--space-24); }
.section--bg  { background: var(--color-surface); }
.section--dark {
background: var(--color-navy);
color: var(--color-white);
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--color-white); }
.section__header {
text-align: center;
max-width: 720px;
margin-inline: auto;
margin-bottom: var(--space-12);
}
.section__eyebrow {
display: inline-block;
font-size: var(--text-sm);
font-weight: 700;
color: var(--color-blue);
text-transform: uppercase;
letter-spacing: .08em;
margin-bottom: var(--space-3);
}
.section__title { margin-bottom: var(--space-4); }
.section__subtitle {
font-size: var(--text-lg);
color: var(--color-text-muted);
} .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } .alert {
display: flex;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
font-size: var(--text-sm);
border-left: 4px solid;
}
.alert--info    { background: rgba(16,0,240,.06); border-color: var(--color-blue);  color: #0a00b3; }
.alert--success { background: rgba(0,102,31,.06); border-color: var(--color-green); color: #004d17; }
.alert--warning { background: rgba(249,218,234,.5); border-color: #e14786;          color: #8b1a4a; } @media (max-width: 1024px) {
.blog-layout--with-sidebar {
grid-template-columns: 1fr;
}
.blog-sidebar {
position: static;
}
.grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.posts-grid { grid-template-columns: 1fr; }
.grid-2, .grid-3 { grid-template-columns: 1fr; }
.post-navigation { grid-template-columns: 1fr; }
.hero { padding-block: var(--space-16); }
.section { padding-block: var(--space-12); }
}
@media (max-width: 480px) {
.hero__actions { flex-direction: column; align-items: center; }
.grid-4 { grid-template-columns: 1fr; }
}