/* Matezhka — вёрстка страницы вебинаров (из макета заказчика). Шрифты Nunito/Caveat подключаются с Google Fonts в , а не вшиты в CSS base64, как было в макете. */ :root{ --turq:#1587A9; --turq-deep:#11697F; --turq-rich:#229BB8; --sky:#CFEDF5; --sky-mid:#9ED2E0; --pink:#F3A6C4; --pink-deep:#C76C96; --ink:#22343a; --ink-head:#152a31; --muted:#5d757e; --paper:#fbfdfe; --card:#ffffff; --line:#dceaef; --grad: linear-gradient(165deg,#CFEDF5 0%,#e8f6fa 45%,#ffffff 100%); --shadow-s:0 4px 16px rgba(17,105,127,.08); --shadow-m:0 12px 34px rgba(17,105,127,.12); --maxw:1080px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'Nunito',system-ui,-apple-system,sans-serif; background:var(--paper); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased; } @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px} h1,h2,h3,h4{color:var(--ink-head);line-height:1.1;text-wrap:balance} a{color:inherit} .eyebrow{font-weight:800;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--turq)} .eyebrow.pink{color:var(--pink-deep)} .live{font-weight:800;color:var(--ink-head);background:rgba(158,210,224,.48); padding:2px 6px;border-radius:5px; box-decoration-break:clone;-webkit-box-decoration-break:clone} /* buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; background:var(--turq);color:#ffffff;text-decoration:none;border:none;cursor:pointer; font-family:'Nunito';font-weight:800;font-size:17px;padding:15px 30px;border-radius:40px; box-shadow:0 6px 18px rgba(21,135,169,.28);transition:transform .15s ease,background .15s ease; white-space:nowrap; } .btn:hover{background:var(--turq-deep);color:#fff;transform:translateY(-2px)} .btn:focus-visible{outline:3px solid var(--pink-deep);outline-offset:3px} .btn-sm{font-size:15px;padding:11px 17px;box-shadow:none} .btn-ghost{background:#fff;color:var(--turq-deep);box-shadow:inset 0 0 0 2px var(--sky-mid)} .btn-ghost:hover{background:var(--sky);color:var(--turq-deep)} /* NAV */ .nav{position:sticky;top:0;z-index:50;background:rgba(251,253,254,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} .nav-in{max-width:var(--maxw);margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:18px} .nav-logo{display:flex;align-items:center;gap:11px;text-decoration:none} .nav-logo img{width:46px;height:46px;display:block} .nav-logo span{font-family:'Caveat',cursive;font-weight:700;font-size:27px;color:var(--muted);letter-spacing:1px} .nav-links{margin-left:auto;display:flex;gap:22px;align-items:center} .nav-links a:not(.btn){text-decoration:none;font-weight:700;font-size:15px;color:var(--muted);white-space:nowrap} .nav-links a:not(.btn):hover{color:var(--turq-deep)} .burger{display:none;margin-left:auto;background:none;border:none;cursor:pointer;padding:8px;border-radius:10px} .burger span{display:block;width:24px;height:2.5px;background:var(--turq-deep);border-radius:2px;margin:5px 0} .burger:focus-visible{outline:3px solid var(--pink-deep)} @media(max-width:940px){ .burger{display:block} .nav-links{ position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line); flex-direction:column;align-items:stretch;gap:0;padding:8px 22px 18px;box-shadow:var(--shadow-m); } .nav-links[hidden]{display:none} .nav-links a:not(.btn){padding:13px 0;border-bottom:1px solid var(--line);font-size:16.5px} .nav-links .btn{margin-top:14px} } @media(min-width:941px){.nav-links[hidden]{display:flex}} /* HERO */ .hero{background:var(--grad);padding:54px 0 62px;border-bottom:1px solid var(--line)} .hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:stretch} .hero-left{display:flex;flex-direction:column} .hero h1{font-size:clamp(33px,4.7vw,54px);margin:14px 0 18px;font-weight:800} .hero h1 .dash{font-weight:700;letter-spacing:-.02em;margin:0 -.04em} .hero h1 .nb{white-space:nowrap} .hero-lead{font-size:18.5px;font-weight:600;color:var(--ink);max-width:36em;margin-bottom:10px} .hero-by{font-family:'Caveat',cursive;font-weight:700;font-size:27px;color:var(--pink-deep);margin-bottom:24px} .hero-cta{margin-bottom:24px} .trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding-top:22px;margin-top:auto;border-top:1px solid rgba(21,135,169,.18)} .trust div{display:flex;flex-direction:column;gap:2px} .trust b{font-family:'Caveat',cursive;font-weight:700;font-size:30px;color:var(--turq);line-height:1} .trust span{font-size:13px;font-weight:700;color:var(--muted)} @media(max-width:440px){.trust{grid-template-columns:1fr 1fr}} /* next-webinar ticket */ .ticket{background:rgba(243,166,196,.16);border-radius:22px;box-shadow:var(--shadow-m);overflow:hidden;border:1px solid rgba(199,108,150,.30);display:flex;flex-direction:column;backdrop-filter:blur(2px)} .ticket-top{background:var(--pink-deep);color:#fff;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px} .ticket-top b{font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase} .ticket-top span{font-size:13px;font-weight:700;background:rgba(255,255,255,.2);padding:4px 12px;border-radius:20px;white-space:nowrap} .ticket-body{padding:22px 24px 24px} .ticket-date{display:flex;align-items:baseline;gap:10px;margin-bottom:10px} .ticket-day{font-family:'Caveat',cursive;font-weight:700;font-size:54px;color:var(--pink-deep);line-height:.8} .ticket-mon{font-weight:800;font-size:15px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px} .ticket-body h3{font-size:21px;margin-bottom:8px} .ticket-meta{font-size:14.5px;font-weight:700;color:var(--muted);margin-bottom:18px} .ticket-body .btn{width:100%} .btn-ticket{display:flex;width:100%;align-items:center;justify-content:space-between;gap:14px; background:rgba(243,166,196,.45);color:var(--ink-head);border:none;cursor:pointer; font-family:'Nunito';font-weight:800;font-size:17px;padding:16px 20px;border-radius:14px; transition:background .15s ease} .btn-ticket:hover{background:rgba(243,166,196,.68)} .btn-ticket:focus-visible{outline:3px solid var(--pink-deep);outline-offset:3px} .btn-ticket svg{flex-shrink:0;display:block} .btn-ticket:hover svg{transform:translateX(3px);transition:transform .15s ease} .ticket-note{font-size:13px;font-weight:700;color:var(--muted);text-align:left;margin-top:12px;padding-left:2px} /* Блоки, которые прячутся атрибутом hidden до прихода расписания */ [hidden]{display:none!important} /* Пустая карточка «ближайший эфир» не должна растягиваться на всю колонку */ .ticket.is-empty{align-self:flex-start} .ticket-next{margin-top:auto;border-top:1px solid rgba(199,108,150,.25);background:rgba(255,255,255,.55);padding:16px 24px 18px} .ticket-next h4{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px} .tn-row{display:flex;gap:11px;align-items:baseline;padding:6px 0;font-size:14.5px} .tn-row b{font-family:'Caveat',cursive;font-weight:700;font-size:22px;color:var(--pink-deep);line-height:1;min-width:26px} .tn-row span{font-weight:700;color:var(--ink);line-height:1.3} .tn-row i{font-style:normal;font-weight:700;color:var(--muted);white-space:nowrap} .tn-all{display:inline-block;margin-top:10px;font-size:13.5px;font-weight:800;color:var(--turq);text-decoration:none} .tn-all:hover{text-decoration:underline} @media(max-width:860px){.hero-in{grid-template-columns:1fr;gap:32px}} /* SECTIONS */ section{padding:74px 0} .sec-head{max-width:700px;margin-bottom:38px} .sec-head h2{font-size:clamp(26px,3.4vw,38px);margin-top:10px} .sec-head h2 .hl{font-family:'Caveat',cursive;font-weight:700;color:var(--turq);font-size:1.16em} .sec-head p{margin-top:14px;font-size:17px;font-weight:600;color:var(--muted)} /* SCHEDULE */ .sched{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .rail{display:grid;gap:0} .wcard{display:grid;grid-template-columns:92px 1fr 188px;gap:24px;padding:28px 4px; border-top:1px solid var(--line);transition:background .15s ease} .wcard:last-of-type{border-bottom:1px solid var(--line)} .wcard:hover{background:#f8fcfd} .r-date{display:flex;flex-direction:column;gap:2px} .r-day{font-family:'Caveat',cursive;font-weight:700;font-size:46px;color:var(--turq-deep);line-height:.8} .r-dow{font-size:12.5px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1px} .r-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px} .r-head h3{font-size:20px;font-weight:800;line-height:1.2} .r-grade{font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase; padding:5px 12px;border-radius:20px;color:#fff;background:var(--turq);white-space:nowrap} .r-grade.wide{background:var(--pink-deep)} .r-list{list-style:none;display:grid;gap:7px;margin-bottom:14px} .r-list li{position:relative;padding-left:22px;font-size:15.5px;font-weight:600;color:var(--ink)} .r-list li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px; border-radius:50%;background:var(--sky-mid)} .r-where{font-size:14.5px;font-weight:700;color:var(--turq-deep);background:var(--sky); padding:11px 16px;border-radius:12px;line-height:1.45} .r-where b{color:var(--ink-head)} .r-buy{display:flex;flex-direction:column;align-items:stretch;gap:8px} .r-buy .btn{width:100%} .r-buy small{font-size:12.5px;font-weight:700;color:var(--muted);text-align:center;line-height:1.35} @media(max-width:900px){ .wcard{grid-template-columns:74px 1fr;gap:16px 18px;padding:24px 4px} .r-day{font-size:38px} .r-buy{grid-column:1/-1;flex-direction:row;align-items:center;gap:14px} .r-buy .btn{width:auto} .r-buy small{text-align:left} } .sched-cta{margin-top:28px;background:var(--sky);border-radius:18px;padding:22px 26px; display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap} .sched-cta p{font-size:16.5px;font-weight:700;color:var(--turq-deep);max-width:46ch} .sched-cta p b{color:var(--ink-head)} /* WHAT YOU GET */ .incl{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#fff} .incl > div{padding:30px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)} .incl > div:nth-child(2n){border-right:none} .incl > div:nth-last-child(-n+2){border-bottom:none} .incl h4{font-size:19px;margin-bottom:8px;display:flex;align-items:center;gap:10px} .incl h4 i{width:30px;height:30px;border-radius:9px;background:var(--sky);color:var(--turq-deep); display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;font-size:14px;flex-shrink:0} .incl p{font-size:16px;font-weight:600;color:var(--muted)} .incl p b{color:var(--ink)} @media(max-width:700px){ .incl{grid-template-columns:1fr} .incl > div{border-right:none} .incl > div:last-child{border-bottom:none} } /* HOW */ .how{background:var(--grad)} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .step{background:#fff;border-radius:20px;padding:26px 24px;box-shadow:var(--shadow-s)} .step .n{width:44px;height:44px;border-radius:50%;background:var(--turq);color:#fff; font-weight:800;font-size:19px;display:flex;align-items:center;justify-content:center;margin-bottom:16px} .step h4{font-size:17.5px;margin-bottom:7px} .step p{font-size:15px;font-weight:600;color:var(--muted)} .step p a{color:var(--turq);font-weight:800;text-decoration:none} .step p a:hover{text-decoration:underline} @media(max-width:880px){.steps{grid-template-columns:1fr 1fr}} @media(max-width:520px){.steps{grid-template-columns:1fr}} /* PARENTS */ .parents{background:#fff} .p-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center} .p-list{list-style:none;display:grid;gap:16px} .p-list li{position:relative;padding-left:32px;font-size:16.5px;font-weight:600} .p-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--turq);font-weight:800;font-size:19px} .compare{background:var(--sky);border-radius:22px;padding:30px 32px} .compare h4{font-size:18px;margin-bottom:18px} .cmp-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px dashed rgba(17,105,127,.25)} .cmp-row:last-of-type{border-bottom:none} .cmp-row span{font-size:15.5px;font-weight:700;color:var(--turq-deep)} .cmp-row b{font-family:'Caveat',cursive;font-weight:700;font-size:28px;color:var(--turq-deep);white-space:nowrap;font-variant-numeric:tabular-nums} .cmp-row.us b{color:var(--pink-deep);font-size:34px} .cmp-foot{margin-top:16px;font-size:14.5px;font-weight:700;color:var(--turq-deep);opacity:.85} @media(max-width:820px){.p-grid{grid-template-columns:1fr;gap:30px}} /* TEACHER */ .teacher{background:var(--grad)} .t-card{background:#fff;border-radius:24px;padding:38px 40px;box-shadow:var(--shadow-m);display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:start} .t-photo{width:132px;height:132px;border-radius:50%;flex-shrink:0;display:block} .t-card h3{font-size:25px;margin-bottom:6px} .t-role{font-family:'Caveat',cursive;font-weight:700;font-size:24px;color:var(--pink-deep);margin-bottom:14px} .t-card p{font-size:16.5px;font-weight:600;color:var(--ink);margin-bottom:12px;max-width:60ch} @media(max-width:700px){.t-card{grid-template-columns:1fr;padding:30px 26px}} /* REVIEWS */ .rev-top{display:flex;align-items:center;gap:16px;margin-bottom:30px;flex-wrap:wrap} .rev-stars{font-size:22px;letter-spacing:2px;color:#f5b400} .rev-top b{font-family:'Caveat',cursive;font-weight:700;font-size:34px;color:var(--ink-head)} .rev-top span{font-size:14.5px;font-weight:700;color:var(--muted);line-height:1.35} .rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch} .rev{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px} .rev.parent{background:#fdf6f9;border-color:#f3dee7} .rev p{font-size:15px;font-weight:600;color:var(--ink);flex:1 1 auto;margin-bottom:16px} .mark{background:rgba(21,135,169,.15);color:var(--turq-deep);font-weight:800;padding:1px 6px;border-radius:5px;box-decoration-break:clone;-webkit-box-decoration-break:clone} .rev.parent .mark{background:rgba(199,108,150,.16);color:var(--pink-deep)} .rev-a{display:flex;align-items:center;gap:10px} .ava{width:36px;height:36px;border-radius:50%;background:var(--sky-mid);color:var(--turq-deep);font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0} .rev.parent .ava{background:#f3dee7;color:var(--pink-deep)} .rev-a b{font-size:14.5px;color:var(--ink-head);display:block;line-height:1.2} .rev-a i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--muted)} .rev-src{margin-top:22px;font-size:13.5px;font-weight:600;color:var(--muted)} @media(max-width:900px){.rev-grid{grid-template-columns:1fr 1fr}} @media(max-width:600px){.rev-grid{grid-template-columns:1fr}} /* FAQ */ .faq{background:#fff;border-top:1px solid var(--line)} .faq-list{max-width:760px;display:grid;gap:0} details{border-top:1px solid var(--line)} .faq-list details:last-child{border-bottom:1px solid var(--line)} summary{font-weight:800;font-size:17.5px;color:var(--ink-head);padding:20px 40px 20px 0;cursor:pointer;list-style:none;position:relative} summary::-webkit-details-marker{display:none} summary::after{content:"+";position:absolute;right:6px;top:16px;color:var(--turq);font-size:26px;font-weight:700} details[open] summary::after{content:"–"} summary:focus-visible{outline:3px solid var(--pink-deep);outline-offset:2px} details p{padding:0 0 22px;font-size:16px;font-weight:600;color:var(--muted);max-width:62ch} details p a{color:var(--turq);font-weight:800} /* FINAL */ .final{background:linear-gradient(135deg,var(--turq-deep),var(--turq));color:#fff;text-align:center} .final h2{color:#fff;font-family:'Caveat',cursive;font-weight:700;font-size:clamp(32px,5vw,52px);max-width:17ch;margin:0 auto 16px} .final p{font-size:18px;font-weight:600;opacity:.95;max-width:54ch;margin:0 auto 26px} .final .btn{background:#fff;color:var(--turq-deep)} .final .btn:hover{background:var(--sky);color:var(--turq-deep)} .final small{display:block;margin-top:20px;font-size:14px;font-weight:600;opacity:.85} /* FOOTER */ footer{background:var(--paper);padding:44px 0;text-align:center;border-top:1px solid var(--line)} .f-logo img{width:56px;height:56px;display:block;margin:0 auto 10px} .f-name{font-family:'Caveat',cursive;font-weight:700;font-size:30px;color:var(--muted);letter-spacing:2px} .f-tag{font-size:14px;font-weight:600;color:var(--muted);margin-top:4px} .f-legal{margin-top:16px;font-size:13px;font-weight:600;line-height:2} .f-legal a{color:var(--turq-deep);text-decoration:none;margin:0 6px;white-space:nowrap} .f-legal a:hover{text-decoration:underline} /* MODALS */ .overlay{position:fixed;inset:0;background:rgba(17,105,127,.55);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:20px;z-index:100} .overlay.open{display:flex} .modal{background:#fff;border-radius:24px;padding:32px;max-width:440px;width:100%;box-shadow:0 24px 70px rgba(17,105,127,.35);position:relative;max-height:92vh;overflow-y:auto} .m-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:28px;color:#9ab0b8;cursor:pointer;line-height:1} .m-close:hover{color:var(--turq-deep)} .modal h3{font-size:21px;margin-bottom:4px;padding-right:26px} .m-sub{font-size:14.5px;font-weight:700;color:var(--pink-deep);margin-bottom:20px} .fld{margin-bottom:13px} .fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld textarea{width:100%;border:2px solid var(--sky-mid);border-radius:12px;padding:13px 15px; font-family:'Nunito';font-size:16px;font-weight:600;color:var(--ink);background:#fbfdfe;resize:vertical} .fld input[type=text]:focus,.fld input[type=email]:focus,.fld input[type=tel]:focus,.fld textarea:focus{outline:none;border-color:var(--turq)} .fld input.bad,.fld textarea.bad{border-color:var(--pink-deep)} .err{display:none;font-size:13px;font-weight:700;color:var(--pink-deep);margin-top:5px} .err.show{display:block} .chk{display:flex;gap:10px;align-items:flex-start;margin-bottom:11px;cursor:pointer;font-size:14px;font-weight:600;line-height:1.4} .chk input{margin-top:2px;width:18px;height:18px;accent-color:var(--turq);flex-shrink:0} .chk a{color:var(--turq);font-weight:800} .chk b{color:var(--pink-deep)} .modal .btn{width:100%;margin-top:16px} .m-note{font-size:13px;font-weight:600;color:var(--muted);margin-top:13px;text-align:center} .thanks{display:none;text-align:center;padding:6px 0} .thanks.show{display:block} .thanks-ico{width:60px;height:60px;border-radius:50%;background:var(--turq);color:#fff;font-size:31px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}