.vk-posts-section {
width: 100%;
box-sizing: border-box;
}
.vk-section-head {
max-width: var(--vk-wrapper-max-width, 1280px);
margin: 0 auto;
padding: 0 20px;
text-align: center;
box-sizing: border-box;
}
.vk-section-title {
color: var(--vk-text-color, #E0E6ED);
font-size: clamp(24px, 3vw, 36px);
margin: 0 0 8px 0;
line-height: 1.2;
}
.vk-section-subtitle {
color: var(--vk-text-color, #E0E6ED);
opacity: 0.75;
font-size: var(--vk-text-size, 15px);
margin: 0 0 24px 0;
line-height: 1.5;
}
.vk-slider-wrapper {
--vk-wrapper-padding: 0 20px;
--vk-wrapper-max-width: 1280px;
--vk-gap: 20px;
--vk-card-basis: calc(33.333% - 14px);
--vk-card-min-width: 300px;
--vk-grid-cols: 3;
--vk-grid-cols-tablet: 2;
--vk-grid-cols-mobile: 1;
--vk-card-bg: rgba(255, 255, 255, 0.05);
--vk-card-border: rgba(255, 255, 255, 0.1);
--vk-card-radius: 24px;
--vk-img-height: 220px;
--vk-text-color: #E0E6ED;
--vk-text-size: 15px;
--vk-btn-bg: #3498db;
--vk-btn-hover-bg: #005ce6;
--vk-btn-text-color: #FFFFFF;
--vk-btn-radius: 12px;
--vk-progress-bg: rgba(255, 255, 255, 0.1);
--vk-progress-color: #0077FF;
padding: var(--vk-wrapper-padding);
width: 100%;
overflow: hidden;
box-sizing: border-box;
max-width: var(--vk-wrapper-max-width);
margin: 0 auto;
} .vk-slider-track {
display: flex;
gap: var(--vk-gap);
overflow-x: auto;
scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 20px;
cursor: grab;
} .vk-slider-track::-webkit-scrollbar {
display: none;
}
.vk-slider-track:active {
cursor: grabbing;
} .vk-card {
flex: 0 0 var(--vk-card-basis);
min-width: var(--vk-card-min-width);
background: var(--vk-card-bg);
border: 1px solid var(--vk-card-border);
border-radius: var(--vk-card-radius);
scroll-snap-align: start; display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 0.3s ease;
}
.vk-card:hover {
transform: translateY(-5px);
}
.vk-card-img {
display: block;
position: relative;
width: 100%;
height: var(--vk-img-height);
background-size: cover;
background-position: center;
}
.vk-play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.6);
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
padding-left: 4px; box-sizing: border-box;
backdrop-filter: blur(4px);
}
.vk-card-content {
padding: 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: flex-end;
}
.vk-repost-label {
display: inline-block;
margin-bottom: 10px;
font-size: 13px;
color: var(--vk-text-color);
opacity: 0.7;
}
.vk-card-title {
color: var(--vk-text-color);
font-size: calc(var(--vk-text-size) + 3px);
line-height: 1.3;
margin: 0 0 10px 0;
font-weight: 700;
}
.vk-card-text {
color: var(--vk-text-color);
font-size: var(--vk-text-size);
line-height: 1.5;
margin: 0 0 20px 0;
flex-grow: 1;
font-family: sans-serif;
}
.vk-card-btn {
display: block;
text-align: center;
padding: 12px;
background: var(--vk-btn-bg);
color: var(--vk-btn-text-color);
text-decoration: none;
border-radius: var(--vk-btn-radius);
font-weight: 600;
transition: background 0.2s;
}
.vk-card-btn:hover {
background: var(--vk-btn-hover-bg);
} @media (max-width: 992px) {
.vk-card {
flex: 0 0 calc(50% - (var(--vk-gap) / 2)); }
}
@media (max-width: 650px) {
.vk-card {
flex: 0 0 85%; }
} .vk-slider-wrapper.vk-grid {
display: grid;
grid-template-columns: repeat(var(--vk-grid-cols, 3), 1fr);
gap: var(--vk-gap);
overflow: visible; } .vk-slider-wrapper.vk-grid .vk-card {
flex: initial;
min-width: 0;
} .vk-slider-wrapper.vk-grid .vk-card.is-hidden-grid {
display: none;
}
@media (max-width: 992px) {
.vk-slider-wrapper.vk-grid {
grid-template-columns: repeat(var(--vk-grid-cols-tablet, 2), 1fr);
}
}
@media (max-width: 650px) {
.vk-slider-wrapper.vk-grid {
grid-template-columns: repeat(var(--vk-grid-cols-mobile, 1), 1fr);
}
} .vk-load-more-wrap {
display: flex;
justify-content: center;
margin-top: 24px;
}
.vk-load-more {
padding: 12px 28px;
background: var(--vk-btn-bg, #3498db);
color: var(--vk-btn-text-color, #fff);
border: none;
border-radius: var(--vk-btn-radius, 12px);
font-weight: 600;
font-size: var(--vk-text-size, 15px);
cursor: pointer;
transition: background 0.2s;
}
.vk-load-more:hover {
background: var(--vk-btn-hover-bg, #005ce6);
}
.vk-load-more[hidden] {
display: none;
} .vk-slider-progress {
width: 100%;
height: 8px;
background: var(--vk-progress-bg);
border-radius: 4px;
margin-top: 25px;
position: relative;
cursor: pointer;
touch-action: none; transition: height 0.15s ease;
}
.vk-slider-progress:hover,
.vk-slider-progress.is-seeking {
height: 10px;
}
.vk-slider-progress-bar {
height: 100%;
width: 0%; background: var(--vk-progress-color);
border-radius: 4px;
transition: width 0.1s ease-out;
position: relative;
pointer-events: none; } .vk-slider-progress-bar::after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--vk-progress-color);
box-shadow: 0 0 0 4px var(--vk-progress-bg);
transform: translate(50%, -50%) scale(0);
transition: transform 0.15s ease;
}
.vk-slider-progress:hover .vk-slider-progress-bar::after,
.vk-slider-progress.is-seeking .vk-slider-progress-bar::after {
transform: translate(50%, -50%) scale(1);
} .vk-slider-progress.is-seeking .vk-slider-progress-bar {
transition: none;
} .vk-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.vk-modal.is-active {
display: flex;
opacity: 1;
}
.vk-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 20, 25, 0.9);
backdrop-filter: blur(5px);
}
.vk-modal-close {
position: absolute;
top: 20px;
right: 30px;
color: #fff;
font-size: 40px;
font-weight: bold;
cursor: pointer;
z-index: 10000;
transition: color 0.2s;
}
.vk-modal-close:hover {
color: #0077FF;
}
.vk-modal-content {
position: relative;
z-index: 10000;
width: 90%;
max-width: 1000px;
max-height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}
.vk-modal-content img {
max-width: 100%;
max-height: 90vh;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.vk-modal-content iframe {
width: 100%;
aspect-ratio: 16 / 9;
border: none;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}