/*
Home page v2
Здесь поэтапно выносим inline style="..." из resources/views/home_v2.blade.php,
чтобы основной шаблон не трогать и ничего не ломалось.
*/
/* Было: */
.t-body {
margin: 0;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
/* Было: */
a[name="main"],
a[name="about"],
a[name="opportunities"],
a[name="howitworks"],
a[name="design"],
a[name="tariffs"],
a[name="tariff1"],
a[name="tariff2"],
a[name="bonus"],
a[name="customers"],
a[name="feedback"],
a[name="FAQ"],
a[name="contacts"] {
font-size: 0;
}
/* Было: style="padding-bottom:30px;background-color:#ffd705;" */
#rec855812468,
#rec855821476 {
padding-bottom: 30px;
background-color: #ffd705;
}
/* Было: style="padding-top:120px;" */
#rec858728612 {
padding-top: 120px;
}
/* Было: внутри video-элемента */
.tn-elem[data-elem-id="1731324746974"] .tn-atom {
height: 100%;
}
/* Было: style="background-image:url('...')" (иконки карточек/тарифов) */
.tn-elem[data-elem-id="1731513818040"] .tn-atom {
background-image: url('/images/img-2b5cda0d7529db4b.png');
}
.tn-elem[data-elem-id="1731513864183"] .tn-atom {
background-image: url('/images/img-75df4b4b1471dda0.png');
}
.tn-elem[data-elem-id="1731513900574"] .tn-atom {
background-image: url('/images/img-bdbdfe7ac5abbf10.png');
}
.tn-elem[data-elem-id="1731513929615"] .tn-atom {
background-image: url('/images/img-d36dfbb5e3d3c722.png');
}
/* Было: style="background-image:url('...svg')" (фон в блоках дизайнов) */
.tn-elem[data-elem-id="1727365449614"] .tn-atom {
background-image: url('/images/img-07010bf540cd808a.svg');
}
/* ------------------------------------------------------------
Performance / UX: reduced motion
- Tilda export has lots of scroll/hover animations (t396/animation-sbs)
- For users who prefer reduced motion, disable transitions/animations
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto !important;
}
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
/* Ensure hidden-on-animate elements are visible */
.t396__elem--anim-hidden,
.t-animate,
.t-animate_started {
opacity: 1 !important;
transform: none !important;
}
}
/* ------------------------------------------------------------
Fix: "Корпоративное решение" shows 3 images, but should be 1
- Mobile "About" block is #rec855844426 (t-screenmax-640px)
- Keep main illustration (data-elem-id="1737908376739"), hide extra decorations
------------------------------------------------------------ */
#rec855844426 .tn-elem[data-elem-id="1738852883237"],
#rec855844426 .tn-elem[data-elem-id="1738852949283"] {
display: none !important;
}
/* ------------------------------------------------------------
Ellipses in desktop "About" block: ALWAYS visible
- Block: #rec855844240 (t-screenmin-640px)
- Middle: 1734945856522
- Sides: left 1734945856528, right 1734945856513
------------------------------------------------------------ */
#rec855844240 .tn-elem[data-elem-id="1734945856528"],
#rec855844240 .tn-elem[data-elem-id="1734945856513"] {
opacity: 1;
visibility: visible;
transform: translateX(0);
pointer-events: auto;
}
/* ------------------------------------------------------------
Video UX (About block): inline video + popup video
- Video is injected only on click (JS), so it doesn't affect initial load
------------------------------------------------------------ */
#rec855844240 .yp-video-trigger {
cursor: pointer;
}
/* Slot for inline video */
#rec855844240 .tn-elem[data-elem-id="1731324746974"] .tn-atom {
height: 100%;
width: 100%;
overflow: hidden;
}
#rec855844240 .yp-about-inline-video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.yp-video-modal {
position: fixed;
inset: 0;
z-index: 100000;
display: none;
}
.yp-video-modal.is-open {
display: block;
}
.yp-video-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.72);
}
.yp-video-modal__dialog {
position: relative;
max-width: 920px;
width: calc(100% - 32px);
margin: 48px auto;
background: #111;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5);
}
.yp-video-modal__close {
position: absolute;
top: 10px;
right: 10px;
width: 36px;
height: 36px;
border-radius: 999px;
border: none;
background: rgba(255, 255, 255, 0.12);
color: #fff;
font-size: 22px;
line-height: 36px;
cursor: pointer;
z-index: 100001;
pointer-events: auto;
}
.yp-video-modal__content {
aspect-ratio: 16 / 9;
background: #000;
}
.yp-video-modal__content video {
display: block;
width: 100%;
height: 100%;
}
/* Оптимизация анимаций в блоке rec855935375 (слайдер с прокруткой) */
#rec855935375 [data-animate-sbs-event] {
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
perspective: 1000px;
-webkit-perspective: 1000px;
}
#rec855935375 .tn-elem[data-animate-mobile="y"] {
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/* Дополнительная оптимизация для плавной анимации */
#rec855935375 .t396__elem {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* CSS Containment для изоляции перерисовок */
#rec855935375 {
contain: layout style paint;
}
/* Оптимизация для пользователей с предпочтением уменьшенного движения */
@media (prefers-reduced-motion: reduce) {
#rec855935375 [data-animate-sbs-event] {
animation: none !important;
transition: none !important;
}
#rec855935375 .tn-elem[data-animate-mobile="y"] {
animation: none !important;
transition: none !important;
}
}
/* Предотвращение layout thrashing */
#rec855935375 .tn-atom {
contain: layout style;
}
/* Оптимизация для изображений в слайдере */
#rec855935375 .tn-atom__img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
will-change: auto; /* Сброс will-change для изображений */
}
/* Оптимизация видимости элементов */
#rec855935375 .yp-visible[data-animate-sbs-event] {
/* Усиленное аппаратное ускорение для видимых анимированных элементов */
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
}
/* Предотвращение накопления композитных слоев */
#rec855935375 [data-animate-sbs-event]:not(.yp-visible) {
will-change: auto;
}
/* Оптимизация для низкой производительности устройств */
@media (max-width: 768px) {
#rec855935375 [data-animate-sbs-event] {
/* Упрощенные анимации на мобильных */
transition: transform 0.3s ease-out;
}
#rec855935375 .tn-elem[data-animate-mobile="y"] {
transition: transform 0.3s ease-out;
}
/* Additional mobile slider optimizations for 768px and below */
.t-slds__items-wrapper {
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Reduce animations during drag for better performance */
.t-slds__items-wrapper[data-slider-touch="yes"] {
transition: none !important;
}
}
/* ------------------------------------------------------------
Mobile scroll fix: Prevent horizontal scrolling on touch devices
- применяем ТОЛЬКО на мобильных и планшетах
- Prevent page from moving left/right when scrolling vertically
- Ensure smooth scrolling on iOS devices
------------------------------------------------------------- */
@media (max-width: 1024px) {
html,
body {
overflow-x: hidden;
width: 100%;
max-width: 100%;
}
body {
position: relative;
}
/* Prevent horizontal movement on touch */
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
/* Allow text selection in input fields */
input, textarea, select {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
/* Enable touch events for sliders */
.t-slds,
.t-slds__items-wrapper,
.t-slds__item,
.t-slds__main,
.slider,
.slick-slider,
.slick-track,
.slick-slide {
-webkit-user-select: auto;
-khtml-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
-webkit-touch-callout: default;
touch-action: pan-x;
}
/* Optimize slider performance on mobile devices */
.t-slds__items-wrapper,
.slick-track {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
will-change: transform;
}
/* Smooth transitions for slider items */
.t-slds__item,
.slick-slide {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Prevent iOS overscroll and improve touch responsiveness */
.t-slds__main,
.slick-list {
-webkit-overflow-scrolling: touch;
overflow: visible;
position: relative;
}
/* Fix for slider containers - allow horizontal swipe */
.t-slds__container,
.slick-slider {
overflow: visible;
position: relative;
}
/* Improve touch event handling for slider arrows */
.t-slds__arrow,
.t-slds__arrow_wrapper,
.slick-arrow {
-webkit-user-select: none;
user-select: none;
touch-action: manipulation;
}
/* Ensure containers don't overflow horizontally */
.t396__artboard {
overflow-x: hidden;
width: 100%;
max-width: 100%;
}
/* Mobile menu submenu indentation for tariff subitems */
.t-menusub__list-item .t-menusub__link-item[href*="#tariff"] {
padding-left: 20px;
position: relative;
}
.t-menusub__list-item .t-menusub__link-item[href*="#tariff"]::before {
content: "—";
position: absolute;
left: 0;
color: inherit;
font-weight: normal;
}
/* Hide scrollbar in mobile tariff submenu */
.t-menusub[data-submenu-hook="link_sub5_861216373"] {
overflow: hidden !important;
}
.t-menusub[data-submenu-hook="link_sub5_861216373"] .t-menusub__menu,
.t-menusub[data-submenu-hook="link_sub5_861216373"] .t-menusub__content,
.t-menusub[data-submenu-hook="link_sub5_861216373"] .t-menusub__list {
overflow: hidden !important;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
}
.t-menusub[data-submenu-hook="link_sub5_861216373"] .t-menusub__menu::-webkit-scrollbar,
.t-menusub[data-submenu-hook="link_sub5_861216373"] .t-menusub__content::-webkit-scrollbar,
.t-menusub[data-submenu-hook="link_sub5_861216373"] .t-menusub__list::-webkit-scrollbar {
display: none; /* Chrome, Safari, and Opera */
}
/* Mobile slider alignment fix: align slides with "Что вы получаете?" heading */
#rec855862536 .tn-elem[data-elem-id="1731513583164"] .slider,
#rec855862536 .tn-elem[data-elem-id="1731513583164"] .main {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Ensure slider content is left-aligned like the heading */
#rec855862536 .tn-elem[data-elem-id="1731513583164"] .slider > *,
#rec855862536 .tn-elem[data-elem-id="1731513583164"] .slider .slick-track,
#rec855862536 .tn-elem[data-elem-id="1731513583164"] .slider .slick-slide {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: left !important;
}
/* Specific slide alignment - match heading position */
#rec855862536 .tn-elem[data-elem-id="1731513583164"] .slick-slide {
display: flex !important;
justify-content: flex-start !important;
align-items: flex-start !important;
}
/* Mobile wrapper padding fix and tablist full width */
@media screen and (max-width: 640px) {
#allrecords .t395__wrapper_mobile-flex {
padding-left: 0;
}
/* Make tablist full width on mobile */
#allrecords ul[role="tablist"].t395__wrapper_mobile-flex {
width: 100% !important;
max-width: 100% !important;
}
#allrecords ul[role="tablist"].t395__wrapper_mobile-flex > li {
flex: 1 !important;
width: 100% !important;
}
/* Mobile tabs styling for #rec861810468 */
#rec861810468 .t395__wrapper_mobile-flex {
width: 100% !important;
max-width: 100% !important;
justify-content: center !important;
overflow-x: hidden !important;
padding-left: 5% !important;
}
#rec861810468 .t395__tab {
min-width: 34% !important;
flex: 1 1 0 !important;
}
/* Mobile tabs styling for #rec861832576 */
#rec861832576 .t395__wrapper_mobile-flex {
width: 100% !important;
max-width: 100% !important;
justify-content: center !important;
overflow-x: hidden !important;
padding-left: 5% !important;
}
#rec861832576 .t395__tab {
min-width: 34% !important;
flex: 1 1 0 !important;
}
/* Force remove padding-top for mobile blocks */
#rec861810468,
#rec861832576 {
padding-top: 0 !important;
}
/* Remove padding-top for tariff blocks on mobile */
#rec860444185,
#rec860475769,
#rec860475781,
#rec860505574,
#rec860505575,
#rec860505576,
#rec858726464 {
padding-top: 0 !important;
}
/* "6 важных вопросов" — отступы 10px и центрирование текста на мобильном */
#rec855972109 .tn-elem[data-elem-id="1728129822644"] {
left: 10px !important;
width: calc(100% - 20px) !important;
}
#rec855972109 .tn-elem[data-elem-id="1728129822644"] .tn-atom {
text-align: center !important;
}
/* FAQ: кликабельные зоны вопросов (accordionTrigger) с отступами 10px по краям на мобильном */
#rec855972110 .accordionTrigger,
#rec855972112 .accordionTrigger,
#rec855972114 .accordionTrigger,
#rec855972117 .accordionTrigger,
#rec855972119 .accordionTrigger,
#rec865933557 .accordionTrigger {
left: 10px !important;
width: calc(100% - 20px) !important;
}
/* FAQ: иконки плюса (accordion-icon) сдвигаем на 13px левее на мобильном */
#rec855972110 .accordion-icon,
#rec855972112 .accordion-icon,
#rec855972114 .accordion-icon,
#rec855972117 .accordion-icon,
#rec855972119 .accordion-icon,
#rec865933557 .accordion-icon {
left: 272px !important; /* 288 - 16 */
}
/* FAQ: сами блоки-вопросы (r t-rec t-rec_pb_45 uc-accord-link) с боковыми отступами 10px */
#rec855972110,
#rec855972112,
#rec855972114,
#rec855972117,
#rec855972119,
#rec865933557 {
padding-left: 10px !important;
padding-right: 10px !important;
padding-bottom: 10px !important;
}
/* Tariff buttons "Тарифы" — full-width with 10px side padding on mobile */
#rec861281840 .tn-elem[data-elem-id="1738836435641"],
#rec858726461 .tn-elem[data-elem-id="1738836894034"],
#rec858726462 .tn-elem[data-elem-id="1738837258573"],
#rec858726464 .tn-elem[data-elem-id="1738837288603"] {
left: 0 !important;
width: 100% !important;
}
#rec861281840 .tn-elem[data-elem-id="1738836435641"],
#rec858726461 .tn-elem[data-elem-id="1738836894034"],
#rec858726462 .tn-elem[data-elem-id="1738837258573"],
#rec858726464 .tn-elem[data-elem-id="1738837288603"] {
padding: 0 10px !important;
box-sizing: border-box;
}
/* Tariff buttons "Тарифы" — move up by 15px on mobile */
#rec861281840 .tn-elem[data-elem-id="1738836435641"] {
top: 576px !important; /* 591 - 15 */
}
#rec858726461 .tn-elem[data-elem-id="1738836894034"] {
top: 494px !important; /* 509 - 15 */
}
#rec858726462 .tn-elem[data-elem-id="1738837258573"] {
top: 544px !important; /* 559 - 15 */
}
#rec858726464 .tn-elem[data-elem-id="1738837288603"] {
top: 584px !important; /* 599 - 15 */
}
/* Tariff buttons "Тарифы" — remove tilt (rotation) on mobile */
#rec861281840 .tn-elem[data-elem-id="1738836435641"] .tn-atom,
#rec858726461 .tn-elem[data-elem-id="1738836894034"] .tn-atom,
#rec858726462 .tn-elem[data-elem-id="1738837258573"] .tn-atom,
#rec858726464 .tn-elem[data-elem-id="1738837288603"] .tn-atom {
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
}
/* FAQ: заголовки вопросов (1664622611558) на мобильных уже не на всю ширину и переносятся через дефис */
.tn-elem[data-elem-id="1664622611558"] {
width: 80% !important;
}
/* FAQ: фоновые полосы (shape 1717478344282) на всю ширину */
.tn-elem[data-elem-id="1717478344282"] {
width: 100% !important;
}
.tn-elem[data-elem-id="1664622611558"] .tn-atom {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
}
}
/* Remove 90px margin/padding from #rec861281840 on mobile */
@media screen and (max-width: 1024px) {
#rec861281840 {
margin-top: 0 !important;
padding-top: 0 !important;
}
}
}