/*
* ═══════════════════════════════════════════════════════════
* SITE.CSS — наши стили
* Создано: 2026-04-25 13:34
* Состав: custom.css, popup-order.css
* ═══════════════════════════════════════════════════════════
*/
/* ═══════ START: custom.css (70 KB) ═══════ */
/* @import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;900&family=Manrope:wght@300;400;500;600;700&display=swap'); — локализовано в /css/fonts.css */
/* === Глобальная типографическая база ===
Определяем шрифты, которые на проде закрывает Tilda-фреймворк.
В тесте без этого блоки попадают в Times New Roman / Arial fallback. */
:root {
--t-text-font: 'Inter', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
--t-heading-font: 'Unbounded', 'Inter', system-ui, sans-serif;
}
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--t-text-font);
font-size: 16px;
line-height: 1.6;
color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--t-heading-font);
line-height: 1.2;
}
p { line-height: 1.65; }
/* ===== A11y: visually-hidden (для SEO-H1 и скрытых подписей) ===== */
.visually-hidden {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* ===== HOME / TIMELINE (этапы работы) ===== */
.home-timeline {
padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 120px);
background: #07070d;
color: #fff;
font-family: 'Inter', sans-serif;
position: relative;
overflow: hidden;
}
.home-timeline::before {
content: '';
position: absolute;
top: 30%;
right: -10%;
width: 50%;
height: 400px;
background: radial-gradient(circle, rgba(0, 245, 255, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.home-timeline__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 clamp(16px, 3vw, 40px);
position: relative;
}
.home-timeline__head {
text-align: center;
margin-bottom: clamp(40px, 6vw, 80px);
}
.home-timeline__eyebrow {
display: inline-block;
font-family: 'Oswald', sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #ff2d78;
margin-bottom: 12px;
text-shadow: 0 0 12px rgba(255, 45, 120, 0.4);
}
.home-timeline__title {
font-family: 'Oswald', sans-serif;
font-size: clamp(28px, 5.5vw, 56px);
font-weight: 500;
line-height: 1.1;
margin: 0 0 16px;
color: #fff;
}
.home-timeline__descr {
max-width: 560px;
margin: 0 auto;
font-size: clamp(14px, 1.4vw, 17px);
line-height: 1.5;
color: rgba(255, 255, 255, 0.65);
}
.home-timeline__list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
position: relative;
counter-reset: timeline;
}
/* Desktop neon line */
.home-timeline__list::before {
content: '';
position: absolute;
top: 24px;
left: 8.33%;
right: 8.33%;
height: 2px;
background: linear-gradient(90deg,
rgba(255, 45, 120, 0) 0%,
#ff2d78 10%,
#00f5ff 50%,
#ff2d78 90%,
rgba(255, 45, 120, 0) 100%);
box-shadow: 0 0 20px rgba(255, 45, 120, 0.4),
0 0 40px rgba(0, 245, 255, 0.2);
pointer-events: none;
opacity: 0.7;
}
.home-timeline__step {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding-top: 8px;
}
.home-timeline__dot {
position: relative;
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #0f0f1a 0%, #15151f 100%);
border: 2px solid rgba(255, 45, 120, 0.6);
box-shadow: 0 0 0 4px #07070d,
0 0 20px rgba(255, 45, 120, 0.4),
inset 0 0 10px rgba(0, 245, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
margin-bottom: 18px;
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.3s, border-color 0.3s;
}
.home-timeline__dot span {
font-family: 'Oswald', sans-serif;
font-weight: 600;
font-size: 13px;
color: #00f5ff;
letter-spacing: 0.04em;
text-shadow: 0 0 8px rgba(0, 245, 255, 0.6);
}
.home-timeline__step:hover .home-timeline__dot {
transform: scale(1.08);
border-color: #ff2d78;
box-shadow: 0 0 0 4px #07070d,
0 0 35px rgba(255, 45, 120, 0.7),
inset 0 0 14px rgba(0, 245, 255, 0.3);
}
.home-timeline__body { padding: 0 4px; }
.home-timeline__step-title {
font-family: 'Oswald', sans-serif;
font-size: clamp(15px, 1.4vw, 18px);
font-weight: 500;
margin: 0 0 8px;
letter-spacing: 0.02em;
color: #fff;
}
.home-timeline__step-descr {
font-size: clamp(12px, 1.05vw, 14px);
line-height: 1.5;
color: rgba(255, 255, 255, 0.55);
margin: 0;
}
.home-timeline__cta {
margin-top: clamp(40px, 6vw, 64px);
text-align: center;
}
.home-timeline__btn {
height: 52px;
padding: 0 36px;
font-size: 14px;
}
/* Tablet — 3 колонки (641-960px), чтобы 6 узких не ломали текст */
@media (min-width: 641px) and (max-width: 960px) {
.home-timeline__list {
grid-template-columns: repeat(3, 1fr);
gap: 20px 16px;
}
.home-timeline__list::before {
left: calc(100% / 6);
right: calc(100% / 6);
}
}
/* Mobile — вертикальная timeline */
@media (max-width: 640px) {
.home-timeline__list {
grid-template-columns: 1fr;
gap: 0;
}
.home-timeline__list::before {
top: 24px;
bottom: 24px;
left: 24px;
right: auto;
width: 2px;
height: auto;
background: linear-gradient(180deg,
rgba(255, 45, 120, 0) 0%,
#ff2d78 10%,
#00f5ff 50%,
#ff2d78 90%,
rgba(255, 45, 120, 0) 100%);
}
.home-timeline__step {
flex-direction: row;
align-items: flex-start;
text-align: left;
gap: 16px;
padding: 0 0 24px 0;
}
.home-timeline__dot {
flex-shrink: 0;
margin-bottom: 0;
width: 48px;
height: 48px;
}
.home-timeline__body {
padding-top: 10px;
flex: 1;
min-width: 0;
}
.home-timeline__step-title { font-size: 16px; }
}
/* ===== HOME / READY SOLUTIONS ===== */
.home-ready {
padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 120px);
background: transparent;
color: #fff;
font-family: 'Inter', sans-serif;
position: relative;
overflow: hidden;
}
.home-ready::before {
content: '';
position: absolute;
top: -20%;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 400px;
background: radial-gradient(ellipse, rgba(255, 45, 120, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.home-ready__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 clamp(16px, 3vw, 40px);
position: relative;
}
.home-ready__head {
text-align: center;
margin-bottom: clamp(32px, 5vw, 64px);
}
.home-ready__eyebrow {
display: inline-block;
font-family: 'Oswald', sans-serif;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 12px;
}
.home-ready__title {
font-family: 'Oswald', sans-serif;
font-size: clamp(28px, 5.5vw, 56px);
font-weight: 500;
line-height: 1.1;
margin: 0 0 16px;
color: #fff;
}
.home-ready__descr {
max-width: 560px;
margin: 0 auto;
font-size: clamp(14px, 1.4vw, 17px);
line-height: 1.5;
color: rgba(255, 255, 255, 0.65);
}
.home-ready__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: clamp(12px, 1.8vw, 20px);
}
/* Home-ready card — единый стиль с .shop-card / .shop-cat-card.
Токены: --card-bg, --card-border, --card-radius (определены в shop.css:root). */
.home-ready__card {
display: flex;
flex-direction: column;
text-decoration: none;
border-radius: 16px;
overflow: hidden;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
border-color 0.35s, box-shadow 0.35s, background 0.35s;
}
.home-ready__card:hover {
transform: translateY(-4px);
background: rgba(255, 255, 255, 0.045);
border-color: rgba(255, 255, 255, 0.18);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45),
0 6px 14px rgba(0, 0, 0, 0.3);
}
.home-ready__card-img {
position: relative;
aspect-ratio: 3 / 4;
overflow: hidden;
background: rgba(0, 0, 0, 0.35);
flex-shrink: 0;
}
.home-ready__card-img-bg,
.home-ready__card-img img:not(.home-ready__card-img-bg) {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
.home-ready__card-img-bg {
object-fit: cover;
object-position: center;
filter: blur(26px) saturate(1.25) brightness(0.75);
transform: scale(1.15);
opacity: 0.7;
z-index: 0;
pointer-events: none;
user-select: none;
}
.home-ready__card-img img:not(.home-ready__card-img-bg) {
object-fit: contain;
object-position: center;
z-index: 1;
transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.home-ready__card:hover .home-ready__card-img img:not(.home-ready__card-img-bg) {
transform: scale(1.03);
}
.home-ready__card-body {
display: flex;
flex-direction: column;
gap: 2px;
padding: 18px 18px 20px;
background: transparent;
flex: 1;
}
.home-ready__card-eyebrow {
font-family: 'Oswald', sans-serif;
font-size: 10px;
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
margin-bottom: 6px;
}
.home-ready__card-name {
font-family: 'Oswald', sans-serif;
font-size: clamp(16px, 1.5vw, 19px);
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.01em;
color: #fff;
margin: 0;
}
.home-ready__card-count {
font-family: 'Inter', sans-serif;
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.02em;
margin-top: 4px;
margin-bottom: 14px;
}
.home-ready__card-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 18px;
font-family: 'Oswald', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
border-radius: 999px;
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.18) 0%,
rgba(255, 255, 255, 0.08) 45%,
rgba(255, 255, 255, 0.03) 100%);
border: 1px solid rgba(255, 255, 255, 0.22);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 1px 2px rgba(0, 0, 0, 0.4);
transition: background 0.25s, border-color 0.25s, transform 0.2s;
align-self: flex-start;
margin-top: auto;
}
.home-ready__card:hover .home-ready__card-cta {
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.25) 0%,
rgba(255, 255, 255, 0.12) 50%,
rgba(255, 255, 255, 0.05) 100%);
border-color: rgba(255, 255, 255, 0.35);
}
.home-ready__foot {
margin-top: clamp(24px, 4vw, 48px);
text-align: center;
}
.home-ready__more {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
font-family: 'Oswald', sans-serif;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
color: #fff;
border-radius: 999px;
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.18) 0%,
rgba(255, 255, 255, 0.08) 45%,
rgba(255, 255, 255, 0.03) 100%);
border: 1px solid rgba(255, 255, 255, 0.22);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.25),
0 1px 2px rgba(0, 0, 0, 0.4),
0 4px 12px rgba(0, 0, 0, 0.2);
transition: background 0.25s, border-color 0.25s, transform 0.2s, box-shadow 0.25s;
}
.home-ready__more:hover {
background: linear-gradient(180deg,
rgba(255, 255, 255, 0.28) 0%,
rgba(255, 255, 255, 0.14) 50%,
rgba(255, 255, 255, 0.05) 100%);
border-color: rgba(255, 255, 255, 0.38);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.38),
0 2px 4px rgba(0, 0, 0, 0.4),
0 8px 20px rgba(0, 0, 0, 0.3);
transform: translateY(-2px);
}
.home-ready__more svg {
transition: transform 0.2s;
}
.home-ready__more:hover svg {
transform: translateX(4px);
}
@media (max-width: 640px) {
.home-ready__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
.home-ready__card-body { padding: 12px 12px 14px; gap: 0; }
.home-ready__card-eyebrow { font-size: 9px; letter-spacing: 0.18em; margin-bottom: 4px; }
.home-ready__card-name { font-size: 14px; }
.home-ready__card-count { font-size: 10.5px; margin-bottom: 10px; }
.home-ready__card-cta { font-size: 10px; padding: 8px 14px; letter-spacing: 0.08em; }
}
/* Точечное перекрытие inline-стилей с tilda-оранжевым на читаемый белый */
[style*="color: #ff8562"],
[style*="color:#ff8562"],
[style*="color: rgb(255, 133, 98)"] { color: rgba(255,255,255,0.85) !important; }
/* Попап заявки — серая палитра для текста */
.site-popup,
.site-popup p,
.site-popup span,
.site-popup li,
.site-popup label,
.site-popup__descr,
.site-popup__footer,
.site-popup__success-text,
.site-popup__contacts a { color: rgba(255, 255, 255, 0.75) !important; }
.site-popup__title,
.site-popup__success-title { color: #fff !important; }
.site-popup__label { color: rgba(255, 255, 255, 0.6) !important; }
.site-popup__footer a,
.site-popup a { color: rgba(0, 245, 255, 0.85) !important; }
.site-popup__footer a:hover,
.site-popup a:hover { color: #00f5ff !important; }
.site-popup__option span { color: rgba(255, 255, 255, 0.75) !important; }
.site-popup__option input:checked + span { color: #00f5ff !important; }
[style*="background-color: #fa876b"],
[style*="background-color:#fa876b"],
[style*="background: #fa876b"],
[style*="background:#fa876b"],
[style*="background-color: rgb(250, 135, 107)"] { background-color: #ff2d78 !important; }
/* Tilda ui-бейдж в карточках каталога */
.t396__ui { background-color: #ff2d78 !important; color: #fff !important; }
/* ===== ФОН НА ВЕСЬ САЙТ ===== */
html, body {
background: #07070d !important;
background-color: #07070d !important;
}
/* ===== ХЛЕБНЫЕ КРОШКИ ===== */
.ph-breadcrumb-zb {
font-family: 'Manrope', sans-serif !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
background: linear-gradient(90deg, #3030a0, #ff2d78, #00f5ff, #3030a0) !important;
background-size: 300% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
animation: breadcrumbFlow 4s linear infinite !important;
}
@keyframes breadcrumbFlow {
0% { background-position: 0% 50%; }
100% { background-position: 300% 50%; }
}
/* ===== БЕЙДЖ РОЗОВЫЙ ===== */
.badge-pink {
font-family: 'Manrope', sans-serif !important;
font-weight: 700 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: #ff2d78 !important;
background: rgba(255,45,120,0.05) !important;
border: 1px solid rgba(255,45,120,0.25) !important;
box-shadow: 0 0 8px rgba(255,45,120,0.3), inset 0 0 8px rgba(255,45,120,0.05) !important;
}
/* ===== БЕЙДЖ ГОЛУБОЙ ===== */
.badge {
font-family: 'Manrope', sans-serif !important;
font-weight: 700 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: #00f5ff !important;
background: rgba(0,245,255,0.07) !important;
border: 1px solid rgba(0,245,255,0.25) !important;
box-shadow: 0 0 8px rgba(0,245,255,0.2), inset 0 0 8px rgba(0,245,255,0.03) !important;
padding: 7px 18px !important;
white-space: nowrap !important;
display: inline-flex !important;
width: fit-content !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* ===== ЗАГОЛОВКИ ===== */
.title-white {
font-family: 'Unbounded', sans-serif !important;
font-weight: 900 !important;
color: #ffffff !important;
letter-spacing: -0.02em !important;
}
.title-pink {
font-family: 'Unbounded', sans-serif !important;
font-weight: 900 !important;
color: #ff2d78 !important;
letter-spacing: -0.02em !important;
text-shadow:
0 0 3px #fff,
0 0 7px #ff2d78,
0 0 18px #ff2d78,
0 0 35px rgba(255,45,120,0.6),
0 0 70px rgba(255,45,120,0.3) !important;
animation: flicker1 4s ease-in-out infinite;
}
.title-cyan {
font-family: 'Unbounded', sans-serif !important;
font-weight: 900 !important;
color: #00f5ff !important;
letter-spacing: -0.02em !important;
text-shadow:
0 0 3px #fff,
0 0 7px #00f5ff,
0 0 18px #00f5ff,
0 0 35px rgba(0,245,255,0.6),
0 0 70px rgba(0,245,255,0.3) !important;
animation: flicker2 6s ease-in-out infinite 2s;
}
@keyframes flicker1 {
0%,94%,100%{opacity:1}
95%{opacity:0.7}
96%{opacity:1}
97%{opacity:0.5}
98%{opacity:1}
}
@keyframes flicker2 {
0%,88%,100%{opacity:1}
89%{opacity:0.6}
91%{opacity:1}
92%{opacity:0.75}
}
/* ===== ПОДЗАГОЛОВОК ===== */
.subtitle {
font-family: 'Manrope', sans-serif !important;
font-weight: 300 !important;
color: #6060a0 !important;
line-height: 1.75 !important;
}
/* ===== КНОПКИ ===== */
.btn-pink .t-btn, .btn-pink {
font-family: 'Manrope', sans-serif !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
background: #ff2d78 !important;
color: #fff !important;
border-radius: 0 !important;
box-shadow: 0 0 25px rgba(255,45,120,0.5), 0 0 60px rgba(255,45,120,0.2) !important;
transition: all 0.3s !important;
}
.btn-pink:hover .t-btn, .btn-pink:hover {
box-shadow: 0 0 50px rgba(255,45,120,0.9) !important;
transform: translateY(-2px) !important;
}
.btn-ghost .t-btn, .btn-ghost {
font-family: 'Manrope', sans-serif !important;
font-weight: 500 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
background: transparent !important;
color: #e8e8f0 !important;
border: 1px solid rgba(255,255,255,0.15) !important;
border-radius: 0 !important;
transition: all 0.3s !important;
}
.btn-ghost:hover .t-btn, .btn-ghost:hover {
border-color: #00f5ff !important;
color: #00f5ff !important;
}
/* ===== ПЛАВАЮЩИЕ БЕЙДЖИ (шейп) ===== */
.float-badge {
background: rgba(0,245,255,0.05) !important;
border: 1px solid rgba(0,245,255,0.3) !important;
box-shadow: 0 0 8px rgba(0,245,255,0.2) !important;
}
.float-badge-1 { animation: fb1 4.2s ease-in-out infinite 0s !important; }
.float-badge-2 { animation: fb2 5.5s ease-in-out infinite 1.2s !important; }
.float-badge-3 { animation: fb3 3.8s ease-in-out infinite 2.4s !important; }
@keyframes fb1 {
0%,100%{transform:translateY(0)}
50%{transform:translateY(-14px)}
}
@keyframes fb2 {
0%,100%{transform:translateY(0) translateX(0)}
30%{transform:translateY(-20px) translateX(5px)}
70%{transform:translateY(-8px) translateX(-4px)}
}
@keyframes fb3 {
0%,100%{transform:translateY(0)}
40%{transform:translateY(-22px)}
70%{transform:translateY(-8px)}
}
/* ===== СЧЁТЧИКИ ===== */
.snum {
font-family: 'Unbounded', sans-serif !important;
font-weight: 900 !important;
line-height: 1 !important;
}
.snum.pink { color: #ff2d78 !important; text-shadow: 0 0 20px rgba(255,45,120,0.7); }
.snum.cyan { color: #00f5ff !important; text-shadow: 0 0 20px rgba(0,245,255,0.7); }
.snum.yellow { color: #ffe600 !important; text-shadow: 0 0 20px rgba(255,230,0,0.7); }
.slbl {
font-family: 'Manrope', sans-serif !important;
font-weight: 600 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: #5050a0 !important;
}
/* ===== FAQ КАРТОЧКИ ===== */
.ni-faq-item {
border: 1px solid rgba(255,255,255,0.06) !important;
transition: background 0.4s, border-color 0.4s, transform 0.35s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.ni-faq-item:hover {
background: rgba(255,255,255,0.05) !important;
transform: translateY(-6px) !important;
}
.ni-faq-item::before {
content: '' !important;
position: absolute !important;
top: 0; left: 0; right: 0 !important;
height: 3px !important;
transform: scaleX(0) !important;
transform-origin: left !important;
transition: transform 0.4s !important;
}
.ni-faq-item:hover::before {
transform: scaleX(1) !important;
}
.ni-c1::before { background: #ff2d78 !important; box-shadow: 0 0 12px 2px #ff2d78 !important; }
.ni-c1:hover { border-color: rgba(255,45,120,0.4) !important; box-shadow: 0 8px 30px rgba(255,45,120,0.2) !important; }
.ni-c2::before { background: #00f5ff !important; box-shadow: 0 0 12px 2px #00f5ff !important; }
.ni-c2:hover { border-color: rgba(0,245,255,0.4) !important; box-shadow: 0 8px 30px rgba(0,245,255,0.2) !important; }
.ni-c3::before { background: #7828ff !important; box-shadow: 0 0 12px 2px #7828ff !important; }
.ni-c3:hover { border-color: rgba(120,40,255,0.4) !important; box-shadow: 0 8px 30px rgba(120,40,255,0.2) !important; }
.ni-c4::before { background: #ffe600 !important; box-shadow: 0 0 12px 2px #ffe600 !important; }
.ni-c4:hover { border-color: rgba(255,230,0,0.4) !important; box-shadow: 0 8px 30px rgba(255,230,0,0.2) !important; }
.ni-c5::before { background: #39ff14 !important; box-shadow: 0 0 12px 2px #39ff14 !important; }
.ni-c5:hover { border-color: rgba(57,255,20,0.4) !important; box-shadow: 0 8px 30px rgba(57,255,20,0.2) !important; }
.sh-tag {
background: rgba(180,190,220,0.04) !important;
border: 1px solid rgba(180,190,220,0.15) !important;
}
.sh-tag-text {
font-family: 'Manrope', sans-serif !important;
font-weight: 700 !important;
font-size: 10px !important;
letter-spacing: 0.25em !important;
text-transform: uppercase !important;
color: rgba(180,190,220,0.7) !important;
}
.sh-title-metal {
font-family: 'Unbounded', sans-serif !important;
font-weight: 900 !important;
color: transparent !important;
background: linear-gradient(135deg, #c8d0e8 0%, #e8ecf8 40%, #a0aac8 100%) !important;
background-size: 200% !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
letter-spacing: -0.02em !important;
}
.sh-btn-main .t-btn, .sh-btn-main {
font-family: 'Manrope', sans-serif !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: #07070d !important;
background: linear-gradient(135deg, #c8d0e8, #e8ecf8, #a0aac8) !important;
border-radius: 0 !important;
border: none !important;
box-shadow: 0 0 30px rgba(180,190,220,0.2) !important;
transition: all 0.3s !important;
}
.sh-btn-main:hover .t-btn, .sh-btn-main:hover {
box-shadow: 0 0 50px rgba(180,190,220,0.4) !important;
transform: translateY(-2px) !important;
}
.sh-btn-ghost .t-btn, .sh-btn-ghost {
font-family: 'Manrope', sans-serif !important;
font-weight: 500 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
background: transparent !important;
color: rgba(180,190,220,0.7) !important;
border: 1px solid rgba(180,190,220,0.2) !important;
border-radius: 0 !important;
transition: all 0.3s !important;
}
.sh-btn-ghost:hover .t-btn, .sh-btn-ghost:hover {
border-color: rgba(180,190,220,0.5) !important;
color: #e8ecf8 !important;
}
.sh-title-metal * {
-webkit-text-fill-color: transparent !important;
}
/* КАРТОЧКА — группа */
.arts-card {
background: #0f0f12 !important;
border: 1px solid #1c1c20 !important;
overflow: hidden !important;
transition: background 0.22s ease !important;
}
.arts-card:hover {
background: #161619 !important;
border-color: #2a2a30 !important;
}
/* КАРТИНКА */
.arts-img img {
filter: brightness(0.55) saturate(0.6) !important;
transition: transform 0.5s ease, filter 0.35s ease !important;
object-fit: cover !important;
width: 100% !important;
height: 100% !important;
}
.arts-card:hover .arts-img img {
transform: scale(1.04) !important;
filter: brightness(0.75) saturate(0.85) !important;
}
/* НАЗВАНИЕ */
.arts-name {
font-family: 'Oswald', sans-serif !important;
font-weight: 600 !important;
text-transform: uppercase !important;
color: #ffffff !important;
letter-spacing: 0.5px !important;
line-height: 1.2 !important;
}
/* ОПИСАНИЕ */
.arts-text {
color: #5a5a5a !important;
line-height: 1.6 !important;
}
/* ЦЕНА */
.arts-price {
font-family: 'Oswald', sans-serif !important;
font-weight: 400 !important;
color: #3d3d3d !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
}
/* РАЗДЕЛИТЕЛЬ (Shape) */
.arts-shape {
background: #1c1c20 !important;
opacity: 1 !important;
}
/* ЛЕЙБЛ вверху */
.arts-label {
font-family: 'Oswald', sans-serif !important;
font-weight: 400 !important;
letter-spacing: 4px !important;
text-transform: uppercase !important;
color: #555555 !important;
}
/* ЗАГОЛОВОК блока */
.arts-title {
font-family: 'Oswald', sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
color: #ffffff !important;
line-height: 1.0 !important;
letter-spacing: -0.5px !important;
}
/* ПОДЗАГОЛОВОК блока */
.arts-sub {
color: #666666 !important;
line-height: 1.7 !important;
}
.buk-card {
background: #1a1a1a !important;
border: 1px solid #444444 !important;
transition: border-color 0.3s !important;
}
.buk-card:hover {
border-color: #888888 !important;
}
/* =========================================================================
===== RESPONSIVE LAYER (добавлено в шаге 2.8, 2026-04-21) ================
=========================================================================
Tilda-фреймворк имеет собственные media-queries (brakepoints 480/640/960/1200),
но кастомные классы выше писались без адаптива. Здесь fluid-тайпография через
clamp() + несколько breakpoints для тонкой настройки.
========================================================================= */
/* --- Fluid typography: кастомные заголовки и неоновые тайтлы --- */
.title-white,
.title-pink,
.title-cyan {
/* Базовый fluid font-size: от 24px на мобилке до 64px на десктопе.
Конкретные страницы могут переопределять inline — clamp применится как дефолт. */
font-size: clamp(24px, 5vw, 64px) !important;
line-height: 1.1 !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
.arts-title,
.sh-title-metal {
font-size: clamp(22px, 4.5vw, 56px) !important;
line-height: 1.05 !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
/* Subtitles и описания — fluid, но умереннее */
.subtitle,
.arts-sub,
.arts-text {
font-size: clamp(14px, 1.4vw, 18px) !important;
line-height: 1.6 !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
/* Счётчики (статистика) — крупные цифры, масштабируются сильно */
.snum {
font-size: clamp(32px, 7vw, 88px) !important;
}
.slbl {
font-size: clamp(10px, 1.1vw, 13px) !important;
}
/* Бейджи — не должны вылезать за границы на мобилке */
.badge,
.badge-pink {
font-size: clamp(10px, 1.1vw, 13px) !important;
padding: clamp(5px, 0.9vw, 8px) clamp(10px, 1.5vw, 18px) !important;
max-width: 100%;
}
/* Карточки услуг/галереи — типографика внутри */
.arts-label {
font-size: clamp(10px, 1vw, 12px) !important;
letter-spacing: clamp(2px, 0.3vw, 4px) !important;
}
.arts-name {
font-size: clamp(16px, 2vw, 24px) !important;
}
.arts-price {
font-size: clamp(11px, 1.2vw, 14px) !important;
letter-spacing: clamp(1px, 0.2vw, 2px) !important;
}
/* Крошки — они маленькие, но на очень маленьких экранах могут переполнить */
.ph-breadcrumb-zb {
font-size: clamp(9px, 1vw, 11px) !important;
letter-spacing: clamp(0.06em, 0.8vw, 0.12em) !important;
word-wrap: break-word !important;
}
/* Кнопки — не ужимаем агрессивно, Tilda их уже обрабатывает, но даём floor */
.btn-pink,
.btn-ghost,
.sh-btn-main,
.sh-btn-ghost {
font-size: clamp(11px, 1.1vw, 14px) !important;
}
/* Тэги блога (маленькие лейблы) */
.sh-tag-text {
font-size: clamp(9px, 1vw, 11px) !important;
letter-spacing: clamp(0.15em, 0.5vw, 0.25em) !important;
}
/* --- Универсальные защиты от переполнения --- */
/* Картинки никогда не должны растягивать контейнер (overflow на узких) */
/* Предотвращаем горизонтальный скролл от случайно широких элементов.
ВАЖНО: overflow-x: hidden на html/body ЛОМАЕТ sticky — используем clip
(поддерживается Chrome 90+, Safari 15.4+, Firefox 81+). */
html, body {
overflow-x: clip !important;
overflow-y: visible !important;
}
/* --- Mobile-специфик: ≤ 640px --- */
@media (max-width: 640px) {
/* FAQ карточки — hover translateY может ломать на touch-устройствах */
.ni-faq-item:hover {
transform: none !important;
}
/* Плавающие бейджи — на мобилке они часто перекрывают текст */
.float-badge,
.float-badge-1,
.float-badge-2,
.float-badge-3 {
animation: none !important;
transform: none !important;
}
/* Снижаем силу свечения на мобилках — экономия GPU + читаемость */
.title-pink {
text-shadow:
0 0 2px #fff,
0 0 5px #ff2d78,
0 0 12px #ff2d78,
0 0 24px rgba(255,45,120,0.5) !important;
}
.title-cyan {
text-shadow:
0 0 2px #fff,
0 0 5px #00f5ff,
0 0 12px #00f5ff,
0 0 24px rgba(0,245,255,0.5) !important;
}
}
/* --- Средние планшеты (641–960px) --- */
@media (min-width: 641px) and (max-width: 960px) {
.float-badge-1,
.float-badge-2,
.float-badge-3 {
/* Слабее амплитуда на планшетах */
animation-duration: 7s, 8s, 7s !important;
}
}
/* --- Очень большие экраны (≥ 1600px) — не даём типографике распухать бесконечно --- */
@media (min-width: 1600px) {
.title-white,
.title-pink,
.title-cyan {
font-size: 64px !important;
}
.arts-title,
.sh-title-metal {
font-size: 56px !important;
}
}
/* --- Уважение к prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
.title-pink,
.title-cyan,
.float-badge-1,
.float-badge-2,
.float-badge-3,
.ph-breadcrumb-zb {
animation: none !important;
}
}
/* --- Печать (print) --- */
@media print {
.t-rec,
html, body {
background: #fff !important;
color: #000 !important;
}
.float-badge,
.t-popup,
.t-menu,
#t-popup-close {
display: none !important;
}
}
/* ======================================================
HEADER v2 — эталон, не ломать
Документация: _meta/HEADER_TEMPLATE.md
Шаг 2.17 (2026-04-23): полный перепис шапки.
Старые блоки «HEADER / MENU NEON OVERLAY» (2.10) и
«HEADER EXTENDED» (2.11) удалены — новая разметка
использует .site-* классы, Tilda T461 больше не нужен.
====================================================== */
/* Скрываем возможные остатки Tilda-меню, если случайно остались */
.t461, .tmenu-mobile { display: none !important; }
/* ===== Site header root — всегда sticky + градиентная линия сверху ===== */
.site-header {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
font-family: 'Oswald', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
color: #fff;
}
.site-header::before {
content: '';
display: block;
height: 2px;
background: linear-gradient(90deg, #ff2d78 0%, #c457ff 50%, #00f5ff 100%);
/* без box-shadow — чистая линия без размытого ореола */
}
/* ===== Topbar (address | hours + email + socials) =====
Непрозрачный тёмный фон, чтобы градиентная линия сверху не просвечивала. */
.site-topbar {
position: relative;
z-index: 1;
background: #0b0b12;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
font-family: 'Inter', sans-serif;
font-size: 13px;
color: rgba(255, 255, 255, 0.65);
}
.site-topbar__inner {
max-width: 1400px;
margin: 0 auto;
min-height: 40px;
padding: 6px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.site-topbar__left,
.site-topbar__right {
display: flex;
align-items: center;
gap: 14px;
}
.site-topbar__item {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, 0.65);
text-decoration: none;
white-space: nowrap;
transition: color 0.2s;
}
.site-topbar__item svg { flex-shrink: 0; opacity: 0.65; }
.site-topbar__sep { opacity: 0.35; padding: 0 4px; }
.site-topbar__meta { color: rgba(255, 255, 255, 0.5); }
.site-topbar__divider {
width: 1px;
height: 14px;
background: rgba(255, 255, 255, 0.12);
}
.site-topbar__email {
color: rgba(255, 255, 255, 0.65);
font-family: 'Inter', sans-serif;
}
.site-topbar__email:hover { color: #fff; }
/* Соцсети в шапке — иконки крупные, без круглой подложки/рамки.
Цветные PNG/SVG сами по себе читаются на тёмном фоне. */
.site-header__socials {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.site-header__socials a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
color: rgba(255, 255, 255, 0.8);
background: transparent;
border: 0;
transition: transform 0.2s, filter 0.2s;
}
.site-header__socials a:hover {
transform: translateY(-1px);
filter: brightness(1.15);
}
.site-header__socials a img {
width: 26px;
height: 26px;
object-fit: contain;
display: block;
}
.site-header__socials a svg {
display: block;
width: 26px;
height: 26px;
}
/* ===== Main header ===== */
.site-header__main {
background: rgba(10, 10, 20, 0.85);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.site-header__main.is-scrolled {
background: rgba(6, 6, 12, 0.92);
border-bottom-color: rgba(255, 45, 120, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}
.site-header__inner {
max-width: 1400px;
margin: 0 auto;
height: 80px;
padding: 0 24px;
display: flex;
align-items: center;
gap: 32px;
}
/* ===== Logo (оригинальный, без subtitle) ===== */
.site-logo {
display: inline-flex;
align-items: center;
flex-shrink: 0;
transition: filter 0.25s;
filter: drop-shadow(0 0 8px rgba(255, 45, 120, 0.2));
}
.site-logo:hover {
filter: drop-shadow(0 0 12px rgba(255, 45, 120, 0.5)) drop-shadow(0 0 20px rgba(0, 245, 255, 0.2));
}
.site-logo img {
height: 40px;
width: auto;
display: block;
}
/* ===== Nav (desktop) ===== */
.site-nav {
flex: 1;
display: flex;
justify-content: center;
}
.site-nav__list {
display: flex;
align-items: center;
gap: 32px;
margin: 0;
padding: 0;
list-style: none;
}
.site-nav__item {
position: relative;
}
.site-nav__link {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 0;
background: none;
border: none;
cursor: pointer;
font-family: 'Oswald', sans-serif;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
position: relative;
transition: color 0.2s;
white-space: nowrap;
}
.site-nav__link::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -4px;
height: 2px;
background: linear-gradient(90deg, #ff2d78, #ff0099);
box-shadow: 0 0 8px rgba(255, 45, 120, 0.6);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.25s ease;
}
.site-nav__link:hover,
.site-nav__link.is-active,
.site-nav__item.has-active > .site-nav__link,
.site-nav__item.is-open > .site-nav__link {
color: #ff2d78;
}
.site-nav__link:hover::after,
.site-nav__link.is-active::after,
.site-nav__item.has-active > .site-nav__link::after,
.site-nav__item.is-open > .site-nav__link::after {
transform: scaleX(1);
}
.site-nav__chevron {
transition: transform 0.25s;
opacity: 0.7;
}
.site-nav__item.is-open .site-nav__chevron,
.site-nav__item:hover .site-nav__chevron {
transform: rotate(180deg);
}
/* ===== Dropdown ===== */
.site-nav__dropdown {
position: absolute;
top: calc(100% + 16px);
left: 50%;
transform: translateX(-50%) translateY(-8px);
min-width: 240px;
padding: 8px;
background: #0f0f1a;
border: 1px solid rgba(255, 45, 120, 0.2);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.02);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
display: flex;
flex-direction: column;
gap: 2px;
}
.site-nav__dropdown::before {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 12px;
height: 12px;
background: #0f0f1a;
border-left: 1px solid rgba(255, 45, 120, 0.2);
border-top: 1px solid rgba(255, 45, 120, 0.2);
}
.site-nav__item:hover .site-nav__dropdown,
.site-nav__item.is-open .site-nav__dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.site-nav__item.has-dropdown::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 16px;
}
.site-nav__dropdown a {
display: block;
padding: 10px 16px;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
border-radius: 8px;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
}
.site-nav__dropdown a:hover,
.site-nav__dropdown a.is-active {
background: rgba(255, 255, 255, 0.06);
color: #fff;
}
/* ===== Header CTA — правая зона: (phone + hours) | CTA ===== */
.site-header__cta {
display: flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
}
.site-header__contact {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
line-height: 1.1;
}
.site-phone {
font-family: 'Oswald', sans-serif;
font-size: 17px;
font-weight: 500;
color: #fff;
text-decoration: none;
transition: color 0.2s;
white-space: nowrap;
letter-spacing: 0.5px;
}
.site-phone:hover { color: #00f5ff; }
.site-phone-hours {
font-family: 'Inter', sans-serif;
font-size: 11px;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0.02em;
white-space: nowrap;
}
/* Базовый layout CTA — стилизация (металлик shimmer) идёт через общий override ниже */
.site-cta-btn {
height: 44px;
padding: 0 24px;
border: none;
border-radius: 100px;
color: #fff;
font-family: 'Oswald', sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: box-shadow 0.2s, transform 0.2s, filter 0.2s;
}
.site-cta-btn--wide {
width: 100%;
height: 52px;
font-size: 14px;
align-self: stretch;
}
/* ===== Burger (hidden on desktop) ===== */
.site-burger {
display: none;
width: 40px;
height: 40px;
padding: 0;
background: none;
border: none;
cursor: pointer;
position: relative;
flex-shrink: 0;
margin-left: auto;
}
.site-burger span {
display: block;
position: absolute;
left: 9px;
right: 9px;
height: 2px;
background: #fff;
border-radius: 2px;
transition: transform 0.3s, top 0.3s, opacity 0.2s;
}
.site-burger span:nth-child(1) { top: 13px; }
.site-burger span:nth-child(2) { top: 19px; }
.site-burger span:nth-child(3) { top: 25px; }
.site-burger[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.site-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-burger[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); }
/* ===== Mobile menu side-panel (выезжает справа) ===== */
.site-mobile-menu {
position: fixed;
inset: 0;
z-index: 1000;
pointer-events: none;
visibility: hidden;
transition: visibility 0.3s;
}
.site-mobile-menu.is-open {
pointer-events: auto;
visibility: visible;
}
.site-mobile-menu__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.3s;
cursor: pointer;
}
.site-mobile-menu.is-open .site-mobile-menu__backdrop { opacity: 1; }
.site-mobile-menu__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 82%;
max-width: 360px;
background: linear-gradient(180deg, #0f0f1a 0%, #0b0b14 100%);
border-left: 1px solid rgba(255, 45, 120, 0.15);
box-shadow: -20px 0 50px -10px rgba(0, 0, 0, 0.6),
inset 1px 0 0 rgba(0, 245, 255, 0.05);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.32, 0.72, 0.2, 1);
overflow-y: auto;
overscroll-behavior: contain;
}
.site-mobile-menu.is-open .site-mobile-menu__panel {
transform: translateX(0);
}
body.site-mobile-menu-open { overflow: hidden; }
.site-mobile-menu__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
flex-shrink: 0;
}
.site-mobile-menu__logo img { height: 32px; width: auto; display: block; }
.site-mobile-menu__close {
width: 40px;
height: 40px;
background: none;
border: none;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
transition: background 0.2s, color 0.2s;
}
.site-mobile-menu__close:hover {
background: rgba(255, 255, 255, 0.05);
color: #ff2d78;
}
.site-mobile-menu__nav {
flex: 1;
padding: 12px 20px;
display: flex;
flex-direction: column;
gap: 2px;
}
.site-mobile-menu__item,
.site-mobile-menu__group > summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
font-family: 'Oswald', sans-serif;
font-size: 16px;
font-weight: 500;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #fff;
text-decoration: none;
border-radius: 12px;
cursor: pointer;
list-style: none;
transition: background 0.2s, color 0.2s;
}
.site-mobile-menu__item:hover,
.site-mobile-menu__group > summary:hover,
.site-mobile-menu__group[open] > summary {
background: rgba(255, 45, 120, 0.08);
color: #ff2d78;
}
.site-mobile-menu__group > summary::after {
content: '';
width: 10px;
height: 10px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
margin-left: 12px;
transition: transform 0.2s;
}
.site-mobile-menu__group[open] > summary::after {
transform: rotate(-135deg);
}
.site-mobile-menu__group > summary::-webkit-details-marker { display: none; }
.site-mobile-menu__sub {
display: flex;
flex-direction: column;
padding: 4px 0 8px 20px;
}
.site-mobile-menu__sub a {
padding: 12px 20px;
font-family: 'Inter', sans-serif;
font-size: 15px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
border-radius: 8px;
transition: background 0.2s, color 0.2s;
}
.site-mobile-menu__sub a:hover {
background: rgba(255, 45, 120, 0.08);
color: #ff2d78;
}
.site-mobile-menu__footer {
padding: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
display: flex;
flex-direction: column;
gap: 16px;
flex-shrink: 0;
}
.site-mobile-menu__phone {
display: block;
text-align: center;
font-family: 'Oswald', sans-serif;
font-size: 20px;
font-weight: 500;
color: #fff;
text-decoration: none;
letter-spacing: 1px;
}
.site-mobile-menu__phone:hover { color: #00f5ff; }
.site-mobile-menu__contact {
display: flex;
flex-direction: column;
gap: 4px;
text-align: center;
font-family: 'Inter', sans-serif;
font-size: 13px;
color: rgba(255, 255, 255, 0.6);
}
.site-mobile-menu__contact a {
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
}
.site-mobile-menu__contact a:hover { color: #ff2d78; }
.site-mobile-menu__socials {
display: flex;
justify-content: center;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.site-mobile-menu__socials a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
transition: color 0.2s, background 0.2s, transform 0.2s;
}
.site-mobile-menu__socials a:hover {
color: #ff2d78;
background: rgba(255, 45, 120, 0.12);
transform: translateY(-2px);
}
/* ===== Tablet (768 - 1200px) — скрываем десктоп-меню и телефон, оставляем CTA ===== */
@media (max-width: 1200px) {
.site-nav { display: none; }
.site-header__contact { display: none; }
.site-header__cta { margin-left: auto; gap: 12px; }
.site-header__inner { height: 72px; gap: 16px; }
.site-header__cta .site-cta-btn {
padding: 0 20px;
height: 42px;
font-size: 13px;
}
.site-burger { display: block; margin-left: 8px; }
/* На планшете уплотняем топбар: убираем часы-слева дубликат + email — оставляем только адрес и соцсети */
.site-topbar__right .site-topbar__divider:first-of-type { display: none; }
}
/* ===== Mobile (<768px) ===== */
@media (max-width: 768px) {
.site-topbar { display: none; }
.site-header__inner {
height: 64px;
padding: 0 16px;
gap: 12px;
}
.site-logo img { height: 32px; }
.site-header__cta { display: none; }
.site-nav { display: none; }
.site-burger { display: block; margin-left: auto; }
}
/* ===== Very narrow (<360px) ===== */
@media (max-width: 360px) {
.site-header__inner { padding: 0 12px; gap: 6px; }
.site-logo img { height: 28px; }
}
/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
.site-nav__link::after,
.site-nav__dropdown,
.site-cta-btn,
.site-burger span,
.site-mobile-menu {
transition: none !important;
}
.site-cta-btn:hover,
.site-header__socials a:hover,
.site-mobile-menu__socials a:hover {
transform: none;
}
}
/* ===== Print ===== */
@media print {
.site-topbar,
.site-header__main,
.site-mobile-menu {
display: none !important;
}
}
/* ===== ADAPT-LAYER (шаг 2.18.9, 2026-04-23) =====
Универсальные мобильные фиксы для Tilda T396 и T123 блоков. */
@media (max-width: 640px) {
/* Tilda T396 artboard может иметь фиксированную ширину 1200px — переполняется */
.t396__artboard,
.t396__carrier,
.t396__filter {
max-width: 100vw !important;
overflow-x: hidden !important;
}
/* Абсолютно-позиционированные элементы могут выходить за viewport */
.t396__elem.tn-elem {
max-width: 100vw !important;
}
/* Все inline-кнопки Tilda (t-btn, t-btnflex) на мобилке —
минимальная высота 44px (Apple HIG), полная ширина где возможно */
.t-btn, .t-btnflex, .t-submit {
min-height: 44px !important;
}
/* Картинки в любых каруселях не больше viewport */
.swiper-slide img,
.t-slds__container img,
/* Store-cards 2 колонки на узких экранах (default Tilda — 4 колонки) */
}
@media (max-width: 380px) {
}
/* =====================================================================
STEP 2.19 FIX-LAYER (2026-04-23)
Большой слой фиксов по обратной связи владельца.
===================================================================== */
/* ---------- Этап B: цвета хлебных крошек и компонентных ссылок ---------- */
/* Хлебные крошки во всех контекстах */
.shop-crumbs .shop-crumb,
.shop-breadcrumb a,
.breadcrumb a,
.blog-breadcrumbs a,
nav.breadcrumbs a {
color: rgba(255, 255, 255, 0.6) !important;
text-decoration: none !important;
}
.shop-crumbs .shop-crumb:hover,
.shop-breadcrumb a:hover,
.breadcrumb a:hover,
.blog-breadcrumbs a:hover {
color: #00f5ff !important;
text-shadow: none !important;
}
.shop-crumbs .shop-crumb--current,
.breadcrumb__current,
.shop-breadcrumb__current {
color: rgba(255, 255, 255, 0.95) !important;
}
.shop-crumbs .shop-crumb-sep,
.breadcrumb__sep {
color: rgba(255, 255, 255, 0.3) !important;
}
/* Email в шапке — белый, не cyan, не оранжевый */
.site-email,
a.site-email {
color: rgba(255, 255, 255, 0.75) !important;
}
.site-email:hover,
a.site-email:hover {
color: #fff !important;
}
/* Любые ссылки в main-контенте магазина — серые (чтобы Tilda-оранжевый не пролез) */
.shop-main a:not(.shop-card):not(.shop-category-card):not(.shop-theme-card):not(.site-cta-btn):not(.shop-cta-block__btn):not(.shop-product__cta):not(.shop-product__phone):not(.shop-crumb):not(.shop-crumb--current) {
color: rgba(255, 255, 255, 0.8) !important;
}
.shop-main a:not(.shop-card):not(.shop-category-card):not(.shop-theme-card):not(.site-cta-btn):not(.shop-cta-block__btn):not(.shop-product__cta):not(.shop-product__phone):not(.shop-crumb):not(.shop-crumb--current):hover {
color: #00f5ff !important;
}
/* Tilda catalog markers — скрыть везде, даже если где-то остались */
/* Любой текст вида "ERROR:The Catalog..." */
/* ---------- Этап C: Шапка sticky — НЕ ТРОГАЕМ (уже работает из HEADER v2) ----------
position: sticky уже задан в блоке HEADER v2 выше.
Убираем все агрессивные !important и transform/filter: none — они ломали layout. */
/* ---------- Этап D: УБРАНО — t-container и shop-main уже имеют max-width в своих CSS.
Переопределение здесь конфликтовало с inline-стилями Tilda и ломало layout. */
/* ---------- Этап F: унификация соцсетей в мобильном меню ---------- */
/* Соцсети в burger-меню — тёмный круг + cyan/pink hover (как в шапке) */
.site-mobile-menu__socials a {
color: rgba(255, 255, 255, 0.55) !important;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
width: 40px !important;
height: 40px !important;
}
.site-mobile-menu__socials a:hover {
color: #00f5ff !important;
background: rgba(0, 245, 255, 0.08) !important;
border-color: rgba(0, 245, 255, 0.4) !important;
transform: translateY(-2px) !important;
}
.site-mobile-menu__socials svg {
color: currentColor;
fill: currentColor;
}
.site-mobile-menu__socials a img {
width: 22px;
height: 22px;
object-fit: contain;
display: block;
}
/* ---------- Этап I: CTA-кнопка в шапке — отступ справа (простой, без env()) ---------- */
.site-header__inner {
padding-right: 24px;
}
@media (max-width: 1200px) {
.site-header__inner { padding-right: 20px; }
}
@media (max-width: 768px) {
.site-header__inner { padding-right: 16px; }
}
/* ---------- Универсальная защита: shop-card и home-ready-card одинаковых пропорций ---------- */
.home-ready__card-img {
aspect-ratio: 3 / 4 !important;
}
/* ---------- Этап H: Адаптация всех страниц — базовые фиксы для неглавных ---------- */
/* html, body уже overflow-x: hidden. Проверяем что min-width не обрывает. */
@media (max-width: 768px) {
/* Tilda cover-секции на mobile — уменьшаем паддинги чтобы текст не обрезался */
.t-cover__wrapper {
padding-left: 12px !important;
padding-right: 12px !important;
}
/* Большие заголовки на узких экранах */
.t-title_xxxl, .t-title_xxl {
font-size: clamp(26px, 7vw, 40px) !important;
line-height: 1.15 !important;
}
/* Paragrafs */
.t-descr_xxxl, .t-descr_xxl, .t-descr_xl, .t-descr_lg {
font-size: clamp(13px, 3.6vw, 16px) !important;
line-height: 1.5 !important;
}
/* shop — карточки в 2 колонки на мобилке */
.shop-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
.shop-card__body {
padding: 12px 12px 14px !important;
}
.shop-card__title {
font-size: 13px !important;
min-height: 2.4em !important;
}
}
@media (max-width: 420px) {
.shop-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
}
.shop-product__inner {
grid-template-columns: 1fr !important;
}
}
/* Горизонтальный scroll уже предотвращён на html/body с 2.8 — не трогаем t-rec */
/* T396 MOBILE SAFETY (2.24+2.25 откачено 2.26)
Агрессивный flex-column override ломал hero-блоки на главной (tilda-ваши
absolute-элементы переставали собираться в задуманную композицию).
Оставляем ТОЛЬКО защиту от горизонтального скролла — Tilda сама адаптирует
layout через свой @media (320-раскладка). Текст на главной будет виден
в том виде как задумала Tilda (с inline @media max-width:1199px). */
@media screen and (max-width: 640px) {
.t396__artboard,
.t396__filter,
.t396__carrier {
max-width: 100vw !important;
}
.t396__elem {
max-width: 100vw !important;
}
}
/* ============================================================================
METALLIC BUTTONS (шаг 2.27, 2026-04-23)
Все CTA сайта — тёмный металлик с переливающимся shimmer-gradient.
Замена розового (#ff2d78 / #ff0099) везде.
Перебивает inline Tilda и ранее написанные pink правила через !important.
========================================================================== */
@keyframes btn-metallic-shimmer {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.site-cta-btn,
.site-popup__submit,
.shop-cat-card__cta,
.shop-cta-block__btn,
.shop-product__cta,
.home-ready__more,
.home-timeline__btn,
.blog-post__cta,
.blog-share__copy,
.js-site-form button[type="submit"] {
background: linear-gradient(135deg,
#1e1e2a 0%,
#32323e 20%,
#55556a 50%,
#32323e 80%,
#1e1e2a 100%
) !important;
background-size: 220% 220% !important;
animation: btn-metallic-shimmer 6s ease-in-out infinite;
color: #fff !important;
border: 1px solid rgba(255, 255, 255, 0.22) !important;
box-shadow:
0 4px 14px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.14),
inset 0 -1px 0 rgba(0, 0, 0, 0.35) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
transition: filter 0.2s ease, transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.site-cta-btn:hover,
.site-popup__submit:hover,
.shop-cat-card__cta:hover,
.shop-cta-block__btn:hover,
.shop-product__cta:hover,
.home-ready__more:hover,
.home-timeline__btn:hover,
.blog-post__cta:hover,
.blog-share__copy:hover,
.js-site-form button[type="submit"]:hover {
filter: brightness(1.3) !important;
border-color: rgba(255, 255, 255, 0.28) !important;
transform: translateY(-1px) !important;
box-shadow:
0 6px 20px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.14),
inset 0 -1px 0 rgba(0, 0, 0, 0.5) !important;
}
.site-cta-btn:active,
.site-popup__submit:active,
.shop-cat-card__cta:active,
.shop-cta-block__btn:active,
.shop-product__cta:active,
.home-ready__more:active,
.home-timeline__btn:active,
.blog-post__cta:active,
.blog-share__copy:active {
transform: translateY(0) !important;
filter: brightness(1) !important;
}
/* home-ready__more был в outline-стиле (прозрачный фон + border) — убираем его спец-background
чтобы metallic-gradient из правила выше применился нормально */
.home-ready__more {
background-color: transparent;
}
/* prefers-reduced-motion: отключить shimmer */
@media (prefers-reduced-motion: reduce) {
.site-cta-btn,
.site-popup__submit,
.shop-cat-card__cta,
.shop-cta-block__btn,
.shop-product__cta,
.home-ready__more,
.home-timeline__btn,
.blog-post__cta,
.blog-share__copy {
animation: none !important;
background-position: 50% 50% !important;
}
}
/* =========================================================================
CLEAN COLOR LAYER (2026-04-24)
Единая цветовая схема: белый текст на тёмном фоне, серые акценты.
Убраны: радужные хлебные крошки, neon-glow на бейджах, 5-цветные FAQ,
фиолетовые подписи, cyan-ссылки в контенте, rainbow-линия шапки.
СОХРАНЕНЫ: neon-glow на .title-pink/.title-cyan (витрина продукта),
metallic CTA-кнопки, hover-эффекты навигации.
========================================================================= */
/* --- Хлебные крошки: убираем радужную анимацию → статичный серый --- */
.ph-breadcrumb-zb {
background: none !important;
-webkit-text-fill-color: rgba(255,255,255,0.5) !important;
color: rgba(255,255,255,0.5) !important;
animation: none !important;
}
/* --- Бейджи: убираем neon glow → нейтральный --- */
.badge-pink, .badge {
color: rgba(255,255,255,0.7) !important;
background: rgba(255,255,255,0.04) !important;
border-color: rgba(255,255,255,0.12) !important;
box-shadow: none !important;
text-shadow: none !important;
}
/* --- FAQ-карточки: единый нейтральный акцент вместо 5 цветов --- */
.ni-c1::before,.ni-c2::before,.ni-c3::before,.ni-c4::before,.ni-c5::before {
background: rgba(255,255,255,0.22) !important;
box-shadow: none !important;
}
.ni-c1:hover,.ni-c2:hover,.ni-c3:hover,.ni-c4:hover,.ni-c5:hover {
border-color: rgba(255,255,255,0.15) !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
}
/* --- Счётчики: все белые (убраем pink/cyan/yellow) --- */
.snum.pink,.snum.cyan,.snum.yellow {
color: #fff !important;
text-shadow: none !important;
}
/* --- Подписи: серые вместо фиолетового --- */
.subtitle { color: rgba(255,255,255,0.55) !important; }
.slbl { color: rgba(255,255,255,0.45) !important; }
/* --- Плавающие бейджи: нейтральные --- */
.float-badge {
background: rgba(255,255,255,0.03) !important;
border-color: rgba(255,255,255,0.09) !important;
box-shadow: none !important;
}
/* --- Ссылки в Tilda-контенте: дефолтный читаемый белый, низкая специфичность через :where(),
чтобы компонентные стили (.neon-page a, .blog-content a и т.д.) могли перебить без хаков --- */
/* Дефолтный цвет ссылок: читаемый белый. Низкая специфичность, без !important —
компонентные стили (.neon-page a, .blog-content a и т.п.) свободно перебивают. */
.site-content a { color: rgba(255,255,255,0.85); }
.site-content a:hover { color: #fff; }
/* --- Навигация: hover/active → белый вместо розового --- */
.site-nav__link:hover,.site-nav__link.is-active,
.site-nav__item.has-active > .site-nav__link,
.site-nav__item.is-open > .site-nav__link {
color: #fff !important;
}
.site-nav__link::after {
background: rgba(255,255,255,0.55) !important;
box-shadow: none !important;
}
/* --- Мобильное меню: hover → белый вместо pink/cyan --- */
.site-mobile-menu__item:hover,
.site-mobile-menu__group > summary:hover,
.site-mobile-menu__group[open] > summary {
background: rgba(255,255,255,0.06) !important;
color: #fff !important;
}
.site-mobile-menu__sub a:hover { color: #fff !important; background: rgba(255,255,255,0.05) !important; }
.site-mobile-menu__close:hover { color: #fff !important; background: rgba(255,255,255,0.06) !important; }
.site-mobile-menu__contact a:hover { color: #fff !important; }
.site-mobile-menu__phone:hover { color: #fff !important; }
.site-mobile-menu__socials a:hover {
color: #fff !important;
background: rgba(255,255,255,0.08) !important;
border-color: rgba(255,255,255,0.22) !important;
transform: translateY(-2px) !important;
}
/* --- Шапка: линия сверху → тонкая белая вместо rainbow --- */
.site-header::before {
background: rgba(255,255,255,0.15) !important;
}
/* --- Логотип в шапке: убираем двойной neon glow --- */
.site-logo { filter: none !important; }
.site-logo:hover { filter: brightness(1.1) !important; }
/* --- Шапка при скролле: нейтральная граница вместо розовой --- */
.site-header__main.is-scrolled {
border-bottom-color: rgba(255,255,255,0.12) !important;
}
/* --- Dropdown в навигации: нейтральная граница --- */
.site-nav__dropdown,
.site-nav__dropdown::before {
border-color: rgba(255,255,255,0.1) !important;
}
/* --- Унификация шрифта в текстовых (не-artboard) блоках --- */
/* --- Одиночная колонка в строке → полная ширина контейнера --- */
/* =========================================================================
ЦВЕТОВАЯ СХЕМА (нав/топбар/мобильное меню/кнопки)
========================================================================= */
/* --- Навигация (десктоп) --- */
.site-nav__link,
.site-nav__toggle {
color: rgba(255,255,255,0.85);
}
.site-nav__link:hover,
.site-nav__link.is-active,
.site-nav__item.has-active > .site-nav__link {
color: #fff;
}
/* --- Топбар --- */
.site-topbar__item,
.site-topbar__item span,
.site-topbar__email,
a.site-topbar__email {
color: rgba(255,255,255,0.6);
}
.site-topbar__email:hover, a.site-topbar__email:hover { color: #fff; }
/* --- Телефон / логотип --- */
.site-phone { color: #fff; }
.site-phone:hover { color: rgba(255,255,255,0.8); }
.site-logo, .site-logo img { color: #fff; }
/* --- Мобильное меню --- */
.site-mobile-menu__item,
.site-mobile-menu__group > summary {
color: #fff;
}
.site-mobile-menu__sub a { color: rgba(255,255,255,0.75); }
.site-mobile-menu__sub a:hover { color: #fff; }
.site-mobile-menu__phone { color: #fff; }
.site-mobile-menu__contact a { color: rgba(255,255,255,0.65); }
.site-mobile-menu__contact a:hover { color: #fff; }
/* --- Кнопки --- */
.site-cta-btn,
.site-popup__submit {
color: #fff;
}
/* ===== art-print-wrapper / art-seo-wrapper — DECOLOR ===== */
/* Убрать декоративные цветные пятна */
.art-print-wrapper::before,
.art-print-wrapper::after { display: none; }
/* Заголовки — белый вместо градиентов */
.art-print-wrapper .section-header h2,
.art-seo-wrapper .seo-text h2 {
background: none !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: #ffffff !important;
background-clip: unset !important;
color: #ffffff !important;
}
/* Иконки карточек — нейтральные */
.art-print-wrapper .service-card .card-icon {
background: rgba(255,255,255,0.04) !important;
border-color: rgba(255,255,255,0.08) !important;
}
.art-print-wrapper .service-card .card-icon svg { stroke: rgba(255,255,255,0.5) !important; }
/* Карточка hover — нейтральный */
.art-print-wrapper .service-card:hover { border-color: rgba(255,255,255,0.15) !important; }
.art-print-wrapper .service-card::before { background: rgba(255,255,255,0.10) !important; }
/* Цена — нейтральная */
.art-print-wrapper .service-card .price-tag {
background: rgba(255,255,255,0.05) !important;
border-color: rgba(255,255,255,0.12) !important;
color: rgba(255,255,255,0.75) !important;
}
/* Преимущества — иконки нейтральные */
.art-print-wrapper .benefit-item .b-icon {
background: rgba(255,255,255,0.04) !important;
}
.art-print-wrapper .benefit-item .b-icon svg { stroke: rgba(255,255,255,0.5) !important; }
/* Feature items */
.art-seo-wrapper .feature-item:hover { border-color: rgba(255,255,255,0.15) !important; }
.art-seo-wrapper .feature-item .f-icon {
background: rgba(255,255,255,0.04) !important;
border-color: rgba(255,255,255,0.08) !important;
}
.art-seo-wrapper .feature-item .f-icon svg { stroke: rgba(255,255,255,0.5) !important; }
/* Stat-карточки */
.art-seo-wrapper .stat-card {
background: rgba(255,255,255,0.03) !important;
border-color: rgba(255,255,255,0.08) !important;
}
.art-seo-wrapper .stat-card::before {
background: rgba(255,255,255,0.10) !important;
}
.art-seo-wrapper .stat-card .stat-number {
background: none !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: #ffffff !important;
background-clip: unset !important;
color: #ffffff !important;
}
/* ═══════ END: custom.css ═══════ */
/* ═══════ START: popup-order.css (9 KB) ═══════ */
/* popup-order.css — единый попап заявки (шаг 2.18) */
/* box-sizing: border-box на весь попап — иначе width:100% + padding у input
ломает ширину на мобильном (поля уезжают за экран). */
.site-popup, .site-popup * { box-sizing: border-box; }
.site-popup {
position: fixed;
inset: 0;
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
font-family: 'Inter', system-ui, sans-serif;
}
.site-popup.is-open {
display: flex;
animation: site-popup-fade 0.2s ease-out;
}
@keyframes site-popup-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.site-popup__backdrop {
position: absolute;
inset: 0;
background: rgba(5, 5, 10, 0.78);
backdrop-filter: blur(6px) saturate(130%);
-webkit-backdrop-filter: blur(6px) saturate(130%);
cursor: pointer;
}
.site-popup__panel {
position: relative;
width: 100%;
max-width: 440px;
max-height: calc(100vh - 40px);
overflow-y: auto;
background: #0f0f1a;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 36px 32px 24px;
box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
color: #fff;
animation: site-popup-slide 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes site-popup-slide {
from { opacity: 0; transform: translateY(20px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.site-popup__close {
position: absolute;
top: 14px;
right: 14px;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.2s, border-color 0.2s, transform 0.2s;
padding: 0;
}
.site-popup__close:hover {
background: rgba(255, 45, 120, 0.2);
border-color: rgba(255, 45, 120, 0.6);
transform: rotate(90deg);
}
.site-popup__header {
margin-bottom: 22px;
text-align: center;
}
.site-popup__eyebrow {
display: inline-block;
font-family: 'Oswald', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 12px;
}
.site-popup__title {
font-family: 'Oswald', sans-serif;
font-size: clamp(22px, 5vw, 26px);
font-weight: 500;
line-height: 1.2;
margin: 0 0 8px;
color: #fff;
letter-spacing: 0.01em;
}
.site-popup__descr {
font-size: 14px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
.site-popup__form {
display: flex;
flex-direction: column;
gap: 14px;
}
.site-popup__row {
display: flex;
flex-direction: column;
gap: 6px;
}
.site-popup__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.site-popup__label {
font-size: 12px;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
letter-spacing: 0.02em;
}
.site-popup__field input,
.site-popup__form input[type="text"],
.site-popup__form input[type="tel"],
.site-popup__form input[type="email"] {
width: 100%;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: #fff;
font-family: inherit;
font-size: 15px;
transition: border-color 0.15s, background 0.15s;
-webkit-appearance: none;
appearance: none;
}
.site-popup__field input::placeholder {
color: rgba(255, 255, 255, 0.35);
}
.site-popup__field input:hover {
border-color: rgba(255, 255, 255, 0.2);
}
.site-popup__field input:focus {
outline: none;
border-color: #ff2d78;
background: rgba(255, 255, 255, 0.05);
}
.site-popup__field input:invalid:not(:placeholder-shown) {
border-color: rgba(255, 45, 120, 0.5);
}
.site-popup__options {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.site-popup__option {
position: relative;
cursor: pointer;
user-select: none;
}
.site-popup__option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.site-popup__option span {
display: block;
padding: 10px 8px;
text-align: center;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
transition: all 0.2s;
}
.site-popup__option:hover span {
border-color: rgba(0, 245, 255, 0.3);
color: #fff;
}
.site-popup__option input:checked + span {
background: rgba(0, 245, 255, 0.08);
border-color: #00f5ff;
color: #00f5ff;
box-shadow: 0 0 0 1px rgba(0, 245, 255, 0.3);
}
.site-popup__submit {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 15px 24px;
margin-top: 4px;
background: #ff2d78;
border: none;
border-radius: 10px;
color: #fff;
font-family: 'Oswald', sans-serif;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s, transform 0.15s;
}
.site-popup__submit:hover {
background: #ff1466;
transform: translateY(-1px);
}
.site-popup__submit:active {
transform: translateY(0);
background: #e01060;
}
.site-popup__submit:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.site-popup__submit svg {
transition: transform 0.2s;
}
.site-popup__submit:hover svg {
transform: translateX(3px);
}
.site-popup__footer {
margin-top: 2px;
text-align: center;
font-size: 11px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.45);
}
.site-popup__footer a {
color: rgba(0, 245, 255, 0.8);
text-decoration: none;
border-bottom: 1px dotted rgba(0, 245, 255, 0.4);
}
.site-popup__footer a:hover {
color: #00f5ff;
}
.site-popup__contacts {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px 16px;
padding: 16px 0 0;
margin: 12px 0 0;
list-style: none;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-popup__contacts a {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition: color 0.2s;
}
.site-popup__contacts a:hover {
color: #00f5ff;
}
.site-popup__contacts svg {
flex-shrink: 0;
opacity: 0.7;
}
/* SUCCESS + ERROR states */
.site-popup__success {
display: flex !important;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 24px 16px;
text-align: center;
background: rgba(0, 245, 255, 0.04);
border: 1px solid rgba(0, 245, 255, 0.3);
border-radius: 14px;
animation: site-popup-success-in 0.4s ease-out;
}
.site-popup__success[style*="display:none"],
.site-popup__success[style*="display: none"] {
display: none !important;
}
@keyframes site-popup-success-in {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
.site-popup__success-title {
font-family: 'Oswald', sans-serif;
font-size: 20px;
font-weight: 500;
color: #fff;
}
.site-popup__success-text {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
}
.site-popup__error {
padding: 12px 14px;
background: rgba(255, 45, 120, 0.08);
border: 1px solid rgba(255, 45, 120, 0.4);
border-radius: 10px;
color: #ffbbd1;
font-size: 13px;
line-height: 1.4;
}
/* body lock when popup open */
body.site-popup-open {
overflow: hidden;
}
/* MOBILE: bottom-sheet как в современных приложениях */
@media (max-width: 640px) {
.site-popup {
padding: 0;
align-items: flex-end;
width: 100vw;
max-width: 100vw;
overflow-x: hidden;
}
.site-popup__panel {
width: 100%;
max-width: 100vw;
max-height: 94vh;
border-radius: 16px 16px 0 0;
padding: 28px 16px 20px;
border-left: none;
border-right: none;
border-bottom: none;
animation: site-popup-slide-mobile 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.site-popup__form { width: 100%; max-width: 100%; }
.site-popup__row { width: 100%; max-width: 100%; }
.site-popup__field { width: 100%; max-width: 100%; }
/* Drag-handle-индикатор вверху — как у iOS/Android sheet */
.site-popup__panel::before {
content: '';
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 36px;
height: 4px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.18);
}
@keyframes site-popup-slide-mobile {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.site-popup__header { margin-bottom: 18px; padding-top: 4px; }
.site-popup__title { font-size: 20px; margin-bottom: 6px; }
.site-popup__descr { font-size: 13px; line-height: 1.45; }
.site-popup__close {
top: 8px;
right: 8px;
width: 32px;
height: 32px;
}
.site-popup__form { gap: 12px; }
.site-popup__field input,
.site-popup__form input[type="text"],
.site-popup__form input[type="tel"],
.site-popup__form input[type="email"] {
font-size: 16px; /* >= 16px чтобы iOS Safari не зумил при фокусе */
padding: 13px 14px;
}
.site-popup__label { font-size: 11px; }
.site-popup__options { grid-template-columns: 1fr; gap: 6px; }
.site-popup__option span { padding: 12px 14px; font-size: 14px; text-align: left; }
.site-popup__submit {
width: 100%;
padding: 15px 20px;
font-size: 14px;
min-height: 50px;
}
.site-popup__footer {
margin-top: 10px;
font-size: 10.5px;
line-height: 1.4;
}
.site-popup__contacts {
gap: 8px 14px;
padding-top: 12px;
margin-top: 10px;
}
.site-popup__contacts a { font-size: 11.5px; }
}
@media (max-width: 380px) {
.site-popup__panel { padding: 24px 16px 16px; }
.site-popup__title { font-size: 19px; }
.site-popup__descr { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
.site-popup.is-open,
.site-popup__panel,
.site-popup__submit,
.site-popup__success {
animation: none !important;
transition: none !important;
}
}
/* ═══════ END: popup-order.css ═══════ */
/* ═══════════════════════════════════════════════════════════
* FOOTER (CTA-форма + футер-полоса + cookie-баннер)
* Создано: 2026-04-27 - замена tilda T690/T886/T396
* ═══════════════════════════════════════════════════════════ */
.site-footer { background:#000; color:#fff; }
/* ---- CTA-форма ---- */
.footer-cta { padding: 100px 20px 80px; background:#000; }
.footer-cta__inner { max-width: 1080px; margin: 0 auto; text-align: center; }
.footer-cta__title {
font-family: 'Unbounded', 'Inter', sans-serif;
font-size: 40px; font-weight: 700; line-height: 1.2;
margin: 0 0 24px; color:#fff;
}
.footer-cta__descr {
font-size: 18px; line-height: 1.55; max-width: 560px;
margin: 0 auto 50px; color: rgba(255,255,255,0.85);
}
.footer-form { max-width: 920px; margin: 0 auto; position: relative; }
.footer-form__inputs {
display: grid;
grid-template-columns: 1.2fr 1fr 1.3fr auto;
gap: 12px; align-items: end;
}
.footer-form__field { display: flex; flex-direction: column; text-align: left; }
.footer-form__label {
font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.7);
margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px;
}
.footer-form__input {
background: #fff; color: #000;
border: 1px solid #fff; border-radius: 6px;
padding: 12px 14px; font-size: 16px; font-family: inherit;
outline: none; transition: border-color .15s, box-shadow .15s;
width: 100%; box-sizing: border-box;
}
.footer-form__input:focus { border-color: #f739ce; box-shadow: 0 0 0 3px rgba(247,57,206,0.25); }
.footer-form__select {
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center;
padding-right: 36px; cursor: pointer;
}
.footer-form__submit {
background: #000; color: #fff;
border: 2px solid #fff; border-radius: 6px;
padding: 13px 28px; font-size: 16px; font-weight: 600; font-family: inherit;
cursor: pointer; transition: background .15s, color .15s, transform .15s;
white-space: nowrap;
}
.footer-form__submit:hover { background: #f739ce; border-color: #f739ce; transform: translateY(-1px); }
.footer-form__submit:active { transform: translateY(0); }
.footer-form__submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.footer-form__legal {
font-size: 13px; color: rgba(255,255,255,0.7);
margin: 18px 0 0; text-align: center;
}
.footer-form__legal a { color: #fff; text-decoration: underline; }
.footer-form__legal a:hover { color: #f739ce; }
.footer-form__success {
background: rgba(247,57,206,0.15); border: 1px solid #f739ce;
border-radius: 8px; padding: 16px 20px; margin-bottom: 16px;
color: #fff; text-align: center; font-size: 16px;
}
.footer-form__error {
background: rgba(255,45,120,0.15); border: 1px solid #ff2d78;
border-radius: 8px; padding: 12px 16px; margin-top: 12px;
color: #fff; text-align: center; font-size: 14px;
}
@media (max-width: 960px) {
.footer-cta { padding: 60px 16px 50px; }
.footer-cta__title { font-size: 28px; }
.footer-cta__descr { font-size: 16px; margin-bottom: 32px; }
.footer-form__inputs { grid-template-columns: 1fr; gap: 14px; }
}
/* ---- Футер-полоса ---- */
.footer-bar { background:#000; border-top: 1px solid rgba(255,255,255,0.08); padding: 36px 20px; }
.footer-bar__inner {
max-width: 1240px; margin: 0 auto;
display: grid; grid-template-columns: 1.3fr 1.4fr 1fr 1.1fr; gap: 28px;
align-items: start;
}
.footer-bar__col { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.85); }
.footer-bar__col p { margin: 0 0 8px; }
.footer-bar__col p:last-child { margin-bottom: 0; }
.footer-bar__logo { display: inline-block; margin-bottom: 10px; }
.footer-bar__logo img { display: block; max-width: 160px; height: auto; }
.footer-bar__tagline { font-size: 12px; color: rgba(255,255,255,0.55); }
.footer-bar__addr { color: #fff; }
.footer-bar__link { color: #fff; text-decoration: none; }
.footer-bar__link:hover { color: #f739ce; }
.footer-bar__phone {
font-size: 18px; font-weight: 600; color: #fff; text-decoration: none;
display: inline-block; margin-bottom: 10px;
}
.footer-bar__phone:hover { color: #f739ce; }
.footer-bar__col--contact { text-align: right; }
.footer-bar__socials {
display: flex; gap: 10px; justify-content: flex-end;
list-style: none; padding: 0; margin: 0;
}
.footer-bar__socials a {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%;
background: rgba(255,255,255,0.06); transition: background .15s, transform .15s;
}
.footer-bar__socials a:hover { background: rgba(247,57,206,0.25); transform: translateY(-2px); }
.footer-bar__socials img { width: 22px; height: 22px; display: block; }
@media (max-width: 960px) {
.footer-bar__inner { grid-template-columns: 1fr; gap: 20px; }
.footer-bar__col--contact { text-align: left; }
.footer-bar__socials { justify-content: flex-start; }
}
@media (max-width: 720px) {
.footer-bar { padding: 32px 16px; }
.footer-bar__inner { text-align: center; gap: 24px; }
.footer-bar__col,
.footer-bar__col--contact { text-align: center; }
.footer-bar__logo { margin-left: auto; margin-right: auto; }
.footer-bar__logo img { margin: 0 auto; }
.footer-bar__socials { justify-content: center; }
}
/* ---- Cookie-баннер ---- */
.cookie-banner {
position: fixed; right: 20px; bottom: 20px; z-index: 9000;
display: flex; align-items: center; gap: 14px;
max-width: 600px; padding: 16px 18px;
background: #000; color: #fff;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.4);
font-size: 13px; line-height: 1.5;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__text { flex: 1; }
.cookie-banner__link { color: #fff; text-decoration: underline; }
.cookie-banner__link:hover { color: #f739ce; }
.cookie-banner__btn {
flex-shrink: 0;
background: linear-gradient(180deg,#e9e4f0 0%,#d3cce3 100%);
color: #333; border: 1px solid #fff;
padding: 9px 22px; border-radius: 65px;
font-size: 14px; font-weight: 500; font-family: inherit;
cursor: pointer; transition: background .15s, color .15s;
box-shadow: 0 5px 7px rgba(51,51,51,0.15);
}
.cookie-banner__btn:hover { background: #fff; color: #111; }
@media (max-width: 600px) {
.cookie-banner {
left: 12px; right: 12px; bottom: 12px; max-width: none;
flex-direction: column; align-items: stretch; gap: 10px; text-align: center;
}
}
/* ======================================================== HOME HERO === */
.home-hero {
position: relative;
padding: 80px 6% 100px;
background: transparent;
color: #fff;
overflow: hidden;
}
.home-hero__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: 64px;
max-width: 1280px;
margin: 0 auto;
align-items: center;
}
.home-hero__tag {
display: inline-block;
font-family: 'Manrope', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #ff2d78;
margin-bottom: 18px;
}
.home-hero__title {
font-family: 'Unbounded', sans-serif;
font-size: clamp(32px, 5.2vw, 64px);
font-weight: 900;
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0 0 24px;
color: #fff;
}
.home-hero__title em {
font-style: normal;
color: #ff2d78;
text-shadow: 0 0 18px rgba(255, 45, 120, 0.55), 0 0 38px rgba(255, 45, 120, 0.35);
}
.home-hero__sub {
font-family: 'Manrope', sans-serif;
font-size: clamp(15px, 1.5vw, 18px);
line-height: 1.65;
color: #b6b6cc;
max-width: 540px;
margin: 0 0 32px;
}
.home-hero__btns {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 48px;
}
.home-hero__btn-main,
.home-hero__btn-ghost {
display: inline-block;
font-family: 'Manrope', sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.04em;
padding: 16px 32px;
border-radius: 100px;
text-decoration: none;
transition: all 0.25s ease;
}
.home-hero__btn-main {
background: #ff2d78;
color: #fff;
box-shadow: 0 0 36px rgba(255, 45, 120, 0.4);
}
.home-hero__btn-main:hover {
transform: translateY(-2px);
box-shadow: 0 0 56px rgba(255, 45, 120, 0.7);
}
.home-hero__btn-ghost {
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.18);
}
.home-hero__btn-ghost:hover {
border-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.04);
}
.home-hero__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 540px;
}
.home-hero__stat-num {
font-family: 'Unbounded', sans-serif;
font-size: clamp(28px, 3vw, 40px);
font-weight: 900;
line-height: 1;
margin-bottom: 6px;
}
.home-hero__stat-num.pink { color: #ff2d78; text-shadow: 0 0 18px rgba(255, 45, 120, 0.5); }
.home-hero__stat-num.cyan { color: #00f5ff; text-shadow: 0 0 18px rgba(0, 245, 255, 0.5); }
.home-hero__stat-num.yellow { color: #ffe600; text-shadow: 0 0 18px rgba(255, 230, 0, 0.5); }
.home-hero__stat-lbl {
font-family: 'Manrope', sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #6464a0;
}
.home-hero__visual {
display: grid;
grid-template-rows: auto auto;
gap: 14px;
}
.home-hero__photo {
position: relative;
border-radius: 18px;
overflow: hidden;
background: #0f0f1a;
border: 1px solid rgba(255, 255, 255, 0.06);
}
.home-hero__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.home-hero__photo--main {
aspect-ratio: 4 / 3;
}
.home-hero__photos-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.home-hero__photo--sm {
aspect-ratio: 1 / 1;
}
.home-hero__badge {
position: absolute;
font-family: 'Manrope', sans-serif;
font-size: 12px;
font-weight: 700;
padding: 8px 16px;
border-radius: 100px;
background: rgba(15, 15, 26, 0.85);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
white-space: nowrap;
}
.home-hero__badge--top { top: 24px; right: 24px; }
.home-hero__badge--bottom { bottom: 24px; right: 24px; }
@media (max-width: 1100px) {
.home-hero__inner {
grid-template-columns: 1fr;
gap: 48px;
}
}
@media (max-width: 720px) {
.home-hero { padding: 60px 5% 80px; }
.home-hero__stats { gap: 14px; }
.home-hero__photo--main { aspect-ratio: 3 / 2; }
.home-hero__btn-main, .home-hero__btn-ghost { padding: 14px 22px; font-size: 13px; }
.home-hero__badge { font-size: 11px; padding: 6px 12px; }
.home-hero__badge--top, .home-hero__badge--bottom { right: 12px; }
.home-hero__badge--top { top: 12px; }
.home-hero__badge--bottom { bottom: 12px; }
}
/* === Единый глобальный контейнер для всех страниц ===
Нормализуем inline max-width:1200/1300/1400 и padding 6%/4% к единому 1280 + clamp.
!important нужен потому что inline