/* ── css/base.css ── */ /* Общая основа всех страниц: переменные, типографика, шапка, кнопки, подвал. Подключается ПЕРВЫМ, до страничного файла. */ :root{ --blue:#1D5FA8; --blue2:#2E7BC4; --sky:#E3EFF9; --ink:#0F2031; --ink2:#16304A; --gold:#F2CC49; --gold-d:#B8901A; --lv1:#F0913A; --lv2:#2CBBA6; --lv3:#9A8CF0; --slate:#5A748C; --line:#CFE0F0; --line-d:#22415F; --display:'Unbounded','Golos Text',system-ui,sans-serif; --body:'Golos Text',system-ui,sans-serif; --mono:'JetBrains Mono',monospace; --pad:clamp(18px,5vw,72px); --sec:clamp(64px,9vw,124px); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:#fff;color:var(--ink);font-family:var(--body);font-weight:300;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} :focus-visible{outline:2px solid var(--gold);outline-offset:3px} .wrap{max-width:1160px;margin:0 auto;padding:0 var(--pad)} .dark{background:var(--ink);color:#EDF1F5} .dark .lede{color:#93A6B8} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:11px} .eyebrow::before{content:'';width:24px;height:1px;background:currentColor;opacity:.6} .dark .eyebrow{color:var(--gold)} h2.title{font-family:var(--display);font-weight:600;font-size:clamp(27px,4.2vw,50px);line-height:1.07;letter-spacing:-.025em;margin:16px 0 0} .lede{color:var(--slate);max-width:58ch;margin-top:15px;font-size:clamp(15px,1.6vw,18px)} section{padding:var(--sec) 0} /* nav */ .nav{position:fixed;inset:0 0 auto;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px var(--pad);transition:.3s;border-bottom:1px solid transparent} .nav.stuck{background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom-color:var(--line)} .nav.stuck .nav-links a,.nav.stuck .brand{color:var(--ink)} .nav.stuck .lang{border-color:var(--line)} .nav.stuck .lang button{color:var(--slate)} .nav.stuck .lang button.on{color:var(--ink)} .brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:15px;color:#fff;letter-spacing:-.01em} .brand img{width:30px} .nav-links{display:flex;gap:26px;font-size:14.5px;color:#C5DCF0} .nav-links a:hover{color:var(--gold)} .nav-right{display:flex;align-items:center;gap:12px} .lang{display:flex;border:1px solid rgba(255,255,255,.3);border-radius:999px;overflow:hidden} .lang button{background:none;border:0;color:#C5DCF0;font-family:var(--mono);font-size:11px;letter-spacing:.08em;padding:7px 11px;cursor:pointer;transition:.2s} .lang button.on{background:var(--gold);color:var(--ink)} .nav-cta{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;background:var(--gold);color:var(--ink);padding:10px 18px;border-radius:999px;white-space:nowrap;transition:.25s} .nav-cta:hover{background:#fff} .burger{display:none;background:none;border:0;color:currentColor;cursor:pointer} @media(max-width:940px){ .nav-links{position:fixed;inset:0 0 auto;padding:82px var(--pad) 30px;flex-direction:column;gap:20px;font-size:19px;background:var(--ink);transform:translateY(-102%);transition:transform .38s cubic-bezier(.4,0,.2,1)} .nav-links.open{transform:none} .nav-links a{color:#EDF1F5} .nav.stuck .nav-links a{color:#EDF1F5} .burger{display:block;color:#fff;position:relative;z-index:3} .nav.stuck .burger{color:var(--ink)} .nav-links.open ~ .nav-right .burger{color:#fff} .brand{position:relative;z-index:3} .nav-cta{display:none} } /* scale motif */ .scale{position:relative;height:2px;background:var(--line-d)} .scale.on-light{background:var(--line)} .scale .tick{position:absolute;top:-5px;width:1px;height:12px;background:currentColor;opacity:.45} .scale .tick span{position:absolute;top:15px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10px;opacity:.75} .scale .fill{position:absolute;left:0;top:0;height:2px;background:var(--gold);width:0;transition:width 1.7s cubic-bezier(.16,1,.3,1)} .pin{position:absolute;bottom:12px;transform:translateX(-50%);text-align:center;white-space:nowrap} .pin::after{content:'';position:absolute;left:50%;bottom:-12px;width:1px;height:12px;background:currentColor;opacity:.55} .pin b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(24px,4vw,42px);line-height:1;letter-spacing:-.03em} .pin small{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.8} .pin.ours{color:var(--gold)} .pin.theirs{color:#93A6B8} /* hero */ .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:112px 0 52px;position:relative;overflow:hidden} .hero::before{content:'';position:absolute;top:-25%;right:-8%;width:64vw;height:64vw;background:radial-gradient(circle,rgba(242,204,73,.13),transparent 62%);pointer-events:none} .hero h1{font-family:var(--display);font-weight:600;font-size:clamp(33px,6.6vw,80px);line-height:1;letter-spacing:-.035em;max-width:16ch;margin-top:20px} .hero h1 em{font-style:normal;color:var(--gold)} .hero-sub{color:#93A6B8;max-width:48ch;margin-top:20px;font-size:clamp(15px,1.8vw,19px)} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border-radius:999px;font-size:15px;font-weight:500;transition:.25s;border:0;cursor:pointer;font-family:var(--body)} .btn-gold{background:var(--gold);color:var(--ink)} .btn-gold:hover{background:#fff;transform:translateY(-2px)} .btn-ghost{border:1px solid var(--line-d);color:#EDF1F5;background:none} .btn-ghost:hover{border-color:var(--gold);color:var(--gold)} .btn-blue{background:var(--blue);color:#fff} .btn-blue:hover{background:var(--blue2)} .btn-out{border:1px solid var(--line);color:var(--ink);background:none} .btn-out:hover{border-color:var(--blue);color:var(--blue)} .hero-scale{margin-top:clamp(48px,8vw,96px);padding-bottom:32px} .hero-scale .rail{position:relative;height:104px} .hero-note{margin-top:24px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#93A6B8} /* levels */ .levels{background:var(--sky)} .lv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:42px} .lv{background:#fff;border-radius:16px;padding:28px 26px;border-top:4px solid var(--c);transition:.3s} .lv:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(29,95,168,.12)} .lv .range{font-family:var(--mono);font-size:13px;color:var(--c);font-weight:600;letter-spacing:.04em} .lv h3{font-family:var(--display);font-weight:600;font-size:19px;margin:10px 0 9px;letter-spacing:-.015em} .lv p{color:var(--slate);font-size:14.5px} @media(max-width:800px){.lv-grid{grid-template-columns:1fr}} /* formats */ .f-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:44px} .fmt{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;padding:30px 26px 28px;display:flex;flex-direction:column;transition:.3s} .fmt::before{content:'';position:absolute;inset:0 0 auto;height:4px;background:var(--a,var(--blue))} .fmt:hover{transform:translateY(-4px);border-color:var(--a,var(--blue));box-shadow:0 16px 36px rgba(29,95,168,.15)} .fmt.tint{background:var(--sky);border-color:transparent} .fmt.blue{background:linear-gradient(155deg,#1D5FA8,#2E7BC4);border-color:transparent;color:#fff} .fmt.blue p,.fmt.blue li{color:#DCEBF9} .fmt.blue .tagline{color:#fff} .fmt.blue li::before{border-color:#fff} .fmt.blue .btn-out{border-color:rgba(255,255,255,.55);color:#fff} .fmt.blue .btn-out:hover{background:#fff;color:var(--blue);border-color:#fff} .fmt .num{position:absolute;right:20px;top:18px;font-family:var(--display);font-weight:700;font-size:40px;line-height:1;color:var(--a,var(--blue));opacity:.16} .fmt.hl .num,.fmt.blue .num{opacity:.3} .fmt.hl{background:var(--ink);color:#EDF1F5;border-color:var(--ink)} .fmt.hl p,.fmt.hl li{color:#B7C7D6} .fmt .tagline{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--a,var(--blue))} .fmt.hl .tagline{color:var(--gold)} .fmt h3{font-family:var(--display);font-weight:600;font-size:21px;margin:10px 0 12px;letter-spacing:-.015em} .fmt ul{list-style:none;display:grid;gap:9px;margin:16px 0 24px} .fmt li{position:relative;padding-left:22px;font-size:14.5px;color:var(--slate)} .fmt li::before{content:'';position:absolute;left:0;top:8px;width:8px;height:8px;border-left:1.6px solid var(--a,var(--blue));border-bottom:1.6px solid var(--a,var(--blue));transform:rotate(-45deg)} .fmt.hl li::before{border-color:var(--gold)} .fmt .btn{margin-top:auto;align-self:flex-start} .intensive{margin-top:14px;border:1px solid rgba(240,145,58,.4);background:linear-gradient(120deg,rgba(240,145,58,.1),rgba(240,145,58,.02));border-radius:16px;padding:28px;display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap} .intensive .btn-out:hover{border-color:var(--lv1);color:var(--lv1)} .intensive .season{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--lv1);border:1px solid var(--lv1);padding:5px 12px;border-radius:999px;white-space:nowrap} @media(max-width:800px){.f-grid{grid-template-columns:1fr}} /* calculator */ .calc-box{margin-top:44px;border:1px solid var(--line-d);border-radius:20px;padding:clamp(24px,4vw,40px);background:linear-gradient(160deg,rgba(46,123,196,.12),transparent)} .calc-in{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .calc-in input{font-family:var(--mono);font-size:20px;width:150px;padding:14px 18px;border-radius:12px;border:1px solid var(--line-d);background:rgba(255,255,255,.06);color:#fff} .calc-in input::placeholder{color:#6E8496} .calc-hint{font-size:13.5px;color:#93A6B8;margin-top:12px} .calc-out{margin-top:30px;display:none} .calc-out.show{display:block} .calc-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:22px} .chip{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;padding:8px 14px;border-radius:999px;border:1px solid currentColor} .calc-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-d);border:1px solid var(--line-d);border-radius:14px;overflow:hidden;margin-bottom:22px} .calc-nums div{background:var(--ink);padding:20px 18px} .calc-nums b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(24px,3.4vw,34px);color:var(--gold);letter-spacing:-.03em;line-height:1} .calc-nums span{display:block;margin-top:8px;font-size:13px;color:#93A6B8} .peer{display:flex;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid rgba(34,65,95,.65);font-size:14.5px;flex-wrap:wrap} .peer:last-child{border:0} .peer .path{font-family:var(--mono);color:var(--gold);white-space:nowrap} .peer .uni{color:#93A6B8;text-align:right} @media(max-width:620px){.calc-nums{grid-template-columns:1fr}} /* teachers */ .t-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px} @media(max-width:1100px){.t-grid{grid-template-columns:repeat(2,1fr)}} .t-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.3s;background:#fff} .t-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(29,95,168,.14)} .t-photo{aspect-ratio:4/5;overflow:hidden;background:var(--sky)} .t-photo img{width:100%;height:100%;object-fit:cover} .t-photo.empty{display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:52px;color:var(--blue);opacity:.22} .t-body{padding:22px 22px 26px} .t-body h3{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.015em} .t-body .subj{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);margin-top:7px} .t-body p{color:var(--slate);font-size:14px;margin-top:12px} .t-score{display:inline-flex;align-items:baseline;gap:6px;margin-top:14px;background:var(--ink);color:var(--gold);font-family:var(--mono);font-weight:600;font-size:15px;padding:7px 13px;border-radius:8px} .t-score em{font-style:normal;font-size:10px;color:#93A6B8;letter-spacing:.06em} .t-card.hide{display:none} .awards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:44px} .award{border-radius:16px;overflow:hidden;position:relative} .award img{width:100%} .award figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 20px 16px;background:linear-gradient(transparent,rgba(15,32,49,.92));color:#fff;font-size:13.5px} .cert-row{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:center;margin-top:44px;background:var(--sky);border-radius:18px;padding:28px} .cert-row img{border-radius:10px;box-shadow:0 10px 26px rgba(15,32,49,.18)} @media(max-width:900px){.t-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.t-grid,.awards,.cert-row{grid-template-columns:1fr}} /* stats */ .dist{margin-top:44px;padding:32px 28px 26px;border:1px solid var(--line-d);border-radius:18px} .dist-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;align-items:baseline;margin-bottom:40px} .dist-head h3{font-family:var(--body);font-weight:600;font-size:17px} .dist-head span{font-family:var(--mono);font-size:11px;color:#93A6B8} .plot{position:relative;height:96px} .dot{position:absolute;bottom:0;width:9px;height:9px;border-radius:50%;transform:translate(-50%,50%);opacity:0;transition:opacity .5s;cursor:default} .dot.in{opacity:.9} .dot:hover{transform:translate(-50%,50%) scale(1.8);z-index:5} .dot::after{content:attr(data-l);position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:#000;border:1px solid var(--line-d);border-radius:7px;padding:6px 10px;font-family:var(--mono);font-size:10.5px;color:#fff;white-space:nowrap;opacity:0;pointer-events:none;transition:.2s} .dot:hover::after{opacity:1} .legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:34px;font-family:var(--mono);font-size:11px;color:#93A6B8} .legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px} .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:16px;background:var(--line-d);border:1px solid var(--line-d);border-radius:16px;overflow:hidden} .fact{background:var(--ink);padding:26px 22px} .fact b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(26px,3.6vw,38px);color:var(--gold);letter-spacing:-.03em;line-height:1} .fact span{display:block;margin-top:9px;font-size:13px;color:#93A6B8;line-height:1.45} @media(max-width:820px){.facts{grid-template-columns:repeat(2,1fr)}} .controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:44px;align-items:center} .tab{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;background:none;border:1px solid var(--line-d);color:#93A6B8;padding:10px 16px;border-radius:999px;cursor:pointer;transition:.25s} .tab:hover{color:#fff} .tab.on{background:var(--gold);border-color:var(--gold);color:var(--ink)} .search{flex:1;min-width:180px;padding:11px 16px;border-radius:999px;border:1px solid var(--line-d);background:rgba(255,255,255,.05);color:#fff;font-family:var(--body);font-size:14px} .search::placeholder{color:#6E8496} .tbl-wrap{margin-top:20px;border:1px solid var(--line-d);border-radius:16px;overflow:hidden} .tbl-scroll{max-height:520px;overflow-y:auto} table{width:100%;border-collapse:collapse;font-size:14.5px} thead th{position:sticky;top:0;text-align:left;font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#93A6B8;padding:14px 18px;background:#0B1A28;border-bottom:1px solid var(--line-d);cursor:pointer;white-space:nowrap} thead th:hover{color:var(--gold)} tbody td{padding:13px 18px;border-bottom:1px solid rgba(34,65,95,.5)} tbody tr:hover{background:rgba(242,204,73,.05)} .c-name{font-weight:500} .c-path{font-family:var(--mono);white-space:nowrap;color:#93A6B8} .c-path b{color:var(--gold)} .c-gain{font-family:var(--mono);font-weight:600;color:var(--lv2);white-space:nowrap} .c-uni{color:#B7C7D6} .tbl-foot{padding:14px 18px;font-family:var(--mono);font-size:11px;color:#93A6B8;background:#0B1A28} .note{margin-top:16px;font-size:13.5px;color:#93A6B8;max-width:70ch} @media(max-width:680px){ thead{display:none} tbody td{display:block;padding:4px 16px;border:0} tbody tr{display:block;padding:14px 0;border-bottom:1px solid rgba(34,65,95,.5)} .c-name{padding-top:10px!important} } /* reviews */ .reviews{background:var(--sky)} .r-grid{columns:3;column-gap:14px;margin-top:42px} .review{break-inside:avoid;background:#fff;border-radius:16px;padding:24px;margin-bottom:14px} .review p{font-size:14.5px;color:#31465A} .review .who{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)} .review .who b{font-size:14px;font-weight:600} .review .jump{font-family:var(--mono);font-size:11.5px;color:var(--blue);white-space:nowrap;margin-left:auto} @media(max-width:900px){.r-grid{columns:2}} @media(max-width:620px){.r-grid{columns:1}} /* contact */ .contact{background:var(--blue);color:#fff} .contact h2{font-family:var(--display);font-weight:600;font-size:clamp(28px,5vw,58px);line-height:1.03;letter-spacing:-.03em;max-width:17ch;margin-top:18px} .contact .eyebrow{color:var(--gold)} .contact .lede{color:#C5DCF0} .links{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-top:46px} .link{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:6px;transition:.3s} .link:hover{background:#fff;color:var(--blue);transform:translateY(-3px)} .link svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .link b{font-size:16.5px;font-weight:600;margin-top:8px} .link span{font-family:var(--mono);font-size:12px;opacity:.8} .link.soon{opacity:.55;pointer-events:none} @media(max-width:760px){.links{grid-template-columns:1fr}} footer{background:var(--ink);color:#93A6B8;padding:34px 0;font-size:13px} .f-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center} .f-in img{width:26px;opacity:.85} /* ===== кыргызская версия ===== В Unbounded нет кыргызских букв ү ө ң — браузер подставлял под них чужой шрифт, и в одном слове получалась мешанина. На кыргызском заголовки набираем Golos Text: у него полная поддержка расширенной кириллицы. */ html[lang="ky"]{--display:'Golos Text',system-ui,sans-serif} html[lang="ky"] h1, html[lang="ky"] h2.title, html[lang="ky"] .brand{font-weight:800;letter-spacing:-.03em} html[lang="ky"] h1{line-height:1.04} /* ===== внутренние страницы (преподаватели, статистика) ===== */ body.inner{padding-top:74px} body.inner .nav{position:fixed;top:0;left:0;right:0;background:rgba(255,255,255,.92); backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} body.inner .nav a,body.inner .nav .brand{color:var(--ink)} body.inner .nav-links a{color:var(--slate)} body.inner .burger{color:var(--ink)} body.inner .lang{border-color:var(--line)} body.inner .lang button{color:var(--slate)} body.inner .lang button.on{background:var(--gold);color:var(--ink)} body.inner .nav-cta{background:var(--gold);color:var(--ink)} @media(max-width:940px){body.inner{padding-top:66px}} /* ===== подвал ===== Три колонки: кто мы · разделы · контакты. На телефоне складываются в столбик. Нижняя строка — копирайт и город. Кнопок действия здесь нет намеренно: подвал существует, чтобы человек нашёл контакты, а не чтобы ещё раз продать. */ .site-footer{background:var(--ink);color:#8FA3B8;padding:66px 0 0;font-size:14px} .ft-top{display:grid;grid-template-columns:1.4fr .9fr 1.1fr;gap:52px;align-items:start} .ft-logo{display:inline-flex;align-items:center;gap:11px;font-family:var(--display); font-weight:600;font-size:20px;color:#fff;letter-spacing:-.015em} .ft-logo img{width:34px} .ft-brand p{margin-top:15px;line-height:1.65;max-width:36ch} .ft-badge{display:inline-flex;align-items:center;gap:9px;margin-top:20px;padding:8px 15px; border-radius:999px;background:rgba(242,204,73,.10);border:1px solid rgba(242,204,73,.28); color:var(--gold);font-family:var(--mono);font-size:11.5px;letter-spacing:.05em} .ft-badge i{width:7px;height:7px;border-radius:50%;background:var(--gold); box-shadow:0 0 0 4px rgba(242,204,73,.18)} .ft-col{display:flex;flex-direction:column;gap:12px} .ft-col b{color:#EDF1F5;font-family:var(--mono);font-size:11px;font-weight:400; letter-spacing:.16em;text-transform:uppercase;margin-bottom:5px} .ft-col > a{color:#8FA3B8;transition:.2s;width:fit-content} .ft-col > a:hover{color:var(--gold)} .ft-contacts{gap:9px} .ft-c{display:flex;align-items:center;gap:13px;padding:12px 16px;border-radius:13px; border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);transition:.22s} .ft-c:hover{border-color:rgba(242,204,73,.5);background:rgba(242,204,73,.06)} .ft-c svg{width:19px;height:19px;flex:none;color:var(--gold)} .ft-c span{display:flex;flex-direction:column;gap:1px;line-height:1.3; color:#EDF1F5;font-size:14.5px;font-weight:500} .ft-c em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em; text-transform:uppercase;color:#6F869B} .ft-hint{margin-top:8px;font-size:12.5px;line-height:1.5;color:#6F869B} .ft-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px; margin-top:56px;padding:22px 0 26px;border-top:1px solid rgba(255,255,255,.08); font-size:12.5px;font-family:var(--mono);letter-spacing:.03em;color:#5E7386} @media(max-width:900px){ .site-footer{padding-top:46px} .ft-top{grid-template-columns:1fr;gap:38px} .ft-brand p{max-width:none} .ft-bottom{margin-top:38px;flex-direction:column;gap:8px} } } /* ── css/base-extra.css ── */ @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1;transform:none}.dot{opacity:.9}} /* ===== цветные фоны и декор ===== */ .tinted{position:relative;background:linear-gradient(178deg,#F4F9FD 0%,#E3EFF9 45%,#EDF5FC 100%);overflow:hidden} .tinted>.wrap{position:relative;z-index:2} .blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:1} .hero .blob{filter:blur(90px);opacity:.5} .sec-mesh{position:relative;overflow:hidden} .sec-mesh>.wrap{position:relative;z-index:2} /* ===== кнопки ===== */ .btn-blue,.nav-cta{box-shadow:0 6px 18px rgba(29,95,168,.22)} .btn-out{background:rgba(255,255,255,.6)} .link{backdrop-filter:blur(6px)} /* ===== лампочка как сквозной мотив ===== */ .eyebrow::before{ width:15px;height:15px;background:currentColor;opacity:1; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.6a6.1%206.1%200%200%200-3.6%2011c.5.4.8%201%20.8%201.6v.6h5.6v-.6c0-.6.3-1.2.8-1.6A6.1%206.1%200%200%200%2012%202.6Z%22%2F%3E%3Cpath%20d%3D%22M9.6%2018.6h4.8M10.6%2021.2h2.8%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.6a6.1%206.1%200%200%200-3.6%2011c.5.4.8%201%20.8%201.6v.6h5.6v-.6c0-.6.3-1.2.8-1.6A6.1%206.1%200%200%200%2012%202.6Z%22%2F%3E%3Cpath%20d%3D%22M9.6%2018.6h4.8M10.6%2021.2h2.8%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; } .wm::after{ content:'';position:absolute;right:-5%;top:50%;transform:translateY(-50%); width:min(44vw,480px);aspect-ratio:1;background:var(--gold);opacity:.045;pointer-events:none;z-index:0; -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.6a6.1%206.1%200%200%200-3.6%2011c.5.4.8%201%20.8%201.6v.6h5.6v-.6c0-.6.3-1.2.8-1.6A6.1%206.1%200%200%200%2012%202.6Z%22%2F%3E%3Cpath%20d%3D%22M9.6%2018.6h4.8M10.6%2021.2h2.8%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.6a6.1%206.1%200%200%200-3.6%2011c.5.4.8%201%20.8%201.6v.6h5.6v-.6c0-.6.3-1.2.8-1.6A6.1%206.1%200%200%200%2012%202.6Z%22%2F%3E%3Cpath%20d%3D%22M9.6%2018.6h4.8M10.6%2021.2h2.8%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; } .wm{position:relative;overflow:hidden} .wm>.wrap{position:relative;z-index:2} /* кнопка наверх */ #toTop{ position:fixed;right:22px;bottom:22px;z-index:90;width:50px;height:50px;border-radius:50%; border:1px solid rgba(242,204,73,.45);background:rgba(15,32,49,.9);backdrop-filter:blur(8px); cursor:pointer;display:grid;place-items:center;opacity:0;transform:translateY(14px); transition:opacity .3s,transform .3s,box-shadow .3s; } #toTop.show{opacity:1;transform:none} #toTop::before{ content:'';width:24px;height:24px;background:var(--gold); -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.6a6.1%206.1%200%200%200-3.6%2011c.5.4.8%201%20.8%201.6v.6h5.6v-.6c0-.6.3-1.2.8-1.6A6.1%206.1%200%200%200%2012%202.6Z%22%2F%3E%3Cpath%20d%3D%22M9.6%2018.6h4.8M10.6%2021.2h2.8%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.6a6.1%206.1%200%200%200-3.6%2011c.5.4.8%201%20.8%201.6v.6h5.6v-.6c0-.6.3-1.2.8-1.6A6.1%206.1%200%200%200%2012%202.6Z%22%2F%3E%3Cpath%20d%3D%22M9.6%2018.6h4.8M10.6%2021.2h2.8%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; } #toTop:hover{box-shadow:0 0 26px rgba(242,204,73,.45);border-color:var(--gold)} @media(max-width:520px){#toTop{right:14px;bottom:14px;width:44px;height:44px}} /* ===== маленькие светящиеся лампочки по сайту ===== */ :root{--bulb:url("img/logo.png")} .spark{position:absolute;background:var(--bulb) center/contain no-repeat;pointer-events:none;z-index:1; animation:sdrift var(--sd,9s) ease-in-out infinite, sglow var(--sg,4.4s) ease-in-out infinite; animation-delay:var(--dl,0s),var(--dl,0s)} @keyframes sdrift{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-20px) rotate(7deg)}} @keyframes sglow{0%,100%{opacity:.4;filter:drop-shadow(0 0 5px rgba(242,204,73,.3))} 22%{opacity:.7;filter:drop-shadow(0 0 12px rgba(242,204,73,.5))} 30%{opacity:.35;filter:drop-shadow(0 0 4px rgba(242,204,73,.2))} 56%{opacity:.95;filter:drop-shadow(0 0 20px rgba(242,204,73,.8))} 74%{opacity:.6;filter:drop-shadow(0 0 10px rgba(242,204,73,.4))}} .dark .spark,.contact .spark{--o:1} @media(max-width:760px){.spark.hide-m{display:none}} @media(prefers-reduced-motion:reduce){.spark{animation:none;opacity:.55}} /* ===== заметные подписи секций и разделители ===== */ /* подпись секции = главный заголовок, бывший заголовок = подзаголовок */ .eyebrow{font-family:var(--display);font-weight:700;font-size:clamp(27px,4.4vw,52px); letter-spacing:-.03em;text-transform:none;color:var(--ink);gap:14px;align-items:center;line-height:1.05} .eyebrow::before{width:clamp(26px,3vw,38px);height:clamp(26px,3vw,38px);background:var(--blue);flex:none} .dark .eyebrow,.contact .eyebrow{color:#EDF1F5} .dark .eyebrow::before,.contact .eyebrow::before{background:var(--gold)} h2.title{font-family:var(--body);font-weight:600;font-size:clamp(16.5px,1.9vw,22px); letter-spacing:-.005em;color:var(--blue);margin-top:12px;line-height:1.35} .dark h2.title,.contact h2.title{color:var(--gold)} .lede{font-size:clamp(14.5px,1.35vw,16.5px);margin-top:10px} .contact h2{font-family:var(--body);font-weight:600;font-size:clamp(16.5px,1.9vw,22px);color:var(--gold);letter-spacing:0} .sec-line{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:0} .dark .sec-line{background:linear-gradient(90deg,transparent,var(--line-d),transparent)} h2.title{margin-top:12px} /* ===== типографика: плотные заголовки + читаемый текст ===== */ :root{--body:'Golos Text',system-ui,sans-serif} body{font-weight:400;font-size:17.5px;line-height:1.62} h2.title{font-weight:700;letter-spacing:-.03em} .hero h1{font-weight:700;letter-spacing:-.04em} .contact h2{font-weight:700} .brand{font-weight:700;letter-spacing:-.02em} .lede{font-weight:400;line-height:1.6} .lv h3,.fmt h3,.t-body h3,.tool b{font-weight:700;letter-spacing:-.025em} .eyebrow{font-weight:600} .t-body p,.fmt p,.fmt li,.review p,.lv p{font-weight:400} .btn,.nav-cta{font-weight:600} .tbl-foot,.note{font-weight:400} tbody td{font-weight:400} .c-name{font-weight:600} .review .who b{font-weight:700} .fact span,.hint-grid span{font-weight:400} /* ===== появление блоков ===== Ключевое отличие от прежнего варианта: fill-mode backwards. Прозрачность живёт ТОЛЬКО внутри проигрывания анимации. Если анимация не поддерживается, отключена или не запустилась — элемент остаётся в обычном состоянии, то есть видимым. Спрятать контент нечем. */ /* Блок скрыт, пока не попал в экран. Класс .in вешает наблюдатель в js/index.js (IntersectionObserver + подстраховка sweep по скроллу). Если JavaScript выключен — сработает