html {
overflow-x: hidden;
scroll-behavior: smooth;
}
.about-list__list-item {
font-size: 23px;
}
.about-list__item.active {
transition: all .6s ease;
}
.about-list__item.active svg {
transform: rotate(180deg);
}
.news_single.news_single_column.castom-el1 .news_single__left {
margin: 0 !important;
}
.news_single.news_single_column.castom-el1 .content__block.castom-el {
padding-bottom: 0 !important;
}
.news_single.news_single_column.castom-el h2 {
margin-bottom: 25px !important;
}
.showmore_block__btn .icon_arrow_sort {
width: 36px;
height: 36px;
border-radius: 50%;
color: rgba(242, 180, 28, 1);
border: 2px solid rgba(242, 180, 28, 1);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.content__block.castom-el {
font-size: 25px !important;
}
/* Цветные карточки */
.flip-card {
margin-top: 20px;
margin-bottom: 20px;
display: flex;
gap: 20px;
padding: 0 50px;
}
.card-front svg {
position: absolute;
right: 40px;
bottom: 40px;
}
.card-back svg {
position: absolute;
right: 40px;
bottom: 40px;
}
/* Карточки переворачивающиеся */
.card-container {
perspective: 1500px;
/* Устанавливает перспективу для 3D эффекта */
width: 100%;
/* Занимает всю ширину экрана */
}
.card {
width: 100%;
min-height: 350px;
position: relative;
transition: transform 0.3s ease-out;
cursor: pointer;
}
.card:hover {
transform: translateY(-6px);
}
.card-inner {
position: absolute;
width: 100%;
height: 100%;
transition: transform 0.6s ease-in-out;
transform-style: preserve-3d;
}
.card-front,
.card-back {
border-radius: 20px;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
/* Скрывает заднюю сторону, когда она не видима */
font-size: 2rem;
color: white;
}
.card-back h2 {
/* color: rgba(203, 74, 0, 1); */
color: black;
font-size: 30px;
}
.card-front h2 {
font-size: 40px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
.card-front {
background: linear-gradient(rgba(255, 143, 51, 1), rgba(203, 74, 0, 1));
padding: 40px 50px;
}
.card-front.yelloow {
background: linear-gradient(rgb(199 98 24), rgb(255 174 56));
}
.card-front.blue {
background: linear-gradient(#005084, #01b3b9);
}
.card-front.green {
background: linear-gradient(rgb(24 133 118), rgb(92 220 101));
}
.card-back {
background-color: #ffffff;
/* Цвет задней стороны */
border: 2px solid rgba(203, 74, 0, 1);
transform: rotateY(180deg);
/* Поворачивает заднюю сторону на 180 градусов */
padding: 40px 50px;
}
.card-back.yelloow {
border: 2px solid rgba(203, 74, 0, 1);
color: rgba(203, 74, 0, 1);
}
.card-back.blue {
border: 2px solid #005084;
color: #005084;
}
.card-back.blue h2 {
color: #005084;
}
.card-back.green {
border: 2px solid rgb(24 133 118);
color: rgb(24 133 118);
}
.card-back.green h2 {
color: rgb(24 133 118);
}
/* Переворот карточки при наведении */
.card-container:hover .card-inner {
transform: rotateY(180deg);
}
/* Стилизация разноцветных блоков */
.background-blue {
background-color: rgba(0, 81, 128, 1);
}
.background-green {
background-color: rgba(0, 119, 128, 1);
transition: all .2s ease;
}
.background-green:hover {
background-color: rgb(1, 136, 146);
}
.background-vinous {
background-color: rgba(128, 51, 76, 1);
transition: all .2s ease;
}
.background-vinous:hover {
background-color: rgb(172, 68, 101);
}
.multicolored-blocks__wrapper {
display: flex;
flex-direction: column;
justify-content: center;
}
.multicolored-blocks {
min-width: 100%;
display: flex;
color: rgba(255, 255, 255, 1);
margin-bottom: 72px;
min-width: 100%;
flex: 1;
justify-content: center;
}
.multicolored-blocks__block {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.multicolored-blocks__block.background-blue {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 229px;
padding-right: 89px;
width: 50%;
}
.multicolored-blocks__title {
display: inline-block;
font-size: 40px;
font-weight: 400;
line-height: 52px;
text-align: left;
}
.multicolored-blocks__link {
font-size: 24px;
font-weight: 550;
line-height: 30px;
text-align: left;
color: rgba(255, 255, 255, 1);
display: block;
width: 100%;
position: relative;
}
.multicolored-blocks__link::after {
content: '';
position: absolute;
top: 0;
left: 0;
}
.multicolored-blocks__link.more {
position: relative;
min-width: 50%;
padding: 51px 10px 50px 160px;
}
.multicolored-blocks__block.more {
position: relative;
}
.multicolored-blocks__block.more::after {
content: '';
background-image: url('../images/pointer_white.svg');
width: 35px;
height: 35px;
background-color: rgba(74, 79, 80, 0.4);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-radius: 50%;
position: absolute;
top: 48px;
left: 84px;
cursor: pointer;
}
.multicolored-blocks__wrapper {
width: 50%;
}
/* Стилизация блока человека */
.osteoman {
position: relative;
}
.particle {
position: absolute;
z-index: -1;
transition: transform 0.1s ease-out; /* Быстрее движение */
will-change: transform;
}
.container_second {
padding: 0 163px 0 335px;
/* margin-bottom: 736px; */
}
.container_second.container-txt {
margin-bottom: 0px;
}
.all-contant {
display: flex;
padding-bottom: 238px;
box-sizing: content-box;
height: 13000px;
}
.osteoman__img {
position: sticky;
width: 736px;
height: 2899px;
top: 0;
/* Плавность движения при скролле */
will-change: top;
transform: translateZ(0);
backface-visibility: hidden;
-webkit-font-smoothing: subpixel-antialiased;
}
.animation__container {
width: 50%;
/*position: relative;*/
}
.animation__sticky {
position: sticky;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column-reverse;
align-items: flex-start; /* Выравнивание по левому краю */
justify-content: center; /* Центрирование по вертикали */
height: 600px; /* Увеличена высота для размещения всех элементов */
gap: 0; /* Убираем gap - используем margin */
/*left: 1106px !important;*/
}
.animation__sticky.adapt {
display: none;
}
.animation__sticky.visible {
opacity: 1;
}
.pin-spacer {
inset: auto !important;
}
.animation__desc {
font-size: 30px;
font-weight: 400;
line-height: 45px;
margin-bottom: 10px; /* Увеличен отступ между элементами */
opacity: 0;
position: relative;
flex-shrink: 0;
height: auto; /* Автоматическая высота по контенту */
}
.animation__desc.visible {
animation: slideUpFromMain 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; /* Новая анимация: выплывают снизу вверх */
font-size: 35px;
overflow: visible; /* При появлении текст может выходить за границы */
}
.animation__desc_sub.visible {
animation: fadeFromTop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; /* Подзаголовок появляется сверху */
opacity: 0;
font-size: 30px;
overflow: visible; /* При появлении текст может выходить за границы */
}
.animation__desc_main.visible {
animation: fadeFromTop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
opacity: 0;
overflow: visible; /* При появлении текст может выходить за границы */
}
/* Анимация для главного текста и подзаголовка: сверху вниз */
@keyframes fadeFromTop {
0% {
opacity: 0;
transform: translateY(-40px); /* Сверху вниз */
}
100% {
opacity: 1;
transform: translateY(0);
font-size: 30px;
}
}
/* НОВАЯ АНИМАЦИЯ ДЛЯ ФРАЗ: выплывают снизу вверх из главного текста */
@keyframes slideUpFromMain {
0% {
opacity: 0;
transform: translateY(60px) translateZ(0); /* Начинают НИЖЕ своей позиции */
}
100% {
opacity: 1;
transform: translateY(0) translateZ(0); /* Приезжают на свою позицию */
font-size: 35px;
}
}
@keyframes fade1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
top: 0;
font-size: 30px;
}
}
.animation__desc:nth-child(5) {
margin-bottom: 10px;
}
.animation__desc_main {
font-size: 58px;
font-weight: 500;
line-height: 65px;
padding-bottom: 50px; /* Увеличен padding для полоски под текстом */
position: relative;
display: block;
opacity: 0;
transition: opacity 0.5s ease;
min-height: auto; /* Автоматическая высота по контенту */
overflow: visible; /* Текст может выходить за границы если нужно */
}
.animation__desc_sub {
font-size: 30px;
font-weight: 300;
line-height: 45px;
opacity: 0;
height: auto; /* Автоматическая высота по контенту */
margin-top: 20px; /* Отступ сверху для отделения от основного блока */
right: 0px;
transition: all .5s ease;
margin-top: 0px;
}
.animation__desc,
.animation__desc_sub,
.animation__desc_main {
max-width: 775px;
}
/* Полоска под главным заголовком (отделяет его от маленьких фраз) */
/* Полоска под главным заголовком (отделяет его от маленьких фраз) */
.animation__desc_main::after {
content: '';
width: 0%; /* Начальная ширина 0 */
height: 3px;
border-radius: 3px;
background-color: #ffb300;
position: absolute;
bottom: 0; /* Полоска точно на нижней границе элемента, ПОСЛЕ текста */
left: 0;
transition: none;
}
/* Анимация полоски - растёт слева направо как прогресс-бар */
.animation__desc_main.line-animated::after {
animation: growLine 2.0s ease-out forwards; /* Растёт 2 секунды (100ms → 2100ms) */
}
/* Keyframe анимация: полоска растёт от 0% до 100% */
@keyframes growLine {
0% {
width: 0%; /* Начало: полоска невидима */
}
100% {
width: 100%; /* Конец: полоска на всю ширину */
}
}
.animation__desc_main.visible::after {
/* Оставляем для обратной совместимости */
}
.swiper-el {
display: none;
}
.animation__container_block {
height: 100%;
display: flex;
flex-direction: column;
}
.animation__block {
height: 100%;
opacity: 1;
transition: all .3s ease;
padding-top: 204px;
}
/*.animation__block.visible {*/
/* opacity: 1;*/
/*}*/
/*.animation__sticky{*/
/* position: sticky;*/
/* top: 200px;*/
/* max-width: 650px;*/
/*}*/
.osteoman__img_wrapper {
max-width: 771px;
min-width: 771px;
height: 13000px;
}
.animation__container {
width: 50%;
}
.osteoman__title {
font-size: 64px;
font-weight: 500;
line-height: 70.4px;
text-align: left;
color: rgba(242, 180, 28, 1);
margin-bottom: 35px;
}
.osteoman__desc {
font-size: 20px;
font-weight: 400;
line-height: 30px;
text-align: left;
margin-bottom: 10px;
}
.osteoman__author {
font-size: 20px;
font-weight: 300;
line-height: 30px;
text-align: left;
color: rgba(118, 118, 118, 1);
}
/* Fix for aside menu hover positioning on massage school pages */
.osteo_man .aside_menu_wr .billet_aside_menu {
transition: left 0.6s ease-out, background-color 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.osteo_man .aside_menu_wr .aside_menu .aside_menu__item {
position: relative;
}
/* Ensure proper calculation on layout changes */
.osteo_man .aside_menu_wr .aside_menu {
overflow: visible;
}
/* Improved positioning for billet on massage school pages */
.osteo_man .aside_menu_wr .billet_aside_menu {
transform: translateZ(0); /* Force hardware acceleration */
will-change: left; /* Optimize for left position changes */
}
/* СЕКЦИЯ ВЫПАДАЮЩЕГО СПИСКА */
.about-list {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-bottom: 144px;
/* margin: 0 auto; */
}
.about-list__wrapper {
width: 888px;
}
.about-list__list-item {
text-align: left;
}
.about-list__item {
cursor: pointer;
border-bottom: 1px solid rgba(203, 74, 0, 1);
padding-right: 50px;
}
.about-list__title {
padding: 44px 0;
font-size: 36px;
line-height: 45px;
text-align: left;
padding-left: 90px;
transition: all .3s ease;
}
.about-list__title:hover {
color: rgba(203, 74, 0, 1);
}
.about-list__list-title {
font-size: 20px;
line-height: 30px;
text-align: left;
margin-bottom: 25px;
}
.about-list__list {
margin-bottom: 71px;
display: none;
padding-left: 114px;
}
.about-list__list-item {
list-style: initial;
}
.about-list__item {
position: relative;
}
.about-list__title-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
.about-list__item.active .about-svg path {
transition: all .3s ease;
}
.about-list__item.active .about-svg path {
fill: #ffffff;
background-color: rgba(203, 74, 0, 1);
}
.about-list__item.active svg {
transition: all .3s ease;
}
.about-list__item.active svg {
fill: rgba(203, 74, 0, 1);
}
.about-svg:hover {
/* box-shadow: 0px 10px 30px 0px rgba(106, 122, 166, 0.4); */
}
/* СЕКЦИЯ ПРЫГАЮЩЕГО ТЕКСТА*/
.dropping-texts {
position: relative;
overflow: hidden;
min-height: 110px;
height: 150px;
margin-top: 100px;
margin-left: 144px;
margin-bottom: 100px;
}
.animation__text {
opacity: 0;
/* Начальное состояние: текст невидим */
animation-duration: 0.5s;
/* Длительность анимации */
animation-fill-mode: forwards;
/* Сохраняет конечное состояние анимации */
position: relative;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
/* Плавный переход для свойств */
}
/* Устанавливаем начальные позиции для каждого текста */
.animation__text:nth-child(3).animate {
animation-name: appear1;
/* Название анимации для первого элемента */
animation-delay: 0.4s;
/* Задержка перед началом анимации */
font-size: 35px;
/* font-weight: 700; */
top: 30px;
font-weight: 300;
font-family: 'Roboto', sans-serif;
}
.animation__text:nth-child(2).animate {
animation-name: appear2;
/* Название анимации для второго элемента */
animation-delay: 0.2s;
/* Задержка 1 секунда */
font-size: 30px;
/* font-weight: 600; */
top: 30px;
font-weight: 300;
font-family: 'Roboto', sans-serif;
}
.animation__text:nth-child(1).animate {
animation-name: appear3;
/* Название анимации для третьего элемента */
animation-delay: 0s;
/* Задержка 0 секунд */
font-size: 25px;
/* font-weight: 500; */
font-weight: 300;
font-family: 'Roboto', sans-serif;
}
@keyframes appear1 {
to {
opacity: 1;
/* Конечное состояние: текст видим */
transform: translateY(0px);
top: 0px;
font-size: 30px;
}
}
@keyframes appear2 {
to {
opacity: 1;
/* Конечное состояние: текст видим */
transform: translateY(0px);
top: 0px;
font-size: 25px;
}
}
@keyframes appear3 {
to {
opacity: 1;
/* Конечное состояние: текст видим */
font-size: 20px;
}
}
.animation__desc_main.visible {
position: relative;
animation: titleAnimation 3s ease forwards;
opacity: 0;
clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
/* Изначально скрывающая область */
transform: translateY(50px);
/* Начальная позиция ниже */
}
@keyframes titleAnimation {
0% {
transform: translateY(50px);
/* Начинаем ниже */
opacity: 0;
clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
/* Скрываем текст */
}
50% {
transform: translateY(0);
/* Текст поднимается */
opacity: 1;
/* Делаем текст видимым */
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
/* Полностью показываем текст */
}
100% {
transform: translateY(0);
/* Остается на месте */
opacity: 1;
/* Остаться видимым */
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
/* Полностью показываем текст */
}
}
section.swiper-el {
margin-top: 500px;
overflow: auto;
overflow-x: hidden;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.oseoman-mb {
display: none;
}
.gradient-spot1 {
width: 300px;
height: 300px;
background: #fdeb01;
border-radius: 50%;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
filter: blur(200px);
position: absolute;
top: 200px;
left: -100px;
}
.gradient-spot2 {
width: 300px;
height: 300px;
background: #008eff;
border-radius: 50%;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
filter: blur(150px);
position: absolute;
top: 1000px;
right: -209px;
}
.gradient-spot3 {
width: 350px;
min-height: 350px;
background: #ff9400;
border-radius: 50%;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
filter: blur(200px);
position: absolute;
top: 1800px;
left: -230px;
}
.gradient-spot4 {
width: 350px;
min-height: 350px;
background: #ff9400;
border-radius: 50%;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
filter: blur(200px);
position: absolute;
top: 1800px;
left: -230px;
}
.gradient-spot5 {
width: 320px;
/* Ширина пятна */
height: 320px;
/* Высота пятна */
background: #e77d33;
border-radius: 50%;
/* Делает пятно круглым */
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
/* Тень для эффекта */
filter: blur(100px);
/* Размытие границ */
position: absolute;
top: 1600px;
left: -100px;
}
.osteoman p {
color: #1b2c60;
}
.err {
border-color: red;
border-width: 3px;
}
/* АДАПТИВ САЙТА */
.news_single_column.castom-el .news_single__left img {
height: 500px !important;
border-radius: 10px;
width: 400px;
margin: unset;
object-fit: cover;
}
.about-list__item ul li::marker {
color: rgba(203, 74, 0, 1);
}
@media (max-width: 1620px) {
.container_second {
padding: 0 149px 0 180px;
}
.card-back h2 {
font-size: 25px;
}
}
@media (max-width: 1280px) {
.news_single .news_single__left {
max-width: 100%;
}
.container_second {
padding: 0 70px 0 40px;
}
.animation__desc_main {
font-size: 44px;
line-height: 50px;
}
.animation__desc:nth-child(5).visible {
font-size: 25px;
}
.osteoman__img {
width: 660px;
height: 2588px;
object-fit: contain;
}
.osteoman__img_wrapper {
max-width: 660px;
min-width: 660px;
}
.card-back h2 {
font-size: 22px;
}
.card-front h2 {
font-size: 36px;
}
.flip-card {
gap: 10px;
}
.content__block.castom-el {
font-size: 22px !important;
}
.content__block.castom-el {
font-size: 22px !important;
}
}
@media (max-width: 1130px) {
.animation__desc_main {
font-size: 41px;
line-height: 46px;
}
.animation__desc.visible {
font-size: 24px !important;
line-height: normal !important;
}
.animation__desc_sub.visible {
font-size: 24px !important;
line-height: normal !important;
}
.card-front h2 {
font-size: 30px;
}
.multicolored-blocks__block.background-blue {
padding-left: 85px;
font-size: 35px;
line-height: 43px;
font-size: 35px;
padding-right: 38px;
}
.multicolored-blocks__link.more {
padding: 40px 19px 45px 97px;
}
.multicolored-blocks__link {
font-size: 21px;
line-height: 27px;
}
.multicolored-blocks__block.more::after {
left: 25px;
}
.multicolored-blocks__title {
font-size: 33px;
line-height: 39px;
}
}
@media (max-width: 1000px) {
.osteoman__title {
font-size: 47px;
line-height: 46.4px;
margin-bottom: 25px;
}
.news_single_column.castom-el .news_single__left img {
height: 400px !important;
border-radius: 10px;
width: 300px;
margin: unset;
object-fit: cover;
}
.osteoman__img {
width: 579px;
height: 2000px;
}
.osteoman__img_wrapper {
max-width: 610px;
min-width: 610px;
}
.dropping-texts {
margin-top: 90px;
margin-bottom: 60px;
}
.all-contant {
position: relative;
left: -177px;
}
.animation__desc_main {
font-size: 31px;
line-height: 38px;
}
.animation__desc.visible,
.animation__desc_sub.visible {
font-size: 19px !important;
}
.content__block.castom-el {
font-size: 20px !important;
}
.content__block.castom-el {
font-size: 20px !important;
}
.all-contant {
height: 10000px;
}
.osteoman__img_wrapper {
height: 10000px;
}
.flip-card {
margin-top: 150px;
margin-bottom: 150px;
}
.flip-card {
flex-direction: column;
margin-top: 150px;
margin-bottom: 150px;
}
.osteoman__title {
font-size: 43px;
line-height: normal;
margin-bottom: 25px;
}
.osteoman__desc {
font-size: 18px;
line-height: 1.2;
}
.osteoman__author {
font-size: 17px;
line-height: 20px;
}
.animation__container {
width: 60%;
}
.about-list__title {
font-size: 28px;
line-height: 28px;
}
.about-list__wrapper {
width: 727px;
}
.about-list__title {
padding: 35px 0;
padding-left: 39px;
}
.animation__text:nth-child(3).animate {
animation-name: appear1;
/* Название анимации для первого элемента */
animation-delay: 0.4s;
/* Задержка перед началом анимации */
font-size: 30px;
/* font-weight: 700; */
top: 30px;
font-weight: 300;
font-family: 'Roboto', sans-serif;
}
.animation__text:nth-child(2).animate {
animation-name: appear2;
/* Название анимации для второго элемента */
animation-delay: 0.2s;
/* Задержка 1 секунда */
font-size: 30px;
/* font-weight: 600; */
top: 25px;
font-weight: 300;
font-family: 'Roboto', sans-serif;
}
.animation__text:nth-child(1).animate {
animation-name: appear3;
/* Название анимации для третьего элемента */
animation-delay: 0s;
/* Задержка 0 секунд */
font-size: 20px;
/* font-weight: 500; */
font-weight: 300;
font-family: 'Roboto', sans-serif;
}
@keyframes appear1 {
to {
opacity: 1;
/* Конечное состояние: текст видим */
transform: translateY(0px);
top: 0px;
font-size: 25px;
}
}
@keyframes appear2 {
to {
opacity: 1;
/* Конечное состояние: текст видим */
transform: translateY(0px);
top: 0px;
font-size: 20px;
}
}
@keyframes appear3 {
to {
opacity: 1;
/* Конечное состояние: текст видим */
font-size: 15px;
}
}
.dropping-texts {
margin-left: 43px;
}
}
@media (max-width: 896px) {
.multicolored-blocks {
flex-direction: column;
}
.multicolored-blocks__block.background-blue {
min-width: 100%;
padding: 30px 50px;
}
.multicolored-blocks__wrapper {
min-width: 100%;
width: 100%;
}
.multicolored-blocks__link.more {
padding: 51px 10px 50px 160px;
}
.multicolored-blocks__block.more::after {
left: 84px;
}
.multicolored-blocks__block.background-blue {
min-width: 100%;
padding: 51px 10px 50px 160px;
display: block;
}
.osteoman__img {
width: 469px;
height: 1848px;
}
.osteoman__img_wrapper {
max-width: 469px;
min-width: 469px;
}
.animation__block {
max-width: 370px;
}
.animation__desc_main {
font-size: 24px;
line-height: 1.3;
}
.animation__desc.visible,
.animation__desc_sub.visible {
font-size: 17px !important;
margin-bottom: 3px;
}
.animation__desc_main.visible {
padding-bottom: 30px;
}
.animation__desc_main::before {
bottom: 13px;
}
.all-contant {
left: -68px;
}
.animation__text:nth-child(3).animate {
animation-name: appear1;
/* Название анимации для первого элемента */
animation-delay: 0.4s;
/* Задержка перед началом анимации */
font-size: 22px;
/* font-weight: 700; */
top: 30px;
font-weight: 300;
font-family: 'Roboto', sans-serif;
}
.animation__text:nth-child(2).animate {
animation-name: appear2;
/* Название анимации для второго элемента */
animation-delay: 0.2s;
/* Задержка 1 секунда */
font-size: 20px;
/* font-weight: 600; */
top: 25px;
font-weight: 300;
font-family: 'Roboto', sans-serif;
}
.animation__text:nth-child(1).animate {
animation-name: appear3;
/* Название анимации для третьего элемента */
animation-delay: 0s;
/* Задержка 0 секунд */
font-size: 20px;
/* font-weight: 500; */
font-weight: 300;
font-family: 'Roboto', sans-serif;
}
@keyframes appear1 {
to {
opacity: 1;
/* Конечное состояние: текст видим */
transform: translateY(0px);
top: 0px;
font-size: 19px;
}
}
@keyframes appear2 {
to {
opacity: 1;
/* Конечное состояние: текст видим */
transform: translateY(0px);
top: 0px;
font-size: 18px;
}
}
@keyframes appear3 {
to {
opacity: 1;
/* Конечное состояние: текст видим */
font-size: 15px;
}
}
.about-list .about-list__item ul {
padding-left: 64px !important;
}
.about-list__item ul li {
font-size: 18px !important;
}
.about-list__item ul {
margin-bottom: 50px !important;
}
}
@media (max-width: 800px) {
.all-contant {
left: -230px;
}
.osteoman__img {
width: 558px;
height: 1893px;
}
.osteoman__img_wrapper {
max-width: 558px;
min-width: 558px;
}
.container_second {
padding: 0 20px 0 40px;
}
.about-list__wrapper {
width: 600px;
}
.about-list__title {
font-size: 22px;
line-height: 22px;
}
.about-list__title {
padding: 28px 0;
padding-left: 39px;
}
}
@media (max-width: 768px) {
.osteoman__img_wrapper {
max-width: 490px;
min-width: 490px;
}
.all-contant {
left: -199px;
}
.dropping-texts {
margin-top: 60px;
margin-bottom: 40px;
margin-left: 35px;
}
.multicolored-blocks__block.background-blue {
min-width: 100%;
padding: 37px 10px 38px 84px;
display: block;
}
.multicolored-blocks__title {
font-size: 27px;
line-height: 32px;
}
.multicolored-blocks__link.more {
padding: 44px 10px 50px 160px;
}
.multicolored-blocks__link {
font-size: 19px;
line-height: 26px;
}
.multicolored-blocks__block.more::after {
top: 50%;
transform: translateY(-50%);
}
.flip-card {
margin-top: 150px;
margin-bottom: 40px;
}
}
@media (max-width: 690px) {
.multicolored-blocks__block.background-blue {
padding: 30px 10px 30px 65px;
}
.multicolored-blocks__title {
font-size: 24px;
line-height: 29px;
}
.multicolored-blocks__link.more {
padding: 30px 10px 30px 110px;
}
.multicolored-blocks__block.more::after {
left: 55px;
}
.content__block.castom-el {
font-size: 15px !important;
}
.content__block.castom-el {
font-size: 15px !important;
}
.osteoman__desc {
font-size: 14px;
}
.osteoman__title {
font-size: 31px;
margin-bottom: 20px;
}
.osteoman__author {
font-size: 14px;
line-height: 17px;
}
.osteoman__img {
width: auto;
height: 1302px;
}
.osteoman__img_wrapper {
max-width: 331px;
min-width: 331px;
}
.all-contant {
left: -39px;
}
.all-contant {
height: 7000px;
position: relative;
left: -111px;
}
.all-contant {
height: 7000px;
}
.osteoman__img_wrapper {
height: 7000px;
}
.about-list__wrapper {
width: 500px;
}
.about-list__title {
padding-left: 0px;
}
.about-list__title {
padding: 24px 0;
padding-left: 39px;
}
.about-list__title {
font-size: 19px;
line-height: 19px;
}
.about-list__title-wrapper svg {
width: 30px;
height: 30px;
}
/* Плавная анимация текста на мобильных без дерганья */
.animation__desc,
.animation__desc_sub,
.animation__desc_main {
will-change: opacity;
transform: translateZ(0) !important;
backface-visibility: hidden;
}
.animation__sticky {
will-change: opacity;
transform: translateZ(0) !important;
backface-visibility: hidden;
height: auto !important; /* Автоматическая высота под контент */
align-items: flex-start !important; /* Текст по левому краю */
top: 30% !important; /* Ближе к центру по вертикали */
transform: translateY(-30%) translateZ(0) !important; /* Центрирование по вертикали */
}
/* ========================================
МОБИЛЬНАЯ АНИМАЦИЯ: НОВЫЙ ПОДХОД
Блоки видимы сразу, быстрая последовательная анимация
======================================== */
/* Переопределяем базовый opacity: 0 для мобильных */
.animation__desc,
.animation__desc_main,
.animation__desc_sub {
opacity: 1 !important;
transform: none !important;
}
.animation__desc_main {
min-height: auto !important;
height: auto !important;
padding-bottom: 20px !important;
overflow: visible !important;
}
.animation__desc {
min-height: auto !important;
height: auto !important;
margin-bottom: 12px !important;
line-height: 1.4 !important;
overflow: visible !important;
}
.animation__desc_sub {
min-height: auto !important;
height: auto !important;
margin-top: 15px !important;
line-height: 1.4 !important;
overflow: visible !important;
}
/* НЕТ анимации - все видно сразу на мобильных */
.animation__desc.visible,
.animation__desc_main.visible,
.animation__desc_sub.visible {
opacity: 1 !important;
animation: none !important;
}
/* Полоска на мобильных */
.animation__desc_main::after {
bottom: 5px !important; /* Ближе к тексту на мобильных */
}
.multicolored-blocks__link.more {
font-weight: 300;
}
}
@media (max-width: 576px) {
.multicolored-blocks__link {
font-size: 15px;
line-height: 20px;
}
.animation__desc_main {
font-size: 21px;
line-height: 1.1;
}
.animation__desc.visible,
.animation__desc_sub.visible {
font-size: 15px !important;
margin-bottom: 3px;
}
.particle.el8 {
display: none;
}
.particle.el17 {
max-width: 30px;
height: auto;
}
.all-contant {
height: 7000px;
position: relative;
left: -140px;
}
.animation__text:nth-child(3).animate {
animation-name: appear1;
/* Название анимации для первого элемента */
animation-delay: 0.4s;
/* Задержка перед началом анимации */
font-size: 13px;
/* font-weight: 700; */
top: 30px;
font-weight: 300;
font-family: 'Roboto', sans-serif;
}
.animation__text:nth-child(2).animate {
animation-name: appear2;
/* Название анимации для второго элемента */
animation-delay: 0.2s;
/* Задержка 1 секунда */
font-size: 17px;
/* font-weight: 600; */
top: 25px;
font-weight: 300;
font-family: 'Roboto', sans-serif;
}
.animation__text:nth-child(1).animate {
animation-name: appear3;
/* Название анимации для третьего элемента */
animation-delay: 0s;
/* Задержка 0 секунд */
font-size: 16px;
/* font-weight: 500; */
font-weight: 300;
font-family: 'Roboto', sans-serif;
}
@keyframes appear1 {
to {
opacity: 1;
/* Конечное состояние: текст видим */
transform: translateY(0px);
top: 0px;
font-size: 16px;
}
}
@keyframes appear2 {
to {
opacity: 1;
/* Конечное состояние: текст видим */
transform: translateY(0px);
top: 0px;
font-size: 15px;
}
}
@keyframes appear3 {
to {
opacity: 1;
/* Конечное состояние: текст видим */
font-size: 14px;
}
}
.container_second {
padding: 0 20px 0 30px;
}
.animation__desc_main {
text-wrap: wrap !important;
}
.osteoman__title {
font-size: 28px;
margin-bottom: 10px;
}
.osteoman__desc {
font-size: 14px;
}
.osteoman__desc br {
display: none;
}
.osteoman__author {
font-size: 12px;
line-height: 17px;
}
.osteoman__img_wrapper {
max-width: 280px;
min-width: 280px;
}
.particle.el2 {
width: 80px;
}
.particle.el5 {
width: 30px;
}
.particle.el7 {
width: 50px;
}
.particle.el9 {
width: 20px;
}
.particle.el10 {
width: 40px;
}
.particle.el11 {
width: 40px;
}
.card-back svg {
position: absolute;
right: 40px;
bottom: 40px;
width: 40px;
}
.card-back h2 {
font-size: 19px;
}
.card-back,
.card-font {
padding: 34px 32px;
}
.card-front h2 {
font-size: 26px;
}
.flip-card {
margin-top: 30px;
margin-bottom: 50px;
}
.about-list__wrapper {
width: 409px;
}
.about-list__item {
padding-right: 20px;
}
.about-list__title {
font-size: 17px;
line-height: 18px;
}
.about-list {
margin-bottom: 100px;
}
.multicolored-blocks__block.background-blue {
padding: 20px 10px 20px 59px;
}
.multicolored-blocks__title {
font-size: 21px;
line-height: 27px;
}
.about-list__list {
margin-bottom: 71px;
display: none;
padding-left: 62px;
}
.osteoman__title {
font-size: 22px;
margin-bottom: 14px;
width: fit-content;
}
.news_single {
padding-bottom: 5px;
}
.multicolored-blocks__block.background-blue {
padding: 16px 10px 16px 37px;
}
.multicolored-blocks__link.more {
padding: 30px 10px 30px 90px;
}
.multicolored-blocks__block.more::after {
left: 40px;
}
.flip-card {
padding: 0 30px;
}
.card-front {
padding: 35px 35px;
}
.card-front svg {
width: 40px;
height: 40px;
right: 25px;
bottom: 39px;
}
.news_single_column.castom-el .news_single__left img {
height: 300px !important;
width: 100%;
padding: 0px 0px;
object-fit: cover;
border-radius: 10px;
}
.multicolored-blocks__block.background-blue {
border-bottom: 0 !important;
}
.multicolored-blocks {
margin-bottom: 50px;
}
.showmore_block__btn .icon_arrow_sort {
width: 30px;
height: 30px;
}
.osteoman__desc {
font-size: 14px;
line-height: 20px;
}
.flip-card .card-container .card {
min-height: 280px;
}
.card-front,
.card-back {
border-radius: 15px;
}
.card-front {
padding: 25px 25px;
}
.card-front h2 {
font-size: 24px;
}
.about-list__item ul {
padding-left: 38px !important;
}
.about-list__item ul li {
font-size: 16px !important;
font-weight: 300;
}
.about-list__item ul {
margin-bottom: 35px;
padding-right: 30px;
}
.about-list__title {
font-size: 19px !important;
line-height: 19px !important;
}
.about-list__title {
padding-left: 17px;
}
.about-list__item ul {
padding-bottom: 50px !important;
margin-bottom: 0 !important;
padding-top: 15px;
}
.card-front svg {
width: 30px;
height: 30px;
right: 25px;
bottom: 25px;
}
.about-list__item {
padding-right: 0;
}
.about-list .about-list__item ul {
padding-right: 0px !important;
padding-left: 18px !important;
}
.about-list__item ul {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
}
.about-list__item ul li:nth-last-child(1) {
padding-bottom: 30px;
}
.about-list__item {
padding-bottom: 0 !important;
}
.about-list__title {
padding-left: 0 !important;
}
.about-list__wrapper {
padding: 0 20px !important;
}
.about-list {
margin-bottom: 70px !important;
}
.about-list .container_man {
width: 100% !important;
}
.about-list__title {
padding-left: 20px !important;
}
.about-list .about-list__item ul{
padding-left: 21px !important;
}
}
@media (max-width: 490px) {
.osteoman__img {
width: auto;
height: 1199px;
}
.osteoman__img_wrapper {
width: 304px;
}
.all-contant {
width: 140%;
max-width: 140%;
}
.animation__sticky,
.animation__sticky .animation__desc {
width: 99% !important;
}
.animation__desc.visible {
height: 30px;
}
}
.multicolored-blocks__block.background-blue{
background-color: transparent;
width: 100%;
color: #000;
align-items: flex-start;
padding: 50px 10px 50px 160px;
font-size: 45px;
font-weight: 100;
text-transform: uppercase;
}
.multicolored-blocks__link{
font-size: 30px;
}
.multicolored-blocks__title br{
display: none;
}
.castom-btn{
text-transform: uppercase;
background-color: rgba(208, 93, 0, 1);
color: rgba(235, 235, 235, 1);
padding: 40px 60px 36px 60px;
border-radius: 50px;
font-family: 'Roboto';
font-size: 24px;
font-weight: 700;
line-height: 16px;
margin-top: 60px;
transition: all .4s linear;
}
.castom-btn:hover{
background-color: #A64A00;
}*/
.multicolored-blocks__block.background-blue {
background: transparent;
border: 2px solid rgba(0, 81, 128, 1);
/* color: rgba(0, 81, 128, 1); */
border-right: none;
border-left: none;
color: #fff;
}
@media (min-width: 320px) and (max-width: 374px) {
.adminBlock {
display: none;
}
body {
zoom: .8;
}
.animation__container {
width: calc(100% - 120px) !important;
}
.animation__container_block {
width: 100% !important;
}
.animation__block {
width: 100% !important;
max-width: unset;
}
.header {
width: calc(100vw * 1.25);
}
.about-list,
.about-list__wrapper {
width: 100%;
}
.animation__desc.visible{
margin-bottom: 10px;
}
/*
.animation__desc.visible {
height: 50px;
}
.animation__desc {
height: 50px;
width: 180px !important;
}
.animation__sticky {
width: 180px;
} */
}
/* Fix for aside menu hover positioning - simplified without zoom */
.aside_menu_wr .billet_aside_menu {
transition: left 0.6s ease-out, background-color 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
transform: translateZ(0); /* Force hardware acceleration */
will-change: left; /* Optimize for left position changes */
}
/* Responsive fixes for different screen sizes */
@media screen and (max-width: 1660px) {
.aside_menu_wr .billet_aside_menu {
min-width: 68px;
}
}
@media screen and (max-width: 1280px) {
.aside_menu_wr .billet_aside_menu {
min-width: 58px;
}
}
@media screen and (max-width: 700px) {
.aside_menu_wr .billet_aside_menu {
min-width: 49px;
}
}
/* -------------------------------------------------------------------------- */
/* PP osteo: UX polish from latest feedback */
/* -------------------------------------------------------------------------- */
.pp-osteo-page .multicolored-blocks {
position: relative;
overflow: visible;
margin-bottom: 72px;
isolation: isolate;
}
.pp-osteo-page .multicolored-blocks__block.background-blue {
text-transform: none;
}
.pp-osteo-page .multicolored-blocks__block.background-blue .multicolored-blocks__link {
justify-content: flex-start;
text-align: left;
padding-left: 170px;
padding-right: 64px;
letter-spacing: 0;
}
.pp-osteo-page .multicolored-blocks__block.background-blue .multicolored-blocks__title {
text-transform: none;
letter-spacing: 0;
font-size: 46px;
line-height: 1.14;
font-weight: 400;
max-width: 620px;
}
.pp-osteo-page .multicolored-blocks__block {
position: relative;
transform: none;
transition: filter 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
}
.pp-osteo-page .multicolored-blocks__wrapper .multicolored-blocks__block.more + .multicolored-blocks__block.more {
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.pp-osteo-page .multicolored-blocks__block:not(.active) {
filter: saturate(0.9) brightness(0.96);
}
.pp-osteo-page .multicolored-blocks__block.more:not(.active) .multicolored-blocks__link {
opacity: 0.82;
}
.pp-osteo-page .multicolored-blocks__block.active {
z-index: 6;
filter: none;
}
.pp-osteo-page .multicolored-blocks__block.active::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0) 36%);
z-index: 2;
}
.pp-osteo-page .multicolored-blocks__block.background-blue.active {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -14px 20px rgba(3, 34, 64, 0.44),
0 10px 22px -14px rgba(4, 41, 76, 0.28),
0 2px 10px rgba(3, 34, 64, 0.12),
0 10px 20px -12px rgba(0, 0, 0, 0.18) !important;
}
.pp-osteo-page .multicolored-blocks__block.background-green.active {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -14px 20px rgba(0, 52, 62, 0.46),
0 10px 22px -14px rgba(0, 63, 75, 0.28),
0 2px 10px rgba(0, 52, 62, 0.12),
0 10px 20px -12px rgba(0, 0, 0, 0.18) !important;
}
.pp-osteo-page .multicolored-blocks__block.background-vinous.active {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -14px 20px rgba(65, 7, 36, 0.48),
0 10px 22px -14px rgba(78, 8, 43, 0.28),
0 2px 10px rgba(65, 7, 36, 0.12),
0 10px 20px -12px rgba(0, 0, 0, 0.18) !important;
}
.pp-osteo-page .multicolored-blocks__block.more.active .multicolored-blocks__link {
opacity: 1;
font-weight: 600;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
}
.pp-osteo-page .animation__sticky {
gap: 8px;
}
.pp-osteo-page .animation__desc_main {
line-height: 1.15;
padding-bottom: 34px;
opacity: 1 !important;
clip-path: none !important;
-webkit-clip-path: none !important;
transform: none !important;
}
.pp-osteo-page .animation__desc_main::after {
height: 4px;
border-radius: 4px;
background: linear-gradient(90deg, #ff8f33 0%, #ffb300 100%);
}
.pp-osteo-page .animation__desc_main.line-animated::after {
animation: qualityLineFill 1.9s linear forwards;
}
.pp-osteo-page .animation__desc_main.visible {
animation: none !important;
opacity: 1 !important;
clip-path: none !important;
-webkit-clip-path: none !important;
transform: none !important;
}
.pp-osteo-page .animation__desc_sub {
font-size: 22px;
line-height: 1.35;
font-weight: 400;
color: #3a3f45;
transform: translateY(16px);
will-change: transform, opacity, filter;
}
.pp-osteo-page .animation__desc_sub.visible {
animation: auxPhraseIn 0.62s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
font-size: 22px;
}
.pp-osteo-page .animation__desc {
margin-bottom: 0;
font-size: 30px;
line-height: 1.35;
color: #1f2733;
transform: translateY(18px);
will-change: transform, opacity, filter;
}
.pp-osteo-page .animation__desc.visible {
animation: auxPhraseIn 0.72s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
font-size: 30px;
}
.pp-osteo-page .animation__desc:empty,
.pp-osteo-page .animation__desc_main:empty,
.pp-osteo-page .animation__desc_sub:empty {
display: none;
margin: 0;
padding: 0;
}
.pp-osteo-page .flip-card {
counter-reset: training-quality-step;
}
.pp-osteo-page .flip-card .card-container {
position: relative;
overflow: visible;
}
.pp-osteo-page .about-list__item > :not(.about-list__title-wrapper) {
display: none;
}
.pp-osteo-page .flip-card .card-front h2::before {
counter-increment: training-quality-step;
content: counter(training-quality-step) ". ";
font-weight: 700;
}
.pp-osteo-page .flip-card .card-container:not(:last-child)::after {
content: none !important;
display: none !important;
}
@keyframes mainPhraseIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes auxPhraseIn {
from {
opacity: 0;
transform: translateY(26px) scale(0.985);
filter: blur(2px);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
@keyframes qualityLineFill {
from {
width: 0;
}
to {
width: 100%;
}
}
@media (max-width: 1000px) {
.pp-osteo-page .multicolored-blocks__block.background-blue .multicolored-blocks__link {
padding-left: 70px;
padding-right: 24px;
}
.pp-osteo-page .multicolored-blocks__block.background-blue .multicolored-blocks__title {
font-size: 36px;
max-width: 100%;
}
.pp-osteo-page .multicolored-blocks__block.background-blue.active {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -10px 16px rgba(3, 34, 64, 0.38),
6px 0 14px -10px rgba(5, 52, 96, 0.28),
8px 10px 20px -12px rgba(5, 52, 96, 0.26),
0 8px 14px -10px rgba(0, 0, 0, 0.16) !important;
}
.pp-osteo-page .multicolored-blocks__block.background-green.active {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -10px 16px rgba(0, 52, 62, 0.4),
-6px 0 14px -10px rgba(0, 63, 75, 0.28),
-8px 10px 20px -12px rgba(0, 63, 75, 0.26),
0 8px 14px -10px rgba(0, 0, 0, 0.16) !important;
}
.pp-osteo-page .multicolored-blocks__block.background-vinous.active {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
inset 0 -10px 16px rgba(65, 7, 36, 0.42),
-6px 0 14px -10px rgba(78, 8, 43, 0.28),
-8px 10px 20px -12px rgba(78, 8, 43, 0.28),
0 8px 14px -10px rgba(0, 0, 0, 0.16) !important;
}
}
@media (max-width: 768px) {
.pp-osteo-page .animation__desc {
font-size: 24px;
}
.pp-osteo-page .animation__desc.visible {
font-size: 24px;
}
.pp-osteo-page .animation__desc_sub {
font-size: 18px;
}
.pp-osteo-page .animation__desc_sub.visible {
font-size: 18px;
}
}
/* Mobile "future intro" mode for right-side phrases */
@keyframes futureMainIn {
0% {
opacity: 0;
transform: translate3d(0, 34px, 0) scale(0.975);
filter: blur(10px) saturate(1.2);
letter-spacing: 0.018em;
}
60% {
opacity: 1;
transform: translate3d(0, -2px, 0) scale(1.01);
filter: blur(0) saturate(1);
letter-spacing: 0;
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
filter: blur(0) saturate(1);
letter-spacing: 0;
}
}
@keyframes futurePhraseIn {
0% {
opacity: 0;
transform: translate3d(0, 26px, 0) scale(0.985);
filter: blur(8px) saturate(1.18);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
filter: blur(0) saturate(1);
}
}
@keyframes futureSubIn {
0% {
opacity: 0;
transform: translate3d(0, 16px, 0);
filter: blur(6px);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
filter: blur(0);
}
}
@media (max-width: 900px) {
.pp-osteo-page.mobile-future-mode .animation__sticky {
opacity: 1 !important;
top: 36% !important;
transform: translateY(-36%) translateZ(0) !important;
transition: none !important;
}
/* Fallback: если active-блок не определился, текст остается видимым */
.pp-osteo-page.mobile-future-mode .animation__sticky:not(.future-active) .animation__desc_main,
.pp-osteo-page.mobile-future-mode .animation__sticky:not(.future-active) .animation__desc,
.pp-osteo-page.mobile-future-mode .animation__sticky:not(.future-active) .animation__desc_sub {
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
.pp-osteo-page.mobile-future-mode .animation__sticky.future-active .animation__desc_main,
.pp-osteo-page.mobile-future-mode .animation__sticky.future-active .animation__desc,
.pp-osteo-page.mobile-future-mode .animation__sticky.future-active .animation__desc_sub {
opacity: 1 !important;
transform: none !important;
filter: none !important;
will-change: transform, opacity, filter;
backface-visibility: hidden;
transition: none !important;
}
.pp-osteo-page.mobile-future-mode .animation__sticky.future-active .animation__desc_main.future-main-in {
animation: futureMainIn 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}
.pp-osteo-page.mobile-future-mode .animation__sticky.future-active .animation__desc.future-phrase-in {
animation: futurePhraseIn 0.82s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}
.pp-osteo-page.mobile-future-mode .animation__sticky.future-active .animation__desc_sub.future-sub-in {
animation: futureSubIn 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}
.pp-osteo-page.mobile-future-mode .animation__sticky .animation__desc_main::after {
opacity: 0.85;
box-shadow: 0 0 16px rgba(255, 163, 0, 0.45);
}
}
/* Final mobile typography lock: main phrase is always larger than secondary */
@media (max-width: 900px) {
.pp-osteo-page .animation__desc_main,
.pp-osteo-page .animation__desc_main.visible {
font-size: clamp(32px, 8.2vw, 46px) !important;
line-height: 1.1 !important;
font-weight: 600 !important;
}
.pp-osteo-page .animation__desc,
.pp-osteo-page .animation__desc.visible {
font-size: clamp(17px, 4.8vw, 24px) !important;
line-height: 1.26 !important;
font-weight: 400 !important;
}
.pp-osteo-page .animation__desc_sub,
.pp-osteo-page .animation__desc_sub.visible {
font-size: clamp(15px, 4.1vw, 20px) !important;
line-height: 1.32 !important;
}
}
@media (max-width: 576px) {
.pp-osteo-page .animation__desc_main,
.pp-osteo-page .animation__desc_main.visible {
font-size: clamp(28px, 7.2vw, 34px) !important;
line-height: 1.08 !important;
}
.pp-osteo-page .animation__desc,
.pp-osteo-page .animation__desc.visible {
font-size: clamp(15px, 4.6vw, 19px) !important;
line-height: 1.24 !important;
}
.pp-osteo-page .animation__desc_sub,
.pp-osteo-page .animation__desc_sub.visible {
font-size: clamp(13px, 3.9vw, 17px) !important;
line-height: 1.3 !important;
}
}
/* Mobile hard-fix: prevent horizontal shift/overflow in top program menu */
@media (max-width: 900px) {
.pp-osteo-page .multicolored-blocks {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
overflow: hidden !important;
flex-direction: column !important;
}
.pp-osteo-page .multicolored-blocks__wrapper {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
.pp-osteo-page .multicolored-blocks__block,
.pp-osteo-page .multicolored-blocks__block.background-blue,
.pp-osteo-page .multicolored-blocks__block.more {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* cancel old desktop/mobile paddings that stack and push content right */
.pp-osteo-page .multicolored-blocks__block.background-blue {
padding: 0 !important;
}
.pp-osteo-page .multicolored-blocks__block.background-blue .multicolored-blocks__link {
display: block !important;
width: 100% !important;
padding: 22px 20px 22px 24px !important;
box-sizing: border-box !important;
text-align: left !important;
}
.pp-osteo-page .multicolored-blocks__block.background-blue .multicolored-blocks__title {
max-width: 100% !important;
font-size: clamp(28px, 6.6vw, 34px) !important;
line-height: 1.16 !important;
word-break: normal !important;
overflow-wrap: anywhere;
}
.pp-osteo-page .multicolored-blocks__link.more {
display: block !important;
width: 100% !important;
padding: 18px 16px 18px 62px !important;
box-sizing: border-box !important;
font-size: clamp(14px, 4.8vw, 20px) !important;
line-height: 1.16 !important;
}
.pp-osteo-page .multicolored-blocks__block.more::after {
left: 22px !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
}
@media (max-width: 430px) {
.pp-osteo-page .multicolored-blocks__block.background-blue .multicolored-blocks__title {
font-size: clamp(24px, 6.8vw, 30px) !important;
}
.pp-osteo-page .multicolored-blocks__link.more {
padding: 16px 14px 16px 56px !important;
font-size: clamp(13px, 5vw, 18px) !important;
}
}
/* PP program menu component */
.pp-osteo-page .pp-program-menu {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 72px !important;
padding: 0 !important;
overflow: hidden;
isolation: isolate;
}
.pp-osteo-page .pp-program-menu__primary {
min-width: 0;
width: 100% !important;
padding: 0 !important;
}
.pp-osteo-page .pp-program-menu__primary-link {
display: flex !important;
align-items: center;
justify-content: flex-start;
min-height: 100%;
width: 100% !important;
padding: 38px 44px 38px 88px !important;
text-align: left !important;
box-sizing: border-box !important;
text-decoration: none;
}
.pp-osteo-page .pp-program-menu__title {
margin: 0 !important;
max-width: 100% !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-size: clamp(34px, 2.4vw, 46px) !important;
line-height: 1.14 !important;
overflow-wrap: anywhere;
}
.pp-osteo-page .pp-program-menu__secondary {
display: flex !important;
flex-direction: column;
width: 100% !important;
min-width: 0;
max-width: none;
}
.pp-osteo-page .pp-program-menu__secondary-item {
position: relative;
flex: 1 1 50%;
width: 100% !important;
min-width: 0 !important;
min-height: 0;
}
.pp-osteo-page .pp-program-menu__secondary-link {
display: block !important;
width: 100% !important;
padding: 34px 22px 34px 92px !important;
font-size: clamp(22px, 1.8vw, 32px) !important;
line-height: 1.12 !important;
box-sizing: border-box !important;
overflow-wrap: anywhere;
text-decoration: none;
}
.pp-osteo-page .pp-program-menu__secondary-item::after {
left: 38px !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
@media (max-width: 1200px) {
.pp-osteo-page .pp-program-menu__primary-link {
padding: 30px 26px 30px 56px !important;
}
.pp-osteo-page .pp-program-menu__secondary-link {
padding: 28px 16px 28px 74px !important;
}
.pp-osteo-page .pp-program-menu__secondary-item::after {
left: 24px !important;
}
}
@media (max-width: 900px) {
.pp-osteo-page .pp-program-menu {
display: block !important;
margin-bottom: 54px !important;
overflow: hidden !important;
}
.pp-osteo-page .pp-program-menu__secondary {
display: block !important;
min-width: 0;
max-width: 100%;
width: 100% !important;
}
.pp-osteo-page .pp-program-menu__primary,
.pp-osteo-page .pp-program-menu__secondary-item {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.pp-osteo-page .pp-program-menu__primary-link {
display: block !important;
padding: 22px 20px 22px 24px !important;
}
.pp-osteo-page .pp-program-menu__title {
font-size: clamp(30px, 7vw, 36px) !important;
line-height: 1.15 !important;
}
.pp-osteo-page .pp-program-menu__secondary-link {
padding: 18px 14px 18px 58px !important;
font-size: clamp(13px, 4.6vw, 19px) !important;
line-height: 1.16 !important;
}
.pp-osteo-page .pp-program-menu__secondary-item::after {
left: 20px !important;
}
}
@media (max-width: 430px) {
.pp-osteo-page .pp-program-menu__title {
font-size: clamp(26px, 7.2vw, 31px) !important;
}
.pp-osteo-page .pp-program-menu__secondary-link {
padding: 16px 12px 16px 54px !important;
font-size: clamp(12px, 4.9vw, 17px) !important;
}
}