1<!DOCTYPE html> 2<html lang="ru"> 3 <head> 4 <!-- Yandex.Metrika counter --> 5
5<script type="text/javascript">
vendor: 447 bytes, lines 5-13
5 6 (function(m,e,t,r,i,k,a){ 7 m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; 8 m[i].l=1*new Date(); 9 for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} 10 k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a) 11 })(window, document,'script','https://mc.yandex.ru/metrika/tag.js', 'ym'); 12 13 ym(
1391746271
vendor: 88 bytes, lines 13-14
13, 'init', {webvisor:true, clickmap:true, accurateTrackBounce:true, trackLinks:true}); 14
14</script>
14 15 <noscript><div><img src="https://mc.yandex.ru/watch/91746271" style="position:absolute; left:-9999px;" alt="" /></div></noscript> 16 17<!-- /Yandex.Metrika counter --> 18 19 <meta charset="utf-8"/> 20 <meta name="viewport" content="width=device-width, initial-scale=1"/> 21 <meta name="format-detection" content="telephone=no"> 22 23 <style> 24 25 /** 26 * VARIABLES 27 */ 28 29 :root { 30 /** 31 * Animation variables are defined in `document-end.php` 32 * to prevent unwanted animations on the page load. 33 */ 34 35 --container-width: 192rem; 36 --container-padding: 2rem; 37 38 --white: #F4F4F4; 39 --black: #151515; 40 } 41 42 43 /** 44 * GLOBAL STYLES 45 */ 46 47 ::selection { 48 background-color:rgb(168, 212, 22); 49 color: black; 50 } 51 52 html { 53 -webkit-tap-highlight-color: transparent; 54 accent-color: #b8e919; 55 background-color: white; 56 box-sizing: border-box; 57 font-family: 'Inter', sans-serif; 58 font-size: 62.5%; /* https://stackoverflow.com/questions/28988445/css-62-5-why-do-developers-use-it */ 59 font-synthesis: none; 60 overflow-x: hidden; 61 } 62 63 *, *:before, *:after { 64 appearance: none; 65 box-sizing: inherit; /* www.css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ 66 } 67 68 body { 69 display: flex; 70 flex-direction: column; 71 margin: 0; 72 min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0rem)); 73 overflow-x: clip; /* https://stackoverflow.com/questions/47095596/body-overflow-x-hidden-breaks-position-sticky */ 74 } 75 76 img { 77 display: block; 78 user-select: none; 79 } 80 81 section { 82 content-visibility: auto; 83 } 84 85 86 /** 87 * GENERIC CLASSES 88 */ 89 90 .Centered { 91 padding-inline: max(var(--container-padding), calc((100% - var(--container-width)) / 2)); 92 } 93 94 .CenteredMargin { 95 margin-inline: max(var(--container-padding), calc((100% - var(--container-width)) / 2)); 96 } 97 98 .Text { 99 color: var(--black); 100 font-family: 'Inter', sans-serif; 101 font-size: clamp(1.6rem, calc(1.6rem + (1.6 - 1.6) * ((100dvw - 37.5rem) / (144 - 37.5))), 1.6rem); 102 font-style: normal; 103 font-weight: 500; 104 letter-spacing: -0.025em; 105 line-height: 120%; 106 margin: 0; 107 text-decoration: none; 108 } 109 110 /* For `a` elements with text inside of them. */ 111 .LinkContainer { 112 color: var(--black); 113 text-decoration: none !important; 114 } 115 116 .ButtonEffect { 117 background-color: #cfff32; 118 transition: 0.2s linear; 119 120 box-shadow: 121 0rem 0rem 2.4rem color-mix(in srgb, #CFFF32 0%, transparent), 122 0rem 0.4rem 0.8rem color-mix(in srgb, black 10%, transparent), 123 inset -0.1rem 0.1rem 0rem 0.075rem color-mix(in srgb, white 60%, transparent), 124 inset 0.1rem -0.1rem 0rem 0.075rem color-mix(in srgb, white 70%, transparent), 125 inset 0rem 0rem 5rem 0 color-mix(in srgb, white 0%, transparent) 126 ; 127 128 &:hover { 129 box-shadow: 130 0rem 0rem 2.4rem color-mix(in srgb, #CFFF32 70%, transparent), 131 0rem 0.4rem 0.8rem color-mix(in srgb, black 0%, transparent), 132 inset 0rem 0rem 0.3rem 0.1rem color-mix(in srgb, white 90%, transparent), 133 inset 0rem 0rem 0.3rem 0.1rem color-mix(in srgb, white 90%, transparent), 134 inset 0rem 0rem 2.5rem 0 color-mix(in srgb, white 100%, transparent) 135 ; 136 } 137 138 &:active { 139 transition: var(--animation); 140 opacity: 0.8; 141 translate: 0 0.2rem; 142 box-shadow: 143 0rem 0rem 2.4rem 0.2rem color-mix(in srgb, #CFFF32 100%, transparent), 144 0rem 0.4rem 0.8rem color-mix(in srgb, black 0%, transparent), 145 inset 0rem 0rem 0.3rem 0.1rem color-mix(in srgb, white 90%, transparent), 146 inset 0rem 0rem 0.3rem 0.1rem color-mix(in srgb, white 95%, transparent), 147 inset 0rem 0rem 2rem 0 color-mix(in srgb, white 100%, transparent) 148 ; 149 } 150 } 151 152 .Button { 153 align-items: center; 154 border-radius: 100rem; 155 color: black; 156 cursor: pointer; 157 display: flex; 158 font-family: 'GNF', sans-serif; 159 font-size: 1.8rem; 160 font-style: normal; 161 font-weight: 700; 162 gap: 1.8rem; 163 height: 6rem; 164 margin: 0; 165 text-decoration: none; 166 text-transform: uppercase; 167 transition: 0.2s linear; 168 user-select: none; 169 white-space: nowrap; 170 width: max-content; 171 padding-inline: 2.4rem 1.8rem; 172 173 span { 174 flex: 1; 175 text-align: center; 176 } 177 178 img { 179 aspect-ratio: 1 / 1; 180 border-radius: 100rem; 181 box-shadow: 0 0.2rem 1rem color-mix(in srgb, black 20%, transparent); 182 height: 100%; 183 height: 2.6rem; 184 margin-inline-start: auto; 185 object-fit: scale-down; 186 transition: var(--animation); 187 width: 2.6rem; 188 } 189 } 190
191 @keyframes scroll-into-view-animation { 192 from { 193 opacity: 0; 194 scale: 0.95; 195 } 196 } 197 198 .ScrollIntoViewAnimation { 199 @supports (animation-timeline: view()) { 200 transform-origin: top; 201 transform-style: preserve-3d; 202 will-change: transform, opacity; 203 204 animation: scroll-into-view-animation forwards ease-out; 205 animation-timeline: view(); 206 animation-range: entry 0rem entry 50dvh; 207 } 208 } 209 210 211 /** 212 * LOCAL STYLES 213 */ 214 215 .grecaptcha-badge { 216 visibility: hidden !important; 217 } 218 219 220 /** 221 * FONTS 222 */ 223 224 @font-face { 225 font-display: block; 226 font-family: 'Loos'; 227 src: url('https://yudaevschool.ru/wp-content/themes/yudaev/assets/fonts/loos-variable.woff2'); 228 } 229 230 @font-face { 231 font-display: block; 232 font-family: 'Inter'; 233 src: url('https://yudaevschool.ru/wp-content/themes/yudaev/assets/fonts/inter-variable.woff2'); 234 } 235 236 @font-face { 237 font-display: block; 238 font-family: 'GNF'; 239 src: url('https://yudaevschool.ru/wp-content/themes/yudaev/assets/fonts/gnf.ttf'); 240 } 241 242 @font-face { 243 font-display: block; 244 font-family: 'Loos_Extended'; 245 src: url('https://yudaevschool.ru/wp-content/themes/yudaev/assets/fonts/loos-extended-regular.otf'); 246 } 247</style> 248 249 250 251 252<style> 253 .green-arrow { 254 aspect-ratio: 1; 255 width: 36px; 256 border-radius: 50%; 257 display: flex; 258 align-items: center; 259 justify-content: center; 260 background-color: #cfff32; 261 position: relative; 262 padding: 2px; 263 box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.0784313725); 264 transition: all 0.3s linear 0s; 265 } 266 .green-arrow::before { 267 background: conic-gradient(from -18.65deg at 50% 50%, rgba(255, 255, 255, 0.3019607843) 0deg, rgba(255, 255, 255, 0.8) 90deg, rgba(255, 255, 255, 0.3019607843) 181.58deg, rgba(255, 255, 255, 0.8) 270deg, rgba(255, 255, 255, 0.3019607843) 360deg); 268 content: ""; 269 width: 100%; 270 aspect-ratio: 1; 271 border-radius: 50%; 272 position: absolute; 273 top: 50%; 274 left: 50%; 275 transform: translate(-50%, -50%); 276 -webkit-mask-image: radial-gradient(circle 20px at center, transparent 98%, rgb(0, 0, 0) 100%); 277 mask-image: radial-gradient(circle 20px at center, transparent 98%, rgb(0, 0, 0) 100%); 278 } 279 @media (hover: hover) and (pointer: fine) { 280 .green-arrow:hover { 281 box-shadow: 0px 0px 24px 0px rgba(207, 255, 50, 0.4), 0px -3px 15px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 3px 15px 0px rgba(255, 255, 255, 0.3019607843) inset, 2px 0px 15px 0px rgba(255, 255, 255, 0.5019607843) inset, -2px 0px 15px 0px rgba(255, 255, 255, 0.5019607843) inset, 0px 2px 10px 0px rgba(0, 0, 0, 0.0509803922); 282 } 283 } 284 .green-arrow img { 285 max-width: 100%; 286 max-height: 100%; 287 object-fit: contain; 288 object-position: center; 289 transition: all 0.3s linear 0s; 290 } 291 .green-arrow:active { 292 box-shadow: none; 293 } 294 .green-arrow:active img { 295 opacity: 0.5; 296 } 297 298 .section-name { 299 display: flex; 300 background-color: #cfff32; 301 border-radius: 64px; 302 box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1); 303 gap: 8px; 304 } 305 .section-name__index { 306 padding-block: 10px; 307 padding-left: 16px; 308 box-shadow: 0px 0px 24px 0px rgba(207, 255, 50, 0.4); 309 text-align: center; 310 display: flex; 311 align-items: center; 312 justify-content: center; 313 font-family: "GNF"; 314 line-height: 130%; 315 font-weight: 400; 316 font-size: 18px; 317 } 318 @media (max-width: 1440px) { 319 .section-name__index { 320 font-size: 16px; 321 } 322 } 323 @media (max-width: 1024px) { 324 .section-name__index { 325 font-size: 16px; 326 } 327 } 328 @media (max-width: 375px) { 329 .section-name__index { 330 font-size: 14px; 331 } 332 } 333 .section-name__text-wrapper { 334 position: relative; 335 display: inline-block; 336 border-radius: 64px; 337 overflow: hidden; 338 } 339 .section-name__text { 340 background-color: black; 341 color: white; 342 padding: 10px 16px; 343 border-radius: 62px; 344 display: block; 345 line-height: 130%; 346 font-family: "GNF"; 347 font-weight: 400; 348 font-size: 18px; 349 text-transform: uppercase; 350 } 351 @media (max-width: 1440px) { 352 .section-name__text { 353 font-size: 16px; 354 } 355 } 356 @media (max-width: 1024px) { 357 .section-name__text { 358 font-size: 16px; 359 } 360 } 361 @media (max-width: 375px) { 362 .section-name__text { 363 font-size: 14px; 364 } 365 } 366 367 .course-card { 368 align-items: flex-start; 369 background: #f7f7f7; 370 border-radius: 30px; 371 box-shadow: 1px 5px 6px 0px rgba(0, 0, 0, 0.1); 372 display: flex; 373 flex-direction: column; 374 gap: 13px; 375 height: auto !important; 376 justify-content: flex-end; 377 padding-bottom: 24px; 378 position: relative; 379 transition: 2s; 380 transform-origin: top; 381 } 382 .course-card .div-text-wrapper { 383 align-items: end; 384 display: flex; 385 flex-wrap: wrap; 386 gap: 15px; 387 justify-content: space-between; 388 padding-inline: 24px; 389 width: 100%; 390 } 391 .course-card .div-button { 392 align-items: center; 393 background-color: #cfff32; 394 border-radius: 100px; 395 color: black; 396 display: flex; 397 font-family: "Inter", sans-serif; 398 font-size: 14px; 399 font-weight: 500; 400 gap: 15px; 401 height: fit-content; 402 letter-spacing: -0.02em; 403 line-height: 130%; 404 padding: 5px; 405 transition: 0.25s; 406 padding-inline-start: 15px; 407 } 408 .course-card:hover .div-button { 409 background-color: black; 410 color: white; 411 } 412 .course-card:hover .div-button::before { 413 opacity: 0; 414 } 415 .course-card .green-arrow { 416 pointer-events: none; 417 } 418 .course-card:hover .green-arrow { 419 background-color: black; 420 } 421 .course-card:hover .green-arrow img { 422 filter: invert(1); 423 } 424 .course-card:hover .side-media { 425 background-color: black !important; 426 } 427 .course-card:hover .side-media__text { 428 color: white !important; 429 } 430 .course-card:hover .img-arrow { 431 opacity: 0; 432 } 433 .course-card:hover .img-arrow-hover { 434 opacity: 1; 435 } 436 .course-card .side-media__text { 437 transition: 0.2s; 438 } 439 .course-card .div-gradient { 440 background: linear-gradient(transparent, #f8f8f8); 441 bottom: -1px; 442 height: 100px; 443 position: absolute; 444 width: 100%; 445 z-index: 1; 446 } 447 .course-card__image { 448 height: 100%; 449 position: relative; 450 width: 100%; 451 } 452 .course-card__image img { 453 width: 100%; 454 max-height: 343px; 455 object-fit: contain; 456 object-position: center; 457 } 458 .course-card__image::after { 459 content: ""; 460 position: absolute; 461 left: 0; 462 bottom: 0; 463 width: 100%; 464 height: 10%; 465 background: white; 466 background-size: cover; 467 filter: blur(36px); 468 z-index: 1; 469 pointer-events: none; 470 opacity: 0.6; 471 } 472 .course-card .card-marker { 473 margin-inline: 24px; 474 } 475 .course-card .card-marker .card-marker-text { 476 letter-spacing: -0.3px; 477 } 478 .course-card__name { 479 padding-bottom: 0; 480 font-family: "Inter", sans-serif; 481 font-weight: 600; 482 font-size: 20px; 483 line-height: 120%; 484 color: #000000; 485 padding-inline: 24px; 486 letter-spacing: -0.02em; 487 } 488 .course-card__tag { 489 color: rgb(145, 145, 145); 490 font-family: "Inter", sans-serif; 491 font-weight: 500; 492 font-size: 15px; 493 line-height: 141%; 494 display: inline-flex; 495 letter-spacing: -0.3px; 496 margin-right: 8px; 497 align-items: center; 498 gap: 6px; 499 } 500 .course-card__tag:not(:last-child)::after { 501 content: ""; 502 width: 2px; 503 aspect-ratio: 1; 504 background-color: rgb(145, 145, 145); 505 }
506 .course-card__desktop-link { 507 position: absolute; 508 right: 24px; 509 bottom: 24px; 510 } 511 @media (max-width: 500px) { 512 .course-card__desktop-link { 513 display: none; 514 } 515 } 516 @media (max-width: 1440px) { 517 .course-card__desktop-link .green-arrow { 518 width: 32px; 519 height: 32px; 520 } 521 } 522 .course-card__mobile-link { 523 padding-left: 24px; 524 } 525 @media (min-width: 500px) { 526 .course-card__mobile-link { 527 display: none; 528 } 529 } 530 .course-card__mobile-link .side-media { 531 background-color: #cfff32; 532 padding: 5px; 533 padding-left: 15px; 534 } 535 .course-card__mobile-link .side-media__text { 536 color: #000000; 537 font-weight: 500; 538 font-size: 14px; 539 line-height: 130%; 540 letter-spacing: -0.02em; 541 } 542 .course-card__mobile-link .side-media__svg { 543 background-color: #000000; 544 } 545 .course-card__mobile-link .side-media__svg svg { 546 fill: white; 547 color: white; 548 } 549 550 .card-marker { 551 align-items: center; 552 background-color: #fbfbfb; 553 border-radius: 100px; 554 border: 1px solid #ffffff; 555 box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05); 556 display: flex; 557 justify-content: space-between; 558 padding: 3px; 559 } 560 .card-marker-icon { 561 border-radius: 50%; 562 aspect-ratio: 1; 563 width: 20px; 564 height: 20px; 565 box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1019607843); 566 display: flex; 567 align-items: center; 568 justify-content: center; 569 position: relative; 570 padding: 2px; 571 } 572 .card-marker-icon.white { 573 background-color: #FFFFFF; 574 } 575 .card-marker-icon.black { 576 background-color: #000000; 577 } 578 .card-marker-icon img { 579 object-fit: contain; 580 object-position: center; 581 max-height: 100%; 582 max-width: 100%; 583 z-index: 2; 584 } 585 .card-marker-text { 586 font-family: "Inter", sans-serif; 587 font-weight: 600; 588 font-size: 13px; 589 text-wrap: nowrap; 590 margin-inline: 14px; 591 line-height: 135%; 592 letter-spacing: -0.02em; 593 color: rgb(145, 145, 145); 594 -webkit-font-smoothing: subpixel-antialiased; 595 } 596 597 .from-scratch-to-pro { 598 padding-block: var(--horizontal-padding); 599 } 600 .from-scratch-to-pro__card-section { 601 display: flex; 602 gap: 20px; 603 width: 100%; 604 height: 565px; 605 } 606 @media (max-width: 1440px) { 607 .from-scratch-to-pro__card-section { 608 height: 486px; 609 } 610 } 611 .from-scratch-to-pro__card { 612 min-width: 330px; 613 flex: 1; 614 display: flex; 615 flex-direction: column; 616 align-items: flex-start; 617 border-radius: 20px; 618 overflow: hidden; 619 width: 285px; 620 position: relative; 621 box-shadow: 0px 6px 35px 0px rgba(0, 0, 0, 0.1019607843); 622 } 623 @media (max-width: 1400px) { 624 .from-scratch-to-pro__card { 625 min-width: 285px; 626 } 627 } 628 .from-scratch-to-pro__card-title { 629 font-weight: 600; 630 font-family: "Inter"; 631 font-size: 20px; 632 letter-spacing: -0.02em; 633 font-smooth: always; 634 -webkit-font-smoothing: subpixel-antialiased; 635 } 636 .from-scratch-to-pro__card-discription { 637 -webkit-font-smoothing: subpixel-antialiased; 638 color: rgba(0, 0, 0, 0.4); 639 font-family: "Inter"; 640 font-size: 14px; 641 font-smooth: always; 642 font-weight: 500; 643 letter-spacing: -0.02em; 644 line-height: 130%; 645 text-wrap: pretty; 646 } 647 .from-scratch-to-pro__card-images { 648 width: 100%; 649 flex: 1; 650 position: relative; 651 background-image: url("../assets/images/basic.png"); 652 background-position: bottom center; 653 background-repeat: no-repeat; 654 background-size: contain; 655 } 656 .from-scratch-to-pro .training-to-day { 657 padding-top: 20px; 658 background-color: #f8f8f8; 659 position: relative; 660 } 661 .from-scratch-to-pro .training-to-day .card-marker { 662 margin-inline: 20px; 663 } 664 .from-scratch-to-pro .training-to-day__title { 665 padding-inline: 20px; 666 margin-top: 15px; 667 } 668 .from-scratch-to-pro .training-to-day__discription { 669 margin-top: 5px; 670 padding-right: 40px; 671 padding-inline: 20px; 672 } 673 .from-scratch-to-pro .training-to-day__images { 674 margin-top: 20px; 675 } 676 .from-scratch-to-pro .training-to-day__images > * { 677 position: absolute; 678 display: flex; 679 flex-direction: column; 680 align-items: center; 681 justify-content: center; 682 } 683 .from-scratch-to-pro .training-to-day__blander { 684 left: 20px; 685 top: 88px; 686 animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); 687 } 688 .from-scratch-to-pro .training-to-day__ozon { 689 right: 30px; 690 aspect-ratio: 1; 691 top: 98px; 692 } 693 .from-scratch-to-pro .training-to-day__wb { 694 animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); 695 left: 54px; 696 aspect-ratio: 1; 697 bottom: 34px; 698 } 699 .from-scratch-to-pro .training-to-day__figma { 700 animation-timing-function: ease-in-out; 701 aspect-ratio: 1; 702 bottom: 61px; 703 right: 47px; 704 } 705 .from-scratch-to-pro .card-marker-icon { 706 box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1019607843); 707 } 708 .from-scratch-to-pro .card-marker-icon::before { 709 background-image: conic-gradient(from -18.65deg at 50% 50%, rgba(0, 0, 0, 0.05) 0deg, rgba(0, 0, 0, 0.15) 90deg, rgba(0, 0, 0, 0.05) 181.58deg, rgba(0, 0, 0, 0.15) 270deg, rgba(0, 0, 0, 0.05) 360deg) !important; 710 } 711 .from-scratch-to-pro .payment-after { 712 padding: 20px; 713 background-color: #f1f1f1; 714 } 715 .from-scratch-to-pro .payment-after__image { 716 background-image: url("data:image/svg+xml,%3csvg%20width='247'%20height='262'%20viewBox='0%200%20247%20262'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cline%20x1='0.5'%20y1='2.18558e-08'%20x2='0.499989'%20y2='262'%20stroke='url(%23paint0_linear_5541_7104)'%20stroke-opacity='0.1'/%3e%3cline%20x1='41.5'%20y1='2.18558e-08'%20x2='41.5'%20y2='262'%20stroke='url(%23paint1_linear_5541_7104)'%20stroke-opacity='0.1'/%3e%3cline%20x1='82.5'%20y1='2.18558e-08'%20x2='82.5'%20y2='262'%20stroke='url(%23paint2_linear_5541_7104)'%20stroke-opacity='0.1'/%3e%3cline%20x1='123.5'%20y1='2.18558e-08'%20x2='123.5'%20y2='262'%20stroke='url(%23paint3_linear_5541_7104)'%20stroke-opacity='0.1'/%3e%3cline%20x1='164.5'%20y1='2.18558e-08'%20x2='164.5'%20y2='262'%20stroke='url(%23paint4_linear_5541_7104)'%20stroke-opacity='0.1'/%3e%3cline%20x1='205.5'%20y1='2.18558e-08'%20x2='205.5'%20y2='262'%20stroke='url(%23paint5_linear_5541_7104)'%20stroke-opacity='0.1'/%3e%3cline%20x1='246.5'%20y1='2.18558e-08'%20x2='246.5'%20y2='262'%20stroke='url(%23paint6_linear_5541_7104)'%20stroke-opacity='0.1'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_5541_7104'%20x1='-0.5'%20y1='-2.18558e-08'%20x2='-0.500011'%20y2='262'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_5541_7104'%20x1='40.5'%20y1='-2.18558e-08'%20x2='40.5'%20y2='262'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_5541_7104'%20x1='81.5'%20y1='-2.18558e-08'%20x2='81.5'%20y2='262'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint3_linear_5541_7104'%20x1='122.5'%2
7160y1='-2.18558e-08'%20x2='122.5'%20y2='262'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint4_linear_5541_7104'%20x1='163.5'%20y1='-2.18558e-08'%20x2='163.5'%20y2='262'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint5_linear_5541_7104'%20x1='204.5'%20y1='-2.18558e-08'%20x2='204.5'%20y2='262'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint6_linear_5541_7104'%20x1='245.5'%20y1='-2.18558e-08'%20x2='245.5'%20y2='262'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e"); 717 background-repeat: no-repeat; 718 background-position: center; 719 background-size: cover; 720 } 721 .from-scratch-to-pro .payment-after__title { 722 margin-top: 13px; 723 padding-right: 10px; 724 margin-bottom: 6px; 725 line-height: 124.7%; 726 letter-spacing: 2.1px; 727 } 728 .from-scratch-to-pro .payment-after__title span { 729 letter-spacing: -0.02em; 730 font-size: 20px; 731 line-height: 120%; 732 } 733 .from-scratch-to-pro .payment-after__title b { 734 color: rgba(0, 0, 0, 0.3019607843); 735 letter-spacing: -0.02em; 736 font-size: 20px; 737 } 738 .from-scratch-to-pro .payment-after__discription { 739 padding-right: 10px; 740 } 741 .from-scratch-to-pro .payment-after__month { 742 position: absolute; 743 display: flex; 744 align-items: center; 745 justify-content: space-between; 746 padding-right: 16px; 747 padding-left: 24px; 748 padding-block: 16px; 749 border-radius: 170px; 750 gap: 55px; 751 backdrop-filter: blur(24.7917480469px); 752 box-shadow: 0px 3.31px 16.53px 0px rgba(0, 0, 0, 0.1215686275), -3.31px -3.31px 33.06px 0px rgba(255, 255, 255, 0.8980392157) inset; 753 color: rgba(0, 0, 0, 0.3019607843); 754 font-family: GNF; 755 font-size: 30px; 756 text-wrap: nowrap; 757 } 758 .from-scratch-to-pro .payment-after__month:nth-child(1) { 759 top: 59.38px; 760 left: 10px; 761 rotate: -3.5deg; 762 animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); 763 } 764 .from-scratch-to-pro .payment-after__month:nth-child(2) { 765 top: 114.24px; 766 left: 96.64px; 767 rotate: 8.5deg; 768 animation-timing-function: ease-in-out; 769 } 770 .from-scratch-to-pro .payment-after__month_green { 771 gap: 35px; 772 background-color: #CEFF2F; 773 backdrop-filter: blur(24.7917480469px); 774 box-shadow: 0px 3.31px 16.53px 0px rgba(0, 0, 0, 0.1215686275), -4.96px -4.96px 33.06px 0px rgba(255, 255, 255, 0.8980392157) inset, 4.96px 4.96px 33.06px 0px rgba(255, 255, 255, 0.8980392157) inset; 775 top: 176.98px; 776 left: 25.36px; 777 rotate: -10deg; 778 } 779 .from-scratch-to-pro .payment-after__month span { 780 padding: 10px; 781 border-radius: 168.58px; 782 text-wrap: nowrap; 783 backdrop-filter: blur(24.7917480469px); 784 box-shadow: 0px 3.31px 16.53px 0px rgba(0, 0, 0, 0.1215686275), -3.31px -3.31px 16.53px 0px rgba(255, 255, 255, 0.8980392157) inset, 3.31px 3.31px 16.53px 0px rgba(255, 255, 255, 0.8980392157) inset; 785 font-size: 18.64px; 786 } 787 788 .platform { 789 align-items: center; 790 justify-content: center; 791 background-image: url("data:image/svg+xml,%3csvg%20width='246'%20height='486'%20viewBox='0%200%20246%20486'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cline%20x1='0.5'%20y1='2.18558e-08'%20x2='0.499979'%20y2='486'%20stroke='url(%23paint0_linear_4814_14286)'%20stroke-opacity='0.07'/%3e%3cline%20x1='82.1667'%20y1='2.18558e-08'%20x2='82.1667'%20y2='486'%20stroke='url(%23paint1_linear_4814_14286)'%20stroke-opacity='0.07'/%3e%3cline%20x1='163.833'%20y1='2.18558e-08'%20x2='163.833'%20y2='486'%20stroke='url(%23paint2_linear_4814_14286)'%20stroke-opacity='0.07'/%3e%3cline%20x1='245.5'%20y1='2.18558e-08'%20x2='245.5'%20y2='486'%20stroke='url(%23paint3_linear_4814_14286)'%20stroke-opacity='0.07'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_4814_14286'%20x1='-0.5'%20y1='-2.18558e-08'%20x2='-0.500021'%20y2='486'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_4814_14286'%20x1='81.1667'%20y1='-2.18558e-08'%20x2='81.1667'%20y2='486'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_4814_14286'%20x1='162.833'%20y1='-2.18558e-08'%20x2='162.833'%20y2='486'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint3_linear_4814_14286'%20x1='244.5'%20y1='-2.18558e-08'%20x2='244.5'%20y2='486'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e"); 792 background-color: #f9f9f9; 793 background-position: center; 794 background-repeat: no-repeat; 795 background-size: contain; 796 } 797 .platform__icon { 798 position: relative; 799 } 800 .platform__icon:nth-child(1)::after { 801 content: ""; 802 position: absolute; 803 bottom: 0px; 804 left: 50%; 805 translate: -50%; 806 width: 24px; 807 padding-inline: 10px; 808 height: 2px; 809 background-color: rgba(0, 0, 0, 0.1019607843); 810 } 811 .platform__icon span { 812 position: absolute; 813 padding: 3px 12px; 814 font-family: "SF Pro Display"; 815 width: max-content; 816 color: rgba(0, 0, 0, 0.3490196078); 817 font-weight: 600; 818 line-height: 130%; 819 border-radius: 40px; 820 font-size: 13px; 821 padding-inline: 10px; 822 background-color: rgba(0, 0, 0, 0.0509803922); 823 backdrop-filter: blur(40px); 824 box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.0784313725), -2px -2px 10px 0px rgba(255, 255, 255, 0.8980392157) inset, 2px 2px 10px 0px rgba(255, 255, 255, 0.8980392157) inset; 825 } 826 .platform__icon:nth-child(2) span { 827 top: 7px; 828 left: -106%; 829 } 830 .platform__icon:nth-child(3) span { 831 animation-timing-function: ease-in-out; 832 top: 7px; 833 left: 78%; 834 } 835 .platform__icon:nth-child(4) span { 836 bottom: 10px; 837 left: -106%; 838 animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); 839 } 840 .platform:nth-child(2) { 841 background-color: transparent; 842 align-items: flex-start; 843 justify-content: center; 844 background: none; 845 box-shadow: none; 846 } 847 @media (min-width: 728px) { 848 .platform:nth-child(2) { 849 translate: -40px; 850 } 851 } 852 .platform__marker { 853 margin-bottom: 20px; 854 } 855 .platform__text { 856 padding: 20px; 857 gap: 5px; 858 background-color: #f1f1f1; 859 margin-bottom: 9px; 860 width: 100%; 861 border-radius: 20px; 862 box-shadow: 0px 6px 35px 0px rgba(0, 0, 0, 0.0509803922), 0px -10px 14px 0px rgba(255, 255, 255, 0.5019607843) inset, 0px 10px 14px 0px rgba(255, 255, 255, 0.5019607843) inset, 4px 0px 50px 0px rgba(255, 255, 255, 0.8) inset; 863 } 864 .platform__title { 865 color: rgba(0, 0, 0, 0.8980392157); 866 letter-spacing: -0.02em; 867 font-family: "Inter"; 868 line-height: 125%; 869 font-size: 16px; 870 font-weight: 600; 871 } 872 .platform__disk { 873 color: rgba(0, 0, 0, 0.4); 874 letter-spacing: -0.02em; 875 font-family: "Inter"; 876 line-height: 125%; 877 font-size: 14px; 878 font-weight: 500; 879 } 880 881 .career-center-right .training-to-day__discription { 882 max-width: 80%; 883 } 884 .career-center-right__image { 885 flex: 1; 886 width: 100%; 887 display: flex; 888 align-items: center; 889 justify-content: end; 890 } 891 .career-center-right__image img { 892 margin-top: auto; 893 object-fit: contain; 894 object-position: center; 895 max-height: 100%; 896 max-width: 100%; 897 width: 100%; 898 } 899 900 .career-center-left .payment-after__discription { 901 max-width: 78%; 902 } 903 .career-center-left__image { 904 position: static; 905 } 906 .career-center-left__image img.background { 907 min-width: 100%; 908 right: 0; 909 left: 0; 910 top: 0; 911 position: absolute; 912 } 913 .career-center-left__icon { 914 position: absolute; 915 max-width: 48px; 916 aspect-ratio: 1; 917 top: 90px; 918 left: 47px; 919 } 920 .career-center-left__icon img { 921 object-fit: contain; 922 object-position: center; 923 pointer-events: none; 924 } 925 .career-center-left__icon:nth-child(4) { 926 top: 175px; 927 left: 11px; 928 animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); 929 } 930 .career-center-left__icon:nth-child(3) { 931 top: 119px; 932 right: 19px; 933 left: auto; 934 animation-timing-function: cubic-bezier(0.3, 0.1, 0.64, 0.99); 935 } 936 .career-center-left__icon:nth-child(2) { 937 top: 31px; 938 left: 124px; 939 animation-timing-function: ease-in-out; 940 } 941 942 .work-check .from-scratch-to-pro__card-discription { 943 max-width: none; 944 } 945 .work-check__info { 946 position: absolute; 947 top: 50%; 948 left: 50%; 949 translate: -50% -50%; 950 align-items: center; 951 justify-content: center; 952 } 953 .work-check__time { 954 font-family: "GNF"; 955 font-weight: 400; 956 translate: -13px; 957 letter-spacing: -0.05em; 958 font-size: 100px; 959 background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0.4) 100%); 960 -webkit-background-clip: text; /* ÐбÑезаем Ñон по ÑекÑÑÑ (Ð´Ð»Ñ Safari/Chrome) */ 961 background-clip: text; /* СÑандаÑÑное ÑвойÑÑво */ 962 -webkit-text-fill-color: transparent; /* Ðелаем ÑекÑÑ Ð¿ÑозÑаÑнÑм (Ð´Ð»Ñ Safari/Chrome) */ 963 color: transparent; /* Ðелаем ÑекÑÑ Ð¿ÑозÑаÑнÑм (ÑÑандаÑÑное ÑвойÑÑво) */ 964 display: inline-block; 965 } 966 .work-check__label { 967 right: -50px; 968 top: 5px; 969 background-color: #ceff2f; 970 border-radius: 40px; 971 font-size: 14px; 972 text-transform: uppercase; 973 color: #76950f; 974 -webkit-text-fill-color: #76950f; 975 z-index: 3; 976 padding: 5px 10px; 977 line-height: 90%; 978 font-weight: 400; 979 letter-spacing: 0; 980 backdrop-filter: blur(40px); 981 box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.0784313725), -2px -2px 10px 0px rgba(255, 255, 255, 0.8980392157) inset, 2px 2px 10px 0px rgba(255, 255, 255, 0.8980392157) inset; 982 } 983 .work-check__label.gradient-border { 984 position: absolute; 985 } 986 .work-check__text { 987 color: rgba(0, 0, 0, 0.4); 988 font-size: 14px; 989 font-family: "Inter"; 990 font-weight: 500; 991 text-wrap: nowrap; 992 line-height: 130%; 993 letter-spacing: -0.02em; 994 } 995 996 .special-offer { 997 background-color: #f9f9f9; 998 padding: 20px; 999 width: 100%; 1000 border-radius: 20px; 1001 align-items: flex-start; 1002 justify-content: start; 1003 gap: 15px; 1004 } 1005 .special-offer__spa { 1006 background-color: transparent; 1007 border: none; 1008 margin-top: auto; 1009 cursor: pointer; 1010 } 1011 .special-offer .side-media { 1012 padding: 5px; 1013 padding-left: 20px; 1014 background-color: #fafafa; 1015 gap: 15px; 1016 box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.0509803922); 1017 } 1018 .special-offer .side-media__img { 1019 min-height: 32px; 1020 min-width: 32px; 1021 } 1022 .special-offer .side-media__text { 1023 color: #323232; 1024 padding-inline: 0; 1025 font-size: 14px; 1026 font-weight: 500; 1027 line-height: 130%; 1028 letter-spacing: -0.02em; 1029 } 1030 .special-offer__title { 1031 font-size: 30px; 1032 font-weight: 400; 1033 font-family: "GNF"; 1034 line-height: 110%; 1035 letter-spacing: -0.01em; 1036 text-transform: uppercase; 1037 } 1038 1039 .second-pc-card { 1040 align-items: center; 1041 backdrop-filter: blur(60px); 1042 background: #f1f1f1; 1043 box-shadow: 0 6px 35px 0 rgba(0, 0, 0, 0.05); 1044 display: flex; 1045 flex-direction: column; 1046 justify-content: end; 1047 } 1048 .second-pc-card_top .second-pc-card__text { 1049 padding-bottom: 0; 1050 padding-top: 20px; 1051 } 1052 .second-pc-card_top .second-pc-card__image { 1053 display: flex; 1054 } 1055 .second-pc-card__image { 1056 flex: 1; 1057 width: 100%; 1058 } 1059 .second-pc-card__image img { 1060 width: 100%; 1061 max-height: 100%; 1062 max-width: 100%; 1063 object-fit: contain; 1064 object-position: center; 1065 } 1066 .second-pc-card__text { 1067 padding: 20px; 1068 padding-top: 0; 1069 width: 100%; 1070 display: flex; 1071 flex-direction: column; 1072 align-items: flex-start; 1073 } 1074 .second-pc-card__icon { 1075 margin-bottom: 15px; 1076 } 1077 .second-pc-card__title { 1078 font: 600 20px/1.2 "Inter", sans-serif; 1079 letter-spacing: -0.02em; 1080 color: rgba(0, 0, 0, 0.8); 1081 margin-bottom: 5px; 1082 } 1083 .second-pc-card__disc { 1084 font: 500 14px/1.3 "Inter", sans-serif; 1085 letter-spacing: -0.02em; 1086 color: rgba(0, 0, 0, 0.4); 1087 } 1088 1089 .expandable-grid__inner { 1090 display: grid; 1091 gap: 16px; 1092 overflow: hidden; 1093 transition: height 0.5s ease; 1094 } 1095 .expandable-grid__item { 1096 background: #f0f0f0; 1097 padding: 16px; 1098 border-radius: 4px; 1099 } 1100 .expandable-grid__toggle { 1101 margin-top: 16px; 1102 padding: 8px 16px; 1103 background: #007bff; 1104 color: white; 1105 border: none; 1106 border-radius: 4px; 1107 cursor: pointer; 1108 } 1109 @media (hover: hover) and (pointer: fine) { 1110 .expandable-grid__toggle:hover { 1111 backdrop-filter: blur(45px); 1112 box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.0784313725), 0px -5px 5px 0px rgba(255, 255, 255, 0.1019607843) inset, 0px 5px 5px 0px rgba(255, 255, 255, 0.1019607843) inset, 4px 0px 10px 0px rgba(255, 255, 255, 0.1019607843) inset, -4px 0px 10px 0px rgba(255, 255, 255, 0.1019607843) inset; 1113 } 1114 } 1115 1116 .questions__question { 1117 position: relative; 1118 overflow: hidden; 1119 } 1120 .questions__question .question { 1121 transition: border-radius 0.3s linear; 1122 } 1123 .questions__question .question__header { 1124 display: flex; 1125 justify-content: space-between; 1126 align-items: center; 1127 cursor: pointer; 1128 } 1129 .questions__question .question__content { 1130 margin: 0; 1131 flex: 1; 1132 } 1133 .questions__question .question__details { 1134 overflow: hidden; 1135 transition: max-height 0.3s ease-out; 1136 } 1137 .questions__question .question__details p { 1138 padding: 20px 10px 10px 0px; 1139 font-family: "Inter"; 1140 font-weight: 500; 1141 font-size: 15px; 1142 line-height: 135%; 1143 letter-spacing: -0.02em; 1144 color: rgba(0, 0, 0, 0.5019607843); 1145 } 1146 .questions__question .question--active .question__details { 1147 max-height: 500px; 1148 } 1149 .questions__question .question--active .faq__open { 1150 transform: rotate(45deg); 1151 } 1152 1153 .faq .question.question--active { 1154 border-radius: 20px; 1155 } 1156 1157 .mobile-slider { 1158 position: relative; 1159 width: 100%; 1160 } 1161 @media (min-width: 850px) { 1162 .mobile-slider { 1163 display: none; 1164 } 1165 } 1166 .mobile-slider .swiper-wrapper { 1167 align-items: stretch; 1168 } 1169 .mobile-slider .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal { 1170 position: relative; 1171 margin-top: 30px; 1172 left: 50%; 1173 transform: translate(-50%); 1174 display: flex; 1175 gap: 5px; 1176 z-index: 10; 1177 border-radius: 40px; 1178 background-color: #F2F2F2; 1179 width: fit-content; 1180 padding: 10px 12px; 1181 } 1182 .mobile-slider .swiper-pagination.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet { 1183 background: #ccc; 1184 opacity: 1; 1185 width: 5px; 1186 height: 5px; 1187 border-radius: 50%; 1188 transition: all 0.3s ease; 1189 margin: 0; 1190 } 1191 .mobile-slider .swiper-pagination.swiper-pagination-bullets.swiper-pagina
1191tion-horizontal .swiper-pagination-bullet-active { 1192 width: 24px; 1193 border-radius: 30px; 1194 background: #CFFF32; 1195 } 1196 1197 .circle-icon { 1198 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1); 1199 background: #fff; 1200 border-radius: 50%; 1201 aspect-ratio: 1; 1202 width: 20px; 1203 height: 20px; 1204 display: flex; 1205 align-items: center; 1206 justify-content: center; 1207 } 1208 .circle-icon svg { 1209 scale: 1.5; 1210 } 1211 1212 .card-name { 1213 display: flex; 1214 align-items: center; 1215 justify-content: flex-start; 1216 flex-direction: row; 1217 gap: 10px; 1218 border-radius: 40px; 1219 padding: 3px 12px 3px 3px; 1220 backdrop-filter: blur(40px); 1221 box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05); 1222 background: rgba(255, 255, 255, 0.4); 1223 } 1224 .card-name__text { 1225 font: 600 13px/1.3 "Inter", sans-serif; 1226 letter-spacing: -0.02em; 1227 color: rgba(0, 0, 0, 0.4); 1228 } 1229 1230 @keyframes rockUpDown { 1231 0%, 100% { 1232 transform: translateY(0); 1233 } 1234 50% { 1235 transform: translateY(-8px); 1236 } 1237 } 1238 #demand { 1239 background: #fafafa; 1240 margin-block-start: 60px; 1241 user-select: none; 1242 padding-block: clamp(120px, 120px + (250 - 120) * (100dvw - 375px) / (1440 - 375), 250px) clamp(0px, 0px + (0 - 0) * (100dvw - 375px) / (1440 - 375), 0px); 1243 } 1244 #demand .h2 { 1245 font-family: "Loos Extended"; 1246 font-size: clamp(26px, 26px + (44 - 26) * (100dvw - 375px) / (1440 - 375), 44px); 1247 font-weight: 500; 1248 letter-spacing: -0.01em; 1249 line-height: 120%; 1250 margin-inline: max(30px, (100% - 1920px) / 2); 1251 max-width: 27ch; 1252 } 1253 #demand .h2 span { 1254 color: color-mix(in srgb, black 25%, transparent); 1255 } 1256 #demand .div-picture { 1257 margin-block-start: -50px; 1258 position: relative; 1259 } 1260 #demand .img-background { 1261 width: 100%; 1262 } 1263 #demand .div-bubble { 1264 align-items: center; 1265 display: flex; 1266 flex-direction: column; 1267 margin-block-start: 15px; 1268 position: absolute; 1269 translate: -50% calc(-100% + 17px); 1270 } 1271 #demand .div-bubble:nth-child(1 of #demand .div-bubble) { 1272 left: 29%; 1273 top: 33%; 1274 } 1275 #demand .div-bubble:nth-child(2 of #demand .div-bubble) { 1276 left: 70%; 1277 top: 33%; 1278 } 1279 #demand .div-bubble:nth-child(3 of #demand .div-bubble) { 1280 left: 17%; 1281 top: 56%; 1282 } 1283 #demand .div-bubble:nth-child(4 of #demand .div-bubble) { 1284 left: 83%; 1285 top: 56%; 1286 } 1287 #demand .img-icon { 1288 border-radius: 100px; 1289 box-shadow: 0 2px 5px color-mix(in srgb, black 10%, transparent); 1290 height: 20px; 1291 width: 20px; 1292 } 1293 #demand .p-title { 1294 align-items: center; 1295 backdrop-filter: blur(20px); 1296 background-color: color-mix(in srgb, black 3%, transparent); 1297 border-radius: 100px; 1298 color: color-mix(in srgb, black 40%, transparent); 1299 display: flex; 1300 font-family: "Inter"; 1301 font-size: 13px; 1302 font-weight: 600; 1303 gap: 8px; 1304 left: 50%; 1305 letter-spacing: -0.02em; 1306 line-height: 135%; 1307 padding: 3px 14px 3px 3px; 1308 position: absolute; 1309 top: 0; 1310 translate: -50% -50%; 1311 width: fit-content; 1312 z-index: 1; 1313 box-shadow: inset 2px 2px 10px color-mix(in srgb, white 90%, transparent), inset -2px -2px 10px color-mix(in srgb, white 90%, transparent), 0px 2px 7px color-mix(in srgb, black 8%, transparent); 1314 } 1315 #demand .p-text { 1316 align-items: center; 1317 backdrop-filter: blur(10px); 1318 background-color: color-mix(in srgb, black 3%, transparent); 1319 border-radius: 100px; 1320 color: color-mix(in srgb, black 50%, transparent); 1321 display: flex; 1322 font-family: "Inter", sans-serif; 1323 font-size: clamp(14px, 14px + (18 - 14) * (100dvw - 375px) / (1440 - 375), 18px); 1324 font-weight: 500; 1325 height: 86px; 1326 justify-content: center; 1327 letter-spacing: -0.02em; 1328 line-height: 130%; 1329 text-align: center; 1330 width: 386px; 1331 box-shadow: inset 2px 2px 10px color-mix(in srgb, white 80%, transparent), inset -2px -2px 10px color-mix(in srgb, white 80%, transparent), 0px 6px 15px color-mix(in srgb, black 7%, transparent); 1332 } 1333 #demand .div-dot { 1334 backdrop-filter: blur(10px); 1335 background-color: color-mix(in srgb, black 3%, transparent); 1336 border-radius: 100px; 1337 height: 34px; 1338 margin-block-start: 15px; 1339 width: 34px; 1340 box-shadow: inset 2px 2px 10px color-mix(in srgb, white 80%, transparent), inset -2px -2px 10px color-mix(in srgb, white 80%, transparent), 0px 6px 15px color-mix(in srgb, black 7%, transparent); 1341 } 1342 #demand .img-separator { 1343 display: none; 1344 margin-block-start: 120px; 1345 margin-inline: auto; 1346 } 1347 @media (width <= 1080px) { 1348 #demand .div-bubble { 1349 align-items: center; 1350 display: flex; 1351 flex-direction: column; 1352 margin-block-start: 15px; 1353 position: absolute; 1354 translate: -50% calc(-100% + 17px); 1355 } 1356 #demand .div-bubble:nth-child(1 of #demand .div-bubble) { 1357 left: 24%; 1358 top: 39%; 1359 } 1360 #demand .div-bubble:nth-child(2 of #demand .div-bubble) { 1361 left: 66%; 1362 top: 27%; 1363 } 1364 #demand .div-bubble:nth-child(3 of #demand .div-bubble) { 1365 left: 16%; 1366 top: 66%; 1367 } 1368 #demand .div-bubble:nth-child(4 of #demand .div-bubble) { 1369 left: 81%; 1370 top: 56%; 1371 } 1372 } 1373 @media (width > 700px) { 1374 #demand .div-bubble:nth-child(1 of #demand .div-bubble) .p-title, #demand .div-bubble:nth-child(1 of #demand .div-bubble) .p-text { 1375 animation-delay: 0s; 1376 } 1377 #demand .div-bubble:nth-child(2 of #demand .div-bubble) .p-title, #demand .div-bubble:nth-child(2 of #demand .div-bubble) .p-text { 1378 animation-delay: 0.5s; 1379 } 1380 #demand .div-bubble:nth-child(3 of #demand .div-bubble) .p-title, #demand .div-bubble:nth-child(3 of #demand .div-bubble) .p-text { 1381 animation-delay: 1s; 1382 } 1383 #demand .div-bubble:nth-child(4 of #demand .div-bubble) .p-title, #demand .div-bubble:nth-child(4 of #demand .div-bubble) .p-text { 1384 animation-delay: 1.5s; 1385 } 1386 } 1387 @media (width <= 1030px) { 1388 #demand .div-picture { 1389 margin-inline: 100px; 1390 } 1391 }
1392 @media (width <= 900px) { 1393 #demand .div-bubble { 1394 scale: 0.8; 1395 } 1396 } 1397 @media (width <= 700px) { 1398 #demand .div-picture { 1399 margin: 0; 1400 padding: 0; 1401 } 1402 #demand .picture { 1403 display: none; 1404 } 1405 #demand .div-bubble { 1406 position: relative; 1407 left: unset !important; 1408 top: unset !important; 1409 scale: 1; 1410 translate: none; 1411 } 1412 #demand .div-bubble:not(:nth-child(1 of #demand .div-bubble)) { 1413 margin-block-start: -10px; 1414 } 1415 #demand .div-bubble:nth-child(1 of #demand .div-bubble) { 1416 z-index: 1; 1417 } 1418 #demand .div-bubble:nth-child(2 of #demand .div-bubble) { 1419 z-index: 2; 1420 } 1421 #demand .div-bubble:nth-child(3 of #demand .div-bubble) { 1422 z-index: 3; 1423 } 1424 #demand .div-bubble:nth-child(4 of #demand .div-bubble) { 1425 z-index: 4; 1426 } 1427 #demand .div-dot { 1428 display: none; 1429 } 1430 #demand .p-text { 1431 align-items: start; 1432 height: 106px; 1433 padding-block-start: 35px; 1434 width: 335px; 1435 } 1436 .div-bubble #demand .p-text { 1437 background-color: red; 1438 } 1439 #demand .h2 { 1440 margin-block-end: 60px; 1441 } 1442 #demand .img-separator { 1443 display: block; 1444 } 1445 } 1446 1447 .header.scroll .div-gradient-blur { 1448 min-width: 200dvw; 1449 translate: -50%; 1450 } 1451 @media (width <= 990px) { 1452 .header.scroll .div-gradient-blur { 1453 translate: -50% -8px; 1454 } 1455 } 1456 1457 .header { 1458 position: fixed; 1459 top: 20px; 1460 left: 50%; 1461 transform: translateX(-50%); 1462 z-index: 11; 1463 } 1464 .header .header__mobile-foot-links.social { 1465 width: 100%; 1466 } 1467 .header .header__mobile-foot-links.social a { 1468 aspect-ratio: 1/1; 1469 flex: 1; 1470 } 1471 .header .header__mobile-foot-links.social a .green-arrow { 1472 height: 100%; 1473 width: 100%; 1474 } 1475 .header .header__mobile-foot-links.social a .green-arrow img { 1476 scale: 1.2; 1477 } 1478 .header .side-media:not(.header__mobile-link) { 1479 pointer-events: none; 1480 } 1481 .header .div-gradient-blur { 1482 position: absolute; 1483 z-index: 0; 1484 inset: auto 0 0 0; 1485 height: 66px; 1486 pointer-events: none; 1487 scale: 1 -1; 1488 } 1489 .header .div-gradient-blur div, .header .div-gradient-blur::before, .header .div-gradient-blur::after { 1490 position: absolute; 1491 inset: 0; 1492 } 1493 .header .div-gradient-blur::before { 1494 content: ""; 1495 z-index: 1; 1496 backdrop-filter: blur(0.5px); 1497 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 37.5%); 1498 } 1499 .header .div-gradient-blur div:nth-of-type(1) { 1500 z-index: 2; 1501 backdrop-filter: blur(1px); 1502 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgba(0, 0, 0, 0) 50%); 1503 } 1504 .header .div-gradient-blur div:nth-of-type(2) { 1505 z-index: 3; 1506 backdrop-filter: blur(2px); 1507 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 62.5%); 1508 } 1509 .header .div-gradient-blur div:nth-of-type(3) { 1510 z-index: 4; 1511 backdrop-filter: blur(4px); 1512 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgba(0, 0, 0, 0) 75%); 1513 } 1514 .header .div-gradient-blur div:nth-of-type(4) { 1515 z-index: 5; 1516 backdrop-filter: blur(8px); 1517 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 87.5%); 1518 } 1519 .header .div-gradient-blur div:nth-of-type(5) { 1520 z-index: 6; 1521 backdrop-filter: blur(16px); 1522 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%); 1523 } 1524 .header .div-gradient-blur div:nth-of-type(6) { 1525 z-index: 7; 1526 backdrop-filter: blur(32px); 1527 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgb(0, 0, 0) 100%); 1528 } 1529 .header .div-gradient-blur::after { 1530 content: ""; 1531 z-index: 8; 1532 backdrop-filter: blur(64px); 1533 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, rgb(0, 0, 0) 100%); 1534 } 1535 .header__course-image { 1536 overflow: hidden; 1537 } 1538 .header__course-image img { 1539 border-radius: 20px; 1540 object-fit: cover; 1541 aspect-ratio: 242/155; 1542 } 1543 .header__mobile-course-card { 1544 width: 142px !important; 1545 } 1546 .header__mobile-course-card img { 1547 width: 100%; 1548 height: 100%; 1549 object-fit: cover; 1550 } 1551 .header__mobile-course-card:last-of-type { 1552 margin-inline-end: 20px; 1553 } 1554 .header__mobile-course-image { 1555 border-radius: 20px; 1556 box-shadow: 0px 2px 10px color-mix(in srgb, black 5%, transparent); 1557 margin-block-end: 15px; 1558 } 1559 .header__mobile-course-title { 1560 color: black; 1561 font-size: 12px; 1562 font-weight: 600; 1563 letter-spacing: -0.02em; 1564 line-height: 115% !important; 1565 margin-block-end: 5px; 1566 margin-inline-start: 10px; 1567 } 1568 .header__link { 1569 padding: 5px 15px; 1570 border-radius: 64px; 1571 text-decoration: none; 1572 box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.0509803922); 1573 background-color: rgba(255, 255, 255, 0.4); 1574 font-family: "Inter"; 1575 font-size: 14px; 1576 letter-spacing: -0.02em; 1577 text-wrap: nowrap; 1578 display: flex; 1579 align-items: center; 1580 font-weight: 500; 1581 color: rgba(0, 0, 0, 0.5019607843); 1582 } 1583 @media (hover: hover) and (pointer: fine) { 1584 .header__link:hover { 1585 backdrop-filter: blur(45px); 1586 box-shadow: -4px 0px 10px 0px rgba(255, 255, 255, 0.1019607843) inset; 1587 } 1588 } 1589 .header__link:active { 1590 backdrop-filter: blur(45px); 1591 box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1019607843); 1592 } 1593 .header__link:nth-child(even):not(:last-child) { 1594 margin-right: 10px; 1595 } 1596 .header__link:nth-child(even):not(:last-child)::after { 1597 content: ""; 1598 position: absolute; 1599 right: -10px; 1600 top: 50%; 1601 transform: translateY(-50%); 1602 bottom: 0; 1603 width: 1px; 1604 background: #cccccc; 1605 height: 22px; 1606 } 1607 .header__link_green { 1608 background-color: #cfff32; 1609 color: #000000; 1610 } 1611 .header__links { 1612 align-items: center; 1613 gap: 10px; 1614 align-items: stretch; 1615 z-index: 5; 1616 } 1617 @media (max-width: 1024px) { 1618 .header__links { 1619 flex: 1; 1620 justify-content: flex-end; 1621 align-items: stretch; 1622 } 1623 } 1624 .scroll .header__links { 1625 flex: 1; 1626 justify-content: flex-end; 1627 } 1628 .header__logo { 1629 align-items: center; 1630 gap: 5px; 1631 position: relative; 1632 line-height: 120%; 1633 letter-spacing: -0.02em; 1634 padding-inline-end: 8px; 1635 } 1636 @media (min-width: 990px) { 1637 .header__logo { 1638 translate: -9px; 1639 } 1640 } 1641 @media (max-width: 1024px) { 1642 .header__logo::after { 1643 content: ""; 1644 position: absolute; 1645 right: -7.5px; 1646 top: 50%; 1647 transform: translateY(-50%); 1648 bottom: 0; 1649 width: 1px; 1650 background: #cccccc; 1651 height: 22px; 1652 } 1653 } 1654 .scroll .header__logo::after { 1655 content: ""; 1656 position: absolute; 1657 right: -7.5px; 1658 top: 50%; 1659 transform: translateY(-50%); 1660 bottom: 0; 1661 width: 1px; 1662 background: #cccccc; 1663 height: 22px; 1664 } 1665 @media (max-width: 990px) { 1666 .header__logo::after { 1667 display: none; 1668 } 1669 } 1670 .header__logo-image { 1671 display: flex; 1672 align-items: center; 1673 justify-content: center; 1674 } 1675 .header__logo-image img { 1676 max-width: 100%; 1677 max-height: 100%; 1678 object-fit: contain; 1679 object-position: center; 1680 } 1681 .header__menu { 1682 align-items: center; 1683 padding: 6px; 1684 background-color: #f1f1f1; 1685 border-radius: 80px; 1686 max-width: 1071px; 1687 flex: 1; 1688 align-items: stretch; 1689 justify-content: flex-end; 1690 box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0784313725); 1691 backdrop-filter: blur(45px); 1692 } 1693 @media (max-width: 1024px) { 1694 .header__menu { 1695 display: contents !important; 1696 } 1697 } 1698 .scroll .header__menu { 1699 display: contents; 1700 } 1701 @media (max-width: 990px) { 1702 .header__menu { 1703 display: flex !important; 1704 flex-direction: column !important; 1705 background-color: transparent; 1706 box-shadow: none; 1707 align-items: flex-end; 1708 justify-content: flex-start; 1709 height: 100vh; 1710 padding: 0; 1711 } 1712 } 1713 .header__title { 1714 font-family: "Loos_Extended"; 1715 font-weight: 600; 1716 font-size: 13px; 1717 text-wrap: nowrap; 1718 line-height: 130%; 1719 padding-right: 20px; 1720 } 1721 @media (min-width: 1024px) { 1722 .scroll .header__title { 1723 display: none; 1724 } 1725 } 1726 .header__desktop { 1727 align-items: center; 1728 justify-content: space-between; 1729 border-radius: 80px; 1730 position: relative; 1731 } 1732 @media (max-width: 1024px) { 1733 .header__desktop { 1734 justify-content: space-between; 1735 background-color: #f1f1f1; 1736 gap: 15px;
1737 padding-block: 6px; 1738 align-items: stretch; 1739 padding-left: 20px; 1740 padding-right: 6px; 1741 } 1742 } 1743 .scroll .header__desktop { 1744 justify-content: space-between; 1745 background-color: #f1f1f1; 1746 gap: 15px; 1747 padding-block: 6px; 1748 align-items: stretch; 1749 padding-left: 30px; 1750 padding-right: 6px; 1751 backdrop-filter: blur(45px); 1752 box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0784313725); 1753 } 1754 @media (max-width: 990px) { 1755 .header__desktop { 1756 display: none !important; 1757 } 1758 } 1759 .header__burger { 1760 align-items: center; 1761 gap: 12px; 1762 box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.0509803922); 1763 padding-left: 5px; 1764 cursor: pointer; 1765 } 1766 @media (min-width: 990px) { 1767 .header__burger { 1768 margin-right: auto; 1769 } 1770 } 1771 .header__burger-text { 1772 font-family: inherit; 1773 font-size: inherit; 1774 font-weight: inherit; 1775 color: inherit; 1776 } 1777 @media (max-width: 990px) { 1778 .header__burger-text { 1779 padding-right: 10px; 1780 } 1781 } 1782 @media (max-width: 990px) { 1783 .header__burger { 1784 padding: 5px; 1785 } 1786 } 1787 .header__burger-icon { 1788 box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1215686275); 1789 background-color: #cfff32; 1790 border-radius: 50%; 1791 } 1792 .header__burger-icon label { 1793 scale: 1.3; 1794 } 1795 .header__head { 1796 justify-content: space-between; 1797 } 1798 .header__courses { 1799 border-radius: 20px; 1800 bottom: -10px; 1801 box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0784313725); 1802 height: 0; 1803 left: 50%; 1804 max-height: calc(100dvh - 100px); 1805 overflow-x: hidden; 1806 overflow-y: auto !important; 1807 overscroll-behavior: contain; 1808 -webkit-overflow-scrolling: touch; 1809 position: absolute; 1810 transform: translate(-50%, 100%); 1811 width: 100%; 1812 min-height: 0; 1813 } 1814 .header__courses .wrapper { 1815 border-radius: inherit; 1816 background-color: #f0f0f0; 1817 padding: 20px; 1818 gap: 40px; 1819 min-height: 0; 1820 max-height: inherit; 1821 overflow-x: hidden; 1822 overflow-y: auto; 1823 overscroll-behavior: contain; 1824 -webkit-overflow-scrolling: touch; 1825 } 1826 .header__section { 1827 align-items: flex-start; 1828 gap: 30px; 1829 } 1830 .header__section-content { 1831 width: 100%; 1832 display: grid; 1833 grid-template-columns: repeat(4, 1fr); 1834 column-gap: 10px; 1835 row-gap: 20px; 1836 letter-spacing: -0.02em; 1837 } 1838 .header__section-title .side-media__text { 1839 font-family: "Inter", sans-serif; 1840 line-height: 135%; 1841 letter-spacing: -0.02em; 1842 } 1843 .header__course { 1844 border-radius: 20px; 1845 box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.0509803922); 1846 height: 155px; 1847 outline: solid 2px transparent; 1848 width: 100%; 1849 } 1850 .header__course:hover .header__course-image img { 1851 scale: 1.2; 1852 } 1853 .header__course:hover span { 1854 background-color: #cfff32; 1855 color: black; 1856 } 1857 .header__course:hover { 1858 outline-color: #cfff32; 1859 } 1860 .header:not(:has(.green-arrow:hover, .green-arrow:active)) .header__course:active span { 1861 background-color: #e1ff80; 1862 } 1863 .header:not(:has(.green-arrow:hover, .green-arrow:active)) .header__course:active { 1864 outline-color: #e1ff80; 1865 } 1866 .header__course:hover .green-arrow { 1867 background-color: black; 1868 box-shadow: none; 1869 } 1870 .header__course:hover .green-arrow img { 1871 filter: invert(1); 1872 } 1873 .header__course-cta { 1874 position: absolute; 1875 bottom: 10px; 1876 right: 10px; 1877 cursor: pointer; 1878 width: 32px; 1879 z-index: 3; 1880 } 1881 .header__course-image { 1882 width: 100%; 1883 height: 100%; 1884 display: flex; 1885 justify-content: center; 1886 overflow: hidden; 1887 border-radius: 20px; 1888 } 1889 .header__course-image img { 1890 min-height: 100%; 1891 min-width: 100%; 1892 object-fit: cover; 1893 object-position: center; 1894 transition: 0.7s; 1895 } 1896 .header__course-image::after { 1897 content: ""; 1898 position: absolute; 1899 left: 0; 1900 bottom: 0; 1901 width: 100%; 1902 height: 30%; 1903 background: white; 1904 background-size: cover; 1905 filter: blur(36px); 1906 z-index: 1; 1907 pointer-events: none; 1908 opacity: 1; 1909 } 1910 .header__course-title { 1911 background-color: #f7f7f7; 1912 border-radius: 40px; 1913 color: rgba(0, 0, 0, 0.4); 1914 font-family: "Inter", sans-serif; 1915 font-weight: 600; 1916 left: 10px; 1917 position: absolute; 1918 top: 0; 1919 transform: translateY(-50%); 1920 width: fit-content; 1921 z-index: 1; 1922 font-size: 15px; 1923 box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.0705882353); 1924 } 1925 @media (max-width: 1440px) { 1926 .header__course-title { 1927 font-size: 15px; 1928 } 1929 } 1930 @media (max-width: 1024px) { 1931 .header__course-title { 1932 font-size: 13px; 1933 } 1934 } 1935 @media (max-width: 375px) { 1936 .header__course-title { 1937 font-size: 13px; 1938 } 1939 } 1940 .header__course-title span { 1941 border-radius: inherit; 1942 display: block; 1943 font-family: "Inter", sans-serif; 1944 font-size: 13px; 1945 font-weight: 600; 1946 height: 100%; 1947 letter-spacing: -0.02em; 1948 padding: 4px 12px; 1949 transition: 0.25s; 1950 width: 100%; 1951 } 1952 1953 .scroll { 1954 max-width: 1100px; 1955 } 1956 1957 .burger { 1958 padding-inline: 8px; 1959 aspect-ratio: 1; 1960 display: flex; 1961 align-items: center; 1962 justify-content: center; 1963 flex-direction: column; 1964 } 1965 .burger label { 1966 display: flex; 1967 align-items: center; 1968 justify-content: center; 1969 flex-direction: column; 1970 gap: 2px; 1971 position: relative; 1972 } 1973 .burger input { 1974 display: none; 1975 } 1976 .burger span { 1977 display: block; 1978 width: 8px; 1979 height: 1px; 1980 background: #000000; 1981 border-radius: 2px; 1982 transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); 1983 } 1984 .burger.active span:nth-child(1) { 1985 position: absolute; 1986 transform: rotate(45deg); 1987 } 1988 .burger.active span:nth-child(2) { 1989 opacity: 0; 1990 transform: translateX(-10px); 1991 } 1992 .burger.active span:nth-child(3) { 1993 position: absolute; 1994 transform: rotate(-45deg); 1995 } 1996 1997 .header__mobile { 1998 z-index: 1; 1999 position: relative; 2000 padding-bottom: 20px; 2001 } 2002 @media (min-width: 990px) { 2003 .header__mobile { 2004 display: none !important; 2005 } 2006 } 2007 .header__mobile-content { 2008 margin-block: 20px; 2009 padding: 20px; 2010 border-radius: 20px; 2011 box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0784313725); 2012 overflow: hidden; 2013 position: relative; 2014 } 2015 .header__mobile-links { 2016 gap: 20px; 2017 flex: 1; 2018 padding-bottom: 30px; 2019 border-bottom: 1px solid rgba(128, 128, 128, 0.3); 2020 } 2021 .header__mobile-link { 2022 cursor: pointer; 2023 box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.0509803922); 2024 } 2025 .header__mobile-link.side-media { 2026 padding: 5px; 2027 justify-content: space-between; 2028 background-color: rgba(255, 255, 255, 0.1490196078); 2029 } 2030 .header__mobile-link .side-media__img { 2031 width: 32px; 2032 height: 32px; 2033 } 2034 .header__mobile-link .side-media__text { 2035 color: rgba(0, 0, 0, 0.8); 2036 font-family: "Inter"; 2037 font-weight: 500; 2038 padding-inline: 15px; 2039 letter-spacing: -0.04em; 2040 font-size: 14px; 2041 } 2042 .header__mobile-link_green.side-media { 2043 background-color: #cfff32; 2044 } 2045 .header__mobile-link_green .side-media__img { 2046 background-color: #000000; 2047 } 2048 .header__mobile-mini-link { 2049 margin-top: -10px; 2050 align-self: flex-start; 2051 background-color: rgba(255, 255, 255, 0.4); 2052 box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.0509803922); 2053 padding: 7px 15px; 2054 border-radius: 64px; 2055 color: rgba(0, 0, 0, 0.5019607843); 2056 font-family: "Inter"; 2057 line-height: 130%; 2058 font-size: 14px; 2059 letter-spacing: -0.01em; 2060 } 2061 .header__mobile-mini-link.first {
2062 margin-top: auto; 2063 } 2064 .header__mobile-foot { 2065 padding-top: 30px; 2066 gap: 30px; 2067 align-items: flex-start; 2068 } 2069 .header__mobile-foot-section { 2070 align-items: flex-start; 2071 gap: 30px; 2072 } 2073 .header__mobile-foot-section.social { 2074 gap: 20px; 2075 width: 100%; 2076 } 2077 .header__mobile-foot-title { 2078 font-size: 16px; 2079 line-height: 110%; 2080 font-family: "GNF"; 2081 color: rgba(0, 0, 0, 0.4); 2082 text-transform: uppercase; 2083 } 2084 .header__mobile-foot-links { 2085 flex: 1; 2086 gap: 10px; 2087 } 2088 .header__mobile-foot-links.social { 2089 justify-content: space-evenly; 2090 gap: 8px; 2091 } 2092 .header__mobile-foot-links .green-arrow { 2093 background-color: rgba(255, 255, 255, 0.1490196078); 2094 } 2095 .header__mobile-curses { 2096 position: absolute; 2097 inset: -1px; 2098 background-color: #f7f7f7; 2099 padding: inherit; 2100 align-items: flex-start; 2101 gap: 40px; 2102 padding-right: 0; 2103 } 2104 .header__mobile-back.green-arrow { 2105 width: 32px; 2106 } 2107 .header__mobile-course { 2108 gap: 25px; 2109 max-width: 100%; 2110 } 2111 .header__mobile-course-head { 2112 gap: 6px; 2113 align-items: stretch; 2114 } 2115 .header__mobile-course-head .side-media { 2116 background-color: #fafafa; 2117 } 2118 .header__mobile-course-content { 2119 gap: 10px; 2120 padding-bottom: 10px; 2121 overflow-x: scroll; 2122 overflow-y: hidden; 2123 max-width: 100%; 2124 } 2125 .header__mobile-course-count { 2126 font-family: "Inter"; 2127 font-size: 13px; 2128 display: flex; 2129 align-items: center; 2130 justify-content: center; 2131 color: rgba(0, 0, 0, 0.4); 2132 border-radius: 40px; 2133 background-color: #fafafa; 2134 line-height: 130%; 2135 font-weight: 600; 2136 padding-inline: 12px; 2137 box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.0705882353); 2138 } 2139 .header__mobile-course-card { 2140 gap: 15px; 2141 align-items: center; 2142 } 2143 .header__mobile-course-image { 2144 border-radius: 20px; 2145 overflow: hidden; 2146 max-width: 142px; 2147 aspect-ratio: 1; 2148 } 2149 .header__mobile-course-title { 2150 font-weight: 600; 2151 font-size: 12px; 2152 font-family: "Inter"; 2153 line-height: 75%; 2154 } 2155 2156 @media (width < 800px) { 2157 .header { 2158 left: 0; 2159 max-width: 100dvw !important; 2160 transform: none !important; 2161 } 2162 } 2163 .div-blur { 2164 background-color: color-mix(in srgb, black 25%, transparent); 2165 backdrop-filter: blur(5px); 2166 height: 100%; 2167 left: 0; 2168 pointer-events: none; 2169 position: absolute; 2170 top: 0; 2171 width: 100%; 2172 z-index: 2; 2173 transition: 1s; 2174 } 2175 2176 @media (width >= 1140px) { 2177 .hero:not(:has(#hero__dot:hover)) .div-blur { 2178 background-color: color-mix(in srgb, black 0%, transparent); 2179 backdrop-filter: blur(0px); 2180 } 2181 } 2182 @media (width < 1140px) and (width > 950px) { 2183 .hero:not(:has(#hero__dot:hover)) .div-blur { 2184 background-color: color-mix(in srgb, black 0%, transparent); 2185 backdrop-filter: blur(0px); 2186 } 2187 } 2188 @media (width <= 950px) { 2189 .hero:not(:has(#hero__dot.active)) .div-blur { 2190 background-color: color-mix(in srgb, black 0%, transparent); 2191 backdrop-filter: blur(0px); 2192 } 2193 } 2194 @keyframes slideUpDownHeroAfter { 2195 0% { 2196 bottom: clamp(50px, 50px + (80 - 50) * (100dvw - 375px) / (1440 - 375), 80px); 2197 /*bottom: 20px;*/ 2198 } 2199 100% { 2200 bottom: clamp(55px, 55px + (85 - 55) * (100dvw - 375px) / (1440 - 375), 85px); 2201 /*bottom: 28px;*/ 2202 } 2203 } 2204 .hero { 2205 height: 100lvh; 2206 width: 100%; 2207 background-color: #e4e4e4; 2208 position: sticky; 2209 top: 0px; 2210 left: 0px; 2211 z-index: 0; 2212 overflow: hidden; 2213 transition: 0.5s opacity;
2214 padding-block-end: clamp(60px, 60px + (120 - 60) * (100dvw - 375px) / (1440 - 375), 120px); 2215 } 2216 .hero .hero__content { 2217 margin-block-end: clamp(-120px, -60px + (-120 - -60) * (100dvw - 375px) / (1440 - 375), -60px); 2218 } 2219 .hero__dot { 2220 color: black; 2221 } 2222 .hero.--is-hidden { 2223 opacity: 0; 2224 } 2225 @media (max-width: 1140px) { 2226 .hero { 2227 height: auto; 2228 position: relative; 2229 background-color: #e8e8e8; 2230 } 2231 } 2232 .hero:after { 2233 animation: slideUpDownHeroAfter 1.5s ease-in-out infinite alternate; 2234 background-color: white; 2235 border-radius: 100px; 2236 box-shadow: 0 2px 12px color-mix(in srgb, black 25%, transparent); 2237 content: ""; 2238 height: 5px; 2239 left: 50%; 2240 position: absolute; 2241 translate: -50%; 2242 width: 100px; 2243 z-index: 1; 2244 } 2245 .hero::before { 2246 display: none; 2247 } 2248 @media (max-width: 1140px) { 2249 .hero { 2250 flex-direction: column !important; 2251 } 2252 } 2253 .hero__read-more { 2254 pointer-events: none; 2255 position: absolute; 2256 transition: 1s; 2257 z-index: 5; 2258 } 2259 @media (width >= 1140px) { 2260 .hero__read-more { 2261 left: calc(100% + 25px); 2262 top: 0; 2263 } 2264 .hero__top-one:not(:has(#hero__dot:hover)) .hero__read-more { 2265 opacity: 0; 2266 translate: -50px; 2267 } 2268 } 2269 @media (width < 1140px) and (width > 950px) { 2270 .hero__read-more { 2271 left: 50%; 2272 top: calc(100% + 30px); 2273 translate: -50%; 2274 } 2275 .hero__top-one:not(:has(#hero__dot:hover)) .hero__read-more { 2276 opacity: 0; 2277 translate: -50% -50px; 2278 } 2279 } 2280 @media (width <= 950px) { 2281 .hero__read-more { 2282 left: 50%; 2283 top: calc(100% + 20px); 2284 translate: -50%; 2285 } 2286 .hero__top-one:not(:has(#hero__dot.active)) .hero__read-more { 2287 opacity: 0; 2288 translate: -50% -50px; 2289 } 2290 } 2291 @media (width <= 720px) { 2292 .hero__read-more { 2293 scale: 0.8; 2294 transform-origin: top; 2295 } 2296 } 2297 @media (width <= 570px) { 2298 .hero__read-more { 2299 scale: 0.55; 2300 } 2301 } 2302 @media (width <= 500px) { 2303 .hero .hero__top-one span { 2304 display: flex; 2305 flex-direction: column; 2306 margin-inline-start: 4px; 2307 } 2308 } 2309 .hero__card { 2310 align-items: flex-start; 2311 background-color: rgba(255, 255, 255, 0.4); 2312 border-radius: 26px; 2313 box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0784313725); 2314 justify-content: flex-start; 2315 padding: 15px 40px 20px 20px; 2316 transition: 1s; 2317 width: 100%; 2318 transition-delay: 0.5s; 2319 transition-property: opacity, translation; 2320 } 2321 @media (max-width: 1140px) { 2322 .hero__card { 2323 align-items: center; 2324 box-shadow: none; 2325 flex: 1; 2326 padding-bottom: 50px; 2327 } 2328 .hero__card::before { 2329 display: none; 2330 } 2331 } 2332 @media (width <= 585px) { 2333 .hero__card { 2334 background-color: transparent; 2335 } 2336 } 2337 .hero__content { 2338 flex: 1; 2339 position: relative; 2340 } 2341 .hero__content:after { 2342 backdrop-filter: blur(10px); 2343 bottom: 0; 2344 content: ""; 2345 display: block; 2346 height: 100px; 2347 position: absolute; 2348 width: 100%; 2349 z-index: 1; 2350 mask-image: linear-gradient(to top, rgb(0, 0, 0) 20%, rgba(0, 0, 0, 0)); 2351 } 2352 .hero__disc { 2353 font-family: "Inter"; 2354 font-size: clamp(14px, 14px + (15 - 14) * (100dvw - 375px) / (1440 - 375), 15px); 2355 font-weight: 600; 2356 letter-spacing: -0.02em; 2357 line-height: 135%;
2358 margin-top: clamp(60px, 60px + (180 - 60) * (100dvw - 375px) / (1440 - 375), 180px); 2359 text-wrap: balance; 2360 } 2361 .hero__disc span { 2362 color: rgba(0, 0, 0, 0.5019607843); 2363 font-weight: 500; 2364 } 2365 @media (max-width: 1140px) { 2366 .hero__disc { 2367 text-align: center; 2368 } 2369 } 2370 .hero__dots { 2371 border-radius: 64px; 2372 box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.0784313725); 2373 cursor: pointer; 2374 font-size: 16px; 2375 font-weight: 600; 2376 margin-left: 24px; 2377 padding: 3px 10px 8px 10px; 2378 transition: all 0.3s linear; 2379 } 2380 @media (width < 950px) { 2381 .hero__dots.active { 2382 box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.08), inset 0 -3px 15px 0 rgba(255, 255, 255, 0.3), inset 0 3px 15px 0 rgba(255, 255, 255, 0.3), inset 2px 0 15px 0 rgba(255, 255, 255, 0.5), inset -2px 0 15px 0 rgba(255, 255, 255, 0.5); 2383 background: #cfff32; 2384 } 2385 } 2386 @media (hover: hover) and (pointer: fine) { 2387 .hero__dots:hover { 2388 box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.08), inset 0 -3px 15px 0 rgba(255, 255, 255, 0.3), inset 0 3px 15px 0 rgba(255, 255, 255, 0.3), inset 2px 0 15px 0 rgba(255, 255, 255, 0.5), inset -2px 0 15px 0 rgba(255, 255, 255, 0.5); 2389 background: #cfff32; 2390 } 2391 } 2392 .hero__fence { 2393 height: 100%; 2394 margin-left: 240px; 2395 position: relative; 2396 box-shadow: 10px 4px 55px 0px rgba(0, 0, 0, 0.0705882353); 2397 background: repeating-linear-gradient(to right, #d9d9d9 0px, #f1f1f1 18px); 2398 backdrop-filter: blur(35px); 2399 } 2400 @media (max-width: 1440px) { 2401 .hero__fence { 2402 margin-left: 212px; 2403 } 2404 } 2405 @media (max-width: 1140px) { 2406 .hero__fence { 2407 margin-left: 0; 2408 position: absolute; 2409 inset: 0; 2410 box-shadow: 0px -20px 55px 0px rgba(0, 0, 0, 0.0705882353); 2411 } 2412 } 2413 @media (max-width: 500px) { 2414 .hero__fence { 2415 box-shadow: none; 2416 } 2417 } 2418 .hero__free { 2419 background-color: #cfff32; 2420 padding: 8px 20px; 2421 font-family: "Loos Extended"; 2422 font-weight: 500; 2423 line-height: 115%; 2424 border-radius: 60px; 2425 margin-top: 10px; 2426 box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1490196078), 0px 0px 24px 0px rgba(207, 255, 50, 0.4); 2427 letter-spacing: -0.7px; 2428 font-size: 38px; 2429 } 2430 @media (max-width: 1440px) { 2431 .hero__free { 2432 font-size: 38px; 2433 } 2434 } 2435 @media (max-width: 1024px) { 2436 .hero__free { 2437 font-size: 34px; 2438 } 2439 } 2440 @media (max-width: 375px) { 2441 .hero__free { 2442 font-size: 34px; 2443 } 2444 } 2445 .hero__cta { 2446 z-index: 1; 2447 cursor: pointer; 2448 transition: 1s; 2449 transition-delay: 1.5s; 2450 transition-property: opacity, translation; 2451 } 2452 @media (hover: hover) and (pointer: fine) { 2453 .hero__cta:hover .side-media { 2454 box-shadow: 0px 0px 24px 0px rgba(207, 255, 50, 0.6980392157), 0px -5px 14px 0px rgba(255, 255, 255, 0.3019607843) inset, 0px 5px 14px 0px rgba(255, 255, 255, 0.3019607843) inset, 4px 0px 30px 0px rgba(255, 255, 255, 0.5019607843) inset, -4px 0px 30px 0px rgba(255, 255, 255, 0.5019607843) inset, 0px 2px 10px 0px rgba(0, 0, 0, 0.0509803922); 2455 } 2456 .hero__cta:hover .side-media__img { 2457 background-color: #ffffff; 2458 box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1019607843), 0px 1px 3px 0px rgba(0, 0, 0, 0.1019607843); 2459 } 2460 .hero__cta:hover .side-media__img img { 2461 filter: invert(0) !important; 2462 } 2463 } 2464 .hero__cta:active .side-media__text { 2465 color: rgba(0, 0, 0, 0.4); 2466 } 2467 .hero__cta:active .side-media { 2468 box-shadow: none; 2469 } 2470 @media (min-width: 1440px) { 2471 .hero__cta { 2472 padding-top: 40px; 2473 } 2474 } 2475 .hero__cta .side-media { 2476 background-color: #cfff32; 2477 padding-block: 17px; 2478 padding-left: 24px; 2479 padding-right: 17px; 2480 gap: 24px; 2481 } 2482 .hero__cta .side-media__text { 2483 color: #000000; 2484 font-weight: 400; 2485 font-size: 18px; 2486 font-family: "GNF"; 2487 text-wrap: nowrap; 2488 padding: 0; 2489 text-transform: uppercase; 2490 } 2491 .hero__cta .side-media__img { 2492 background-color: #000000;
2493 min-height: 26px; 2494 min-width: 26px; 2495 } 2496 .hero__cta .side-media__img img { 2497 aspect-ratio: 1; 2498 } 2499 @media (max-width: 1140px) { 2500 .hero__cta { 2501 position: absolute; 2502 bottom: 0; 2503 left: 50%; 2504 translate: -50% 50%; 2505 } 2506 } 2507 @media (max-width: 500px) { 2508 .hero__cta::after { 2509 content: ""; 2510 position: absolute; 2511 width: 100vw; 2512 height: 200%; 2513 background: linear-gradient(180deg, #e8e8e8 0%, rgba(232, 232, 232, 0) 100%); 2514 top: 50%; 2515 left: 50%; 2516 z-index: -1; 2517 translate: -50%; 2518 } 2519 } 2520 .hero__running-line { 2521 transition: 1s; 2522 transition-delay: 1s; 2523 transition-property: opacity, translation; 2524 background-color: #cfff32; 2525 border-radius: 50px; 2526 font-size: 16px; 2527 overflow: hidden; 2528 padding-block: 12px; 2529 padding-inline: 3px; 2530 text-wrap: nowrap; 2531 min-height: 40.5px; 2532 width: 100%; 2533 box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0784313725), 0px -5px 14px 0px rgba(255, 255, 255, 0.8980392157) inset, 0px 5px 14px 0px rgba(255, 255, 255, 0.8980392157) inset, 4px 0px 30px 0px rgba(255, 255, 255, 0.8) inset, -4px 0px 30px 0px rgba(255, 255, 255, 0.8) inset; 2534 } 2535 @media (max-width: 1140px) { 2536 .hero__running-line { 2537 display: none; 2538 } 2539 } 2540 .hero__running-line span { 2541 animation: marquee 10s linear infinite; 2542 color: rgba(0, 0, 0, 0.5019607843); 2543 display: inline-block; 2544 font-family: "GNF"; 2545 font-weight: 400; 2546 padding-right: 6px; 2547 text-transform: uppercase; 2548 } 2549 .hero__slider { 2550 position: absolute; 2551 overflow: hidden; 2552 inset: 0; 2553 top: auto; 2554 height: fit-content; 2555 display: flex; 2556 flex-direction: column; 2557 align-items: center; 2558 justify-content: flex-end; 2559 } 2560 @media (max-width: 1140px) { 2561 .hero__slider { 2562 position: relative; 2563 } 2564 } 2565 .hero__slider-wrapper { 2566 position: relative; 2567 max-width: 100%; 2568 height: auto !important; 2569 align-items: flex-end; 2570 } 2571 .hero__pagination { 2572 display: flex; 2573 width: 388px !important; 2574 gap: 10px; 2575 align-items: flex-start; 2576 justify-content: center; 2577 max-width: calc(100dvw - 30px); 2578 } 2579 .hero__pagination.swiper-pagination-bullets.swiper-pagination-horizontal { 2580 top: 164px; 2581 left: 50%; 2582 transform: translateX(-50%); 2583 } 2584 @media (width >= 1700px) { 2585 .hero__pagination.swiper-pagination-bullets.swiper-pagination-horizontal { 2586 transform: translateX(-50%) translateY(50px) !important; 2587 } 2588 } 2589 @media (width <= 585px) { 2590 .hero__pagination { 2591 margin: 0; 2592 } 2593 } 2594 @media (max-width: 1140px) { 2595 .hero__pagination.swiper-pagination-bullets.swiper-pagination-horizontal { 2596 top: 70px; 2597 } 2598 } 2599 .hero__slide { 2600 height: auto !important; 2601 } 2602 .hero__slide-light { 2603 position: absolute; 2604 bottom: 0; 2605 transform: translate(-40%, 35%); 2606 width: 100%; 2607 left: 50%; 2608 aspect-ratio: 1; 2609 background-repeat: no-repeat; 2610 background-size: contain; 2611 background-position: center; 2612 z-index: -1; 2613 background-image: url("data:image/svg+xml,%3csvg%20width='1152'%20height='653'%20viewBox='0%200%201152%20653'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20filter='url(%23filter0_f_5101_47359)'%3e%3cellipse%20cx='586'%20cy='567.5'%20rx='446'%20ry='427.5'%20fill='%23D8FF5A'/%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_f_5101_47359'%20x='0'%20y='0'%20width='1172'%20height='1135'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='70'%20result='effect1_foregroundBlur_5101_47359'/%3e%3c/filter%3e%3c/defs%3e%3c/svg%3e"); 2614 } 2615 .hero__icon { 2616 aspect-ratio: 1; 2617 position: absolute; 2618 z-index: 50; 2619 } 2620 .hero__icon img { 2621 max-width: 100%; 2622 max-height: 100%; 2623 object-fit: contain; 2624 object-position: center; 2625 } 2626 @media (max-width: 1440px) { 2627 .hero__icon { 2628 max-width: 115px; 2629 } 2630 } 2631 @media (max-width: 1024px) { 2632 .hero__icon { 2633 max-width: 90px; 2634 } 2635 } 2636 .hero__icon img { 2637 pointer-events: none; 2638 } 2639 .hero__icon--blander { 2640 top: 26%; 2641 left: 35%; 2642 } 2643 @media (max-width: 1440px) { 2644 .hero__icon--blander { 2645 top: 15%; 2646 left: 15%; 2647 } 2648 } 2649 .hero__icon--circle { 2650 top: 51%; 2651 right: 9%; 2652 } 2653 @media (max-width: 1440px) { 2654 .hero__icon--circle { 2655 top: 15%; 2656 right: 12%; 2657 } 2658 } 2659 .hero__icon--ps { 2660 bottom: 42%; 2661 left: 37%; 2662 } 2663 @media (max-width: 1440px) { 2664 .hero__icon--ps { 2665 bottom: 42%; 2666 left: 12%; 2667 } 2668 } 2669 .hero__icon--ai { 2670 top: 50%; 2671 right: 11%; 2672 } 2673 @media (max-width: 1440px) { 2674 .hero__icon--ai { 2675 top: 20%; 2676 right: 25%; 2677 } 2678 } 2679 .hero__icon--figma { 2680 bottom: 52%; 2681 left: 28%; 2682 } 2683 @media (max-width: 1440px) { 2684 .hero__icon--figma { 2685 bottom: 52%; 2686 left: 12%; 2687 } 2688 } 2689 .hero__icon--t { 2690 top: 56%; 2691 left: 70%; 2692 } 2693 @media (max-width: 1440px) { 2694 .hero__icon--t { 2695 top: 56%; 2696 left: 64%; 2697 } 2698 } 2699 .hero__icon--arrow { 2700 bottom: 67%; 2701 right: 3%; 2702 } 2703 @media (max-width: 1440px) { 2704 .hero__icon--arrow { 2705 bottom: 78%; 2706 right: 23%; 2707 } 2708 } 2709 .hero__icon--wb { 2710 top: 31%; 2711 right: 58%; 2712 } 2713 @media (max-width: 1440px) { 2714 .hero__icon--wb { 2715 top: 40%; 2716 right: 73%; 2717 } 2718 } 2719 .hero__icon--ozon { 2720 bottom: 51%; 2721 left: 82%; 2722 } 2723 @media (max-width: 1440px) { 2724 .hero__icon--ozon { 2725 bottom: 51%; 2726 left: 74%; 2727 } 2728 } 2729 .hero__icon--gpt { 2730 top: 24%; 2731 left: 31%; 2732 } 2733 @media (max-width: 1440px) { 2734 .hero__icon--gpt { 2735 top: 40%; 2736 left: 7%; 2737 } 2738 } 2739 .hero__icon--r {
2740 bottom: 18%; 2741 right: 19%; 2742 } 2743 .hero__icon--ship { 2744 top: 16%; 2745 left: 79%; 2746 } 2747 .hero__icon:nth-child(1) { 2748 animation-timing-function: cubic-bezier(0.54, 0.19, 0.33, 0.9); 2749 } 2750 .hero__icon:nth-child(2) { 2751 animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); 2752 } 2753 .hero__icon:nth-child(3) { 2754 animation-timing-function: ease-in-out; 2755 } 2756 .hero__icon:nth-child(1) { 2757 animation-delay: 0s; 2758 } 2759 .hero__icon:nth-child(2) { 2760 animation-delay: 0.3s; 2761 } 2762 .hero__icon:nth-child(3) { 2763 animation-delay: 0.7s; 2764 } 2765 .hero__icon:nth-child(4) { 2766 animation-delay: 1.1s; 2767 } 2768 .hero__start { 2769 font-family: "Loos Extended"; 2770 font-weight: 500; 2771 font-size: 40px; 2772 line-height: 114.6%; 2773 letter-spacing: -0.6px; 2774 } 2775 @media (max-width: 1440px) { 2776 .hero__start { 2777 font-size: 38px; 2778 } 2779 } 2780 @media (max-width: 1024px) { 2781 .hero__start { 2782 font-size: 34px; 2783 } 2784 } 2785 @media (max-width: 375px) { 2786 .hero__start { 2787 font-size: 34px; 2788 } 2789 } 2790 .hero__start b { 2791 color: rgba(0, 0, 0, 0.2509803922); 2792 } 2793 @media (max-width: 1140px) { 2794 .hero__start { 2795 text-align: center; 2796 } 2797 } 2798 .hero__top-one { 2799 background-color: rgba(255, 255, 255, 0.4); 2800 border-radius: 20px; 2801 box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0784313725); 2802 position: relative; 2803 transition: 1s; 2804 z-index: 100; 2805 width: 100%; 2806 transition-property: opacity, translation; 2807 align-items: center; 2808 padding: 7px; 2809 } 2810 .hero__top-one img { 2811 padding-right: 3px; 2812 max-height: 100%; 2813 object-fit: contain; 2814 object-position: center; 2815 } 2816 .hero__top-one span { 2817 font-family: "Inter"; 2818 font-weight: 600; 2819 text-wrap: nowrap; 2820 color: black; 2821 font-size: 16px; 2822 line-height: 135%; 2823 flex: 1; 2824 } 2825 @media (max-width: 1440px) { 2826 .hero__top-one span { 2827 font-size: 15px; 2828 } 2829 } 2830 @media (max-width: 1024px) { 2831 .hero__top-one span { 2832 font-size: 12px; 2833 } 2834 } 2835 @media (max-width: 375px) { 2836 .hero__top-one span { 2837 font-size: 12px; 2838 } 2839 } 2840 .hero__top-one span b { 2841 color: rgba(0, 0, 0, 0.5019607843); 2842 } 2843 .hero__text { 2844 align-items: flex-start; 2845 justify-content: center; 2846 width: fit-content !important; 2847 position: relative; 2848 max-width: 550px; 2849 padding-right: 0 !important; 2850 box-sizing: content-box; 2851 gap: 10px; 2852 padding-top: 20px; 2853 } 2854 @media (max-width: 1440px) { 2855 .hero__text { 2856 padding-top: 112px; 2857 margin-block-end: 25px; 2858 } 2859 } 2860 @media (max-width: 1024px) { 2861 .hero__text { 2862 padding-top: 102px !important; 2863 align-items: center; 2864 } 2865 } 2866 @media (max-width: 1140px) { 2867 .hero__text { 2868 align-items: center; 2869 flex: 1; 2870 } 2871 } 2872 @media (width <= 585px) { 2873 .hero__text { 2874 max-width: calc(100dvw - 40px); 2875 margin-inline: 0; 2876 padding-inline: 0 !important; 2877 } 2878 } 2879 2880 @keyframes marquee { 2881 0% { 2882 transform: translateX(0); 2883 } 2884 100% { 2885 transform: translateX(-100%); 2886 } 2887 } 2888 @keyframes icon { 2889 0% { 2890 transform: translateY(0); 2891 } 2892 50% { 2893 transform: translateY(20%); 2894 } 2895 100% { 2896 transform: translateY(0); 2897 } 2898 } 2899 .hero-slide { 2900 max-width: 100%; 2901 display: flex !important; 2902 align-items: flex-end; 2903 justify-content: flex-end; 2904 position: relative; 2905 } 2906 .hero-slide__image { 2907 display: flex; 2908 transform-origin: bottom right; 2909 width: 100%; 2910 transition: 1s; 2911 transition-delay: 0.25s; 2912 transition-property: opacity; 2913 } 2914 .hero-slide__image img { 2915 width: 100%; 2916 object-fit: contain; 2917 object-position: center; 2918 } 2919 @media (width >= 1700px) { 2920 .hero-slide__image { 2921 scale: 0.9; 2922 } 2923 } 2924 2925 .hero__bullet { 2926 align-items: center; 2927 border-radius: 50%; 2928 cursor: pointer; 2929 display: flex; 2930 height: 38px; 2931 justify-content: center; 2932 pointer-events: none; 2933 position: relative; 2934 transition: all 0.3s ease; 2935 width: fit-content; 2936 } 2937 .hero__bullet .side-media__img { 2938 aspect-ratio: 1/1; 2939 height: 100%; 2940 width: auto; 2941 background-color: transparent; 2942 } 2943 .hero__bullet:not(.hero__bullet--active) .side-media__text { 2944 width: 0; 2945 padding-inline: 0; 2946 } 2947 .hero__bullet:not(.hero__bullet--active) .side-media__img { 2948 box-shadow: none; 2949 } 2950 .hero__bullet .side-media__text { 2951 padding: 0; 2952 overflow: hidden; 2953 margin-inline: auto; 2954 text-wrap: nowrap; 2955 padding-inline: 10px 15px; 2956 font-size: 14px; 2957 letter-spacing: -0.02em; 2958 } 2959 .hero__bullet .side-media__text::before { 2960 display: none; 2961 } 2962 .hero__bullet:hover { 2963 background: rgba(255, 255, 255, 0.4); 2964 } 2965 2966 .hero__bullet--active { 2967 border-color: white; 2968 z-index: 2; 2969 /*flex: 1;*/ 2970 } 2971 .hero__bullet--active .side-media__img { 2972 background-color: rgba(255, 255, 255, 0.4); 2973 } 2974 .hero__bullet--active .side-media__img::before { 2975 display: block; 2976 } 2977 2978 .swiper-pagination-bullet:not(.hero__bullet--active):nth-child(1), .swiper-pagination-bullet:not(.hero__bullet--active):nth-child(2) { 2979 order: -1; 2980 } 2981 .swiper-pagination-bullet:not(.hero__bullet--active):nth-child(4), .swiper-pagination-bullet:not(.hero__bullet--active):nth-child(5) { 2982 order: 1; 2983 } 2984 2985 @keyframes slideUpDownStartWithBasics { 2986 0% { 2987 bottom: 0; 2988 } 2989 100% { 2990 bottom: 10px; 2991 } 2992 } 2993 .course-card__image { 2994 overflow: hidden; 2995 } 2996 2997 .course-card__image img { 2998 transition: 0.7s; 2999 } 3000 3001 .course-card:hover .course-card__image img { 3002 scale: 1.05; 3003 } 3004 3005 .start-with-the-basics .div-gradient-blur { 3006 position: absolute; 3007 z-index: 1; 3008 inset: auto 0 0 0; 3009 height: 66px; 3010 pointer-events: none; 3011 } 3012 .start-with-the-basics .div-gradient-blur div, .start-with-the-basics .div-gradient-blur::before, .start-with-the-basics .div-gradient-blur::after { 3013 position: absolute; 3014 inset: 0; 3015 } 3016 .start-with-the-basics .div-gradient-blur::before { 3017 content: ""; 3018 z-index: 1; 3019 backdrop-filter: blur(0.5px); 3020 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 37.5%); 3021 } 3022 .start-with-the-basics .div-gradient-blur div:nth-of-type(1) { 3023 z-index: 2; 3024 backdrop-filter: blur(1px); 3025 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgba(0, 0, 0, 0) 50%); 3026 } 3027 .start-with-the-basics .div-gradient-blur div:nth-of-type(2) { 3028 z-index: 3; 3029 backdrop-filter: blur(2px); 3030 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 62.5%); 3031 } 3032 .start-with-the-basics .div-gradient-blur div:nth-of-type(3) { 3033 z-index: 4; 3034 backdrop-filter: blur(4px); 3035 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgba(0, 0, 0, 0) 75%); 3036 } 3037 .start-with-the-basics .div-gradient-blur div:nth-of-type(4) { 3038 z-index: 5; 3039 backdrop-filter: blur(8px); 3040 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 87.5%); 3041 } 3042 .start-with-the-basics .div-gradient-blur div:nth-of-type(5) { 3043 z-index: 6; 3044 backdrop-filter: blur(16px); 3045 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%); 3046 } 3047 .start-with-the-basics .div-gradient-blur div:nth-of-type(6) { 3048 z-index: 7; 3049 backdrop-filter: blur(32px); 3050 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgb(0, 0, 0) 100%); 3051 } 3052 .start-with-the-basics .div-gradient-blur::after { 3053 content: ""; 3054 z-index: 8; 3055 backdrop-filter: blur(64px); 3056 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, rgb(0, 0, 0) 100%); 3057 } 3058 3059 .start-with-the-basics { 3060 background-color: #f2f2f2; 3061 align-items: center; 3062 box-shadow: 0px -10px 50px 0px rgba(0, 0, 0, 0.0588235294); 3063 display: flex; 3064 flex-direction: column; 3065 padding-top: 150px; 3066 position: relative; 3067 margin-block-start: calc(-1 * clamp(30px, 30px + (60 - 30) * (100dvw - 375px) / (1440 - 375), 60px)); 3068 border-radius: clamp(30px, 30px + (60 - 30) * (100dvw - 375px) / (1440 - 375), 60px) clamp(30px, 30px + (60 - 30) * (100dvw - 375px) / (1440 - 375), 60px) 0 0; 3069 } 3070 .start-with-the-basics .swiper { 3071 overflow: visible; 3072 } 3073 .start-with-the-basics__interlayer { 3074 pointer-events: none; 3075 } 3076 @media (max-width: 1024px) { 3077 .start-with-the-basics { 3078 background-color: #f2f2f2; 3079 } 3080 } 3081 @media (max-width: 1440px) { 3082 .start-with-the-basics { 3083 padding-top: 120px; 3084 } 3085 } 3086 @media (max-width: 1024px) { 3087 .start-with-the-basics { 3088 padding-top: 150px; 3089 } 3090 } 3091 @media (max-width: 375px) { 3092 .start-with-the-basics { 3093 padding-top: 120px; 3094 } 3095 } 3096 .start-with-the-basics .img-arrow, 3097 .start-with-the-basics .img-arrow-hover {
3098 height: 26px; 3099 transition: 0.2s; 3100 width: 26px; 3101 } 3102 .start-with-the-basics .img-arrow-hover { 3103 position: absolute; 3104 right: 5px; 3105 transition: 0.2s; 3106 opacity: 0; 3107 } 3108 .start-with-the-basics__text { 3109 align-items: center; 3110 display: flex; 3111 flex-direction: column; 3112 gap: 14px; 3113 justify-content: start; 3114 letter-spacing: -0.02em; 3115 margin-bottom: 125px; 3116 } 3117 @media (max-width: 500px) { 3118 .start-with-the-basics__text { 3119 align-items: flex-start; 3120 margin-bottom: 100px; 3121 } 3122 } 3123 .start-with-the-basics__title { 3124 color: rgba(0, 0, 0, 0.25); 3125 font-family: "Loos Extended", sans-serif; 3126 font-size: clamp(26px, 26px + (34 - 26) * (100dvw - 375px) / (1440 - 375), 34px); 3127 font-weight: 500; 3128 letter-spacing: -0.01em; 3129 line-height: 114%; 3130 text-align: center; 3131 } 3132 @media (max-width: 500px) { 3133 .start-with-the-basics__title { 3134 text-align: left; 3135 } 3136 } 3137 .start-with-the-basics__title b { 3138 color: black; 3139 } 3140 .start-with-the-basics__description { 3141 color: rgba(0, 0, 0, 0.5); 3142 font-family: "Inter", sans-serif; 3143 font-size: clamp(14px, 14px + (18 - 14) * (100dvw - 375px) / (1440 - 375), 18px); 3144 font-weight: 500; 3145 letter-spacing: -0.02em; 3146 line-height: 135%; 3147 text-align: center; 3148 } 3149 @media (max-width: 500px) { 3150 .start-with-the-basics__description { 3151 text-align: left; 3152 } 3153 } 3154 .start-with-the-basics__cards { 3155 width: 100%; 3156 display: flex; 3157 flex-direction: column; 3158 align-items: center; 3159 position: relative; 3160 border-radius: 30px; 3161 padding-bottom: 60px; 3162 } 3163 .start-with-the-basics__cards::before { 3164 display: none; 3165 } 3166 .start-with-the-basics__cards .container { 3167 padding-top: 95px; 3168 padding-bottom: calc(90px + clamp(30px, 30px + (60 - 30) * (100dvw - 375px) / (1440 - 375), 60px)); 3169 } 3170 @media (max-width: 500px) { 3171 .start-with-the-basics__cards .container { 3172 padding-top: 62px; 3173 } 3174 } 3175 .start-with-the-basics__cards::before { 3176 background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #f7f7f7 25%, #f7f7f7 75%, rgba(0, 0, 0, 0) 100%); 3177 border-radius: inherit; 3178 content: ""; 3179 inset: 0; 3180 padding: 1px 1px 0px 1px; 3181 pointer-events: none; 3182 position: absolute; 3183 mask: conic-gradient(#000 0 0) content-box exclude, conic-gradient(#000 0 0); 3184 } 3185 @media (max-width: 500px) { 3186 .start-with-the-basics__cards::before { 3187 display: none; 3188 } 3189 } 3190 .start-with-the-basics__interlayer { 3191 bottom: 0px; 3192 transform: translateY(-50%); 3193 box-shadow: 0px 6px 25px 0px rgba(0, 0, 0, 0.1019607843); 3194 border-radius: 80px; 3195 z-index: 10; 3196 background-color: #f2f2f2; 3197 display: flex; 3198 align-items: center; 3199 padding: 5px; 3200 padding-right: 15px; 3201 gap: 108px; 3202 cursor: pointer; 3203 transition: all 0.3s linear 0s; 3204 overflow: hidden; 3205 } 3206 @media (max-width: 1440px) { 3207 .start-with-the-basics__interlayer { 3208 gap: 150px; 3209 } 3210 } 3211 @media (max-width: 728px) { 3212 .start-with-the-basics__interlayer { 3213 gap: 15px; 3214 } 3215 } 3216 .start-with-the-basics__interlayer-text { 3217 color: rgba(0, 0, 0, 0.5019607843); 3218 font-family: "GNF"; 3219 font-weight: 400; 3220 font-size: 18px; 3221 transform-origin: left; 3222 transition: all 0.3s linear 0s; 3223 text-wrap: nowrap; 3224 text-transform: uppercase; 3225 } 3226 @media (max-width: 1440px) { 3227 .start-with-the-basics__interlayer-text { 3228 font-size: 16px; 3229 } 3230 } 3231 .start-with-the-basics__interlayer.observe-remove { 3232 gap: 0; 3233 padding-right: 5px; 3234 } 3235 .start-with-the-basics__interlayer.observe-remove > .start-with-the-basics__interlayer-text { 3236 width: 0; 3237 transform: translateX(-100%); 3238 } 3239 .start-with-the-basics__interlayer-icon { 3240 background-color: #CEFF2F; 3241 border-radius: 50%; 3242 display: flex; 3243 align-items: center; 3244 justify-content: center; 3245 aspect-ratio: 1; 3246 width: 36px; 3247 } 3248 @media (max-width: 1440px) { 3249 .start-with-the-basics__interlayer-icon { 3250 width: 32px; 3251 } 3252 } 3253 .start-with-the-basics__grid { 3254 display: grid; 3255 grid-template-columns: 534fr 49px 515fr 20px 515fr; 3256 grid-template-rows: auto auto; 3257 gap: 20px 0; 3258 } 3259 .start-with-the-basics__grid::before { 3260 content: ""; 3261 grid-column: 2; 3262 grid-row: 1/span 2; 3263 width: 1px; 3264 background: #e0e0e0; 3265 margin: 0 24px; 3266 max-height: calc(100% - 80px); 3267 translate: 0 40px; 3268 } 3269 @media (width <= 1024px) { 3270 .start-with-the-basics__grid::before { 3271 display: block; 3272 margin: 0 !important; 3273 min-height: 1px; 3274 } 3275 } 3276 @media (max-width: 1024px) { 3277 .start-with-the-basics__grid { 3278 grid-template-columns: 1fr 1fr; 3279 grid-template-rows: auto 79px auto 10px auto; 3280 column-gap: 20px; 3281 row-gap: 0; 3282 } 3283 .start-with-the-basics__grid::before { 3284 grid-column: 1/3; 3285 grid-row: 2; 3286 width: 100%; 3287 height: 1px; 3288 margin: 39px 0; 3289 } 3290 } 3291 @media (width < 850px) { 3292 .start-with-the-basics__grid { 3293 display: none; 3294 } 3295 } 3296 .start-with-the-basics__card { 3297 width: 100%; 3298 height: 100%; 3299 display: flex; 3300 flex-direction: column; 3301 overflow: hidden; 3302 } 3303 .start-with-the-basics__card:nth-child(1) { 3304 grid-column: 1; 3305 grid-row: 1; 3306 } 3307 .start-with-the-basics__card:nth-child(2) { 3308 grid-column: 3; 3309 grid-row: 1; 3310 } 3311 .start-with-the-basics__card:nth-child(3) { 3312 grid-column: 5; 3313 grid-row: 1; 3314 } 3315 .start-with-the-basics__card:nth-child(4) { 3316 grid-column: 1; 3317 grid-row: 2; 3318 } 3319 .start-with-the-basics__card:nth-child(5) { 3320 grid-column: 3/span 3; 3321 grid-row: 2; 3322 } 3323 @media (max-width: 1024px) { 3324 .start-with-the-basics__card:nth-child(n) { 3325 grid-column: auto; 3326 grid-row: auto; 3327 } 3328 } 3329 .start-with-the-basics__card_big {
3330 padding: 0; 3331 flex-direction: row; 3332 align-items: stretch; 3333 justify-content: space-between; 3334 } 3335 @media (max-width: 1024px) { 3336 .start-with-the-basics__card_big { 3337 grid-column: 1/3 !important; 3338 grid-row: 5 !important; 3339 } 3340 } 3341 .start-with-the-basics__card_big .course-card__image { 3342 flex: 1; 3343 height: 100%; 3344 } 3345 .start-with-the-basics__card_big .course-card__image img { 3346 height: 100%; 3347 max-height: 515px; 3348 object-fit: contain; 3349 object-position: right; 3350 } 3351 .start-with-the-basics__card_big .course-card__left { 3352 padding: 24px; 3353 align-items: flex-start; 3354 justify-content: flex-end; 3355 } 3356 .start-with-the-basics__card_big .course-card__left .card-marker { 3357 margin-inline: 0; 3358 margin-bottom: auto; 3359 justify-self: start; 3360 } 3361 .start-with-the-basics__card_big .course-card__left .course-card__name { 3362 margin-bottom: 14px; 3363 padding: 0; 3364 } 3365 .start-with-the-basics__card_big .course-card__left .course-card__tags { 3366 margin-bottom: 30px; 3367 padding: 0; 3368 } 3369 .start-with-the-basics__card_big .course-card__left .side-media { 3370 background-color: #cfff32; 3371 gap: 15px; 3372 padding: 5px; 3373 padding-left: 15px; 3374 } 3375 .start-with-the-basics__card_big .course-card__left .side-media__img { 3376 background-color: #000000; 3377 min-height: 32px; 3378 min-width: 32px; 3379 } 3380 .start-with-the-basics__card_big .course-card__left .side-media__text { 3381 color: #000000; 3382 font-family: "Inter"; 3383 font-size: 14px; 3384 font-weight: 500; 3385 letter-spacing: -0.02em; 3386 line-height: 130%; 3387 padding: 0; 3388 } 3389 .start-with-the-basics__card_big .course-card__left a { 3390 position: relative; 3391 bottom: auto; 3392 right: auto; 3393 } 3394 .start-with-the-basics__swiper .swiper-slide { 3395 display: flex; 3396 } 3397 .start-with-the-basics__swiper .swiper-slide a { 3398 position: relative; 3399 bottom: auto; 3400 right: auto; 3401 } 3402 3403 @keyframes slideUpDownFromScratchToPro { 3404 0% { 3405 bottom: -5px; 3406 } 3407 100% { 3408 bottom: 5px; 3409 } 3410 } 3411 .from-scratch-to-pro { 3412 align-items: center; 3413 background-color: #fafafa; 3414 box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.1215686275); 3415 display: flex; 3416 flex-direction: column; 3417 height: 100vh; 3418 justify-content: center; 3419 margin-block-start: calc(-1 * clamp(30px, 30px + (60 - 30) * (100dvw - 375px) / (1440 - 375), 60px)); 3420 overflow: hidden; 3421 padding: 0; 3422 position: relative; 3423 border-radius: clamp(30px, 30px + (60 - 30) * (100dvw - 375px) / (1440 - 375), 60px); 3424 } 3425 .from-scratch-to-pro .side-media { 3426 backdrop-filter: blur(5px); 3427 } 3428 .from-scratch-to-pro .green-arrow.side-media__img { 3429 pointer-events: none; 3430 } 3431 @media (width > 850px) { 3432 .from-scratch-to-pro .from-scratch-to-pro__card-section.--mobile { 3433 display: none; 3434 } 3435 } 3436 @media (width <= 850px) { 3437 .from-scratch-to-pro { 3438 height: fit-content; 3439 padding-block-end: 90px; 3440 } 3441 .from-scratch-to-pro .from-scratch-to-pro__card-section { 3442 max-width: clamp(335px, 335px + (1000 - 335) * (100dvw - 375px) / (1440 - 375), 1000px); 3443 } 3444 .from-scratch-to-pro .from-scratch-to-pro__background { 3445 display: none; 3446 } 3447 .from-scratch-to-pro .from-scratch-to-pro__title { 3448 display: none; 3449 } 3450 .from-scratch-to-pro .circle-section { 3451 display: none; 3452 } 3453 .from-scratch-to-pro .card-name { 3454 margin-inline: auto; 3455 } 3456 .from-scratch-to-pro .special-offer .circle-icon { 3457 background-color: white; 3458 padding: 5px; 3459 } 3460 .from-scratch-to-pro .special-offer__text { 3461 width: 100%; 3462 } 3463 .from-scratch-to-pro .special-offer__title { 3464 text-align: center; 3465 } 3466 .from-scratch-to-pro .special-offer__spa { 3467 bottom: -25px; 3468 left: 50%; 3469 translate: -50%; 3470 } 3471 .from-scratch-to-pro .from-scratch-to-pro__card_big {
3472 overflow: inherit; 3473 position: relative; 3474 } 3475 .from-scratch-to-pro .side-media__text { 3476 font-size: 18px; 3477 } 3478 } 3479 .from-scratch-to-pro .swiper { 3480 overflow: visible; 3481 } 3482 .from-scratch-to-pro__background-left { 3483 left: 0; 3484 position: absolute; 3485 scale: 0.6; 3486 top: 0; 3487 transform-origin: left top; 3488 z-index: 1; 3489 } 3490 .from-scratch-to-pro__background-right { 3491 bottom: 0; 3492 position: absolute; 3493 right: 0; 3494 scale: 0.6; 3495 transform-origin: bottom right; 3496 z-index: 1; 3497 } 3498 @media (max-width: 500px) { 3499 .from-scratch-to-pro { 3500 height: auto; 3501 overflow: visible; 3502 } 3503 } 3504 .from-scratch-to-pro__mobile-slider { 3505 margin-top: 80px; 3506 } 3507 .from-scratch-to-pro__mobile-slider .swiper { 3508 padding-top: 40px; 3509 } 3510 @media (width <= 1000px) { 3511 .from-scratch-to-pro__background-left { 3512 display: none; 3513 } 3514 .from-scratch-to-pro__background-right { 3515 display: none; 3516 } 3517 } 3518 .from-scratch-to-pro__background { 3519 width: 100%; 3520 height: 100%; 3521 position: absolute; 3522 inset: 0; 3523 background-size: cover; 3524 } 3525 @media (max-width: 700px) { 3526 .from-scratch-to-pro__background { 3527 display: none; 3528 } 3529 } 3530 .from-scratch-to-pro__background-left { 3531 position: absolute; 3532 top: 0; 3533 left: 0; 3534 width: fit-content; 3535 z-index: 0; 3536 } 3537 .from-scratch-to-pro__background-left img { 3538 object-fit: cover; 3539 object-position: center; 3540 max-width: 100%; 3541 max-height: 100%; 3542 } 3543 .from-scratch-to-pro__background-right { 3544 position: absolute; 3545 bottom: 0; 3546 right: 0; 3547 width: fit-content; 3548 z-index: 0; 3549 } 3550 .from-scratch-to-pro__background-right img { 3551 z-index: 3; 3552 object-fit: cover; 3553 object-position: center; 3554 max-width: 100%; 3555 max-height: 100%; 3556 } 3557 .from-scratch-to-pro__title { 3558 align-items: center; 3559 color: rgba(0, 0, 0, 0.2509803922); 3560 display: flex; 3561 flex-direction: column; 3562 font-family: "Loos Extended"; 3563 font-weight: 500; 3564 max-width: 80%; 3565 text-align: center; 3566 text-wrap: nowrap; 3567 text-wrap: wrap; 3568 top: 230px; 3569 letter-spacing: -0.04em; 3570 position: absolute; 3571 left: 50%; 3572 top: 50%; 3573 transform: translate(-50%, -50%); 3574 font-size: 64px; 3575 } 3576 .from-scratch-to-pro__title span { 3577 font-weight: 500; 3578 } 3579 .from-scratch-to-pro__title b { 3580 gap: 15px; 3581 } 3582 @media (max-width: 1024px) { 3583 .from-scratch-to-pro__title { 3584 top: 195px; 3585 } 3586 } 3587 @media (max-width: 500px) { 3588 .from-scratch-to-pro__title { 3589 position: static; 3590 left: auto; 3591 transform: none; 3592 top: auto; 3593 margin-top: 66px; 3594 } 3595 } 3596 @media (max-width: 1440px) { 3597 .from-scratch-to-pro__title { 3598 font-size: 34px; 3599 } 3600 } 3601 @media (max-width: 1024px) { 3602 .from-scratch-to-pro__title { 3603 font-size: 34px; 3604 } 3605 } 3606 @media (max-width: 375px) { 3607 .from-scratch-to-pro__title { 3608 font-size: 26px; 3609 } 3610 } 3611 .from-scratch-to-pro__title b { 3612 color: #000000; 3613 display: flex; 3614 align-items: center; 3615 justify-content: space-between; 3616 text-wrap: nowrap; 3617 } 3618 @media (max-width: 500px) { 3619 .from-scratch-to-pro__title b { 3620 gap: 6px; 3621 } 3622 } 3623 .from-scratch-to-pro__direction { 3624 display: inline-block; 3625 border-radius: 90px; 3626 background-color: #ddff6d; 3627 padding: 8px 34px; 3628 display: flex; 3629 align-items: center; 3630 justify-content: center; 3631 box-shadow: 0px 2.8px 13.99px 0px rgba(0, 0, 0, 0.1019607843); 3632 } 3633 @media (max-width: 500px) { 3634 .from-scratch-to-pro__direction.gradient-border { 3635 position: absolute; 3636 top: 0; 3637 left: 50%; 3638 transform: translate(-50%, -50%); 3639 border-radius: 90px; 3640 padding: 8px 33px; 3641 width: 97px; 3642 height: 60px; 3643 } 3644 } 3645 .from-scratch-to-pro__direction img { 3646 max-width: 100%; 3647 max-height: 100%; 3648 object-fit: contain; 3649 object-position: center; 3650 } 3651 .from-scratch-to-pro__cards { 3652 position: absolute; 3653 bottom: 0; 3654 left: 50%; 3655 transform: translate(-50%, 100%); 3656 display: flex; 3657 flex-direction: column; 3658 align-items: center; 3659 justify-content: flex-start; 3660 background: transparent; 3661 gap: 230px; 3662 will-change: transform; 3663 } 3664 .from-scratch-to-pro__card-section { 3665 justify-content: center; 3666 } 3667 3668 .circle-section { 3669 position: relative; 3670 width: 100%; 3671 height: 100%; 3672 } 3673 @media (max-width: 700px) { 3674 .circle-section { 3675 display: none; 3676 } 3677 } 3678 3679 .rectangle { 3680 position: absolute; 3681 top: 50%; 3682 left: 50%; 3683 width: 0; 3684 border-radius: 15px; 3685 height: 0; 3686 background: #f2f2f2; 3687 transform: translate(-50%, -50%); 3688 z-index: 0; 3689 overflow: hidden; 3690 box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.1215686275); 3691 } 3692 3693 circle { 3694 z-index: 3; 3695 box-shadow: 0px 9px 30px 0px rgba(0, 0, 0, 0.0784313725); 3696 } 3697
3698 .second-section-slide { 3699 align-items: center; 3700 background: rgba(255, 255, 255, 0.5); 3701 border-radius: 30px; 3702 box-shadow: 0 6px 35px 0 rgba(0, 0, 0, 0.05); 3703 flex-direction: column; 3704 justify-content: flex-start; 3705 position: relative; 3706 } 3707 .second-section-slide.swiper-slide { 3708 display: flex; 3709 height: auto; 3710 overflow: visible; 3711 } 3712 .second-section-slide__image { 3713 aspect-ratio: 1/1; 3714 border-top-left-radius: inherit; 3715 border-top-right-radius: inherit; 3716 flex: 1; 3717 margin-block-end: 15px; 3718 overflow: hidden; 3719 position: relative; 3720 width: 100%; 3721 } 3722 .second-section-slide__image > * { 3723 position: absolute; 3724 } 3725 .second-section-slide__background { 3726 position: absolute; 3727 inset: 0; 3728 } 3729 .second-section-slide__background img { 3730 max-height: 100%; 3731 min-height: 100%; 3732 object-fit: cover; 3733 object-position: bottom; 3734 width: 100%; 3735 } 3736 .second-section-slide__text { 3737 padding: 24px; 3738 padding-top: 0; 3739 display: flex; 3740 flex-direction: column; 3741 gap: 51px; 3742 align-items: flex-start; 3743 width: 100%; 3744 } 3745 .second-section-slide__group { 3746 display: flex; 3747 align-items: flex-start; 3748 flex-direction: column; 3749 } 3750 .second-section-slide__title { 3751 font: 600 16px/1.25 "Inter", sans-serif; 3752 letter-spacing: -0.02em; 3753 color: rgba(0, 0, 0, 0.9); 3754 margin-bottom: 5px; 3755 margin-top: 15px; 3756 max-width: 80%; 3757 } 3758 .second-section-slide__title b { 3759 color: rgba(0, 0, 0, 0.3); 3760 } 3761 .second-section-slide__disc { 3762 font: 500 14px/1.3 "Inter", sans-serif; 3763 letter-spacing: -0.02em; 3764 color: rgba(0, 0, 0, 0.4); 3765 } 3766 .second-section-slide__index { 3767 align-items: center; 3768 background: #f8f8f8; 3769 border-radius: 50%; 3770 box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.12); 3771 display: flex; 3772 flex-direction: row; 3773 justify-content: center; 3774 top: 0; 3775 z-index: 1; 3776 font: 400 18px/1.3 "GNF", sans-serif; 3777 text-transform: uppercase; 3778 color: rgba(0, 0, 0, 0.4); 3779 transform: translateY(-50%); 3780 width: 43px; 3781 height: 43px; 3782 } 3783 .second-section-slide__index.gradient-border { 3784 position: absolute; 3785 } 3786 .second-section-slide__lines { 3787 align-items: center; 3788 justify-content: center; 3789 background-image: url("data:image/svg+xml,%3csvg%20width='246'%20height='486'%20viewBox='0%200%20246%20486'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cline%20x1='0.5'%20y1='2.18558e-08'%20x2='0.499979'%20y2='486'%20stroke='url(%23paint0_linear_4814_14286)'%20stroke-opacity='0.07'/%3e%3cline%20x1='82.1667'%20y1='2.18558e-08'%20x2='82.1667'%20y2='486'%20stroke='url(%23paint1_linear_4814_14286)'%20stroke-opacity='0.07'/%3e%3cline%20x1='163.833'%20y1='2.18558e-08'%20x2='163.833'%20y2='486'%20stroke='url(%23paint2_linear_4814_14286)'%20stroke-opacity='0.07'/%3e%3cline%20x1='245.5'%20y1='2.18558e-08'%20x2='245.5'%20y2='486'%20stroke='url(%23paint3_linear_4814_14286)'%20stroke-opacity='0.07'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_4814_14286'%20x1='-0.5'%20y1='-2.18558e-08'%20x2='-0.500021'%20y2='486'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_4814_14286'%20x1='81.1667'%20y1='-2.18558e-08'%20x2='81.1667'%20y2='486'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint2_linear_4814_14286'%20x1='162.833'%20y1='-2.18558e-08'%20x2='162.833'%20y2='486'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint3_linear_4814_14286'%20x1='244.5'%20y1='-2.18558e-08'%20x2='244.5'%20y2='486'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e"); 3790 background-position: center; 3791 background-repeat: no-repeat; 3792 background-size: contain; 3793 position: absolute; 3794 inset: 0; 3795 display: flex; 3796 z-index: -1; 3797 }
3798 .second-section-slide__grid { 3799 position: absolute; 3800 inset: 0; 3801 display: grid; 3802 grid-template-columns: repeat(4, 1fr); 3803 grid-template-rows: repeat(4, 1fr); 3804 } 3805 .second-section-slide__grid img:nth-child(1) { 3806 grid-row: 4; 3807 grid-column: 1; 3808 } 3809 .second-section-slide__grid img:nth-child(2) { 3810 grid-row: 1; 3811 grid-column: 2; 3812 } 3813 .second-section-slide__grid img:nth-child(3) { 3814 grid-row: 2; 3815 grid-column: 3; 3816 } 3817 .second-section-slide__grid img:nth-child(4) { 3818 grid-row: 3; 3819 grid-column: 4; 3820 } 3821 3822 .popup { 3823 position: fixed; 3824 inset: 0; 3825 padding-top: 50px; 3826 display: none; 3827 flex-direction: column; 3828 align-items: center; 3829 justify-content: center; 3830 background-color: rgba(255, 255, 255, 0.27); 3831 } 3832 .popup .questions-container { 3833 display: flex; 3834 align-items: center; 3835 flex-direction: column; 3836 } 3837 .popup .questions-block__title { 3838 position: absolute; 3839 top: 0; 3840 transform: translateY(-50%); 3841 } 3842 .popup .questions-block__subtitle { 3843 margin-bottom: 190px; 3844 } 3845 3846 .special-offer { 3847 position: relative; 3848 padding: 0; 3849 background: linear-gradient(0deg, #f1f1f1, #f1f1f1), linear-gradient(0deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03)); 3850 width: 460px; 3851 box-shadow: 0 6px 35px 0 rgba(0, 0, 0, 0.05); 3852 padding: 2px; 3853 overflow: hidden; 3854 } 3855 .special-offer.gradient-border::before { 3856 padding: 2px; 3857 } 3858 .special-offer .circle-icon { 3859 background-color: #cfff32; 3860 } 3861 .special-offer__card-name { 3862 margin-left: 20px; 3863 margin-top: 20px; 3864 } 3865 .special-offer__spa { 3866 z-index: 2; 3867 position: absolute; 3868 bottom: 20px; 3869 left: 20px; 3870 } 3871 .special-offer__spa .side-media { 3872 box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.05); 3873 background: rgba(255, 255, 255, 0.15); 3874 } 3875 .special-offer__text { 3876 padding: 20px; 3877 } 3878 .special-offer__image { 3879 width: 100%; 3880 background-color: transparent; 3881 z-index: 1; 3882 } 3883 .special-offer__image img { 3884 width: 100%; 3885 object-fit: contain; 3886 object-position: bottom; 3887 } 3888 3889 .basic-courses { 3890 display: flex; 3891 flex-direction: column; 3892 align-items: flex-start; 3893 padding-top: clamp(120px, 120px + (250 - 120) * (100dvw - 375px) / (1440 - 375), 250px); 3894 background-color: #ffffff; 3895 } 3896 @media (width > 850px) { 3897 .basic-courses .basic-courses__group:nth-child(1 of .basic-courses__group) .basic-courses__card:nth-child(1 of .basic-courses__card) { 3898 max-height: clamp(600px, 600px + (650 - 600) * (100dvw - 375px) / (1440 - 375), 650px); 3899 } 3900 .basic-courses .basic-courses__group:nth-child(1 of .basic-courses__group) .basic-courses__card:nth-child(2 of .basic-courses__card) { 3901 max-height: clamp(600px, 600px + (650 - 600) * (100dvw - 375px) / (1440 - 375), 650px); 3902 } 3903 .basic-courses .basic-courses__group:nth-child(1 of .basic-courses__group) .basic-courses__card:nth-child(3 of .basic-courses__card) { 3904 max-height: clamp(420px, 420px + (470 - 420) * (100dvw - 375px) / (1440 - 375), 470px); 3905 } 3906 .basic-courses .basic-courses__group:nth-child(1 of .basic-courses__group) .basic-courses__card:nth-child(4 of .basic-courses__card) { 3907 max-height: clamp(420px, 420px + (470 - 420) * (100dvw - 375px) / (1440 - 375), 470px); 3908 } 3909 .basic-courses .basic-courses__group:nth-child(2 of .basic-courses__group) .basic-courses__card:nth-child(1 of .basic-courses__card) { 3910 max-height: clamp(420px, 420px + (470 - 420) * (100dvw - 375px) / (1440 - 375), 470px); 3911 } 3912 } 3913 .basic-courses .side-media__text { 3914 transition: 0.25s; 3915 } 3916 .basic-courses .basic-courses__card:hover .basic-courses__card-footer .side-media::before { 3917 opacity: 0; 3918 } 3919 .basic-courses .basic-courses__card:hover .basic-courses__card-footer .side-media { 3920 background-color: #cfff32; 3921 } 3922 .basic-courses .basic-courses__card:hover .basic-courses__card-footer .side-media__text { 3923 color: black; 3924 } 3925 .basic-courses .basic-courses__card:hover .basic-courses__card-footer .green-arrow { 3926 background-color: black; 3927 } 3928 .basic-courses .basic-courses__card:hover .basic-courses__card-footer .green-arrow img { 3929 filter: invert(1); 3930 } 3931 @media (width <= 800px) { 3932 .basic-courses__card-tag { 3933 font-size: 13px !important; 3934 } 3935 .basic-courses use { 3936 filter: invert(1); 3937 } 3938 .basic-courses .basic-courses__card-footer .side-media { 3939 background: #cfff32; 3940 } 3941 .basic-courses .basic-courses__card-footer .side-media__img { 3942 background: black; 3943 } 3944 .basic-courses .basic-courses__card-footer .side-media__img img { 3945 filter: invert(1); 3946 scale: 0.9; 3947 } 3948 .basic-courses .basic-courses__card:hover .basic-courses__card-footer .side-media { 3949 background: black; 3950 } 3951 .basic-courses .basic-courses__card:hover .basic-courses__card-footer .side-media__text-mobile { 3952 color: white; 3953 } 3954 .basic-courses .basic-courses__card:hover .basic-courses__card-footer .side-media__img { 3955 background: white; 3956 } 3957 .basic-courses .basic-courses__card:hover .basic-courses__card-footer .side-media__img img { 3958 filter: invert(0); 3959 } 3960 } 3961 .basic-courses .side-media { 3962 pointer-events: none; 3963 } 3964 .basic-courses .swiper { 3965 overflow: visible; 3966 } 3967 .basic-courses__title { 3968 font-weight: 500; 3969 font-size: 38px; 3970 color: black; 3971 font-family: "Loos Extended", sans-serif; 3972 line-height: 115%; 3973 letter-spacing: -0.01em; 3974 margin-top: 20px; 3975 margin-bottom: 80px; 3976 } 3977 .basic-courses__title b { 3978 color: rgba(0, 0, 0, 0.2509803922); 3979 } 3980 .basic-courses__logo { 3981 width: 36px; 3982 height: 36px; 3983 } 3984 .basic-courses__group { 3985 display: flex; 3986 flex-direction: column; 3987 align-items: flex-start; 3988 width: 100%; 3989 margin-bottom: 70px; 3990 } 3991 .basic-courses__group:nth-child(2 of .basic-courses__group) .swiper-pagination { 3992 display: none; 3993 } 3994 .basic-courses__group-text { 3995 text-transform: uppercase; 3996 } 3997 .basic-courses__group-head { 3998 display: flex; 3999 align-items: stretch; 4000 width: 100%; 4001 margin-bottom: 30px; 4002 gap: 10px; 4003 font-weight: 400; 4004 font-size: 18px; 4005 font-family: "GNF", sans-serif; 4006 } 4007 .basic-courses__group-title { 4008 background-color: #f4f4f4; 4009 display: flex; 4010 align-items: center; 4011 justify-content: center; 4012 padding: 5px 20px 5px 5px; 4013 border-radius: 30px; 4014 box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.0784313725); 4015 gap: 10px; 4016 color: rgba(0, 0, 0, 0.8); 4017 } 4018 .basic-courses__group-count { 4019 background-color: #f4f4f4; 4020 color: rgba(0, 0, 0, 0.4); 4021 padding-inline: 17.5px; 4022 border-radius: 50%; 4023 box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.0784313725); 4024 /*backdrop-filter: blur(5px);*/ 4025 display: flex; 4026 align-items: center; 4027 justify-content: center; 4028 aspect-ratio: 1; 4029 } 4030 .basic-courses__cards { 4031 display: grid; 4032 grid-template-columns: repeat(12, 1fr); 4033 gap: 10px; 4034 width: 100%; 4035 flex-wrap: nowrap; 4036 } 4037 @media (max-width: 850px) { 4038 .basic-courses__cards { 4039 display: none; 4040 } 4041 } 4042 .basic-courses__card { 4043 align-items: center; 4044 /*backdrop-filter: blur(50px);*/ 4045 border-radius: 20px; 4046 box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1); 4047 display: flex; 4048 flex-direction: column; 4049 height: 650px; 4050 justify-content: end; 4051 overflow: hidden; 4052 position: relative; 4053 } 4054 .basic-courses__group:nth-child(1 of .basic-courses__group) .basic-courses__card:nth-child(1) { 4055 grid-column: span 7; 4056 } 4057 @media (width >= 850px) { 4058 .basic-courses__group:nth-child(1 of .basic-courses__group) .basic-courses__card:nth-child(1) { 4059 height: 813px; 4060 } 4061 } 4062 .basic-courses__group:nth-child(1 of .basic-courses__group) .basic-courses__card:nth-child(2) { 4063 grid-column: span 5; 4064 } 4065 @media (width >= 850px) { 4066 .basic-courses__group:nth-child(1 of .basic-courses__group) .basic-courses__card:nth-child(2) { 4067 height: 813px; 4068 } 4069 } 4070 .basic-courses__group:nth-child(1 of .basic-courses__group) .basic-courses__card:nth-child(3) { 4071 grid-column: span 6; 4072 } 4073 .basic-courses__group:nth-child(1 of .basic-courses__group) .basic-courses__card:nth-child(4) { 4074 grid-column: span 6; 4075 } 4076 .basic-courses__group:nth-child(2 of .basic-courses__group) .basic-courses__card:nth-child(1) { 4077 grid-column: span 6; 4078 } 4079 .basic-courses__card-image { 4080 align-items: flex-start; 4081 display: flex; 4082 height: 100%; 4083 justify-content: center; 4084 position: absolute; 4085 width: 100%; 4086 } 4087 .basic-courses__card-image img { 4088 height: 100%; 4089 min-height: 100%; 4090 object-fit: cover; 4091 width: 100%; 4092 object-position: top center; 4093 } 4094 .basic-courses__card-blur { 4095 display: flex; 4096 flex-direction: column; 4097 width: 100%; 4098 align-items: flex-start; 4099 } 4100 .basic-courses__card-title { 4101 padding-inline: 24.5px; 4102 padding-bottom: 15px; 4103 font: 600 20px/1.2 "Inter", sans-serif; 4104 letter-spacing: -0.02em; 4105 text-align: center; 4106 color: rgba(255, 255, 255, 0.9); 4107 } 4108 @media (max-width: 850px) { 4109 .basic-courses__card-title { 4110 font: 600 16px/1.25 "Inter", sans-serif; 4111 letter-spacing: -0.02em; 4112 color: rgba(0, 0, 0, 0.9); 4113 } 4114 } 4115 .basic-courses__card-discription { 4116 width: 100%; 4117 display: flex; 4118 align-items: center; 4119 flex-wrap: wrap; 4120 gap: 15px; 4121 padding-block: 25px; 4122 padding-left: 24.5px; 4123 padding-right: 20px; 4124 padding-top: 0; 4125 z-index: 4; 4126 justify-content: space-between; 4127 } 4128 .basic-courses__card-tags { 4129 align-items: center; 4130 display: flex; 4131 gap: clamp(10px, 10px + (14 - 10) * (100dvw - 375px) / (1440 - 375), 14px); 4132 position: relative; 4133 } 4134 .basic-courses__card-tag { 4135 color: rgba(255, 255, 255, 0.6980392157); 4136 font-family: "Inter", sans-serif; 4137 font-size: 15px; 4138 font-weight: 500; 4139 letter-spacing: -0.02em; 4140 position: relative; 4141 text-wrap: nowrap; 4142 } 4143 @media (max-width: 850px) { 4144 .basic-courses__card-tag { 4145 color: rgba(0, 0, 0, 0.6); 4146 } 4147 } 4148 .basic-courses__card-tag:not(:last-child)::after { 4149 content: "·"; 4150 position: absolute; 4151 right: -7px; 4152 translate: 50%; 4153 } 4154 .basic-courses__card-read-more { 4155 aspect-ratio: 1; 4156 width: 16px; 4157 height: 16px; 4158 box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.08); 4159 background: rgba(255, 255, 255, 0.15); 4160 display: inline-flex; 4161 align-items: center; 4162 justify-content: center; 4163 border-radius: 50%; 4164 padding: 2px; 4165 cursor: pointer; 4166 margin-left: 5px; 4167 } 4168 @media (hover: hover) and (pointer: fine) { 4169 .basic-courses__card-read-more:hover { 4170 background-color: greenyellow; 4171 } 4172 } 4173 .basic-courses__card-read-more .circle-icon { 4174 background-color: transparent; 4175 width: 100%; 4176 height: 100%; 4177 } 4178 .basic-courses__card-read-more .gradient-border::before { 4179 padding: 2px; 4180 } 4181 .basic-courses__card-read-more svg { 4182 color: rgba(255, 255, 255, 0.8705882353); 4183 width: 100%; 4184 height: 100%; 4185 } 4186 .basic-courses__card-footer .side-media { 4187 background-color: rgba(255, 255, 255, 0.1490196078); 4188 flex-direction: row-reverse; 4189 padding: 5px; 4190 padding-left: 20px; 4191 } 4192 .basic-courses__card-footer .side-media__img { 4193 aspect-ratio: 1; 4194 min-height: clamp(26px, 26px + (32 - 26) * (100dvw - 375px) / (1440 - 375), 32px); 4195 min-width: clamp(26px, 26px + (32 - 26) * (100dvw - 375px) / (1440 - 375), 32px); 4196 } 4197 .basic-courses__card-footer .side-media__text { 4198 color: rgba(255, 255, 255, 0.8980392157); 4199 font-family: "Inter", sans-serif; 4200 font-weight: 500; 4201 letter-spacing: -0.02em; 4202 font-size: 16px; 4203 } 4204 @media (max-width: 1440px) { 4205 .basic-courses__card-footer .side-media__text { 4206 font-size: 14px; 4207 } 4208 } 4209 @media (max-width: 1024px) { 4210 .basic-courses__card-footer .side-media__text { 4211 font-size: 14px; 4212 } 4213 } 4214 @media (max-width: 375px) { 4215 .basic-courses__card-footer .side-media__text { 4216 font-size: 0px; 4217 } 4218 } 4219 .basic-courses__card-footer .side-media__text-mobile { 4220 color: black; 4221 font-family: "Inter", sans-serif; 4222 font-size: 14px; 4223 font-weight: 500; 4224 letter-spacing: -0.02em; 4225 padding-inline: 15px; 4226 } 4227 @media (width > 850px) { 4228 .basic-courses__card-footer .side-media__text-mobile { 4229 display: none; 4230 } 4231 } 4232 4233 .basic-courses .side-media__img { 4234 pointer-events: none; 4235 } 4236 .basic-courses__card { 4237 background-color: #d5d5d5; 4238 transition: 2s opacity, translate; 4239 transform-origin: top; 4240 } 4241 @media (max-width: 850px) { 4242 .basic-courses__card { 4243 height: 514px; 4244 } 4245 } 4246 .basic-courses__card-blur { 4247 z-index: 4; 4248 } 4249 @media (width <= 800px) { 4250 .basic-courses__card-blur { 4251 background: linear-gradient(transparent, #f7f7f7 30%); 4252 padding-block-start: 60px; 4253 } 4254 } 4255 .basic-courses__card-footer { 4256 display: flex; 4257 align-items: center; 4258 justify-content: space-between; 4259 background-color: rgba(0, 0, 0, 0.2509803922); 4260 width: 100%; 4261 padding-inline: 20px; 4262 padding-top: 15.5px; 4263 padding-bottom: 16.5px; 4264 border-top: 1px solid rgba(0, 0, 0, 0.1490196078); 4265 z-index: 4; 4266 } 4267 @media (max-width: 850px) { 4268 .basic-courses__card-footer { 4269 background-color: #f8f8f8; 4270 } 4271 } 4272 .basic-courses__card-footer .side-media { 4273 padding-left: 5px; 4274 /*backdrop-filter: blur(5px);*/ 4275 box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1); 4276 background: rgba(255, 255, 255, 0.15); 4277 } 4278 .basic-courses__card-footer .side-media:hover { 4279 background: rgba(255, 255, 255, 0.25); 4280 } 4281 @media (max-width: 850px) { 4282 .basic-courses__card-footer .side-media__text { 4283 display: none; 4284 } 4285 } 4286 .basic-courses__card-image::after { 4287 content: ""; 4288 position: absolute; 4289 left: 0; 4290 bottom: 0; 4291 width: 100%; 4292 /*backdrop-filter: blur(0.2rem);*/ 4293 height: 40%;
4293 /* ÑÐ¾Ð²Ð¿Ð°Ð´Ð°ÐµÑ Ñ Ð²ÑÑоÑой blur-overlay */ 4294 background: linear-gradient(to top, rgba(0, 0, 0, 0.775), transparent); 4295 } 4296 @media (max-width: 850px) { 4297 .basic-courses__card-image::after { 4298 backdrop-filter: blur(50px); 4299 background: rgba(255, 255, 255, 0.076); 4300 height: 10%; 4301 } 4302 } 4303 .basic-courses__card-month-count.side-media { 4304 align-items: center; 4305 background-color: rgba(255, 255, 255, 0.1490196078); 4306 display: flex; 4307 padding-right: 12px; 4308 padding: 3px; 4309 } 4310 @media (max-width: 850px) { 4311 .basic-courses__card-month-count.side-media { 4312 background: #f9f9f9; 4313 } 4314 } 4315 .basic-courses__card-month-count .side-media__img { 4316 background-color: #ffffff; 4317 min-width: 20px; 4318 min-height: 20px; 4319 /* 4320 @include less(850px) { 4321 background-color: black; 4322 padding: 4px; 4323 4324 svg { 4325 color: white; 4326 width: 100%; 4327 height: 100%; 4328 } 4329 } 4330 */ 4331 } 4332 .basic-courses__card-month-count .side-media__img svg { 4333 color: black; 4334 width: 100%; 4335 height: 100%; 4336 } 4337 .basic-courses__card-month-count .side-media__text { 4338 text-wrap: nowrap; 4339 font-family: "Inter"; 4340 color: rgba(255, 255, 255, 0.8); 4341 line-height: 135%; 4342 font-size: 15px; 4343 font-weight: 500; 4344 } 4345 @media (max-width: 1440px) { 4346 .basic-courses__card-month-count .side-media__text { 4347 font-size: 14px; 4348 } 4349 } 4350 @media (max-width: 1024px) { 4351 .basic-courses__card-month-count .side-media__text { 4352 font-size: 14px; 4353 } 4354 } 4355 @media (max-width: 375px) { 4356 .basic-courses__card-month-count .side-media__text { 4357 font-size: 14px; 4358 } 4359 } 4360 @media (max-width: 850px) { 4361 .basic-courses__card-month-count .side-media__text { 4362 font: 600 13px/1.3 "Inter", sans-serif; 4363 letter-spacing: -0.02em; 4364 color: rgba(0, 0, 0, 0.4); 4365 } 4366 } 4367 .basic-courses__card-new-price { 4368 font: 600 18px/1.35 "Inter", sans-serif; 4369 letter-spacing: -0.02em; 4370 color: #ececec; 4371 } 4372 @media (max-width: 850px) { 4373 .basic-courses__card-new-price { 4374 color: rgba(0, 0, 0, 0.9); 4375 } 4376 } 4377 @media (max-width: 1500px) { 4378 .basic-courses__card-new-price { 4379 font-size: 16px; 4380 } 4381 } 4382 .basic-courses__card-old-price { 4383 font: 600 15px/1.35 "Inter", sans-serif; 4384 letter-spacing: -0.02em; 4385 text-decoration: line-through; 4386 color: #929292; 4387 } 4388 @media (max-width: 850px) { 4389 .basic-courses__card-old-price { 4390 color: rgba(0, 0, 0, 0.4); 4391 } 4392 } 4393 @media (max-width: 1500px) { 4394 .basic-courses__card-old-price { 4395 font-size: 13px; 4396 } 4397 } 4398 .basic-courses__card-price { 4399 display: flex; 4400 flex-direction: column; 4401 align-items: flex-start; 4402 gap: 2px; 4403 } 4404 @media (max-width: 700px) { 4405 .basic-courses__card-tags { 4406 flex-wrap: wrap; 4407 } 4408 } 4409 .basic-courses__card-discription .green-arrow { 4410 box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.4); 4411 } 4412 4413 .month-count { 4414 display: flex; 4415 align-items: center; 4416 justify-content: center; 4417 border-radius: 40px; 4418 padding: 3px; 4419 backdrop-filter: blur(70px); 4420 box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.1019607843); 4421 } 4422 .month-count__icon { 4423 max-width: 20px; 4424 } 4425 .month-count__text { 4426 padding-inline: 10px; 4427 } 4428 4429 .basic-courses__cards > .column { 4430 gap: 20px; 4431 flex: 1; 4432 } 4433 @media (min-width: 1024px) { 4434 .basic-courses__cards > .column { 4435 display: contents; 4436 } 4437 } 4438 4439 .course-list { 4440 top: -20px; 4441 transform: translateY(-100%); 4442 opacity: 0; 4443 pointer-events: none; 4444 right: 0; 4445 display: flex; 4446 align-items: flex-start; 4447 justify-content: center; 4448 flex-direction: column; 4449 gap: 7px; 4450 border-radius: 20px; 4451 padding: 18px; 4452 backdrop-filter: blur(30px); 4453 box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1); 4454 background: rgba(0, 0, 0, 0.05); 4455 } 4456 .course-list.gradient-border { 4457 position: absolute; 4458 } 4459 .course-list__item { 4460 display: flex; 4461 gap: 8px; 4462 font: 500 15px/1.35 "Inter", sans-serif; 4463 letter-spacing: -0.02em; 4464 color: rgba(255, 255, 255, 0.7); 4465 } 4466 .course-list__icon { 4467 box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12); 4468 background: rgba(255, 255, 255, 0.1); 4469 padding: 4px; 4470 } 4471 .course-list__icon svg { 4472 color: white; 4473 filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)); 4474 } 4475 .diploma { 4476 align-items: flex-start; 4477 background-color: #FFFFFF; 4478 padding-block-start: 200px; 4479 margin-bottom: 226px; 4480 } 4481 .diploma .img-separator { 4482 margin-inline: auto; 4483 margin-block: -120px 120px; 4484 max-width: calc(100dvw - 45px); 4485 height: 1px; 4486 background: linear-gradient(90deg, transparent, #e6e6e6, transparent); 4487 } 4488 .diploma .side-media { 4489 background: rgba(255, 255, 255, 0.3490196078); 4490 pointer-events: none; 4491 } 4492 .diploma .side-media__img { 4493 background-color: white; 4494 } 4495 .diploma .green-arrow { 4496 height: 24px; 4497 width: 24px; 4498 } 4499 .diploma__card { 4500 border-radius: 40px; 4501 box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.1019607843); 4502 max-width: 100%; 4503 } 4504 .diploma__card:nth-child(1) { 4505 flex: 2; 4506 } 4507 .diploma__card:nth-child(2) { 4508 flex: 0.6; 4509 } 4510 .diploma__cards { 4511 width: 100%; 4512 gap: 20px; 4513 } 4514 @media (max-width: 1100px) { 4515 .diploma__cards { 4516 flex-wrap: wrap; 4517 } 4518 } 4519 @media (max-width: 700px) { 4520 .diploma__cards { 4521 flex-direction: column; 4522 } 4523 } 4524 .diploma__title { 4525 margin-top: 20px; 4526 margin-bottom: 80px; 4527 font-family: "Loos Extended", sans-serif; 4528 font-weight: 500; 4529 font-size: clamp(26px, 26px + (34 - 26) * (100dvw - 375px) / (1440 - 375), 34px); 4530 line-height: 115%; 4531 letter-spacing: -0.01em; 4532 vertical-align: bottom; 4533 } 4534 @media (max-width: 500px) { 4535 .diploma { 4536 margin-bottom: 120px; 4537 } 4538 } 4539 4540 .benefits { 4541 align-items: flex-start; 4542 background: linear-gradient(110deg, #e6ff99 50%, #b9de42); 4543 padding-bottom: 0; 4544 padding: 30px 30px 0 30px; 4545 } 4546 .benefits__detail { 4547 /* 4548 flex: 1; 4549 width: 100%; 4550 position: relative; 4551 backdrop-filter: blur(90px); 4552 border-radius: 80px; 4553 border-bottom-left-radius: 0; 4554 border-bottom-right-radius: 0; 4555 display: flex; 4556 align-items: flex-end; 4557 padding-top: 89px; 4558 justify-content: center; 4559 box-shadow: 4560 -4px 0px 40px 0px #ffffff inset, 4561 -4px 0px 40px 0px #ffffff inset 4562 ; 4563 4564 img{ 4565 max-width: 100%; 4566 object-fit: contain; 4567 object-position: center; 4568 } 4569 */ 4570 position: relative; 4571 margin-block-start: auto; 4572 } 4573 .benefits .img-decoration { 4574 max-width: calc(100% + 30px); 4575 margin-inline: -30px; 4576 width: calc(100% + 60px); 4577 translate: 15px; 4578 } 4579 .benefits__discription { 4580 color: rgba(0, 0, 0, 0.5019607843); 4581 letter-spacing: -0.02em; 4582 font-weight: 500; 4583 font-size: 15px; 4584 line-height: 130%; 4585 font-family: "Inter"; 4586 } 4587 .benefits__label { 4588 background-color: #f4fdd9; 4589 border-radius: 20px; 4590 display: flex; 4591 flex-direction: column; 4592 gap: 26px; 4593 max-width: 154px; 4594 padding: 10px; 4595 pointer-events: none; 4596 position: absolute; 4597 right: -8px; 4598 top: 15px; 4599 } 4600 .benefits__title { 4601 margin-top: 15px; 4602 /*margin-bottom: 83px;*/ 4603 font-family: "GNF"; 4604 color: rgba(0, 0, 0, 0.8); 4605 font-weight: 400; 4606 font-size: clamp(24px, 24px + (30 - 24) * (100dvw - 375px) / (1440 - 375), 30px); 4607 text-transform: uppercase; 4608 } 4609 .benefits__title b { 4610 opacity: 0.3; 4611 } 4612 4613 .qualification { 4614 position: relative; 4615 background-color: #f4f4f4; 4616 justify-content: end; 4617 min-height: 540px; 4618 } 4619 @media (max-width: 1024px) { 4620 .qualification.row { 4621 flex-direction: column; 4622 align-items: flex-end; 4623 } 4624 } 4625 .qualification__card { 4626 position: absolute; 4627 max-height: 55%; 4628 object-fit: contain; 4629 object-position: center; 4630 width: 54%; 4631 } 4632 .qualification__card:nth-child(1) { 4633 animation-timing-function: cubic-bezier(0.4, 0.2, 0.6, 1); 4634 } 4635 .qualification__card_document { 4636 left: 17.25%; 4637 top: 13%; 4638 scale: 1.5; 4639 } 4640 .qualification__card_green { 4641 left: 12.06%; 4642 top: 28%; 4643 scale: 1.5; 4644 } 4645 .qualification__curtain { 4646 align-items: flex-start; 4647 backdrop-filter: blur(15px); 4648 border-radius: 0 40px 40px 0; 4649 box-shadow: -10px 4px 35px 0px rgba(0, 0, 0, 0.1019607843); 4650 gap: 16px; 4651 overflow: hidden; 4652 padding: 30px; 4653 z-index: 2; 4654 background: repeating-linear-gradient(to right, rgba(217, 217, 217, 0.7333333333) 0px, #f1f1f1 18px); 4655 } 4656 @media (min-width: 1024px) { 4657 .qualification__curtain { 4658 max-width: 40%; 4659 } 4660 } 4661 .qualification__discription { 4662 color: rgba(0, 0, 0, 0.4); 4663 font-family: "Inter"; 4664 font-size: 16px; 4665 font-weight: 500; 4666 letter-spacing: -0.02em; 4667 line-height: 130%; 4668 padding-right: clamp(0px, 0px + (106 - 0) * (100dvw - 375px) / (1440 - 375), 106px); 4669 vertical-align: bottom; 4670 } 4671 .qualification__title { 4672 font-family: "Inter"; 4673 font-weight: 600; 4674 font-size: 20px; 4675 line-height: 120%; 4676 letter-spacing: -0.02em; 4677 vertical-align: bottom; 4678 } 4679 .qualification__title::before { 4680 background-color: rgba(248, 248, 248, 0.7529411765); 4681 filter: blur(30px); 4682 content: ""; 4683 position: absolute; 4684 padding: 120px 150px; 4685 border-radius: 100px; 4686 translate: 0% -18%; 4687 z-index: -1; 4688 } 4689 .qualification__cta { 4690 backdrop-filter: blur(5px); 4691 background-color: #f5f5f5; 4692 border-radius: 64px; 4693 bottom: 0; 4694 box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.0509803922); 4695 color: rgba(0, 0, 0, 0.8); 4696 left: 50%; 4697 position: absolute; 4698 transform: translate(-50%, 50%); 4699 white-space: nowrap; 4700 z-index: 3; 4701 transition: 0.2s; 4702 } 4703 .qualification__cta:hover { 4704 background-color: #cfff32; 4705 } 4706 .qualification__cta .green-arrow { 4707 height: 30px; 4708 pointer-events: none; 4709 width: 30px; 4710 } 4711 .qualification__cta .green-arrow img { 4712 transition: 0.2s; 4713 } 4714 .qualification__cta:hover .green-arrow { 4715 background-color: color-mix(in srgb, black 80%, transparent); 4716 } 4717 .qualification__cta:hover .green-arrow img { 4718 filter: invert(1); 4719 } 4720 .qualification .cta__text { 4721 color: color-mix(in srgb, black 80%, transparent); 4722 letter-spacing: -0.02em; 4723 font-size: 14px; 4724 } 4725 .qualification .gradient-border::before { 4726 border-radius: 64px; 4727 } 4728 4729 @media (width <= 1200px) and (width >= 1024px) { 4730 .diploma__card { 4731 border-radius: 40px; 4732 box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.1019607843); 4733 max-width: 100%; 4734 } 4735 .diploma__card:nth-child(1) { 4736 flex: 1; 4737 } 4738 .diploma__card:nth-child(2) { 4739 flex: 0.6; 4740 } 4741 .qualification__curtain { 4742 max-width: 60%; 4743 } 4744 } 4745 @media (width < 1025px) { 4746 .qualification__curtain { 4747 max-width: unset; 4748 border-radius: 0; 4749 } 4750 .qualification__cta { 4751 left: 50%; 4752 } 4753 } 4754 @media (width < 1000px) { 4755 .diploma__cards { 4756 flex-direction: column !important; 4757 gap: 60px; 4758 } 4759 .img-decoration { 4760 max-height: 450px; 4761 } 4762 .benefits__detail { 4763 margin-inline: auto; 4764 } 4765 .qualification__card_document { 4766 left: 35%; 4767 scale: 1; 4768 top: 21%; 4769 } 4770 .qualification__card_green { 4771 left: 20%; 4772 scale: 1; 4773 top: 12%; 4774 } 4775 } 4776 @media (width <= 500px) { 4777 .qualification__card_document { 4778 scale: 1.5; 4779 } 4780 .qualification__card_green { 4781 scale: 1.5; 4782 } 4783 .qualification__discription { 4784 margin-block-end: 20px; 4785 } 4786 .qualification__curtain { 4787 border-radius: 0 0 40px 40px; 4788 } 4789 } 4790 .real-pros { 4791 background-color: #f8f8f8; 4792 background-image: url("./orbit.D6Bx9Mbi.svg"); 4793 align-items: center; 4794 background-position: center; 4795 background-repeat: no-repeat; 4796 background-size: auto; 4797 box-shadow: 0px -10px 10px color-mix(in srgb, black 2%, transparent); 4798 display: flex; 4799 flex-direction: column; 4800 height: 100dvh; 4801 justify-content: center; 4802 overflow: hidden; 4803 position: relative; 4804 border-radius: clamp(30px, 30px + (60 - 30) * (100dvw - 375px) / (1440 - 375), 60px) clamp(30px, 30px + (60 - 30) * (100dvw - 375px) / (1440 - 375), 60px) 0 0; 4805 } 4806 .real-pros .side-media { 4807 background: white; 4808 box-shadow: 0 4px 15px color-mix(in srgb, black 6%, transparent); 4809 gap: 12px; 4810 padding-inline-end: 20px; 4811 padding: 5px; 4812 pointer-events: none; 4813 } 4814 .real-pros .side-media__text { 4815 letter-spacing: -0.02em; 4816 } 4817 .real-pros .side-media__img { 4818 height: 24px; 4819 width: 24px; 4820 } 4821 .real-pros::after { 4822 content: ""; 4823 position: absolute; 4824 left: 0; 4825 bottom: 0; 4826 width: 100%; 4827 height: 300px; 4828 background: linear-gradient(transparent, #f8f8f8 70%); 4829 background-size: cover; 4830 z-index: 1; 4831 pointer-events: none; 4832 } 4833 .real-pros__container { 4834 aspect-ratio: 1; 4835 width: 80%; 4836 position: relative; 4837 transform-style: preserve-3d; 4838 will-change: transform; 4839 border-radius: 50%; 4840 } 4841 @media (max-width: 1024px) { 4842 .real-pros__container { 4843 width: 100%; 4844 } 4845 } 4846 .real-pros__card { 4847 position: absolute; 4848 top: 50%; 4849 left: 50%; 4850 transform: translate(-50%, -50%); 4851 will-change: transform, opacity; 4852 pointer-events: auto; 4853 display: flex; 4854 align-items: center; 4855 justify-content: center; 4856 user-select: none; 4857 z-index: 2; 4858 } 4859 .real-pros__card--visible { 4860 opacity: 1; 4861 } 4862 .real-pros__card-img { 4863 width: 90px; 4864 height: 90px; 4865 padding: 5px; 4866 border-radius: 50%; 4867 object-fit: cover; 4868 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); 4869 object-fit: contain; 4870 object-position: center; 4871 } 4872 .real-pros__bubble { 4873 align-items: center; 4874 background-color: color-mix(in srgb, white 50%, transparent); 4875 border-radius: 100px; 4876 box-shadow: 0 1px 4px color-mix(in srgb, black 25%, transparent); 4877 display: flex; 4878 height: 34px; 4879 justify-content: center; 4880 object-fit: scale-down; 4881 padding-block-start: 2px; 4882 position: absolute; 4883 width: 34px; 4884 backdrop-filter: blur(5px); 4885 right: -5px; 4886 top: 0; 4887 } 4888 .real-pros__content { 4889 position: absolute; 4890 top: 50%; 4891 left: 50%; 4892 transform: translate(-50%, -50%); 4893 align-items: center; 4894 justify-content: center; 4895 padding: 20px; 4896 z-index: 2; 4897 border-radius: 100%; 4898 } 4899 .real-pros__content::after { 4900 content: ""; 4901 position: absolute; 4902 left: 0; 4903 bottom: 0; 4904 width: 100%; 4905 height: 100%; 4906 background: white; 4907 background-size: cover; 4908 filter: blur(36px); 4909 z-index: 1; 4910 pointer-events: none; 4911 opacity: 1; 4912 } 4913 .real-pros__content > .side-media { 4914 z-index: 2; 4915 } 4916 .real-pros__content .side-media__text { 4917 text-wrap: nowrap; 4918 } 4919 .real-pros__title { 4920 align-items: center; 4921 color: #000000; 4922 font-family: "Loos Extended", sans-serif; 4923 font-weight: 500; 4924 margin-block-start: 25px; 4925 text-align: center; 4926 z-index: 2; 4927 font-size: 60px; 4928 } 4929 @media (max-width: 1440px) { 4930 .real-pros__title { 4931 font-size: 44px; 4932 } 4933 } 4934 @media (max-width: 1024px) { 4935 .real-pros__title { 4936 font-size: 44px; 4937 } 4938 } 4939 @media (max-width: 375px) { 4940 .real-pros__title { 4941 font-size: 26px; 4942
4942 } 4943 } 4944 .real-pros__title b { 4945 color: rgba(0, 0, 0, 0.2509803922); 4946 } 4947 4948 .student-results { 4949 background-color: #f8f8f8; 4950 } 4951 .student-results:has(.div-reviews.--is-expanded) .side-media { 4952 margin-block: -42px 0px; 4953 opacity: 0; 4954 pointer-events: none; 4955 } 4956 .student-results .side-media { 4957 background-color: white; 4958 cursor: pointer; 4959 display: flex; 4960 flex-direction: row-reverse; 4961 gap: 15px; 4962 margin-block-end: 10px; 4963 margin-block-start: 73px; 4964 margin-inline: auto; 4965 padding: 5px; 4966 user-select: none; 4967 width: fit-content; 4968 padding-inline-start: 20px; 4969 } 4970 .student-results .side-media__img { 4971 height: 32px; 4972 width: 32px; 4973 pointer-events: none; 4974 } 4975 .student-results .side-media__text { 4976 font-size: 15px; 4977 font-weight: 500; 4978 letter-spacing: -0.02em; 4979 padding: 0; 4980 transition: 0.25s; 4981 } 4982 .student-results .side-media:hover .side-media__text { 4983 color: black; 4984 } 4985 .student-results .section-name { 4986 margin-inline: auto; 4987 } 4988 .student-results .div-reviews { 4989 /* These variables Will be modified through a script in student-results__05.pug */ 4990 --transition: 1s; 4991 --max-height-shrunken: unset; 4992 --max-height-expanded: unset; 4993 display: grid; 4994 gap: 90px 25px; 4995 grid-template-columns: repeat(6, 1fr); 4996 padding-block: 80px 0px; 4997 transition: 1s; 4998 padding-inline: 12px; 4999 max-width: calc(100% - 24px); 5000 max-height: var(--max-height-shrunken); 5001 } 5002 .student-results .div-reviews.--is-expanded { 5003 max-height: var(--max-height-expanded); 5004 padding-block-end: 27px; 5005 } 5006 .student-results .div-review { 5007 display: flex; 5008 flex-direction: column; 5009 height: auto; 5010 transition: 0.4s; 5011 user-select: none; 5012 } 5013 .student-results .div-text { 5014 background-color: color-mix(in srgb, white 40%, transparent); 5015 border-radius: 20px; 5016 display: flex; 5017 flex-direction: column; 5018 height: 100%; 5019 padding: 15px; 5020 position: relative; 5021 box-shadow: inset 2px 2px 10px color-mix(in srgb, white 80%, transparent), inset -2px -2px 10px color-mix(in srgb, white 80%, transparent), 0px 6px 15px color-mix(in srgb, black 7%, transparent); 5022 padding-block-start: 80px; 5023 } 5024 .student-results .p-salary { 5025 background-color: #cfff32; 5026 border-radius: 100px; 5027 box-shadow: 0 0 7px color-mix(in srgb, black 8%, transparent); 5028 font-family: "GNF", sans-serif; 5029 font-size: 24px; 5030 height: 44px; 5031 margin-block-end: -69px; 5032 margin-inline: auto; 5033 padding: 10px 15px; 5034 text-transform: uppercase; 5035 z-index: 2; 5036 } 5037 .student-results .p-text { 5038 color: color-mix(in srgb, black 50%, transparent); 5039 font-family: "Inter", sans-serif; 5040 font-size: 14px; 5041 font-weight: 500; 5042 letter-spacing: -0.02em; 5043 line-height: 130%; 5044 margin-block-end: 20px; 5045 text-wrap: balance; 5046 } 5047 .student-results .p-name { 5048 color: color-mix(in srgb, black 80%, transparent); 5049 font-family: "Inter", sans-serif; 5050 font-size: 12px; 5051 font-weight: 600; 5052 letter-spacing: -0.01em; 5053 line-height: 115%; 5054 margin-block-start: auto; 5055 } 5056 .student-results .p-name:has(+ .p-experience:not(:empty)) { 5057 margin-block-end: 2px; 5058 } 5059 .student-results .p-experience { 5060 color: color-mix(in srgb, black 25%, transparent); 5061 font-family: "Inter", sans-serif; 5062 font-size: 12px; 5063 } 5064 .student-results .img { 5065 height: 170px; 5066 margin-block-end: -25px; 5067 margin-inline: auto; 5068 scale: 1.2; 5069 transform-origin: center; 5070 transition: 0.4s; 5071 width: 170px; 5072 z-index: 1; 5073 } 5074 .student-results .swiper-pagination { 5075 align-items: center; 5076 background-color: color-mix(in srgb, black 5%, transparent); 5077 border-radius: 100px; 5078 bottom: unset !important; 5079 display: flex; 5080 gap: 5px; 5081 margin-block-start: 45px; 5082 margin-inline: auto; 5083 padding: 10px 12px; 5084 position: relative; 5085 top: unset !important; 5086 width: fit-content !important; 5087 } 5088 .student-results .swiper-pagination-bullet { 5089 background-color: color-mix(in srgb, black 10%, transparent); 5090 box-shadow: 0 2px 5px 1px transparent; 5091 height: 5px !important; 5092 margin: 0 !important; 5093 opacity: 1 !important; 5094 width: 5px !important; 5095 transition: 0.2s; 5096 } 5097 .student-results .swiper-pagination-bullet-active { 5098 background-color: #CFFF32; 5099 box-shadow: 0 2px 5px 1px rgba(75, 98, 2, 0.1019607843); 5100 width: 24px !important; 5101 border-radius: 100px; 5102 } 5103 @media (width <= 1450px) { 5104 .student-results .div-reviews { 5105 gap: 60px 25px; 5106 grid-template-columns: 1fr 1fr 1fr 1fr; 5107 } 5108 .student-results .div-review:empty { 5109 display: none; 5110 } 5111 } 5112 @media (width <= 950px) { 5113 .student-results .div-reviews { 5114 grid-template-columns: 1fr 1fr; 5115 } 5116 } 5117 @media (width <= 500px) { 5118 .student-results .div-reviews { 5119 display: flex; 5120 gap: unset; 5121 max-height: unset; 5122 max-width: 0; 5123 padding-inline: 0; 5124 } 5125 .student-results .div-review { 5126 width: 210px; 5127 } 5128 .student-results .swiper { 5129 overflow: visible; 5130 width: 100%; 5131 } 5132 .student-results .side-media { 5133 display: none; 5134 } 5135 } 5136 @media (width > 500px) { 5137 .student-results .div-review:not(:empty):hover { 5138 cursor: pointer; 5139 scale: 1.01; 5140 translate: 0 -5px; 5141 } 5142 .student-results .div-review:hover .img { 5143 scale: 1.23; 5144 } 5145 .student-results .div-review:not(.--is-expanded) .p-text { 5146 -webkit-box-orient: vertical; 5147 -webkit-line-clamp: 5; 5148 clip-path: content-box; 5149 display: -webkit-box; 5150 line-clamp: 5; 5151 overflow: hidden; 5152 } 5153 .student-results .swiper-pagination { 5154 display: none; 5155 } 5156 } 5157 5158 .cases { 5159 display: none !important; 5160 align-items: center; 5161 padding-bottom: 300px; 5162 background-color: #f8f8f8; 5163 } 5164 .cases .img-separator { 5165 margin-block: -50px clamp(100px, 100px + (200 - 100) * (100dvw - 375px) / (1440 - 375), 200px); 5166 max-width: 100%; 5167 } 5168 @media (max-width: 1024px) { 5169 .cases { 5170 padding-bottom: 0; 5171 } 5172 } 5173 .cases__title { 5174 font-family: "Loos Extended", sans-serif; 5175 font-size: clamp(26px, 26px + (38 - 26) * (100dvw - 375px) / (1440 - 375), 38px); 5176 font-weight: 500; 5177 letter-spacing: -0.01em; 5178 margin-top: 20px; 5179 transform: none; 5180 } 5181 .cases__cases { 5182 align-items: center; 5183 backdrop-filter: blur(9px); 5184 background-color: #f2f2f2; 5185 border-radius: 40px; 5186 box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.0705882353); 5187 justify-content: flex-start; 5188 margin-top: 104px; 5189 padding-inline: 10px; 5190 width: 100%; 5191 z-index: 3; 5192 } 5193 .cases__card { 5194 padding: 50px; 5195 border-radius: 20px; 5196 border: 1px solid rgba(0, 0, 0, 0.0509803922); 5197 display: flex; 5198 align-items: center; 5199 justify-content: flex-start; 5200 position: relative; 5201 } 5202 .cases__image { 5203 counter-increment: card-counter; 5204 border-radius: 20px; 5205 position: relative; 5206 box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.1490196078); 5207 } 5208 .cases__image img { 5209 max-width: 100%; 5210 max-height: 100%; 5211 object-fit: contain; 5212 object-position: center; 5213 border-radius: inherit; 5214 } 5215 .cases__image-counter { 5216 position: absolute; 5217 top: 0px; 5218 right: 0px; 5219 transform: translate(50%, -50%); 5220 background-color: rgba(255, 255, 255, 0.4); 5221 width: 40px; 5222 aspect-ratio: 1; 5223 border-radius: 50%; 5224 backdrop-filter: blur(10px); 5225 box-shadow: -6px 6px 10px 0px rgba(0, 0, 0, 0.0509803922); 5226 box-shadow: -2px -2px 10px 0px rgba(255, 255, 255, 0.8) inset; 5227 box-shadow: 2px 2px 10px 0px rgba(255, 255, 255, 0.8) inset; 5228 } 5229 .cases__image-counter .counter { 5230 width: 100%; 5231 height: 100%; 5232 border-radius: inherit; 5233 } 5234 .cases__image-counter .counter::after { 5235 content: counter(card-counter) !important; 5236 width: 100%; 5237 height: 100%; 5238 color: rgba(0, 0, 0, 0.5019607843); 5239 font-size: 16px; 5240 font-weight: 500; 5241 font-family: "Inter"; 5242 display: flex; 5243 align-items: center; 5244 justify-content: center; 5245 } 5246 5247 .tabs__header { 5248 position: relative; 5249 justify-content: center; 5250 align-items: center; 5251 border-radius: 50px; 5252 gap: 10px; 5253 background-color: #ebebeb; 5254 translate: 0 -50%; 5255 padding: 5px; 5256 } 5257 .tabs__btn { 5258 background: none; 5259 border: none; 5260 padding: 8.5px 20px; 5261 cursor: pointer; 5262 position: relative; 5263 z-index: 1; 5264 font-family: "Inter"; 5265 font-size: 16px; 5266 line-height: 135%; 5267 font-weight: 500; 5268 color: rgba(0, 0, 0, 0.5019607843); 5269 } 5270 .tabs__btn.active { 5271 font-weight: 600; 5272 padding-left: 45px; 5273 z-index: 5; 5274 } 5275 .tabs__indicator { 5276 position: absolute; 5277 left: 0; 5278 background: #0066ff; 5279 background: transparent; 5280 transition: all 0.3s ease; 5281 will-change: transform, width; 5282 z-index: 3; 5283 } 5284 .tabs__indicator div { 5285 backdrop-filter: none; 5286 } 5287 .tabs__indicator .side-media__img { 5288 width: 32px; 5289 height: 32px; 5290 } 5291 .tabs__content { 5292 position: relative; 5293 overflow: hidden; 5294 width: 100%; 5295 } 5296 .tabs__content .swiper { 5297 /*padding-bottom: 120px !important;*/ 5298 } 5299 .tabs__content .swiper-controllers { 5300 width: fit-content; 5301 backdrop-filter: blur(6px); 5302 box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.0509803922); 5303 bottom: 0; 5304 left: 50%; 5305 transform: translateX(-50%); 5306 align-items: center; 5307 justify-content: center; 5308 padding: 10px; 5309 gap: 10px; 5310 border-radius: 40px; 5311 } 5312 .tabs__content .swiper__arrow {
5313 width: 20px; 5314 height: 20px; 5315 display: flex; 5316 align-items: center; 5317 justify-content: center; 5318 z-index: 4; 5319 cursor: pointer; 5320 } 5321 .tabs__content .swiper__arrow img { 5322 max-width: 100%; 5323 max-height: 100%; 5324 object-fit: contain; 5325 object-position: center; 5326 } 5327 .tabs__content .swiper__pagination.swiper-pagination-bullets.swiper-pagination-horizontal { 5328 position: relative; 5329 left: 0%; 5330 transform: translate(0, 50%); 5331 display: flex; 5332 gap: 5px; 5333 z-index: 10; 5334 border-radius: 40px; 5335 background-color: #f2f2f2; 5336 width: fit-content; 5337 padding: 10px 12px; 5338 } 5339 .tabs__content .swiper__pagination.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet { 5340 background: #ccc; 5341 opacity: 1; 5342 width: 5px; 5343 height: 5px; 5344 border-radius: 50%; 5345 transition: all 0.3s ease; 5346 margin: 0; 5347 } 5348 .tabs__content .swiper__pagination.swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet-active { 5349 width: 24px; 5350 border-radius: 30px; 5351 background: #cfff32; 5352 } 5353 .tabs__panel { 5354 position: absolute; 5355 top: 0; 5356 left: 0; 5357 width: 100%; 5358 opacity: 0; 5359 transform: translateX(2000px); 5360 transition: none; 5361 padding: 10px; 5362 counter-reset: card-counter; 5363 } 5364 .tabs__panel.active { 5365 position: relative; 5366 opacity: 1; 5367 transform: translateX(0); 5368 } 5369 5370 .advantages { 5371 justify-content: space-between; 5372 background-color: #e4e4e4; 5373 position: relative; 5374 background-image: url("data:image/svg+xml,%3csvg%20width='2'%20height='1262'%20viewBox='0%200%202%201262'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cline%20x1='0.875'%20y1='-336'%20x2='0.87493'%20y2='1264'%20stroke='url(%23paint0_linear_4807_3885)'%20stroke-opacity='0.05'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_4807_3885'%20x1='-0.125'%20y1='-336'%20x2='-0.12507'%20y2='1264'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-opacity='0'/%3e%3cstop%20offset='0.5'/%3e%3cstop%20offset='1'%20stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e"); 5375 background-size: 176px 100%; 5376 } 5377 .advantages .side-media__img { 5378 background-color: white; 5379 } 5380 .advantages .advantages__image-mobile { 5381 display: none; 5382 margin-inline: auto; 5383 max-height: 400px; 5384 max-width: 100%; 5385 } 5386 .advantages .advantages__image-mobile img { 5387 max-width: 100%; 5388 } 5389 @media (width <= 660px) { 5390 .advantages .advantages__image { 5391 display: none; 5392 } 5393 .advantages .advantages__image-mobile { 5394 display: block; 5395 } 5396 } 5397 .advantages::before { 5398 content: ""; 5399 position: absolute; 5400 left: 0; 5401 right: 0; 5402 height: 460px; 5403 background: linear-gradient(to top, #e4e4e4 0%, #f8f8f8 100%); 5404 z-index: 0; 5405 } 5406 @media (max-width: 1024px) { 5407 .advantages { 5408 justify-content: center; 5409 } 5410 } 5411 .advantages__content { 5412 align-items: flex-start; 5413 max-width: calc(100dvw - 40px); 5414 padding-bottom: 250px; 5415 padding-top: clamp(100px, 100px + (252 - 100) * (100dvw - 375px) / (1440 - 375), 252px); 5416 z-index: 1; 5417 } 5418 .advantages__image { 5419 position: relative; 5420 flex: 1; 5421 align-items: center; 5422 } 5423 .advantages__image::before { 5424 content: ""; 5425 display: block; 5426 flex: 1; 5427 } 5428 @media (max-width: 1024px) { 5429 .advantages__image { 5430 position: absolute; 5431 top: 0; 5432 height: 100%; 5433 z-index: 0; 5434 } 5435 } 5436 .advantages__image .garbage { 5437 flex: 1; 5438 } 5439 .advantages__image .image__container { 5440 position: sticky; 5441 bottom: -14%; 5442 max-width: 1000px; 5443 width: 100%; 5444 } 5445 .advantages__image img { 5446 padding-left: 18%; 5447 padding-right: 5.7%; 5448 max-height: 100%; 5449 object-fit: contain; 5450 object-position: center; 5451 max-width: 100%; 5452 width: 100%; 5453 } 5454 .advantages__title { 5455 font-family: "Loos Extended", sans-serif; 5456 font-size: clamp(26px, 26px + (38 - 26) * (100dvw - 375px) / (1440 - 375), 38px); 5457 font-weight: 500; 5458 letter-spacing: -0.01em; 5459 line-height: 115%; 5460 padding-top: 20px; 5461 } 5462 .advantages__title span { 5463 color: color-mix(in srgb, black 25%, transparent); 5464 } 5465 @media (width <= 450px) { 5466 .advantages__title br { 5467 display: none; 5468 } 5469 } 5470 .advantages__cards { 5471 translate: -11px; 5472 margin-top: 75px; 5473 flex: 1; 5474 z-index: 4; 5475 display: grid; 5476 grid-template-columns: [col1] 364px [col2] 13px [col3] 553px [col-end]; 5477 grid-template-rows: [row1] 465px [row3] 29px [row4] 170px [sd] 32px [row5] 450px [row-end]; 5478 } 5479 @media (max-width: 1024px) { 5480 .advantages__cards { 5481 grid-template-columns: 1fr; 5482 grid-template-rows: auto; 5483 gap: 20px; 5484 translate: 0; 5485 margin-top: 40px; 5486 } 5487 } 5488 .advantages__card { 5489 border-radius: 30px; 5490 } 5491 .advantages__card_1 { 5492 grid-column: col1; 5493 grid-row: row1/sd; 5494 padding-bottom: 0 !important; 5495 } 5496 @media (max-width: 1024px) { 5497 .advantages__card_1 { 5498 grid-column: 1; 5499 grid-row: auto; 5500 padding-bottom: 20px !important; 5501 } 5502 } 5503 .advantages__card_1 .advantages-card__title { 5504 max-width: 270px; 5505 } 5506 .advantages__card_1 .advantages-card__image img { 5507 object-position: bottom;
5508 border-radius: 0 0 30px 30px; 5509 } 5510 .advantages__card_2 { 5511 grid-column: col3; 5512 grid-row: row1/row3; 5513 padding-bottom: 0 !important; 5514 } 5515 @media (max-width: 1024px) { 5516 .advantages__card_2 { 5517 grid-column: 1; 5518 grid-row: auto; 5519 padding-bottom: 20px !important; 5520 } 5521 } 5522 .advantages__card_2 .advantages-card__discription { 5523 max-width: 365px; 5524 } 5525 .advantages__card_3 { 5526 padding: 0 !important; 5527 grid-column: col3; 5528 grid-row: row4; 5529 background-color: #ffdac1; 5530 } 5531 @media (max-width: 1024px) { 5532 .advantages__card_3 { 5533 grid-column: 1; 5534 grid-row: auto; 5535 padding: 20px !important; 5536 } 5537 } 5538 .advantages__card_3 .advantages-card__text { 5539 max-width: 350px; 5540 } 5541 .advantages__card_4 { 5542 grid-column: col1/col-end; 5543 grid-row: row5; 5544 background-color: #e2f0cb; 5545 } 5546 @media (max-width: 1024px) { 5547 .advantages__card_4 { 5548 grid-column: 1; 5549 grid-row: auto; 5550 } 5551 } 5552 .advantages__card_4 .advantages-card__discription { 5553 max-width: 500px; 5554 } 5555 5556 .advantages-card { 5557 position: relative; 5558 box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.1019607843); 5559 padding: 24px; 5560 padding-top: 30px; 5561 background-color: #efefef; 5562 transition: 1s opacity, translate; 5563 transform-origin: top; 5564 } 5565 @media (max-width: 1440px) { 5566 .advantages-card { 5567 padding: 20px; 5568 padding-top: 24px; 5569 } 5570 } 5571 .advantages-card__discription { 5572 text-wrap: balance; 5573 } 5574 .advantages-card__image { 5575 flex: 1; 5576 display: flex; 5577 align-items: center; 5578 justify-content: flex-end; 5579 } 5580 .advantages-card__image img { 5581 max-width: calc(100% + 40px); 5582 max-height: 100%; 5583 height: 100%; 5584 object-fit: contain; 5585 object-position: bottom; 5586 } 5587 .advantages-card__text { 5588 padding: 24px; 5589 padding-top: 36.5px; 5590 } 5591 .advantages-card__discription { 5592 padding-top: 10px; 5593 font-weight: 500; 5594 font-family: "Inter"; 5595 font-size: 16px; 5596 line-height: 130%; 5597 color: rgba(0, 0, 0, 0.4); 5598 letter-spacing: -0.35px; 5599 } 5600 @media (max-width: 1440px) { 5601 .advantages-card__discription { 5602 font-size: 14px; 5603 } 5604 } 5605 @media (max-width: 1024px) { 5606 .advantages-card__discription { 5607 font-size: 14px; 5608 } 5609 } 5610 @media (max-width: 375px) { 5611 .advantages-card__discription { 5612 font-size: 14px; 5613 } 5614 } 5615 .advantages-card__title { 5616 font-weight: 600; 5617 font-family: "Inter"; 5618 font-size: 20px; 5619 line-height: 120%; 5620 letter-spacing: -0.4px; 5621 } 5622 @media (max-width: 1440px) { 5623 .advantages-card__title { 5624 font-size: 16px; 5625 } 5626 } 5627 @media (max-width: 1024px) { 5628 .advantages-card__title { 5629 font-size: 16px; 5630 } 5631 } 5632 @media (max-width: 375px) { 5633 .advantages-card__title { 5634 font-size: 16px; 5635 } 5636 } 5637 .advantages-card__side-media { 5638 position: absolute; 5639 top: 0px; 5640 left: 20px; 5641 transform: translateY(-50%); 5642 width: fit-content; 5643 } 5644 5645 .advantages__card_4 .advantages-card__image img { 5646 width: 100%; 5647 } 5648 5649 @media (width >= 1025px) { 5650 .advantages__card_2 .advantages-card__image img { 5651 margin-inline: -20px; 5652 width: calc(100% + 40px); 5653 } 5654 } 5655 @media (width < 1025px) { 5656 .advantages__name { 5657 margin-inline: auto; 5658 } 5659 .advantages__title { 5660 margin-block-end: 50px; 5661 margin-inline: auto; 5662 text-align: center; 5663 } 5664 .advantages__card_1 { 5665 padding-block-end: 0 !important; 5666 } 5667 .advantages__card_1 .advantages-card__image img { 5668 max-height: 380px; 5669 } 5670 .advantages__card_2 { 5671 padding-block-end: 0 !important; 5672 } 5673 .advantages__card_2__discription { 5674 position: relative; 5675 z-index: 1; 5676 } 5677 .advantages__card_2 .advantages-card__image img { 5678 border-radius: 0 0 30px 30px; 5679 margin-inline: -20px; 5680 width: calc(100% + 40px); 5681 } 5682 .advantages__card_2 .advantages-card__image picture { 5683 width: 100%; 5684 } 5685 .advantages__card_3 .advantages-card__image { 5686 border-radius: 0 30px 30px 0px; 5687 height: calc(100% + 40px); 5688 margin-block: -20px; 5689 margin-inline-end: -20px; 5690 } 5691 .advantages__card_4 .advantages-card__image img { 5692 min-height: 130px; 5693 } 5694 } 5695 @media (width <= 550px) { 5696 .advantages__card_3 { 5697 align-items: center; 5698 display: flex; 5699 padding: 25px !important; 5700 } 5701 .advantages__card_3__text { 5702 height: fit-content; 5703 } 5704 .advantages__card_3 .advantages-card__image { 5705 flex: unset; 5706 height: calc(100% + 50px); 5707 margin-inline-end: -25px; 5708 border-radius: 0 30px 30px 0px; 5709 overflow: hidden; 5710 min-width: 130px; 5711 } 5712 .advantages__card_3 .advantages-card__image img { 5713 height: 100%; 5714 width: 100%; 5715 object-fit: cover; 5716 object-position: left; 5717 } 5718 .advantages__card_3 .advantages-card__text { 5719 padding: 0px; 5720 } 5721 } 5722 .faq { 5723 z-index: 2; 5724 background: radial-gradient(128.9% 26.53% at 59.71% 25.97%, #ffffff 0%, #f2f2f2 100%); 5725 } 5726 .faq .green-arrow { 5727 margin-inline-start: 10px; 5728 } 5729 .faq .img-background { 5730 display: none; 5731 } 5732 .faq__header { 5733 width: 100%; 5734 position: relative; 5735 display: flex; 5736 justify-content: center; 5737 align-items: start; 5738 } 5739 .faq__header .header__decor { 5740 height: 106px; 5741 position: absolute; 5742 width: 100%; 5743 z-index: 1; 5744 } 5745 .faq__header #header_ball { 5746 z-index: 0; 5747 height: 265px; 5748 } 5749 .faq-container { 5750 margin: 0 auto; 5751 padding-top: clamp(0px, 0px + (214 - 0) * (100dvw - 375px) / (1440 - 375), 214px); 5752 max-width: 763px; 5753 } 5754 .faq-container--center { 5755 display: flex; 5756 justify-content: center; 5757 } 5758 .faq__content { 5759 margin-top: 58px; 5760 width: 100%; 5761 } 5762 .faq__title { 5763 display: flex; 5764 align-items: center; 5765 justify-content: center; 5766 margin-bottom: 40px; 5767 } 5768 .faq__subtitle { 5769 display: flex; 5770 justify-content: center; 5771 margin-bottom: 30px; 5772 } 5773 .faq-subtitle h3 { 5774 font-weight: 400; 5775 color: rgba(0, 0, 0, 0.5019607843); 5776 font-size: 16px; 5777 font-family: GNF; 5778 line-height: 130%; 5779 text-transform: uppercase; 5780 } 5781 .faq__questions { 5782 border-bottom: 1px solid; 5783 gap: 10px; 5784 max-width: 577px; 5785 border-image-source: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%); 5786 } 5787 .faq .question { 5788 align-items: center; 5789 border-radius: 40px; 5790 box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0784313725); 5791 gap: 15px; 5792 justify-content: space-between; 5793 letter-spacing: -0.02em; 5794 padding: 5px; 5795 background: linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), linear-gradient(0deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)); 5796 padding-left: 15px; 5797 } 5798 .faq .question::before { 5799 pointer-events: none; 5800 } 5801 @media (width <= 850px) { 5802 .faq .question { 5803 padding: 10px; 5804 padding-inline-start: 20px; 5805 } 5806 } 5807 @media (max-width: 375px) { 5808 .faq .question { 5809 /* 5810 padding: 12px; 5811 padding-right: 10px; 5812 padding-left: 30px; 5813 */ 5814 } 5815 } 5816 @media (max-width: 1440px) { 5817 .faq .question .green-arrow { 5818 width: 32px; 5819 min-width: 32px; 5820 min-height: 32px; 5821 } 5822 } 5823 .faq .question__content { 5824 color: rgba(0, 0, 0, 0.8); 5825 font-family: "Inter"; 5826 font-size: 15px; 5827 font-weight: 500; 5828 line-height: 130%; 5829 } 5830 .faq__separator { 5831 margin-top: 120px; 5832 margin-bottom: 120px; 5833 } 5834 .faq .separator { 5835 height: 1px; 5836 width: 100%; 5837 background: linear-gradient(to right, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.02)); 5838 } 5839 @media (width <= 700px) { 5840 .faq .img-background { 5841 display: block; 5842 } 5843 } 5844 5845 /* QUESTIONS BLOCK */ 5846 .questions-block { 5847 background: radial-gradient(68.52% 33.45% at 59.55% 33.45%, #ffffff 0%, #f2f2f2 100%); 5848 padding-bottom: 200px; 5849 position: relative; 5850 } 5851 .questions-block p { 5852 color: black; 5853 } 5854 5855 .questions-container { 5856 width: 89.3%; 5857 margin: 0 auto; 5858 } 5859 5860 @media (min-width: 400px) { 5861 .questions-container { 5862 width: 93.06%; 5863 } 5864 } 5865 .questions-block__title-section { 5866 display: flex; 5867 justify-content: center; 5868 margin-bottom: -18px; 5869 position: relative; 5870 z-index: 2; 5871 } 5872 5873 .questions-block__content { 5874 background: #eeeeee; 5875 border-radius: 30px; 5876 margin: 0 auto; 5877 padding-bottom: 20px; 5878 width: clamp(335px, 335px + (577 - 335) * (100dvw - 375px) / (1440 - 375), 577px); 5879 z-index: 1; 5880 box-shadow: inset 0px 0px 50px 4px color-mix(in srgb, white 80%, transparent), 0px 6px 24px 0px rgba(0, 0, 0, 0.1215686275); 5881 background-image: url("../assets/images/waves.svg"); 5882 background-position: center top; 5883 background-repeat: no-repeat; 5884 } 5885 5886 .question-subtitle-container { 5887 display: flex; 5888 flex-direction: column; 5889 align-items: center; 5890 } 5891 5892 .questions-block__subtitle { 5893 margin-left: 20px; 5894 margin-right: 20px; 5895 margin-top: 69px; 5896 max-width: 39ch; 5897 margin-bottom: 10px; 5898 } 5899 5900 .questions-block__subtitle p { 5901 color: #000; 5902 font: 500 22px/1.1 "Loos Extended", sans-serif; 5903 line-height: 110%; 5904 text-align: center; 5905 text-align: center; 5906 } 5907 5908 .question__info { 5909 max-width: 350px; 5910 text-align: center; 5911 text-wrap: balance; 5912 } 5913 5914 .question__info p { 5915 color: rgba(0, 0, 0, 0.5);
5916 font: 500 clamp(14px, 14px + (15 - 14) * (100dvw - 375px) / (1440 - 375), 15px)/1.3 "Inter", sans-serif; 5917 letter-spacing: -0.02em; 5918 line-height: 135%; 5919 margin-bottom: 110px; 5920 text-align: center; 5921 } 5922 5923 .text-gray { 5924 color: rgba(0, 0, 0, 0.2509803922); 5925 } 5926 5927 .question-block__form { 5928 width: 100%; 5929 } 5930 5931 .question-block__input { 5932 background: rgba(0, 0, 0, 0.0509803922); 5933 border-radius: 14px; 5934 border: none; 5935 box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0784313725); 5936 box-sizing: border-box; 5937 font-family: "GNF", sans-serif; 5938 font-size: 18px; 5939 margin-bottom: 10px; 5940 padding: 21px 0 21px 20px; 5941 text-transform: uppercase; 5942 width: 100%; 5943 } 5944 5945 .question-block__input.last-input { 5946 margin-bottom: 20px; 5947 } 5948 5949 .question-button__content { 5950 display: flex; 5951 align-items: center; 5952 justify-content: space-between; 5953 position: relative; 5954 z-index: 2; 5955 } 5956 5957 @media (min-width: 1023px) { 5958 .question-button__content { 5959 align-items: end; 5960 } 5961 } 5962 .question-block__form-button { 5963 align-items: flex-end; 5964 background: #cfff32; 5965 border-radius: 14px; 5966 cursor: pointer; 5967 display: flex; 5968 font-family: "GNF", sans-serif; 5969 font-size: 18px; 5970 height: 130px; 5971 justify-content: space-between; 5972 overflow: hidden; 5973 padding: 20px 20px 20px 24px; 5974 position: relative; 5975 text-transform: uppercase; 5976 transition: 0.3s; 5977 width: 100%; 5978 box-shadow: inset 0 -6px 14px 0 rgba(255, 255, 255, 0.5), inset 0 6px 14px 0 rgba(255, 255, 255, 0.5), inset 4px 0 30px 0 rgba(255, 255, 255, 0.8), inset -4px 0 30px 0 rgba(255, 255, 255, 0.8), 0 2px 10px 0 rgba(0, 0, 0, 0.15); 5979 } 5980 .question-block__form-button p, 5981 .question-block__form-button .question-button__button-icon { 5982 transition: 0.2s; 5983 } 5984 .question-block__form-button:hover { 5985 box-shadow: none; 5986 background-color: black; 5987 } 5988 .question-block__form-button:hover p { 5989 color: white; 5990 } 5991 .question-block__form-button:hover::before { 5992 opacity: 0; 5993 } 5994 .question-block__form-button:hover .question-button__button-icon { 5995 filter: invert(1); 5996 } 5997 5998 .question-button__button-icon { 5999 background-color: #000000; 6000 height: 32px; 6001 width: 32px; 6002 } 6003 .question-button__button-icon svg { 6004 color: white; 6005 } 6006 6007 /* PHONE INPUT */ 6008 .phone-input { 6009 display: flex; 6010 align-items: center; 6011 border: 1.5px solid rgba(255, 255, 255, 0.4); 6012 border-radius: 14px; 6013 padding: 8px 0 8px 8px; 6014 background: rgba(0, 0, 0, 0.05); 6015 box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.0784313725); 6016 width: 100%; 6017 border: none; 6018 } 6019 6020 .phone-input__phone-code { 6021 align-items: center; 6022 background: rgba(255, 255, 255, 0.3294117647); 6023 border-radius: 12px; 6024 box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); 6025 cursor: pointer; 6026 display: flex; 6027 gap: 6.5px; 6028 height: 42px; 6029 margin-right: 12px; 6030 padding-right: 12px; 6031 } 6032 6033 .phone-input__phone-code select { 6034 -moz-appearance: none; 6035 -webkit-appearance: none; 6036 appearance: none; 6037 background: transparent; 6038 border: none; 6039 box-shadow: none; 6040 color: rgba(0, 0, 0, 0.4); 6041 cursor: pointer; 6042 font-family: "GNF", sans-serif; 6043 font-size: 18px; 6044 font-weight: 400; 6045 height: 100%; 6046 margin-inline-end: -30px; 6047 outline: none; 6048 padding-inline-end: 30px; 6049 padding-left: 12px; 6050 text-transform: uppercase; 6051 background-position: right center; 6052 background-repeat: no-repeat; 6053 } 6054 6055 .phone-input__phone-code select:focus { 6056 outline: none; 6057 border: none; 6058 box-shadow: none; 6059 } 6060 6061 .phone-input__phone-number { 6062 border: none; 6063 background: transparent; 6064 font-family: GNF; 6065 font-size: 18px; 6066 text-transform: uppercase; 6067 width: 100%; 6068 outline: none; 6069 } 6070 6071 /* Footer Styles */ 6072 .footer { 6073 height: 530px; 6074 margin-block: -30px; 6075 position: relative; 6076 z-index: 1; 6077 transition: 3s; 6078 transition-property: opacity, translation; 6079 } 6080
6081 .footer__container { 6082 background-color: #f2f2f2; 6083 border-radius: 30px; 6084 box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); 6085 display: flex; 6086 height: 100%; 6087 justify-content: space-between; 6088 padding: 20px !important; 6089 } 6090 6091 /* Ðого и оÑÐ½Ð¾Ð²Ð½Ð°Ñ Ð¸Ð½ÑоÑмаÑÐ¸Ñ */ 6092 .footer__logo-section { 6093 display: flex; 6094 flex-direction: column; 6095 align-items: flex-start; 6096 } 6097 6098 .footer__logo { 6099 align-items: center; 6100 aspect-ratio: 1; 6101 background-color: #f7f7f7; 6102 border-radius: 20px; 6103 box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12); 6104 display: flex; 6105 height: 60px; 6106 justify-content: center; 6107 margin-bottom: 110px; 6108 white-space: nowrap; 6109 width: 60px; 6110 } 6111 .footer__logo img { 6112 height: clamp(15px, 15px + (30 - 15) * (100dvw - 375px) / (1440 - 375), 30px); 6113 width: clamp(15px, 15px + (30 - 15) * (100dvw - 375px) / (1440 - 375), 30px); 6114 } 6115 6116 .footer__title { 6117 font-family: "Inter", sans-serif; 6118 font-weight: 500; 6119 font-size: 20px; 6120 line-height: 120%; 6121 color: #000000; 6122 margin-bottom: 30px; 6123 letter-spacing: -0.02em; 6124 } 6125 6126 .footer__info { 6127 color: #000000; 6128 font-family: "Inter", sans-serif; 6129 font-size: 12px; 6130 font-weight: 500; 6131 letter-spacing: -0.01em; 6132 line-height: 1.5; 6133 } 6134 6135 /* СоÑиалÑнÑе иконки */ 6136 .footer__social-section { 6137 /* 6138 width: 570px; 6139 height: 100px; 6140 */ 6141 border-radius: 15px; 6142 background-color: rgba(255, 255, 255, 0.4); 6143 display: flex; 6144 gap: 10px; 6145 justify-content: space-around; 6146 align-items: center; 6147 padding: 10px; 6148 box-shadow: 0px 6px 25px 0px rgba(0, 0, 0, 0.0509803922); 6149 backdrop-filter: blur(9px); 6150 } 6151 6152 .footer__social-item { 6153 align-items: flex-start; /* ÐÑижимаем к Ð»ÐµÐ²Ð¾Ð¼Ñ ÐºÑÐ°Ñ */ 6154 background-color: white; 6155 border-radius: 10px; 6156 box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.0784313725); 6157 box-sizing: border-box; 6158 cursor: pointer; 6159 display: flex; 6160 flex-direction: column;
6161 height: clamp(60px, 60px + (100 - 60) * (100dvw - 375px) / (1440 - 375), 100px); 6162 justify-content: space-between; /* РаÑпÑеделÑем пÑоÑÑÑанÑÑво Ð¼ÐµÐ¶Ð´Ñ ÑлеменÑами */ 6163 min-height: clamp(60px, 60px + (100 - 60) * (100dvw - 375px) / (1440 - 375), 100px); 6164 min-width: clamp(60px, 60px + (100 - 60) * (100dvw - 375px) / (1440 - 375), 100px); 6165 padding: 10px; 6166 position: relative; /* ÐÐ»Ñ Ð¿Ð¾Ð·Ð¸ÑиониÑÐ¾Ð²Ð°Ð½Ð¸Ñ ÑлеменÑов */ 6167 transition: all 0.3s linear; 6168 width: clamp(60px, 60px + (100 - 60) * (100dvw - 375px) / (1440 - 375), 100px); 6169 } 6170 @media (hover: hover) and (pointer: fine) { 6171 .footer__social-item:hover { 6172 background-color: #cfff32; 6173 box-shadow: 0px 0px 24px rgba(207, 255, 50, 0.4); 6174 /* 6175 box-shadow: 6176 0px 2px 10px 0px #0000000d, 0px -5px 14px 0px #ffffff4d inset, 6177 0px 5px 14px 0px #ffffff4d inset, 4px 0px 30px 0px #ffffff80 inset, 6178 -4px 0px 30px 0px #ffffff80 inset, 0px 0px 24px 0px #cfff3266 6179 ; 6180 */ 6181 } 6182 .footer__social-item:hover .footer__social-name { 6183 color: black !important; 6184 } 6185 .footer__social-item:hover img { 6186 filter: brightness(0.3); 6187 } 6188 } 6189 6190 .footer__social-icon { 6191 align-items: flex-start; 6192 display: flex; 6193 height: 18px; 6194 justify-content: flex-start; 6195 margin: 0; 6196 transition: 0.3s; 6197 width: 18px; /* УменÑÑеннÑй ÑÐ°Ð·Ð¼ÐµÑ */ 6198 } 6199 6200 .footer__social-icon img { 6201 height: 18px; 6202 transition: 0.3s; 6203 width: 18px; 6204 } 6205 6206 .footer__social-name { 6207 font-family: "Inter", sans-serif; 6208 font-size: 14px; 6209 font-weight: 500; 6210 color: #7b7b7b; 6211 text-align: left; /* ÐÑÑавнивание по Ð»ÐµÐ²Ð¾Ð¼Ñ ÐºÑÐ°Ñ */ 6212 align-self: flex-start; /* ÐÑижимаем к Ð»ÐµÐ²Ð¾Ð¼Ñ ÐºÑÐ°Ñ */ 6213 margin-top: auto; /* ÐÑижимаем к Ð½Ð¸Ð¶Ð½ÐµÐ¼Ñ ÐºÑÐ°Ñ */ 6214 padding-bottom: 2px; /* ÐеболÑÑой оÑÑÑÑп Ð¾Ñ Ð½Ð¸Ð¶Ð½ÐµÐ³Ð¾ кÑÐ°Ñ */ 6215 line-height: 130%; 6216 letter-spacing: -0.02em; 6217 transition: 0.4s; 6218 } 6219 6220 /* ÐбÑие ÑÑили */ 6221 .footer__title-main { 6222 color: #000000; 6223 } 6224 6225 .footer__title-sub, 6226 .footer__copyright, 6227 .footer__info { 6228 color: #b6b6b6; 6229 } 6230 6231 .footer__info-wrapper { 6232 margin-top: auto; 6233 display: flex; 6234 flex-direction: column; 6235 } 6236 6237 .footer__links { 6238 display: flex; 6239 gap: 20px; 6240 margin-top: 40px; 6241 padding-bottom: 10px; 6242 } 6243 6244 .footer__link { 6245 color: #797979; 6246 font-family: "Caption", sans-serif; 6247 font-size: 12px; 6248 letter-spacing: -0.01em; 6249 text-decoration: none; 6250 } 6251 6252 .footer__link:hover { 6253 text-decoration: underline; 6254 } 6255 6256 .footer__social-name { 6257 font-family: "Inter", sans-serif; 6258 font-size: clamp(12px, 12px + (14 - 12) * (100dvw - 375px) / (1440 - 375), 14px); 6259 font-weight: 500; 6260 color: #969696; 6261 text-align: center; 6262 } 6263 6264 /* ÐÑÐ°Ð²Ð°Ñ ÑекÑÐ¸Ñ */ 6265 .footer__right-section { 6266 display: flex; 6267 flex-direction: column; 6268 height: 100%; 6269 max-width: 100%; 6270 overflow: visible; 6271 } 6272 6273 .footer__bottom-section { 6274 display: flex; 6275 justify-content: space-between; 6276 align-items: flex-start; 6277 gap: 48px; 6278 margin-top: auto; 6279 padding-bottom: 10px; 6280 width: 100%; 6281 } 6282 6283 /* СекÑÐ¸Ñ ÐºÑÑÑов */ 6284 .footer__courses-section { 6285 flex: 0 0 auto; 6286 min-width: 260px; 6287 margin-bottom: 0px; 6288 } 6289 6290 .footer__courses-title, 6291 .footer__contacts-title, 6292 .footer__messengers-title { 6293 font-family: "GNF", sans-serif; 6294 font-weight: 400; 6295 color: #919191; 6296 margin-bottom: 20px; 6297 text-transform: uppercase; 6298 font-size: 16px; 6299 } 6300 6301 .footer__courses-links { 6302 display: flex; 6303 flex-direction: column; 6304 gap: 8px; 6305 margin-bottom: 30px; 6306 } 6307 6308 .footer__course-link, 6309 .footer__additional-link { 6310 color: #797979; 6311 font-family: "Inter", sans-serif; 6312 font-size: 16px; 6313 font-weight: 400; 6314 letter-spacing: -0.02em; 6315 text-decoration: none; 6316 white-space: nowrap; 6317 }
6318 .footer__course-link + .footer__course-link, 6319 .footer__course-link + .footer__additional-link, 6320 .footer__additional-link + .footer__course-link, 6321 .footer__additional-link + .footer__additional-link { 6322 margin-block-start: 2px; 6323 } 6324 6325 .footer__additional-links { 6326 display: flex; 6327 flex-direction: column; 6328 gap: 8px; 6329 } 6330 6331 .footer__course-link:hover, 6332 .footer__additional-link:hover { 6333 text-decoration: underline; 6334 } 6335 6336 /* ÐонÑакÑÑ Ð¸ меÑÑенджеÑÑ */ 6337 .footer__contacts-messengers-wrapper { 6338 display: flex; 6339 flex-direction: column; 6340 flex: 1 1 auto; 6341 min-width: 0; 6342 margin-left: 0px; 6343 } 6344 6345 .footer__contacts-section { 6346 margin-bottom: 30px; 6347 } 6348 6349 .footer__contact-item { 6350 color: #797979; 6351 cursor: pointer; 6352 font-family: "Inter", sans-serif; 6353 font-size: 15px; 6354 letter-spacing: -0.02em; 6355 margin-bottom: 8px; 6356 transition: color 0.2s; 6357 user-select: text; 6358 } 6359 6360 .footer__phone-block { 6361 margin-bottom: 12px; 6362 } 6363 6364 .footer__phone-block:last-child { 6365 margin-bottom: 0; 6366 } 6367 6368 .footer__contact-phone { 6369 color: #797979; 6370 cursor: pointer; 6371 font-family: "Inter", sans-serif; 6372 font-size: 15px; 6373 letter-spacing: -0.02em; 6374 text-decoration: none; 6375 transition: color 0.2s; 6376 user-select: text; 6377 } 6378 6379 .footer__contact-phone:hover { 6380 text-decoration: underline; 6381 } 6382 6383 .footer__contact-label { 6384 color: #797979; 6385 display: inline-block; 6386 font-family: "Inter", sans-serif; 6387 font-size: 13px; 6388 letter-spacing: -0.02em; 6389 margin-bottom: 2px; 6390 opacity: 0.85; 6391 user-select: text; 6392 } 6393 6394 .footer__contact-item:hover { 6395 text-decoration: underline; 6396 } 6397 6398 .footer__messengers-buttons { 6399 display: flex; 6400 gap: 10px; 6401 } 6402 6403 .footer__messenger-button { 6404 background-color: #f7f7f7; 6405 border-radius: 100px; 6406 border: none; 6407 box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.0509803922); 6408 color: #7b7b7b; 6409 cursor: pointer; 6410 font-family: "Inter", sans-serif; 6411 font-size: 14px; 6412 font-weight: 500; 6413 letter-spacing: -0.02em; 6414 padding: 8px 16px; 6415 transition: 0.25s; 6416 white-space: nowrap; 6417 } 6418 .footer__messenger-button:hover { 6419 background-color: #cfff32; 6420 color: black; 6421 } 6422 6423 /* ÐдапÑаÑÐ¸Ñ Ð´Ð»Ñ Ð¿Ð»Ð°Ð½ÑеÑов (1920px - 768px) */ 6424 @media (max-width: 1440px) { 6425 .footer { 6426 height: 480px; 6427 } 6428 .footer__container { 6429 padding: 20px; 6430 } 6431 .footer__logo { 6432 width: 55px; 6433 height: 55px; 6434 margin-bottom: 90px; 6435 } 6436 .footer__title { 6437 font-size: 18px; 6438 margin-bottom: 25px; 6439 } 6440 /* ÐаÑиÑаем минималÑное ÑаÑÑÑоÑние Ð¼ÐµÐ¶Ð´Ñ ÐºÑÑÑами и лого */ 6441 .footer__bottom-section { 6442 width: calc(100% - 70px - 10px); /* 70px - ÑиÑина ÑоÑ.ÑекÑии + 10px оÑÑÑÑп */ 6443 margin-left: auto; 6444 } 6445 } 6446 @media (max-width: 1200px) { 6447 .footer { 6448 height: 450px; 6449 } 6450 .footer__logo { 6451 margin-bottom: 70px; 6452 } 6453 .footer__title { 6454 font-size: 17px; 6455 } 6456 /* ФикÑиÑованнÑе ÑазмеÑÑ Ð´Ð»Ñ ÑоÑ.ÑекÑии */ 6457 .footer__social-section { 6458 /*width: 570px !important;*/ 6459 /*height: 100px !important;*/ 6460 flex-shrink: 0; /* ÐапÑеÑаем ÑменÑÑение */ 6461 } 6462 } 6463 @media (max-width: 992px) { 6464 .footer__container { 6465 border-radius: 25px; 6466 } 6467 .footer__logo { 6468 width: 50px; 6469 height: 30px; 6470 margin-bottom: 60px; 6471 } 6472 .footer__title { 6473 font-size: 16px; 6474 margin-bottom: 20px; 6475 } 6476 /* Ð¡Ð¾Ñ ÑанÑем жеÑÑкие ÑазмеÑÑ */ 6477 .footer__social-section { 6478 /* 6479 width: 570px !important; 6480 height: 100px !important; 6481 */ 6482 } 6483 /* УвелиÑиваем оÑÑÑÑп Ð¼ÐµÐ¶Ð´Ñ Ð»Ð¾Ð³Ð¾ и конÑенÑом */
6484 .footer__container { 6485 gap: 20px; 6486 } 6487 } 6488 @media (max-width: 768px) { 6489 .footer { 6490 height: auto; 6491 } 6492 .footer__container { 6493 padding: 20px 15px; 6494 border-radius: 20px 20px 30px 30px; 6495 } 6496 .footer__container { 6497 align-items: flex-start; 6498 flex-direction: column; 6499 } 6500 /* ÐогоÑип и заголовок */ 6501 .footer__logo-section { 6502 display: contents; 6503 flex-direction: column; 6504 align-items: flex-start; 6505 margin-bottom: 30px; 6506 } 6507 .footer__logo { 6508 display: flex; 6509 align-items: center; 6510 background: none; 6511 box-shadow: none; 6512 width: auto; 6513 /*height: auto;*/ 6514 margin-bottom: 0px; 6515 } 6516 .footer__logo::before { 6517 display: none; 6518 } 6519 .footer__logo img { 6520 margin-right: 10px; 6521 } 6522 .footer__logo::after { 6523 content: "Yudaev School"; 6524 font-family: "Loos Extended", sans-serif; 6525 font-size: 13px; 6526 font-weight: 500; 6527 color: #000000; 6528 } 6529 .footer__title { 6530 font-size: 16px; 6531 line-height: 0.5; 6532 margin-bottom: 30px; 6533 text-align: left; 6534 } 6535 .footer__title-main { 6536 display: block; 6537 } 6538 .footer__title-sub { 6539 display: block; 6540 font-size: 16px; 6541 color: #797979; 6542 margin-bottom: 5px; 6543 line-height: 120%; 6544 } 6545 .footer__copyright { 6546 display: block; 6547 font-size: 16px; 6548 color: #b6b6b6; 6549 } 6550 /* СекÑии (ÐÑÑÑÑ, ÐонÑакÑÑ, ÐеÑÑенджеÑÑ) */ 6551 .footer__right-section { 6552 width: 100%; 6553 } 6554 .footer__social-section { 6555 display: none; /* СкÑÑваем деÑкÑопнÑÑ Ð²ÐµÑÑÐ¸Ñ */ 6556 } 6557 .footer__bottom-section { 6558 width: 100%; 6559 flex-direction: column; 6560 align-items: flex-start; 6561 margin-top: 0; 6562 } 6563 .footer__courses-section, 6564 .footer__contacts-section, 6565 .footer__messengers-section { 6566 width: 100%; 6567 min-width: 0; 6568 margin-bottom: 50px; 6569 } 6570 .footer__course-link, 6571 .footer__additional-link { 6572 white-space: normal; 6573 } 6574 .footer__messengers-section { 6575 margin-bottom: 25px; 6576 } 6577 /* СоÑÑеÑи в мобилÑной веÑÑии */ 6578 .footer__mobile-social-title { 6579 font-family: "GNF", sans-serif; 6580 font-weight: 400; 6581 color: #919191; 6582 margin: 30px 0 15px 0; 6583 text-transform: uppercase; 6584 font-size: 16px; 6585 display: block; 6586 } 6587 .footer__mobile-social-grid { 6588 display: grid; 6589 grid-template-columns: repeat(3, 1fr); 6590 gap: 15px; 6591 margin-bottom: 0px; 6592 } 6593 .footer__mobile-social-item { 6594 width: 100%; 6595 aspect-ratio: 1/1; 6596 background-color: white; 6597 border-radius: 15px; 6598 display: flex; 6599 flex-direction: column; 6600 justify-content: space-between; 6601 align-items: flex-start; 6602 padding: 12px; 6603 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 6604 } 6605 /* РазделиÑелÑÐ½Ð°Ñ Ð»Ð¸Ð½Ð¸Ñ */ 6606 .footer__divider { 6607 width: 100%; 6608 height: 1px; 6609 margin: 20px 0; 6610 background: linear-gradient(90deg, rgba(219, 219, 219, 0) 0%, #dbdbdb 50%, rgba(219, 219, 219, 0) 100%); 6611 } 6612 /* Ðижний блок Ñ Ð¸Ð½ÑоÑмаÑией */ 6613 .footer__info-wrapper { 6614 width: 100%; 6615 order: 5; 6616 } 6617 .footer__contacts-section { 6618 margin-bottom: 50px; 6619 } 6620 .footer__info { 6621 font-size: 12px; 6622 line-height: 1.5; 6623 margin-bottom: 15px; 6624 } 6625 .footer__links { 6626 gap: 10px; 6627 } 6628 .footer__contacts-messengers-wrapper { 6629 display: flex; 6630 flex-direction: column; 6631 } 6632 .footer__divider { 6633 width: 100%; 6634 height: 1px; 6635 background: linear-gradient(90deg, rgba(219, 219, 219, 0) 0%, #dbdbdb 50%, rgba(219, 219, 219, 0) 100%); 6636 margin: 30px 0; 6637 } 6638 } 6639 @media (max-width: 768px) { 6640 .footer__mobile-social-section { 6641 margin-top: 0px; 6642 width: 100%; 6643 } 6644 .footer__mobile-social-grid { 6645 display: grid; 6646 grid-template-columns: repeat(3, 1fr); 6647 gap: 10px; 6648 max-width: 100%; 6649 } 6650 .footer__mobile-social-grid a { 6651 aspect-ratio: 1/1; 6652 } 6653 .footer__mobile-social-icon { 6654 width: 32px; 6655 height: 32px; 6656 display: flex; 6657 justify-content: center; 6658 align-items: center; 6659 margin-bottom: 8px; 6660 } 6661 .footer__mobile-social-icon img { 6662 width: 24px; 6663 height: 24px; 6664 } 6665 .footer__mobile-social-name { 6666 align-self: flex-start; 6667 color: #7b7b7b; 6668 font-family: "Inter", sans-serif; 6669 font-size: 10px; 6670 font-weight: 500; 6671 letter-spacing: -0.02em; 6672 text-align: left; 6673 } 6674 /* РазделиÑелÑÐ½Ð°Ñ Ð»Ð¸Ð½Ð¸Ñ */ 6675 .footer__divider { 6676 width: 100%; 6677 height: 1px; 6678 background: linear-gradient(90deg, rgba(219, 219, 219, 0) 0%, #dbdbdb 50%, rgba(219, 219, 219, 0) 100%); 6679 margin: 20px 0; 6680 } 6681 .footer__links { 6682 display: flex; 6683 gap: 20px; 6684 margin-top: 15px; 6685 padding-bottom: 10px; 6686 } 6687 .footer__socials-title { 6688 font-family: "GNF", sans-serif; 6689 font-weight: 400; 6690 color: #919191; 6691 margin-bottom: 15px; 6692 text-transform: uppercase; 6693 font-size: 16px; 6694 } 6695 } 6696 @media (min-width: 769px) { 6697 .footer__mobile-social-section, 6698 .footer__divider { 6699 display: none; 6700 } 6701 } 6702 @media (width <= 768px) { 6703 .footer__social-item { 6704 /*height: 105px; 6705 min-height: 105px; 6706 min-width: 105px; 6707 width: 105px; 6708 */ 6709 height: 100%; 6710 width: 100%; 6711 } 6712 .footer__social-name { 6713 font-size: 14px; 6714 } 6715 } 6716 .a-side-media { 6717 bottom: 0; 6718 left: 50%; 6719 position: absolute; 6720 translate: -100px; 6721 } 6722 6723 .employment-opportunities { 6724 flex: 1; 6725 overflow: hidden; 6726 justify-content: space-between; 6727 background: radial-gradient(50% 50% at 50% 50%, #ffffff 0%, #f2f2f2 100%); 6728 max-height: 650px; 6729 } 6730 .employment-opportunities .img-lines { 6731 position: absolute; 6732 width: 100%; 6733 padding-inline: 20px; 6734 } 6735 .employment-opportunities .card-marker { 6736 margin-bottom: auto; 6737 } 6738 .employment-opportunities__wrapper { 6739 position: relative; 6740 } 6741 .employment-opportunities__wrapper::before { 6742 background: linear-gradient(transparent, color-mix(in srgb, #f5f5f5 60%, transparent)); 6743 content: ""; 6744 height: 100%; 6745 position: absolute; 6746 width: 100%; 6747 } 6748 .employment-opportunities__count { 6749 font-family: "GNF"; 6750 font-style: Regular; 6751 font-weight: 400; 6752 letter-spacing: -0.01em; 6753 line-height: 90%; 6754 text-transform: uppercase; 6755 font-size: 170px; 6756 } 6757 @media (max-width: 1440px) { 6758 .employment-opportunities__count { 6759 font-size: 120px; 6760 } 6761 } 6762 @media (max-width: 1024px) { 6763 .employment-opportunities__count { 6764 font-size: 90px; 6765 } 6766 } 6767 @media (max-width: 375px) { 6768 .employment-opportunities__count { 6769 font-size: 110px; 6770 } 6771 } 6772 .employment-opportunities__disk { 6773 color: rgba(0, 0, 0, 0.4); 6774 font-family: "Inter"; 6775 font-size: clamp(14px, 14px + (18 - 14) * (100dvw - 375px) / (1440 - 375), 18px); 6776 font-weight: 500; 6777 letter-spacing: -0.02em; 6778 line-height: 130%; 6779 padding-top: 40px; 6780 text-wrap: nowrap; 6781 vertical-align: bottom; 6782 position: relative; 6783 } 6784 .employment-opportunities__disk::before { 6785 background: linear-gradient(90deg, transparent, rgba(128, 128, 128, 0.274), transparent); 6786 content: ""; 6787 height: 1px; 6788 position: absolute; 6789 width: 100%; 6790 top: 20px; 6791 } 6792 .employment-opportunities .employment-opportunities__tower { 6793 bottom: -40px; 6794 position: relative; 6795 } 6796 .employment-opportunities__image { 6797 max-width: 100%; 6798 flex: 1; 6799 max-height: 100%; 6800 display: flex; 6801 align-items: center; 6802 position: relative; 6803 justify-content: center; 6804 } 6805 .employment-opportunities__image img { 6806 width: 100%; 6807 height: 100%; 6808 object-fit: contain; 6809 object-position: center; 6810 } 6811 .employment-opportunities__image .tower-card { 6812 position: absolute; 6813 } 6814 .employment-opportunities__sub-count { 6815 font-family: "GNF"; 6816 font-weight: 400; 6817 font-size: 30px; 6818 font-size: 34px; 6819 line-height: 120%; 6820 letter-spacing: -0.01em; 6821 text-transform: uppercase; 6822 } 6823 @media (max-width: 1440px) { 6824 .employment-opportunities__sub-count { 6825 font-size: 28px; 6826 } 6827 } 6828 @media (max-width: 1024px) { 6829 .employment-opportunities__sub-count { 6830 font-size: 22px; 6831 } 6832 } 6833 @media (max-width: 375px) { 6834 .employment-opportunities__sub-count { 6835 font-size: 26px; 6836 } 6837 } 6838 .employment-opportunities__text { 6839 padding: 30px; 6840 align-items: flex-start; 6841 } 6842 6843 .help-with-vacancies { 6844 align-items: flex-start; 6845 background-color: #fafafa; 6846 flex-wrap: wrap; 6847 margin-block-start: clamp(-50px, 0px + (-50 - 0) * (100dvw - 375px) / (1440 - 375), 0px); 6848 padding-bottom: clamp(200px, 200px + (276 - 200) * (100dvw - 375px) / (1440 - 375), 276px); 6849 padding-top: clamp(0px, 100px + (0 - 100) * (100dvw - 375px) / (1440 - 375), 100px); 6850 width: 100%; 6851 } 6852 .help-with-vacancies__card { 6853 border-radius: 40px; 6854 box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.1019607843); 6855 } 6856 .help-with-vacancies__content { 6857 gap: 20px; 6858 width: 100%; 6859 } 6860 @media (max-width: 1023px) { 6861 .help-with-vacancies__content.row { 6862 flex-direction: column; 6863 align-items: center; 6864 } 6865 } 6866 .help-with-vacancies__title { 6867 font-family: "Loos Extended", sans-serif; 6868 font-size: clamp(26px, 26px + (38 - 26) * (100dvw - 375px) / (1440 - 375), 38px); 6869 font-weight: 500; 6870 letter-spacing: -0.01em; 6871 line-height: 115%; 6872 margin-bottom: 80px; 6873 margin-top: 20px; 6874 max-width: 26ch; 6875 } 6876 .help-with-vacancies__title span { 6877 color: color-mix(in srgb, black 25%, transparent); 6878 } 6879 @media (width <= 550px) { 6880 .help-with-vacancies .help-with-vacancies__card { 6881 display: flex; 6882 flex-direction: column !important; 6883 } 6884 } 6885 6886 .join { 6887 background: linear-gradient(180deg, #cfff32 0%, #f2f2f2 78.85%); 6888 align-items: center; 6889 flex: 1; 6890 padding: 30px clamp(30px, 30px + (50 - 30) * (100dvw - 375px) / (1440 - 375), 50px); 6891 position: relative; 6892 } 6893 @media (width <= 1000px) { 6894 .join { 6895 background: url("../assets/images/lines.svg"), linear-gradient(180deg, #cfff32 0%, #f2f2f2 78.85%); 6896 } 6897 } 6898 .join .side-media__img { 6899 pointer-events: none; 6900 } 6901 @media (min-width: 1024px) { 6902 .join { 6903 max-width: 676px; 6904 } 6905 } 6906 @media (max-width: 1023px) { 6907 .join { 6908 width: 100%; 6909 } 6910 } 6911 .join__card { 6912 animation-timing-function: cubic-bezier(0.16, 1.08, 0.4, 1); 6913 } 6914 .join__card:nth-child(1) { 6915 animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); 6916 } 6917 .join__card:nth-child(2) { 6918 animation-timing-function: cubic-bezier(0.4, 0.2, 0.6, 1); 6919 } 6920 .join__card:nth-child(3) { 6921 animation-timing-function: cubic-bezier(0.35, 0.35, 0.7, 1); 6922 } 6923 .join__card:nth-child(4) { 6924 animation-timing-function: cubic-bezier(0.28, 0.45, 0.75, 1); 6925 } 6926 .join__card:nth-child(5) { 6927 animation-timing-function: cubic-bezier(0.16, 1.08, 0.4, 1); 6928 } 6929 .join__cards { 6930 gap: 7px; 6931 margin-block: auto; 6932 padding-block-end: 20px; 6933 position: relative; 6934 width: 100%; 6935 } 6936 .join__cards .img-lines { 6937 position: absolute; 6938 width: 100%; 6939 padding-inline: 20px; 6940 top: -160px; 6941 } 6942 .join__cta.gradient-border { 6943 position: absolute; 6944 bottom: 0; 6945 padding: 5px; 6946 padding-left: 15px; 6947 transform: translateY(50%); 6948 } 6949 .join__cta.gradient-border .side-media__text { 6950 color: rgba(0, 0, 0, 0.8); 6951 } 6952 .join__cta.gradient-border .side-media__img { 6953 height: 32px; 6954 width: 32px; 6955 } 6956 .join__cta.gradient-border .side-media__text { 6957 font-size: 14px; 6958 line-height: 130%; 6959 letter-spacing: -0.02em; 6960 } 6961 .join .card-marker { 6962 background-color: rgba(255, 255, 255, 0.4); 6963 } 6964 .join .card-marker-icon { 6965 background-color: white; 6966 } 6967 .join__title { 6968 font-family: "Loos Extended"; 6969 font-size: 26px; 6970 font-weight: 500; 6971 letter-spacing: -0.01em; 6972 line-height: 115%; 6973 margin-bottom: clamp(30px, 50px + (30 - 50) * (100dvw - 375px) / (1440 - 375), 50px); 6974 margin-top: clamp(15px, 15px + (35 - 15) * (100dvw - 375px) / (1440 - 375), 35px); 6975 text-align: center; 6976 } 6977 6978 .join-card { 6979 align-items: center; 6980 backdrop-filter: blur(55px); 6981 background-color: rgba(255, 255, 255, 0.2); 6982 border-radius: clamp(12px, 12px + (16 - 12) * (100dvw - 375px) / (1440 - 375), 16px); 6983 box-shadow: 0px 8.89px 37.05px 0px rgba(0, 0, 0, 0.1019607843); 6984 justify-content: flex-start;
6985 padding: clamp(5px, 5px + (15 - 5) * (100dvw - 375px) / (1440 - 375), 15px) clamp(15px, 15px + (30 - 15) * (100dvw - 375px) / (1440 - 375), 30px); 6986 position: relative; 6987 width: 100%; 6988 } 6989 .join-card img { 6990 border-radius: 15px; 6991 } 6992 .join-card:nth-child(2) { 6993 z-index: 3; 6994 } 6995 .join-card:nth-child(3) { 6996 scale: 0.9; 6997 z-index: 2; 6998 position: relative; 6999 bottom: 20px; 7000 } 7001 .join-card:nth-child(4) { 7002 position: absolute; 7003 bottom: 8px; 7004 scale: 0.8; 7005 z-index: 1; 7006 } 7007 .join-card:nth-child(5) { 7008 position: absolute; 7009 bottom: -5px; 7010 scale: 0.7; 7011 z-index: 0; 7012 } 7013 .join-card__experience { 7014 color: rgba(0, 0, 0, 0.3019607843); 7015 font-family: "SF Pro Display"; 7016 font-size: clamp(9px, 9px + (14 - 9) * (100dvw - 375px) / (1440 - 375), 14px); 7017 font-weight: 500; 7018 line-height: 135%; 7019 vertical-align: bottom; 7020 } 7021 .join-card__image { 7022 padding-right: 23px; 7023 height: 40px; 7024 } 7025 .join-card__image img { 7026 max-height: 100%; 7027 object-fit: contain; 7028 object-position: center; 7029 height: 100%; 7030 } 7031 .join-card__index { 7032 align-items: center; 7033 aspect-ratio: 1; 7034 backdrop-filter: blur(10px); 7035 border-radius: 50%; 7036 color: rgba(0, 0, 0, 0.4); 7037 display: flex; 7038 font-family: "SF Pro Display"; 7039 font-size: clamp(10px, 10px + (17.78 - 10) * (100dvw - 375px) / (1440 - 375), 17.78px); 7040 font-weight: 500; 7041 justify-content: center; 7042 left: 0; 7043 line-height: 110%; 7044 padding: clamp(7px, 7px + (14 - 7) * (100dvw - 375px) / (1440 - 375), 14px); 7045 position: absolute !important; 7046 translate: -50%; 7047 vertical-align: bottom; 7048 background-color: rgba(255, 255, 255, 0.5019607843); 7049 } 7050 .join-card__name { 7051 font-family: "SF Pro Display"; 7052 font-weight: 500; 7053 font-size: clamp(10px, 10px + (16 - 10) * (100dvw - 375px) / (1440 - 375), 16px); 7054 line-height: 135%; 7055 vertical-align: bottom; 7056 color: rgba(0, 0, 0, 0.5019607843); 7057 } 7058 .join-card__price { 7059 font-family: "GNF", sans-serif; 7060 font-size: clamp(12.88px, 12.88px + (18 - 12.88) * (100dvw - 375px) / (1440 - 375), 18px); 7061 font-weight: 400; 7062 letter-spacing: 0%; 7063 line-height: 135%; 7064 margin-left: auto; 7065 text-align: right; 7066 vertical-align: bottom; 7067 white-space: nowrap; 7068 } 7069 7070 .tower-card { 7071 pointer-events: none; 7072 background: linear-gradient(0deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)); 7073 align-items: flex-start; 7074 font-family: "SF Pro Display"; 7075 backdrop-filter: blur(60px); 7076 box-shadow: 0px 6.55px 26.18px 0px rgba(0, 0, 0, 0.0901960784); 7077 padding: 12.11px; 7078 aspect-ratio: 1; 7079 border-radius: 24px; 7080 } 7081 .tower-card:nth-child(2) { 7082 top: -70px; 7083 right: 80px; 7084 animation-timing-function: cubic-bezier(0.25, 0.1, 0.7, 1.1); 7085 } 7086 .tower-card:nth-child(3) { 7087 bottom: 30%; 7088 right: -50px; 7089 animation-timing-function: cubic-bezier(0.18, 0.5, 0.8, 1); 7090 } 7091 .tower-card:nth-child(4) { 7092 bottom: 10%; 7093 left: 15%; 7094 animation-timing-function: cubic-bezier(0.4, 0, 0.4, 1); 7095 } 7096 .tower-card:nth-child(5) { 7097 top: 40%; 7098 left: 50%; 7099 animation-timing-function: cubic-bezier(0.3, 0.05, 0.5, 1.1); 7100 } 7101 .tower-card:nth-child(6) { 7102 top: 20%; 7103 left: 160px; 7104 animation-timing-function: cubic-bezier(0.36, 0.05, 0.64, 1); 7105 } 7106 .tower-card:nth-child(7) { 7107 top: 70%; 7108 left: 60%; 7109 animation-timing-function: cubic-bezier(0.15, 0.2, 0.75, 0.9); 7110 } 7111 .tower-card:nth-child(8) { 7112 top: -5%; 7113 left: 60%; 7114 animation-timing-function: cubic-bezier(0.15, 0.2, 0.75, 0.9); 7115 } 7116 .tower-card__remove { 7117 background-color: white; 7118 border-radius: 50%; 7119 aspect-ratio: 1; 7120 width: 20px; 7121 height: 20px; 7122 box-shadow: 0px 1.61px 4.04px 0px rgba(0, 0, 0, 0.1019607843); 7123 margin-bottom: 8px; 7124 } 7125 .tower-card__disk { 7126 color: rgba(0, 0, 0, 0.2); 7127 font-weight: 500; 7128 font-size: 10px; 7129 line-height: 150%; 7130 margin-bottom: 6px; 7131 } 7132 .tower-card__name { 7133 color: rgba(0, 0, 0, 0.8); 7134 font-weight: 600; 7135 font-size: 11px; 7136 line-height: 150%; 7137 margin-bottom: 8px; 7138 } 7139 .tower-card__tag { 7140 border-radius: 5px; 7141 box-shadow: 0px 0.81px 4.84px 0px rgba(0, 0, 0, 0.1019607843); 7142 color: rgba(0, 0, 0, 0.5019607843); 7143 font-size: 8.07px; 7144 font-weight: 500; 7145 line-height: 150%; 7146 margin-bottom: auto; 7147 padding: 2px 6px 4px 6px; 7148 background: linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)); 7149 } 7150 .tower-card__cta { 7151 align-items: center; 7152 border-radius: 24px; 7153 box-shadow: 0px 0.81px 4.84px 0px rgba(0, 0, 0, 0.1019607843); 7154 gap: 40px; 7155 justify-content: space-between; 7156 margin-top: auto; 7157 padding: 4px; 7158 width: 100%; 7159 background: linear-gradient(0deg, #ffffff, #ffffff), linear-gradient(0deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03)); 7160 padding-left: 13px; 7161 } 7162 .tower-card__text { 7163 align-items: flex-start; 7164 justify-content: center; 7165 } 7166 .tower-card__zp { 7167 color: rgba(0, 0, 0, 0.2); 7168 font-size: 7.26px; 7169 font-weight: 500; 7170 letter-spacing: 0%; 7171 line-height: 150%; 7172 margin-bottom: 5px; 7173 } 7174 .tower-card__price { 7175 font-size: 10.49px; 7176 font-weight: 600; 7177 line-height: 150%; 7178 white-space: nowrap; 7179 } 7180 .tower-card .green-arrow {
7181 height: 26px; 7182 padding: 5px; 7183 width: 26px; 7184 } 7185 @media (width <= 500px) { 7186 .tower-card { 7187 width: 180px; 7188 height: 180px; 7189 scale: 0.75; 7190 } 7191 .tower-card:nth-child(2) { 7192 top: 31px; 7193 right: 80px; 7194 left: 16px; 7195 } 7196 .tower-card:nth-child(3) { 7197 bottom: 164px; 7198 right: 207px; 7199 } 7200 .tower-card:nth-child(4) { 7201 display: none; 7202 } 7203 .tower-card:nth-child(5) { 7204 top: -10px; 7205 left: 53%; 7206 } 7207 .tower-card:nth-child(6) { 7208 top: 180px; 7209 left: 183px; 7210 } 7211 .tower-card:nth-child(7) { 7212 display: none; 7213 } 7214 .tower-card:nth-child(8) { 7215 top: 10%; 7216 bottom: unset; 7217 left: unset; 7218 } 7219 } 7220 7221 @keyframes rockUpDown { 7222 0%, 100% { 7223 transform: translateY(0); 7224 } 7225 50% { 7226 transform: translateY(-8px); 7227 } 7228 } 7229 #wordstat { 7230 background-color: #FAFAFA; 7231 border-radius: clamp(30px, 30px + (60 - 30) * (100dvw - 375px) / (1440 - 375), 60px); 7232 box-shadow: 0 -10px 50px color-mix(in srgb, black 5%, transparent); 7233 margin-block: -60px; 7234 overflow: hidden; 7235 position: relative; 7236 z-index: 1; 7237 } 7238 #wordstat img { 7239 display: block; 7240 } 7241 #wordstat .section-name { 7242 margin-block-start: clamp(120px, 120px + (150 - 120) * (100dvw - 375px) / (1440 - 375), 150px); 7243 margin-inline: auto; 7244 width: fit-content; 7245 } 7246 #wordstat .p-count { 7247 align-items: center; 7248 background: radial-gradient(#FFFFFF, #E6E6E6); 7249 border-radius: clamp(20px, 20px + (35 - 20) * (100dvw - 375px) / (1440 - 375), 35px); 7250 display: flex; 7251 font-family: "Loos Extended"; 7252 font-size: clamp(34px, 34px + (60 - 34) * (100dvw - 375px) / (1440 - 375), 60px); 7253 font-weight: 500; 7254 gap: clamp(8px, 8px + (16 - 8) * (100dvw - 375px) / (1440 - 375), 16px); 7255 line-height: 110%; 7256 margin-block-end: 20px; 7257 margin-block-start: clamp(-16px, 20px + (-16 - 20) * (100dvw - 375px) / (1440 - 375), 20px); 7258 margin-inline: auto; 7259 padding-inline: clamp(20px, 20px + (50 - 20) * (100dvw - 375px) / (1440 - 375), 50px); 7260 user-select: none; 7261 width: fit-content; 7262 box-shadow: 3px 9px 30px color-mix(in srgb, black 12%, transparent), inset 0px -1px color-mix(in srgb, white 60%, transparent); 7263 padding-block: clamp(10px, 10px + (25 - 10) * (100dvw - 375px) / (1440 - 375), 25px) clamp(10px, 10px + (15 - 10) * (100dvw - 375px) / (1440 - 375), 15px); 7264 } 7265 #wordstat .p-count sup { 7266 font-size: 70%; 7267 translate: -50% -20%; 7268 } 7269 #wordstat .img-separator { 7270 height: clamp(50px, 50px + (92 - 50) * (100dvw - 375px) / (1440 - 375), 92px); 7271 } 7272 #wordstat .p-text { 7273 font-family: "Loos Extended"; 7274 font-size: clamp(26px, 26px + (38 - 26) * (100dvw - 375px) / (1440 - 375), 38px); 7275 font-weight: 500; 7276 letter-spacing: -0.01em; 7277 line-height: 115%; 7278 margin-block-end: clamp(150px, 150px + (250 - 150) * (100dvw - 375px) / (1440 - 375), 250px); 7279 margin-inline: auto; 7280 max-width: calc(100dvw - 30px); 7281 text-align: center; 7282 width: fit-content; 7283 } 7284 #wordstat .p-text span { 7285 color: color-mix(in srgb, black 25%, transparent); 7286 } 7287 #wordstat .div-people { 7288 align-items: center; 7289 backdrop-filter: blur(55px); 7290 background-color: color-mix(in srgb, black 15%, white 10%); 7291 border-radius: 30px; 7292 bottom: clamp(80px, 80px + (100 - 80) * (100dvw - 375px) / (1440 - 375), 100px); 7293 box-shadow: 0 6px 15px color-mix(in srgb, black 18%, transparent); 7294 display: flex; 7295 left: 50%; 7296 padding-block: 5px; 7297 padding-inline: 40px 5px; 7298 position: absolute; 7299 translate: -50%; 7300 z-index: 3; 7301 box-shadow: 0 6px 15px color-mix(in srgb, black 7%, transparent), inset -1px 1px color-mix(in srgb, white 40%, transparent), inset 1px -1px color-mix(in srgb, white 30%, transparent); 7302 } 7303 #wordstat .p-people { 7304 color: color-mix(in srgb, white 60%, transparent); 7305 display: flex; 7306 font-family: "Loos Extended"; 7307 font-size: 100px; 7308 font-weight: 700; 7309 justify-content: center; 7310 letter-spacing: -0.06em; 7311 line-height: 100%; 7312 margin-inline-end: 25px; 7313 max-height: 85px; 7314 text-shadow: 0 6px 24px color-mix(in srgb, black 11%, transparent); 7315 width: 190px; 7316 } 7317 #wordstat .p-people.--is-large { 7318 font-size: 70px; 7319 } 7320 #wordstat .img-number { 7321 filter: brightness(1.025); 7322 object-fit: scale-down; 7323 width: 160px; 7324 } 7325 #wordstat .p-people-text { 7326 color: color-mix(in srgb, white 80%, transparent); 7327 font-family: "Inter"; 7328 font-size: clamp(14px, 14px + (16 - 14) * (100dvw - 375px) / (1440 - 375), 16px); 7329 font-weight: 500; 7330 letter-spacing: -0.02em; 7331 line-height: 130%; 7332 margin-inline-end: 45px; 7333 max-width: 25ch; 7334 text-wrap: balance; 7335 } 7336 #wordstat .div-timer { 7337 position: relative; 7338 } 7339 #wordstat .p-timer { 7340 align-items: center; 7341 background-color: color-mix(in srgb, white 40%, transparent); 7342 border-radius: 100px; 7343 color: color-mix(in srgb, black 40%, transparent); 7344 display: flex; 7345 font-family: "Inter"; 7346 font-size: 15px; 7347 font-weight: 600; 7348 gap: 10px; 7349 left: 50%; 7350 letter-spacing: -0.02em; 7351 line-height: 135%; 7352 padding-block: 3px; 7353 padding-inline: 3px 12px; 7354 position: absolute; 7355 top: 10px; 7356 translate: -50%; 7357 box-shadow: 0px 2px 10px color-mix(in srgb, black 5%, transparent), inset 0px 0px 1px 1px color-mix(in srgb, white 50%, transparent); 7358 } 7359 #wordstat .img-background { 7360 height: 100%; 7361 position: absolute; 7362 z-index: -1; 7363 top: 0; 7364 } 7365 #wordstat .img-background:nth-of-type(1) { 7366 left: 0; 7367 } 7368 #wordstat .img-background:nth-of-type(2) { 7369 right: 0; 7370 scale: -1 1; 7371 } 7372 #wordstat .div-pillars { 7373 margin-inline: auto; 7374 max-width: 1920px; 7375 position: relative; 7376 width: calc(100% - clamp(0px, 0px + (100 - 0) * (100dvw - 375px) / (1440 - 375), 100px)); 7377 } 7378 #wordstat .img-pillars { 7379 width: 100%; 7380 } 7381 #wordstat .div-floater { 7382 position: absolute; 7383 transform-origin: center 73%; 7384 translate: -50% -83%; 7385 width: 215px; 7386 } 7387 #wordstat .div-floater:nth-child(1 of #wordstat .div-floater) { 7388 left: 21.5%; 7389 top: 13%; 7390 } 7391 #wordstat .div-floater:nth-child(2 of #wordstat .div-floater) { 7392 left: 40.6%; 7393 top: 6.6%; 7394 } 7395 #wordstat .div-floater:nth-child(3 of #wordstat .div-floater) { 7396 left: 59.2%; 7397 top: 6.6%; 7398 } 7399 #wordstat .div-floater:nth-child(4 of #wordstat .div-floater) { 7400 left: 78.5%; 7401 top: 13.1%; 7402 } 7403 #wordstat .div-floater:nth-child(5 of #wordstat .div-floater) { 7404 left: 9%; 7405 top: 41.2%; 7406 } 7407 #wordstat .div-floater:nth-child(6 of #wordstat .div-floater) { 7408 left: 36.4%; 7409 top: 33.4%; 7410 } 7411 #wordstat .div-floater:nth-child(7 of #wordstat .div-floater) { 7412 left: 64%; 7413 top: 33.4%; 7414 } 7415 #wordstat .div-floater:nth-child(8 of #wordstat .div-floater) { 7416 left: 91%; 7417 top: 41.2%; 7418 } 7419 #wordstat .div-floater-inner { 7420 backdrop-filter: blur(15px); 7421 background-color: color-mix(in srgb, #E3E3E3 60%, transparent); 7422 border-radius: 20px; 7423 padding: 40px 20px 20px 20px; 7424 box-shadow: 0 24px 55px color-mix(in srgb, black 18%, transparent), inset 0 1px 1px color-mix(in srgb, white 50%, transparent); 7425 } 7426 #wordstat .p-floater-title { 7427 backdrop-filter: blur(15px); 7428 background-color: color-mix(in srgb, white 40%, transparent); 7429 border-radius: 20px; 7430 color: color-mix(in srgb, black 40%, transparent); 7431 font-family: "Inter"; 7432 font-size: 15px; 7433 font-weight: 600; 7434 left: 20px; 7435 letter-spacing: -0.04em; 7436 line-height: 135%; 7437 padding: 4px 12px 4px 12px; 7438 position: absolute; 7439 translate: 0 -50%; 7440 width: max-content; 7441 z-index: 1; 7442 box-shadow: 0px 6px 15px color-mix(in srgb, black 7%, transparent), inset 0px 0px 1px 1px color-mix(in srgb, white 50%, transparent); 7443 } 7444 #wordstat .p-floater { 7445 color: color-mix(in srgb, black 50%, transparent); 7446 font-family: "GNF"; 7447 font-size: 30px; 7448 margin-block-end: 10px; 7449 } 7450 #wordstat .div-floater:nth-child(1 of #wordstat .div-floater) .p-floater-title, #wordstat .div-floater:nth-child(1 of #wordstat .div-floater) .div-floater-inner { 7451 animation-delay: 0.25s; 7452 } 7453 #wordstat .div-floater:nth-child(2 of #wordstat .div-floater) .p-floater-title, #wordstat .div-floater:nth-child(2 of #wordstat .div-floater) .div-floater-inner { 7454 animation-delay: 0.5s; 7455 } 7456 #wordstat .div-floater:nth-child(3 of #wordstat .div-floater) .p-floater-title, #wordstat .div-floater:nth-child(3 of #wordstat .div-floater) .div-floater-inner { 7457 animation-delay: 0.75s; 7458 } 7459 #wordstat .div-floater:nth-child(4 of #wordstat .div-floater) .p-floater-title, #wordstat .div-floater:nth-child(4 of #wordstat .div-floater) .div-floater-inner { 7460 animation-delay: 1s; 7461 } 7462 #wordstat .div-floater:nth-child(5 of #wordstat .div-floater) .p-floater-title, #wordstat .div-floater:nth-child(5 of #wordstat .div-floater) .div-floater-inner { 7463 animation-delay: 1.25s; 7464 } 7465 #wordstat .div-floater:nth-child(6 of #wordstat .div-floater) .p-floater-title, #wordstat .div-floater:nth-child(6 of #wordstat .div-floater) .div-floater-inner { 7466 animation-delay: 1.5s; 7467 } 7468 #wordstat .div-floater:nth-child(7 of #wordstat .div-floater) .p-floater-title, #wordstat .div-floater:nth-child(7 of #wordstat .div-floater) .div-floater-inner { 7469 animation-delay: 1.75s; 7470 } 7471 #wordstat .div-floater:nth-child(8 of #wordstat .div-floater) .p-floater-title, #wordstat .div-floater:nth-child(8 of #wordstat .div-floater) .div-floater-inner { 7472 animation-delay: 2s; 7473 } 7474 #wordstat .div-progress { 7475 --progress: 0.1; 7476 align-items: center; 7477 display: flex; 7478 gap: 4px; 7479 } 7480 #wordstat .div-progress div { 7481 border-radius: 5px; 7482 box-shadow: 0px 8px 25px color-mix(in srgb, black 20%, transparent);
7483 height: 26px; 7484 transition-delay: 1s; 7485 transition: 2s; 7486 } 7487 #wordstat .div-progress div:nth-child(1) { 7488 background: linear-gradient(90deg, white, #CFFF32); 7489 flex-basis: calc(var(--progress) * 100%); 7490 flex-grow: 1; 7491 min-width: 0; 7492 } 7493 #wordstat .div-progress div:nth-child(2) { 7494 background-color: #CFFF32; 7495 width: 4px; 7496 height: 30px; 7497 z-index: 1; 7498 } 7499 #wordstat .div-progress div:nth-child(3) { 7500 flex-basis: calc((1 - var(--progress)) * 100%); 7501 flex-grow: 1; 7502 min-width: 0; 7503 } 7504 #wordstat .div-gradient-blur { 7505 position: absolute; 7506 z-index: 1; 7507 inset: auto 0 0 0; 7508 height: 500px; 7509 pointer-events: none; 7510 } 7511 #wordstat .div-gradient-blur div, #wordstat .div-gradient-blur::before, #wordstat .div-gradient-blur::after { 7512 position: absolute; 7513 inset: 0; 7514 } 7515 #wordstat .div-gradient-blur::before { 7516 content: ""; 7517 z-index: 1; 7518 backdrop-filter: blur(0.5px); 7519 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 37.5%); 7520 } 7521 #wordstat .div-gradient-blur div:nth-of-type(1) { 7522 z-index: 2; 7523 backdrop-filter: blur(1px); 7524 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgba(0, 0, 0, 0) 50%); 7525 } 7526 #wordstat .div-gradient-blur div:nth-of-type(2) { 7527 z-index: 3; 7528 backdrop-filter: blur(2px); 7529 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 62.5%); 7530 } 7531 #wordstat .div-gradient-blur div:nth-of-type(3) { 7532 z-index: 4; 7533 backdrop-filter: blur(4px); 7534 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgba(0, 0, 0, 0) 75%); 7535 } 7536 #wordstat .div-gradient-blur div:nth-of-type(4) { 7537 z-index: 5; 7538 backdrop-filter: blur(8px); 7539 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 87.5%); 7540 } 7541 #wordstat .div-gradient-blur div:nth-of-type(5) { 7542 z-index: 6; 7543 backdrop-filter: blur(16px); 7544 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%); 7545 } 7546 #wordstat .div-gradient-blur div:nth-of-type(6) { 7547 z-index: 7; 7548 backdrop-filter: blur(32px); 7549 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgb(0, 0, 0) 100%); 7550 } 7551 #wordstat .div-gradient-blur::after { 7552 content: ""; 7553 z-index: 8; 7554 backdrop-filter: blur(64px); 7555 mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 87.5%, rgb(0, 0, 0) 100%); 7556 } 7557 #wordstat .div-gradient { 7558 background: linear-gradient(transparent, color-mix(in srgb, transparent, black 30%)); 7559 bottom: 0; 7560 height: 250px; 7561 pointer-events: none; 7562 position: absolute; 7563 width: 100%; 7564 z-index: 2; 7565 } 7566 @media (width <= 1600px) { 7567 #wordstat .div-floater { 7568 scale: 0.9; 7569 } 7570 } 7571 @media (width <= 1400px) { 7572 #wordstat .div-floater { 7573 scale: 0.8; 7574 } 7575 } 7576 @media (width <= 1200px) { 7577 #wordstat .div-floater { 7578 scale: 0.7; 7579 } 7580 } 7581 @media (width <= 1000px) { 7582 #wordstat .div-floater { 7583 scale: 0.6; 7584 } 7585 } 7586 @media (width <= 800px) { 7587 #wordstat .div-floater { 7588 scale: 0.5; 7589 } 7590 } 7591 @media (width <= 700px) { 7592 #wordstat .div-pillars { 7593 width: calc(100% + clamp(0px, 300px + (0 - 300) * (100dvw - 375px) / (700 - 375), 300px)); 7594 margin-inline-start: clamp(-150px, -150px + (0 - -150) * (100dvw - 375px) / (700 - 375), 0px); 7595 } 7596 #wordstat .img-background { 7597 display: none; 7598 } 7599 } 7600 @media (width <= 600px) { 7601 #wordstat { 7602 background: linear-gradient(#FAFAFA calc(100% - 320px), #d5d5d5); 7603 padding-block-end: 300px; 7604 } 7605 #wordstat .div-people { 7606 flex-direction: column; 7607 padding: 25px 10px 10px 10px; 7608 } 7609 #wordstat .p-people { 7610 margin: 0; 7611 } 7612 #wordstat .p-people-text { 7613 color: color-mix(in srgb, white 70%, transparent); 7614 margin-block-end: 20px; 7615 margin-inline: 0; 7616 text-align: center; 7617 } 7618 #wordstat .div-gradient { 7619 opacity: 0.4; 7620 height: 500px; 7621 } 7622 #wordstat .div-gradient-blur { 7623 height: 600px; 7624 } 7625 } 7626 @media (width <= 550px) { 7627 #wordstat .p-text { 7628 text-wrap: balance; 7629 } 7630 #wordstat .p-text br { 7631 display: none; 7632 } 7633 } 7634 7635 :root { 7636 --font-family: "Inter", sans-serif; 7637 --second-family: "SF Pro Display", sans-serif; 7638 --third-family: "GNF", sans-serif; 7639 --font3: "Loos Extended", sans-serif; 7640 } 7641 7642 a { 7643 cursor: pointer; 7644 text-decoration: none; 7645 } 7646 7647 button { 7648 border: none; 7649 } 7650 7651 .null { 7652 display: none !important; 7653 } 7654 7655 * { 7656 font-synthesis: none !important; 7657 } 7658 7659 @keyframes float { 7660 0%, 100% { 7661 transform: translate(0, 0); 7662 } 7663 25% { 7664 transform: translate(0, -5%); 7665 } 7666 50% { 7667 transform: translate(0, 0%); 7668 } 7669 75% { 7670 transform: translate(0, 5%); 7671 } 7672 }
7673 @keyframes float-alt { 7674 0%, 100% { 7675 transform: translate(0, 1%); 7676 } 7677 50% { 7678 transform: translate(0, 6%); 7679 } 7680 100% { 7681 transform: translate(0, 1%); 7682 } 7683 } 7684 @keyframes parallax { 7685 from { 7686 transform: translateY(-5px) rotate(90deg); 7687 rotate: 90deg; 7688 } 7689 to { 7690 transform: translateY(5px) rotate(-45deg); 7691 } 7692 } 7693 .fon { 7694 position: absolute; 7695 top: 0; 7696 left: 0; 7697 right: 0; 7698 opacity: 0.6; 7699 pointer-events: none; 7700 } 7701 .fon img { 7702 width: 100%; 7703 object-position: center; 7704 } 7705 7706 /* СÑили Ð´Ð»Ñ ÐºÐ½Ð¾Ð¿ÐºÐ¸ пеÑеклÑÑÐµÐ½Ð¸Ñ */ 7707 .fon-toggle { 7708 position: fixed; 7709 bottom: 20px; 7710 right: 20px; 7711 width: 48px; 7712 height: 48px; 7713 border-radius: 50%; 7714 background: rgba(255, 255, 255, 0.9); 7715 border: 1px solid #ddd; 7716 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 7717 display: flex; 7718 align-items: center; 7719 justify-content: center; 7720 cursor: pointer; 7721 z-index: 1000; 7722 transition: all 0.3s ease; 7723 color: #333; 7724 } 7725 .fon-toggle:hover { 7726 background: white; 7727 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 7728 transform: translateY(-2px); 7729 } 7730 .fon-toggle:active { 7731 transform: translateY(0); 7732 } 7733 .fon-toggle svg { 7734 width: 24px; 7735 height: 24px; 7736 } 7737 7738 /* СоÑÑоÑние когда подложка вÑклÑÑена */ 7739 body:not(.fon-enabled) .fon { 7740 display: none; 7741 } 7742 body:not(.fon-enabled) .fon-toggle { 7743 opacity: 0.6; 7744 } 7745 body:not(.fon-enabled) .fon-toggle svg { 7746 opacity: 0.5; 7747 } 7748 7749 html.lenis { 7750 height: auto; 7751 } 7752 7753 .lenis.lenis-smooth { 7754 scroll-behavior: auto; 7755 } 7756 7757 .lenis.lenis-smooth [data-lenis-prevent] { 7758 overscroll-behavior: contain; 7759 } 7760 7761 .lenis.lenis-stopped { 7762 overflow: hidden; 7763 } 7764 7765 .Parallax { 7766 will-change: transform; 7767 } 7768 7769 .technology-card { 7770 border-radius: 32px; 7771 background: linear-gradient(225deg, rgba(230, 230, 230, 0.5) 0%, rgba(227, 227, 227, 0.5) 100%); 7772 box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.168627451), -2px -2px 10px 0px rgba(255, 255, 255, 0.8980392157) inset, 2px 2px 10px 0px rgba(255, 255, 255, 0.8980392157) inset; 7773 height: 115px; 7774 width: 115px; 7775 backdrop-filter: blur(10px); 7776 display: flex; 7777 aspect-ratio: 1; 7778 align-items: center; 7779 justify-content: center; 7780 } 7781 .technology-card__image { 7782 max-width: 100%; 7783 max-height: 100%; 7784 flex: 1; 7785 border-radius: inherit; 7786 display: flex; 7787 align-items: center; 7788 justify-content: center; 7789 } 7790 .technology-card__image img { 7791 max-width: 100%; 7792 object-position: center; 7793 object-fit: contain; 7794 max-height: 100%; 7795 } 7796 .technology-card_wb { 7797 left: 32%; 7798 top: 25%; 7799 rotate: -19deg; 7800 } 7801 .technology-card_wb div { 7802 padding-inline: 25px; 7803 padding-block: 37px; 7804 } 7805 .technology-card_wb img { 7806 rotate: 19deg; 7807 } 7808 .technology-card_ozon { 7809 left: 84%; 7810 top: 28%; 7811 rotate: 17.12deg; 7812 } 7813 .technology-card_ozon div { 7814 padding: 48.5px 17px; 7815 } 7816 .technology-card_ozon img { 7817 rotate: -17.12deg; 7818 } 7819 7820 .row { 7821 display: flex; 7822 flex-direction: row; 7823 } 7824 7825 .column { 7826 display: flex; 7827 flex-direction: column; 7828 } 7829 7830 .section-title { 7831 font-family: "Inter"; 7832 font-weight: 500; 7833 color: #000000; 7834 line-height: 73%; 7835 transform: scaleY(0.7); 7836 letter-spacing: 0.4px; 7837 font-size: 54px; 7838 } 7839 @media (max-width: 1440px) { 7840 .section-title { 7841 font-size: 34px; 7842 } 7843 } 7844 @media (max-width: 1024px) { 7845 .section-title { 7846 font-size: 34px; 7847 } 7848 } 7849 @media (max-width: 375px) { 7850 .section-title { 7851 font-size: 26px; 7852 } 7853 } 7854 .section-title b { 7855 color: rgba(0, 0, 0, 0.2509803922); 7856 } 7857 .section-title br { 7858 display: block; 7859 content: ""; 7860 padding-top: 17px; 7861 } 7862 .section-title p { 7863 letter-spacing: -0.01em; 7864 } 7865 7866 @media (max-width: 1399px) { 7867 .pc { 7868 display: none !important; 7869 } 7870 } 7871 7872 @media (min-width: 500px) { 7873 .mobile { 7874 display: none !important; 7875 } 7876 } 7877 7878 @media (min-width: 1400px) { 7879 .tablet { 7880 display: none !important; 7881 } 7882 } 7883 @media (max-width: 500px) { 7884 .tablet { 7885 display: none !important; 7886 } 7887 } 7888 7889 .side-media { 7890 align-items: center; 7891 background-color: #f2f2f2; 7892 border-radius: 40px; 7893 box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.0509803922); 7894 color: rgba(0, 0, 0, 0.4); 7895 justify-content: flex-start; 7896 padding: 3px; 7897 transition: 0.3s; 7898 } 7899 .side-media__img { 7900 height: 20px; 7901 padding-right: 1px; 7902 transition: 0.3s;
7903 width: 20px; 7904 } 7905 .side-media__svg { 7906 align-items: center; 7907 aspect-ratio: 1; 7908 border-radius: 50%; 7909 display: flex; 7910 height: 32px; 7911 justify-content: center; 7912 transition: 0.3s; 7913 width: 32px; 7914 } 7915 .side-media__text { 7916 color: inherit; 7917 font-family: "Inter", sans-serif; 7918 font-size: clamp(13px, 13px + (15 - 13) * (100dvw - 375px) / (1440 - 375), 15px); 7919 font-weight: 600; 7920 letter-spacing: -0.01em; 7921 padding-inline: 9px; 7922 text-decoration: none; 7923 white-space: nowrap; 7924 } 7925 .side-media:hover { 7926 background-color: #cfff32; 7927 } 7928 .side-media:hover .side-media__img { 7929 background-color: black; 7930 } 7931 .side-media:hover .green-arrow img { 7932 filter: invert(1); 7933 } 7934 .side-media:hover .side-media__svg { 7935 filter: brightness(1); 7936 } 7937 7938 .gradient-border { 7939 position: relative; 7940 } 7941 .gradient-border::before { 7942 background-image: conic-gradient(from -18.65deg at 50% 50%, rgba(255, 255, 255, 0.3) 0deg, rgba(255, 255, 255, 0.8) 90deg, rgba(255, 255, 255, 0.3) 181.58deg, rgba(255, 255, 255, 0.8) 270deg, rgba(255, 255, 255, 0.3) 360deg); 7943 border-radius: inherit; 7944 content: ""; 7945 inset: 0; 7946 padding: 1px; 7947 pointer-events: none; 7948 position: absolute; 7949 mask: conic-gradient(#000 0 0) content-box exclude, conic-gradient(#000 0 0); 7950 } 7951 7952 .cta { 7953 display: flex; 7954 align-items: center; 7955 justify-content: center; 7956 border-radius: inherit; 7957 color: inherit; 7958 gap: 15px; 7959 padding: 5px; 7960 padding-left: 25px; 7961 } 7962 .cta__text { 7963 font-family: "Inter"; 7964 font-weight: 500; 7965 font-size: 16px; 7966 color: inherit; 7967 } 7968 7969 :root { 7970 --horizontal-padding: 2%; /* Ðожно менÑÑÑ Ð·Ð´ÐµÑÑ â или пеÑеопÑеделÑÑÑ Ð´Ð¸Ð½Ð°Ð¼Ð¸ÑеÑки */ 7971 } 7972 7973 .container { 7974 width: 100%; 7975 margin-inline: auto; 7976 padding-inline: var(--horizontal-padding); 7977 } 7978 @media (max-width: 1920px) { 7979 .container { 7980 --horizontal-padding: clamp(20px, 2%, 30px); 7981 } 7982 } 7983 @media (max-width: 1440px) { 7984 .container { 7985 --horizontal-padding: clamp(20px, 2%, 21px); 7986 } 7987 } 7988 @media (max-width: 1024px) { 7989 .container { 7990 --horizontal-padding: clamp(20px, 2.5%, 22px); 7991 } 7992 } 7993 @media (max-width: 375px) { 7994 .container { 7995 --horizontal-padding: 20px; 7996 } 7997 } 7998 7999 .main { 8000 position: relative; 8001 z-index: 1; 8002 border-radius: 60px; 8003 border-bottom-left-radius: 0; 8004 border-bottom-right-radius: 0; 8005 background-color: white; 8006 } 8007 8008 .section_wrapper { 8009 height: 125vh; 8010 position: relative; 8011 overflow: visible; 8012 } 8013 8014 .center { 8015 position: fixed; 8016 width: 20px; 8017 height: 20px; 8018 top: 50%; 8019 left: 50%; 8020 transform: translate(-50%, -50%); 8021 z-index: 30; 8022 background-color: #a03f3f; 8023 } 8024 8025 .background-blur { 8026 position: fixed; 8027 inset: 0; 8028 backdrop-filter: blur(30px); 8029 opacity: 0; 8030 transition: all 0.3s linear; 8031 pointer-events: none; 8032 z-index: 10; 8033 background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.9) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)); 8034 } 8035 .background-blur.active { 8036 opacity: 1; 8037 } 8038 8039 .after-footer { 8040 background-color: #fafafa; 8041 padding-block: 60px 30px; 8042 position: relative; 8043 transition: 3s; 8044 } 8045 .after-footer__text { 8046 display: flex; 8047 background-color: #cfff32; 8048 border-radius: clamp(15px, 15px + (40 - 15) * (100dvw - 375px) / (1440 - 375), 40px); 8049 } 8050 .after-footer__text img { 8051 max-height: 100%; 8052 max-width: 1920px; 8053 object-fit: contain; 8054 object-position: center; 8055 width: 100%; 8056 margin-inline: auto; 8057 padding: 10px; 8058 } 8059 8060 .go-to-start { 8061 bottom: clamp(15px, 15px + (75 - 15) * (100dvw - 375px) / (1440 - 375), 75px); 8062 left: 50%; 8063 position: absolute; 8064 text-decoration: none; 8065 translate: -50%; 8066 } 8067 .go-to-start .green-arrow {
8068 min-height: 26px; 8069 min-width: 26px; 8070 } 8071 .go-to-start .side-media { 8072 backdrop-filter: blur(15px); 8073 background-color: color-mix(in srgb, white 50%, transparent); 8074 padding-left: 20px; 8075 padding: 5px; 8076 transition: 0.5s; 8077 } 8078 .go-to-start .side-media__text { 8079 font-family: "Inter"; 8080 font-weight: 500; 8081 text-decoration: none; 8082 font-size: 16px; 8083 line-height: 130%; 8084 } 8085 @media (max-width: 1440px) { 8086 .go-to-start .side-media__text { 8087 font-size: 14px; 8088 } 8089 } 8090 @media (max-width: 1024px) { 8091 .go-to-start .side-media__text { 8092 font-size: 14px; 8093 } 8094 } 8095 @media (max-width: 375px) { 8096 .go-to-start .side-media__text { 8097 font-size: 14px; 8098 } 8099 } 8100 .go-to-start:hover .side-media { 8101 background-color: color-mix(in srgb, white 80%, transparent); 8102 } 8103 8104 .checkpoint { 8105 box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1019607843); 8106 backdrop-filter: blur(10px); 8107 border: 1.5px solid; 8108 border-image-source: conic-gradient(from -18.65deg at 50% 50%, rgba(255, 255, 255, 0.2) 0deg, rgba(255, 255, 255, 0.6) 90deg, rgba(255, 255, 255, 0.2) 181.58deg, rgba(255, 255, 255, 0.6) 270deg, rgba(255, 255, 255, 0.2) 360deg); 8109 }/** 8110 * Swiper 11.2.10 8111 * Most modern mobile touch slider and framework with hardware accelerated transitions 8112 * https://swiperjs.com 8113 * 8114 * Copyright 2014-2025 Vladimir Kharlampidi 8115 * 8116 * Released under the MIT License 8117 * 8118 * Released on: June 28, 2025 8119 */ 8120 8121 /* FONT_START */ 8122 @font-face { 8123 font-family: 'swiper-icons'; 8124 src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA'); 8125 font-weight: 400; 8126 font-style: normal; 8127 } 8128 /* FONT_END */ 8129 :root { 8130 --swiper-theme-color: #007aff; 8131 /* 8132 --swiper-preloader-color: var(--swiper-theme-color); 8133 --swiper-wrapper-transition-timing-function: initial; 8134 */ 8135 } 8136 :host { 8137 position: relative; 8138 display: block; 8139 margin-left: auto; 8140 margin-right: auto; 8141 z-index: 1; 8142 } 8143 .swiper { 8144 margin-left: auto; 8145 margin-right: auto; 8146 position: relative; 8147 overflow: hidden; 8148 list-style: none; 8149 padding: 0; 8150 /* Fix of Webkit flickering */ 8151 z-index: 1; 8152 display: block; 8153 } 8154 .swiper-vertical > .swiper-wrapper { 8155 flex-direction: column; 8156 } 8157 .swiper-wrapper { 8158 position: relative; 8159 width: 100%; 8160 height: 100%; 8161 z-index: 1; 8162 display: flex; 8163 transition-property: transform; 8164 transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); 8165 box-sizing: content-box; 8166 } 8167 .swiper-android .swiper-slide, 8168 .swiper-ios .swiper-slide, 8169 .swiper-wrapper { 8170 transform: translate3d(0px, 0, 0); 8171 } 8172 .swiper-horizontal { 8173 touch-action: pan-y; 8174 } 8175 .swiper-vertical { 8176 touch-action: pan-x; 8177 } 8178 .swiper-slide { 8179 flex-shrink: 0; 8180 width: 100%; 8181 height: 100%; 8182 position: relative; 8183 transition-property: transform; 8184 display: block; 8185 } 8186 .swiper-slide-invisible-blank { 8187 visibility: hidden; 8188 } 8189 /* Auto Height */ 8190 .swiper-autoheight, 8191 .swiper-autoheight .swiper-slide { 8192 height: auto; 8193 } 8194 .swiper-autoheight .swiper-wrapper { 8195 align-items: flex-start; 8196 transition-property: transform, height; 8197 } 8198 .swiper-backface-hidden .swiper-slide { 8199 transform: translateZ(0); 8200 -webkit-backface-visibility: hidden; 8201 backface-visibility: hidden; 8202 } 8203 /* 3D Effects */ 8204 .swiper-3d.swiper-css-mode .swiper-wrapper { 8205 perspective: 1200px; 8206 } 8207 .swiper-3d .swiper-wrapper { 8208 transform-style: preserve-3d; 8209 } 8210 .swiper-3d { 8211 perspective: 1200px; 8212 } 8213 .swiper-3d .swiper-slide, 8214 .swiper-3d .swiper-cube-shadow { 8215 transform-style: preserve-3d; 8216 } 8217 /* CSS Mode */ 8218 .swiper-css-mode > .swiper-wrapper { 8219 overflow: auto; 8220 scrollbar-width: none; 8221 /* For Firefox */ 8222 -ms-overflow-style: none; 8223 /* For Internet Explorer and Edge */ 8224 } 8225 .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
8226 display: none; 8227 } 8228 .swiper-css-mode > .swiper-wrapper > .swiper-slide { 8229 scroll-snap-align: start start; 8230 } 8231 .swiper-css-mode.swiper-horizontal > .swiper-wrapper { 8232 scroll-snap-type: x mandatory; 8233 } 8234 .swiper-css-mode.swiper-vertical > .swiper-wrapper { 8235 scroll-snap-type: y mandatory; 8236 } 8237 .swiper-css-mode.swiper-free-mode > .swiper-wrapper { 8238 scroll-snap-type: none; 8239 } 8240 .swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide { 8241 scroll-snap-align: none; 8242 } 8243 .swiper-css-mode.swiper-centered > .swiper-wrapper::before { 8244 content: ''; 8245 flex-shrink: 0; 8246 order: 9999; 8247 } 8248 .swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide { 8249 scroll-snap-align: center center; 8250 scroll-snap-stop: always; 8251 } 8252 .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { 8253 margin-inline-start: var(--swiper-centered-offset-before); 8254 } 8255 .swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before { 8256 height: 100%; 8257 min-height: 1px; 8258 width: var(--swiper-centered-offset-after); 8259 } 8260 .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { 8261 margin-block-start: var(--swiper-centered-offset-before); 8262 } 8263 .swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before { 8264 width: 100%; 8265 min-width: 1px; 8266 height: var(--swiper-centered-offset-after); 8267 } 8268 /* Slide styles start */ 8269 /* 3D Shadows */ 8270 .swiper-3d .swiper-slide-shadow, 8271 .swiper-3d .swiper-slide-shadow-left, 8272 .swiper-3d .swiper-slide-shadow-right, 8273 .swiper-3d .swiper-slide-shadow-top, 8274 .swiper-3d .swiper-slide-shadow-bottom, 8275 .swiper-3d .swiper-slide-shadow, 8276 .swiper-3d .swiper-slide-shadow-left, 8277 .swiper-3d .swiper-slide-shadow-right, 8278 .swiper-3d .swiper-slide-shadow-top, 8279 .swiper-3d .swiper-slide-shadow-bottom { 8280 position: absolute; 8281 left: 0; 8282 top: 0; 8283 width: 100%; 8284 height: 100%; 8285 pointer-events: none; 8286 z-index: 10; 8287 } 8288 .swiper-3d .swiper-slide-shadow { 8289 background: rgba(0, 0, 0, 0.15); 8290 } 8291 .swiper-3d .swiper-slide-shadow-left { 8292 background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 8293 } 8294 .swiper-3d .swiper-slide-shadow-right { 8295 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 8296 } 8297 .swiper-3d .swiper-slide-shadow-top { 8298 background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 8299 } 8300 .swiper-3d .swiper-slide-shadow-bottom { 8301 background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); 8302 } 8303 .swiper-lazy-preloader { 8304 width: 42px; 8305 height: 42px; 8306 position: absolute; 8307 left: 50%; 8308 top: 50%; 8309 margin-left: -21px; 8310 margin-top: -21px; 8311 z-index: 10; 8312 transform-origin: 50%; 8313 box-sizing: border-box; 8314 border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); 8315 border-radius: 50%; 8316 border-top-color: transparent; 8317 } 8318 .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader, 8319 .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader { 8320 animation: swiper-preloader-spin 1s infinite linear; 8321 } 8322 .swiper-lazy-preloader-white { 8323 --swiper-preloader-color: #fff; 8324 } 8325 .swiper-lazy-preloader-black { 8326 --swiper-preloader-color: #000; 8327 } 8328 @keyframes swiper-preloader-spin { 8329 0% { 8330 transform: rotate(0deg); 8331 } 8332 100% { 8333 transform: rotate(360deg); 8334 } 8335 } 8336 /* Slide styles end */ 8337 :root { 8338 /* 8339 --swiper-pagination-color: var(--swiper-theme-color); 8340 --swiper-pagination-left: auto; 8341 --swiper-pagination-right: 8px; 8342 --swiper-pagination-bottom: 8px; 8343 --swiper-pagination-top: auto; 8344 --swiper-pagination-fraction-color: inherit; 8345 --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25); 8346 --swiper-pagination-progressbar-size: 4px; 8347 --swiper-pagination-bullet-size: 8px; 8348 --swiper-pagination-bullet-width: 8px; 8349 --swiper-pagination-bullet-height: 8px; 8350 --swiper-pagination-bullet-border-radius: 50%; 8351 --swiper-pagination-bullet-inactive-color: #000; 8352 --swiper-pagination-bullet-inactive-opacity: 0.2; 8353 --swiper-pagination-bullet-opacity: 1; 8354 --swiper-pagination-bullet-horizontal-gap: 4px; 8355 --swiper-pagination-bullet-vertical-gap: 6px; 8356 */ 8357 } 8358 .swiper-pagination { 8359 position: absolute; 8360 text-align: center; 8361 transition: 300ms opacity; 8362 transform: translate3d(0, 0, 0); 8363 z-index: 10; 8364 } 8365 .swiper-pagination.swiper-pagination-hidden { 8366 opacity: 0; 8367 } 8368 .swiper-pagination-disabled > .swiper-pagination, 8369 .swiper-pagination.swiper-pagination-disabled { 8370 display: none !important; 8371 } 8372 /* Common Styles */ 8373 .swiper-pagination-fraction, 8374 .swiper-pagination-custom, 8375 .swiper-horizontal > .swiper-pagination-bullets, 8376 .swiper-pagination-bullets.swiper-pagination-horizontal { 8377 bottom: var(--swiper-pagination-bottom, 8px); 8378 top: var(--swiper-pagination-top, auto); 8379 left: 0; 8380 width: 100%; 8381 } 8382 /* Bullets */ 8383 .swiper-pagination-bullets-dynamic { 8384 overflow: hidden; 8385 font-size: 0; 8386 } 8387 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { 8388 transform: scale(0.33); 8389 position: relative; 8390 } 8391 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { 8392 transform: scale(1); 8393 } 8394 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { 8395 transform: scale(1); 8396 } 8397 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { 8398 transform: scale(0.66); 8399 } 8400 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { 8401 transform: scale(0.33); 8402 } 8403 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { 8404 transform: scale(0.66); 8405 } 8406 .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { 8407 transform: scale(0.33); 8408 } 8409 .swiper-pagination-bullet { 8410 width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); 8411 height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); 8412 display: inline-block; 8413 border-radius: var(--swiper-pagination-bullet-border-radius, 50%); 8414 background: var(--swiper-pagination-bullet-inactive-color, #000); 8415 opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); 8416 } 8417 button.swiper-pagination-bullet { 8418 border: none; 8419 margin: 0; 8420 padding: 0; 8421 box-shadow: none; 8422 -webkit-appearance: none; 8423 appearance: none; 8424 } 8425 .swiper-pagination-clickable .swiper-pagination-bullet { 8426 cursor: pointer; 8427 } 8428 .swiper-pagination-bullet:only-child { 8429 display: none !important; 8430 } 8431 .swiper-pagination-bullet-active { 8432 opacity: var(--swiper-pagination-bullet-opacity, 1); 8433 background: var(--swiper-pagination-color, var(--swiper-theme-color)); 8434 } 8435 .swiper-vertical > .swiper-pagination-bullets, 8436 .swiper-pagination-vertical.swiper-pagination-bullets { 8437 right: var(--swiper-pagination-right, 8px); 8438 left: var(--swiper-pagination-left, auto); 8439 top: 50%; 8440 transform: translate3d(0px, -50%, 0); 8441 } 8442 .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet, 8443 .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet { 8444 margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; 8445 display: block; 8446 } 8447 .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, 8448 .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { 8449 top: 50%; 8450 transform: translateY(-50%); 8451 width: 8px; 8452 } 8453 .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, 8454 .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { 8455 display: inline-block; 8456 transition: 200ms transform, 8457 200ms top; 8458 } 8459 .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, 8460 .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { 8461 margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); 8462 } 8463 .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, 8464 .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { 8465 left: 50%; 8466 transform: translateX(-50%); 8467 white-space: nowrap; 8468 } 8469 .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, 8470 .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { 8471 transition: 200ms transform, 8472 200ms left; 8473 } 8474 .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { 8475 transition: 200ms transform, 8476 200ms right; 8477 } 8478 /* Fraction */ 8479 .swiper-pagination-fraction { 8480 color: var(--swiper-pagination-fraction-color, inherit); 8481 } 8482 /* Progress */ 8483 .swiper-pagination-progressbar { 8484 background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25)); 8485 position: absolute; 8486 } 8487 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { 8488 background: var(--swiper-pagination-color, var(--swiper-theme-color)); 8489 position: absolute; 8490 left: 0; 8491 top: 0; 8492 width: 100%; 8493 height: 100%; 8494 transform: scale(0); 8495 transform-origin: left top; 8496 } 8497 .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { 8498 transform-origin: right top; 8499 } 8500 .swiper-horizontal > .swiper-pagination-progressbar, 8501 .swiper-pagination-progressbar.swiper-pagination-horizontal, 8502 .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, 8503 .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite { 8504 width: 100%; 8505 height: var(--swiper-pagination-progressbar-size, 4px); 8506 left: 0; 8507 top: 0; 8508 } 8509 .swiper-vertical > .swiper-pagination-progressbar, 8510 .swiper-pagination-progressbar.swiper-pagination-vertical, 8511 .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, 8512 .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite { 8513 width: var(--swiper-pagination-progressbar-size, 4px); 8514 height: 100%; 8515 left: 0; 8516 top: 0; 8517 } 8518 .swiper-pagination-lock { 8519 display: none; 8520 } 8521 .swiper-grid > .swiper-wrapper { 8522 flex-wrap: wrap; 8523 } 8524 .swiper-grid-column > .swiper-wrapper { 8525 flex-wrap: wrap; 8526 flex-direction: column; 8527 } 8528 .swiper-fade.swiper-free-mode .swiper-slide { 8529 transition-timing-function: ease-out; 8530 } 8531 .swiper-fade .swiper-slide { 8532 pointer-events: none; 8533 transition-property: opacity; 8534 } 8535 .swiper-fade .swiper-slide .swiper-slide { 8536 pointer-events: none; 8537 } 8538 .swiper-fade .swiper-slide-active { 8539 pointer-events: auto; 8540 } 8541 .swiper-fade .swiper-slide-active .swiper-slide-active { 8542 pointer-events: auto; 8543 } 8544 .swiper.swiper-flip { 8545 overflow: visible; 8546 } 8547 .swiper-flip .swiper-slide { 8548 pointer-events: none; 8549 -webkit-backface-visibility: hidden; 8550 backface-visibility: hidden; 8551 z-index: 1; 8552 } 8553 .swiper-flip .swiper-slide .swiper-slide { 8554 pointer-events: none; 8555 } 8556 .swiper-flip .swiper-slide-active, 8557 .swiper-flip .swiper-slide-active .swiper-slide-active { 8558 pointer-events: auto; 8559 } 8560 /* Flip slide shadows start */ 8561 .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top, 8562 .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom, 8563 .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left, 8564 .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right { 8565 z-index: 0; 8566 -webkit-backface-visibility: hidden; 8567 backface-visibility: hidden; 8568 } 8569 /* Flip slide shadows end */ 8570 .swiper.swiper-cube { 8571 overflow: visible; 8572 } 8573 .swiper-cube .swiper-slide { 8574 pointer-events: none; 8575 -webkit-backface-visibility: hidden; 8576 backface-visibility: hidden; 8577 z-index: 1; 8578 visibility: hidden; 8579 transform-origin: 0 0; 8580 width: 100%; 8581 height: 100%; 8582 } 8583 .swiper-cube .swiper-slide .swiper-slide { 8584 pointer-events: none; 8585 } 8586 .swiper-cube.swiper-rtl .swiper-slide { 8587 transform-origin: 100% 0; 8588 } 8589 .swiper-cube .swiper-slide-active, 8590 .swiper-cube .swiper-slide-active .swiper-slide-active { 8591 pointer-events: auto; 8592 } 8593 .swiper-cube .swiper-slide-active, 8594 .swiper-cube .swiper-slide-next, 8595 .swiper-cube .swiper-slide-prev { 8596 pointer-events: auto; 8597 visibility: visible; 8598 } 8599 .swiper-cube .swiper-cube-shadow { 8600 position: absolute; 8601 left: 0; 8602 bottom: 0px; 8603 width: 100%; 8604 height: 100%; 8605 opacity: 0.6; 8606 z-index: 0; 8607 } 8608 .swiper-cube .swiper-cube-shadow:before { 8609 content: ''; 8610 background: #000; 8611 position: absolute; 8612 left: 0; 8613 top: 0; 8614 bottom: 0; 8615 right: 0; 8616 filter: blur(50px); 8617 } 8618 .swiper-cube .swiper-slide-next + .swiper-slide { 8619 pointer-events: auto; 8620 visibility: visible; 8621 } 8622 /* Cube slide shadows start */ 8623 .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top, 8624 .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, 8625 .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left, 8626 .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right { 8627 z-index: 0; 8628 -webkit-backface-visibility: hidden; 8629 backface-visibility: hidden; 8630 } 8631 /* Cube slide shadows end */ 8632</style> 8633 8634 <link rel="preload" as="image" href="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/logo.svg"> 8635 8636 8637 <link rel="icon" type="image/svg" sizes="32x32" href="/favicon.svg"> 8638 8639 <title>Ðлог</title> 8640 <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style> 8641 <meta name="robots" content="max-snippet:-1,max-image-preview:large,max-video-preview:-1" /> 8642<link rel="canonical" href="https://yudaevschool.ru/blog/" /> 8643<meta property="og:type" content="website" /> 8644<meta property="og:locale" content="ru_RU" /> 8645<meta property="og:site_name" content="Yudaev.School" /> 8646<meta property="og:title" content="Ðлог" /> 8647<meta property="og:url" content="https://yudaevschool.ru/blog/" /> 8648<meta name="twitter:card" content="summary_large_image" /> 8649<meta name="twitter:title" content="Ðлог" />
8650<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://yudaevschool.ru/#/schema/WebSite","url":"https://yudaevschool.ru/","name":"Yudaev.School","inLanguage":"ru-RU","potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://yudaevschool.ru/search/{search_term_string}/"},"query-input":"required name=search_term_string"},"publisher":{"@type":"Organization","@id":"https://yudaevschool.ru/#/schema/Organization","name":"Yudaev.School","url":"https://yudaevschool.ru/"}},{"@type":"WebPage","@id":"https://yudaevschool.ru/blog/","url":"https://yudaevschool.ru/blog/","name":"Ðлог","inLanguage":"ru-RU","isPartOf":{"@id":"https://yudaevschool.ru/#/schema/WebSite"},"breadcrumb":{"@type":"BreadcrumbList","@id":"https://yudaevschool.ru/#/schema/BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":"https://yudaevschool.ru/","name":"Yudaev.School"},{"@type":"ListItem","position":2,"name":"Ðлог"}]},"potentialAction":{"@type":"ReadAction","target":"https://yudaevschool.ru/blog/"}}]}</script>
8650 8651<link rel='stylesheet' id='wp-block-library-css' href='https://yudaevschool.ru/wp-includes/css/dist/block-library/style.min.css?ver=6.7.10' type='text/css' media='all' /> 8652<style id='classic-theme-styles-inline-css' type='text/css'> 8653/*! This file is auto-generated */ 8654.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} 8655</style> 8656<style id='global-styles-inline-css' type='text/css'> 8657:root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
8657--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}
8657.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} 8658:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} 8659:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} 8660:root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} 8661</style> 8662<link rel='stylesheet' id='contact-form-7-css' href='https://yudaevschool.ru/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=6.1.5' type='text/css' media='all' /> 8663 8664 </head> 8665 <body> 8666 <link rel="stylesheet" href="https://yudaevschool.ru/wp-content/themes/yudaev/assets/swiper-bundle.min.css" /> 8667
8667<script src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/swiper-bundle.min.js"></script>
8667 8668 8669<header class="header container"> 8670 <div class="div-gradient-blur"> 8671 <div></div> 8672 <div></div> 8673 <div></div> 8674 <div></div> 8675 <div></div> 8676 <div></div> 8677 </div> 8678 <nav class="header__desktop row"> 8679 <a class="header__logo row" href="/"> 8680 <div class="header__logo-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/logo.svg" alt=""/></div> 8681 <h1 class="header__title">Yudaev School</h1> 8682 </a> 8683 <div class="header__menu gradient-border row"> 8684 <div class="header__burger header__link gradient-border row" id="burger-pc"> 8685 <div class="header__burger-icon gradient-border burger"> 8686 <input type="checkbox"/> 8687 <label><span> </span><span> </span><span> </span></label> 8688 </div> 8689 <div class="header__burger-text">ÐÑÑÑÑ</div> 8690 </div> 8691 <div class="header__links row"> 8692 <a class="header__link " href="/blog"> 8693 Ðлог </a> 8694 <a class="header__link header__link_green" href="https://yudaevschool.ru/design7?utm_source=seo&utm_medium=none&utm_campaign=web_free_mk7_seo_none_none_marathon_none_rf_yudaev_none"> 8695 ÐеÑплаÑное обÑÑение </a> 8696 </div> 8697 <div class="header__courses column" data-lenis-prevent> 8698 <div class="wrapper gradient-border column"> 8699 <div class="header__section column"> 8700 <div class="side-media row gradient-border header__section-title"> 8701 <div class="green-arrow side-media__img"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/Vector (7).svg" alt=""/></div> 8702 <div class="side-media__text">ÐеÑплаÑнÑе пÑогÑаммÑ</div> 8703 </div> 8704 <div class="header__section-content"> 8705 <div class="header__course gradient-border"> 8706 <div class="header__course-title"><span class="gradient-border">Web-дизайн Ñ Ð½ÑлÑ</span></div> 8707 <a href="https://yudaevschool.ru/design7"> 8708 <div class="header__course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-1.webp" alt="Web-дизайн Ñ Ð½ÑлÑ"/></div> 8709 <div class="green-arrow header__course-cta"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/green-arrow.svg" alt=""/></div> 8710 </a> 8711 </div> 8712 <div class="header__course gradient-border"> 8713 <div class="header__course-title"><span class="gradient-border">ÐÐ¸Ð·Ð°Ð¹Ð½ÐµÑ ÐºÐ°ÑÑоÑек</span></div> 8714 <a href="https://yudaevschool.ru/girl-market-design"> 8715 <div class="header__course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-5.webp" alt="ÐÐ¸Ð·Ð°Ð¹Ð½ÐµÑ ÐºÐ°ÑÑоÑек"/></div> 8716 <div class="green-arrow header__course-cta"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/green-arrow.svg" alt=""/></div> 8717 </a> 8718 </div> 8719 </div> 8720 </div> 8721 <div class="header__section column"> 8722 <div class="side-media row gradient-border header__section-title"> 8723 <div class="green-arrow side-media__img"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/Vector (8).svg" alt=""/></div> 8724 <div class="side-media__text">ÐÑновнÑе пÑогÑаммÑ</div> 8725 </div> 8726 <div class="header__section-content"> 8727 <div class="header__course gradient-border"> 8728 <div class="header__course-title"><span class="gradient-border">
8728Digital-дизайнеÑ</span></div> 8729 <a href="https://yudaevschool.ru/digital-designer/"> 8730 <div class="header__course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-6.webp" alt="Digital-дизайнеÑ"/></div> 8731 <div class="green-arrow header__course-cta"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/green-arrow.svg" alt=""/></div> 8732 </a> 8733 </div> 8734 <div class="header__course gradient-border"> 8735 <div class="header__course-title"><span class="gradient-border">UX/UI</span></div> 8736 <a href="https://yudaevschool.ru/uxui-prof/"> 8737 <div class="header__course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-7.webp" alt="UX/UI"/></div> 8738 <div class="green-arrow header__course-cta"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/green-arrow.svg" alt=""/></div> 8739 </a> 8740 </div> 8741 <div class="header__course gradient-border"> 8742 <div class="header__course-title"><span class="gradient-border">3D-визÑализаÑоÑ</span></div> 8743 <a href="https://yudaevschool.ru/3d-prof/"> 8744 <div class="header__course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-8.webp" alt="3D-визÑализаÑоÑ"/></div> 8745 <div class="green-arrow header__course-cta"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/green-arrow.svg" alt=""/></div> 8746 </a> 8747 </div> 8748 <div class="header__course gradient-border"> 8749 <div class="header__course-title"><span class="gradient-border">ÐÑаÑиÑеÑкий дизайнеÑ</span></div> 8750 <a href="https://yudaevschool.ru/graf-diz"> 8751 <div class="header__course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-9.webp" alt="ÐÑаÑиÑеÑкий дизайнеÑ"/></div> 8752 <div class="green-arrow header__course-cta"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/green-arrow.svg" alt=""/></div> 8753 </a> 8754 </div> 8755 <div class="header__course gradient-border"> 8756 <div class="header__course-title"><span class="gradient-border">ÐÑÑÑ Ð¿Ð¾ нейÑоÑеÑÑм</span></div> 8757 <a href="https://yudaevschool.ru/ai-specialist"> 8758 <div class="header__course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-10.webp" alt="ÐÑÑÑ Ð¿Ð¾ нейÑоÑеÑÑм"/></div> 8759 <div class="green-arrow header__course-cta"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/green-arrow.svg" alt=""/></div> 8760 </a> 8761 </div> 8762 </div> 8763 </div> 8764 </div> 8765 </div> 8766 </div> 8767 </nav> 8768 <nav class="header__mobile column"> 8769 <div class="header__head row"> 8770 <div class="header__logo row"> 8771 <div class="header__logo-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/logo.svg" alt=""/></div> 8772 <h1 class="header__title">Yudaev School </h1> 8773 </div> 8774 <div class="header__burger header__link gradient-border row" id="burger-mobile"> 8775 <div class="header__burger-icon gradient-border burger"> 8776 <input type="checkbox"/> 8777 <label><span> </span><span> </span><span> </span></label> 8778 </div> 8779 <div class="header__burger-text">ÐенÑ</div> 8780 </div> 8781 </div> 8782 <div class="header__mobile-content column gradient-border" style="display: none;"> 8783 <div class="header__mobile-links column"> 8784 <div class="side-media row gradient-border header__mobile-link gradient-border" style="flex-direction: row-reverse;" id="view-course">
8785 <div class="green-arrow side-media__img"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/plus.svg" alt=""/></div> 8786 <div class="side-media__text">ÐÑÑÑÑ</div> 8787 </div> 8788 <a 8789 class="side-media row gradient-border header__mobile-link gradient-border header__mobile-link_green" 8790 style="flex-direction: row-reverse;" 8791 href="https://yudaevschool.ru/design7?utm_source=seo&utm_medium=none&utm_campaign=web_free_mk7_seo_none_none_marathon_none_rf_yudaev_none" 8792 > 8793 <div class="green-arrow side-media__img"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/white-right.svg" alt=""/></div> 8794 <div class="side-media__text"> 8795 ÐеÑплаÑное обÑÑение </div> 8796 </a> 8797 <a class="header__mobile-mini-link gradient-border first" href="/blog">Ðлог</a> 8798 </div> 8799 <div class="header__mobile-foot column"> 8800 <div class="header__mobile-foot-section column"> 8801 <div class="header__mobile-foot-title">ÐеÑÑенджеÑÑ</div> 8802 <div class="header__mobile-foot-links row"> 8803 <a class="header__mobile-mini-link gradient-border" href="https://t.me/yuadevschoolmanagerbot">Telegram</a> 8804 <!--a(href="").header__mobile-mini-link.gradient-border WhatsApp--> 8805 </div> 8806 </div> 8807 <div class="header__mobile-foot-section column social"> 8808 <div class="header__mobile-foot-title">СоÑ. ÑеÑи</div> 8809 <div class="header__mobile-foot-links row social"> 8810 <a href="https://www.behance.net/yudaev-school"> 8811 <div class="green-arrow"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/icons/be.svg" alt=""/></div> 8812 </a> 8813 <a href="https://www.pinterest.com/YudaevSchool"> 8814 <div class="green-arrow"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/icons/pint.svg" alt=""/></div> 8815 </a> 8816 <a href="https://www.instagram.com/yudaev.school"> 8817 <div class="green-arrow"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/icons/inst.svg" alt=""/></div> 8818 </a> 8819 <a href="https://t.me/+RG10o4n3xtliMGFi"> 8820 <div class="green-arrow"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/icons/tg.svg" alt=""/></div> 8821 </a> 8822 <a href="https://vk.com/yudaevschool"> 8823 <div class="green-arrow"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/icons/vk.svg" alt=""/></div> 8824 </a> 8825 <a href="https://www.youtube.com/@yudaev_digital"> 8826 <div class="green-arrow"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/icons/yt.svg" alt=""/></div> 8827 </a> 8828 </div> 8829 </div> 8830 </div> 8831 <div class="header__mobile-curses column"> 8832 <div class="green-arrow header__mobile-back"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/icons/left-arrow.svg" alt=""/></div> 8833 <div class="header__mobile-course column"> 8834 <div class="header__mobile-course-head row"> 8835 <div class="side-media row gradient-border header__section-title">
8836 <div class="green-arrow side-media__img"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/Vector (7).svg" alt=""/></div> 8837 <div class="side-media__text">ÐеÑплаÑнÑе пÑогÑаммÑ</div> 8838 </div> 8839 <div class="header__mobile-course-count gradient-border">2</div> 8840 </div> 8841 <div class="header__mobile-course-content row swiper first"> 8842 <div class="swiper-wrapper"> 8843 <a class="header__mobile-course-card column swiper-slide" href="https://yudaevschool.ru/design7"> 8844 <div class="header__mobile-course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-1.webp" alt="Web-дизайн Ñ Ð½ÑлÑ"/></div> 8845 <div class="header__mobile-course-title">Web-дизайн Ñ Ð½ÑлÑ</div> 8846 </a> 8847 <a class="header__mobile-course-card column swiper-slide" href="https://yudaevschool.ru/girl-market-design"> 8848 <div class="header__mobile-course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-5.webp" alt="ÐÐ¸Ð·Ð°Ð¹Ð½ÐµÑ ÐºÐ°ÑÑоÑек"/></div> 8849 <div class="header__mobile-course-title">ÐÐ¸Ð·Ð°Ð¹Ð½ÐµÑ ÐºÐ°ÑÑоÑек</div> 8850 </a> 8851 </div> 8852 </div> 8853 </div> 8854 <div class="header__mobile-course column"> 8855 <div class="header__mobile-course-head row"> 8856 <div class="side-media row gradient-border header__section-title"> 8857 <div class="green-arrow side-media__img"><img loading="lazy" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/webbis/header/Vector (8).svg" alt=""/></div> 8858 <div class="side-media__text">ÐÑновнÑе пÑогÑаммÑ</div> 8859 </div> 8860 <div class="header__mobile-course-count gradient-border">5</div> 8861 </div> 8862 <div class="header__mobile-course-content row swiper second"> 8863 <div class="swiper-wrapper"> 8864 <a class="header__mobile-course-card column swiper-slide" href="https://yudaevschool.ru/digital-designer/"> 8865 <div class="header__mobile-course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-6.webp" alt="Digital-дизайнеÑ"/></div> 8866 <div class="header__mobile-course-title">Digital-дизайнеÑ</div> 8867 </a> 8868 <a class="header__mobile-course-card column swiper-slide" href="https://yudaevschool.ru/uxui-prof/"> 8869 <div class="header__mobile-course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-7.webp" alt="UX/UI"/></div> 8870 <div class="header__mobile-course-title">UX/UI</div> 8871 </a> 8872 <a class="header__mobile-course-card column swiper-slide" href="https://yudaevschool.ru/3d-prof/"> 8873 <div class="header__mobile-course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-8.webp" alt="3D-визÑализаÑоÑ"/></div> 8874 <div class="header__mobile-course-title">3D-визÑализаÑоÑ</div> 8875 </a> 8876 <a class="header__mobile-course-card column swiper-slide" href="https://yudaevschool.ru/graf-diz"> 8877 <div class="header__mobile-course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-9.webp" alt="ÐÑаÑиÑеÑкий дизайнеÑ"/></div> 8878 <div class="header__mobile-course-title">ÐÑаÑиÑеÑкий дизайнеÑ</div> 8879 </a> 8880 <a class="header__mobile-course-card column swiper-slide" href="https://yudaevschool.ru/ai-specialist"> 8881 <div class="header__mobile-course-image"><img loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/header-10.webp" alt="ÐÑÑÑ Ð¿Ð¾ нейÑоÑеÑÑм"/></div> 8882 <div class="header__mobile-course-title">ÐÑÑÑ Ð¿Ð¾ нейÑоÑеÑÑм</div> 8883 </a> 8884 </div> 8885 </div> 8886 </div> 8887 </div> 8888 </div> 8889 </nav> 8890</header> 8891 8892 8893<style> 8894 /* ÐÑавки */ 8895 8896 /* Sep 16 2025 */ 8897 .header__logo.row { 8898 color: black; 8899 } 8900</style> 8901 8902<main> 8903 8904 <style> 8905 #page-blog-hero { 8906 background-image: url('https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/hero.webp'); 8907 background-position: left; 8908 background-size: cover; 8909 border-block-end: solid 0.1rem #b3b3b3; 8910 margin-block-end: clamp(8rem, calc(8rem + (12 - 8) * ((100dvw - 37.5rem) / (144 - 37.5))), 12rem); 8911 8912 .div-main { 8913 display: grid; 8914 grid-template-columns: 1fr 1.4fr; 8915 gap: clamp(2.4rem, calc(2.4rem + (4 - 2.4) * ((100dvw - 37.5rem) / (144 - 37.5))), 4rem); 8916 margin-block:
8917 clamp(10.3rem, calc(10.3rem + (11.1 - 10.3) * ((100dvw - 37.5rem) / (144 - 37.5))), 11.1rem) clamp(6rem, calc(8rem + (6 - 8) * ((100dvw - 37.5rem) / (144 - 37.5))), 8rem) ; 8918 } 8919 8920 .div-text, 8921 .div-items { 8922 width: 100%; 8923 } 8924 8925 .swiper { 8926 border-radius: 2rem 0 0 2rem; 8927 /*margin-inline: -10rem -2rem;*/ 8928 min-width: 0; 8929 overflow: visible; 8930 /*padding-inline: 10rem 2rem;*/ 8931 /*mask-image: linear-gradient(to right, transparent 4rem, black 10rem);*/ 8932 } 8933 8934 .swiper-wrapper { 8935 box-sizing: border-box; 8936 } 8937 8938 .h2 { 8939 color: color-mix(in srgb, black 25%, transparent); 8940 font-family: 'Loos'; 8941 font-size: clamp(3.4rem, calc(3.4rem + (5.6 - 3.4) * ((100dvw - 37.5rem) / (144 - 37.5))), 5.6rem); 8942 font-variation-settings: "wdth" 1000; 8943 font-weight: 700; 8944 line-height: 115%; 8945 margin-block: auto; 8946 8947 span { 8948 color: black; 8949 } 8950 } 8951 8952 .div-text { 8953 display: flex; 8954 flex-direction: column; 8955 padding-inline-start: clamp(0rem, calc(0rem + (5.8 - 0) * ((100dvw - 37.5rem) / (144 - 37.5))), 5.8rem); 8956 margin-inline-end: 10rem; 8957 } 8958 8959 .div-navigation { 8960 align-items: center; 8961 display: flex; 8962 gap: 1rem; 8963 margin-block-end: 3rem; 8964 z-index: 2; 8965 8966 &.--mobile { 8967 display: none; 8968 } 8969 } 8970 8971 .p-navigation { 8972 align-items: center; 8973 justify-content: center; 8974 display: flex; 8975 border-radius: 100rem; 8976 border: solid 0.1rem #AAAAAA; 8977 font-size: 1.8rem; 8978 font-weight: 500; 8979 height: 6rem; 8980 line-height: 130%; 8981 text-align: center; 8982 user-select: none; 8983 width: 100%; 8984 8985 span { 8986 color: color-mix(in srgb, black 25%, transparent); 8987 } 8988 } 8989 8990 .img-swiper-nav { 8991 background-color: #cfff32; 8992 border-radius: 100rem; 8993 cursor: pointer; 8994 height: 6rem; 8995 object-fit: scale-down; 8996 width: 6rem; 8997 } 8998 8999 .a-item { 9000 background-color: white; 9001 border: solid 0.1rem #b9b9b9; 9002 border-radius: 2rem; 9003 display: flex; 9004 flex-direction: column; 9005 height: 64.4rem; 9006 width: 51rem; 9007 transition: 0.5s; 9008 9009 & + & { 9010 margin-inline-start: -0.1rem; 9011 } 9012 9013 &.swiper-slide-prev, 9014 &:not(.swiper-slide-active):not(.swiper-slide-next) { 9015 opacity: 0; 9016 pointer-events: none; 9017 } 9018 9019 &.swiper-slide-next + & { 9020 opacity: 1; 9021 pointer-events: unset; 9022 } 9023 } 9024 9025 .div-img { 9026 aspect-ratio: 1 / 1; 9027 border-radius: 2rem; 9028 box-shadow: 0 0.6rem 1.5rem color-mix(in srgb, black 7%, transparent); 9029 margin: clamp(1.5rem, calc(1.5rem + (2 - 1.5) * ((100dvw - 37.5rem) / (144 - 37.5))), 2rem); 9030 position: relative; 9031 width: calc(100% - clamp(1.5rem, calc(1.5rem + (2 - 1.5) * ((100dvw - 37.5rem) / (144 - 37.5))), 2rem) * 2); 9032 overflow: hidden; 9033 9034 &:after { 9035 border-radius: 2rem; 9036 box-shadow: inset 0 0 2.5rem 0.2rem white; 9037 content: ''; 9038 height: 100%; 9039 left: 0; 9040 position: absolute; 9041 top: 0; 9042 width: 100%; 9043 } 9044 } 9045 9046 .img-item { 9047 border-radius: 2rem; 9048 height: 100%; 9049 object-fit: cover; 9050 transition: var(--animation--slowest); 9051 width: 100%; 9052 9053 .a-item:not(.swiper-slide-active) & { 9054 opacity: 0.3; 9055 } 9056 } 9057 9058 .p-title { 9059 border-block-start: solid 0.1rem #b9b9b9; 9060 border-radius: 2rem; 9061 font-size: 2rem; 9062 font-weight: 600; 9063 line-clamp: 2; 9064 line-height: 120%; 9065 margin-block-end: 1.3rem; 9066 padding-block-start: clamp(1.5rem, calc(1.5rem + (2 - 1.5) * ((100dvw - 37.5rem) / (144 - 37.5))), 2rem); 9067 padding-inline: clamp(1.5rem, calc(1.5rem + (2 - 1.5) * ((100dvw - 37.5rem) / (144 - 37.5))), 2rem); 9068 text-wrap: pretty; 9069 transition: var(--animation--slow); 9070 9071 -webkit-box-orient: vertical; 9072 -webkit-line-clamp: 2; 9073 display: -webkit-box; 9074 overflow: hidden; 9075 9076 .a-item:not(.swiper-slide-active) & { 9077 color: #B9B9B9; 9078 } 9079 } 9080 9081 .div-tags { 9082 display: flex; 9083 gap: clamp(0.4rem, calc(0.4rem + (0.7 - 0.4) * ((100dvw - 37.5rem) / (144 - 37.5))), 0.7rem); 9084 margin-block-start: auto; 9085 padding-block-end: 1.5rem; 9086 padding-inline: clamp(1.5rem, calc(1.5rem + (2 - 1.5) * ((100dvw - 37.5rem) / (144 - 37.5))), 2rem); 9087 } 9088 9089 .p-tag { 9090 align-items: center; 9091 border-radius: 100rem; 9092 border: solid 0.1rem #b9b9b9; 9093 color: #c4c4c4; 9094 display: flex; 9095 font-size: 1.2rem; 9096 height: 2rem; 9097 letter-spacing: 0.015em; 9098 padding-inline: 0.8rem; 9099 user-select: none; 9100 white-space: nowrap; 9101 } 9102 9103 @media (width <= 1100px) { 9104 background-size: contain; 9105 9106 .a-item { 9107 height: auto; 9108 } 9109 9110 .div-main { 9111 display: flex; 9112 flex-direction: column; 9113 } 9114 9115 .div-text { 9116 padding-inline-start: 0; 9117 } 9118 9119 .div-navigation { 9120 display: none; 9121 margin: 0; 9122 9123 &.--mobile { 9124 display: flex; 9125 } 9126 } 9127 9128 .swiper { 9129 clip-path: none; 9130 padding: 0; 9131 margin: 0; 9132 mask-image: none; 9133 } 9134 } 9135 9136 @media (width <= 640px) { 9137 background: none; 9138 border: none; 9139 9140 .div-main { 9141 margin-block-end: 2rem; 9142 } 9143 9144 .div-img { 9145 aspect-ratio: unset; 9146 height: 30.9rem; 9147 } 9148 9149 .div-tags { 9150 border: none; 9151 margin-block-end: 0 9152 } 9153 9154 .a-item { 9155 height: auto; 9156 width: 100%; 9157 } 9158 } 9159 } 9160</style> 9161 9162<section id="page-blog-hero" class="Centered"> 9163 <div class="div-main"> 9164 <div class="div-text"> 9165 <h2 class="Text h2">
9166 <span>Топ 10</span><br> 9167 СÑаÑей недели 9168 </h2> 9169 <div class="div-navigation"> 9170 <p class="Text p-navigation"><!-- This is set with JS --> </p> 9171 <img class="ButtonEffect img-swiper-nav" loading="lazy"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new--reversed.svg" alt="" draggable="false" /> <img class="ButtonEffect img-swiper-nav" loading="lazy"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" /> </div> 9172 </div> 9173 <div class="swiper div-items"> 9174 <div class="swiper-wrapper"> 9175 9176 9177 <a 9178 class="LinkContainer swiper-slide a-item" 9179 href="https://yudaevschool.ru/blog/kto-takoy-3d-designer-i-chto-on-delaet/" 9180 > 9181 <div class="div-img"> 9182 <img 9183 class="img-item" 9184 src="https://yudaevschool.ru/wp-content/uploads/2025/09/2-1.png" 9185 alt="" 9186 loading="lazy" 9187 draggable="false" 9188 /> 9189 </div> 9190 <p class="Text p-title"> 9191 3D-дизайнеÑ: кÑо ÑÑо, Ñем занимаеÑÑÑ Ð¸ ÑколÑко заÑабаÑÑÐ²Ð°ÐµÑ Ð² 2026 Ð³Ð¾Ð´Ñ </p> 9192 9193 <div class="div-tags"> 9194 9195 9196 <p class="Text p-tag"> 9197 3D-дизайн </p> 9198 9199 9200 </div> 9201 </a> 9202 9203 9204 <a 9205 class="LinkContainer swiper-slide a-item" 9206 href="https://yudaevschool.ru/blog/kto-takoj-web-designer-i-chem-on-zanimaetsya/" 9207 > 9208 <div class="div-img"> 9209 <img 9210 class="img-item" 9211 src="https://yudaevschool.ru/wp-content/uploads/2025/09/8.png" 9212 alt="" 9213 loading="lazy" 9214 draggable="false" 9215 /> 9216 </div> 9217 <p class="Text p-title"> 9218 Ðеб-дизайнеÑ: кÑо ÑÑо, Ñем занимаеÑÑÑ Ð¸ ÑколÑко заÑабаÑÑÐ²Ð°ÐµÑ Ð² 2026 Ð³Ð¾Ð´Ñ </p> 9219 9220 <div class="div-tags"> 9221 9222 9223 <p class="Text p-tag"> 9224 Ðеб-дизайн </p> 9225 9226 9227 </div> 9228 </a> 9229 9230 9231 <a 9232 class="LinkContainer swiper-slide a-item" 9233 href="https://yudaevschool.ru/blog/professiya-ux-ui-disainer-interfeisov/" 9234 > 9235 <div class="div-img"> 9236 <img 9237 class="img-item" 9238 src="https://yudaevschool.ru/wp-content/uploads/2025/09/4.png" 9239 alt="" 9240 loading="lazy" 9241 draggable="false" 9242 /> 9243 </div> 9244 <p class="Text p-title"> 9245 UX/UI-дизайнеÑ: кÑо ÑÑо, Ñем занимаеÑÑÑ Ð¸ ÑколÑко заÑабаÑÑÐ²Ð°ÐµÑ Ð² 2026 Ð³Ð¾Ð´Ñ </p> 9246 9247 <div class="div-tags"> 9248 9249 9250 <p class="Text p-tag"> 9251 UX/UI </p> 9252 9253 9254 </div> 9255 </a> 9256 9257 9258 <a 9259 class="LinkContainer swiper-slide a-item" 9260 href="https://yudaevschool.ru/blog/kto-takoy-storismeiker-i-kak-im-stat/" 9261 > 9262 <div class="div-img"> 9263 <img 9264 class="img-item" 9265 src="https://yudaevschool.ru/wp-content/uploads/2025/09/5-1.png" 9266 alt="" 9267 loading="lazy" 9268 draggable="false" 9269 /> 9270 </div> 9271 <p class="Text p-title"> 9272 ÐÑо Ñакой ÑÑоÑиÑмейкеÑ, ÑÑо он Ð´ÐµÐ»Ð°ÐµÑ Ð¸ как им ÑÑаÑÑ Ð² 2026 Ð³Ð¾Ð´Ñ </p> 9273 9274 <div class="div-tags"> 9275 9276 9277 <p class="Text p-tag"> 9278 Ðеб-дизайн </p> 9279 9280 9281 </div> 9282 </a> 9283 9284 9285 <a 9286 class="LinkContainer swiper-slide a-item" 9287 href="https://yudaevschool.ru/blog/chto-takoe-motion-design-i-kak-im-stat/" 9288 > 9289 <div class="div-img"> 9290 <img 9291 class="img-item" 9292 src="https://yudaevschool.ru/wp-content/uploads/2025/09/3-1.png" 9293 alt="" 9294 loading="lazy" 9295 draggable="false" 9296 /> 9297 </div> 9298 <p class="Text p-title"> 9299 ЧÑо Ñакое моÑÑн-дизайн и как ÑÑаÑÑ motion-дизайнеÑом в 2026 Ð³Ð¾Ð´Ñ </p> 9300 9301 <div class="div-tags"> 9302 9303 9304 <p class="Text p-tag"> 9305 ÐоÑÑн-дизайн </p> 9306 9307 9308 </div> 9309 </a> 9310 9311 9312 <a 9313 class="LinkContainer swiper-slide a-item" 9314 href="https://yudaevschool.ru/blog/3d-modelirovanie-osnovnye-tipy-principy-i-instrumenty/" 9315 > 9316 <div class="div-img"> 9317 <img 9318 class="img-item" 9319 src="https://yudaevschool.ru/wp-content/uploads/2025/09/1-1.png" 9320 alt="" 9321 loading="lazy" 9322 draggable="false" 9323 /> 9324 </div> 9325 <p class="Text p-title"> 9326 ЧÑо Ñакое 3D-моделиÑование: видÑ, ÑÑÐ°Ð¿Ñ Ð¸ инÑÑÑÑменÑÑ </p> 9327 9328 <div class="div-tags"> 9329 9330 9331 <p class="Text p-tag"> 9332 3D-дизайн </p> 9333 9334 9335 </div> 9336 </a> 9337 9338 9339 <a 9340 class="LinkContainer swiper-slide a-item" 9341 href="https://yudaevschool.ru/blog/gde-uchitsya-na-ux-ui-designera/" 9342 > 9343 <div class="div-img"> 9344 <img 9345 class="img-item" 9346 src="https://yudaevschool.ru/wp-content/uploads/2025/09/2.png" 9347 alt="" 9348 loading="lazy" 9349 draggable="false" 9350 /> 9351 </div> 9352 <p class="Text p-title"> 9353 Ðде ÑÑиÑÑÑÑ Ð½Ð° UX/UI-дизайнеÑа в 2026 Ð³Ð¾Ð´Ñ Ð¸ ÑколÑко длиÑÑÑ Ð¾Ð±ÑÑение </p> 9354 9355 <div class="div-tags"> 9356 9357 9358 <p class="Text p-tag"> 9359 UX/UI </p> 9360 9361 9362 </div> 9363 </a> 9364 9365 9366 <a 9367 class="LinkContainer swiper-slide a-item" 9368 href="https://yudaevschool.ru/blog/kto-takoj-graficheskij-dizajner-i-chem-on-zanimaetsya/" 9369 > 9370 <div class="div-img"> 9371 <img 9372 class="img-item" 9373 src="https://yudaevschool.ru/wp-content/uploads/2025/09/6-1.png" 9374 alt="" 9375 loading="lazy" 9376 draggable="false" 9377 /> 9378 </div> 9379 <p class="Text p-title"> 9380 ÐÑаÑиÑеÑкий дизайнеÑ: кÑо ÑÑо, Ñем занимаеÑÑÑ Ð¸ как им ÑÑаÑÑ Ð² 2026 Ð³Ð¾Ð´Ñ </p> 9381 9382 <div class="div-tags"> 9383 9384 9385 <p class="Text p-tag"> 9386 ÐÑаÑиÑеÑкий дизайн </p> 9387 9388 9389 </div> 9390 </a> 9391 9392 9393 <a 9394 class="LinkContainer swiper-slide a-item" 9395 href="https://yudaevschool.ru/blog/gde-uchitsya-na-web-designera-i-skolko-na-eto-nujno-vremeni/"
9396 > 9397 <div class="div-img"> 9398 <img 9399 class="img-item" 9400 src="https://yudaevschool.ru/wp-content/uploads/2025/08/4.png" 9401 alt="" 9402 loading="lazy" 9403 draggable="false" 9404 /> 9405 </div> 9406 <p class="Text p-title"> 9407 Ðде ÑÑиÑÑÑÑ Ð½Ð° веб-дизайнеÑа и ÑколÑко вÑемени нÑжно в 2026 Ð³Ð¾Ð´Ñ </p> 9408 9409 <div class="div-tags"> 9410 9411 9412 <p class="Text p-tag"> 9413 Ðеб-дизайн </p> 9414 9415 9416 </div> 9417 </a> 9418 9419 9420 </div> 9421 </div> 9422 <div class="div-navigation --mobile"> 9423 <p class="Text p-navigation">01 <span>/ 10</span></p> 9424 <img class="ButtonEffect img-swiper-nav" loading="lazy"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new--reversed.svg" alt="" draggable="false" /> <img class="ButtonEffect img-swiper-nav" loading="lazy"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" /> </div> 9425 </div> 9426</section> 9427
9428<script type="module"> 9429 const swiper = new Swiper('#page-blog-hero .swiper', { 9430 slidesPerView: 'auto', 9431 loop: true, 9432 resistanceRatio: 0.5, 9433 speed: 500, 9434 navigation: { 9435 prevEl: '#page-blog-hero .img-swiper-nav:first-of-type', 9436 nextEl: '#page-blog-hero .img-swiper-nav:last-of-type' 9437 } 9438 }); 9439 9440 swiper.on('slideChange', () => { 9441 const overallAmount = swiper.slides.length; 9442 const current = String(swiper.realIndex + 1).padStart(overallAmount.toString().length, '0'); 9443 9444 const pNavigationAll = document.querySelectorAll('#page-blog-hero .p-navigation'); 9445 9446 pNavigationAll.forEach(element => { 9447 element.innerHTML = `${current} <span>/ ${overallAmount}`; 9448 }); 9449 }); 9450</script>
9450 9451 9452 <style> 9453 #searchbar { 9454 .div-wrapper { 9455 display: flex; 9456 gap: 2rem; 9457 margin-block-end: 8rem; 9458 width: 936px; 9459 margin-inline: auto; 9460 max-width: 100%; 9461 } 9462 9463 .input { 9464 border-radius: 100rem; 9465 border: none; 9466 font-family: 'Inter'; 9467 font-size: 1.5rem; 9468 font-weight: 400; 9469 height: 6rem; 9470 letter-spacing: -0.02em; 9471 line-height: 6rem; 9472 outline-offset: -0.2rem; 9473 outline: solid 0.1rem #b3b3b3; 9474 text-indent: 2rem; 9475 transition: var(--animation); 9476 width: 100%; 9477 9478 &:focus-visible { 9479 outline-color:rgb(184, 226, 46); 9480 } 9481 9482 &::placeholder { 9483 color: #15151566; 9484 font-family: 'Inter'; 9485 font-weight: 500; 9486 letter-spacing: -0.02em; 9487 opacity: 1; 9488 } 9489 } 9490 9491 .div-button { 9492 height: 6rem; 9493 } 9494 9495 .h2 { 9496 text-align: center; 9497 line-height: 115%; 9498 font-family: 'Loos'; 9499 font-variation-settings: "wdth" 1000; 9500 font-weight: 700; 9501 font-size: clamp(3.4rem, calc(3.4rem + (4 - 3.4) * ((100dvw - 37.5rem) / (144 - 37.5))), 4rem); 9502 9503 span { 9504 color: color-mix(in srgb, black 50%, transparent); 9505 } 9506 } 9507 9508 .div-wrapper-outer { 9509 display: flex; 9510 gap: clamp(2.4rem, calc(2.4rem + (4 - 2.4) * ((100dvw - 37.5rem) / (144 - 37.5))), 4rem); 9511 flex-direction: column; 9512 } 9513 9514 @media (width <= 540px) { 9515 .h2 { 9516 text-align: left; 9517 } 9518 } 9519 9520 @media (width <= 500px) { 9521 gap: 1rem; 9522 9523 .div-button { 9524 align-items: center; 9525 display: flex; 9526 height: 6rem; 9527 justify-content: center; 9528 min-height: 6rem; 9529 min-width: 6rem; 9530 padding: 0rem; 9531 width: 6rem; 9532 9533 span { 9534 display: none; 9535 } 9536 9537 img { 9538 margin: 0; 9539 } 9540 } 9541 } 9542 } 9543</style> 9544 9545<div id="searchbar" class="Centered"> 9546 <div class="div-wrapper-outer"> 9547 9548 9549 <h2 class="Text h2">ÐоиÑк <span>по маÑеÑиалам</span></h2> 9550 9551 9552 <div class="div-wrapper"> 9553 <input class="input" type="text" placeholder="ÐоиÑковÑй запÑоÑ" value="" /> 9554 <div class="Button ButtonEffect div-button"> 9555 <span>ÐоиÑк</span> 9556 <img class="" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/arrow.webp" alt="" draggable="false" /> </div> 9557 </div> 9558 </div> 9559</div> 9560
9561<script type="module"> 9562 const input = document.querySelector('#searchbar .input'); 9563 const button = document.querySelector('#searchbar .div-button'); 9564 9565 function search() { 9566 window.location.href = `/?s=${input.value}`; 9567 } 9568 9569 input.onkeyup = event => { event.keyCode === 13 && search() } 9570 button.onclick = () => search(); 9571</script>
9571 9572 9573 9574<style> 9575 #page-blog-recent { 9576 margin-block-end: clamp(8rem, calc(8rem + (15 - 8) * ((100dvw - 37.5rem) / (144 - 37.5))), 15rem); 9577 9578 &:has(+ * + * + #searchbar) { 9579 margin-block-end: 8rem; 9580 } 9581 9582 .swiper { 9583 overflow: unset; 9584 } 9585 9586 .swiper-wrapper { 9587 box-sizing: border-box; 9588 } 9589 9590 .swiper-scrollbar { 9591 background-color: #e6e6e6; 9592 border-radius: 100rem; 9593 bottom: unset; 9594 height: 0.3rem; 9595 left: 0; 9596 overflow: hidden; 9597 position: relative; 9598 translate: 0 -1rem; 9599 width: 100%; 9600 } 9601 9602 .swiper-scrollbar-drag { 9603 background-color: var(--black); 9604 } 9605 9606 .div-scrollbar { 9607 align-items: center; 9608 display: flex; 9609 margin-block-start: 4rem; 9610 9611 &:has(.swiper-scrollbar[style*="display: none"]) { 9612 display: none; 9613 } 9614 } 9615 9616 .img-swiper-nav { 9617 border-radius: 100rem; 9618 cursor: pointer; 9619 height: 6rem; 9620 object-fit: scale-down; 9621 width: 6rem; 9622 margin-block-end: 2rem; 9623 9624 & + & { 9625 margin-inline-start: 1.2rem; 9626 } 9627 9628 &:nth-of-type(1) { 9629 margin-inline-start: 4.8rem; 9630 } 9631 } 9632 9633 .div-title { 9634 display: flex; 9635 flex-direction: column; 9636 gap: 2.4rem; 9637 justify-content: space-between; 9638 margin-block-end: clamp(2rem, calc(2rem + (4 - 2) * ((100dvw - 37.5rem) / (144 - 37.5))), 4rem); 9639 } 9640 9641 .div-swiper-tags { 9642 clip-path: inset(0% calc(-100% - 1rem) 0% 1rem); 9643 margin: -1rem; 9644 min-width: 0; 9645 padding: 1rem; 9646 width: fit-content; 9647 } 9648 9649 .h2 { 9650 font-family: 'Loos'; 9651 font-size: clamp(3.2rem, calc(3.2rem + (4 - 3.2) * ((100dvw - 37.5rem) / (144 - 37.5))), 4rem); 9652 font-variation-settings: "wdth" 1000; 9653 font-weight: 700; 9654 line-height: 100%; 9655 text-wrap: pretty; 9656 width: fit-content; 9657 9658 span { 9659 color: color-mix(in srgb, black 25%, transparent); 9660 } 9661 } 9662 9663 .p-tag { 9664 align-items: center; 9665 border-radius: 100rem; 9666 display: flex; 9667 font-size: 1.4rem; 9668 font-weight: 500; 9669 height: 3.6rem; 9670 outline-offset: -0.1rem; 9671 outline: solid 0.1rem transparent; 9672 padding-inline: 1.5rem; 9673 transition: 0.2s; 9674 width: fit-content; 9675 9676 &.--is-selected { 9677 pointer-events: none; 9678 } 9679 9680 &:not(.--is-selected) { 9681 background-color: transparent; 9682 box-shadow: none; 9683 cursor: pointer; 9684 outline: solid 0.1rem #b3b3b3; 9685 } 9686 } 9687 9688 .div-img { 9689 aspect-ratio: 38.7 / 28.5; 9690 box-shadow: 0 0.6rem 1.5rem color-mix(in srgb, black 7%, transparent); 9691 border-radius: 2rem; 9692 margin-block-end: 1.5rem; 9693 position: relative; 9694 9695 &:after { 9696 border-radius: 2rem; 9697 box-shadow: inset 0 0 2.5rem 0.2rem white; 9698 content: ''; 9699 height: 100%; 9700 left: 0; 9701 position: absolute; 9702 top: 0; 9703 width: 100%; 9704 } 9705 } 9706 9707 .img { 9708 border-radius: 2rem; 9709 object-fit: cover; 9710 width: 100%; 9711 height: 100% 9712 } 9713 9714 .article { 9715 width: clamp(33.5rem, calc(33.5rem + (38.7 - 33.5) * ((100dvw - 37.5rem) / (144 - 37.5))), 38.7rem); 9716 transition: var(--animation--slow) opacity; 9717 9718 &:hover { 9719 opacity: 0.7; 9720 } 9721 9722 &.--is-hidden { 9723 display: none; 9724 } 9725 } 9726 9727 .div-item-tags { 9728 display: flex; 9729 gap: 0.5rem; 9730 margin-block-end: 1.5rem; 9731 flex-wrap: wrap; 9732 min-height: 60px; 9733 } 9734 9735 .p-item-tag { 9736 align-items: center; 9737 border-radius: 100rem; 9738 border: solid 0.1rem #b9b9b9; 9739 color: #B9B9B9; 9740 display: flex; 9741 font-size: 1.5rem; 9742 height: 2.5rem; 9743 letter-spacing: 0.015em; 9744 padding-inline: 0.8rem; 9745 text-wrap: pretty; 9746 } 9747 9748 .p-title { 9749 font-size: 2rem; 9750 font-weight: 600; 9751 line-height: 120%; 9752 } 9753 9754 @media (width <= 720px) { 9755 .img-swiper-nav { 9756 display: none; 9757 } 9758 } 9759 } 9760</style> 9761 9762<section id="page-blog-recent" class="Centered"> 9763 <div class="div-title"> 9764 <h2 class="Text h2">
9765 <span>ÐопÑлÑÑнÑе</span> ÑÑаÑÑи</h2> 9766 <div class="swiper div-swiper-tags"> 9767 <div class="swiper-wrapper"> 9768 <p 9769 class="swiper-slide ButtonEffect Text p-tag --is-selected" 9770 data-term-id=-1 9771 > 9772 ÐÑе 9773 </p> 9774 9775 9776 <p 9777 class="swiper-slide ButtonEffect Text p-tag" 9778 data-term-id=11 > 9779 3D-дизайн </p> 9780 9781 9782 <p 9783 class="swiper-slide ButtonEffect Text p-tag" 9784 data-term-id=8 > 9785 UX/UI </p> 9786 9787 9788 <p 9789 class="swiper-slide ButtonEffect Text p-tag" 9790 data-term-id=10 > 9791 Ðеб-дизайн </p> 9792 9793 9794 <p 9795 class="swiper-slide ButtonEffect Text p-tag" 9796 data-term-id=9 > 9797 ÐÑаÑиÑеÑкий дизайн </p> 9798 9799 9800 <p 9801 class="swiper-slide ButtonEffect Text p-tag" 9802 data-term-id=14 > 9803 ÐÑкÑÑÑÑво </p> 9804 9805 9806 <p 9807 class="swiper-slide ButtonEffect Text p-tag" 9808 data-term-id=13 > 9809 ÐÑбÑм дизайнеÑам </p> 9810 9811 9812 <p 9813 class="swiper-slide ButtonEffect Text p-tag" 9814 data-term-id=12 > 9815 ÐоÑÑн-дизайн </p> 9816 9817 9818 <p 9819 class="swiper-slide ButtonEffect Text p-tag" 9820 data-term-id=16 > 9821 ÐейÑоÑеÑи </p> 9822 9823 9824 <p 9825 class="swiper-slide ButtonEffect Text p-tag" 9826 data-term-id=15 > 9827 ÐбÑазование </p> 9828 9829 9830 </div> 9831 </div> 9832 </div> 9833 <div class="swiper div-swiper-articles"> 9834 <div class="swiper-wrapper"> 9835 9836 9837 <a 9838 class="swiper-slide LinkContainer article" 9839 data-term-ids-json='[8,10]' 9840 href="https://yudaevschool.ru/blog/cjm-karta-puti-klienta-ux/" 9841 > 9842 <div class="div-img"> 9843 <img 9844 class="img" 9845 src="https://yudaevschool.ru/wp-content/uploads/2026/10/cjm-karta-puti-klienta-ux.webp" 9846 alt="" 9847 loading="lazy" 9848 draggable="false" 9849 /> 9850 </div> 9851 <div class="div-item-tags"> 9852 9853 9854 <p class="Text p-item-tag"> 9855 UX/UI </p> 9856 9857 9858 <p class="Text p-item-tag"> 9859 Ðеб-дизайн </p> 9860 9861 9862 </div> 9863 <p class="Text p-title"> 9864 CJM: как поÑÑÑоиÑÑ ÐºÐ°ÑÑÑ Ð¿ÑÑи клиенÑа и пÑименÑÑÑ ÐµÑ Ð² UX-дизайне </p> 9865 </a> 9866 9867 9868 <a 9869 class="swiper-slide LinkContainer article" 9870 data-term-ids-json='[8,10]' 9871 href="https://yudaevschool.ru/blog/vayrfreym-sayta-v-figma/"
9872 > 9873 <div class="div-img"> 9874 <img 9875 class="img" 9876 src="https://yudaevschool.ru/wp-content/uploads/2026/10/vayrfreym-sayta-v-figma.webp" 9877 alt="" 9878 loading="lazy" 9879 draggable="false" 9880 /> 9881 </div> 9882 <div class="div-item-tags"> 9883 9884 9885 <p class="Text p-item-tag"> 9886 UX/UI </p> 9887 9888 9889 <p class="Text p-item-tag"> 9890 Ðеб-дизайн </p> 9891 9892 9893 </div> 9894 <p class="Text p-title"> 9895 ÐайÑÑÑейм ÑайÑа: ÑÑо ÑÑо, какие бÑваÑÑ Ð¸ как ÑделаÑÑ Ð² Figma </p> 9896 </a> 9897 9898 9899 <a 9900 class="swiper-slide LinkContainer article" 9901 data-term-ids-json='[13]' 9902 href="https://yudaevschool.ru/blog/dizayn-sistema-v-figma/" 9903 > 9904 <div class="div-img"> 9905 <img 9906 class="img" 9907 src="https://yudaevschool.ru/wp-content/uploads/2026/10/dizayn-sistema-v-figma.webp" 9908 alt="" 9909 loading="lazy" 9910 draggable="false" 9911 /> 9912 </div> 9913 <div class="div-item-tags"> 9914 9915 9916 <p class="Text p-item-tag"> 9917 ÐÑбÑм дизайнеÑам </p> 9918 9919 9920 </div> 9921 <p class="Text p-title"> 9922 Ðизайн-ÑиÑÑема в Figma: как ÑобÑаÑÑ ÐºÐ¾Ð¼Ð¿Ð¾Ð½ÐµÐ½ÑÑ, ÑÑили и докÑменÑаÑÐ¸Ñ </p> 9923 </a> 9924 9925 9926 <a 9927 class="swiper-slide LinkContainer article" 9928 data-term-ids-json='[10,13]' 9929 href="https://yudaevschool.ru/blog/auto-layout-v-figma/" 9930 > 9931 <div class="div-img"> 9932 <img 9933 class="img" 9934 src="https://yudaevschool.ru/wp-content/uploads/2026/10/auto-layout-v-figma-hero.webp" 9935 alt="" 9936 loading="lazy" 9937 draggable="false" 9938 /> 9939 </div> 9940 <div class="div-item-tags"> 9941 9942 9943 <p class="Text p-item-tag"> 9944 Ðеб-дизайн </p> 9945 9946 9947 <p class="Text p-item-tag"> 9948 ÐÑбÑм дизайнеÑам </p> 9949 9950 9951 </div> 9952 <p class="Text p-title"> 9953 Auto Layout в Figma: полнÑй гайд по адапÑивнÑм компоненÑам </p> 9954 </a> 9955 9956 9957 <a 9958 class="swiper-slide LinkContainer article" 9959 data-term-ids-json='[11]' 9960 href="https://yudaevschool.ru/blog/render-v-blender-cycles-ili-eevee-svet-kamera-kachestvo/" 9961 > 9962 <div class="div-img"> 9963 <img 9964 class="img" 9965 src="https://yudaevschool.ru/wp-content/uploads/2026/09/render-v-blender-oblozhka.webp" 9966 alt="" 9967 loading="lazy" 9968 draggable="false" 9969 /> 9970 </div> 9971 <div class="div-item-tags"> 9972 9973 9974 <p class="Text p-item-tag"> 9975 3D-дизайн </p> 9976 9977 9978 </div> 9979 <p class="Text p-title"> 9980 Ð ÐµÐ½Ð´ÐµÑ Ð² Blender: Cycles или Eevee, ÑвеÑ, камеÑа и наÑÑÑойки каÑеÑÑва </p> 9981 </a> 9982 9983 9984 <a 9985 class="swiper-slide LinkContainer article" 9986 data-term-ids-json='[8,10]' 9987 href="https://yudaevschool.ru/blog/interaktivnyy-prototip-v-figma/"
9988 > 9989 <div class="div-img"> 9990 <img 9991 class="img" 9992 src="https://yudaevschool.ru/wp-content/uploads/2026/08/interaktivnyy-prototip-v-figma.webp" 9993 alt="" 9994 loading="lazy" 9995 draggable="false" 9996 /> 9997 </div> 9998 <div class="div-item-tags"> 9999 10000 10001 <p class="Text p-item-tag"> 10002 UX/UI </p> 10003 10004 10005 <p class="Text p-item-tag"> 10006 Ðеб-дизайн </p> 10007 10008 10009 </div> 10010 <p class="Text p-title"> 10011 ÐнÑеÑакÑивнÑй пÑоÑоÑип в Figma: пеÑÐµÑ Ð¾Ð´Ñ, овеÑлеи и анимаÑÐ¸Ñ </p> 10012 </a> 10013 10014 10015 <a 10016 class="swiper-slide LinkContainer article" 10017 data-term-ids-json='[9,13]' 10018 href="https://yudaevschool.ru/blog/mudbord-dlya-dizajnera/" 10019 > 10020 <div class="div-img"> 10021 <img 10022 class="img" 10023 src="https://yudaevschool.ru/wp-content/uploads/2026/08/mudbord-dlya-dizajnera-oblozhka.webp" 10024 alt="" 10025 loading="lazy" 10026 draggable="false" 10027 /> 10028 </div> 10029 <div class="div-item-tags"> 10030 10031 10032 <p class="Text p-item-tag"> 10033 ÐÑаÑиÑеÑкий дизайн </p> 10034 10035 10036 <p class="Text p-item-tag"> 10037 ÐÑбÑм дизайнеÑам </p> 10038 10039 10040 </div> 10041 <p class="Text p-title"> 10042 ÐÑдбоÑд Ð´Ð»Ñ Ð´Ð¸Ð·Ð°Ð¹Ð½ÐµÑа: как ÑобÑаÑÑ Ð²Ð¸Ð·ÑалÑнÑÑ ÐºÐ¾Ð½ÑепÑÐ¸Ñ Ð¿ÑоекÑа </p> 10043 </a> 10044 10045 10046 <a 10047 class="swiper-slide LinkContainer article" 10048 data-term-ids-json='[9,13]' 10049 href="https://yudaevschool.ru/blog/firmennyy-stil-chto-eto-elementy-razrabotka/" 10050 > 10051 <div class="div-img"> 10052 <img 10053 class="img" 10054 src="https://yudaevschool.ru/wp-content/uploads/2026/08/firmennyy-stil-ajdentika-oblozhka.webp" 10055 alt="" 10056 loading="lazy" 10057 draggable="false" 10058 /> 10059 </div> 10060 <div class="div-item-tags"> 10061 10062 10063 <p class="Text p-item-tag"> 10064 ÐÑаÑиÑеÑкий дизайн </p> 10065 10066 10067 <p class="Text p-item-tag"> 10068 ÐÑбÑм дизайнеÑам </p> 10069 10070 10071 </div> 10072 <p class="Text p-title"> 10073 ФиÑменнÑй ÑÑилÑ: ÑÑо ÑÑо, из Ñего ÑоÑÑÐ¾Ð¸Ñ Ð°Ð¹Ð´ÐµÐ½Ñика и как ÐµÑ ÑазÑабоÑаÑÑ </p> 10074 </a> 10075 10076 10077 <a 10078 class="swiper-slide LinkContainer article" 10079 data-term-ids-json='[9,13]' 10080 href="https://yudaevschool.ru/blog/brendbuk-chto-vhodit-kak-sozdat/" 10081 > 10082 <div class="div-img"> 10083 <img 10084 class="img" 10085 src="https://yudaevschool.ru/wp-content/uploads/2026/08/brendbuk-oblozhka-3d.webp" 10086 alt="" 10087 loading="lazy" 10088 draggable="false" 10089 /> 10090 </div> 10091 <div class="div-item-tags"> 10092 10093 10094 <p class="Text p-item-tag"> 10095 ÐÑаÑиÑеÑкий дизайн </p> 10096 10097 10098 <p class="Text p-item-tag"> 10099 ÐÑбÑм дизайнеÑам </p> 10100 10101 10102 </div> 10103 <p class="Text p-title"> 10104 ÐÑендбÑк: ÑÑо Ð²Ñ Ð¾Ð´Ð¸Ñ, как ÑазÑабоÑаÑÑ Ð¸ оÑоÑмиÑÑ â Ñ Ð¿ÑимеÑами </p> 10105 </a> 10106 10107 10108 <a 10109 class="swiper-slide LinkContainer article" 10110 data-term-ids-json='[8,10]' 10111 href="https://yudaevschool.ru/blog/struktura-prodayushchego-lendinga/" 10112 > 10113 <div class="div-img"> 10114 <img 10115 class="img" 10116 src="https://yudaevschool.ru/wp-content/uploads/2026/08/titulnoe
10116-izobrazhenie-struktura-prodayushchego-lendinga.webp" 10117 alt="" 10118 loading="lazy" 10119 draggable="false" 10120 /> 10121 </div> 10122 <div class="div-item-tags"> 10123 10124 10125 <p class="Text p-item-tag"> 10126 UX/UI </p> 10127 10128 10129 <p class="Text p-item-tag"> 10130 Ðеб-дизайн </p> 10131 10132 10133 </div> 10134 <p class="Text p-title"> 10135 СÑÑÑкÑÑÑа пÑодаÑÑего лендинга: какие блоки нÑÐ¶Ð½Ñ Ð¸ в каком поÑÑдке </p> 10136 </a> 10137 10138 10139 <a 10140 class="swiper-slide LinkContainer article" 10141 data-term-ids-json='[9]' 10142 href="https://yudaevschool.ru/blog/dizajn-kartochek-wildberries-ozon/" 10143 > 10144 <div class="div-img"> 10145 <img 10146 class="img" 10147 src="https://yudaevschool.ru/wp-content/uploads/2026/08/01-glavnoe-izobrazhenie.webp" 10148 alt="" 10149 loading="lazy" 10150 draggable="false" 10151 /> 10152 </div> 10153 <div class="div-item-tags"> 10154 10155 10156 <p class="Text p-item-tag"> 10157 ÐÑаÑиÑеÑкий дизайн </p> 10158 10159 10160 </div> 10161 <p class="Text p-title"> 10162 Ðизайн каÑÑоÑек Ð´Ð»Ñ Wildberries и Ozon: инÑогÑаÑика, ÑÑÑÑкÑÑÑа и ÑазмеÑÑ </p> 10163 </a> 10164 10165 10166 <a 10167 class="swiper-slide LinkContainer article" 10168 data-term-ids-json='[13,16]' 10169 href="https://yudaevschool.ru/blog/bing-image-creator-obzor/" 10170 > 10171 <div class="div-img"> 10172 <img 10173 class="img" 10174 src="https://yudaevschool.ru/wp-content/uploads/2026/07/261.webp" 10175 alt="" 10176 loading="lazy" 10177 draggable="false" 10178 /> 10179 </div> 10180 <div class="div-item-tags"> 10181 10182 10183 <p class="Text p-item-tag"> 10184 ÐÑбÑм дизайнеÑам </p> 10185 10186 10187 <p class="Text p-item-tag"> 10188 ÐейÑоÑеÑи </p> 10189 10190 10191 </div> 10192 <p class="Text p-title"> 10193 Bing Image Creator: обзоÑ, возможноÑÑи и инÑÑÑÑкÑÐ¸Ñ Ð¿Ð¾ иÑполÑÐ·Ð¾Ð²Ð°Ð½Ð¸Ñ Ð² 2026 Ð³Ð¾Ð´Ñ </p> 10194 </a> 10195 10196 10197 <a 10198 class="swiper-slide LinkContainer article" 10199 data-term-ids-json='[13,16]' 10200 href="https://yudaevschool.ru/blog/nejroseti-dlya-upravleniya-proektami-chem-polzovatsya-dizajneru-i-na-chto-obratit-vnimanie/" 10201 > 10202 <div class="div-img"> 10203 <img 10204 class="img" 10205 src="https://yudaevschool.ru/wp-content/uploads/2026/07/1-1.webp" 10206 alt="" 10207 loading="lazy" 10208 draggable="false" 10209 /> 10210 </div> 10211 <div class="div-item-tags"> 10212 10213 10214 <p class="Text p-item-tag"> 10215 ÐÑбÑм дизайнеÑам </p> 10216 10217 10218 <p class="Text p-item-tag"> 10219 ÐейÑоÑеÑи </p> 10220 10221 10222 </div> 10223 <p class="Text p-title"> 10224 ÐейÑоÑеÑи Ð´Ð»Ñ ÑпÑÐ°Ð²Ð»ÐµÐ½Ð¸Ñ Ð¿ÑоекÑами: Ñем полÑзоваÑÑÑÑ Ð´Ð¸Ð·Ð°Ð¹Ð½ÐµÑÑ Ð¸ на ÑÑо обÑаÑиÑÑ Ð²Ð½Ð¸Ð¼Ð°Ð½Ð¸Ðµ </p> 10225 </a> 10226 10227 10228 <a 10229 class="swiper-slide LinkContainer article" 10230 data-term-ids-json='[13,16]' 10231 href="https://yudaevschool.ru/blog/10-nejrosetej-dlya-sozdaniya-logotipov-i-gerbov/" 10232 > 10233 <div class="div-img"> 10234 <img 10235 class="img" 10236 src="https://yudaevschool.ru/wp-content/uploads/2026/06/259.webp" 10237 alt="" 10238 loading="lazy" 10239 draggable="false" 10240 /> 10241 </div> 10242 <div class="div-item-tags"> 10243 10244 10245 <p class="Text p-item-tag"> 10246 ÐÑбÑм дизайнеÑам </p> 10247 10248 10249 <p class="Text p-item-tag"> 10250 ÐейÑоÑеÑи </p> 10251 10252 10253 </div> 10254 <p class="Text p-title"> 10255 10 нейÑоÑеÑей Ð´Ð»Ñ ÑÐ¾Ð·Ð´Ð°Ð½Ð¸Ñ Ð»Ð¾Ð³Ð¾Ñипов и геÑбов в 2026 Ð³Ð¾Ð´Ñ </p> 10256 </a> 10257 10258 10259 <a 10260 class="swiper-slide LinkContainer article" 10261 data-term-ids-json='[13,16]' 10262 href="https://yudaevschool.ru/blog/besplatnye-neyroseti-dlya-fotosessiy-po-foto/"
10263 > 10264 <div class="div-img"> 10265 <img 10266 class="img" 10267 src="https://yudaevschool.ru/wp-content/uploads/2026/06/201.png" 10268 alt="" 10269 loading="lazy" 10270 draggable="false" 10271 /> 10272 </div> 10273 <div class="div-item-tags"> 10274 10275 10276 <p class="Text p-item-tag"> 10277 ÐÑбÑм дизайнеÑам </p> 10278 10279 10280 <p class="Text p-item-tag"> 10281 ÐейÑоÑеÑи </p> 10282 10283 10284 </div> 10285 <p class="Text p-title"> 10286 ÐеÑплаÑнÑе 9 нейÑоÑеÑей Ð´Ð»Ñ ÑоÑоÑеÑÑий по ÑоÑо в 2026 годÑ: Ñоздаем ÑеалиÑÑиÑнÑе Ñнимки без ÑоÑогÑаÑа и ÑÑÑдии </p> 10287 </a> 10288 10289 10290 <a 10291 class="swiper-slide LinkContainer article" 10292 data-term-ids-json='[11,12]' 10293 href="https://yudaevschool.ru/blog/kak-sozdat-personazha-onlajn-besplatno/" 10294 > 10295 <div class="div-img"> 10296 <img 10297 class="img" 10298 src="https://yudaevschool.ru/wp-content/uploads/2026/05/1-2.webp" 10299 alt="" 10300 loading="lazy" 10301 draggable="false" 10302 /> 10303 </div> 10304 <div class="div-item-tags"> 10305 10306 10307 <p class="Text p-item-tag"> 10308 3D-дизайн </p> 10309 10310 10311 <p class="Text p-item-tag"> 10312 ÐоÑÑн-дизайн </p> 10313 10314 10315 </div> 10316 <p class="Text p-title"> 10317 ÐеÑплаÑнÑе конÑÑÑÑкÑоÑÑ, в коÑоÑÑÑ Ð¼Ð¾Ð¶Ð½Ð¾ ÑоздаÑÑ Ð¿ÐµÑÑонажа </p> 10318 </a> 10319 10320 10321 <a 10322 class="swiper-slide LinkContainer article" 10323 data-term-ids-json='[13,15]' 10324 href="https://yudaevschool.ru/blog/obrazovanie-posle-shkoly-kuda-poiti-uchitsya/" 10325 > 10326 <div class="div-img"> 10327 <img 10328 class="img" 10329 src="https://yudaevschool.ru/wp-content/uploads/2026/05/186.webp" 10330 alt="" 10331 loading="lazy" 10332 draggable="false" 10333 /> 10334 </div> 10335 <div class="div-item-tags"> 10336 10337 10338 <p class="Text p-item-tag"> 10339 ÐÑбÑм дизайнеÑам </p> 10340 10341 10342 <p class="Text p-item-tag"> 10343 ÐбÑазование </p> 10344 10345 10346 </div> 10347 <p class="Text p-title"> 10348 ÐбÑазование поÑле ÑколÑ: кÑда пойÑи ÑÑиÑÑÑÑ </p> 10349 </a> 10350 10351 10352 <a 10353 class="swiper-slide LinkContainer article" 10354 data-term-ids-json='[13,15]' 10355 href="https://yudaevschool.ru/blog/kem-rabotat-bez-opyta-i-obrazovaniya/" 10356 > 10357 <div class="div-img"> 10358 <img 10359 class="img" 10360 src="https://yudaevschool.ru/wp-content/uploads/2026/05/1.png" 10361 alt="" 10362 loading="lazy" 10363 draggable="false" 10364 /> 10365 </div> 10366 <div class="div-item-tags"> 10367 10368 10369 <p class="Text p-item-tag"> 10370 ÐÑбÑм дизайнеÑам </p> 10371 10372 10373 <p class="Text p-item-tag"> 10374 ÐбÑазование </p> 10375 10376 10377 </div> 10378 <p class="Text p-title"> 10379 Ðем ÑабоÑаÑÑ, еÑли ниÑего не ÑмееÑÑ, Ð½ÐµÑ Ð¾Ð±ÑÐ°Ð·Ð¾Ð²Ð°Ð½Ð¸Ñ Ð¸Ð»Ð¸ опÑÑа </p> 10380 </a> 10381 10382 10383 <a 10384 class="swiper-slide LinkContainer article" 10385 data-term-ids-json='[11,12]' 10386 href="https://yudaevschool.ru/blog/programmy-dlya-3d-modelirovaniya/" 10387 > 10388 <div class="div-img"> 10389 <img 10390 class="img" 10391 src="https://yudaevschool.ru/wp-content/uploads/2026/03/1-1.webp" 10392 alt="" 10393 loading="lazy" 10394 draggable="false" 10395 /> 10396 </div> 10397 <div class="div-item-tags"> 10398 10399 10400 <p class="Text p-item-tag"> 10401 3D-дизайн </p> 10402 10403 10404 <p class="Text p-item-tag"> 10405 ÐоÑÑн-дизайн </p> 10406 10407 10408 </div> 10409 <p class="Text p-title"> 10410 ÐÑÑÑие пÑогÑÐ°Ð¼Ð¼Ñ Ð´Ð»Ñ 3D-моделиÑÐ¾Ð²Ð°Ð½Ð¸Ñ Ð² 2026 Ð³Ð¾Ð´Ñ </p> 10411 </a> 10412 10413 10414 <a 10415 class="swiper-slide LinkContainer article" 10416 data-term-ids-json='[13,15]' 10417 href="https://yudaevschool.ru/blog/test-veklslera-zadac
10417hi-i-pravila-provedeniya/" 10418 > 10419 <div class="div-img"> 10420 <img 10421 class="img" 10422 src="https://yudaevschool.ru/wp-content/uploads/2026/03/1.webp" 10423 alt="" 10424 loading="lazy" 10425 draggable="false" 10426 /> 10427 </div> 10428 <div class="div-item-tags"> 10429 10430 10431 <p class="Text p-item-tag"> 10432 ÐÑбÑм дизайнеÑам </p> 10433 10434 10435 <p class="Text p-item-tag"> 10436 ÐбÑазование </p> 10437 10438 10439 </div> 10440 <p class="Text p-title"> 10441 ТеÑÑ ÐекÑлеÑа: задаÑи и пÑавила пÑÐ¾Ð²ÐµÐ´ÐµÐ½Ð¸Ñ </p> 10442 </a> 10443 10444 10445 <a 10446 class="swiper-slide LinkContainer article" 10447 data-term-ids-json='[13,15]' 10448 href="https://yudaevschool.ru/blog/izmenilsya-poryadok-priema-v-vuzy-2026/" 10449 > 10450 <div class="div-img"> 10451 <img 10452 class="img" 10453 src="https://yudaevschool.ru/wp-content/uploads/2026/02/1-4.webp" 10454 alt="" 10455 loading="lazy" 10456 draggable="false" 10457 /> 10458 </div> 10459 <div class="div-item-tags"> 10460 10461 10462 <p class="Text p-item-tag"> 10463 ÐÑбÑм дизайнеÑам </p> 10464 10465 10466 <p class="Text p-item-tag"> 10467 ÐбÑазование </p> 10468 10469 10470 </div> 10471 <p class="Text p-title"> 10472 ÐзменилÑÑ Ð¿Ð¾ÑÑдок пÑиÑма в вÑÐ·Ñ Ð² 2026 Ð³Ð¾Ð´Ñ </p> 10473 </a> 10474 10475 10476 <a 10477 class="swiper-slide LinkContainer article" 10478 data-term-ids-json='[14,13]' 10479 href="https://yudaevschool.ru/blog/sekret-genialnosti-chernogo-kvadrata-malevicha/" 10480 > 10481 <div class="div-img"> 10482 <img 10483 class="img" 10484 src="https://yudaevschool.ru/wp-content/uploads/2026/02/chernyj-kvadrat-molevicha.jpeg" 10485 alt="" 10486 loading="lazy" 10487 draggable="false" 10488 /> 10489 </div> 10490 <div class="div-item-tags"> 10491 10492 10493 <p class="Text p-item-tag"> 10494 ÐÑкÑÑÑÑво </p> 10495 10496 10497 <p class="Text p-item-tag"> 10498 ÐÑбÑм дизайнеÑам </p> 10499 10500 10501 </div> 10502 <p class="Text p-title"> 10503 Ð ÑÑм ÑекÑÐµÑ Ð³ÐµÐ½Ð¸Ð°Ð»ÑноÑÑи «ЧÑÑного квадÑаÑа» ÐалевиÑа </p> 10504 </a> 10505 10506 10507 <a 10508 class="swiper-slide LinkContainer article" 10509 data-term-ids-json='[11,8,12]' 10510 href="https://yudaevschool.ru/blog/programmy-dlya-sozdaniya-animacii/" 10511 > 10512 <div class="div-img"> 10513 <img 10514 class="img" 10515 src="https://yudaevschool.ru/wp-content/uploads/2025/11/4.webp" 10516 alt="" 10517 loading="lazy" 10518 draggable="false" 10519 /> 10520 </div> 10521 <div class="div-item-tags"> 10522 10523 10524 <p class="Text p-item-tag"> 10525 3D-дизайн </p> 10526 10527 10528 <p class="Text p-item-tag"> 10529 UX/UI </p> 10530 10531 10532 <p class="Text p-item-tag"> 10533 ÐоÑÑн-дизайн </p> 10534 10535 10536 </div> 10537 <p class="Text p-title"> 10538 12 попÑлÑÑнÑÑ Ð¿ÑогÑамм Ð´Ð»Ñ ÑÐ¾Ð·Ð´Ð°Ð½Ð¸Ñ Ð°Ð½Ð¸Ð¼Ð°Ñии </p> 10539 </a> 10540 10541 10542 <a 10543 class="swiper-slide LinkContainer article" 10544 data-term-ids-json='[12]' 10545 href="https://yudaevschool.ru/blog/davinci-resolve-videoredaktor-dlya-montaja/" 10546 > 10547 <div class="div-img"> 10548 <img 10549 class="img" 10550 src="https://yudaevschool.ru/wp-content/uploads/2025/10/01-1.png" 10551 alt="" 10552 loading="lazy" 10553 draggable="false" 10554 /> 10555 </div> 10556 <div class="div-item-tags"> 10557 10558 10559 <p class="Text p-item-tag"> 10560 ÐоÑÑн-дизайн </p> 10561 10562 10563 </div> 10564 <p class="Text p-title"> 10565 DaVinci Resolve: Ð¾Ð±Ð·Ð¾Ñ Ð¿ÑогÑаммÑ, Ñена и возможнÑе аналоги </p> 10566 </a> 10567 10568 10569 </div> 10570 <div class="div-scrollbar"> 10571 <div class="swiper-scrollbar"></div> 10572 <img class="img-swiper-nav ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new--reversed.svg" alt="" draggable="false" /> <img class="img-swiper-nav ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" /> </div> 10573 </div> 10574</section> 10575
10576<script type="module"> 10577 const swiperTags = new Swiper('#page-blog-recent .div-swiper-tags', { 10578 slidesPerView: 'auto', 10579 spaceBetween: 12, 10580 loop: false 10581 }); 10582 10583 const swiperArticles = new Swiper('#page-blog-recent .div-swiper-articles', { 10584 slidesPerView: 'auto', 10585 loop: false, 10586 spaceBetween: 8, 10587 navigation: { 10588 prevEl: '#page-blog-recent .img-swiper-nav:first-of-type', 10589 nextEl: '#page-blog-recent .img-swiper-nav:last-of-type' 10590 }, 10591 scrollbar: { 10592 el: '#page-blog-recent .swiper-scrollbar' 10593 }, 10594 }); 10595 10596 const pageBlogRecent = document.querySelector('#page-blog-recent'); 10597 const pTagAll = pageBlogRecent.querySelectorAll('.p-tag'); 10598 const articleAll = pageBlogRecent.querySelectorAll('.article'); 10599 10600 pTagAll.forEach(element => { 10601 element.onclick = () => { 10602 pTagAll.forEach(otherElement => otherElement.classList.remove('--is-selected')); 10603 10604 element.classList.add('--is-selected'); 10605 10606 // Note the `+` 10607 const selectedDataTermId = + element.getAttribute('data-term-id'); 10608 10609 articleAll.forEach(articleElement => articleElement.classList.remove('--is-hidden')); 10610 10611 if (selectedDataTermId !== -1) { 10612 articleAll.forEach(articleElement => { 10613 // Note the `+` 10614 const articleDataTermIds = JSON.parse(articleElement.getAttribute('data-term-ids-json')); 10615 if (! articleDataTermIds.includes(selectedDataTermId)) { 10616 articleElement.classList.add('--is-hidden'); 10617 } 10618 }) 10619 } 10620 10621 swiperArticles.update(); 10622 } 10623 }); 10624</script>
10624 10625 10626 10627 <style> 10628 #page-blog-other { 10629 margin-block-end: clamp(8rem, calc(8rem + (15 - 8) * ((100dvw - 37.5rem) / (144 - 37.5))), 15rem); 10630 10631 .swiper { 10632 overflow: unset; 10633 } 10634 10635 .swiper-wrapper { 10636 box-sizing: border-box; 10637 } 10638 10639 .swiper-scrollbar { 10640 background-color: #e6e6e6; 10641 border-radius: 100rem; 10642 bottom: unset; 10643 height: 0.3rem; 10644 left: 0; 10645 overflow: hidden; 10646 position: relative; 10647 translate: 0 -1rem; 10648 width: 100%; 10649 } 10650 10651 .swiper-scrollbar-drag { 10652 background-color: var(--black); 10653 } 10654 10655 .div-scrollbar { 10656 align-items: center; 10657 display: flex; 10658 margin-block-start: 4rem; 10659 } 10660 10661 .img-swiper-nav { 10662 border-radius: 100rem; 10663 cursor: pointer; 10664 height: 6rem; 10665 object-fit: scale-down; 10666 width: 6rem; 10667 margin-block-end: 2rem; 10668 10669 & + & { 10670 margin-inline-start: 1.2rem; 10671 } 10672 10673 &:nth-of-type(1) { 10674 margin-inline-start: 4.8rem; 10675 } 10676 } 10677 10678 .h2 { 10679 font-family: 'Loos'; 10680 font-size: clamp(3.2rem, calc(3.2rem + (4 - 3.2) * ((100dvw - 37.5rem) / (144 - 37.5))), 4rem); 10681 font-variation-settings: "wdth" 1000; 10682 font-weight: 700; 10683 line-height: 100%; 10684 margin-block-end: 4rem; 10685 text-wrap: pretty; 10686 width: fit-content; 10687 } 10688 10689 .div-item { 10690 height: clamp(33.5rem, calc(33.5rem + (40 - 33.5) * ((100dvw - 37.5rem) / (144 - 37.5))), 40rem); 10691 position: relative; 10692 width: clamp(33.5rem, calc(33.5rem + (60 - 33.5) * ((100dvw - 37.5rem) / (144 - 37.5))), 60rem); 10693 } 10694 10695 .div-img { 10696 border-radius: clamp(1.6rem, calc(2.4rem + (1.6 - 2.4) * ((100dvw - 37.5rem) / (144 - 37.5))), 2.4rem); 10697 display: flex; 10698 height: 100%; 10699 justify-content: center; 10700 overflow: hidden; 10701 width: 100%; 10702 } 10703 10704 .img { 10705 height: 100%; 10706 width: 100%; 10707 object-fit: cover; 10708 } 10709 10710 .p-title { 10711 font-size: 2rem; 10712 font-weight: 700; 10713 line-height: 130%; 10714 margin-block-end: 1.2rem; 10715 width: fit-content; 10716 } 10717 10718 .div-text { 10719 bottom: 0; 10720 left: 0; 10721 position: absolute; 10722 width: 100%; 10723 padding: 2.4rem; 10724 } 10725 10726 .p-badge { 10727 align-items: center; 10728 background-color: color-mix(in srgb, white 40%, transparent); 10729 border-radius: 100rem; 10730 box-shadow: 0 0.2rem 1rem color-mix(in srgb, black 5%, transparent); 10731 color: color-mix(in srgb, black 40%, transparent); 10732 display: flex; 10733 font-size: 1.3rem; 10734 font-weight: 600; 10735 gap: 1rem; 10736 line-height: 130%; 10737 margin-block-end: 1.5rem; 10738 padding: 0.3rem 1.2rem 0.3rem 0.3rem; 10739 width: fit-content; 10740 } 10741 10742 .img-icon { 10743 border-radius: 100rem; 10744 box-shadow: 0 0.2rem 0.5rem color-mix(in srgb, black 10%, transparent); 10745 height: 2rem; 10746 width: 2rem; 10747 } 10748 10749 .p-description { 10750 color: color-mix(in srgb, black 40%, transparent); 10751 padding-inline-end: 8rem; 10752 text-wrap: balance; 10753 font-size: 1.4rem; 10754 } 10755 10756 .img-arrow { 10757 border-radius: 100rem; 10758 bottom: 2.8rem; 10759 height: 6rem; 10760 object-fit: scale-down; 10761 position: absolute; 10762 right: 2.4rem; 10763 width: 6rem; 10764 10765 .div-item:hover & { 10766 box-shadow: 10767 0rem 0rem 2.4rem color-mix(in srgb, #CFFF32 70%, transparent), 10768 0rem 0.4rem 0.8rem color-mix(in srgb, black 0%, transparent), 10769 inset 0rem 0rem 0.3rem 0.1rem color-mix(in srgb, white 90%, transparent), 10770 inset 0rem 0rem 0.3rem 0.1rem color-mix(in srgb, white 90%, transparent), 10771 inset 0rem 0rem 2.5rem 0 color-mix(in srgb, white 100%, transparent) 10772 ; 10773 } 10774 10775 .div-item:active & { 10776 transition: var(--animation); 10777 opacity: 0.8; 10778 translate: 0 0.2rem; 10779 scale: 1 0.98; 10780 box-shadow: 10781 0rem 0rem 2.4rem 0.2rem color-mix(in srgb, #CFFF32 100%, transparent), 10782 0rem 0.4rem 0.8rem color-mix(in srgb, black 0%, transparent), 10783 inset 0rem 0rem 0.3rem 0.1rem color-mix(in srgb, white 90%, transparent), 10784 inset 0rem 0rem 0.3rem 0.1rem color-mix(in srgb, white 95%, transparent), 10785 inset 0rem 0rem 2rem 0 color-mix(in srgb, white 100%, transparent) 10786 ; 10787 } 10788 } 10789 10790 @media (width <= 850px) { 10791 .img-arrow { 10792 display: none; 10793 } 10794 10795 .p-description { 10796 padding: 0; 10797 } 10798 10799 .div-item { 10800 height: unset; 10801 } 10802 10803 .div-img { 10804 aspect-ratio: 1 / 1; 10805 box-shadow: 0 0.6rem 1.5rem color-mix(in srgb, black 7%, transparent); 10806 height: unset; 10807 position: relative; 10808 width: 100%; 10809 10810 &:after { 10811 border-radius: 2rem; 10812 box-shadow: inset 0 0 2.5rem 0.2rem white; 10813 content: ''; 10814 height: 100%; 10815 left: 0; 10816 position: absolute; 10817 top: 0; 10818 width: 100%; 10819 } 10820 } 10821 10822 .div-text { 10823 position: relative; 10824 padding: 0; 10825 10826 padding-block-start: 1.5rem; 10827 } 10828 } 10829 10830 @media (width <= 720px) { 10831 .img-swiper-nav { 10832 display: none; 10833 } 10834 } 10835 } 10836</style> 10837 10838<section id="page-blog-other" class="Centered"> 10839 <h2 class="Text h2">ÐÑе каÑегоÑии</h2> 10840 <div class="swiper div-items"> 10841 <div class="swiper-wrapper"> 10842 10843 10844 <a 10845 class="swiper-slide LinkContainer div-item" 10846 href="https://yudaevschool.ru/teg/3d-dizajn/" 10847 >
10848 <img class="img-arrow ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" /> <div class="div-img"> 10849 <img 10850 class="img" 10851 src="https://yudaevschool.ru/wp-content/uploads/2025/09/3d-dizajn.png" 10852 loading="lazy" 10853 draggable="false" 10854 alt="" 10855 /> 10856 </div> 10857 <div class="div-text"> 10858 <div class="Text p-badge"> 10859 <img class="img-icon" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/sparkles.webp" alt="" draggable="false" /> ÐаÑегоÑÐ¸Ñ 10860 </div> 10861 <p class="Text p-title"> 10862 3D-дизайн </p> 10863 <p class="Text p-description"> 10864 Ðа данной ÑÑÑаниÑе блога ÑобÑÐ°Ð½Ñ Ð²Ñе маÑеÑÐ¸Ð°Ð»Ñ Ð² ÑемаÑике "3D-дизайн". </p> 10865 </div> 10866 </a> 10867 10868 10869 <a 10870 class="swiper-slide LinkContainer div-item" 10871 href="https://yudaevschool.ru/teg/ux-ui/" 10872 >
10873 <img class="img-arrow ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" /> <div class="div-img"> 10874 <img 10875 class="img" 10876 src="https://yudaevschool.ru/wp-content/uploads/2025/09/ui-dizajn-1.png" 10877 loading="lazy" 10878 draggable="false" 10879 alt="" 10880 /> 10881 </div> 10882 <div class="div-text"> 10883 <div class="Text p-badge"> 10884 <img class="img-icon" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/sparkles.webp" alt="" draggable="false" /> ÐаÑегоÑÐ¸Ñ 10885 </div> 10886 <p class="Text p-title"> 10887 UX/UI </p> 10888 <p class="Text p-description"> 10889 Ðа ÑÑой ÑÑÑаниÑе ÑобÑÐ°Ð½Ñ Ð²Ñе ÑÑаÑÑи в ÑемаÑике UX/UI. </p> 10890 </div> 10891 </a> 10892 10893 10894 <a 10895 class="swiper-slide LinkContainer div-item" 10896 href="https://yudaevschool.ru/teg/veb-dizajn/" 10897 >
10898 <img class="img-arrow ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" /> <div class="div-img"> 10899 <img 10900 class="img" 10901 src="https://yudaevschool.ru/wp-content/uploads/2026/03/veb-dizajn.webp" 10902 loading="lazy" 10903 draggable="false" 10904 alt="" 10905 /> 10906 </div> 10907 <div class="div-text"> 10908 <div class="Text p-badge"> 10909 <img class="img-icon" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/sparkles.webp" alt="" draggable="false" /> ÐаÑегоÑÐ¸Ñ 10910 </div> 10911 <p class="Text p-title"> 10912 Ðеб-дизайн </p> 10913 <p class="Text p-description"> 10914 Ðа данной ÑÑÑаниÑе ÑобÑÐ°Ð½Ñ Ð²Ñе ÑÑаÑÑи в ÑемаÑике веб-дизайна </p> 10915 </div> 10916 </a> 10917 10918 10919 <a 10920 class="swiper-slide LinkContainer div-item" 10921 href="https://yudaevschool.ru/teg/graficheskij-dizajn/" 10922 >
10923 <img class="img-arrow ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" /> <div class="div-img"> 10924 <img 10925 class="img" 10926 src="https://yudaevschool.ru/wp-content/uploads/2025/09/graficheskij-dizajn.png" 10927 loading="lazy" 10928 draggable="false" 10929 alt="" 10930 /> 10931 </div> 10932 <div class="div-text"> 10933 <div class="Text p-badge"> 10934 <img class="img-icon" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/sparkles.webp" alt="" draggable="false" /> ÐаÑегоÑÐ¸Ñ 10935 </div> 10936 <p class="Text p-title"> 10937 ÐÑаÑиÑеÑкий дизайн </p> 10938 <p class="Text p-description"> 10939 Ðа данной ÑÑÑаниÑе ÑобÑÐ°Ð½Ñ Ð²Ñе ÑÑаÑÑи в ÑемаÑике гÑаÑиÑеÑкого дизайна. </p> 10940 </div> 10941 </a> 10942 10943 10944 <a 10945 class="swiper-slide LinkContainer div-item" 10946 href="https://yudaevschool.ru/teg/iskusstvo/" 10947 >
10948 <img class="img-arrow ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" /> <div class="div-img"> 10949 <img 10950 class="img" 10951 src="https://yudaevschool.ru/wp-content/uploads/2026/03/iskusstvo.webp" 10952 loading="lazy" 10953 draggable="false" 10954 alt="" 10955 /> 10956 </div> 10957 <div class="div-text"> 10958 <div class="Text p-badge"> 10959 <img class="img-icon" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/sparkles.webp" alt="" draggable="false" /> ÐаÑегоÑÐ¸Ñ 10960 </div> 10961 <p class="Text p-title"> 10962 ÐÑкÑÑÑÑво </p> 10963 <p class="Text p-description"> 10964 Ðа данной ÑÑÑаниÑе ÑобÑÐ°Ð½Ñ Ð²Ñе ÑÑаÑÑи в ÑемаÑике ÑазлиÑнÑÑ Ð²Ð¸Ð´Ð¾Ð² иÑкÑÑÑÑва. </p> 10965 </div> 10966 </a> 10967 10968 10969 <a 10970 class="swiper-slide LinkContainer div-item" 10971 href="https://yudaevschool.ru/teg/lyubym-dizajneram/" 10972 >
10973 <img class="img-arrow ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" /> <div class="div-img"> 10974 <img 10975 class="img" 10976 src="https://yudaevschool.ru/wp-content/uploads/2026/03/lyubym-dizajneram.webp" 10977 loading="lazy" 10978 draggable="false" 10979 alt="" 10980 /> 10981 </div> 10982 <div class="div-text"> 10983 <div class="Text p-badge"> 10984 <img class="img-icon" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/sparkles.webp" alt="" draggable="false" /> ÐаÑегоÑÐ¸Ñ 10985 </div> 10986 <p class="Text p-title"> 10987 ÐÑбÑм дизайнеÑам </p> 10988 <p class="Text p-description"> 10989 Ðа данной ÑÑÑаниÑе ÑайÑа ÑобÑÐ°Ð½Ñ ÑÑаÑÑи, коÑоÑÑе Ð¿Ð¾Ð´Ñ Ð¾Ð´ÑÑ Ð²Ñем дизайнеÑам. </p> 10990 </div> 10991 </a> 10992 10993 10994 <a 10995 class="swiper-slide LinkContainer div-item" 10996 href="https://yudaevschool.ru/teg/moushn-dizajn/" 10997 >
10998 <img class="img-arrow ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" /> <div class="div-img"> 10999 <img 11000 class="img" 11001 src="https://yudaevschool.ru/wp-content/uploads/2026/03/moushn-dizajn.webp" 11002 loading="lazy" 11003 draggable="false" 11004 alt="" 11005 /> 11006 </div> 11007 <div class="div-text"> 11008 <div class="Text p-badge"> 11009 <img class="img-icon" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/sparkles.webp" alt="" draggable="false" /> ÐаÑегоÑÐ¸Ñ 11010 </div> 11011 <p class="Text p-title"> 11012 ÐоÑÑн-дизайн </p> 11013 <p class="Text p-description"> 11014 Ðа ÑÑой ÑÑÑаниÑе ÑобÑÐ°Ð½Ñ Ð²Ñе ÑÑаÑÑи в ÑемаÑике моÑÑн-дизайна. </p> 11015 </div> 11016 </a> 11017 11018 11019 <a 11020 class="swiper-slide LinkContainer div-item" 11021 href="https://yudaevschool.ru/teg/nejroseti/" 11022 >
11023 <img class="img-arrow ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" /> <div class="div-img"> 11024 <img 11025 class="img" 11026 src="https://yudaevschool.ru/wp-content/uploads/2026/03/nejroseti.webp" 11027 loading="lazy" 11028 draggable="false" 11029 alt="" 11030 /> 11031 </div> 11032 <div class="div-text"> 11033 <div class="Text p-badge"> 11034 <img class="img-icon" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/sparkles.webp" alt="" draggable="false" /> ÐаÑегоÑÐ¸Ñ 11035 </div> 11036 <p class="Text p-title"> 11037 ÐейÑоÑеÑи </p> 11038 <p class="Text p-description"> 11039 Ðа данной ÑÑÑаниÑе ÑайÑа ÑобÑÐ°Ð½Ñ ÑÑаÑÑи по нейÑоÑеÑÑм Ð´Ð»Ñ Ð´Ð¸Ð·Ð°Ð¹Ð½ÐµÑов. </p> 11040 </div> 11041 </a> 11042 11043 11044 <a 11045 class="swiper-slide LinkContainer div-item" 11046 href="https://yudaevschool.ru/teg/obrazovanie/" 11047 >
11048 <img class="img-arrow ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" /> <div class="div-img"> 11049 <img 11050 class="img" 11051 src="https://yudaevschool.ru/wp-content/uploads/2026/03/obuchenie.webp" 11052 loading="lazy" 11053 draggable="false" 11054 alt="" 11055 /> 11056 </div> 11057 <div class="div-text"> 11058 <div class="Text p-badge"> 11059 <img class="img-icon" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/sparkles.webp" alt="" draggable="false" /> ÐаÑегоÑÐ¸Ñ 11060 </div> 11061 <p class="Text p-title"> 11062 ÐбÑазование </p> 11063 <p class="Text p-description"> 11064 Ðа данной ÑÑÑаниÑе ÑайÑа ÑобÑÐ°Ð½Ñ ÑÑаÑÑи в ÑемаÑике "ÐбÑазование". </p> 11065 </div> 11066 </a> 11067 11068 11069 </div> 11070 <div class="div-scrollbar"> 11071 <div class="swiper-scrollbar"></div> 11072 <img class="img-swiper-nav ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new--reversed.svg" alt="" draggable="false" /> <img class="img-swiper-nav ButtonEffect" loading="eager"/ decoding="async" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/img/blog-arrow-new.svg" alt="" draggable="false" /> </div> 11073 </div> 11074</section> 11075
11076<script type="module"> 11077 const swiper = new Swiper('#page-blog-other .swiper', { 11078 slidesPerView: 'auto', 11079 spaceBetween: 20, 11080 loop: false, 11081 scrollbar: { 11082 el: '#page-blog-other .swiper-scrollbar' 11083 }, 11084 navigation: { 11085 prevEl: '#page-blog-other .img-swiper-nav:first-of-type', 11086 nextEl: '#page-blog-other .img-swiper-nav:last-of-type' 11087 } 11088 }); 11089</script>
11089 11090 11091</main> 11092 11093<footer class="footer --is-to-be-revealed"> 11094 <div class="footer__container container gradient-border"> 11095 <div class="footer__logo-section"> 11096 <div class="footer__logo gradient-border"><img loading="lazy" src="/main-page/assets/images/logo.svg" alt="ÐогоÑип" /></div> 11097 <div class="footer__title"> 11098 <span class="footer__title-main">ÐÑоÑеÑÑионалÑное обÑÑение дизайнÑ</span><br /> 11099 <span class="footer__title-sub">Ñ Ð´Ð¸Ð¿Ð»Ð¾Ð¼Ð¾Ð¼ и беÑÑÑоÑной каÑÑеÑной поддеÑжкой</span><br /> 11100 <span class="footer__copyright">© 2026</span> 11101 </div> 11102 <div class="footer__info-wrapper"> 11103 <div class="footer__info">ÐÐÐ ÐÐÐ "ÐЦÐÐ"<br /><br /> 11104ÐÐÐ 7708398416<br /><br /> 11105107113, гоÑод ÐоÑква,<br /><br /> 11106СоколÑниÑеÑÐºÐ°Ñ Ð¿Ð», д. 4а, помеÑ. 12/4</div> 11107 <div class="footer__links"> 11108 <a class="footer__link" href="https://yudaevschool.ru/oferta">ÐÐ¾Ð³Ð¾Ð²Ð¾Ñ Ð¾ÑеÑÑÑ</a> 11109 <a class="footer__link" href="/privacy">ÐолиÑика конÑиденÑиалÑноÑÑи</a> 11110 </div> 11111 </div> 11112 </div> 11113 <div class="footer__right-section"> 11114 <div class="footer__social-section"> 11115 <a class="footer__social-item" href="https://www.behance.net/yudaev-school"> 11116 <div class="footer__social-icon"> 11117 <img class="footer__social-img" loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/be.svg" alt="" /> 11118 </div> 11119 <span class="footer__social-name">Behance</span> 11120 </a> 11121 <a class="footer__social-item" href="https://www.pinterest.com/YudaevSchool/"> 11122 <div class="footer__social-icon"> 11123 <img class="footer__social-img" loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/pint.svg" alt="" /> 11124 </div> 11125 <span class="footer__social-name">Pinterest</span> 11126 </a> 11127 <a class="footer__social-item" href="https://t.me/yuadevschoolmanagerbot"> 11128 <div class="footer__social-icon"> 11129 <img class="footer__social-img" loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/tg.svg" alt="" /> 11130 </div> 11131 <span class="footer__social-name">Telegram</span> 11132 </a> 11133 <a class="footer__social-item" href="https://vk.com/yudaevschool"> 11134 <div class="footer__social-icon"> 11135 <img class="footer__social-img" loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/vk.svg" alt="" /> 11136 </div> 11137 <span class="footer__social-name">VK</span> 11138 </a> 11139 <a class="footer__social-item" href="https://www.youtube.com/@yudaev_digital"> 11140 <div class="footer__social-icon"> 11141 <img class="footer__social-img" loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/yt.svg" alt="" /> 11142 </div> 11143 <span class="footer__social-name">YouTube</span> 11144 </a> 11145 </div> 11146 <div class="footer__bottom-section"> 11147 <div class="footer__courses-section"> 11148 <p class="footer__courses-title">ÐУРСЫ</p> 11149 <div class="footer__courses-links"> 11150 <a class="footer__course-link" href="https://yudaevschool.ru/digital-designer/"> 11151 Digital-Ð´Ð¸Ð·Ð°Ð¹Ð½ÐµÑ </a> 11152 <a class="footer__c
11152ourse-link" href="https://yudaevschool.ru/uxui-prof/"> 11153 UX / UI Ð´Ð¸Ð·Ð°Ð¹Ð½ÐµÑ </a> 11154 <a class="footer__course-link" href="https://yudaevschool.ru/3d-prof/"> 11155 3D-визÑализаÑÐ¾Ñ </a> 11156 <a class="footer__course-link" href="https://yudaevschool.ru/graf-diz/"> 11157 ÐÑаÑиÑеÑкий Ð´Ð¸Ð·Ð°Ð¹Ð½ÐµÑ </a> 11158 <a class="footer__course-link" href="https://yudaevschool.ru/ai-specialist/"> 11159 ÐÑÑÑ Ð¿Ð¾ нейÑоÑеÑÑм </a> 11160 </div> 11161 <div class="footer__additional-links"> 11162 <a class="footer__additional-link" href="https://yudaevschool.ru/blog"> 11163 Ðлог </a> 11164 </div> 11165 </div> 11166 <div class="footer__contacts-messengers-wrapper"> 11167 <div class="footer__contacts-section"> 11168 <p class="footer__contacts-title">ÐÐÐТÐÐТЫ</p> 11169 <div class="footer__phone-block"><span class="footer__contact-label">ÐÑдел возвÑаÑов и пÑеÑензий:</span><br><a class="footer__contact-phone" href="tel:+74951359220">+7 495 135 92 20</a></div> <div class="footer__phone-block"><span class="footer__contact-label">ÐопÑоÑÑ Ð¿Ð¾ покÑпке, оплаÑе и ÑодеÑÐ¶Ð°Ð½Ð¸Ñ ÐºÑÑÑов:</span><br><a class="footer__contact-phone" href="tel:+78005116207">+7 800 511 62 07</a></div> <a class="footer__contact-item" href="mailto:[email protected]">[email protected]</a><br /><br /> </div> 11170 <div class="footer__messengers-section"> 11171 <p class="footer__messengers-title">ÐÐССÐÐÐÐÐРЫ</p> 11172 <div class="footer__messengers-buttons"> 11173 <a class="footer__messenger-button" href="https://t.me/yuadevschoolmanagerbot"> 11174 Telegram </a> 11175 </div> 11176 </div> 11177 </div> 11178 </div> 11179 </div> 11180 <div class="footer__mobile-social-section"> 11181 <p class="footer__socials-title">СÐЦ. СÐТÐ</p> 11182 <div class="footer__mobile-social-grid"> 11183 <a href="https://www.behance.net/yudaev-school"> 11184 <div class="footer__social-item"> 11185 <div class="footer__social-icon"> 11186 <img class="footer__social-img" loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/be.svg" alt="Behance" /> 11187 </div> 11188 <span class="footer__social-name"> 11189 Behance </span> 11190 </div> 11191 </a> 11192 <a href="https://www.pinterest.com/YudaevSchool/"> 11193 <div class="footer__social-item"> 11194 <div class="footer__social-icon"> 11195 <img class="footer__social-img" loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/pint.svg" alt="Pinterest" /> 11196 </div> 11197 <span class="footer__social-name"> 11198 Pinterest </span> 11199 </div> 11200 </a> 11201 <a href="https://t.me/yuadevschoolmanagerbot"> 11202 <div class="footer__social-item"> 11203 <div class="footer__social-icon"> 11204 <img class="footer__social-img" loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/tg.svg" alt="Telegram" /> 11205 </div>
11206 <span class="footer__social-name"> 11207 Telegram </span> 11208 </div> 11209 </a> 11210 <a href="https://vk.com/yudaevschool"> 11211 <div class="footer__social-item"> 11212 <div class="footer__social-icon"> 11213 <img class="footer__social-img" loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/vk.svg" alt="VK" /> 11214 </div> 11215 <span class="footer__social-name"> 11216 VK </span> 11217 </div> 11218 </a> 11219 <a href="https://www.youtube.com/@yudaev_digital"> 11220 <div class="footer__social-item"> 11221 <div class="footer__social-icon"> 11222 <img class="footer__social-img" loading="lazy" src="https://yudaevschool.ru/wp-content/uploads/2025/09/yt.svg" alt="YouTube" /> 11223 </div> 11224 <span class="footer__social-name"> 11225 YouTube </span> 11226 </div> 11227 </a> 11228 </div> 11229 </div> 11230 <div class="footer__divider"></div> 11231 </div> 11232</footer> 11233 11234 <style> 11235 /** 11236 * Animation variables are defined here 11237 * to prevent unwanted animations on the page load. 11238 */ 11239 11240 :root { 11241 --animation--slowest: 0.6s cubic-bezier(0.550, 0.385, 0.355, 1.000); 11242 --animation--slower: 0.4s cubic-bezier(0.550, 0.385, 0.355, 1.000); 11243 --animation--slow: 0.2s cubic-bezier(0.550, 0.385, 0.355, 1.000); 11244 --animation: 0.1s cubic-bezier(0.550, 0.385, 0.355, 1.000); 11245 } 11246 </style> 11247 11248
11248<script type="text/javascript" src="https://yudaevschool.ru/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script>
vendor: 1 bytes, line 11248
11248
11249<script type="text/javascript" src="https://yudaevschool.ru/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script>
vendor: 1 bytes, line 11249
11249
11250<script type="text/javascript" id="wp-i18n-js-after"> 11251/* <![CDATA[ */ 11252wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); 11253/* ]]> */ 11254</script>
vendor: 1 bytes, line 11254
11254
11255<script type="text/javascript" src="https://yudaevschool.ru/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.1.5" id="swv-js"></script>
vendor: 1 bytes, line 11255
11255
11256<script type="text/javascript" id="contact-form-7-js-translations"> 11257/* <![CDATA[ */ 11258( function( domain, translations ) { 11259 var localeData = translations.locale_data[ domain ] || translations.locale_data.messages; 11260 localeData[""].domain = domain; 11261 wp.i18n.setLocaleData( localeData, domain ); 11262} )( "contact-form-7", {"translation-revision-date":"2026-02-09 17:37:19+0000","generator":"GlotPress\/4.0.3","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural-forms":"nplurals=3; plural=(n % 10 == 1 && n % 100 != 11) ? 0 : ((n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 12 || n % 100 > 14)) ? 1 : 2);","lang":"ru"},"This contact form is placed in the wrong place.":["\u042d\u0442\u0430 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043d\u0430\u044f \u0444\u043e\u0440\u043c\u0430 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0430 \u0432 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435."],"Error:":["\u041e\u0448\u0438\u0431\u043a\u0430:"]}},"comment":{"reference":"includes\/js\/index.js"}} ); 11263/* ]]> */ 11264</script>
vendor: 1 bytes, line 11264
11264
11265<script type="text/javascript" id="contact-form-7-js-before"> 11266/* <![CDATA[ */ 11267var wpcf7 = { 11268 "api": { 11269 "root": "https:\/\/yudaevschool.ru\/wp-json\/", 11270 "namespace": "contact-form-7\/v1" 11271 } 11272}; 11273/* ]]> */ 11274</script>
vendor: 1 bytes, line 11274
11274
11275<script type="text/javascript" src="https://yudaevschool.ru/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.1.5" id="contact-form-7-js"></script>
vendor: 1 bytes, line 11275
11275
11276<script type="text/javascript" src="https://yudaevschool.ru/wp-content/themes/yudaev/assets/js/header-burger.js?ver=1.0.1" id="yudaev-header-burger-js"></script>
11276 11277 </body> 11278</html> 11279<!-- 11280Performance optimized by Redis Object Cache. Learn more: https://wprediscache.com 11281 11282ÐолÑÑено 3956 обÑекÑов (4 ÐÐ) Ð¾Ñ Redis ÑеÑез PhpRedis (v5.3.7). 11283-->
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.