#main > .page_title {
display: none;
}
.single-post #wrapper {
overflow: visible;
}
.single-post .container {
width: 100%!important;
padding: 0;
}
.blog-post .post-header {
max-width: 842px;
margin: 80px auto 60px;
}
.post-meta {
text-align: center;
font-weight: 400;
font-size: 18px;
line-height: 140%;
letter-spacing: -0.02em;
color: #D1D1D1;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
}
.post-meta span {
color: #00232399;
}
h1.post-title {
font-family: Poppins;
font-weight: 500;
font-size: 60px;
line-height: 105%;
letter-spacing: -0.04em;
text-align: center;
color: #002323;
margin: 24px auto 48px;
}
.post-info {
display: flex;
justify-content: space-between;
border-top: 1px solid #0000001A;
padding-top: 16px;
align-items: center;
}
.post-author {
display: flex;
flex-direction: column;
padding-left: 60px;
font-weight: 500;
font-size: 15px;
line-height: 160%;
letter-spacing: 0.02em;
position: relative;
}
.post-author::before {
content: "";
width: 48px;
height: 48px;
background-image: url(//xnorgroup.com/wp-content/uploads/2025/05/e9a0c2674e3ddd7861b8a5540b06bcb39f1ec0c8-1.jpg);
background-repeat: no-repeat;
background-size: cover;
border-radius: 50%;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.post-author .author-name {
font-family: Poppins;
font-size: 18px;
line-height: 140%;
color: #002323;
}
.post-tags {
display: flex;
font-weight: 500;
font-size: 15px;
line-height: 120%;
text-transform: uppercase;
color: #00232399;
}
.post-tags > span {
color: #008081;
}
.post-tags .tags-list span {
display: inline-block;
padding: 0 12px;
}
.post-tags .tags-list span:not(:last-child) {
border-right: 1px solid #00000026;
}
.post-hero-img img {
width: 100%;
height: auto;
max-width: 1920px;
margin: auto;
}
.post-hero-img {
text-align: center;
}
.post-content-wrapper {
max-width: 1920px;
display: flex;
margin: 100px auto 0;
padding-bottom: 100px;
border-bottom: 1px solid #0000001A;
justify-content: flex-start;
position: relative;
top: 0;
}
#toc {
min-width: 344px;
width: 344px;
display: inline-block;
margin: 0 32px 32px;
border: 1px solid #0000001A;
border-radius: 12px;
position: sticky;
top: 130px;
height: fit-content;
}
.toc-title {
border-bottom: 1px solid #0000001A;
padding: 24px;
display: flex;
gap: 12px;
align-items: center;
font-family: Poppins;
font-weight: 500;
font-size: 15px;
line-height: 100%;
letter-spacing: -0.03rem;
text-transform: uppercase;
color: #1C1C1C;
}
.toc ul {
padding: 12px 0 12px 24px;
list-style: none;
overflow: hidden;
}
.toc ul li a {
display: block;
padding: 19.5px 19.5px 19.5px 0;
overflow: hidden;
white-space: nowrap;
font-weight: 500;
font-size: 15px;
line-height: 140%;
letter-spacing: -0.02em;
color: #1C211C80;
text-overflow: ellipsis;
width: 100%;
text-decoration: unset;
}
.toc ul li a.active {
color: #1C211C;
}
main#post-content {
width: auto;
padding-right: 80px;
}
.post-content {
font-weight: 400;
font-size: 18px;
line-height: 180%;
letter-spacing: 0.01em;
color: #002323B2;
}
.post-content p {
margin-bottom: 16px;
}
.post-content p.has-large-font-size {
font-weight: 500;
line-height: 140%;
}
.post-content h2 {
font-family: Poppins;
font-weight: 500;
font-size: 48px;
line-height: 130%;
letter-spacing: -0.03rem;
color: #1C211C;
padding-top: 0;
margin-bottom: 24px;
}
.post-content a {
color: #008081;
text-decoration: underline;
font-weight: 500;
}
.post-content strong {
font-weight: 600;
color: #002323;
}
.post-content a:hover {
color: #002323;
}
.post-content img {
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
}
.post-content figure {
margin: 0;
}
.post-content table {
border-radius: 12px;
border: 1px solid #EEEEF0;
overflow: hidden;
margin-bottom: 40px;
}
.wp-block-table.is-style-stripes tbody tr td {
border: 1px solid #0023231A;
padding: 15px 20px;
color: #002323B2;
font-weight: 500;
font-size: 18px;
line-height: 140%;
letter-spacing: 0.01em;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(even) {
background-color: #F7F7F8;
}
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
background-color: #ffffff;
}
.wp-block-table.is-style-stripes tbody tr:first-child {
background-color: #008081;
}
.wp-block-table.is-style-stripes tbody tr:first-child td {
padding: 23px 20px;
font-weight: 600;
font-size: 15px;
line-height: 120%;
text-transform: uppercase;
color: #ffffff;
border: 1px solid #FFFFFF33;
}
.post-content h3 {
font-family: Poppins;
font-weight: 500;
font-size: 28px;
line-height: 130%;
letter-spacing: -0.01em;
padding-top: 0;
margin-bottom: 16px;
color: #008081;
}
.post-content ul {
padding-left: 30px;
margin-bottom: 48px;
}
.post-content ul li {
margin-bottom: 16px;
}
.post-content blockquote {
background-color: #FF8E2D1A;
border-radius: 12px;
border-left: 3px solid #F58220;
padding: 16px 24px;
color: #F58220;
margin-bottom: 48px;
}
section.related-articles {
padding: 80px;
}
section.related-articles h2 {
font-weight: 500;
font-size: 60px;
line-height: 105%;
letter-spacing: -0.04em;
text-align: center;
color: #002323;
position: relative;
padding-top: 0;
margin-bottom: 60px;
}
section.related-articles h2::after {
content: ""!important;
width: 72px;
height: 4px;
border-radius: 100px;
background-color: #008081;
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
max-width: 1280px;
margin: auto;
}
.related-article {
border-radius: 12px;
border: 1px solid #0023231A;
overflow: hidden;
}
.related-article img {
width: 100%;
height: 246px;
object-fit: cover;
object-position: center;
}
.related-article > div {
padding: 24px 24px 32px;
}
.related-article .category {
font-weight: 500;
font-size: 15px;
line-height: 120%;
text-transform: uppercase;
color: #00232399;
}
.related-article h3 {
font-weight: 500;
font-size: 20px;
line-height: 140%;
padding-top: 12px;
margin-bottom: 10px;
color: #002323;
}
.related-article .excerpt {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-weight: 400;
font-size: 15px;
line-height: 160%;
letter-spacing: 0.02em;
color: #002323B2;
}
.related-article .readmore {
font-weight: 500;
font-size: 18px;
line-height: 160%;
color: #002323;
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 24px;
border-bottom: 1px solid #002323;
transition: all .3s ease;
text-decoration: none;
}
.related-article .readmore:hover {
color: #008081;
}
@media (max-width: 1024px) {
.post-content-wrapper {
flex-direction: column;
padding: 0 25px 68px;
gap: 48px;
}
.blog-post .post-header {
padding: 0 25px;
}
#toc {
position: static;
width: 100%;
margin: 0;
}
main#post-content {
padding-right: 0;
}
section.related-articles {
padding: 68px 25px;
}
}
@media (max-width: 767px) {
.post-meta {
font-size: 13px;
}
h1.post-title {
font-size: 36px;
}
.post-info {
flex-direction: column;
align-items: flex-start;
gap: 32px;
}
.post-tags {
font-size: 13px;
}
#toc {
min-width: unset;
}
.post-content-wrapper {
margin-top: 64px;
padding: 0 20px 64px;
}
.post-content p.has-large-font-size {
font-size: 24px!important;
}
.post-content {
font-size: 15px;
line-height: 165%;
}
.wp-block-spacer {
max-height: 50px;
}
.post-content h2 {
font-size: 28px;
margin-bottom: 16px;
}
.post-content p {
margin-bottom: 12px;
}
.wp-block-table .has-fixed-layout {
min-width: 600px;
overflow-x: scroll;
padding-bottom: 20px;
margin-bottom: 20px;
}
.wp-block-table.is-style-stripes {
margin-bottom: 20px;
}
.post-content h3 {
font-size: 20px;
}
.post-content blockquote {
margin-bottom: 32px;
}
.post-content ul {
margin-bottom: 32px;
}
section.related-articles h2 {
font-size: 32px;
}
.grid {
grid-template-columns: repeat(1, 1fr);
}
}