.blog-page {
--blog-text: #22313f;
--blog-title: #0f172a;
--blog-blue: #5b7fa3;
--blog-link: #1863dc;
--blog-soft: #f4f6f6;
--blog-border: #d9e1e8;
--blog-white: #ffffff;
--blog-page-bg: #f7f9fc;
--blog-shadow-soft: 0 14px 35px rgba(30, 58, 95, 0.10);
--blog-shadow-strong: 0 22px 48px rgba(30, 58, 95, 0.16);
color: var(--blog-text);
font-family: Inter, Arial, sans-serif;
line-height: 1.7;
background: var(--blog-page-bg);
}
.blog-page * {
box-sizing: border-box;
}
.blog-container {
max-width: 1120px;
margin: 0 auto;
padding: 0 22px;
width: 100%;
}
.blog-hero {
position: relative;
overflow: hidden;
padding: 96px 0 82px;
background:
linear-gradient(90deg, rgba(91, 127, 163, 0.13) 0, rgba(91, 127, 163, 0) 38%),
linear-gradient(180deg, var(--blog-page-bg) 0%, #ffffff 100%);
border-bottom: 1px solid var(--blog-border);
}
.blog-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(30, 58, 95, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(30, 58, 95, 0.045) 1px, transparent 1px);
background-size: 46px 46px;
mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.52), transparent 74%);
}
.blog-hero-layout {
position: relative;
max-width: 960px;
}
.blog-kicker {
display: inline-flex;
align-items: center;
gap: 9px;
margin: 0 0 12px;
color: var(--blog-blue);
font-size: 13px;
font-weight: 850;
text-transform: uppercase;
}
.blog-kicker::before {
content: "";
width: 28px;
height: 2px;
border-radius: 999px;
background: var(--blog-blue);
}
.blog-hero h1,
.blog-section-heading h2 {
margin: 0;
color: var(--blog-title);
font-family: "Work Sans", Inter, Arial, sans-serif;
line-height: 1.12;
letter-spacing: 0;
}
.blog-hero h1 {
max-width: 920px;
font-size: clamp(44px, 5.4vw, 76px);
overflow-wrap: anywhere;
}
.blog-lead {
max-width: 790px;
margin: 22px 0 0;
font-size: 22px;
line-height: 1.48;
}
.blog-tools {
position: sticky;
top: 0;
z-index: 4;
border-bottom: 1px solid var(--blog-border);
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(12px);
}
.blog-tools .blog-container {
display: grid;
grid-template-columns: 300px 1fr;
gap: 16px;
align-items: center;
padding-top: 14px;
padding-bottom: 14px;
}
.blog-search-wrap label {
display: block;
margin-bottom: 6px;
color: var(--blog-title);
font-size: 13px;
font-weight: 850;
}
.blog-search-wrap input {
width: 100%;
min-height: 44px;
border: 1px solid var(--blog-border);
border-radius: 6px;
padding: 10px 12px;
color: var(--blog-text);
background: var(--blog-white);
font: inherit;
}
.blog-search-wrap input:focus {
outline: 2px solid rgba(91, 127, 163, 0.25);
border-color: var(--blog-blue);
}
.blog-filters {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.blog-filters button {
min-height: 40px;
border: 1px solid var(--blog-border);
border-radius: 999px;
padding: 8px 14px;
color: var(--blog-title);
background: var(--blog-white);
cursor: pointer;
font: inherit;
font-weight: 800;
transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.blog-filters button:hover,
.blog-filters button.is-active {
transform: translateY(-1px);
border-color: var(--blog-blue);
background: var(--blog-blue);
color: var(--blog-white);
}
.blog-list-section {
padding: 82px 0;
background: var(--blog-page-bg);
}
.blog-featured-section,
.blog-topics-section {
padding: 76px 0 0;
background: var(--blog-page-bg);
}
.blog-section-heading {
margin-bottom: 30px;
}
.blog-section-heading h2 {
font-size: clamp(32px, 4vw, 48px);
}
.blog-featured-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
}
.blog-featured {
margin-top: 28px;
}
.blog-featured-card {
margin: 0;
}
.blog-featured-link {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
min-height: 430px;
border: 1px solid var(--blog-border);
border-radius: 10px;
color: var(--blog-text);
text-decoration: none;
background: var(--blog-white);
box-shadow: var(--blog-shadow-soft);
transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.blog-featured-link::after {
content: "↗";
position: absolute;
right: 22px;
top: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid var(--blog-border);
border-radius: 50%;
color: var(--blog-title);
background: var(--blog-white);
font-weight: 850;
box-shadow: 0 8px 18px rgba(30, 58, 95, 0.10);
transition: transform 220ms ease, color 220ms ease, background-color 220ms ease;
}
.blog-featured-link:hover {
transform: translateY(-4px);
border-color: var(--blog-blue);
box-shadow: var(--blog-shadow-strong);
}
.blog-featured-link:hover::after {
transform: translate(3px, -3px);
color: var(--blog-white);
background: var(--blog-title);
}
.blog-featured-media {
overflow: hidden;
margin: 0;
min-height: 100%;
background: var(--blog-soft);
}
.blog-featured-media img {
display: block;
width: 100%;
height: 100%;
min-height: 430px;
object-fit: cover;
object-position: center;
transition: transform 600ms ease, filter 600ms ease;
}
.blog-featured-link:hover .blog-featured-media img {
transform: scale(1.035);
filter: saturate(1.04) contrast(1.03);
}
.blog-featured-content {
display: flex;
flex-direction: column;
padding: 42px;
}
.blog-featured-content .blog-card-top {
padding: 0 58px 0 0;
}
.blog-featured-content h3 {
margin: 24px 0 0;
color: var(--blog-title);
font-size: clamp(32px, 3.5vw, 48px);
line-height: 1.08;
}
.blog-featured-content p {
margin: 22px 0 0;
font-size: 18px;
line-height: 1.62;
}
.blog-featured-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: auto;
padding-top: 28px;
border-top: 1px solid var(--blog-border);
}
.blog-featured-bottom span {
color: var(--blog-blue);
font-weight: 850;
}
.blog-featured-bottom strong {
color: var(--blog-title);
font-size: 14px;
font-weight: 900;
text-transform: uppercase;
}
.blog-topics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.blog-topics button {
position: relative;
overflow: hidden;
min-height: 150px;
border: 1px solid var(--blog-border);
border-radius: 8px;
padding: 20px;
color: var(--blog-text);
text-align: left;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 1)),
radial-gradient(circle at 88% 0%, rgba(91, 127, 163, 0.18), transparent 36%);
cursor: pointer;
box-shadow: 0 10px 24px rgba(30, 58, 95, 0.07);
transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.blog-topics button::after {
content: "→";
position: absolute;
right: 18px;
top: 18px;
color: var(--blog-blue);
font-size: 22px;
font-weight: 900;
transition: transform 200ms ease;
}
.blog-topics button:hover {
transform: translateY(-3px);
border-color: var(--blog-blue);
box-shadow: var(--blog-shadow-soft);
}
.blog-topics button:hover::after {
transform: translateX(4px);
}
.blog-topics span {
display: block;
margin-bottom: 34px;
color: var(--blog-title);
font-size: 20px;
font-weight: 900;
line-height: 1.2;
}
.blog-topics strong {
display: block;
max-width: 200px;
color: var(--blog-blue);
font-size: 14px;
line-height: 1.35;
}
.blog-posts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: stretch;
}
.blog-card {
min-height: 100%;
display: flex;
}
.blog-card-link {
position: relative;
overflow: hidden;
display: flex;
min-height: 100%;
width: 100%;
height: 100%;
flex-direction: column;
gap: 0;
padding: 0;
border: 1px solid var(--blog-border);
border-radius: 8px;
color: var(--blog-text);
text-decoration: none;
background: var(--blog-white);
box-shadow: 0 12px 28px rgba(30, 58, 95, 0.08);
transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.blog-card-link::after {
content: "↗";
position: absolute;
right: 18px;
top: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid var(--blog-border);
border-radius: 50%;
color: var(--blog-title);
background: var(--blog-white);
font-weight: 850;
box-shadow: 0 8px 18px rgba(30, 58, 95, 0.10);
transition: transform 220ms ease, color 220ms ease, background-color 220ms ease;
}
.blog-card-link:hover {
transform: translateY(-5px);
border-color: var(--blog-blue);
box-shadow: var(--blog-shadow-strong);
}
.blog-card-link:hover::after {
transform: translate(3px, -3px);
color: var(--blog-white);
background: var(--blog-title);
}
.blog-card-top {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
padding: 20px 22px 0;
}
.blog-card-media {
position: relative;
overflow: hidden;
margin: 0;
background:
linear-gradient(135deg, rgba(91, 127, 163, 0.12), rgba(244, 246, 246, 0.72));
}
.blog-card-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 23, 42, 0) 45%, rgba(15, 23, 42, 0.14) 100%);
pointer-events: none;
}
.blog-card-media img {
display: block;
width: 100%;
height: 210px;
object-fit: cover;
object-position: center;
transition: transform 520ms ease, filter 520ms ease;
}
.blog-card-link:hover .blog-card-media img {
transform: scale(1.045);
filter: saturate(1.04) contrast(1.03);
}
.blog-category,
.blog-card time {
display: inline-flex;
align-items: center;
min-height: 30px;
border-radius: 999px;
padding: 5px 11px;
font-size: 13px;
font-weight: 850;
line-height: 1;
}
.blog-category {
border: 1px solid rgba(91, 127, 163, 0.32);
color: var(--blog-blue);
background: var(--blog-soft);
}
.blog-card time {
color: var(--blog-title);
background: var(--blog-white);
border: 1px solid var(--blog-border);
}
.blog-card h3 {
margin: 16px 22px 0;
color: var(--blog-title);
font-size: 24px;
line-height: 1.22;
display: -webkit-box;
min-height: 88px;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.blog-card p {
margin: 14px 22px 0;
font-size: 16px;
line-height: 1.58;
display: -webkit-box;
min-height: 76px;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.blog-card-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: auto;
padding: 18px 22px 22px;
border-top: 1px solid var(--blog-border);
}
.blog-card-bottom span {
color: var(--blog-blue);
font-size: 14px;
font-weight: 800;
}
.blog-card-bottom strong {
color: var(--blog-title);
font-size: 14px;
font-weight: 900;
text-transform: uppercase;
}
.blog-empty {
padding: 22px;
border: 1px solid var(--blog-border);
border-radius: 8px;
background: var(--blog-soft);
color: var(--blog-title);
font-weight: 800;
}
@media (max-width: 980px) {
.blog-hero-layout,
.blog-tools .blog-container {
grid-template-columns: 1fr;
gap: 26px;
}
.blog-filters {
justify-content: flex-start;
}
.blog-posts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.blog-featured-link {
grid-template-columns: 1fr;
}
.blog-featured-media img {
height: 360px;
min-height: 0;
}
.blog-featured-content {
padding: 32px;
}
.blog-topics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.blog-card-media img {
height: 220px;
}
}
@media (max-width: 720px) {
.blog-container {
padding: 0 18px;
}
.blog-hero {
padding: 46px 0 42px;
}
.blog-hero h1 {
max-width: 100%;
font-size: clamp(30px, 9vw, 36px);
line-height: 1.08;
}
.blog-lead {
margin-top: 16px;
font-size: 17px;
line-height: 1.5;
}
.blog-tools {
position: static;
}
.blog-filters {
overflow-x: auto;
flex-wrap: nowrap;
padding-bottom: 4px;
}
.blog-filters button {
flex: 0 0 auto;
}
.blog-list-section {
padding: 54px 0;
}
.blog-featured-section,
.blog-topics-section {
padding: 48px 0 0;
}
.blog-featured-heading {
display: block;
}
.blog-featured-link {
min-height: 0;
}
.blog-featured-media img {
height: 240px;
}
.blog-featured-content {
padding: 24px;
}
.blog-featured-content .blog-card-top {
padding-right: 48px;
}
.blog-featured-content h3 {
font-size: clamp(26px, 8vw, 34px);
}
.blog-featured-content p {
font-size: 16px;
}
.blog-featured-bottom {
display: block;
}
.blog-featured-bottom strong {
display: block;
margin-top: 8px;
}
.blog-topics {
grid-template-columns: 1fr;
}
.blog-topics button {
min-height: 128px;
}
.blog-posts {
grid-template-columns: 1fr;
}
.blog-card-link {
min-height: 0;
}
.blog-card-media img {
height: 210px;
}
.blog-card h3 {
min-height: 0;
font-size: 22px;
-webkit-line-clamp: unset;
}
.blog-card p {
min-height: 0;
-webkit-line-clamp: unset;
}
}