/* СГЕНЕРИРОВАНО design-system/scripts/extract-contacts-block.mjs — руками не править.
Стили блока «Учебный центр и контакты» для страниц ВНЕ товарных (там та же ДС уже инлайном).
Селекторы намеренно оставлены как в дизайн-системе (.pg …) — разметка обёрнута в .pg. */
/* tokens.css */
/* ============================================================
ДИЗАЙН-ТОКЕНЫ — единый источник правды для всех компонентов.
Подключать ПЕРВЫМ, до components.css и любых стилей страниц.
Все компоненты используют только эти переменные (никаких хардкод-цветов).
Скоуп: :root (глобально) + .pg — переменные доступны и компонентам (.pg),
и оформлению витрин (.ds-*). Компоненты курса всё равно оборачиваются в .pg.
============================================================ */
:root,
.pg {
/* — Палитра — */
--ink: #1b3147; /* основной текст */
--muted: #64768c; /* вторичный текст */
--bg: #e8f0f9; /* фон страницы (cont-text) */
--soft: #dcebfa; /* мягкий голубой фон карточек-плиток */
--soft2: #d4f3ea; /* мягкий бирюзовый (итоги/акценты) */
--line: rgba(12,74,110,.14); /* границы */
--navy: #0c4a6e; /* тёмно-синий (заголовки, шапки таблиц) */
--navy3: #1577ad; /* средний синий */
--sky: #0ea5e9; /* небесный (акцент) */
--teal: #0d9488; /* бирюзовый (CTA, галочки) */
--teal2: #16c2ad; /* светлый бирюзовый (градиенты) */
--gold1: #f7cf57; /* золотой светлый (баннеры) */
--gold2: #f1a23a; /* золотой тёмный */
--red1: #d10c4d; /* акцентный красный (CTA flare) */
--red2: #f96552; /* коралловый (градиент CTA) */
/* — Семантические градиенты — */
--grad-teal: linear-gradient(135deg, var(--sky), var(--teal));
--grad-teal-soft: linear-gradient(135deg, #38bdf8, var(--teal));
--grad-gold: linear-gradient(135deg, var(--gold1), var(--gold2));
--grad-cta: linear-gradient(29.48deg, var(--red1) 2.92%, var(--red2) 81.94%);
--grad-consult: linear-gradient(135deg, var(--teal), var(--teal2));
/* — Радиусы — */
--r-xs: 8px;
--r-sm: 12px;
--r-md: 16px;
--r-lg: 18px;
--r-xl: 22px;
--r-pill: 100px;
/* — Тени — */
--sh-card: 0 1px 3px rgba(15,23,42,.03);
--sh-soft: 0 6px 16px rgba(20,80,122,.07);
--sh-md: 0 9px 20px rgba(20,80,122,.10);
--sh-lg: 0 18px 40px rgba(20,80,122,.16);
--sh-cta: 0 8px 18px rgba(13,148,136,.20);
/* — Отступы (шаг 4px) — */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
/* — Типографика — */
--font: 'Montserrat','Segoe UI',Roboto,Arial,sans-serif;
--fs-h1: clamp(26px, 3.4vw, 40px);
--fs-h2: clamp(22px, 2.6vw, 30px);
--fs-h3: 16px;
--fs-body: 15.5px;
--fs-sm: 13.5px;
--fs-xs: 12px;
/* — Геометрия макета — */
--container: 1200px; /* макс. ширина контента */
--gap-section: 28px; /* вертикальный ритм между секциями */
/* — Брейкпоинт (для справки; в media пишем числом) — */
/* mobile: max-width 760px */
font-family: var(--font);
color: var(--ink);
line-height: 1.55;
font-size: var(--fs-body);
}
.pg * {
box-sizing: border-box
}
.pg h1 {
font-size: clamp(21px,2.7vw,29px);
font-weight: 800;
line-height: 1.14;
margin: 0 0 8px;
color: #fff;
letter-spacing: -.3px
}
.pg h2 {
font-size: clamp(19px,2.3vw,25px);
font-weight: 800;
margin: 0 0 4px;
color: var(--navy);
letter-spacing: -.2px
}
.pg h3 {
font-size: 16px;
font-weight: 700;
margin: 0 0 5px;
color: #14507a
}
.pg p {
margin: 0 0 9px
}
.pg a {
color: var(--navy3)
}
.pg .f-carousel {
--f-button-width: 36px;
--f-button-height: 36px
}
.pg .aida {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 24px;
overflow: hidden;
background: var(--navy);
box-shadow: 0 24px 50px rgba(0,0,0,.3);
user-select: none
}
.pg .aida .slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity .45s;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 20px;
color: #fff
}
.pg .aida .slide.on {
opacity: 1
}
.pg .aida .s-img img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover
}
.pg .aida .s-img .cap {
position: relative;
background: linear-gradient(0deg,rgba(8,40,62,.95),transparent);
padding: 54px 20px 20px;
margin: 0 -20px -20px
}
.pg .aida .badge {
display: inline-block;
background: rgba(255,255,255,.2);
border-radius: 18px;
padding: 3px 11px;
font-size: 11px;
font-weight: 700;
margin-bottom: 7px
}
.pg .aida h4 {
font-size: 19px;
font-weight: 800;
margin: 0 0 6px
}
.pg .aida p {
color: #dbe9f5;
font-size: 13.5px;
margin: 0 0 4px
}
.pg .aida ul {
margin: 0;
padding: 0;
list-style: none
}
.pg .aida li {
padding: 3px 0 3px 21px;
position: relative;
font-size: 13.5px
}
.pg .aida li::before {
content: "✓";
position: absolute;
left: 0;
color: #5fe0cd;
font-weight: 800
}
.pg .aida .arr {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255,255,255,.9);
border: 0;
cursor: pointer;
display: grid;
place-items: center;
font-size: 18px;
color: var(--navy);
z-index: 3
}
.pg .aida .arr.prev {
left: 9px
}
.pg .aida .arr.next {
right: 9px
}
.pg .aida .dots {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
display: flex;
gap: 6px;
justify-content: center;
z-index: 3
}
.pg .aida .dots button {
width: 7px;
height: 7px;
border-radius: 50%;
border: 0;
background: rgba(255,255,255,.5);
cursor: pointer
}
.pg .aida .dots button.on {
background: #fff;
width: 20px;
border-radius: 5px
}
.pg .sec {
margin: 0 0 22px
}
.pg .sh {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 12px
}
.pg .sh .ic {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg,#0ea5e9,#0d9488);
display: grid;
place-items: center;
flex: 0 0 auto;
align-self: center
}
.pg .sh .ic svg {
width: 24px;
height: 24px;
stroke: #fff;
display: block
}
.pg .sh h2 {
margin: 0;
line-height: 1.2
}
@media(max-width: 760px) {
.pg .aida {
max-width: 100%;
margin: 0 auto
}
}
/* slider v2: hover-zone, no arrows, centered, alternating colors */
.pg .aida .arr {
display: none!important
}
.pg .aida {
cursor: default
}
.pg .aida .slide {
justify-content: center;
align-items: center;
text-align: center
}
.pg .aida .s-img {
justify-content: flex-end;
align-items: stretch;
text-align: left
}
.pg .aida .slide ul {
display: inline-block;
text-align: left;
margin: 6px auto 0
}
.pg .contacts {
background: #fff;
border: 1px solid var(--line);
border-radius: 22px;
box-shadow: 0 14px 36px rgba(20,80,122,.1);
overflow: hidden
}
.pg .contacts .gal {
aspect-ratio: 16/7;
box-shadow: none;
border-radius: 0
}
.pg .cbody {
padding: 22px 24px
}
.pg .ci-name {
font-size: 19px;
font-weight: 900;
color: var(--navy);
margin: 0
}
.pg .ci-sub {
font-size: 11px;
letter-spacing: .3px;
text-transform: uppercase;
color: var(--muted);
margin: 3px 0 0
}
.pg .ci-h {
font-size: 11.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .4px;
color: var(--navy);
margin: 0 0 6px
}
.pg .ci-call {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
width: 100%;
margin: 2px 0 0;
background: linear-gradient(135deg,#0d9488,#16c2ad);
color: #fff;
font-weight: 800;
border-radius: 13px;
min-height: 50px;
text-decoration: none;
box-shadow: 0 8px 18px rgba(13,148,136,.2);
font-size: 15px
}
.pg .ci-call svg {
width: 20px;
height: 20px;
fill: #fff
}
.pg .ci-req {
font-size: 12px;
color: var(--muted);
line-height: 1.5;
margin: 0 0 7px
}
.pg .ci-req b {
color: var(--ink)
}
.pg .si {
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
flex-shrink: 0
}
.pg .si-24 {
width: 24px;
height: 24px
}
.pg .si-telegram {
background-image: url("data:image/svg+xml,")
}
.pg .si-max {
background-image: url("data:image/svg+xml,")
}
.pg .si-phone {
background-image: url("data:image/svg+xml,")
}
.pg .si-mail {
background-image: url("data:image/svg+xml,")
}
.pg .si-vk {
background-image: url("data:image/svg+xml,")
}
.pg .si-ok {
background-image: url("data:image/svg+xml,")
}
.pg .si-yo {
background-image: url("data:image/svg+xml,")
}
.pg .si-ru {
background-image: url("data:image/svg+xml,")
}
.pg .si-dz {
background-image: url("data:image/svg+xml,")
}
.pg .si-loc {
background-image: url("data:image/svg+xml,")
}
.pg .si-time {
background-image: url("data:image/svg+xml,")
}
.pg .si-file {
background-image: url("data:image/svg+xml,")
}
@media(max-width: 760px) {
.pg .contacts .gal {
aspect-ratio:4/3
}
.pg .cbody {
padding: 18px
}
}
.pg .sec {
min-width: 0
}
/* ===== contacts — живое оформление (плитки/круглые соцсети/карточки адресов) ===== */
.pg .ci-head { margin-bottom: 14px }
.pg .ci-h-mt { margin-top: 18px }
/* быстрые контакты — плитки */
.pg .ci-tiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
margin: 8px 0 14px
}
.pg .ci-tile {
display: flex;
align-items: center;
gap: 11px;
padding: 10px 13px;
background: #fff;
border: 1px solid var(--line, #e2e8f0);
border-radius: 13px;
text-decoration: none;
color: #0c4a6e;
font-weight: 600;
font-size: .92rem;
transition: transform .14s, box-shadow .14s, border-color .14s
}
.pg .ci-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20,80,122,.12); border-color: #bae6fd }
.pg .ci-tile-ic {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg,#e0f2fe,#ccfbf1);
display: grid;
place-items: center;
color: #0369a1;
font-size: 20px
}
.pg .ci-tile-lbl { line-height: 1.2; word-break: break-word }
/* соцсети — круглые кнопки */
.pg .ci-soc-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 14px 0 4px }
.pg .ci-soc-lbl { font-weight: 700; color: var(--muted, #64748b); font-size: .9rem }
.pg .ci-soc-btns { display: flex; flex-wrap: wrap; gap: 8px }
.pg .ci-soc {
width: 40px;
height: 40px;
border-radius: 50%;
display: grid;
place-items: center;
background: #f0f9ff;
border: 1px solid #e0f2fe;
color: #0369a1;
font-size: 20px;
text-decoration: none;
transition: background .14s, transform .14s, color .14s
}
.pg .ci-soc:hover { background: linear-gradient(135deg,#0ea5e9,#0d9488); color: #fff; transform: translateY(-2px) }
/* адреса — карточки */
.pg .ci-addr-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 10px;
margin: 8px 0 16px
}
.pg .ci-acard {
display: flex;
gap: 11px;
padding: 13px 15px;
background: #f8fafc;
border: 1px solid var(--line, #e2e8f0);
border-radius: 13px
}
.pg .ci-acard-ic { flex: 0 0 auto; color: #0ea5e9; font-size: 22px; margin-top: 1px }
.pg .ci-acard-tx { font-size: .9rem; line-height: 1.4; color: #334155 }
/* реквизиты — карточка */
.pg .ci-req-card {
background: #f0f9ff;
border: 1px solid #e0f2fe;
border-left: 4px solid var(--sky, #0ea5e9);
border-radius: 14px;
padding: 15px 18px
}
.pg .ci-req-title { font-weight: 800; color: #0c4a6e; margin: 0 0 6px }
.pg .ci-req-card .ci-req { margin: 0 0 10px; font-size: .92rem; line-height: 1.5; color: #334155 }
.pg .ci-req-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: .9rem;
color: #0369a1;
text-decoration: none;
background: #fff;
border: 1px solid #bae6fd;
border-radius: 10px;
padding: 8px 14px
}
.pg .ci-req-link:hover { background: #e0f2fe }
/* нижний ряд: реквизиты + отдельный блок «Реклама и сотрудничество» */
.pg .ci-btm { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; margin-top: 4px }
.pg .ci-ad-card {
background: #f0f9ff;
border: 1px solid #e0f2fe;
border-left: 4px solid var(--sky, #0ea5e9);
border-radius: 14px;
padding: 15px 18px;
display: flex;
flex-direction: column
}
.pg .ci-ad-title { display: flex; align-items: center; gap: 8px; font-weight: 800; color: #0c4a6e; margin: 0 0 6px }
.pg .ci-ad-title svg { color: #0ea5e9; flex: 0 0 auto }
.pg .ci-ad-txt { margin: 0 0 12px; font-size: .9rem; line-height: 1.5; color: #334155 }
.pg .ci-ad-link {
margin-top: auto;
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: .9rem;
color: #0369a1;
background: #fff;
border: 1px solid #bae6fd;
border-radius: 10px;
padding: 8px 14px;
text-decoration: none
}
.pg .ci-ad-link:hover { background: #e0f2fe }
@media(max-width: 760px) { .pg .ci-btm { grid-template-columns: 1fr } }
@media(max-width: 760px) {
.pg .ci-tiles { grid-template-columns: 1fr 1fr }
.pg .ci-addr-grid { grid-template-columns: 1fr }
.pg .ci-tile { font-size: .85rem; padding: 9px 11px }
.pg .ci-tile-ic { width: 36px; height: 36px; font-size: 18px }
}
@media(max-width: 420px) {
.pg .ci-tiles { grid-template-columns: 1fr }
}
/* ── Сбросы поверх сайтовых стилей (вне товарных страниц) ── */
.pg-contacts h2,.pg-contacts h3,.pg-contacts h4,.pg-contacts .sh h2{text-transform:none}
.pg-contacts .sh h2{color:var(--navy)}
.pg-contacts .cap h4,.pg-contacts .cap p,.pg-contacts .cap .badge{color:#fff}
.pg-contacts .ci-name{color:var(--ink)}