.ff-blog {
font-family: var(--ff-font-body);
color: var(--ff-ink);
} .ff-blog__hero {
position: relative;
background-size: cover;
background-position: center;
padding: 64px 20px 56px;
color: #fff;
min-height: 300px;
display: flex;
align-items: flex-end;
} .ff-blog__hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(0, 107, 166, .92) 25%, rgba(0, 107, 166, .55) 100%);
}
.ff-blog__hero-inner {
position: relative;
z-index: 1;
}
.ff-crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 18px;
margin-bottom: 14px;
font-size: 13px;
font-weight: 500;
letter-spacing: 1.5px;
text-transform: uppercase;
color: #dceaf4;
}
.ff-crumbs a {
color: #fff;
text-decoration: none;
transition: color .2s;
}
.ff-crumbs a:hover {
color: var(--ff-yellow);
} .ff-crumbs > * + *::before {
content: "";
display: inline-block;
width: 0;
height: 0;
margin-inline-end: 10px;
border-block: 4px solid transparent;
border-inline-start: 6px solid var(--ff-yellow);
vertical-align: middle;
}
.ff-blog__hero-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 12px 32px;
}
.ff-blog h2.ff-blog__hero-title {
margin: 0;
font-family: var(--ff-font-head);
font-size: clamp(26px, 4vw, 38px);
font-weight: 700;
line-height: 1.2;
color: #fff;
}
.ff-blog p.ff-blog__hero-sub {
margin: 0;
font-size: 16px;
color: #eaf3f9;
} .ff-blog__layout {
display: grid;
grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
gap: 48px;
align-items: start;
padding: 56px 20px 72px;
} .ff-blog .ff-links,
.ff-blog .ff-crumbs {
list-style: none;
margin: 0;
padding: 0;
}
.ff-blog .ff-links li::marker {
content: "";
}
.ff-blog__side {
position: sticky;
top: 110px;
background-color: #f7f8f9;
border-radius: 18px;
padding: 28px 24px;
}
.ff-blog .ff-blog__side h3 {
margin: 0 0 10px;
font-family: var(--ff-font-head);
font-size: 20px;
font-weight: 700;
line-height: 1.3;
color: var(--ff-blue);
}
.ff-blog .ff-blog__side p {
margin: 0 0 18px;
font-size: 15px;
line-height: 1.65;
color: #4a4a4a;
}
.ff-blog a.ff-side-btn {
display: block;
text-align: center;
padding: 14px 20px;
border-radius: 30px;
background: linear-gradient(135deg, var(--ff-blue), #0288cc);
color: #fff;
font-size: 14px;
font-weight: 500;
letter-spacing: .3px;
text-decoration: none;
box-shadow: 0 12px 26px -14px rgba(0, 107, 166, .9);
transition: transform .2s, box-shadow .2s;
}
.ff-blog a.ff-side-btn:hover,
.ff-blog a.ff-side-btn:focus {
transform: translateY(-2px);
color: #fff;
}
.ff-side-author {
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid #e4e7ea;
}
.ff-side-author__img {
width: 100%;
height: auto;
border-radius: 14px;
margin-bottom: 16px;
display: block;
}
.ff-side-topics {
margin-top: 24px;
padding-top: 22px;
border-top: 1px solid #e4e7ea;
}
.ff-side-topics .ff-links a {
color: var(--ff-blue);
font-size: 15px;
font-weight: 500;
gap: 10px;
min-height: 40px;
}
.ff-side-topics .ff-links .ff-icon--caret {
width: 7px;
height: 14px;
fill: var(--ff-yellow);
}
.ff-side-topics .ff-links a:hover span {
color: var(--ff-blue-dark);
} .ff-blog h1.ff-blog__title {
margin: 0 0 26px;
font-family: var(--ff-font-head);
font-size: clamp(28px, 3.6vw, 42px);
font-weight: 700;
line-height: 1.22;
color: var(--ff-blue);
} .ff-toc {
margin: 0 0 36px;
border: 1px solid #e2e8ed;
border-radius: 10px;
overflow: hidden;
}
.ff-blog h2.ff-toc__title {
margin: 0;
padding: 16px 22px;
background-color: var(--ff-blue-light);
color: #fff;
font-family: var(--ff-font-body);
font-size: 16px;
font-weight: 500;
}
.ff-blog .ff-toc__list {
list-style: none;
margin: 0;
padding: 18px 22px;
}
.ff-toc__item a {
display: flex;
gap: 10px;
padding: 6px 0;
color: var(--ff-ink);
font-size: 16px;
line-height: 1.5;
text-decoration: none;
transition: color .2s;
}
.ff-toc__item a:hover {
color: var(--ff-blue);
}
.ff-toc__num {
flex: 0 0 auto;
color: var(--ff-blue-light);
font-weight: 500;
}
.ff-toc__item--h3 {
padding-inline-start: 26px;
} .ff-blog__thumb {
margin: 0 0 32px;
}
.ff-blog__thumb img {
width: 100%;
height: auto;
max-height: 420px;
object-fit: cover;
border-radius: 16px;
display: block;
} .ff-blog .ff-toc__item a {
color: var(--ff-ink);
text-decoration: none;
}
.ff-blog .ff-toc__item a:hover {
color: var(--ff-blue);
} .ff-blog__content {
font-size: 17px;
line-height: 1.75;
color: #3f3f3f;
}
.ff-blog__content > * {
margin-block: 0 1.15em;
}
.ff-blog__content h2,
.ff-blog__content h3,
.ff-blog__content h4 {
font-family: var(--ff-font-head);
color: var(--ff-ink);
line-height: 1.3;
margin-block: 1.8em .6em; scroll-margin-top: 110px;
}
.ff-blog__content h2 { font-size: clamp(22px, 2.6vw, 28px); }
.ff-blog__content h3 { font-size: clamp(19px, 2.2vw, 22px); }
.ff-blog__content a {
color: var(--ff-blue);
text-decoration: underline;
text-underline-offset: 3px;
}
.ff-blog__content ul,
.ff-blog__content ol {
padding-inline-start: 1.4em;
}
.ff-blog__content li {
margin-block: .4em;
}
.ff-blog__content img,
.ff-blog__content .wp-block-image img {
max-width: 100%;
height: auto;
border-radius: 14px;
}
.ff-blog__content figure {
margin-block: 1.6em;
}
.ff-blog__content figcaption {
margin-top: .6em;
font-size: 14px;
color: #6b7276;
}
.ff-blog__content blockquote {
margin: 1.8em 0;
padding: 4px 0 4px 22px;
border-inline-start: 4px solid var(--ff-yellow);
font-size: 18px;
font-style: italic;
color: #35404a;
}
.ff-blog__content strong {
color: var(--ff-ink);
} .ff-blog__meta {
margin-top: 48px;
padding-top: 22px;
border-top: 1px solid #e4e7ea;
display: flex;
flex-wrap: wrap;
gap: 10px 24px;
align-items: center;
font-size: 14px;
color: #6b7276;
}
.ff-blog__tags a {
display: inline-block;
margin-inline-end: 6px;
padding: 4px 12px;
border-radius: 20px;
background-color: #eef5fa;
color: var(--ff-blue);
text-decoration: none;
font-size: 13px;
}
.ff-blog__tags a:hover {
background-color: var(--ff-blue);
color: #fff;
}
.ff-blog__date {
margin: 0;
} @media (max-width: 1024px) {
.ff-blog__layout {
grid-template-columns: 1fr;
gap: 32px;
padding: 36px 16px 56px;
} .ff-blog__side {
position: static;
order: 2;
}
.ff-blog__main {
order: 1;
}
.ff-blog__hero {
padding: 40px 16px 32px;
min-height: 200px;
}
.ff-crumbs {
font-size: 12px;
letter-spacing: 1px;
}
.ff-blog__content {
font-size: 16px;
}
} .ff-archive__inner {
padding: 52px 20px 72px;
}
.ff-archive__eyebrow {
margin: 0 0 10px;
font-family: var(--ff-font-head);
font-size: 17px;
font-weight: 700;
color: var(--ff-ink);
}
.ff-blog h1.ff-archive__title {
margin: 0 0 14px;
max-width: 22ch;
font-family: var(--ff-font-head);
font-size: clamp(27px, 4vw, 40px);
font-weight: 700;
line-height: 1.2;
color: var(--ff-blue);
text-wrap: balance;
}
.ff-blog p.ff-archive__sub {
margin: 0 0 44px;
max-width: 62ch;
font-size: 17px;
line-height: 1.6;
color: var(--ff-ink);
} .ff-beitraege--center {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1000px) {
.ff-beitraege--center {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.ff-beitraege--center {
grid-template-columns: 1fr;
}
} .ff-beitraege--center .ff-beitrag__body {
text-align: center;
align-items: center;
}
.ff-beitraege--center .ff-beitrag {
background-color: var(--ff-white);
}
.ff-beitraege--center h2.ff-beitrag__title {
margin: 0;
font-family: var(--ff-font-head);
font-size: 19px;
font-weight: 700;
line-height: 1.32;
text-wrap: balance;
}
.ff-beitraege--center h2.ff-beitrag__title a {
color: var(--ff-blue);
text-decoration: none;
}
.ff-beitraege--center h2.ff-beitrag__title a:hover {
color: var(--ff-blue-dark);
}
.ff-beitraege--center a.ff-beitrag__more {
align-self: center;
}
.ff-archive__empty {
margin: 0 0 26px;
padding: 22px 24px;
background-color: #f7f8f9;
border-radius: 14px;
color: var(--ff-muted, #5f6b72);
}
.ff-archive__search {
display: flex;
flex-wrap: wrap;
gap: 10px;
max-width: 520px;
}
.ff-archive__search input[type="search"] {
flex: 1 1 220px;
min-width: 0;
padding: 13px 18px;
border: 2px solid #dfe4e8;
border-radius: 30px;
background-color: #fff;
font-family: var(--ff-font-body);
font-size: 16px;
}
.ff-archive__search input[type="search"]:focus {
outline: 0;
border-color: var(--ff-blue);
}
.ff-blog .ff-archive__search button {
flex: 0 0 auto;
border: 0;
cursor: pointer;
padding-inline: 30px;
} .ff-blog .ff-pagination {
margin-top: 48px;
}
.ff-blog .ff-pagination .nav-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
justify-content: center;
}
.ff-blog .ff-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 14px;
border-radius: 30px;
background-color: #f0f4f7;
color: var(--ff-ink);
font-family: var(--ff-font-body);
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: background-color .2s, color .2s;
}
.ff-blog .ff-pagination a.page-numbers:hover {
background-color: var(--ff-blue);
color: #fff;
}
.ff-blog .ff-pagination .page-numbers.current {
background-color: var(--ff-blue);
color: #fff;
}
.ff-blog .ff-pagination .page-numbers.dots {
background: none;
min-width: 0;
padding-inline: 4px;
}
@media (max-width: 1024px) {
.ff-archive__inner {
padding: 34px 16px 56px;
}
.ff-blog p.ff-archive__sub {
margin-bottom: 30px;
}
}