Call sales: 000-000-0000
7 days a week 7AM-9PM
A
B
/* Магический градиент (глубокий синий → индиго) */
background: linear-gradient(180deg, #1a3cff 0%, #0d1f8f 55%, #050a3a 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* Контрастная тёмная обводка */
-webkit-text-stroke: 8px #000a2e;
paint-order: stroke fill;
/* Магический glow */
text-shadow:
4px 4px 0 rgba(0, 0, 40, 0.85),
0 0 10px rgba(50, 120, 255, 0.6),
0 0 22px rgba(80, 150, 255, 0.4);
}
/* Liquid Glass для Shape кнопки */
.MW-BTN-TEXT,
.MW-BTN-ICON{
pointer-events: none;
}
.MW-BTN{
border-radius: 999px;
background:
linear-gradient(90deg,
#46d3ff 0%,
#5b7cff 35%,
#7b5cff 65%,
#ff5aa5 100%
) border-box,
linear-gradient(180deg,
#2563eb 0%,
#3b82f6 45%,
#6366f1 100%
) padding-box;
border: 3px solid transparent;
box-shadow:
0 12px 28px rgba(40,90,255,0.25),
0 6px 14px rgba(0,0,0,0.18),
inset 0 1px 0 rgba(255,255,255,0.5),
inset 0 -6px 14px rgba(0,0,0,0.22);
position: relative;
transition:
box-shadow 240ms ease,
filter 240ms ease;
}
/* стеклянный верхний блик */
.MW-BTN::before{
content:"";
position:absolute;
left: 6%;
right: 6%;
top: 8%;
height: 55%;
border-radius: inherit;
background: linear-gradient(
180deg,
rgba(255,255,255,0.65),
rgba(255,255,255,0.18),
rgba(255,255,255,0)
);
pointer-events:none;
}
/* hover — apple-like liquid */
.MW-BTN:hover{
filter: brightness(1.04) saturate(1.06);
box-shadow:
0 18px 36px rgba(40,90,255,0.32),
0 8px 18px rgba(0,0,0,0.20),
inset 0 1px 0 rgba(255,255,255,0.6),
inset 0 -8px 18px rgba(0,0,0,0.24);
}
/* ===== Precision liquid highlight for 78px height ===== */
.MW-BTN{
overflow: hidden;
position: relative;
}
/* основной движущийся liquid highlight */
.MW-BTN::after{
content:"";
position:absolute;
/* ширина блика подобрана под кнопку 78px */
width: 140%;
height: 180%;
top: -40%;
left: -120%;
border-radius: inherit;
background: linear-gradient(
110deg,
rgba(255,255,255,0) 30%,
rgba(255,255,255,0.18) 42%,
rgba(255,255,255,0.55) 50%,
rgba(255,255,255,0.18) 58%,
rgba(255,255,255,0) 70%
);
opacity: 0;
pointer-events:none;
/* smooth like Apple */
transition: opacity 480ms ease;
}
/* subtle liquid movement */
.MW-BTN:hover::after{
opacity: 0.65;
animation: mwLiquidMove 2200ms cubic-bezier(.19,.8,.25,1) forwards;
}
@keyframes mwLiquidMove{
0%{
left: -120%;
}
100%{
left: 120%;
}
}
/* ===== Mobile + Click Liquid Press Effect ===== */
.MW-BTN{
/* убирает задержку тапа на mobile */
touch-action: manipulation;
/* улучшает responsiveness */
-webkit-tap-highlight-color: transparent;
}
/* эффект нажатия (desktop + mobile) */
.MW-BTN:active{
transform: translateY(1px) scale(0.985);
filter: brightness(0.98) saturate(1.08);
box-shadow:
0 6px 14px rgba(40,90,255,0.25),
inset 0 2px 6px rgba(0,0,0,0.25),
inset 0 1px 0 rgba(255,255,255,0.45);
}
/* усиливаем liquid highlight при press */
.MW-BTN:active::after{
opacity: 0.75;
animation: MWBTN-liquid-move 600ms cubic-bezier(.2,.8,.2,1);
}
/* Mobile-specific touch feedback */
@media (hover: none) and (pointer: coarse){
.MW-BTN{
transition:
transform 120ms ease,
box-shadow 120ms ease,
filter 120ms ease;
}
.MW-BTN:active{
transform: scale(0.97);
box-shadow:
0 4px 10px rgba(40,90,255,0.22),
inset 0 2px 6px rgba(0,0,0,0.28);
}
}
/* Universal hide class */
.uc-hide-element {
display: none !important;
}
/* ===============================
Moving Wizard — Glass Neon Shapes
=============================== */
/* ===== MW: переносим стиль на реальный shape и УБИВАЕМ любую заливку ===== */
.t396__elem.mwcard > .tn-atom,
.t396__elem.mwcard > .tn-atom__sbs-anim-wrapper,
.t396__elem.mwcard > .tn-atom__img,
.t396__elem.mwcard > div{
position: relative !important;
border-radius: 32px !important;
overflow: hidden !important;
isolation: isolate !important;
box-sizing: border-box !important;
/* 1) ЖЁСТКИЙ RESET фона (чтобы не было заливки внутри) */
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
transform: translate3d(0,0,0) !important;
}
/* 2) Рамка — отдельным слоем, без заливки (маска вырезает центр) */
.t396__elem.mwcard > .tn-atom::before,
.t396__elem.mwcard > .tn-atom__sbs-anim-wrapper::before,
.t396__elem.mwcard > div::before{
content:"";
position:absolute;
inset:0;
border-radius:inherit;
padding: 2px; /* толщина рамки */
pointer-events:none;
background: linear-gradient(135deg,
rgba(127,212,255,1),
rgba(255,126,219,.95),
rgba(169,120,255,1),
rgba(127,212,255,.95)
);
/* вырезаем центр */
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
/* легкий “glossy” glow у рамки (не заливает внутри) */
filter:
drop-shadow(0 0 10px rgba(127,212,255,.22))
drop-shadow(0 0 16px rgba(255,126,219,.16))
drop-shadow(0 0 22px rgba(169,120,255,.14));
opacity: .98;
}
/* 3) (пока) убираем всё остальное */
.t396__elem.mwcard > .tn-atom::after,
.t396__elem.mwcard > .tn-atom__sbs-anim-wrapper::after,
.t396__elem.mwcard > div::after{
content: none !important;
}
/* wrapper оставляем visible на будущее */
.t396__elem.mwcard{
overflow: visible !important;
}
/* === MW FIX: убиваем заливку именно у SVG Shape (Rectangle) === */
.t396__elem.mwcard svg,
.t396__elem.mwcard svg *{
fill: transparent !important;
fill-opacity: 0 !important;
}
/* На случай если Tilda рисует rect именно так */
.t396__elem.mwcard .tn-atom__shape rect{
fill: transparent !important;
fill-opacity: 0 !important;
}
/* Иногда shape сидит в .tn-atom — добиваем и там */
.t396__elem.mwcard .tn-atom svg,
.t396__elem.mwcard .tn-atom svg *{
fill: transparent !important;
fill-opacity: 0 !important;
}
/* ===== Wizard Services Block Upgrade ===== */
/* общий контейнер блока */
#recSV202 {
position: relative;
}
/* карточки */
#recSV202 .t-card {
background: rgba(255,255,255,0.72);
backdrop-filter: blur(12px);
border-radius: 18px;
padding: 34px 28px;
transition: all .35s ease;
border: 1px solid rgba(120, 90, 255, 0.12);
box-shadow: 0 10px 30px rgba(40, 20, 120, 0.06);
}
/* hover эффект */
#recSV202 .t-card:hover {
transform: translateY(-8px);
box-shadow:
0 20px 60px rgba(80, 40, 255, 0.18),
0 0 40px rgba(140, 110, 255, 0.12);
border: 1px solid rgba(140,110,255,0.28);
}
/* заголовки */
#recSV202 .t-card__title {
font-size: 20px;
font-weight: 600;
letter-spacing: 0.2px;
}
/* текст */
#recSV202 .t-card__descr {
font-size: 15px;
line-height: 1.6;
color: rgba(20,20,40,0.72);
}
/* иконки */
#recSV202 .t-card__icon {
opacity: 0.8;
transition: all .3s ease;
}
#recSV202 .t-card:hover .t-card__icon {
opacity: 1;
transform: scale(1.08);
}
/* wizard glow эффект */
#recSV202::before {
content: "";
position: absolute;
inset: -100px;
background:
radial-gradient(circle at 30% 20%, rgba(120,90,255,0.08), transparent 40%),
radial-gradient(circle at 70% 80%, rgba(80,200,255,0.06), transparent 40%);
pointer-events: none;
z-index: 0;
}
#recSV202 .t-container {
position: relative;
z-index: 1;
}
/* ===== Wizard Cards Hover (golden glow) — ONLY inside #rec1968380273 ===== */
#rec1968380273 { position: relative; }
/* Находим “карточку” внутри SV202 максимально безопасно */
#rec1968380273 .t-col > div{
position: relative;
border-radius: 18px;
overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
/*border: 0px solid rgba(130,110,255,.14); аккуратно, можно убрать если рамки уже есть */
}
/* Hover — золотое свечение */
#rec1968380273 .t-col > div:hover{
transform: translateY(-10px);
border-color: rgba(255, 196, 92, .55);
box-shadow:
0 22px 60px rgba(255, 168, 40, .24),
0 0 0 1px rgba(255, 214, 120, .18);
}
/* Внутренний “магический” градиент-ореол (не выходит за карточку) */
#rec1968380273 .t-col > div::before{
content:"";
position:absolute;
inset:-2px;
border-radius: 20px;
opacity: 0;
transition: opacity .25s ease;
pointer-events:none;
background:
radial-gradient(circle at 30% 20%, rgba(255, 214, 120, .35), transparent 55%),
radial-gradient(circle at 70% 80%, rgba(255, 150, 35, .22), transparent 60%);
filter: blur(10px);
}
#rec1968380273 .t-col > div:hover::before{
opacity: 1;
}
/* Лёгкий “spark” блик */
#rec1968380273 .t-col > div::after{
content:"";
position:absolute;
inset:0;
border-radius: 18px;
opacity: 0;
transition: opacity .25s ease, transform .25s ease;
pointer-events:none;
background: linear-gradient(120deg,
transparent 25%,
rgba(255, 220, 140, .18),
transparent 75%);
transform: translateX(-8%);
}
#rec1968380273 .t-col > div:hover::after{
opacity: 1;
transform: translateX(8%);
}
/* Иконку чуть “подсветить” */
#rec1968380273 .t-card__icon,
#rec1968380273 img{
transition: transform .25s ease, filter .25s ease, opacity .25s ease;
}
#rec1968380273 .t-col > div:hover .t-card__icon,
#rec1968380273 .t-col > div:hover img{
transform: translateY(-2px) scale(1.03);
filter: drop-shadow(0 10px 18px rgba(255, 170, 50, .22));
}
/* Текст чуть контрастнее на hover */
#rec1968380273 .t-title,
#rec1968380273 .t-card__title{
transition: color .25s ease;
}
#rec1968380273 .t-col > div:hover .t-title,
#rec1968380273 .t-col > div:hover .t-card__title{
color: rgba(20,20,40,.95);
}
/* ===============================
END Moving Wizard — Glass Neon Shapes
=============================== */