... блоки ...
Цветовые темы: добавить к обёртке gt--blue, gt--green или gt--purple.
Все правила имеют вид ".gt .gt-что-то" — это перебивает стили темы Vega.
========================================================================== */
/* ---------- Обёртка, цвета, сброс ---------- */
.gt{
--gt-accent:#1fb5aa; --gt-accent-dark:#0e6f69; --gt-accent-soft:#e6f7f5; --gt-line:#dbe9e7;
--gt-orange:#ff4d00; --gt-orange-dark:#e04400; --gt-blue:#1d6fd6; --gt-yellow:#f5b82e;
--gt-ink:#1d2b2a; --gt-muted:#5b6b6a; --gt-cream:#fff6e3;
--gt-strip:#12a095; --gt-cta-bg:#0e6f69;
--gt-c1:#ff4d00; --gt-c2:#1fb5aa; --gt-c3:#1d6fd6; --gt-c4:#f5b82e;
display:block; container-type:inline-size; margin:0 0 40px; color:var(--gt-ink); font-size:16px; line-height:1.6; text-align:left;
}
/* ---------- ЦВЕТОВЫЕ ТЕМЫ (по цвету баннера страницы) ----------
teal — STEM, по умолчанию green — GrapeSEED 5-6
orange — Fly High 7-9, Каникулы blue — Go Getter 9-13, ОГЭ/ЕГЭ, Англия, главная
yellow — Focus 13-17 purple — New Total English 18-99, Онлайн
red — Грамматические интенсивы
slate — деловая тема для страниц документов («Сведения об образовательной организации» и подразделы)
Применение: */
.gt--teal{
--gt-accent:#1fb5aa; --gt-accent-dark:#0e6f69; --gt-accent-soft:#e6f7f5; --gt-line:#dbe9e7; --gt-strip:#12a095; --gt-cta-bg:#0e6f69; --gt-c1:#ff4d00; --gt-c2:#1fb5aa; --gt-c3:#1d6fd6; --gt-c4:#f5b82e}
.gt--green{
--gt-accent:#2ea84a; --gt-accent-dark:#1b6b2f; --gt-accent-soft:#e8f7ec; --gt-line:#d3ebd9; --gt-strip:#2a9d46; --gt-cta-bg:#1b6b2f; --gt-c1:#ff4d00; --gt-c2:#2ea84a; --gt-c3:#1d6fd6; --gt-c4:#f5b82e}
.gt--orange{
--gt-accent:#ff7a1a; --gt-accent-dark:#a84300; --gt-accent-soft:#fff0e3; --gt-line:#f6dcc6; --gt-strip:#e8650a; --gt-cta-bg:#1f3a5f; --gt-c1:#ff7a1a; --gt-c2:#1fb5aa; --gt-c3:#1d6fd6; --gt-c4:#f5b82e}
.gt--blue{
--gt-accent:#1d6fd6; --gt-accent-dark:#124a99; --gt-accent-soft:#e8f1fd; --gt-line:#d6e3f6; --gt-strip:#1d6fd6; --gt-cta-bg:#124a99; --gt-c1:#ff4d00; --gt-c2:#1d6fd6; --gt-c3:#1fb5aa; --gt-c4:#f5b82e}
.gt--yellow{
--gt-accent:#f5a800; --gt-accent-dark:#7a5200; --gt-accent-soft:#fff6dc; --gt-line:#f2e2b3; --gt-strip:#c28400; --gt-cta-bg:#1f3a5f; --gt-c1:#ff4d00; --gt-c2:#f5a800; --gt-c3:#1d6fd6; --gt-c4:#2ea84a}
.gt--purple{
--gt-accent:#8e3fd6; --gt-accent-dark:#5a1f99; --gt-accent-soft:#f3eafc; --gt-line:#e4d6f5; --gt-strip:#8e3fd6; --gt-cta-bg:#5a1f99; --gt-c1:#ff4d00; --gt-c2:#8e3fd6; --gt-c3:#1fb5aa; --gt-c4:#f5b82e}
.gt--red{
--gt-accent:#e0242b; --gt-accent-dark:#a3141a; --gt-accent-soft:#fdeaea; --gt-line:#f5d0d2; --gt-strip:#d9232a; --gt-cta-bg:#1f3a5f; --gt-c1:#f5b82e; --gt-c2:#e0242b; --gt-c3:#1d6fd6; --gt-c4:#1fb5aa}
.gt--slate{
--gt-accent:#2f4a6d; --gt-accent-dark:#1f3552; --gt-accent-soft:#f2f5f9; --gt-line:#d8dfe8; --gt-strip:#2f4a6d; --gt-cta-bg:#1f3552; --gt-c1:#2f4a6d; --gt-c2:#5b7597; --gt-c3:#2f4a6d; --gt-c4:#5b7597}
.gt--wide{
max-width:1200px; margin-left:auto; margin-right:auto; padding:0 16px} /* для страниц без сайдбара */
.gt, .gt *, .gt *::before, .gt *::after{
box-sizing:border-box}
.gt p{
margin:0 0 14px !important; color:inherit; font-size:inherit; line-height:1.6 !important}
.gt ul, .gt ol{
margin:0; padding:0; list-style:none}
.gt li{
margin:0; padding:0}
.gt li::before, .gt li::after{
content:none !important; display:none !important; background:none !important}
.gt img{
max-width:100%; height:auto}
/* ---------- Заголовки (используем классы, а не теги) ---------- */
.gt .gt-title, .gt .gt-subtitle, .gt .gt-card__title{
margin:0 0 16px !important; padding:0 !important; border:0; background:none; font-family:inherit; font-weight:700 !important;
line-height:1.25 !important; letter-spacing:normal; text-transform:none; text-align:left; color:var(--gt-ink);
}
.gt .gt-title::before, .gt .gt-title::after, .gt .gt-subtitle::before, .gt .gt-subtitle::after,
.gt .gt-card__title::before, .gt .gt-card__title::after{
content:none; display:none}
.gt .gt-title{
font-size:26px !important}
.gt .gt-title--xl{
font-size:32px !important}
.gt .gt-subtitle{
font-size:21px !important}
.gt .gt-card__title{
font-size:17px !important; margin-bottom:8px !important; color:var(--gt-accent-dark)}
.gt .gt-card--plain .gt-card__title{
color:var(--gt-ink)}
/* ---------- Секции и картинка ---------- */
.gt .gt-section{
margin:0 0 44px}
.gt .gt-banner{
display:block; width:100%; height:auto; border-radius:14px; margin:0 0 32px}
.gt .gt-intro{
margin:0 0 28px}
.gt .gt-lead{
font-size:18px !important; max-width:860px}
.gt .gt-lead.gt-lead--full{
max-width:none !important}
.gt .gt-muted{
color:var(--gt-muted)}
.gt .gt-mt{
margin-top:18px !important}
.gt .gt-mb{
margin-bottom:20px !important}
/* ---------- Слоган-полоса ---------- */
.gt .gt-slogan{
display:flex; flex-wrap:wrap; gap:6px 22px; background:var(--gt-strip); color:#fff;
border-radius:12px; padding:16px 22px; margin:0 0 20px; font-size:20px; font-weight:700}
.gt .gt-slogan span{
white-space:nowrap}
/* ---------- Ключевые факты (4 плашки) ---------- */
.gt .gt-facts{
display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin:0 0 40px}
.gt .gt-fact{
background:#fff; border:1px solid var(--gt-line); border-top:5px solid var(--gt-c1); border-radius:10px; padding:16px 18px}
.gt .gt-fact:nth-child(2){
border-top-color:var(--gt-c2)}
.gt .gt-fact:nth-child(3){
border-top-color:var(--gt-c3)}
.gt .gt-fact:nth-child(4){
border-top-color:var(--gt-c4)}
.gt .gt-fact b{
display:block; font-size:20px; line-height:1.25; margin-bottom:4px; color:var(--gt-ink)}
.gt .gt-fact span{
color:var(--gt-muted); font-size:15px}
/* ---------- Карточки ---------- */
.gt .gt-grid{
display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px}
.gt .gt-grid--2{
grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.gt .gt-card{
background:var(--gt-accent-soft); border-radius:12px; padding:20px}
.gt .gt-card--plain{
background:#fff; border:1px solid var(--gt-line)}
.gt .gt-card p{
margin:0 !important; font-size:15.5px}
/* ---------- Цитата / выделенный текст ---------- */
.gt .gt-cols{
display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; align-items:stretch}
.gt .gt-quote{
background:var(--gt-cream); border-left:6px solid var(--gt-yellow); border-radius:0 12px 12px 0; padding:22px 24px}
.gt .gt-quote--accent{
background:var(--gt-accent-soft); border-left-color:var(--gt-accent)}
.gt .gt-quote p:last-child{
margin-bottom:0 !important}
.gt .gt-about{
background:var(--gt-cream); border-radius:12px; padding:22px 26px; margin:0 0 28px}
.gt .gt-about p:last-child{
margin-bottom:0 !important}
.gt .gt-note{
background:var(--gt-accent-soft); border-radius:12px; padding:22px 26px; margin-top:28px}
.gt .gt-note p:last-child{
margin-bottom:0 !important}
/* ---------- Список с цветными полосками ---------- */
.gt ul.gt-list{
display:grid; grid-template-columns:1fr; gap:12px; margin:0 0 4px !important; padding:0 !important}
.gt ul.gt-list li{
list-style:none !important; background:#fff; border:1px solid var(--gt-line); border-left:5px solid var(--gt-c1); border-radius:8px; padding:14px 16px; font-size:15.5px}
.gt ul.gt-list li:nth-child(2){
border-left-color:var(--gt-c2)}
.gt ul.gt-list li:nth-child(3){
border-left-color:var(--gt-c3)}
.gt ul.gt-list li:nth-child(4){
border-left-color:var(--gt-c4)}
/* ---------- Расписание ---------- */
.gt .gt-schedule{
background:#fff; border:1px solid var(--gt-line); border-radius:14px; overflow:hidden}
.gt .gt-schedule__head{
background:var(--gt-accent-dark); color:#fff; font-weight:700; font-size:18px; padding:14px 22px}
.gt .gt-schedule__row{
display:flex; align-items:baseline; gap:18px; padding:14px 22px; border-top:1px solid var(--gt-line)}
.gt .gt-schedule__head + .gt-schedule__row{
border-top:0}
.gt .gt-schedule__time{
flex:0 0 74px; font-size:22px; font-weight:700; color:var(--gt-orange)}
.gt .gt-schedule__text{
font-size:17px}
.gt .gt-schedule__meta{
display:flex; flex-wrap:wrap; gap:8px 28px; padding:14px 22px; background:var(--gt-accent-soft); font-size:15.5px}
/* ---------- Таблица (цены, сравнение) ---------- */
.gt .gt-table-wrap{
overflow-x:auto}
.gt table.gt-table{
width:100%; border-collapse:collapse; background:#fff; font-size:16px}
.gt table.gt-table th{
background:var(--gt-accent-dark); color:#fff; text-align:left; padding:12px 16px; font-weight:700; border:0}
.gt table.gt-table td{
padding:12px 16px; border:0; border-bottom:1px solid var(--gt-line); vertical-align:top}
.gt table.gt-table tr:nth-child(even) td{
background:var(--gt-accent-soft)}
/* ---------- Вопрос-ответ (раскрывающийся) ---------- */
.gt details.gt-faq{
background:#fff; border:1px solid var(--gt-line); border-radius:10px; margin:0 0 10px}
.gt details.gt-faq summary{
cursor:pointer; padding:16px 20px; font-weight:700; font-size:17px; list-style:none}
.gt details.gt-faq summary::-webkit-details-marker{
display:none}
.gt details.gt-faq summary::after{
content:"+"; float:right; font-size:22px; line-height:1; color:var(--gt-orange)}
.gt details.gt-faq[open] summary::after{
content:"–"}
.gt details.gt-faq .gt-faq__body{
padding:0 20px 16px}
/* ---------- Текст + картинка ---------- */
.gt .gt-split{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:28px;
align-items:center;
}
.gt .gt-split>*{
min-width:0;
}
.gt .gt-split img{
display:block;
width:100%;
height:auto;
border-radius:14px;
}
@container (max-width:640px){
.gt .gt-split{
grid-template-columns:minmax(0,1fr);
}
}
/* ---------- Блок записи и кнопки ---------- */
.gt .gt-cta{
background:var(--gt-cta-bg); color:#fff; border-radius:16px; padding:32px 30px; margin:0 0 48px}
.gt .gt-cta .gt-title{
color:#fff}
.gt .gt-cta p{
max-width:720px; margin:0 0 20px !important; opacity:.95}
.gt .gt-btns{
display:flex; flex-wrap:wrap; gap:12px}
.gt a.gt-btn{
display:inline-block; padding:13px 24px; border-radius:8px; font-weight:700; font-size:16px; line-height:1.3;
text-decoration:none !important; background:#fff; color:#1d2b2a !important; border:0; transition:background .2s,color .2s}
.gt a.gt-btn:hover{
background:var(--gt-yellow); color:var(--gt-ink) !important}
.gt a.gt-btn:focus-visible{
outline:3px solid var(--gt-yellow); outline-offset:2px}
.gt a.gt-btn--main{
background:var(--gt-orange); color:#fff !important}
.gt a.gt-btn--main:hover{
background:var(--gt-orange-dark); color:#fff !important}
/* кнопки мессенджеров в фирменных цветах */
.gt a.gt-btn--wa{
background:#1e9e50; color:#fff !important}
.gt a.gt-btn--tg{
background:#2183c9; color:#fff !important}
.gt a.gt-btn--max{
background:#6c3fe0; color:#fff !important}
.gt a.gt-btn--wa:hover{
background:#17803f; color:#fff !important}
.gt a.gt-btn--tg:hover{
background:#1a69a3; color:#fff !important}
.gt a.gt-btn--max:hover{
background:#552fb8; color:#fff !important}
.gt a.gt-btn[href^="tel:"]{
-webkit-mask-image:none !important; mask-image:none !important; -webkit-text-fill-color:currentColor !important; -webkit-background-clip:border-box !important; background-clip:border-box !important}
/* кнопки вне тёмного блока */
.gt .gt-btns--light{
margin-top:18px}
.gt .gt-btns--light a.gt-btn{
background:var(--gt-accent-soft); border:1px solid var(--gt-line)}
.gt .gt-btns--light a.gt-btn--main{
background:var(--gt-orange)}
/* ---------- Контакты (карточки связи) и карта ---------- */
.gt .gt-contacts{
display:grid; grid-template-columns:1fr; gap:14px; margin:0 0 40px}
.gt .gt-contact{
display:flex; flex-direction:column; gap:2px; background:#fff; border:1px solid var(--gt-line); border-top:5px solid var(--gt-c1); border-radius:12px; padding:16px 18px}
.gt .gt-contact:nth-child(4n+2){
border-top-color:var(--gt-c2)}
.gt .gt-contact:nth-child(4n+3){
border-top-color:var(--gt-c3)}
.gt .gt-contact:nth-child(4n+4){
border-top-color:var(--gt-c4)}
.gt .gt-contact__label{
font-size:14px; color:var(--gt-muted)}
.gt .gt-contact__label--wa,
.gt .gt-contact__label--tg,
.gt .gt-contact__label--max{
align-self:flex-start;
margin-bottom:6px;
padding:3px 12px;
border-radius:999px;
font-size:14px;
font-weight:700;
line-height:1.4;
color:#fff !important;
}
.gt .gt-contact__label--wa{
background:#1e9e50;
}
.gt .gt-contact__label--tg{
background:#2183c9;
}
.gt .gt-contact__label--max{
background:#6c3fe0;
}
.gt .gt-contact__value{
font-size:19px; font-weight:700; line-height:1.3; color:var(--gt-ink); word-break:break-word}
.gt .gt-contact__sub{
font-size:15px; color:var(--gt-muted)}
.gt a.gt-contact__link{
display:inline-block; margin-top:auto; padding-top:10px; font-weight:700; font-size:15.5px; color:var(--gt-accent-dark) !important; text-decoration:none !important; border:0}
.gt a.gt-contact__link:hover{
color:var(--gt-orange) !important}
.gt .gt-contact__links{
display:flex; flex-direction:column; gap:2px; margin-top:auto; padding-top:10px}
.gt .gt-contact__links a.gt-contact__link{
margin:0; padding:0}
.gt a.gt-contact__link::after{
content:" →"}
.gt .gt-contact--main{
background:var(--gt-accent-soft); border-color:var(--gt-accent); border-top-color:var(--gt-orange)}
.gt .gt-contact--main a.gt-contact__link{
align-self:flex-start; margin-top:auto; padding:10px 16px; border-radius:8px; background:var(--gt-orange); color:#fff !important}
.gt .gt-contact--main a.gt-contact__link:hover{
background:var(--gt-orange-dark); color:#fff !important}
.gt .gt-map{
border-radius:14px; overflow:hidden; border:1px solid var(--gt-line); margin:0 0 44px; background:var(--gt-accent-soft)}
.gt .gt-map iframe{
display:block; width:100%; height:420px; border:0}
.gt a[href^="tel:"]{
-webkit-mask-image:none !important; mask-image:none !important; -webkit-text-fill-color:currentColor !important}
/* ---------- Деловые блоки: документы, ссылки-реестр, реквизиты ---------- */
/* Карточки-документы: иконка файла слева, стрелка справа (рисуется бордерами, всегда по центру) */
.gt ul.gt-docs{
list-style:none; margin:0 0 32px !important; padding:0 !important; display:grid; grid-template-columns:1fr; gap:10px}
.gt .gt-docs li{
margin:0; padding:0; list-style:none !important}
.gt .gt-docs a{
display:flex; align-items:center; gap:14px; height:100%; padding:12px 16px; background:#fff; border:1px solid var(--gt-line); border-radius:8px; font-size:15.5px; font-weight:500; line-height:1.35; color:var(--gt-ink) !important; text-decoration:none !important; transition:border-color .2s, box-shadow .2s}
.gt .gt-docs a::before{
content:""; flex:0 0 42px; height:42px; border-radius:8px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f4a6d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h6'/%3E%3C/svg%3E") center/22px 22px no-repeat, var(--gt-accent-soft)}
.gt .gt-docs a::after, .gt .gt-registry a::after{
content:""; flex:0 0 8px; width:8px; height:8px; margin:0 4px 0 auto; border-top:2px solid var(--gt-muted); border-right:2px solid var(--gt-muted); transform:rotate(45deg)}
.gt .gt-docs a:hover, .gt .gt-docs a:focus-visible{
border-color:var(--gt-accent); box-shadow:0 2px 8px rgba(31,53,82,.12); color:var(--gt-accent-dark) !important}
.gt .gt-docs a:hover::after, .gt .gt-registry a:hover::after{
border-color:var(--gt-accent-dark)}
/* Простой список ссылок (связанные разделы) */
.gt ul.gt-registry{
list-style:none; margin:0 0 32px !important; padding:0 !important; border:1px solid var(--gt-line); border-radius:8px; overflow:hidden; background:#fff}
.gt .gt-registry li{
border-top:1px solid var(--gt-line); list-style:none !important}
.gt .gt-registry li:first-child{
border-top:0}
.gt .gt-registry a{
display:flex; align-items:center; gap:12px; padding:14px 20px; font-size:16px; font-weight:500; line-height:1.4; color:var(--gt-ink) !important; text-decoration:none !important}
.gt .gt-registry a:hover, .gt .gt-registry a:focus-visible{
background:var(--gt-accent-soft); color:var(--gt-accent-dark) !important}
/* Реквизиты */
.gt dl.gt-dl{
margin:0 0 32px !important; padding:0 !important; border:1px solid var(--gt-line); border-radius:8px; background:#fff}
.gt dl.gt-dl>div{
display:grid; grid-template-columns:1fr; gap:2px; padding:12px 20px; border-top:1px solid var(--gt-line)}
.gt dl.gt-dl>div:first-child{
border-top:0}
.gt dl.gt-dl dt{
margin:0; padding:0; font-size:14.5px; color:var(--gt-muted)}
.gt dl.gt-dl dd{
margin:0; padding:0; font-weight:600; line-height:1.4}
.gt dl.gt-dl a{
color:var(--gt-accent-dark) !important; text-decoration:underline; text-underline-offset:3px}
.gt dl.gt-dl--light dt{
color:var(--gt-ink);
font-weight:700;
font-size:15.5px;
}
.gt dl.gt-dl--light dd{
font-weight:400;
font-size:15.5px;
}
.gt .gt-section[id]{
scroll-margin-top:100px;
}
.gt .gt-lead--plain{
font-size:17px !important; max-width:860px; color:var(--gt-muted); margin-bottom:32px !important}
.gt .gt-hint{
margin:-6px 0 16px !important; font-size:15px; color:var(--gt-muted)}
/* Обёртка формы «Заявки»: на всю ширину блока, без своей рамки (карточку рисует сама форма) */
.gt .gt-form{
width:100%; max-width:none !important; margin:0 0 4px; padding:0; background:none; border:0; box-shadow:none}
.gt .gt-form form, .gt .gt-form>div{
max-width:none}
.gt .gt-facts>*,
.gt .gt-grid>*,
.gt .gt-cols>*,
.gt .gt-contacts>*{
min-width:0;
}
.gt .gt-fact b,
.gt .gt-card__title,
.gt .gt-contact__value{
overflow-wrap:anywhere;
}
/* ---------- Фото-карточки (события с картинкой) ---------- */
.gt .gt-photo{
display:flex;
flex-direction:column;
background:#fff;
border:1px solid var(--gt-line);
border-radius:12px;
overflow:hidden;
}
.gt .gt-photo img{
display:block;
width:100%;
aspect-ratio:4/3;
object-fit:cover;
}
.gt .gt-photo__body{
display:flex;
flex-direction:column;
gap:6px;
flex:1 1 auto;
padding:16px 18px 18px;
}
.gt .gt-photo__meta{
font-size:14px;
color:var(--gt-muted);
}
.gt .gt-photo p{
margin:0 !important;
font-size:15.5px;
}
.gt a.gt-photo__link{
margin-top:auto;
padding-top:8px;
font-weight:700;
font-size:15.5px;
color:var(--gt-accent-dark) !important;
text-decoration:none !important;
}
.gt a.gt-photo__link::after{
content:" →";
}
.gt a.gt-photo__link:hover{
color:var(--gt-orange) !important;
}
/* ---------- Выбор сезона: две крупные карточки ---------- */
.gt .gt-seasons{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:14px;
}
.gt .gt-seasoncard{
border-radius:14px;
padding:22px 22px 20px;
border-top:6px solid #2a6fd6;
background:#e8f1fd;
}
.gt .gt-seasoncard--summer{
border-top-color:#e8650a;
background:#fff0e3;
}
.gt .gt-seasoncard .gt-card__title{
font-size:22px !important;
color:#124a99;
}
.gt .gt-seasoncard--summer .gt-card__title{
color:#a84300;
}
.gt .gt-seasoncard .gt-btns--light a.gt-btn{
background:#fff;
}
.gt .gt-seasoncard p{
margin:0 0 14px !important;
}
@container (min-width:640px){
.gt .gt-seasons{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
/* ---------- Интерактив «Английский сезона» (зима / лето) ---------- */
.gt .gt-play{
--p-a:#2a6fd6;
--p-soft:#e8f1fd;
--p-dark:#124a99;
background:var(--p-soft);
border-radius:16px;
padding:24px;
transition:background .25s;
}
.gt .gt-play[data-season="summer"]{
--p-a:#e8650a;
--p-soft:#fff0e3;
--p-dark:#a84300;
}
.gt .gt-play__tabs{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:0 0 18px;
}
.gt .gt-play button{
-webkit-appearance:none;
appearance:none;
font:inherit;
cursor:pointer;
text-transform:none;
letter-spacing:normal;
}
.gt .gt-play .gt-play__tab{
font-weight:700;
font-size:16px;
line-height:1.2;
padding:11px 20px;
border:2px solid var(--p-a) !important;
border-radius:999px;
background:#fff !important;
color:var(--p-dark) !important;
box-shadow:none;
}
.gt .gt-play .gt-play__tab[aria-selected="true"]{
background:var(--p-a) !important;
color:#fff !important;
}
.gt .gt-play .gt-play__tab:focus-visible,
.gt .gt-play .gt-play__card:focus-visible{
outline:3px solid var(--gt-yellow);
outline-offset:2px;
}
.gt .gt-play__grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.gt .gt-play__panel[hidden]{
display:none;
}
.gt .gt-play .gt-play__card{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
min-height:104px;
padding:14px 10px;
border:0 !important;
border-radius:14px;
background:#fff !important;
color:var(--p-dark) !important;
box-shadow:0 4px 0 rgba(0,0,0,.12);
text-align:center;
transition:transform .15s;
}
.gt .gt-play .gt-play__card[aria-pressed="true"]{
background:var(--p-a) !important;
color:#fff !important;
}
.gt .gt-play__emoji{
font-size:28px;
line-height:1;
}
.gt .gt-play__card b{
font-size:20px;
line-height:1.2;
color:inherit;
overflow-wrap:anywhere;
}
.gt .gt-play__status{
margin:16px 0 0 !important;
font-weight:700;
color:var(--p-dark);
}
.gt .gt-play__finale{
margin-top:14px;
padding:16px 18px;
background:#fff;
border-radius:12px;
border-left:6px solid var(--p-a);
}
.gt .gt-play__finale[hidden]{
display:none;
}
.gt .gt-play__finale p{
margin:0 0 12px !important;
}
@container (min-width:640px){
.gt .gt-play__grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
}
@media (hover:hover){
.gt .gt-play .gt-play__card:hover{
transform:translateY(-3px);
}
}
@media (prefers-reduced-motion:reduce){
.gt .gt-play,
.gt .gt-play .gt-play__card{
transition:none;
}
}
/* ---------- Встроенная форма «Заявки»: масштаб капчи на узких экранах ---------- */
.gt .gt-form iframe.gt-fit{
display:block !important;
width:304px !important;
max-width:none !important;
transform:scale(var(--gt-k,1)) !important;
transform-origin:0 0 !important;
margin-bottom:var(--gt-mb,0) !important;
}
/* ---------- Рамка записи (как на странице «Забронируй мастер-класс») ---------- */
.gt .gt-book{
background:linear-gradient(135deg,#1d6fd6,#2f45e0);
color:#fff;
border-radius:28px;
padding:40px 32px 32px;
}
.gt .gt-book .gt-title{
color:#fff;
}
.gt .gt-book .gt-lead{
color:#fff;
max-width:none;
}
.gt .gt-chips{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:0 0 22px;
}
.gt .gt-chips span{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 16px;
background:rgba(255,255,255,.16);
border-radius:999px;
font-size:15px;
font-weight:700;
color:#fff;
}
.gt .gt-chips b{
color:var(--gt-yellow);
}
.gt .gt-book .gt-form{
margin:0;
padding:28px;
background:#fff;
border-radius:20px;
border-top:8px solid var(--gt-orange);
color:var(--gt-ink);
}
@container (max-width:640px){
.gt .gt-book{
padding:28px 20px 20px;
border-radius:22px;
}
.gt .gt-book .gt-form{
padding:10px 6px;
margin-left:-12px;
margin-right:-12px;
}
}
/* ---------- Сетки с заданным числом колонок ---------- */
.gt .gt-facts{
grid-template-columns:1fr}
.gt .gt-grid--2, .gt .gt-grid--3, .gt .gt-grid--4, .gt .gt-grid--5{
grid-template-columns:1fr}
@container (min-width:560px){
.gt dl.gt-dl>div{
grid-template-columns:260px 1fr; gap:16px}
}
@container (min-width:640px){
.gt ul.gt-docs{
grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (min-width:480px){
.gt .gt-facts{
grid-template-columns:repeat(2,minmax(0,1fr))}
.gt .gt-grid--2, .gt .gt-grid--3, .gt .gt-grid--4, .gt .gt-grid--5{
grid-template-columns:repeat(2,minmax(0,1fr))}
.gt .gt-grid--5>:last-child{
grid-column:1/-1}
.gt ul.gt-list{
grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (min-width:480px){
.gt .gt-contacts{
grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (min-width:900px){
.gt .gt-contacts{
grid-template-columns:repeat(4,minmax(0,1fr))}
}
@container (min-width:720px){
.gt .gt-facts{
grid-template-columns:repeat(4,minmax(0,1fr))}
.gt .gt-grid--3{
grid-template-columns:repeat(3,minmax(0,1fr))}
.gt .gt-grid--4{
grid-template-columns:repeat(4,minmax(0,1fr))}
.gt .gt-grid--5{
grid-template-columns:repeat(6,minmax(0,1fr))}
.gt .gt-grid--5>*{
grid-column:span 2}
.gt .gt-grid--5>:nth-child(4){
grid-column:2 / span 2}
.gt .gt-grid--5>:nth-child(5){
grid-column:4 / span 2}
}
/* ---------- Мобильная версия ---------- */
@media (max-width:700px){
.gt .gt-title--xl{
font-size:25px !important}
.gt .gt-title{
font-size:22px !important}
.gt .gt-slogan{
font-size:17px; padding:14px 16px}
.gt .gt-lead{
font-size:16.5px !important}
.gt .gt-schedule__row{
flex-direction:column; gap:2px}
.gt .gt-map iframe{
height:320px}
.gt .gt-cta{
padding:24px 18px}
.gt a.gt-btn{
width:100%; text-align:center}
.gt .gt-split{
grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
.gt a.gt-btn{
transition:none}}
/* ==========================================================================
Лендинг «Мастер-классы / запись через форму» (обёртка #gt-lp)
Все правила начинаются с #gt-lp, поэтому не пересекаются с библиотекой .gt-
и не влияют на остальные страницы. Разметку лендинга НЕ помещайте внутрь
: у .gt включены контейнерные запросы, и фиксированные
элементы внутри ведут себя неверно. Нижней фиксированной панели у лендинга
нет: она перекрывала нижнее мобильное меню Vega.
========================================================================== */
#gt-lp{
--ink:#1d2358;--blue:#2f45e0;--sun:#ffc83d;--mint:#2fb996;--or:#ff4d00;--soft:#f2f0ff;--txt:#2a2e4a;color:var(--txt);font-size:17px;line-height:1.6;box-sizing:border-box}
#gt-lp *{
box-sizing:border-box}
#gt-lp h1,#gt-lp h2,#gt-lp h3{
color:var(--ink);line-height:1.15;margin:0 0 .5em;font-weight:800}
#gt-lp h1,#gt-lp .gt-h1{
font-size:clamp(30px,6vw,54px)}
#gt-lp h2{
font-size:clamp(24px,4vw,36px)}
#gt-lp h3{
font-size:19px}
#gt-lp p{
margin:0 0 1em}
#gt-lp .gt-wrap{
max-width:1100px;margin:0 auto;padding:0 20px}
#gt-lp section{
padding:56px 0}
#gt-lp .gt-hero{
background:var(--ink);color:#fff;padding:48px 0 64px;position:relative;overflow:hidden}
#gt-lp .gt-hero h1,#gt-lp .gt-hero .gt-h1{
color:#fff;max-width:14em}
#gt-lp .gt-hero .gt-grid{
display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center}
#gt-lp .gt-lead{
font-size:20px;max-width:30em;color:#e6e8ff}
#gt-lp .gt-age{
display:inline-block;background:var(--sun);color:var(--ink);font-weight:800;border-radius:999px;padding:6px 16px;margin-bottom:18px;transform:rotate(-2deg)}
#gt-lp .gt-ticket{
background:var(--sun);color:var(--ink);border-radius:22px;overflow:hidden;transform:rotate(1.5deg);box-shadow:0 0 0 4px #fff,12px 12px 0 var(--or)}
#gt-lp .gt-tk-head{
background:var(--or);color:#fff;padding:13px 24px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:15px;display:flex;align-items:center;gap:10px}
#gt-lp .gt-dot{
width:12px;height:12px;border-radius:50%;background:#fff;flex:none}
#gt-lp .gt-tk-body{
padding:20px 24px 24px}
#gt-lp .gt-tk-l{
font-size:13px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;opacity:.65;margin:0}
#gt-lp .gt-tk-v{
font-size:26px;font-weight:800;line-height:1.2;margin:0 0 14px;color:var(--ink)}
#gt-lp .gt-tk-v small{
display:block;font-size:15px;font-weight:600;opacity:.8;margin-top:2px}
#gt-lp .gt-tk-btn{
display:flex;justify-content:center;width:100%;background:var(--ink);color:#fff!important;font-size:18px;padding:16px 20px;border-radius:14px;font-weight:800;text-decoration:none;margin-top:6px}
#gt-lp .gt-tk-btn:hover{
background:var(--or)}
#gt-lp .gt-go{
background:var(--or);font-size:19px;padding:16px 28px;box-shadow:0 6px 0 #b83500}
#gt-lp .gt-sub{
margin-top:14px;font-size:15px;color:#c9ceff}
#gt-lp .gt-sub a{
color:#fff!important;text-decoration:underline}
#gt-lp .gt-book{
background:linear-gradient(135deg,#1d6fd6,#2f45e0);color:#fff;border-radius:28px;padding:44px 32px 36px;scroll-margin-top:90px}
#gt-lp .gt-book h2{
color:#fff}
#gt-lp .gt-chips{
display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
#gt-lp .gt-chips span{
display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border-radius:999px;padding:8px 16px;font-weight:700;font-size:15px}
#gt-lp .gt-chips b{
color:var(--sun)}
#gt-lp .gt-form{
margin-top:0;background:#fff;border-radius:20px;padding:28px;color:var(--txt);border-top:8px solid var(--or)}
#gt-lp .gt-q{
margin-top:28px;background:var(--soft);border-radius:22px;padding:30px 28px}
#gt-lp .gt-q h3{
font-size:22px}
#gt-lp .gt-q .gt-ml{
color:var(--ink)!important}
#gt-lp .gt-tg,#gt-lp .gt-wa,#gt-lp .gt-mx{
box-shadow:none}
#gt-lp .gt-about{
display:grid;grid-template-columns:5fr 6fr;gap:44px;align-items:center;background:var(--soft);border-radius:28px;padding:40px}
#gt-lp .gt-pic{
border-radius:22px;overflow:hidden;transform:rotate(-2deg);box-shadow:0 0 0 5px #fff,10px 10px 0 var(--sun);background:#fff;aspect-ratio:4/3}
#gt-lp .gt-pic img,#gt-lp .gt-pic svg{
display:block;width:100%;height:100%;object-fit:cover}
#gt-lp .gt-tag{
display:inline-block;background:var(--blue);color:#fff;font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:6px 14px;margin-bottom:14px}
#gt-lp .gt-facts-mini{
list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
#gt-lp .gt-facts-mini li{
background:#fff;border-radius:12px;padding:10px 16px;font-size:15px;box-shadow:0 3px 0 #c9ceff}
#gt-lp .gt-facts-mini li::before,#gt-lp .gt-facts-mini li::after{
content:none!important;display:none!important;background:none!important}
#gt-lp .gt-facts-mini li{
padding-left:16px!important;list-style:none!important}
#gt-lp .gt-facts-mini b{
display:block;color:var(--blue);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
#gt-lp{
overflow-x:hidden;overflow-x:clip}
#gt-lp .gt-split>*,#gt-lp .gt-about>*,#gt-lp .gt-grid>*{
min-width:0}
#gt-lp .gt-tabsrow{
margin-top:34px}
#gt-lp .gt-tabsrow p{
margin:0 0 10px;font-weight:700;color:var(--ink)}
#gt-lp .gt-tabs{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#gt-lp .gt-tab{
display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;font:inherit;cursor:pointer;border:2px solid #c9ceff;background:#fff;border-radius:14px;padding:12px 16px;text-align:left;color:var(--ink);line-height:1.2;min-width:0}
#gt-lp .gt-tab b{
display:block;font-size:17px}
#gt-lp .gt-tab small{
font-size:13px;opacity:.75}
#gt-lp .gt-hint{
display:flex;align-items:center;gap:10px;background:var(--blue);color:#fff;font-weight:700;font-size:15px;line-height:1.3;border-radius:14px;padding:10px 16px;margin:0 0 6px!important}
#gt-lp .gt-hand{
flex:none;font-size:20px;line-height:1}
#gt-lp .gt-word{
position:relative;padding-right:34px;transition:transform .15s}
#gt-lp .gt-word::after{
content:"↻";position:absolute;top:6px;right:10px;font-size:14px;color:var(--blue);opacity:.85}
@media(hover:hover){
#gt-lp .gt-word:hover{
transform:translateY(-3px)}}
#gt-lp .gt-ph,#gt-lp .gt-ml{
white-space:nowrap}
#gt-lp .gt-form iframe.gt-fit{
display:block!important;width:304px!important;max-width:none!important;transform:scale(var(--gt-k,1))!important;transform-origin:0 0!important;margin-bottom:var(--gt-mb,0)!important}
#gt-lp .gt-btns{
display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
#gt-lp .gt-b{
display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:12px;font-weight:700;text-decoration:none;color:#fff!important;border:2px solid transparent;font-size:16px;line-height:1.2}
#gt-lp .gt-b:focus-visible,#gt-lp summary:focus-visible,#gt-lp .gt-word:focus-visible{
outline:3px solid var(--sun);outline-offset:3px}
#gt-lp .gt-wa{
background:#1e9e50}#gt-lp .gt-tg{
background:#2183c9}#gt-lp .gt-mx{
background:#6c3fe0}
#gt-lp .gt-ph{
background:var(--sun);color:var(--ink)!important}
#gt-lp .gt-ml{
background:transparent;border-color:currentColor;color:var(--ink)!important}
#gt-lp .gt-b--dark{
background:var(--ink)}
#gt-lp a[href^="tel:"]{
-webkit-mask-image:none!important;mask-image:none!important;-webkit-text-fill-color:currentColor!important;-webkit-background-clip:border-box!important;background-clip:border-box!important}
#gt-lp .gt-b:hover{
filter:brightness(1.08)}
#gt-lp .gt-urgent{
background:var(--or);color:#fff;text-align:center;font-weight:800;padding:13px 20px;letter-spacing:.01em}
#gt-lp .gt-cards{
display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
#gt-lp .gt-card{
background:var(--soft);border-radius:18px;padding:24px}
#gt-lp .gt-card:nth-child(2){
background:#fff4d6}#gt-lp .gt-card:nth-child(3){
background:#dcf6ee}
#gt-lp .gt-split{
display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
#gt-lp .gt-steps{
list-style:none;margin:0;padding:0;counter-reset:s}
#gt-lp .gt-steps li{
counter-increment:s;position:relative;padding:0 0 22px 56px}
#gt-lp .gt-steps li:before{
content:counter(s);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
#gt-lp .gt-steps li:not(:last-child):after{
content:"";position:absolute;left:19px;top:44px;bottom:4px;width:2px;background:#c9ceff}
#gt-lp .gt-words{
background:var(--soft)}
#gt-lp .gt-wordgrid{
display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
#gt-lp .gt-word{
font:inherit;font-weight:800;font-size:22px;border:0;border-radius:14px;padding:14px 22px;cursor:pointer;color:var(--ink);background:#fff;box-shadow:0 4px 0 #c9ceff;min-width:130px}
#gt-lp .gt-word[aria-pressed=true]{
background:var(--sun);box-shadow:0 4px 0 #d9a400}
#gt-lp .gt-wordgrid[hidden]{
display:none}
#gt-lp .gt-wordgrid{
min-height:170px;align-content:flex-start}
#gt-lp .gt-setname{
margin:18px 0 0;font-weight:800;color:var(--blue);text-transform:uppercase;letter-spacing:.06em;font-size:14px}
#gt-lp .gt-tab[aria-selected=true]{
background:var(--ink);color:#fff;border-color:var(--ink)}
#gt-lp .gt-tab:focus-visible{
outline:3px solid var(--sun);outline-offset:3px}
#gt-lp details{
border-bottom:1px solid #d7d9f0;padding:16px 0}
#gt-lp summary{
cursor:pointer;font-weight:700;color:var(--ink);font-size:18px}
#gt-lp details p{
margin:.7em 0 0}
#gt-lp .gt-addr{
margin-top:22px;font-size:15px;opacity:.9}
@media(max-width:820px){
#gt-lp section{
padding:40px 0}
#gt-lp .gt-hero .gt-grid,#gt-lp .gt-split,#gt-lp .gt-cards{
grid-template-columns:1fr}
#gt-lp .gt-split{
grid-template-columns:minmax(0,1fr)}
#gt-lp .gt-addr span{
display:block;margin-bottom:4px}#gt-lp .gt-addr .gt-sep{
display:none}
#gt-lp .gt-tabs{
grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#gt-lp .gt-tab{
padding:8px 10px}#gt-lp .gt-tab b{
font-size:14px}#gt-lp .gt-tab small{
font-size:12px}
#gt-lp .gt-word{
min-width:0;flex:1 1 calc(50% - 12px);font-size:19px;padding:12px 28px 12px 12px}
#gt-lp .gt-wrap-s{
padding:0}
#gt-lp .gt-book{
padding:28px 20px 20px;border-radius:22px}
#gt-lp .gt-form{
padding:10px 6px;margin-left:-12px;margin-right:-12px}
#gt-lp .gt-q{
padding:22px 16px}
#gt-lp .gt-q .gt-ph,#gt-lp .gt-q .gt-ml{
flex:1 1 100%}
#gt-lp .gt-ticket{
transform:none}
#gt-lp .gt-about{
grid-template-columns:1fr;padding:24px 18px;gap:28px}#gt-lp .gt-pic{
transform:none}
#gt-lp .gt-b{
flex:1 1 calc(50% - 10px);justify-content:center}
}
@media(prefers-reduced-motion:no-preference){
#gt-lp .gt-dot{
animation:gtp 1.2s infinite}#gt-lp .gt-age{
animation:gtw 3s ease-in-out infinite}}
@keyframes gtp{
50%{
opacity:.2}}
@keyframes gtw{
50%{
transform:rotate(2deg) scale(1.05)}}