:root {
--transition-time: 0.25s;
}
:root[data-theme='light'] {
--color-main: #000;
--color-text: #585858;
--color-bg-main: #fff;
--color-border: #dce3ea;
--color-button-bg: #161616;
--color-tag: #585858;
--color-bg-secondary-buttons: #686868;
--color-bg-secondary-buttons--hover: #505050;
--foundation--red-light: #fde8e9;
--foundation--red-light-hover: #fcddde;
--foundation--red-light-active: #f9b9bb;
--color-bg-header1-gray: #F0F0F0;
--color-bg-header1-black: #161616;
--color-bg-header2: #FFF;
--color-header-icon: #161616;
--color-bg-footer-gray: #F9F9F9;
--color-bg-footer-black: #161616;
--color-footer-sub-category: #5B5B5B;
--color-footer-sec-link: #717171;
--color-bg-light-gray: #f9f9f9;
--color-bg-black: #161616;
--color-no-image-bg: #F1F1F2;
--color-mobile-overlay: rgba(22, 22, 22, 0.9);
--color-mobile-bottom: #F0F0F0;
--color-mobile-border-bottom: #F0F0F0;
--color-switch-btn: rgba(35, 39, 47, 0.089);
--color-cta-bg: #161616;
--color-cta-title: #FFF;
--color-cta-text: #e5e5e5;
--banner-success-btn-bg-color: #5c5c5c;
--banner-success-btn-bg-color--hover: #404040;
--banner-form-error-color: #ff1d1d;
--no-image-card-plug-bg-color: #F1F1F2;
--no-image-card-plug-bg-color--hover: #EDEDED;
--color-author-card-meta: #616162;
--icons-hover-color: #828282;
--color-content-card-bg: #f6f6f6;
--color-content-card-description: #777779;
--color-content-card-author: #1D1D1D;
--color-content-card--hover: #eee;
--color-post-content-button-bg: #ededed;
--header-nav-item-hover-bg-color: #d1d1d1;
--header-type-2-nav-item-hover-color: #7a7a7a;
--mobile-menu-subnav-item-color: #585858;
--form-page-input-bg-color: #dedede;
--form-page-input-focus-color: #ededed;
--form-page-submit-btn-bg-color: #000;
--form-page-submit-btn-bg-color--hover: #3e3e3e;
--membership-toggle-bg-color: #F4F4F4;
--membership-toggle-bg-color--hover: #eee;
--membership-card-bg-color: #F4F4F4;
--tier-card-hr: #E4E4E4;
--membership-signup-bg-color: #000;
--membership-signup-bg-color--hover: #3e3e3e;
--account-page-bg-color: #F9F9F9;
--announcment-bar-dark-bg-color: #15171a;
--announcment-bar-light-bg-color: #f0f0f0;
--scroll-top-bg-color: #f0f0f0;
--scroll-top-bg-color--hover: #E4E4E4;
--form-error-color: #d20000;
}
:root[data-theme='dark'] {
--scroll-top-bg-color: #f0f0f0;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
overflow-y: auto;
overflow-x: hidden;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
min-height: 100vh;
height: 100%;
margin: 0;
padding: 0;
color: var(--color-main);
line-height: 1.2;
font-family: var(--font-family-body);
font-style: normal;
background-color: var(--color-bg-main);
transition: background-color var(--transition-time) ease;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
p,
ul,
ol,
li,
dl,
dd,
hr,
pre,
form,
table,
video,
figure,
figcaption,
blockquote {
margin: 0;
padding: 0;
}
ul,
ol {
padding: 0;
list-style: none;
}
img {
display: block;
}
button {
border: none;
cursor: pointer;
background: transparent;
padding: 0;
}
input {
outline: none;
border: none;
}
input,
button,
select,
textarea {
font: inherit;
-webkit-appearance: none;
appearance: none;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
label {
display: block;
}
::selection {
text-shadow: none;
background: #cbeafb;
}
mark {
background-color: #bcf8a0;
}
small {
font-size: 80%;
}
hr {
width: 100%;
height: 1px;
border: none;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
ul:not([class]) li+li {
margin-top: 8px;
}
ol:not([class]) li+li {
margin-top: 8px;
}
a {
color: var(--color-main);
text-decoration: none;
cursor: pointer;
display: inline-block;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 120%;
margin: 0;
font-family: var(--font-family-title);
font-weight: var(--font-weight-title);
letter-spacing: var(--letter-spacing-title);
font-style: normal;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
main {
display: block;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
pre {
font-family: monospace, monospace;
font-size: 1em;
}
a {
background-color: transparent;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
details {
display: block;
}
summary {
display: list-item;
}
template {
display: none;
}
[hidden] {
display: none;
}
.visually-hidden {
clip: rect(1px, 1px, 1px, 1px);
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
position: absolute;
white-space: nowrap;
height: 1px;
width: 1px;
overflow: hidden;
border: 0;
padding: 0;
margin: 0;
max-height: 0;
}
@keyframes openMenu {
0% {
left: -100%;
}
100% {
left: 0;
}
}
@keyframes closeMenu {
0% {
left: 0;
}
100% {
left: -100%;
}
}
@keyframes overlayFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes overlayFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeInAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes bannerOverlayFadeInAnimation {
from {
opacity: 0;
}
to {
opacity: 0.75;
}
}
@keyframes bannerOverlayFadeInAnimationWithOverlay {
from {
opacity: 0.6;
}
to {
opacity: 0.75;
}
}
.gh-scroll-top-btn {
position: fixed;
z-index: 1000;
right: 20px;
bottom: 20px;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
height: 40px;
width: 40px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
background-color: var(--scroll-top-bg-color);
}
.gh-scroll-top-btn.alignUp {
right: 30px;
bottom: 100px;
}
.gh-scroll-top-btn.is-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.gh-scroll-top-btn.is-active.hide {
display: none;
}
.gh-scroll-top-arrow {
width: 28px;
height: 28px;
}
.gh-scroll-top-arrow path {
stroke: black;
}
.gh-scroll-top-btn:hover {
background-color: var(--scroll-top-bg-color--hover);
}
.gh-scroll-top-progress {
position: absolute;
top: 0;
left: 0;
}
.gh-scroll-top-progress path {
stroke: var(--ghost-accent-color);
stroke-width: 4;
transition: all .4s ease;
fill: none;
}
@media (max-width: 900px) {
.gh-scroll-top-btn:hover {
background-color: var(--scroll-top-bg-color);
}
}
@media (max-width: 550px) {
.gh-scroll-top-btn {
right: 10px;
bottom: 10px;
height: 36px;
width: 36px;
}
}
.header {
}
.header-container {
}
.header__top {
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
}
.burger-btn__mobile {
display: none;
}
.header__social {
display: flex;
align-items: center;
column-gap: 1rem;
}
.site-logo {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
}
.header__actions {
display: flex;
align-items: center;
column-gap: 0.5rem;
}
.search {
padding: 12px;
}
.action-btn {
display: flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 24px;
font-weight: 600;
border-radius: 50px;
background: #fde8e9;
color: var(--accent-color);
transition: .4s ease;
}
.sign-in-btn:hover {
color: #fff;
background: var(--accent-color);
}
.accent-button {
color: #fff;
background-color: var(--accent-color);
}
.header__bottom {
display: flex;
align-items: center;
justify-content: space-between;
}
.nav {
display: flex;
align-items: center;
column-gap: 1rem;
padding: 12px 0;
}
.nav-menu {
display: flex;
align-items: center;
column-gap: 2.25rem;
}
.nav-menu-item {
font-weight: 500;
font-size: 1rem;
line-height: 100%;
white-space: nowrap;
transition: .4s ease;
}
.nav-menu-item:hover {
color: var(--accent-color);
}
.nav-current {
color: var(--accent-color);
}
.nav-more-wrapper {
position: relative;
display: flex;
}
.nav-btn-more {
background: none;
border: none;
cursor: pointer;
}
.nav-more {
position: absolute;
right: 0;
top: 100%;
background: white;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
min-width: 180px;
opacity: 0;
pointer-events: none;
transform: translateY(4px);
transition: opacity 0.6s ease, transform 0.6s ease;
z-index: 999;
}
.nav-more-wrapper:focus-within .nav-more,
.nav-more-wrapper:hover .nav-more {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.nav-menu-more {
list-style: none;
margin: 0;
padding: 0.5em 0;
}
.nav-list-item-more a {
display: block;
padding: 0.5em 1em;
color: #333;
text-decoration: none;
}
.nav-list-item-more a:hover {
background: #f0f0f0;
}
.mobile-top {
display: flex;
align-items: center;
column-gap: 1rem;
padding: 8px 16px;
border-bottom: 1px solid #e9edf1;
}
.mobile-cancel-btn {
margin: 0;
}
.mobile-content {
max-height: 75vh;
overflow-y: auto;
padding: 0 1rem;
}
.mobile-center {
padding: 20px 0 1rem;
border-bottom: 1px solid #e9edf1;
}
.mobile-center__item {
display: flex;
align-items: center;
column-gap: 6px;
padding: 8px 10px;
transition: var(--transition-time);
opacity: .8;
}
.mobile-center__item:hover {
border-radius: 6px;
background-color:#f5f7f9;
}
.mobile-center__item:hover svg {
color: var(--accent-color);
}
.mobile-center__badge {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fde8e9;
border-radius: 50%;
font-weight: 600;
font-size: 11px;
line-height: 120%;
color: var(--accent-color);
}
.mobile-center__item a {
font-weight: 600;
font-size: 16px;
line-height: 120%;
}
.mobile-bottom {
padding: 1rem 0 1rem 12px;
border-bottom: 1px solid #e9edf1;
}
.category-item {
display: list-item;
}
.category-item.hidden {
display: none;
}
.mobile-bottome__heading {
font-weight: 800;
font-size: 12px;
line-height: 120%;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #b8c0c7;
margin-bottom: 14.5px;
}
.category-item {
font-weight: 600;
font-size: 16px;
line-height: 100%;
transition: var(--transition-time);
}
.category-item:not(:last-child) {
margin-bottom: 19px;
}
.category-item:hover {
color: var(--accent-color);
}
#show-toggle-button {
display: flex;
align-items: center;
column-gap: 5px;
margin-top: 19px;
}
.show-toggle-button__text {
font-weight: 600;
font-size: 14px;
line-height: 120%;
color: var(--accent-color);
}
.show-toggle-button-icon {
display: flex;
align-items: center;
justify-content: center;
height: 20px;
width: 20px;
border-radius: 6px;
background-color: #fde8e9;
}
.show-toggle-button-icon {
transform: rotate(180deg);
}
.toggle-button.is-active .show-toggle-button-icon {
transform: rotate(0);
}
.mobile-info {
padding: 10px 2rem;
}
.mobile-info__list {
display: flex;
column-gap: 6px;
}
.mobile-info__item {
position: relative;
font-weight: 500;
font-size: 11px;
line-height: 120%;
color: #616a7b;
}
.mobile-info__item:hover {
color: #44474b;
}
.mobile-info__item:not(:last-child)::before {
position: absolute;
content: '.';
right: -5px;
bottom: 2px;
}
.mobile-info__copyright {
display: block;
font-weight: 400;
font-size: 10px;
line-height: 120%;
text-align: center;
color: #a2a3a5;
margin-top: 7px;
text-align: center;
}
@media (max-width: 1366px) {
.nav-menu {
column-gap: 1.5rem;
}
}
@media (max-width: 1200px) {
.nav-menu {
column-gap: 1rem;
}
}
@media (max-width: 1100px) {
.nav-menu {
column-gap: .5rem;
}
}
@media (max-width: 1024px) {
.header__top {
padding: 10px 0;
}
.header__bottom {
display: none;
}
.header__social {
display: none;
}
.burger-btn__mobile {
display: block;
}
.site-logo {
max-height: 45px;
left: static;
position: static;
top: static;
translate: none;
}
.site-logo img {
max-height: 45px !important;
}
}
@media (max-width: 900px) {
.subscribe-button-desktop {
display: none;
}
}
.gh-tags-wrapper{
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.gh-tags-wrapper svg{
fill: var(--color-main);
}
.gh-tag-link{
text-transform: var(--text-transform-tags);
font-family: var(--font-family-post-tag);
font-size: 10px;
font-weight: var(--font-weight-tag);
line-height: 100%;
letter-spacing: 0.06em;
color: var(--accent-color);
transition: opacity var(--transition-time) ease;
}
.gh-section--theme-black .gh-tag-link{
color: #A2A2A2 !important;
}
.gh-tag-link:hover{
opacity: 0.8;
}
@media (max-width: 900px) {
.gh-tag-link:hover{
opacity: 1;
}
}
.gh-post-info {
font-family: var(--font-family-post-info);
font-size: var(--font-size-post-info);
line-height: var(--line-height-post-info);
font-weight: var(--font-weight-post-info);
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: 8px;
row-gap: 4px;
}
.gh-post-info-tag-icon {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.gh-post-info-tag-icon::after {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
padding: 4px;
color: #FFF;
font-size: 12px;
font-weight: 500;
line-height: 1;
background-color: rgb(109, 109, 109, 85%);
width: max-content;
border-radius: var(--border-radius-elements);
}
.gh-post-info-tag-icon:hover::after {
display: block;
animation: fadeInAnimation var(--transition-time) ease;
}
.gh-post-info-tag-icon--video::after {
content: 'Has Video Content';
}
.gh-post-info-tag-icon--featured::after {
content: 'Закрепленная статья';
}
.gh-post-info-tag-icon svg {
width: 14px;
height: 14px;
}
.gh-post-info-tag-icon--video svg path {
width: 14px;
height: 14px;
fill: var(--color-main);
transition: fill var(--transition-time) ease;
}
.gh-post-info-tag-icon--video:hover svg path {
fill: var(--ghost-accent-color);
}
.gh-post-info-tag-icon--featured svg path {
width: 14px;
height: 14px;
transition: stroke var(--transition-time) ease;
}
.gh-hero-wrapper.gh-hero-wrapper--featured-type-6 .post .gh-post-info-tag-icon--featured svg path{
stroke: var(--ghost-accent-color);
}
.gh-post-info-tag-icon--featured:hover svg path {
stroke: var(--ghost-accent-color);
}
.gh-post-info__author-start, .gh-post-info__date {
font-weight: var(--font-weight-post-info);
color: var(--color-text);
}
.gh-post-info__author-wrapper {
display: flex;
align-items: baseline;
}
.gh-post-info--video {
margin-left: 20px;
}
.gh-post-info__author-link {
color: var(--color-main);
transition: border-color var(--transition-time) ease, color var(--transition-time) ease;
display: inline;
word-break: break-word;
line-height: var(--line-height-post-info);
font-weight: var(--font-weight-post-info);
margin-left: 4px;
position: relative;
}
.gh-post-info__author-link::after {
content: '';
background-color: var(--color-main);
width: 100%;
height: 1px;
transition: width var(--transition-time) ease, background-color var(--transition-time) ease;
position: absolute;
bottom: 0px;
left: 0;
}
.gh-post-info__author-link:hover {
color: var(--accent-color);
}
.gh-post-info__author-link:hover::after {
width: 0;
background-color: var(--accent-color);
}
.gh-post-info__date{
display: flex;
align-items: center;
opacity: 0.75;
font-size: 12px;
}
.post-card__date__time:before {
content: "•";
opacity: 0.25;
margin: 0 4px;
}
@media (max-width: 900px) {
.gh-post-info__author-link:hover {
color: var(--color-main);
}
.gh-post-info__author-link:hover::after {
width: 100%;
background-color: var(--color-main);
}
}
.main-banner-wrapper {
padding: 1.5rem 0;
background-color: #f9fbfc;
}
#main-banner {
width: 100%;
height: 130px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
.section-banner {
max-width: 300px;
width: 100%;
display: block;
background-position: center;
background-repeat: no-repeat;
}
#section-banner {
display: block;
width: 100%;
height: 460px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
@media (max-width: 1100px) {
.main-banner-wrapper {
padding: 0;
}
}
@media (max-width: 1024px) {
.section-banner {
max-width: 100%;
height: 130px;
}
#main-banner, .section-banner {
background-size: contain;
}
}
@media (max-width: 550px) {
#main-banner {
height: 160px;
background-size: contain;
}
.main-banner-wrapper .gh-container {
padding: 10px;
}
.news-section-banner .main-banner-wrapper .gh-container {
padding: 0;
}
.section-banner {
background-size: contain;
height: 160px;
}
.news-section-banner #main-banner {
height: 160px;
}
.most-popular-container #main-banner {
height: 160px;
}
}
#main-banner { display: block; }
.news-container {
display: flex;
column-gap: 2rem;
padding-bottom: 44px;
}
.news-section {
max-width: 922px;
width: 100%;
}
.archive-news {
padding: 44px 0;
}
.archive-news .section-banner {
background-image: url('../images/aside-banner-pink.png');
}
.news__heading {
position: relative;
font-weight: 800;
font-size: 20px;
line-height: 120%;
padding-bottom: 14px;
border-bottom: 1px solid #dce3ea;
text-transform: uppercase;
margin-top: 44px;
margin-bottom: 2rem;
}
.news__heading::before {
position: absolute;
content: '';
height: 5px;
width: 65px;
left: 0;
bottom: -2px;
background: var(--accent-color);
}
.tabs-carousel {
display: flex;
align-items: center;
column-gap: 8px;
position: relative;
overflow: hidden;
margin-bottom: 1.5rem;
}
.tabs-wrapper {
overflow-x: auto;
scroll-snap-type: x mandatory;
flex: 1 1 auto;
scrollbar-width: none;
max-width: 100vw;
}
.tabs-wrapper::-webkit-scrollbar {
display: none;
}
.tabs {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 0.5rem;
}
.fpost__content {
margin-left: 24px;
}
.tab {
flex: 0 0 auto;
scroll-snap-align: start;
padding: 8.5px 15px;
white-space: nowrap;
cursor: pointer;
font-weight: 500;
font-size: clamp(12px, 3vw, 14px);
line-height: 120%;
text-align: center;
border-radius: 50px;
background-color: #f5f7f9;
max-width: 100%;
transition: var(--transition-time);
}
.tab:hover {
background-color: var(--accent-color);
color: #fff;
}
.tab-link-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 2.7rem;
}
.tab-link {
font-weight: 600;
font-size: 14px;
color: #fff;
border-radius: 50px;
background-color: var(--accent-color);
padding: 11.5px 20px;
}
.tab.active {
background-color: var(--accent-color);
color: #fff;
}
.scroll-toggle-btn {
background: #fff;
border: none;
font-size: 1.5rem;
padding: 0 0.5rem;
cursor: pointer;
transition: transform 0.2s;
}
@media (max-width: 480px) {
.tab-link {
font-size: 12px;
padding: 10px 16px;
}
.tab {
padding: 6px 12px;
font-size: 12px;
}
}
.posts-wrapper {
display: flex;
flex-direction: column;
gap: 24px;
}
.news-section .post {
display: flex;
}
.post__img {
max-width: 200px;
min-width: 200px;
width: 100%;
height: auto;
object-fit: contain;
transition: var(--transition-time);
}
.post__img:hover {
opacity: .8;
}
.post__title {
font-weight: 700;
font-size: 19px;
line-height: 140%;
margin: 2px 0 12px;
transition: var(--transition-time);
}
.post__title:hover {
color: var(--accent-color);
}
.news-aside {
max-width: 286px;
width: 100%;
}
.news-aside .section-banner-link {
object-fit: cover !important;
}
.aside-news {
border: 1px solid #dce3ea;
width: 100%;
margin-bottom: 24px;
}
.aside-news__top {
display: flex;
align-items: center;
column-gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid #dce3ea;
}
.aside-news__heading {
font-weight: 800;
font-size: 14px;
line-height: 120%;
letter-spacing: 0.02em;
}
.aside-news__content {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 24px 16px;
}
.aside-news__post:not(:last-child) {
padding-bottom: 10px;
border-bottom: 1px solid #dce3ea;
}
.aside-news__title-link h2 {
font-weight: 800;
font-size: 16px;
line-height: 140%;
margin-bottom: 12px;
transition: var(--transition-time);
}
.aside-news__title-link:hover {
color: var(--accent-color);
}
#news-toggle-button {
display: flex;
align-items: center;
column-gap: 5px;
}
.news-section {
max-width: 922px;
width: 100%;
min-width: 0;
}
.news-section-banner {
display: none;
}
@media (max-width: 550px) {
.news-section-banner {
padding: 32px 0;
}
.news-section-banner #main-banner {
background-size: contain !important;
}
.archive-news {
padding: 24px 0;
}
}
.tabs-carousel {
max-width: 100%;
overflow-x: auto;
}
.tabs-wrapper {
max-width: 100%;
overflow-x: auto;
flex: 1 1 auto;
}
@media (max-width: 1024px) {
.news-aside .section-banner {
display: none;
}
}
@media (max-width: 768px) {
.news-aside {
display: none;
}
.news__heading {
margin: 1rem 0;
}
}
@media (max-width: 550px) {
.news-section .post {
align-items: center;
flex-direction: row-reverse;
}
.news__heading {
margin: 2rem 0 1rem;
}
.posts-wrapper {
gap: 20px;
}
.fpost__content {
margin-left: 0;
margin-right: 12px;
width: 100%;
justify-self: flex-start;
}
.post__img {
width: 140px;
min-width: 140px;
height: 70px;
}
.post__title {
font-size: 15px;
line-height: 130%;
}
.tab-link {
text-align: center;
width: 100%;
}
.most-popular-post-wrapper {
border: 1px solid #dce3ea;
}
.most-popular__post-content {
padding-left: 1rem;
padding-right: 1rem;
}
.most-popular__post:last-child {
border-bottom: none;
}
.most-popular__post-first-column:last-child {
border-bottom: 1px solid #dce3ea;
}
.first-most-article {
padding-top: 0 !important;
}
}
#announcement-bar-root .gh-announcement-bar {
font-weight: 500;
}
#announcement-bar-root .gh-announcement-bar a:hover {
text-decoration: none;
}
#announcement-bar-root .gh-announcement-bar.dark a {
color: var(--ghost-accent-color);
}
#announcement-bar-root .gh-announcement-bar.dark {
background-color: var(--announcment-bar-dark-bg-color);
}
#announcement-bar-root .gh-announcement-bar.light {
color: var(--color-main);
background-color: var(--announcment-bar-light-bg-color);
}
#announcement-bar-root .gh-announcement-bar button {
transition: opacity var(--transition-time) ease;
}
:root[data-theme="dark"]
#announcement-bar-root
.gh-announcement-bar
button
svg
path {
fill: #fff;
}
#announcement-bar-root .gh-announcement-bar button:hover {
opacity: 0.7;
}
@media (max-width: 550px) {
#announcement-bar-root .gh-announcement-bar .gh-announcement-bar-content {
font-size: 14px;
}
#announcement-bar-root .gh-announcement-bar {
padding: 10px 40px;
}
}
.gh-header {
padding: 0;
}
.gh-post-page--wrapper {
padding: 44px 0 0;
background-color: var(--color-bg-main);
}
.gh-post-page article {
width: 100%;
}
.gh-post-page--with-sidebar {
display: grid;
grid-template-columns: 1fr 300px;
grid-column-gap: 32px;
}
.gh-post-page {
display: flex;
flex-direction: column;
align-items: center;
}
.gh-post-page__header {
background-color: var(--color-bg-main);
transition: background-color var(--transition-time) ease;
}
.gh-post-page .gh-post-page__header {
max-width: 774px;
margin: 0 auto 32px;
}
.more-post-mobile {
display: none;
}
.gh-post-page--featured .gh-post-page__header {
max-width: 816px;
width: 100%;
margin: -150px auto 32px;
padding: 40px 64px 0;
}
.gh-post-page.gh-post-page--featured .gh-post-page__featured-img {
max-width: 1480px;
width: 100%;
padding-left: 40px;
padding-right: 40px;
margin: 0 auto 32px;
}
.gh-post-page--with-sidebar.gh-post-page--featured
.gh-post-page__featured-img
.gh-card-image__caption,
.gh-post-page.gh-post-page--featured
.gh-post-page__featured-img
.gh-card-image__caption {
max-width: 148px;
margin-left: auto;
}
.gh-post-page .gh-post-page__featured-img {
max-width: 774px;
width: calc(100% - 80px);
margin: 0 auto 32px;
}
.gh-post-page__image {
object-fit: contain;
display: block;
width: 100%;
height: auto;
}
.gh-card-image__caption {
text-align: right;
margin-top: 4px;
font-family: var(--font-family-body);
font-size: 12px;
font-weight: 400;
line-height: 110%;
color: var(--color-text);
}
.gh-post-page--with-sidebar .gh-post-page__featured-img {
max-width: 774px;
margin: 0 auto 32px;
width: 100%;
grid-column: 1/3;
}
.gh-post-page--with-sidebar.gh-post-page--featured .gh-post-page__featured-img {
margin-bottom: 0;
}
.gh-post-page__article {
margin-bottom: 40px;
position: relative;
}
.gh-post-page--with-sidebar.gh-post-page--featured .gh-post-page__header {
max-width: 816px;
width: 100%;
padding: 40px 64px 0;
margin: 0 auto 32px;
background-color: var(--color-bg-main);
position: relative;
margin-top: -150px;
}
.gh-post-page--with-sidebar .gh-post-page__featured-img-wrapper {
max-width: 100%;
grid-column: 1/3;
padding: 0;
}
.gh-post-page__featured-img-wrapper {
max-width: 1480px;
width: 100%;
height: 500px;
padding-left: 40px;
padding-right: 40px;
}
.gh-post-page__featured-img--noImage {
width: 100%;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-no-image-bg);
}
.gh-post-page__article-featured--noImage .gh-post-page__header {
margin: 0 auto 32px;
padding: 0;
max-width: 777px;
width: 100%;
}
.gh-post-page--with-sidebar .gh-post-page__header {
max-width: 774px;
width: 100%;
margin: 0 auto 32px;
}
.gh-post-page--with-sidebar .gh-card-image-wrapper {
margin-bottom: 32px;
}
.gh-post-page-aside {
max-width: 300px;
width: 100%;
margin-top: 55%;
margin-bottom: 40px;
}
@media (min-width: 961px) {
.gh-post-page-aside{
display: none;
}
}
.gh-post-page--featured .gh-post-page-aside {
margin-top: 35%;
grid-row: 2/4;
grid-column: 2;
}
.gh-post-page__title {
color: var(--color-title-primary);
font-family: var(--font-family-title);
font-size: var(--font-size-main-post-title);
font-weight: var(--font-weight-title);
line-height: 110%;
margin: 8px 0 0;
}
.gh-post-page__excerpt {
color: var(--color-text);
font-size: var(--font-size-post-page-excerpt);
font-weight: var(--font-weight-post-excerpt);
line-height: var(--line-height-main-post-excerpt);
width: 100%;
margin: 8px 0 0;
}
.gh-post-page__author {
display: flex;
align-items: center;
row-gap: 15px;
color: var(--color-text);
font-size: 14px;
width: 100%;
padding: 20px 0;
border-bottom: 1px solid var(--color-border);
}
.gh-post-page__author--header {
margin-top: 16px;
flex-wrap: wrap;
}
.gh-post-page__author--content {
max-width: 774px;
justify-content: space-between;
}
.gh-post-page__author-date-info {
display: flex;
}
.gh-post-page--with-sidebar .gh-post-page__author--content {
}
.post-read-also {
max-width: 774px;
width: 100%;
margin: 32px auto;
}
.post-read-also .gh-post-page__more-posts {
display: flex;
}
.post-read-also .post {
display: flex;
}
.post-read-also .post__img {
max-width: 230px;
width: 100%;
}
.post-read-also .fpost__content {
margin-left: 0;
padding: 33px 24px;
background-color: rgba(253, 232, 233, 0.3);
max-height: 115px;
}
.post-read-also .post__title {
margin-bottom: 0;
}
.post-read-also .post__heading {
font-weight: 700;
font-size: 10px;
line-height: 120%;
letter-spacing: 0.01em;
color: var(--accent-color);
}
.post-read-also .post__title {
font-weight: 700;
font-size: 16px;
line-height: 140%;
}
.post-read-also .post__img {
max-width: 230px;
width: 100%;
height: 115px;
}
.post-read-also .post .gh-tag-link {
display: none;
}
.post-read-also .post .gh-post-info {
display: none;
}
.post-more-categories {
max-width: 774px;
width: 100%;
margin: 0 auto 32px;
display: flex;
align-items: center;
justify-content: space-between;
}
.post-more-categories .more-tabs-carousel {
margin-bottom: 0;
}
.post-more-categories .more-tabs-wrapper {
display: flex;
}
.post-more-categories .more-tabs {
display: flex;
align-items: center;
justify-content: center;
max-width: 500px;
justify-content: flex-start;
flex-wrap: wrap;
gap: 8px;
font-weight: 500;
font-size: 14px;
line-height: 120%;
color: #38404e;
}
.more-tab a {
padding: 7.5px 15px;
border: 1px solid #dce3ea;
border-radius: 50px;
transition: var(--transition-time);
}
.more-tab a:hover {
background-color: var(--accent-color);
color: #fff;
}
.post-aside {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.post-aside .aside-news {
margin-bottom: 0;
}
.gh-post-page__more .tab-link-container {
margin-bottom: 32px;
}
.gh-post-page__author-data {
display: flex;
align-items: center;
color: var(--color-tag-primary);
font-size: 14px;
line-height: var(--line-height-post-info);
}
.gh-post-page__author-name {
display: flex;
align-items: center;
flex-wrap: wrap;
row-gap: 6px;
}
.gh-post-page__author-name .gh-post-page__author--start {
margin-right: 4px;
}
.gh-post-page__author--start {
margin-left: 4.75px;
}
.gh-post-page__author-name--link {
color: var(--color-main);
transition: border-color var(--transition-time) ease,
color var(--transition-time) ease;
margin-right: 8px;
position: relative;
min-width: fit-content;
font-size: 12px;
}
.gh-post-page__author-name--link:hover {
color: var(--accent-color);
}
.gh-post-page__author-name--link:hover::after {
width: 0;
background-color: var(--accent-color);
}
.gh-post-page--with-sidebar
.gh-post-page-aside
.gh-card-image-wrapper-link--noImage-logo {
height: 14px;
}
.gh-post-page__author-name {
}
.gh-post-page__author svg {
width: 12px;
height: 12px;
margin-left: 6px;
}
.copyToClipboardBtn {
position: relative;
}
.copyToClipboardBtn__success,
.copyToClipboardBtn__fail {
display: none;
position: absolute;
right: 0;
bottom: calc(-100% - 2px);
background-color: #686868;
color: #fff;
font-size: 12px;
font-weight: 600;
width: max-content;
border-radius: var(--border-radius-elements);
padding: 4px 8px;
}
.gh-post-page__share:hover .gh-post-page__share-link.copyToClipboardBtn.copied,
.gh-post-page__share:hover
.gh-post-page__share-link.copyToClipboardBtn.notCopied {
opacity: 1;
}
.copyToClipboardBtn.copied .copyToClipboardBtn__success {
display: block;
}
.copyToClipboardBtn.notCopied svg {
display: none;
}
.copyToClipboardBtn.notCopied .copyToClipboardBtn__fail {
display: block;
}
.gh-post-page__content {
display: flex;
flex-direction: column;
position: relative;
}
.gh-post-page .gh-post-page__content .gh-card-image-wrapper {
max-width: 1045px;
width: 100%;
margin: 0 auto 32px;
}
.gh-post-page__content .kg-btn {
border-radius: var(--border-radius-buttons);
background-color: #686868;
line-height: var(--line-height-button-2);
color: #fff;
font-family: var(--font-family-button);
font-size: var(--font-size-button);
font-weight: var(--font-weight-button);
padding: 10px;
text-decoration: none;
transition: background-color 0.25s ease;
}
.gh-post-page__content .kg-btn:hover {
background-color: #bbb;
}
.gh-post-page__text-wrapper {
width: 100%;
margin: 0 auto;
}
.gh-post-page .gh-post-page__featured-img .gh-card-image-wrapper {
pointer-events: none;
}
.gh-post-page--with-sidebar .gh-post-page__more {
grid-column: 1/3;
margin: 0 auto 40px;
}
.gh-post-page--with-sidebar.gh-post-page--featured .gh-post-page__more {
width: 100%;
}
.gh-post-page .gh-post-page__more {
max-width: 1045px;
width: calc(100% - 80px);
}
.gh-post-page--featured .gh-post-page__more {
max-width: 1400px;
width: calc(100% - 80px);
}
.gh-post-page--with-sidebar .gh-post-page__more {
padding: 0;
max-width: 1290px;
margin: 0 auto;
}
.gh-post-page--with-sidebar .gh-post-page__more-posts .gh-card-image-wrapper {
margin-bottom: 0;
}
.gh-post-page__more-title {
color: var(--color-title-primary);
font-size: 22px;
font-style: normal;
font-weight: var(--font-weight-title);
line-height: 140%;
letter-spacing: var(--letter-spacing-title);
margin-bottom: 12px;
}
.gh-post-page__more-posts {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 32px;
margin-top: 32px;
}
.gh-post-page__more-posts .gh-card-image-wrapper{
max-width: 392px;
width: 100% ;
height: 196px;
}
.gh-post-page__more-posts .gh-featured-post__content {
padding-top: 16px;
}
.gh-post-page__more-posts .gh-featured-post__title {
margin: 2px 0 12px;
font-weight: 700;
font-size: 18px;
line-height: 140%;
}
.gh-avatar {
border-radius: 50%;
height: 34px;
width: 34px;
object-fit: cover;
margin-right: 6px;
}
.gh-post-page-aside__title {
color: var(--color-main);
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 120%;
letter-spacing: -0.02em;
text-transform: uppercase;
margin-bottom: 8px;
}
.gh-post-page-aside__post {
counter-increment: post-counter;
display: flex;
align-items: center;
gap: 8px;
border-top: 1px solid var(--color-border);
padding: 20px 0;
}
.gh-post-page-aside__post article {
border-top: none;
flex-direction: row-reverse;
flex-grow: 1;
}
.gh-post-page-aside__post:last-child {
border-bottom: 1px solid var(--color-border);
}
.gh-post-page-aside__post::before {
content: counter(post-counter) "";
color: var(--accent-color);
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 110%;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
max-width: 14px;
width: 100%;
}
[data-theme="dark"] .gh-post-page-aside__post::before {
color: var(--color-text);
}
.gh-post-page .gh-post-page-cta {
max-width: 1045px;
width: 100%;
margin: 0 auto 40px;
}
.gh-post-page__share {
display: flex;
align-items: center;
width: fit-content;
}
.gh-post-page__share-link {
display: flex;
align-items: center;
justify-content: center;
padding: 0 8px;
transition: opacity var(--transition-time) ease;
}
.gh-post-page__share-link svg {
width: 16px;
height: 16px;
}
.gh-post-page__share-link.copyToClipboardBtn svg {
fill: var(--accent-color);
}
.gh-post-page__share-link.copyToClipboardBtn:hover svg {
fill: var(--accent-color);
opacity: 0.8;
}
[data-theme="dark"] .gh-post-page__share-link svg {
fill: #ededed !important;
}
[data-theme="dark"] .gh-post-page__share-link .whatsapp-icon{
fill: none !important;
stroke: #ededed !important;
}
[data-theme="dark"] .gh-post-page__share-link .telegram-icon{
fill: none !important;
stroke: #ededed !important;
}
[data-theme="dark"] .gh-post-page__share-link.copyToClipboardBtn svg {
fill: var(--accent-color) !important;
}
[data-theme="dark"] .gh-post-page__share-link.copyToClipboardBtn:hover svg {
fill: var(--accent-color) !important;
opacity: 0.8;
}
.gh-post-page__share-link:first-child {
padding: 0 8px 0 0;
}
.gh-post-page__share-link:last-child {
padding: 0 0 0 8px;
}
.gh-post-page__share:hover .gh-post-page__share-link:not(:hover) {
opacity: 0.6;
}
.gh-post-page--wrapper .gh-latest-post {
display: flex;
gap: 8px;
padding-bottom: 0;
}
.gh-post-page--wrapper .gh-latest-post .gh-card-image-wrapper {
width: 90px;
height: 51px;
}
.gh-post-page--wrapper .gh-latest-post .gh-latest-post__content {
max-width: 182px;
width: 100%;
}
.gh-post-page--wrapper .gh-latest-post .gh-latest-post__title {
font-size: 18px;
}
.gh-post-page--with-sidebar .gh-post-page__article {
max-width: 100%;
width: 100%;
}
.gh-post-page--with-sidebar .gh-post-page-cta {
max-width: 1400px;
width: 100%;
margin: 0 auto 40px;
}
.gh-page {
display: flex;
flex-direction: column;
padding-bottom: 104px;
}
.gh-page .gh-post-page__content {
margin-top: 32px;
}
.gh-page.without-title-image {
padding-bottom: 0;
}
.gh-page.without-title-image .gh-post-page__content {
margin-top: 0;
}
.gh-page.without-title-image .kg-card.kg-width-full:first-child {
margin-top: 0;
}
.gh-page.without-title-image .kg-card.kg-width-full:not(.kg-card-hascaption) {
margin-bottom: 0;
}
.gh-page.without-title-image .kg-card.kg-width-full + .kg-card.kg-width-full {
margin-top: 0;
}
.gh-post-page__image-figcaption {
font-weight: 500;
font-size: 13px;
line-height: 160%;
color: #abafb7;
padding-bottom: 21px;
border-bottom: 1px solid #dce3ea;
margin-top: 21px;
}
@media (max-width: 1400px) {
.gh-post-page--wrapper {
padding: 24px 0 80px;
}
}
@media (max-width: 1250px) {
.gh-post-page--featured .gh-post-page__header {
margin: 0 auto 32px;
}
.gh-post-page--with-sidebar.gh-post-page--featured
.gh-post-page__featured-img
.gh-card-image__caption,
.gh-post-page.gh-post-page--featured
.gh-post-page__featured-img
.gh-card-image__caption {
max-width: 100%;
}
.gh-post-page--with-sidebar.gh-post-page--featured .gh-post-page__header {
padding: 40px 40px 0;
}
}
@media (max-width: 1150px) {
.gh-post-page__title {
font-size: 44px;
}
}
@media (max-width: 1100px) {
.gh-post-page__author--content,
.gh-post-page .gh-post-page__featured-img,
.gh-post-page .gh-post-page__more,
.gh-post-page--featured .gh-post-page__more {
width: calc(100% - 40px);
}
.gh-post-page.gh-post-page--featured .gh-post-page__featured-img,
.gh-post-page__featured-img-wrapper {
padding-left: 20px;
padding-right: 20px;
}
.gh-post-page--featured .gh-post-page__header {
width: 100%;
}
.gh-post-page--with-sidebar {
display: block;
}
.gh-post-page--with-sidebar .gh-post-page-aside {
grid-row: unset;
grid-column: 1;
margin: 0 auto 40px;
max-width: 777px;
width: 100%;
}
.gh-post-page--with-sidebar .gh-post-page__featured-img-wrapper,
.gh-post-page--with-sidebar .gh-post-page__featured-img {
grid-column: 1;
}
.gh-post-page--with-sidebar .gh-post-page__more {
grid-column: 1;
}
.gh-post-page--wrapper .gh-latest-post .gh-latest-post__content {
max-width: 100%;
}
.gh-post-page-aside__post {
gap: 12px;
}
.gh-post-page--wrapper .gh-latest-post .gh-card-image-wrapper {
margin-bottom: 0;
}
.gh-post-page--with-sidebar.gh-post-page--featured .gh-post-page__header {
margin: 32px auto;
}
.gh-post-page--with-sidebar.gh-post-page--featured .gh-post-page__header {
padding: 20px 64px 0;
}
.post-mobile-news {
display: flex;
}
.gh-post-page__more {
display: none;
}
.more-post-mobile {
display: block;
}
.more-post-mobile .gh-post-page__more {
display: block;
}
.post-aside .section-banner:nth-of-type(1) {
display: none;
}
.post-aside {
display: flex;
flex-direction: row;
margin-top: 32px;
}
.news-aside {
max-width: 100%;
}
}
@media (max-width: 1000px) {
.gh-post-page__more-posts {
grid-template-columns: repeat(2, 1fr);
grid-row-gap: 24px;
}
}
@media (max-width: 900px) {
.gh-post-page__title {
font-size: 40px;
}
.gh-post-page__author-name--link:hover {
color: var(--color-main);
}
.gh-post-page__author-name--link:hover::after {
width: 100%;
background-color: var(--color-main);
}
.gh-post-page__share:hover .gh-post-page__share-link:not(:hover) {
opacity: 1;
}
.gh-page {
padding-bottom: 64px;
}
.gh-post-page--wrapper {
padding: 24px 0 0;
}
}
@media (max-width: 845px) {
.gh-post-page--featured .gh-post-page__header {
padding: 40px 40px 0;
max-width: 767px;
}
.gh-post-page--with-sidebar.gh-post-page--featured .gh-post-page__header {
padding: 0;
max-width: 687px;
}
}
@media (max-width: 750px) {
.gh-post-page--with-sidebar .gh-card-image-wrapper,
.gh-post-page .gh-card-image-wrapper {
max-width: 100%;
}
.gh-post-page .gh-featured-post--column,
.gh-post-page--with-sidebar .gh-featured-post--column {
flex-direction: column;
}
.gh-post-page__title {
font-size: 36px;
}
.gh-post-page__excerpt {
font-size: 18px;
}
}
@media (max-width: 727px) {
.gh-post-page__featured-img {
width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
max-width: 100vw !important;
}
.gh-post-page--featured .gh-post-page__header {
padding: 20px 20px 0;
}
.gh-post-page--with-sidebar .gh-post-page__header {
padding: 0;
}
.gh-post-page .gh-post-page__header {
padding: 0 20px;
}
.gh-post-page__author--content {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.post-read-also .gh-post-page__more-posts, .post-read-also .post {
flex-direction: column;
}
.post-read-also .post__img {
width: 100%;
max-width: 100%;
height: 80%;
}
.post-read-also .fpost__content {
padding: 21.5px 16px;
}
.post-more-categories {
align-items: center;
gap: 24px;
}
.gh-post-page__image-figcaption {
padding: 0 20px 21px;
}
}
@media (max-width: 550px) {
.gh-post-page__author--content,
.gh-post-page .gh-post-page__featured-img,
.gh-post-page .gh-post-page__more,
.gh-post-page--featured .gh-post-page__more {
width: calc(100% - 20px);
}
.gh-post-page.gh-post-page--featured .gh-post-page__featured-img,
.gh-post-page__featured-img-wrapper {
padding-left: 10px;
padding-right: 10px;
}
.gh-post-page__image-figcaption {
padding: 0 16px 21px;
}
.gh-post-page__title {
font-size: 28px;
}
.gh-post-page__excerpt {
font-size: 16px;
}
.gh-post-page--featured .gh-post-page__header {
padding: 20px 10px 0;
}
.gh-post-page--wrapper .gh-latest-post .gh-latest-post__title {
font-size: 16px;
}
.gh-post-page--with-sidebar.gh-post-page--featured .gh-post-page__header {
padding: 0;
}
.gh-post-page__author-date {
margin-right: 14px;
}
.gh-page {
padding-bottom: 44px;
}
.gh-post-page--wrapper {
padding: 24px 0 0;
}
.gh-post-page .gh-post-page__header {
padding: 0 10px;
}
.post-aside {
flex-direction: column;
}
.post-aside .section-banner:nth-of-type(1) {
display: block;
}
.post-aside .section-banner {
height: 160px;
}
.gh-post-page__more-posts {
grid-template-columns: repeat(1, 1fr);
}
.more-post-mobile .gh-post-page .gh-featured-post--column, .gh-post-page--with-sidebar .gh-featured-post--column {
display: flex;
flex-direction: row-reverse;
column-gap: 12px;
max-height: 120px;
}
.more-post-mobile .gh-post-page__more-posts .gh-featured-post__content{
padding-top: 0;
}
.more-post-mobile .gh-featured-post__content{
max-width: 70%;
width: 100%;
}
.more-post-mobile .gh-card-image-wrapper{
text-align: center;
max-width: 140px;
}
.more-post-mobile .gh-card-image-wrapper img {
width: 100%;
height: 70px;
display: inline-block;
margin-top: 12px;
}
.more-post-mobile .gh-featured-post__title {
font-size: 15px;
line-height: 130%;
}
.more-post-mobile .gh-post-page__more-posts {
grid-row-gap: 32px;
}
.gh-post-info__date svg {
display: none;
}
.gh-post-info__date .gh-post-page__author--start {
display: none;
}
}
@media (max-width: 500px) {
.gh-post-page .gh-post-page__featured-img,
.gh-post-page.gh-post-page--featured .gh-post-page__featured-img {
}
.gh-post-page--with-sidebar .gh-post-page__featured-img{
}
}
@media (max-width: 440px) {
.gh-post-page__more-posts {
grid-template-columns: 1fr;
}
}
@media (max-width: 400px) {
.post-read-also .post__img {
height: 170px;
}
}
@media (max-width: 375px) {
}
.gh-burger-btn {
cursor: pointer;
align-items: center;
justify-content: center;
}
.gh-burger-btn svg path {
fill: var(--color-main);
transition: fill var(--transition-time) ease;
}
.gh-burger-btn:hover svg path { fill: var(--ghost-accent-color); }
[data-theme="dark"] .gh-burger-btn svg path { fill: #000; }
.gh-burger-btn--close { display: flex; }
.gh-mobile-overlay {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
z-index: 10;
background-color: rgba(22, 22, 22, 0.9);
}
.gh-mobile-overlay--animation-open { animation: overlayFadeIn 0.4s ease-out; }
.gh-mobile-overlay--animation-close { animation: overlayFadeOut 0.4s ease-out; }
.gh-mobile-overlay--close { display: none; }
.gh-mobile-overlay--open { display: block; opacity: 1; }
.gh-mobile-menu {
position: fixed;
top: 0;
left: -100%;
max-width: 255px;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 15;
background-color: #fff;
}
.gh-mobile-menu--open { animation: openMenu 0.4s ease; left: 0; }
.gh-mobile-menu--close { animation: closeMenu 0.4s ease; left: -100%; }
.gh-post-page__content {
font-family: var(--font-family-post-excerpt);
font-weight: var(--font-weight-post-excerpt);
font-size: 18px;
line-height: 160%;
}
.gh-post-page__content > h1 { font-size: 46px; }
.gh-post-page__content > h2 { font-size: 36px; }
.gh-post-page__content > h3 { font-size: 32px; }
.gh-post-page__content > h4 { font-size: 24px; }
.gh-post-page__content > h5 { font-size: 20px; }
.gh-post-page__content > h6 { font-size: 16px; }
.gh-post-page__content > h1,
.gh-post-page__content > h2,
.gh-post-page__content > h3,
.gh-post-page__content > h4,
.gh-post-page__content > h5,
.gh-post-page__content > h6 {
margin: 16px auto;
max-width: 777px;
width: 100%;
padding-right: 40px;
}
.gh-post-page__content p {
margin: 0 auto 16px;
max-width: 774px;
width: 100%;
}
.gh-post-page__content a {
color: var(--accent-color);
margin: 0 auto;
max-width: 777px;
}
.gh-post-page__content ul,
.gh-post-page__content ol {
margin: 0 auto 16px;
max-width: 777px;
width: 100%;
}
.gh-post-page__content ul { position: relative; }
.gh-post-page__content ol li {
list-style: decimal;
list-style-position: inside;
margin-left: 12px;
}
.gh-post-page__content ul li { list-style: none; margin-left: 36px; }
.gh-post-page__content ul li::before {
content: "\25A0";
color: var(--accent-color);
display: inline-block;
font-size: 8px;
position: absolute;
left: 16px;
}
.gh-post-page__content > blockquote {
margin: 0 auto 16px;
max-width: 774px;
width: 100%;
border-left: 2px solid var(--accent-color);
padding: 0 0 0 20px !important;
}
.gh-post-page__content > blockquote > p { font-size: 20px; padding: 0; }
.gh-post-page__content > blockquote > * { margin: 0; }
.gh-post-page__content hr {
height: 1px;
margin: 16px auto;
max-width: 774px;
width: 100%;
background-color: var(--color-border);
}
@media (max-width: 550px) {
.gh-post-page__content { font-size: 17px; }
.gh-post-page__content > h1,
.gh-post-page__content > h2,
.gh-post-page__content > h3,
.gh-post-page__content > h4,
.gh-post-page__content > h5,
.gh-post-page__content > h6 { padding-right: 0; }
}
html,
.gh-viewport {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.gh-main {
flex: 1 0 auto;
display: flex;
flex-direction: column;
background-color: var(--color-bg-main);
transition: background-color 0.3s ease;
}
.gh-container {
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding-left: 40px;
padding-right: 40px;
}
.gh-container--section:not(:first-of-type) {
margin-top: 40px;
}
.gh-section--theme-light-gray {
background-color: var(--color-bg-light-gray);
padding-top: 24px;
}
.gh-section--theme-light-gray .gh-hero-wrapper--grid,
.gh-section--theme-light-gray .gh-hero-wrapper,
.gh-section--theme-light-gray .gh-hero-wrapper--featured-type-8 {
border-bottom: none;
}
.gh-section--theme-light-gray
.gh-hero-wrapper--featured-type-17-1
.gh-hero-ol-wrapper__li:nth-of-type(n + 6) {
border-bottom: none;
}
.gh-section--theme-light-gray
.gh-hero-wrapper--featured-type-18-1
.gh-hero-ol-wrapper__li:nth-of-type(n + 9),
.gh-section--theme-light-gray
.gh-hero-wrapper--featured-type-18-2
.gh-hero-ol-wrapper__li:nth-of-type(n + 9) {
border-bottom: none;
}
.gh-section--theme-light-gray .gh-featured-post--wrapper:nth-of-type(n + 6) {
border-bottom: none;
}
.gh-section--theme-light-gray .gh-hero-inner-wrapper--featured-type-17-2 {
padding-bottom: 0;
}
.gh-container--section.gh-section--theme-light-gray
+ .gh-container--section.gh-section--theme-black,
.gh-container--section.gh-section--theme-black
+ .gh-container--section.gh-section--theme-light-gray,
.gh-container--section.gh-section--theme-black
+ .gh-container--section.gh-section--theme-black,
.gh-container--section.gh-section--theme-light-gray
+ .gh-container--section.gh-section--theme-light-gray {
margin-top: 0;
}
.gh-lock-scroll {
overflow: hidden;
height: 100vh;
}
.gh-card-title-link,
.gh-site-logo {
will-change: opacity;
transition: opacity var(--transition-time) ease;
}
.gh-card-image-wrapper:hover .gh-card-image,
.gh-card-title-link:hover,
.gh-site-logo:hover {
opacity: 0.8;
}
.gh-card-image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: opacity var(--transition-time) ease;
will-change: opacity;
}
.gh-card-image-wrapper {
position: relative;
}
.gh-card-image-wrapper img {
border-radius: var(--border-radius-images);
}
.gh-card-image-wrapper::before {
float: left;
padding-top: 56.67%;
content: "";
}
.gh-card-image-wrapper::after {
display: block;
content: "";
clear: both;
}
.gh-card-image-wrapper-link--noImage {
background-color: var(--no-image-card-plug-bg-color);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease, color 0.3s ease;
border-radius: var(--border-radius-images);
}
.gh-card-image-wrapper-link--noImage:hover {
background-color: var(--no-image-card-plug-bg-color--hover);
}
.gh-card-image-wrapper-link--noImage-logo {
height: 30px;
}
.gh-card-image-wrapper-link--noImage-name {
font-family: var(--font-family-section-title);
font-size: var(--font-size-post-title);
font-weight: var(--font-weight-section-title);
line-height: var(--line-height-post-title);
}
.gh-posts--not-enought {
font-size: var(--font-size-main-post-excerpt);
font-weight: 700;
line-height: var(--line-height-main-post-excerpt);
color: red;
}
.gh-accent-button {
transition: color var(--transition-time) ease;
animation: fadeInAnimation 0.3s ease;
}
.gh-btns-font-color-dark .gh-accent-button {
color: #000;
}
.gh-btns-font-color-light .gh-accent-button {
color: #fff;
}
#ghost-comments-root {
width: calc(100% - 40px);
max-width: 777px;
margin: 0 auto 16px;
}
.gh-post-page--with-sidebar #ghost-comments-root {
width: 100%;
max-width: 100%;
}
@media (max-width: 1100px) {
.gh-container {
padding-left: 20px;
padding-right: 20px;
}
.gh-card-image-wrapper-link--noImage-name {
font-size: 22px;
}
}
@media (max-width: 1024px) {
}
@media (max-width: 950px) {
.gh-card-image-wrapper-link--noImage-name {
font-size: 20px;
}
}
@media (max-width: 900px) {
.gh-card-image-wrapper:hover .gh-card-image,
.gh-card-title-link:hover,
.gh-site-logo:hover {
opacity: 1;
}
}
@media (max-width: 650px) {
.gh-site-logo-img,
.gh-site-logo-img-dark-mode {
height: 30px;
}
}
@media (max-width: 550px) {
.gh-container {
padding-left: 1rem;
padding-right: 1rem;
}
.gh-card-image-wrapper-link--noImage-name {
font-size: 18px;
}
#ghost-comments-root {
width: calc(100% - 20px);
}
}
@media (max-width: 370px) {
.gh-site-logo-img,
.gh-site-logo-img-dark-mode {
height: 24px;
}
}
.gh-tag-link {
color: #d71920 !important;
}
.gh-post-info__date {
color: #585858;
opacity: 1;
}
.post-index {
color: #d71920;
}
.tab.active,
.tab-link,
.accent-button,
.post-page-cta__btn {
color: #fff;
background-color: #d71920;
}