/* ========================================================= Большая распродажа лета 2026 — Zerocoder Breakpoints: 1200 / 991 / 767 / 575 ========================================================= */ :root{ /* palette */ --ink:#17191d; --ink-80:rgba(23,25,29,.8); --pink:#fc6b89; --pink-from:#ff6e8c; --pink-to:#d64563; --pink-line:#d64563; --green:#78c852; --green-from:#98d56a; --green-to:#4fb934; --gift-bg:#eeffe4; --gift-line:#d8f5c7; --page:#f1fcff; --wave:#7adbf6; /* metrics */ --r-card:20px; --r-media:15px; --r-btn:25px; --r-gift:10px; --r-chip:7px; --gap:20px; --pad:20px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--page); color:var(--ink); font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; font-size:15px; line-height:1.4; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} p{margin:0} ul{margin:0;padding:0;list-style:none} h1,h2,h3,h4{margin:0;font-weight:600} a{color:inherit} /* AUTOSCALE Вёрстка живёт в системе координат макета — 1200px. Всё, что шире, масштабируется целиком через zoom (см. --z в и script.js): 1200 → ×1, 1920 → ×1.6, шире 1920 → ×1.6 и поля по бокам. Меняешь базу и потолок в двух местах: инлайн-скрипт в index.html и AUTOSCALE в script.js. */ body{zoom:var(--z,1)} .container{ width:100%; max-width:1200px; margin:0 auto; padding:0 20px; } /* ========================================================= 1. COUNTDOWN BAR ========================================================= */ .timer-wrap{position:relative;z-index:5} .timer{ display:flex; align-items:center; justify-content:center; gap:40px; min-height:76px; padding:12px 30px; border-radius:0 0 var(--r-card) var(--r-card); background:linear-gradient(90deg,var(--green-from) 0%,var(--green-to) 100%); color:#fff; } .timer__label{ font-size:16px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; } .timer__clock{display:flex;align-items:flex-start;gap:6px} .flip{position:relative;display:flex;gap:2px;padding-bottom:12px} .flip__card{ position:relative; width:27px; height:38px; border-radius:4px; background:#fff; box-shadow:0 2px 4px rgba(23,25,29,.15); display:flex; align-items:center; justify-content:center; overflow:hidden; } /* горизонтальный разделитель «перекидного» табло */ .flip__card::after{ content:''; position:absolute; left:0;right:0;top:50%; height:1px; background:rgba(23,25,29,.12); } .flip__card::before{ content:''; position:absolute; left:0;right:0;top:0;height:50%; background:linear-gradient(180deg,rgba(23,25,29,.06),rgba(23,25,29,0)); pointer-events:none; } .flip__digit{ font-size:20px; font-weight:700; line-height:1; color:var(--ink); transform-origin:50% 50%; } .flip__digit.is-flip{animation:flipIn .34s ease-out} @keyframes flipIn{ 0%{transform:rotateX(-90deg);opacity:.2} 60%{transform:rotateX(12deg);opacity:1} 100%{transform:rotateX(0);opacity:1} } .flip__cap{ position:absolute; left:0;right:0;bottom:0; text-align:center; font-size:9px; font-weight:500; line-height:1; color:rgba(255,255,255,.9); } .flip__colon{ font-size:20px; font-weight:700; line-height:38px; color:#fff; } /* состояние «распродажа закончилась» */ .timer.is-over .timer__clock{display:none} .timer.is-over .timer__label{text-transform:none} /* ========================================================= 2. HERO ========================================================= */ .hero-wrap{position:relative;z-index:2;padding-top:10px} .hero{ position:relative; min-height:600px; border-radius:var(--r-card); overflow:hidden; display:flex; align-items:center; justify-content:center; } .hero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .hero__inner{ position:relative; z-index:1; width:100%; padding:60px 20px; text-align:center; display:flex; flex-direction:column; align-items:center; } .hero__badge{ display:inline-block; padding:6px 16px; border-radius:50px; background:#fff; color:var(--ink); font-size:13px; font-weight:600; box-shadow:0 4px 14px rgba(23,25,29,.12); } .hero__title{margin:24px 0 0;width:100%} .hero__title img{ width:min(975px,100%); margin:0 auto; filter:drop-shadow(0 12px 30px rgba(23,25,29,.18)); } /* Стеклянная подложка: на воде белый текст читался плохо */ .hero__lead{ position:relative; margin-top:28px; max-width:660px; padding:22px 30px; border-radius:20px; border:1px solid rgba(255,255,255,.65); background:rgba(255,255,255,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 12px 34px rgba(23,25,29,.12); color:var(--ink); font-size:19px; font-weight:600; line-height:1.55; } .hero__lead p + p{margin-top:6px} /* Табы вместо абзаца: каждая выгода — своя капсула, главная цифра акцентом. Стеклянная подложка переезжает с контейнера на сами капсулы. */ .hero__lead--tabs{ display:flex; flex-wrap:wrap; gap:12px; max-width:760px; padding:0; border:0; background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; } /* специфичность ровно как у `.hero__lead p + p`, правило ниже — поэтому выигрывает. Иначе соседние табы получают margin-top:6px и при stretch выходят ниже первого */ .hero__lead--tabs p + p{margin-top:0} /* форма и кегль — как у строки-примечания под табами */ .hero__tab{ padding:11px 20px; border-radius:16px; border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-size:16px; font-weight:600; line-height:1.25; color:var(--ink); } .hero__note{ display:inline-block; margin-top:14px; padding:11px 20px; border-radius:16px; border:1px solid rgba(255,255,255,.6); background:rgba(255,255,255,.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-size:16px; font-weight:600; line-height:1.25; color:var(--ink); } .btn--hero{margin-top:26px;min-width:229px} /* ========================================================= 3. SECTIONS + WAVES ========================================================= */ .section{position:relative;padding:60px 0 0} .section:last-of-type{padding-bottom:80px} /* голубая «волна» под карточками */ .section--wave::before{ content:''; position:absolute; left:0;right:0; top:-40px; height:1560px; background:linear-gradient(180deg,rgba(122,219,246,0) 0%,var(--wave) 50%,rgba(122,219,246,0) 100%); z-index:-1; pointer-events:none; } .section__head{margin-bottom:22px} .section__title{ font-size:32px; font-weight:600; line-height:1.1; letter-spacing:-.01em; } .section__sub{ margin-top:14px; font-size:15px; font-weight:500; color:var(--ink-80); max-width:760px; } /* ========================================================= 4. BUTTONS / TAGS / PRICE ========================================================= */ .btn{ display:inline-flex; align-items:center; justify-content:center; padding:15px 20px; border-radius:var(--r-btn); font-family:inherit; font-size:14px; font-weight:700; line-height:1.1; text-align:center; text-decoration:none; cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease; } .btn--primary{ border:1px solid #fff; background:linear-gradient(91deg,var(--pink-from) 0%,var(--pink-to) 102%); color:#fff; } .btn--primary:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(214,69,99,.32)} .btn--ghost{ border:1px solid var(--pink-line); background:transparent; color:var(--pink-line); } .btn--ghost:hover{background:var(--pink-line);color:#fff;transform:translateY(-2px)} .btn:active{transform:translateY(0)} .tag{ display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:65px; font-size:12px; font-weight:500; line-height:1.15; } .tag--sale{background:var(--green);color:#fff} .tag--sale::before{ content:''; width:18px;height:18px; flex:0 0 18px; background:url('assets/img/icon-sale.svg') center/contain no-repeat; } .tag--upper{text-transform:uppercase;font-weight:600;letter-spacing:.02em} .price{margin-top:4px;display:flex;flex-direction:column;gap:5px} .price__main{ font-size:20px; font-weight:600; line-height:1.1; letter-spacing:-.01em; } .price__or{font-size:13px;font-weight:500;color:var(--ink-80)} .price__old{ font-size:13px; font-weight:500; color:var(--ink-80); text-decoration:line-through; margin-top:-3px; } .price__note{ position:relative; margin-top:3px; padding-left:28px; font-size:13px; font-weight:500; color:var(--ink-80); } .price__note::before{ content:''; position:absolute; left:0;top:1px; width:18px;height:18px; background:url('assets/img/icon-attention.svg') center/contain no-repeat; opacity:.55; } /* ========================================================= 5. КАРТОЧКА ИНДИВИДУАЛЬНОЙ ПРОГРАММЫ ========================================================= */ .programs{display:flex;flex-direction:column;gap:var(--gap)} .pcard{ display:grid; grid-template-columns:353px minmax(0,361px) minmax(0,361px); gap:var(--gap); padding:var(--pad); border-radius:var(--r-card); background:#fff; } .pcard__media{border-radius:var(--r-media);overflow:hidden;min-height:312px} .pcard__media img{width:100%;height:100%;object-fit:cover} .pcard__body{display:flex;flex-direction:column;justify-content:space-between;gap:20px} .pcard__top{display:flex;flex-direction:column;gap:10px;align-items:flex-start} .pcard__title{ font-size:24px; font-weight:700; line-height:1.1; letter-spacing:-.01em; color:var(--pink); } .pcard__title--wide{margin-bottom:4px} .pcard__actions{display:flex;gap:10px} .pcard__actions .btn{flex:1 1 0;min-width:0} /* карточка с двумя тарифами */ .pcard--tariffs{grid-template-columns:353px minmax(0,1fr)} .pcard__stack{display:flex;flex-direction:column;gap:20px} .tariff{ display:grid; grid-template-columns:minmax(0,335px) minmax(0,1fr); gap:20px; padding:20px; border-radius:var(--r-gift); background:#fdf5f7; } .tariff__body{display:flex;flex-direction:column;justify-content:space-between;gap:20px} .tariff__name{font-size:20px;font-weight:600;line-height:1.1} /* ========================================================= 6. БЛОК ПОДАРКОВ ВНУТРИ КАРТОЧКИ ========================================================= */ .gifts{ display:flex; flex-direction:column; gap:15px; padding:20px; border-radius:var(--r-gift); border:1px solid var(--gift-line); background:var(--gift-bg); } .gifts__head{ display:flex; align-items:center; gap:10px; font-size:16px; font-weight:700; line-height:1.1; letter-spacing:-.02em; color:var(--green); } .gifts__ico{width:28px;height:28px;flex:0 0 28px;object-fit:contain} .chips{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start} .chip{ position:relative; padding:7px 10px 7px 22px; border-radius:var(--r-chip); border:1px solid var(--gift-line); background:#fff; font-size:12px; font-weight:500; line-height:1.15; } .chip::before{ content:''; position:absolute; left:10px;top:11px; width:5px;height:5px; border-radius:50%; background:var(--green); } .chip--wide{width:100%} /* ========================================================= 7. ЗЕЛЁНАЯ ПЛАШКА ПОДАРКОВ ========================================================= */ .gbanner{ position:relative; margin-top:var(--gap); padding:30px; border-radius:var(--r-card); background:linear-gradient(90deg,var(--green-from) 0%,var(--green-to) 100%); overflow:hidden; } .gbanner__title{ position:relative; z-index:1; margin-bottom:18px; font-size:18px; font-weight:700; color:#fff; } /* общая для всех пунктов вводная — чтобы не повторять её в каждой строке */ .gbanner__intro{ position:relative; z-index:1; margin:-8px 0 14px; font-size:14px; font-weight:600; color:rgba(255,255,255,.95); } .gbanner__list{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:8px; max-width:calc(100% - 260px); } .gitem{ display:flex; align-items:center; gap:10px; padding:10px; border-radius:var(--r-gift); background:#fff; font-size:13px; font-weight:500; line-height:1.2; } .gitem img{width:40px;height:40px;flex:0 0 40px;object-fit:contain} .gitem a{color:inherit;text-decoration:underline} .gbanner__art{position:absolute;pointer-events:none;user-select:none} .gbanner__art--basket{right:6px;bottom:-38px;width:312px} .gbanner__art--box1{right:80px;bottom:-40px;width:203px} .gbanner__art--box2{right:20px;top:0;width:117px} /* в плашках с тарифами строки занимают всю ширину, поэтому арт уводим в правый верхний угол — там свободно рядом с заголовком */ .gbanner__art--corner{right:24px;top:18px;width:104px} .gbanner--short .gbanner__list{max-width:calc(100% - 320px)} /* ========================================================= 8. КАРТОЧКА КУРСА (НЕЙРОСЕТИ) ========================================================= */ .courses{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gap); } .ccard{ display:flex; flex-direction:column; border-radius:var(--r-card); background:#fff; border:1px solid #fff; overflow:hidden; } /* пропорция фото из макета 371×200 — держим её на любой ширине карточки */ .ccard__media{aspect-ratio:371/200;overflow:hidden} .ccard__media img{width:100%;height:100%;object-fit:cover} .ccard__body{ display:flex; flex-direction:column; justify-content:space-between; gap:20px; padding:20px; flex:1 1 auto; } .ccard__title{ margin-bottom:10px; font-size:20px; font-weight:700; line-height:1.15; letter-spacing:-.01em; color:var(--pink); } /* ========================================================= 9. КУРСЫ ПРОФЕССИИ Карточка устроена как индивидуальная программа — фото слева с отступом, контент справа, — но по две штуки в ряд. ========================================================= */ .programs--two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gap); } .pcard--compact{grid-template-columns:230px minmax(0,1fr)} .pcard--compact .pcard__media{min-height:300px} .pcard--compact .pcard__title{font-size:22px} /* колонка узкая — кнопки ставим друг под другом, иначе текст ломается на две строки */ .pcard--compact .pcard__actions{flex-direction:column} .pcard--compact .pcard__actions .btn{width:100%;flex:none} /* Слот под фото: картинок для этих курсов в макете не было. Ставится градиент в летней гамме, каждая карточка — свой оттенок. Появятся фото — заменить блок на , как в секции «Нейросети». */ .pcard__media--slot{ position:relative; background:linear-gradient(150deg,#9be7fa 0%,#4fc9ec 55%,#31b6e0 100%); } .pcard__media--slot::after{ content:''; position:absolute; inset:0; background: radial-gradient(120px 90px at 74% 20%,rgba(255,255,255,.5),transparent 70%), radial-gradient(150px 110px at 22% 84%,rgba(255,255,255,.35),transparent 70%); } .programs--two .pcard:nth-child(2) .pcard__media--slot{background:linear-gradient(150deg,#a8ecd6 0%,#57cfae 55%,#33bb96 100%)} .programs--two .pcard:nth-child(3) .pcard__media--slot{background:linear-gradient(150deg,#ffc9d6 0%,#ff92ad 55%,#f4708f 100%)} .programs--two .pcard:nth-child(4) .pcard__media--slot{background:linear-gradient(150deg,#cfe4ff 0%,#8fb8f5 55%,#6a97e6 100%)} /* ========================================================= 10. АБОНЕМЕНТ И НЕЙРОАБОНЕМЕНТ ========================================================= */ /* Карточка абонемента устроена как «Запуск стартапа»: белая снаружи, внутри цветной блок с контентом — салатовый у абонемента, светло-голубой у нейроабонемента */ .subcard{ padding:var(--pad); border-radius:var(--r-card); background:#fff; } .subcard__inner{ display:flex; align-items:center; justify-content:space-between; gap:30px; padding:26px 30px; border-radius:var(--r-gift); background:var(--gift-bg); border:1px solid var(--gift-line); } .subcard--aqua .subcard__inner{ background:#e9f8ff; border-color:#c7e9fa; } .subcard__body{display:flex;flex-direction:column;align-items:flex-start;gap:10px} .subcard__title{ font-size:24px; font-weight:700; line-height:1.1; letter-spacing:-.01em; color:var(--pink); } .subcard__actions{display:flex;gap:10px;flex:0 0 auto} .subcard__actions .btn{min-width:180px} /* Один блок вместо двух: слева оффер (цена + кнопки), справа яркая плашка подарков по тарифам. Заголовок, скидка и цены прижаты к верху, кнопки — к низу, высота левой колонки тянется за правой. */ .subx{ --accent:#4fb934; display:grid; grid-template-columns:300px minmax(0,1fr); gap:var(--gap); padding:var(--pad); background:#fff; border-radius:var(--r-card); } .subx--aqua{--accent:#1183c4} .subx__offer{ display:flex; flex-direction:column; padding:26px 24px; border-radius:var(--r-gift); background:var(--gift-bg); border:1px solid var(--gift-line); } .subx--aqua .subx__offer{background:#e9f8ff;border-color:#c7e9fa} .subx__top{display:flex;flex-direction:column;align-items:flex-start;gap:10px} .subx__title{ font-size:24px; font-weight:700; line-height:1.1; letter-spacing:-.01em; color:var(--pink); } /* плашка скидки — по ширине контента, а не на всю колонку */ .subx__top .tag{align-self:flex-start} .subx__btns{display:flex;flex-direction:column;gap:10px;margin-top:auto;padding-top:24px} .subx__btns .btn{width:100%} .subx__gifts{ position:relative; overflow:hidden; padding:22px; border-radius:var(--r-gift); background:linear-gradient(90deg,var(--green-from) 0%,var(--green-to) 100%); } .subx--aqua .subx__gifts{background:linear-gradient(90deg,#41d3f2 0%,#1183c4 100%)} .subx__gtitle{position:relative;z-index:1;margin-bottom:12px;font-size:18px;font-weight:700;color:#fff} /* строка тарифа: название слева сверху, подарки чипами справа. Длинные чипы стоят в конце списка — короткие успевают собраться в один ряд */ .subx .tlist{gap:8px} .subx .trow{align-items:flex-start;gap:14px;min-height:0;padding:11px 14px} .subx .trow__name{flex:0 0 138px;font-size:15px;padding-top:2px} .subx .trow__items{gap:5px} .subx .trow__items li{gap:5px;padding:4px 8px 4px 4px;font-size:10.5px} .subx .trow__items li img{width:18px;height:18px;flex:0 0 18px} .subx .trow__badge{margin-bottom:4px;padding:2px 8px;font-size:9px} .subx__art{position:absolute;right:18px;top:12px;width:92px;pointer-events:none;user-select:none} /* Тарифы строками: слева название, справа подарки чипами. Ширина набора разная — сразу видно, где подарков больше, высота строк выровнена min-height. */ /* Плашки подарков — яркие: зелёная у абонемента, бирюзовая у нейроабонемента */ .gbanner--tariffs{--accent:#4fb934} .gbanner--aqua{ --accent:#1183c4; background:linear-gradient(90deg,#41d3f2 0%,#1183c4 100%); } .tlist{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px} .trow{ display:flex; align-items:center; gap:18px; min-height:64px; padding:12px 18px; border-radius:var(--r-gift); background:#fff; } .trow__name{ flex:0 0 176px; font-size:16px; font-weight:700; line-height:1.15; color:var(--accent); } .trow__badge{ display:block; width:max-content; margin-bottom:5px; padding:3px 9px; border-radius:30px; background:var(--accent); color:#fff; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .trow__items{ display:flex; flex-wrap:wrap; gap:8px; flex:1 1 auto; } .trow__items li{ position:relative; padding:6px 10px 6px 21px; border-radius:var(--r-chip); border:1px solid rgba(23,25,29,.08); font-size:11.5px; font-weight:500; line-height:1.2; white-space:nowrap; } .trow__items li::before{ content:''; position:absolute; left:9px;top:11px; width:5px;height:5px; border-radius:50%; background:var(--accent); } /* чип с иконкой подарка: точку-маркер заменяет картинка */ .subx .trow__items li{display:flex;align-items:center;gap:7px;padding:5px 10px 5px 6px} .subx .trow__items li::before{display:none} .subx .trow__items li img{width:22px;height:22px;flex:0 0 22px;object-fit:contain} .trow--top{box-shadow:0 0 0 3px rgba(255,255,255,.55)} .fineprint{ margin-top:14px; font-size:12px; font-weight:500; color:var(--ink-80); } /* ========================================================= 11. ФОНД ПОДАРОЧНЫХ КУРСОВ ========================================================= */ .fund{ padding:30px; border-radius:var(--r-card); border:1px solid var(--gift-line); background:var(--gift-bg); } .fund__title{font-size:24px;font-weight:600;line-height:1.1} .fund__sub{margin-top:10px;font-size:15px;font-weight:500;color:var(--ink-80);max-width:760px} .fund__list{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px} .fund__item{ position:relative; padding:9px 14px 9px 26px; border-radius:var(--r-chip); border:1px solid var(--gift-line); background:#fff; font-size:13px; font-weight:500; } .fund__item::before{ content:''; position:absolute; left:12px;top:14px; width:6px;height:6px; border-radius:50%; background:var(--green); } /* ========================================================= 12. БЛОК «ВОЗНИКЛИ ВОПРОСЫ» ========================================================= */ .contact{ padding:50px 30px; border-radius:var(--r-card); /* голубой градиент — тот же, что у плашки нейроабонемента */ background:linear-gradient(90deg,#41d3f2 0%,#1183c4 100%); text-align:center; color:#fff; } .contact__title{font-size:32px;font-weight:600;line-height:1.1} .contact__sub{margin:12px 0 26px;font-size:16px;font-weight:500;opacity:.95} .contact .btn--hero{margin-top:0} /* ========================================================= 13. АНИМАЦИЯ Появление при скролле навешивает JS (класс .js-reveal). Без JS и при отключённой анимации контент виден сразу — ничего не прячем стилями «на всякий случай». ========================================================= */ .js-reveal{ opacity:0; transform:translateY(18px); transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1); will-change:opacity,transform; } .js-reveal.is-visible{opacity:1;transform:none} /* Надувные буквы покачиваются на воде. Двигаем через отдельные свойства translate/rotate, чтобы не затирать transform, которым позиционируются некоторые элементы. */ @keyframes floatSoft{ 0%,100%{translate:0 0;rotate:-.35deg} 50%{translate:0 -10px;rotate:.35deg} } .hero__title img{animation:floatSoft 6s ease-in-out infinite} /* 3D-подарки и корзина — тот же приём, разный ритм */ @keyframes floatGift{ 0%,100%{translate:0 0;rotate:0deg} 50%{translate:0 -9px;rotate:-2.5deg} } .gbanner__art--box1{animation:floatGift 5s ease-in-out infinite} .gbanner__art--box2{animation:floatGift 6.4s ease-in-out .7s infinite} .gbanner__art--basket{animation:floatGift 7.2s ease-in-out infinite} .gbanner__art--corner{animation:floatGift 6s ease-in-out infinite} /* Карточки чуть приподнимаются под курсором */ .pcard,.ccard,.subcard,.tcard{transition:transform .25s ease,box-shadow .25s ease} .ccard:hover,.subcard:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(23,25,29,.10)} .pcard:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(23,25,29,.08)} .tcard:hover{transform:translateY(-3px)} /* Пульс вокруг главных кнопок */ @keyframes ctaPulse{ 0%{box-shadow:0 0 0 0 rgba(255,110,140,.5)} 70%{box-shadow:0 0 0 16px rgba(255,110,140,0)} 100%{box-shadow:0 0 0 0 rgba(255,110,140,0)} } .btn--hero{animation:ctaPulse 3s ease-out infinite} .btn--hero:hover{animation:none} /* ========================================================= ADAPTIVE — horizontal tablet (≤1199) ========================================================= */ @media (max-width:1199px){ /* узкая колонка — не даём тексту кнопки ломаться на две строки */ .btn{padding:14px 10px;font-size:13px;white-space:nowrap} .pcard{grid-template-columns:300px minmax(0,1fr) minmax(0,320px)} /* у профессий колонок всего две — общее правило выше их не касается */ .pcard--compact{grid-template-columns:200px minmax(0,1fr)} .pcard--tariffs{grid-template-columns:300px minmax(0,1fr)} .pcard__media{min-height:280px} .gbanner__list{max-width:calc(100% - 220px)} .gbanner__art--basket{width:260px;bottom:-30px} .subx{grid-template-columns:290px minmax(0,1fr)} .subx__offer{padding:22px 18px} .subx__title{font-size:22px} } /* ========================================================= ADAPTIVE — vertical tablet (≤991) ========================================================= */ @media (max-width:991px){ .section{padding-top:48px} .section__title{font-size:28px} .timer{gap:20px;padding:12px 20px;flex-wrap:wrap} .timer__label{font-size:14px} .hero{min-height:520px} .hero__inner{padding:44px 20px} /* фото — на всю ширину, инфо и подарки в две колонки. Высота задаётся пропорцией, а не числом: иначе широкий блок режет почти квадратный кадр в узкую ленту. */ .pcard{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .pcard__media{grid-column:1 / -1;min-height:0;height:auto;aspect-ratio:16/9} .pcard--tariffs .pcard__media{aspect-ratio:3/2} .pcard--tariffs{grid-template-columns:minmax(0,1fr)} .tariff{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .courses{grid-template-columns:repeat(2,minmax(0,1fr))} /* профессии: две горизонтальные карточки в ряд уже не помещаются — разворачиваем в одну колонку, фото остаётся слева */ .programs--two{grid-template-columns:minmax(0,1fr)} .pcard--compact{grid-template-columns:300px minmax(0,1fr)} /* возвращаем фото в левую колонку: общее правило выше кладёт его на всю ширину */ .pcard--compact .pcard__media{ grid-column:auto; aspect-ratio:auto; height:auto; min-height:260px; } .subcard{padding:14px} .subcard__inner{flex-direction:column;align-items:stretch;gap:20px;padding:20px} .subcard__actions .btn{flex:1 1 0;min-width:0} /* места на две колонки уже нет — оффер сверху, подарки под ним, кнопки встают в ряд */ .subx{grid-template-columns:minmax(0,1fr);padding:14px;gap:14px} .subx__offer{padding:20px} .subx__btns{flex-direction:row;padding-top:20px} .subx__btns .btn{flex:1 1 0;min-width:0} .subx__art{width:78px;right:14px} .trow__name{flex:0 0 160px;font-size:15px} .gbanner__art--corner{width:88px;right:14px} .contact{padding:40px 20px} .contact__title{font-size:26px} .gbanner__list{max-width:calc(100% - 180px)} .gbanner__art--basket{width:200px;bottom:-20px;right:0} .gbanner--short .gbanner__list{max-width:calc(100% - 200px)} .gbanner__art--box1{width:150px;right:50px;bottom:-25px} .gbanner__art--box2{width:80px;right:10px} } /* ========================================================= ADAPTIVE — mobile (≤767) ========================================================= */ @media (max-width:767px){ .container{padding:0 12px} .section{padding-top:40px} .section__title{font-size:24px} .section__sub{font-size:14px} .timer{ flex-direction:column; gap:12px; padding:14px 16px; min-height:0; } .timer__label{font-size:13px;text-align:center} .hero{min-height:0} .hero__inner{padding:32px 16px} .hero__title{margin-top:18px} .hero__lead{margin-top:20px;padding:16px 18px;font-size:15px;border-radius:16px} .hero__lead--tabs{padding:0;gap:8px} .hero__tab{padding:9px 14px;font-size:14px;border-radius:14px} .hero__note{margin-top:8px;padding:9px 14px;font-size:14px;border-radius:14px} .pcard,.tariff{grid-template-columns:minmax(0,1fr)} .pcard{padding:12px;gap:14px} /* пропорции кадра из макета: обычное фото 353×312, вертикальное — 353×678 */ .pcard__media{height:auto;aspect-ratio:353/312} .pcard--tariffs .pcard__media{aspect-ratio:353/470} .pcard__title{font-size:20px} .tariff{padding:14px;gap:14px} .courses,.courses--four{grid-template-columns:minmax(0,1fr)} .ccard__media{height:180px} .trow{flex-direction:column;align-items:stretch;gap:10px;min-height:0} .trow__name{flex:none;font-size:15px} .trow__items li{white-space:normal} /* на узком экране в шапке места нет — уводим арт вниз, в свободное поле */ .gbanner--tariffs{padding-bottom:130px} /* строка стала колонкой — 152px базиса превратились бы в высоту, отсюда дыра */ .subx .trow__name{flex:none} .subx__gifts{padding:18px 14px 100px} .subx__art{top:auto;bottom:12px;right:50%;transform:translateX(50%);width:84px} .subx__gtitle{font-size:16px} .gbanner__art--corner{top:auto;bottom:12px;right:50%;transform:translateX(50%);width:104px} .fund{padding:20px 16px} .fund__title{font-size:20px} .contact{padding:32px 16px} .contact__title{font-size:22px} .contact__sub{font-size:14px} .subcard__title{font-size:20px} .gbanner{padding:20px 16px 150px} .gbanner--short{padding-bottom:130px} .gbanner__title{font-size:16px} .gbanner__list,.gbanner--short .gbanner__list{max-width:100%} .gbanner__art--basket{width:170px;right:50%;transform:translateX(50%);bottom:-14px} .gbanner__art--box1{width:118px;right:50%;transform:translateX(40%);bottom:2px} .gbanner__art--box2{width:62px;right:auto;left:16%;top:auto;bottom:56px} } /* ========================================================= ADAPTIVE — small mobile (≤575) ========================================================= */ @media (max-width:575px){ .pcard__actions{flex-direction:column} .pcard__actions .btn{width:100%} .btn--hero{width:100%;min-width:0} .price__main{font-size:18px} .flip__card{width:24px;height:34px} .flip__digit{font-size:17px} .flip__colon{line-height:34px;font-size:17px} .gitem{font-size:12px;padding:8px} .gitem img{width:32px;height:32px;flex:0 0 32px} .subx__btns{flex-direction:column} .subx__title{font-size:20px} } /* уважаем системную настройку «меньше движения» */ @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto} } /* ========================================================= 14. ПОПАПЫ ЗАЯВОК (виджеты GetCourse) Форма подгружается в .reg-modal__body при первом открытии, логика — в script.js, блок «ПОПАПЫ ЗАЯВОК». ========================================================= */ .reg-modal{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(23,25,29,.68); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); visibility:hidden; opacity:0; pointer-events:none; transition:opacity .25s ease,visibility .25s ease; } .reg-modal.is-open{visibility:visible;opacity:1;pointer-events:auto} .reg-modal__panel{ position:relative; width:min(620px,100%); max-height:min(92vh,92svh); border-radius:var(--r-card); background:#fff; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .reg-modal__body{width:100%;min-height:160px} .reg-modal__body iframe{display:block;width:100%;border:0} .reg-modal__close{ position:absolute; top:10px;right:12px; z-index:2; width:38px;height:38px; border:0; border-radius:50%; background:rgba(23,25,29,.08); color:var(--ink); font-size:26px; line-height:1; cursor:pointer; transition:background .2s ease; } .reg-modal__close:hover{background:rgba(23,25,29,.18)}