/*
* 07. CSS Single — extracted inline CSS layer
* Optimized: CSS Variables, Utility Classes, Consolidated Media Queries, Structured Sections
*
*/
/* ==========================================================================
SECTION 1: CSS VARIABLES & CUSTOM PROPERTIES
========================================================================== */
:root {
/* Colors - Primary */
--gk-color-primary-dark: #274c5a;
--gk-color-primary-darker: #0a4258;
--gk-color-primary-deepest: #083d56;
/* Colors - Accent */
--gk-color-accent-green: #0e7a4f;
--gk-color-accent-light: #71d865;
/* Colors - Error/Discount */
--gk-color-error: #ff5e57;
/* Colors - Text */
--gk-color-text-muted: #5f7480;
--gk-color-text-secondary: #59707b;
--gk-color-text-tertiary: #5d727d;
/* Colors - Background */
--gk-color-bg-light: #eef3f0;
--gk-color-bg-white: #ffffff;
--gk-color-bg-subtle: #f7faf8;
/* Colors - Borders */
--gk-color-border-light: #dce5df;
--gk-color-border-medium: #dbe4de;
/* Border Radius */
--gk-radius-full: 999px;
--gk-radius-lg: 30px;
--gk-radius-md: 22px;
--gk-radius-sm: 16px;
/* Shadows */
--gk-shadow-sm: 0 8px 18px rgba(10, 40, 52, 0.08);
--gk-shadow-md: 0 16px 28px rgba(10, 40, 52, 0.06);
--gk-shadow-lg: 0 18px 44px rgba(17, 56, 74, 0.08);
}
/* ==========================================================================
SECTION 2: BASE & RESET STYLES
========================================================================== */
body.single-courses .ast-breadcrumbs,
body.single-courses .yoast-breadcrumb,
body.single-courses .rank-math-breadcrumb,
body.single-courses .breadcrumbs {
display: none !important;
}
#gk-v4-single-portal {
display: none !important;
}
.gk-v4-course-single {
margin: 0 0 42px;
}
.gk-v4-course-single__breadcrumbs-wrap {
margin: 0 0 18px;
}
.gk-v4-course-single__content > *:first-child {
margin-top: 0;
}
.gk-v4-course-single__related {
margin-top: 40px;
}
.gk-v4-course-single .gk-v4-breadcrumbs {
margin: 0;
}
.gk-v4-course-single .gk-v4-breadcrumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 10px;
margin: 0;
padding: 0;
list-style: none;
}
.gk-v4-course-single .gk-v4-breadcrumbs__item {
display: inline-flex;
align-items: center;
color: var(--gk-color-text-muted);
font-size: 14px;
line-height: 1.45;
}
.gk-v4-course-single .gk-v4-breadcrumbs__item + .gk-v4-breadcrumbs__item::before {
content: '→';
margin-right: 10px;
color: #7a8d97;
}
.gk-v4-course-single .gk-v4-breadcrumbs__item a {
color: var(--gk-color-primary-dark);
text-decoration: none;
}
.gk-v4-course-single .gk-v4-breadcrumbs__item a:hover {
color: var(--gk-color-accent-green);
text-decoration: underline;
}
.gk-v4-course-single .gk-v4-breadcrumbs__item.is-current {
color: var(--gk-color-primary-dark);
font-weight: 600;
}
.gk-v4-course-single .gk-v4-stage2-section__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin: 0 0 18px;
}
.gk-v4-course-single .gk-v4-stage2-section__heading {
display: grid;
gap: 6px;
min-width: 0;
}
.gk-v4-course-single .gk-v4-stage2-section__title {
margin: 0;
color: var(--gk-color-primary-darker);
font-size: clamp(24px, 2vw, 30px);
line-height: 1.1;
letter-spacing: -0.02em;
}
.gk-v4-course-single .gk-v4-stage2-section__title a {
color: inherit;
text-decoration: none;
}
.gk-v4-course-single .gk-v4-stage2-section__title a:hover {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.12em;
}
.gk-v4-course-single .gk-v4-stage2-section__count {
color: var(--gk-color-text-muted);
font-size: 15px;
line-height: 1.4;
}
.gk-v4-course-single .gk-v4-stage2-section__nav {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.gk-v4-course-single .gk-v4-stage2-section__nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border: 1px solid #d6dfd8;
border-radius: 999px;
background: var(--gk-color-bg-white);
color: #073f58;
font-size: 22px;
font-weight: 700;
line-height: 1;
box-shadow: 0 8px 18px rgba(10, 40, 52, 0.08);
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.gk-v4-course-single .gk-v4-stage2-section__nav-btn:hover:not(:disabled) {
transform: translateY(-1px);
border-color: #9fdf89;
color: var(--gk-color-accent-green);
box-shadow: 0 12px 22px rgba(10, 40, 52, 0.12);
}
.gk-v4-course-single .gk-v4-stage2-section__nav-btn:disabled,
.gk-v4-course-single .gk-v4-stage2-section__nav-btn[aria-disabled="true"] {
opacity: 0.38;
box-shadow: none;
cursor: default;
}
.gk-v4-course-single .gk-v4-stage2-section__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 72px) / 4);
gap: 24px;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
padding: 4px 4px 6px;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
}
.gk-v4-course-single .gk-v4-stage2-section__track::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.gk-v4-course-single .gk-v4-stage2-section__track > * {
min-width: 0;
}
.gk-v4-course-single .gk-v4-stage2-card {
display: flex;
flex-direction: column;
min-height: 100%;
background: var(--gk-color-bg-white);
border: 1px solid var(--gk-color-border-light);
border-radius: 22px;
overflow: hidden;
box-shadow: 0 16px 28px rgba(10, 40, 52, 0.06);
}
.gk-v4-course-single .gk-v4-stage2-card__image-link {
position: relative;
display: block;
aspect-ratio: 1.34 / 1;
background: #eef3ef;
overflow: hidden;
}
.gk-v4-course-single .gk-v4-stage2-card__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.gk-v4-course-single .gk-v4-stage2-card__image-placeholder {
display: grid;
place-items: center;
width: 100%;
height: 100%;
font-size: 58px;
font-weight: 700;
color: var(--gk-color-primary-darker);
background: linear-gradient(135deg, #e8f1ec, #dce8e2);
}
.gk-v4-course-single .gk-v4-stage2-card__discount {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 11px;
border: 2px solid var(--gk-color-error);
border-radius: 999px;
background: var(--gk-color-bg-white);
color: var(--gk-color-error);
font-size: 13px;
font-weight: 700;
line-height: 1;
}
.gk-v4-course-single .gk-v4-stage2-card__body {
display: grid;
gap: 10px;
align-content: start;
padding: 14px 16px 16px;
min-height: 146px;
}
.gk-v4-course-single .gk-v4-stage2-card__title {
display: -webkit-box;
min-height: 4.14em;
margin: 0;
overflow: hidden;
color: #102d38;
font-size: 16px;
font-weight: 700;
line-height: 1.38;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.gk-v4-course-single .gk-v4-stage2-card__title a {
color: inherit;
text-decoration: none;
}
.gk-v4-course-single .gk-v4-stage2-card__title a:hover {
color: var(--gk-color-accent-green);
}
.gk-v4-course-single .gk-v4-stage2-card__school {
display: flex;
align-items: center;
min-height: 24px;
color: #59707b;
font-size: 12px;
line-height: 1.45;
font-weight: 600;
}
.gk-v4-course-single .gk-v4-badge--platform {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
max-width: 100%;
min-height: 24px;
padding: 4px 10px 4px 5px;
border: 1px solid #d7e2e7;
border-radius: 999px;
background: var(--gk-color-bg-white);
color: #41535d;
font-size: 11px;
line-height: 1.2;
font-weight: 700;
text-decoration: none;
box-sizing: border-box;
}
.gk-v4-course-single .gk-v4-badge__logo,
.gk-v4-course-single .gk-v4-badge__mark {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 22px;
height: 22px;
border-radius: 999px;
background: #e8f0f4;
box-sizing: border-box;
}
.gk-v4-course-single .gk-v4-badge__logo {
object-fit: contain;
}
.gk-v4-course-single .gk-v4-badge__mark {
color: #133243;
font-size: 9px;
line-height: 1;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.gk-v4-course-single .gk-v4-badge--platform::before {
display: none;
}
.gk-v4-course-single .gk-v4-badge--platform .gk-v4-badge__label {
display: block;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gk-v4-course-single .gk-v4-badge--platform.is-platform-skillbox .gk-v4-badge__mark {
background: #111827;
color: #ffde3b;
}
.gk-v4-course-single .gk-v4-badge--platform.is-platform-netology .gk-v4-badge__mark {
background: #2254f4;
color: var(--gk-color-bg-white);
}
.gk-v4-course-single .gk-v4-badge--platform.is-platform-eduson .gk-v4-badge__mark {
background: #e6f1ff;
color: #2563eb;
}
.gk-v4-course-single .gk-v4-badge--platform.is-platform-skillfactory .gk-v4-badge__mark {
background: #fff2e8;
color: #d97706;
}
.gk-v4-course-single .gk-v4-badge--platform.is-platform-geekbrains .gk-v4-badge__mark,
.gk-v4-course-single .gk-v4-badge--platform.is-platform-geekschool .gk-v4-badge__mark {
background: #f3e8ff;
color: #7c3aed;
}
.gk-v4-course-single .gk-v4-badge--platform.is-platform-yandex .gk-v4-badge__mark {
background: #ffebe7;
color: #e5482d;
}
.gk-v4-course-single .gk-v4-badge--platform.is-platform-otus .gk-v4-badge__mark {
background: #eefcf4;
color: #16a34a;
}
.gk-v4-course-single .gk-v4-badge--platform.is-platform-foxford .gk-v4-badge__mark {
background: #eaf6ff;
color: #0f77d1;
}
.gk-v4-course-single .gk-v4-stage2-card__pricebox {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 10px;
margin-top: auto;
}
.gk-v4-course-single .gk-v4-stage2-card__price {
color: #0f2030;
font-size: 18px;
line-height: 1.1;
font-weight: 800;
}
.gk-v4-course-single .gk-v4-stage2-card__old-price {
color: #80909a;
font-size: 13px;
line-height: 1.3;
text-decoration: line-through;
}
html {
background: var(--gk-color-bg-light);
}
body.gk-v4-body--single {
margin: 0;
background: var(--gk-color-bg-light);
color: #173b4a;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
}
/* ==========================================================================
SECTION 3: UTILITY CLASSES
========================================================================== */
/* Flex Center Utility */
.gk-v4-flex-center {
display: flex;
align-items: center;
justify-content: center;
}
/* List Reset Utility */
.gk-v4-list-reset {
list-style: none;
margin: 0;
padding: 0;
}
/* Text Truncate Utility */
.gk-v4-text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Rounded Full Utility */
.gk-v4-rounded-full {
border-radius: var(--gk-radius-full);
}
/* ==========================================================================
SECTION 4: SINGLE PAGE LAYOUT
========================================================================== */
.gk-v4-single-page {
min-height: 100vh;
background: var(--gk-color-bg-light);
}
.gk-v4-single-page .gk-v4-shell {
max-width: 1280px;
margin: 0 auto;
padding: 0 8px 36px;
z-index: 40;
}
.gk-v4-single-main {
max-width: 1280px;
margin: 0 auto;
padding: 20px 24px 72px;
display: grid;
gap: 28px;
position: relative;
z-index: 1;
}
.gk-v4-single-main .gk-v4-breadcrumbs {
margin: 0;
}
.gk-v4-single-main .gk-v4-breadcrumbs__list {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
margin: 0;
padding: 0;
list-style: none;
}
.gk-v4-single-main .gk-v4-breadcrumbs__item {
display: inline-flex;
align-items: center;
color: var(--gk-color-text-muted);
font-size: 14px;
line-height: 1.45;
}
.gk-v4-single-main .gk-v4-breadcrumbs__item + .gk-v4-breadcrumbs__item::before {
content: '→';
margin-right: 10px;
color: #7a8d97;
}
.gk-v4-single-main .gk-v4-breadcrumbs__item a {
color: var(--gk-color-primary-dark);
text-decoration: none;
}
.gk-v4-single-main .gk-v4-breadcrumbs__item.is-current {
color: var(--gk-color-primary-dark);
font-weight: 600;
}
.gk-v4-single-hero,
.gk-v4-single-article {
background: var(--gk-color-bg-white);
border: 1px solid var(--gk-color-border-medium);
border-radius: 30px;
box-shadow: 0 18px 44px rgba(17, 56, 74, 0.08);
}
.gk-v4-single-hero {
padding: 30px;
display: grid;
gap: 24px;
}
.gk-v4-single-hero__grid {
display: grid;
grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
gap: 30px;
align-items: start;
}
.gk-v4-single-hero__media {
display: grid;
gap: 14px;
align-content: start;
}
.gk-v4-single-hero__image-wrap {
position: relative;
overflow: hidden;
border-radius: 26px;
background: #f4f7f6;
border: 1px solid #e2e9e4;
aspect-ratio: 1 / 1;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.gk-v4-single-hero__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gk-v4-single-hero__image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #0d4d67;
font-size: 88px;
font-weight: 700;
letter-spacing: -0.04em;
}
.gk-v4-single-hero__platform {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gk-v4-single-hero__ad-marking {
color: #6c7f88;
font-size: 9px;
line-height: 1.55;
}
.gk-v4-single-hero__content {
display: grid;
gap: 18px;
min-width: 0;
}
.gk-v4-single-hero__title {
margin: 0;
color: var(--gk-color-primary-deepest);
font-size: clamp(30px, 3vw, 46px);
line-height: 1.06;
letter-spacing: -0.03em;
}
.gk-v4-single-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gk-v4-single-hero__meta-item {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 14px;
border: 1px solid #d8e2dc;
border-radius: 999px;
background: var(--gk-color-bg-subtle);
color: var(--gk-color-primary-dark);
font-size: 13px;
font-weight: 600;
line-height: 1;
}
.gk-v4-single-hero__summary {
margin: 0;
max-width: 760px;
color: #5d727d;
font-size: 16px;
line-height: 1.72;
}
.gk-v4-single-hero__prices {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 10px 16px;
}
.gk-v4-single-hero__price {
color: #0b2130;
font-size: clamp(28px, 2.3vw, 38px);
line-height: 1;
font-weight: 800;
letter-spacing: -0.03em;
}
.gk-v4-single-hero__old-price {
color: #8a98a1;
font-size: 16px;
line-height: 1.2;
text-decoration: line-through;
}
.gk-v4-single-hero__credit,
.gk-v4-single-hero__duration {
color: #54717d;
font-size: 14px;
line-height: 1.5;
}
.gk-v4-single-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.gk-v4-single-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 22px;
border-radius: 16px;
border: 1px solid transparent;
text-decoration: none;
font-size: 15px;
font-weight: 700;
line-height: 1;
transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.gk-v4-single-btn:hover {
transform: translateY(-1px);
}
.gk-v4-single-btn--primary {
background: #71d865;
border-color: #71d865;
color: var(--gk-color-primary-deepest);
box-shadow: 0 16px 30px rgba(113, 216, 101, 0.24);
}
.gk-v4-single-btn--secondary {
background: var(--gk-color-bg-subtle);
border-color: var(--gk-color-border-medium);
color: var(--gk-color-primary-dark);
}
.gk-v4-single-article {
padding: 30px;
}
.gk-v4-single-article__title {
margin: 0 0 16px;
color: var(--gk-color-primary-deepest);
font-size: clamp(24px, 2vw, 32px);
line-height: 1.12;
letter-spacing: -0.02em;
}
.gk-v4-single-article__content {
color: #324f5d;
font-size: 16px;
line-height: 1.78;
}
.gk-v4-single-article__content > *:first-child {
margin-top: 0;
}
.gk-v4-single-article__content > *:last-child {
margin-bottom: 0;
}
.gk-v4-single-main .gk-v4-course-single__related {
margin: 0;
padding: 28px 30px 30px;
background: var(--gk-color-bg-white);
border: 1px solid var(--gk-color-border-medium);
border-radius: 30px;
box-shadow: 0 18px 44px rgba(17, 56, 74, 0.08);
overflow: hidden;
min-width: 0;
}
.gk-v4-single-main .gk-v4-stage2-section {
display: grid;
gap: 18px;
min-width: 0;
}
.gk-v4-single-main .gk-v4-stage2-section__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
margin: 0;
}
.gk-v4-single-main .gk-v4-stage2-section__heading {
display: grid;
gap: 6px;
min-width: 0;
}
.gk-v4-single-main .gk-v4-stage2-section__title {
margin: 0;
color: var(--gk-color-primary-deepest);
font-size: clamp(24px, 2vw, 30px);
line-height: 1.1;
letter-spacing: -0.02em;
}
.gk-v4-single-main .gk-v4-stage2-section__title a {
color: inherit;
text-decoration: none;
}
.gk-v4-single-main .gk-v4-stage2-section__title a:hover {
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 0.12em;
}
.gk-v4-single-main .gk-v4-stage2-section__count {
color: var(--gk-color-text-muted);
font-size: 15px;
line-height: 1.4;
}
.gk-v4-single-main .gk-v4-stage2-section__nav {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.gk-v4-single-main .gk-v4-stage2-section__nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border: 1px solid #d6dfd8;
border-radius: 999px;
background: var(--gk-color-bg-white);
color: #073f58;
font-size: 22px;
font-weight: 700;
line-height: 1;
box-shadow: 0 8px 18px rgba(10, 40, 52, 0.08);
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.gk-v4-single-main .gk-v4-stage2-section__nav-btn:hover:not(:disabled) {
transform: translateY(-1px);
border-color: #9fdf89;
color: var(--gk-color-accent-green);
box-shadow: 0 12px 22px rgba(10, 40, 52, 0.12);
}
.gk-v4-single-main .gk-v4-stage2-section__nav-btn:disabled,
.gk-v4-single-main .gk-v4-stage2-section__nav-btn[aria-disabled="true"] {
opacity: 0.38;
box-shadow: none;
cursor: default;
}
.gk-v4-single-main .gk-v4-stage2-section__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 72px) / 4);
gap: 24px;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
padding: 4px 4px 6px;
scroll-behavior: auto;
scroll-padding-inline: 4px;
scrollbar-width: none;
-ms-overflow-style: none;
touch-action: pan-x;
min-width: 0;
}
.gk-v4-single-main .gk-v4-stage2-section__track::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.gk-v4-single-main .gk-v4-stage2-section__track > * {
min-width: 0;
}
.gk-v4-single-main .gk-v4-stage2-card {
display: flex;
flex-direction: column;
min-height: 100%;
background: var(--gk-color-bg-white);
border: 1px solid var(--gk-color-border-light);
border-radius: 22px;
overflow: hidden;
box-shadow: 0 16px 28px rgba(10, 40, 52, 0.06);
}
.gk-v4-single-main .gk-v4-stage2-card__image-link {
position: relative;
display: block;
aspect-ratio: 1.34 / 1;
background: #eef3ef;
overflow: hidden;
}
.gk-v4-single-main .gk-v4-stage2-card__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.gk-v4-single-main .gk-v4-stage2-card__image-placeholder {
display: grid;
place-items: center;
width: 100%;
height: 100%;
font-size: 58px;
font-weight: 700;
color: var(--gk-color-primary-darker);
background: linear-gradient(135deg, #e8f1ec, #dce8e2);
}
.gk-v4-single-main .gk-v4-stage2-card__discount {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 11px;
border: 2px solid var(--gk-color-error);
border-radius: 999px;
background: var(--gk-color-bg-white);
color: var(--gk-color-error);
font-size: 13px;
font-weight: 700;
line-height: 1;
}
.gk-v4-single-main .gk-v4-stage2-card__body {
display: grid;
gap: 10px;
align-content: start;
padding: 14px 16px 16px;
min-height: 146px;
}
.gk-v4-single-main .gk-v4-stage2-card__title {
display: -webkit-box;
min-height: 4.14em;
margin: 0;
overflow: hidden;
color: #102d38;
font-size: 16px;
font-weight: 700;
line-height: 1.38;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.gk-v4-single-main .gk-v4-stage2-card__title a {
color: inherit;
text-decoration: none;
}
.gk-v4-single-main .gk-v4-stage2-card__title a:hover {
color: var(--gk-color-accent-green);
}
.gk-v4-single-main .gk-v4-stage2-card__school {
display: flex;
align-items: center;
min-height: 24px;
color: #59707b;
font-size: 12px;
line-height: 1.45;
font-weight: 600;
}
.gk-v4-single-main .gk-v4-badge--platform {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
max-width: 100%;
min-height: 24px;
padding: 4px 10px 4px 5px;
border: 1px solid #d7e2e7;
border-radius: 999px;
background: var(--gk-color-bg-white);
color: #41535d;
font-size: 11px;
line-height: 1.2;
font-weight: 700;
text-decoration: none;
box-sizing: border-box;
}
.gk-v4-single-main .gk-v4-badge__logo,
.gk-v4-single-main .gk-v4-badge__mark {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 22px;
height: 22px;
border-radius: 999px;
background: #e8f0f4;
box-sizing: border-box;
}
.gk-v4-single-main .gk-v4-badge__logo {
object-fit: contain;
}
.gk-v4-single-main .gk-v4-badge__mark {
color: #133243;
font-size: 9px;
line-height: 1;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.gk-v4-single-main .gk-v4-badge--platform::before {
display: none;
}
.gk-v4-single-main .gk-v4-badge--platform.is-platform-skillbox .gk-v4-badge__mark {
background: #111827;
color: #ffde3b;
}
.gk-v4-single-main .gk-v4-badge--platform.is-platform-netology .gk-v4-badge__mark {
background: #2254f4;
color: var(--gk-color-bg-white);
}
.gk-v4-single-main .gk-v4-badge--platform.is-platform-eduson .gk-v4-badge__mark {
background: #e6f1ff;
color: #2563eb;
}
.gk-v4-single-main .gk-v4-badge--platform.is-platform-skillfactory .gk-v4-badge__mark {
background: #fff2e8;
color: #d97706;
}
.gk-v4-single-main .gk-v4-badge--platform.is-platform-geekbrains .gk-v4-badge__mark,
.gk-v4-single-main .gk-v4-badge--platform.is-platform-geekschool .gk-v4-badge__mark {
background: #f3e8ff;
color: #7c3aed;
}
.gk-v4-single-main .gk-v4-badge--platform.is-platform-yandex .gk-v4-badge__mark {
background: #ffebe7;
color: #e5482d;
}
.gk-v4-single-main .gk-v4-badge--platform.is-platform-otus .gk-v4-badge__mark {
background: #eefcf4;
color: #16a34a;
}
.gk-v4-single-main .gk-v4-badge--platform.is-platform-foxford .gk-v4-badge__mark {
background: #eaf6ff;
color: #0f77d1;
}
.gk-v4-single-main .gk-v4-stage2-card__pricebox {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 6px 10px;
margin-top: auto;
}
.gk-v4-single-main .gk-v4-stage2-card__price {
color: #0f2030;
font-size: 18px;
line-height: 1.1;
font-weight: 800;
}
.gk-v4-single-main .gk-v4-stage2-card__old-price {
color: #80909a;
font-size: 13px;
line-height: 1.3;
text-decoration: line-through;
}
.gk-v4-single-footer {
padding: 0 24px 28px;
}
.gk-v4-single-footer__inner {
max-width: 1280px;
margin: 0 auto;
color: #647b86;
font-size: 13px;
line-height: 1.5;
text-align: center;
}
.gk-v4-shell .gk-v4-layout {
display: grid;
grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
gap: 24px;
align-items: start;
}
.gk-v4-shell .gk-v4-sidebar {
position: sticky;
top: 24px;
align-self: start;
}
.gk-v4-shell .gk-v4-main {
min-width: 0;
}
.gk-v4-shell .gk-v4-filters__close {
display: none;
}
.gk-v4-shell .gk-v4-scope-actions__search-input {
display: block;
width: 100%;
min-height: 52px;
padding: 0 16px;
border: 1px solid #cfd8d2;
border-radius: 16px;
background: var(--gk-color-bg-white);
color: #143844;
font-size: 15px;
font-weight: 500;
line-height: 1.2;
box-sizing: border-box;
}
body.gk-v4-ui-lock {
overflow: hidden;
touch-action: none;
}
.gk-v4-shell {
position: relative;
isolation: isolate;
}
.gk-v4-shell .gk-v4-hero {
margin-top: 10px;
}
.gk-v4-shell .gk-v4-hero--subtop {
display: block;
margin: 0 0 18px;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.gk-v4-shell .gk-v4-hero--subtop .gk-v4-hero__title {
margin: 0;
color: var(--gk-color-primary-deepest);
font-size: clamp(24px, 2.55vw, 44px);
line-height: 1.08;
letter-spacing: -0.02em;
}
.gk-v4-shell .gk-v4-hero--subtop-compact {
margin: 4px 0 14px;
}
.gk-v4-shell .gk-v4-route-sections {
display: grid;
gap: 24px;
margin: 8px 0 28px;
}
.gk-v4-shell .gk-v4-route-sections__intro {
display: grid;
gap: 10px;
padding: 24px 28px;
background: var(--gk-color-bg-subtle);
border: 1px solid var(--gk-color-border-medium);
border-radius: 26px;
}
.gk-v4-shell .gk-v4-route-sections__title {
margin: 0;
color: var(--gk-color-primary-deepest);
font-size: clamp(22px, 2.1vw, 32px);
line-height: 1.08;
letter-spacing: -0.02em;
}
.gk-v4-shell .gk-v4-stage2-section__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
}
.gk-v4-shell .gk-v4-stage2-section__title {
margin: 0;
color: var(--gk-color-primary-darker);
font-size: clamp(24px, 2vw, 30px);
line-height: 1.1;
letter-spacing: -0.02em;
}
.gk-v4-shell .gk-v4-stage2-section__count {
color: var(--gk-color-text-muted);
font-size: 15px;
line-height: 1.4;
}
.gk-v4-shell .gk-v4-stage2-section__nav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border: 1px solid #d6dfd8;
border-radius: 999px;
background: var(--gk-color-bg-white);
color: #073f58;
font-size: 22px;
font-weight: 700;
line-height: 1;
box-shadow: 0 8px 18px rgba(10, 40, 52, 0.08);
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.gk-v4-shell .gk-v4-stage2-section__nav-btn:hover:not(:disabled) {
transform: translateY(-1px);
border-color: #9fdf89;
color: var(--gk-color-accent-green);
box-shadow: 0 12px 22px rgba(10, 40, 52, 0.12);
}
.gk-v4-shell .gk-v4-stage2-section__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 72px) / 4);
gap: 24px;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
padding: 4px 4px 6px;
scroll-behavior: auto;
scroll-padding-inline: 4px;
scrollbar-width: none;
-ms-overflow-style: none;
touch-action: pan-x;
}
.gk-v4-shell .gk-v4-stage2-card {
display: flex;
flex-direction: column;
min-height: 100%;
background: var(--gk-color-bg-white);
border: 1px solid var(--gk-color-border-light);
border-radius: 22px;
overflow: hidden;
box-shadow: 0 16px 28px rgba(10, 40, 52, 0.06);
}
.gk-v4-shell .gk-v4-stage2-card__image-placeholder {
display: grid;
place-items: center;
width: 100%;
height: 100%;
font-size: 58px;
font-weight: 700;
color: var(--gk-color-primary-darker);
background: linear-gradient(135deg, #e8f1ec, #dce8e2);
}
.gk-v4-shell .gk-v4-stage2-card__discount {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 11px;
border: 2px solid var(--gk-color-error);
border-radius: 999px;
background: var(--gk-color-bg-white);
color: var(--gk-color-error);
font-size: 13px;
font-weight: 700;
line-height: 1;
}
.gk-v4-shell .gk-v4-stage2-card__title a:hover {
color: var(--gk-color-accent-green);
}
.gk-v4-shell .gk-v4-badge--platform {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
max-width: 100%;
min-height: 24px;
padding: 4px 10px 4px 5px;
border: 1px solid #d7e2e7;
border-radius: 999px;
background: var(--gk-color-bg-white);
color: #41535d;
font-size: 11px;
line-height: 1.2;
font-weight: 700;
text-decoration: none;
box-sizing: border-box;
}
.gk-v4-shell .gk-v4-badge__logo,
.gk-v4-shell .gk-v4-badge--platform::before {
display: none;
}
.gk-v4-shell .gk-v4-badge--platform.is-platform-netology .gk-v4-badge__mark {
background: #2254f4;
color: var(--gk-color-bg-white);
}
.gk-v4-shell .gk-v4-stage2-section__copy {
width: 100%;
max-width: none;
margin: 18px 0 0;
}
.gk-v4-shell .gk-v4-stage2-section__copy-text {
position: relative;
overflow: hidden;
padding: 24px 28px 24px 30px;
background:
radial-gradient(circle at top right, rgba(99, 194, 122, 0.16) 0, rgba(99, 194, 122, 0) 34%),
linear-gradient(135deg, var(--gk-color-bg-white) 0%, #f7fbff 52%, #f2f8f7 100%);
border: 1px solid #d8e5ec;
border-radius: 24px;
box-shadow: 0 18px 40px rgba(15, 32, 48, 0.08);
color: #395564;
font-size: 16px;
line-height: 1.82;
}
.gk-v4-shell .gk-v4-stage2-section__copy-text::before {
content: "О направлении";
display: inline-flex;
align-items: center;
margin: 0 0 16px;
padding: 6px 12px;
border-radius: 999px;
background: linear-gradient(135deg, #0f4d68 0%, #1a6a7f 100%);
color: var(--gk-color-bg-white);
font-size: 11px;
line-height: 1;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.gk-v4-shell .gk-v4-stage2-section__copy-text p:first-of-type {
color: #173746;
font-size: 18px;
line-height: 1.62;
font-weight: 700;
}
.gk-v4-shell .gk-v4-breadcrumbs {
margin: 0 0 10px;
}
.gk-v4-shell .gk-v4-breadcrumbs__item {
display: inline-flex;
align-items: center;
color: var(--gk-color-text-muted);
font-size: 14px;
line-height: 1.45;
}
.gk-v4-shell .gk-v4-breadcrumbs__item a {
color: var(--gk-color-primary-dark);
text-decoration: none;
}
.gk-v4-shell .gk-v4-breadcrumbs__item a:hover {
color: var(--gk-color-accent-green);
text-decoration: underline;
}
.gk-v4-shell .gk-v4-breadcrumbs__item.is-current {
color: var(--gk-color-primary-dark);
font-weight: 600;
}
.gk-v4-shell .gk-v4-scope-actions {
margin: 24px 0 28px;
padding: 18px 20px;
background: var(--gk-color-bg-white);
border: 1px solid var(--gk-color-border-medium);
border-radius: 28px;
box-shadow: 0 14px 26px rgba(10, 40, 52, 0.05);
}
.gk-v4-shell .gk-v4-scope-actions__select {
display: block;
width: 100%;
min-height: 52px;
padding: 0 44px 0 16px;
border: 1px solid #cfd8d2;
border-radius: 16px;
background: var(--gk-color-bg-white);
color: #143844;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
appearance: none;
-webkit-appearance: none;
}
.gk-v4-shell .gk-v4-scope-actions__chip {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 16px;
border: 1px solid #d6dfda;
border-radius: 14px;
background: var(--gk-color-bg-white);
color: #203a45;
font-size: 14px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.gk-v4-shell .gk-v4-empty {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
padding: 24px;
border: 1px solid #dbe4df;
border-radius: 24px;
background: var(--gk-color-bg-white);
}
.gk-v4-shell .gk-v4-empty__chip {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 0 14px;
border: 1px solid #d6dfda;
border-radius: 999px;
background: var(--gk-color-bg-subtle);
color: #203a45;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
}
/* FIX64_TOPBAR_MATCH_1024_POSITION */
/* fix75: выравнивание карточек в grid при разной длине title и отсутствии duration */
.gk-v4-shell [data-view-container][data-view="grid"] .gk-v4-card__title {
display: -webkit-box;
min-height: 4.14em;
margin: 0;
overflow: hidden;
line-height: 1.38;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
/* ==========================================================================
SECTION: CONSOLIDATED MEDIA QUERIES
========================================================================== */
@media (max-width: 960px) {
.gk-v4-course-single .gk-v4-stage2-section__track {
grid-auto-columns: calc((100% - 48px) / 3);
}
.gk-v4-single-main .gk-v4-stage2-section__track {
grid-auto-columns: calc((100% - 48px) / 3);
}
.gk-v4-single-main {
padding: 22px 20px 34px;
gap: 22px;
}
.gk-v4-single-hero,
.gk-v4-single-article,
.gk-v4-single-main .gk-v4-course-single__related {
padding: 24px 20px;
border-radius: 26px;
}
.gk-v4-single-main .gk-v4-stage2-section__track {
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.gk-v4-single-main .gk-v4-stage2-card {
scroll-snap-align: start;
}
.gk-v4-shell .gk-v4-layout {
grid-template-columns: 1fr;
gap: 18px;
}
.gk-v4-shell .gk-v4-sidebar {
position: static;
}
.gk-v4-shell .gk-v4-stage2-section__copy-text {
padding: 22px 22px 22px 24px;
border-radius: 22px;
}
.gk-v4-shell .gk-v4-hero--subtop .gk-v4-hero__title {
font-size: 34px;
}
.gk-v4-shell .gk-v4-stage2-section__header {
align-items: stretch;
flex-direction: column;
}
.gk-v4-shell .gk-v4-stage2-section__track {
grid-auto-columns: calc((100% - 20px) / 2);
}
.gk-v4-shell .gk-v4-hero {
gap: 18px;
padding: 22px 20px 24px;
}
.gk-v4-shell .gk-v4-stage2-showcase,
.gk-v4-shell .gk-v4-route-sections__list {
gap: 26px;
}
.gk-v4-shell .gk-v4-route-sections {
gap: 20px;
margin-bottom: 22px;
}
.gk-v4-shell .gk-v4-scope-actions__chip {
width: 100%;
min-width: 0;
padding: 0 12px;
text-align: center;
}
}
@media (max-width: 720px) {
.gk-v4-course-single .gk-v4-stage2-section__header {
align-items: flex-start;
gap: 14px;
}
.gk-v4-course-single .gk-v4-stage2-section__nav {
gap: 8px;
}
.gk-v4-course-single .gk-v4-stage2-section__track {
grid-auto-columns: minmax(260px, 78vw);
gap: 16px;
}
}
@media (max-width: 1100px) {
.gk-v4-single-hero__grid {
grid-template-columns: 1fr;
}
.gk-v4-single-hero__media {
max-width: 360px;
}
.gk-v4-shell .gk-v4-hero {
gap: 20px;
padding: 24px 24px 26px;
}
}
@media (max-width: 767px) {
.gk-v4-single-main {
padding: 16px 16px 40px;
gap: 20px;
}
.gk-v4-single-hero,
.gk-v4-single-article,
.gk-v4-single-main .gk-v4-course-single__related {
padding: 22px 18px;
border-radius: 24px;
}
.gk-v4-single-hero__title {
font-size: 30px;
}
.gk-v4-single-hero__summary,
.gk-v4-single-article__content {
font-size: 15px;
line-height: 1.7;
}
.gk-v4-single-main .gk-v4-stage2-section__header {
align-items: flex-start;
gap: 14px;
}
.gk-v4-single-main .gk-v4-stage2-section__nav {
gap: 8px;
}
.gk-v4-single-main .gk-v4-stage2-section__track {
grid-auto-columns: minmax(260px, 78vw);
gap: 16px;
}
.gk-v4-single-hero__actions {
display: grid;
grid-template-columns: 1fr;
}
.gk-v4-single-btn {
width: 100%;
}
.gk-v4-shell .gk-v4-stage2-section__copy {
margin-top: 14px;
}
.gk-v4-shell .gk-v4-stage2-section__copy-text {
padding: 18px 18px 18px 20px;
border-radius: 18px;
font-size: 15px;
line-height: 1.76;
}
.gk-v4-shell .gk-v4-stage2-section__copy-text::before {
margin-bottom: 12px;
padding: 6px 10px;
font-size: 10px;
}
.gk-v4-shell .gk-v4-stage2-section__copy-text p:first-of-type {
font-size: 16px;
line-height: 1.56;
}
.gk-v4-shell .gk-v4-hero {
gap: 16px;
padding: 18px 16px 20px;
}
.gk-v4-shell .gk-v4-hero--subtop .gk-v4-hero__title,
.gk-v4-shell .gk-v4-hero__text,
.gk-v4-shell .gk-v4-stage2-section__track {
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.gk-v4-shell .gk-v4-stage2-card {
scroll-snap-align: start;
}
}
@media (max-width: 520px) {
.gk-v4-single-main {
padding: 18px 16px 30px;
gap: 18px;
}
.gk-v4-single-hero,
.gk-v4-single-article,
.gk-v4-single-main .gk-v4-course-single__related {
padding: 20px 16px;
border-radius: 22px;
}
.gk-v4-single-hero__title {
font-size: 28px;
line-height: 1.1;
}
.gk-v4-single-main .gk-v4-stage2-section__track {
grid-auto-columns: minmax(248px, 88vw);
}
.gk-v4-shell .gk-v4-scope-actions__search-wrap,
.gk-v4-shell .gk-v4-scope-actions__chips,
.gk-v4-shell .gk-v4-scope-actions__chips,
.gk-v4-shell .gk-v4-stage2-section__track {
grid-auto-columns: minmax(252px, 90vw);
}
}
@media (max-width: 782px) {
.gk-v4-shell .gk-v4-layout {
grid-template-columns: 1fr;
gap: 14px;
}
.gk-v4-shell .gk-v4-sidebar {
display: none !important;
position: static !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
transform: none !important;
overflow: visible !important;
}
.gk-v4-shell.is-filters-open .gk-v4-sidebar {
display: block !important;
}
.gk-v4-shell .gk-v4-filters {
display: flex;
flex-direction: column;
height: auto;
max-height: none;
padding: 16px;
overflow: visible;
overscroll-behavior: auto;
background: var(--gk-color-bg-white);
border: 1px solid #d9e6dd;
border-radius: 20px;
box-shadow: 0 12px 24px rgba(7, 63, 88, 0.08);
}
.gk-v4-shell .gk-v4-filters__header {
position: static;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 0 12px;
margin: 0 0 12px;
background: transparent;
}
.gk-v4-shell .gk-v4-filters__header-actions {
display: flex;
align-items: center;
gap: 10px;
}
.gk-v4-shell .gk-v4-filters__close,
.gk-v4-shell .gk-v4-mobile-backdrop {
display: none !important;
}
.gk-v4-shell .gk-v4-filter-toggle {
display: inline-flex;
}
.gk-v4-shell .gk-v4-stage2-showcase,
.gk-v4-shell .gk-v4-route-sections__list {
gap: 24px;
}
.gk-v4-shell .gk-v4-breadcrumbs__item {
font-size: 13px;
}
}
@media (max-width: 1279px) {
.gk-v4-shell .gk-v4-stage2-section__track {
grid-auto-columns: calc((100% - 48px) / 3);
gap: 24px;
}
}