.article-detail-hero {
padding: 58px 0 54px;
background: #f0ede6;
}
.article-title-wrap {
max-width: 1050px;
}
.article-detail-hero h1 {
max-width: 930px;
margin: 21px 0 0;
font-size: clamp(38px, 4.4vw, 62px);
line-height: .98;
letter-spacing: -.06em;
color: var(--ink);
}
.article-title-wrap > p {
max-width: 760px;
margin: 0;
color: var(--soft-ink);
font-size: 19px;
line-height: 1.7;
}
.article-meta {
display: flex;
align-items: center;
gap: 15px;
font-size: 11px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.article-meta span {
padding: 8px 11px;
border-radius: 8px;
background: var(--yellow);
color: var(--ink);
}
.article-meta time {
color: #7d868b;
}
.article-detail-section {
padding: 92px 0 140px;
}
.article-detail-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 88px;
align-items: start;
}
.article-body {
--sloupec-textu: 780px;
--sloupec-bloku: 850px;
max-width: none;
}
.article-cover {
display: block;
width: 100%;
max-height: 570px;
object-fit: cover;
border-radius: 28px;
margin-bottom: 52px;
}
.article-body > p,
.article-body > h2,
.article-body > blockquote,
.article-author,
.back-to-news {
max-width: var(--sloupec-textu);
margin-left: auto;
margin-right: auto;
}
.article-body > p {
margin-top: 0;
margin-bottom: 24px;
color: #414a50;
font-size: 18px;
line-height: 1.8;
}
.article-body > p,
.article-body li {
text-align: justify;
hyphens: auto;
}
.article-body strong,
.article-body b {
font-weight: 800;
}
.article-body [style*="font-weight"] {
font-weight: 400 !important;
}
.article-body [style*="font-weight:600"],
.article-body [style*="font-weight: 600"],
.article-body [style*="font-weight:700"],
.article-body [style*="font-weight: 700"],
.article-body [style*="font-weight:800"],
.article-body [style*="font-weight: 800"],
.article-body [style*="font-weight:900"],
.article-body [style*="font-weight: 900"],
.article-body [style*="font-weight:bold"],
.article-body [style*="font-weight: bold"] {
font-weight: 800 !important;
}
.article-body .article-perex {
color: var(--ink);
font-size: 22px;
line-height: 1.62;
font-weight: 800;
}
.article-body h2 {
margin-top: 50px;
margin-bottom: 22px;
font-size: 40px;
line-height: 1.12;
letter-spacing: -.045em;
color: var(--ink);
}
.article-body blockquote {
margin-top: 48px;
margin-bottom: 48px;
padding: 34px 37px;
border-radius: 20px;
color: #fff;
background: var(--navy);
font-size: 22px;
line-height: 1.5;
font-weight: 800;
}
.article-body ul,
.article-body ol {
max-width: var(--sloupec-textu);
margin: 0 auto 24px;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
}
.article-body ul li,
.article-body ol li {
display: flex;
align-items: flex-start;
gap: 12px;
color: #414a50;
font-size: 18px;
line-height: 1.6;
}
.article-body ul li::before {
content: "\f00c";
font-family: "Font Awesome 6 Free";
font-weight: 900;
flex: none;
font-size: 14px;
color: var(--blue-text);
transform: translateY(4px);
}
.article-body ol {
counter-reset: sw-article-ol;
}
.article-body ol li {
counter-increment: sw-article-ol;
}
.article-body ol li::before {
content: counter(sw-article-ol);
flex: none;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--blue-soft);
color: var(--blue-text);
font-size: 13px;
font-weight: 700;
line-height: 24px;
text-align: center;
}
.article-body img:not(.article-cover) {
display: block;
max-width: var(--sloupec-textu);
width: 100%;
height: auto;
margin: 32px auto;
border-radius: var(--r-s);
}
.article-author {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 54px;
padding: 25px 0;
border-top: 1px solid #dde1e2;
border-bottom: 1px solid #dde1e2;
font-size: 13px;
}
.article-author span {
color: #81898e;
}
.back-to-news {
display: block;
margin-top: 34px;
color: var(--blue-text);
font-size: 13px;
font-weight: 900;
text-decoration: none;
}
.article-sidebar {
display: grid;
gap: 18px;
position: sticky;
top: 118px;
}
.article-sidebar > section {
padding: 27px;
border-radius: 22px;
}
.side-latest {
background: #f0ede6;
}
.side-latest > a:not(.side-all-link) {
display: block;
padding: 17px 0;
border-bottom: 1px solid rgba(21, 26, 29, .09);
text-decoration: none;
color: inherit;
}
.side-latest strong,
.side-latest small {
display: block;
}
.side-latest strong {
font-size: 13px;
line-height: 1.45;
color: var(--ink);
}
.side-latest small {
margin-top: 7px;
color: #858d91;
font-size: 10px;
}
.side-all-link {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 18px;
color: var(--blue-text);
font-size: 11px;
font-weight: 900;
text-decoration: none;
}
.side-contact {
color: var(--ink);
background: #e8f3f8;
}
.side-contact h3,
.side-support h3 {
margin: 0 0 17px;
font-size: 24px;
line-height: 1.18;
color: var(--ink);
}
.side-contact a {
display: flex;
align-items: center;
gap: 9px;
margin-top: 11px;
color: var(--ink);
font-size: 17px;
font-weight: 800;
text-decoration: none;
}
.side-contact i { color: var(--blue-text); }
.side-contact > p:not(.kicker) {
margin: 22px 0 0;
color: var(--soft-ink);
font-size: 16px;
line-height: 1.7;
}
.side-support {
color: var(--ink);
background: var(--yellow);
}
.side-support > i {
display: block;
margin-bottom: 28px;
font-size: 38px;
opacity: .45;
}
.side-support > p {
margin: 0 0 22px;
font-size: 12px;
line-height: 1.65;
}
.side-support .button {
width: 100%;
}
.article-gallery-section + .article-author,
.article-downloads + .article-author,
.article-gallery-section + .back-to-news,
.article-downloads + .back-to-news {
margin-top: 72px;
}
.article-share,
.article-gallery-section,
.article-downloads,
.article-read-more {
max-width: var(--sloupec-bloku);
margin: 72px auto 0;
}
.article-share {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 28px;
padding: 28px 30px;
align-items: center;
border-radius: 22px;
background: #edf3f6;
}
.article-share p {
margin: 0;
}
.article-share > div:first-child > p:last-child {
margin-top: 7px;
color: var(--soft-ink);
font-size: 16px;
line-height: 1.55;
}
.article-share-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-end;
}
.article-share-actions button,
.article-share-actions a {
display: inline-flex;
gap: 8px;
min-height: 43px;
padding: 9px 14px;
align-items: center;
border: 0;
border-radius: 999px;
color: var(--ink);
background: #fff;
font: inherit;
font-size: 14px;
font-weight: 900;
text-decoration: none;
cursor: pointer;
}
.article-share-actions button span,
.article-share-actions a span {
display: grid;
width: 25px;
height: 25px;
place-items: center;
border-radius: 50%;
color: #fff;
background: var(--navy);
font-size: 11px;
}
.article-extra-heading {
display: flex;
gap: 24px;
margin-bottom: 24px;
align-items: baseline;
justify-content: space-between;
}
.article-extra-heading .kicker {
margin: 0;
color: var(--blue-text);
}
.article-extra-heading h2 {
max-width: none;
margin: 0;
font-size: 31px;
line-height: 1.1;
color: var(--ink);
}
.article-gallery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.article-gallery a {
position: relative;
display: block;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 18px;
background: #dce4e7;
cursor: zoom-in;
}
.article-gallery-section .article-gallery a img {
display: block;
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
transition: transform .42s cubic-bezier(.22, .8, .24, 1), filter .3s ease;
}
.article-gallery a:hover img {
transform: scale(1.045);
filter: brightness(.9);
}
.article-gallery a > span {
position: absolute;
right: 12px;
bottom: 12px;
display: grid;
width: 37px;
height: 37px;
place-items: center;
border-radius: 50%;
color: #fff;
background: rgba(9, 29, 42, .76);
backdrop-filter: blur(8px);
font-size: 21px;
}
.article-downloads {
display: grid;
gap: 9px;
}
.article-downloads .article-extra-heading {
margin-bottom: 15px;
}
.article-downloads > a {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) auto;
gap: 18px;
padding: 18px 20px;
align-items: center;
border-radius: 17px;
color: var(--ink);
background: #f1eee8;
text-decoration: none;
}
.article-downloads > a > span {
display: grid;
width: 48px;
height: 48px;
place-items: center;
border-radius: 13px;
color: #fff;
background: var(--navy);
font-size: 12px;
font-weight: 950;
}
.article-downloads strong,
.article-downloads small {
display: block;
}
.article-downloads strong {
font-size: 17px;
line-height: 1.3;
}
.article-downloads small {
margin-top: 4px;
color: var(--soft-ink);
font-size: 14px;
line-height: 1.45;
}
.article-downloads b {
color: var(--blue-text);
font-size: 14px;
}
.article-read-more {
padding-top: 38px;
border-top: 1px solid #dde2e4;
}
.article-read-more > div:last-child {
display: grid;
}
.article-read-more a {
display: flex;
gap: 18px;
padding: 19px 0;
align-items: center;
justify-content: space-between;
border-top: 1px solid #e5e8e9;
color: var(--ink);
text-decoration: none;
}
.article-read-more a:first-child {
border-top: 0;
}
.article-read-more small,
.article-read-more strong {
display: block;
}
.article-read-more small {
margin-bottom: 6px;
color: #778187;
font-size: 13px;
}
.article-read-more strong {
font-size: 17px;
line-height: 1.35;
}
.article-read-more a > b {
color: var(--blue-text);
font-size: 22px;
}
.sidebar-social-links {
color: var(--ink);
background: #f1eee8;
}
.sidebar-social-links .kicker {
margin-bottom: 14px;
color: var(--muted-text);
}
.sidebar-social-links > div {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.sidebar-social-links a {
display: inline-flex;
gap: 8px;
min-height: 42px;
padding: 9px 13px;
align-items: center;
border-radius: 999px;
color: var(--ink);
background: #fff;
font-size: 15px;
font-weight: 900;
text-decoration: none;
}
.sidebar-social-links a > span {
display: grid;
width: 25px;
height: 25px;
place-items: center;
border-radius: 50%;
color: #fff;
background: var(--blue);
font-size: 11px;
text-transform: lowercase;
}
@media (max-width: 1080px) {
.article-detail-layout {
grid-template-columns: 1fr;
gap: 48px;
}
.article-sidebar {
position: static;
}
}
@media (max-width: 640px) {
.article-detail-hero h1 {
font-size: 34px;
}
.article-share {
grid-template-columns: 1fr;
}
.article-share-actions {
justify-content: flex-start;
}
.article-gallery {
grid-template-columns: repeat(2, 1fr);
}
}
.article-list-section {
padding: 82px 0 132px;
}
.article-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 54px;
}
.article-filters button,
.article-filters a {
display: inline-block;
padding: 11px 17px;
border: 0;
border-radius: 11px;
color: var(--soft-ink);
background: #f0f2f2;
font-size: 12px;
font-weight: 900;
line-height: 1;
text-decoration: none;
cursor: pointer;
}
.article-filters button.active,
.article-filters a.active {
color: #fff;
background: var(--navy);
}
.article-filters a:focus-visible {
outline: 3px solid var(--blue);
outline-offset: 2px;
}
.sw-article-listing__empty {
color: var(--muted);
padding: 60px 0;
text-align: center;
font-size: 15px;
}
.article-list-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px 28px;
}
@media (max-width: 1080px) {
.article-list-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.article-list-grid { grid-template-columns: 1fr; }
}
.article-list-card {
min-width: 0;
}
.article-image {
position: relative;
display: block;
height: 285px;
overflow: hidden;
border-radius: 24px;
background: #d8e0e3;
}
.article-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 450ms ease;
}
.article-list-card:hover .article-image img {
transform: scale(1.045);
}
.article-image i {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
color: var(--blue-text);
font-size: 34px;
opacity: .55;
}
.article-image > span {
position: absolute;
left: 19px;
bottom: 18px;
padding: 8px 11px;
border-radius: 8px;
color: var(--ink);
background: var(--yellow);
font-size: 10px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.article-card-body {
padding: 23px 4px 0;
}
.article-card-body time {
color: #899197;
font-size: 11px;
font-weight: 800;
}
.article-card-body h2 {
margin: 10px 0 13px;
font-size: 25px;
line-height: 1.16;
letter-spacing: -.038em;
color: var(--ink);
}
.article-card-body h2 a {
color: inherit;
text-decoration: none;
}
.article-list-card:hover .article-card-body h2 a {
color: var(--blue-text);
}
.article-card-body > p {
min-height: 66px;
margin: 0 0 21px;
color: var(--soft-ink);
font-size: 13px;
line-height: 1.65;
}
.article-more {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ink);
font-size: 12px;
font-weight: 900;
text-decoration: none;
}
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 80px;
}
.pagination button,
.pagination a,
.pagination .pagination-gap,
.pagination .is-disabled {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border: 0;
border-radius: 50%;
color: var(--ink);
background: #eff1f2;
font-size: 13px;
font-weight: 900;
text-decoration: none;
cursor: pointer;
}
.pagination button.active,
.pagination a.active {
color: #fff;
background: var(--blue);
}
.pagination button:disabled,
.pagination .is-disabled {
opacity: .32;
cursor: default;
}
.pagination .pagination-gap {
background: none;
cursor: default;
}
.pagination a:focus-visible {
outline: 3px solid var(--blue);
outline-offset: 3px;
}
.pagination .pagination-arrow {
width: 66px;
border-radius: 24px;
}
.pagination {
flex-wrap: wrap;
}
.pagination-summary {
margin-top: 18px;
color: var(--muted);
text-align: center;
font-size: 13px;
}