/* ===== ТАНКИ ДРАЙВ — V5 (по мотивам Claude Design экспорта: badge-plate, эпичный hero, кнопки-картинки) ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: #0b0d09;
color: #f4f6ef;
font-family: 'Manrope', system-ui, sans-serif;
overflow-x: hidden;
line-height: 1.6;
}
::selection { background: #9AD600; color: #0b0d09; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
img[aria-hidden="true"] { max-width: none; }
button { font-family: inherit; }
/* ===== ГРАНЖ-ЭФФЕКТ НА ЗАГОЛОВКЕ HERO ===== */
.v5-grunge-text {
-webkit-mask-image: url(/assets/v5/title-grunge.png);
mask-image: url(/assets/v5/title-grunge.png);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
@keyframes v5Marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
:root {
--bg: #0b0d09;
--bg2: #111410;
--card: #0d0f0b;
--ink: #f4f6ef;
--ink2: #c7ccbe;
--ink3: #9aa38f;
--green: #9AD600;
--pink: #E6007E;
--border: rgba(255,255,255,0.08);
--font-h: 'Oswald', sans-serif;
--font-b: 'Manrope', sans-serif;
--radius: 14px;
--container: 1600px;
}
.v5-container { max-width: var(--container); margin: 0 auto; padding: 0 48px; }
/* ===== ТИКЕР ===== */
.v5-ticker { background: var(--green); overflow: hidden; padding: 14px 0; position: relative; z-index: 2; }
.v5-ticker-inner { display: flex; width: max-content; animation: v5Marquee 28s linear infinite; white-space: nowrap; }
.v5-ticker-text { font-family: var(--font-h); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: .05em; color: #0b0d09; display: flex; align-items: center; }
.v5-ticker-sep { color: #0b0d09; opacity: .5; margin: 0 22px; }
/* ===== ПОЧЕМУ МЫ ===== */
.v5-why-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 16px; }
.v5-why-card { background: var(--card); border: 1px solid rgba(154,214,0,0.28); border-radius: var(--radius); padding: 28px 26px; transition: border-color .2s, transform .2s; }
.v5-why-card:hover { transform: translateY(-3px); }
.v5-why-card--pink { border-color: rgba(230,0,126,0.32); }
.v5-why-card-icon { width: 52px; height: 52px; border-radius: 12px; background: rgba(154,214,0,0.08); border: 1px solid rgba(154,214,0,0.3); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.v5-why-card--pink .v5-why-card-icon { background: rgba(230,0,126,0.08); border-color: rgba(230,0,126,0.4); }
.v5-why-card h4 { font: 600 18px var(--font-h); text-transform: uppercase; letter-spacing: .3px; color: var(--green); margin-bottom: 10px; }
.v5-why-card--pink h4 { color: var(--pink); }
.v5-why-card p { font: 500 14px/1.5 var(--font-b); color: var(--ink2); }
/* ===== ФРАНШИЗА ===== */
.v5-franchise-inner {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px;
padding: clamp(28px,3.5vw,40px); border-radius: 18px;
background: linear-gradient(120deg, rgba(154,214,0,0.06), rgba(11,13,9,0));
border: 1px solid rgba(154,214,0,0.35);
}
.v5-franchise-eyebrow { font: 700 13px var(--font-b); letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin-bottom: 8px; }
.v5-franchise-title { font-family: var(--font-h); font-weight: 700; text-transform: uppercase; line-height: .95; font-size: clamp(26px,3.4vw,40px); color: #fff; margin-bottom: 8px; }
.v5-franchise-desc { font: 500 15px/1.5 var(--font-b); color: var(--ink2); max-width: 460px; }
/* ===== ФУТЕР ===== */
.v5-footer { position: relative; margin-top: -2px; background: #0b0d09; border-top: 1px solid var(--border); padding: 70px 0 30px; }
.v5-footer-main { display: flex; flex-wrap: wrap; gap: clamp(28px,5vw,64px); padding-bottom: 30px; }
.v5-footer-col { display: flex; flex-direction: column; gap: 10px; min-width: 150px; }
.v5-footer-col--brand { flex: 1 1 240px; }
.v5-footer-logo img { height: 140px; width: auto; }
.v5-footer-tagline { font: 500 13px/1.5 var(--font-b); color: var(--ink3); margin-top: 14px; max-width: 260px; }
.v5-footer-col-title { font: 600 13px var(--font-h); letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin-bottom: 4px; }
.v5-footer-col a { font: 500 14px var(--font-b); color: var(--ink2); }
.v5-footer-col a:hover { color: #fff; }
.v5-footer-copy-bar { border-top: 1px solid var(--border); padding-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.v5-footer-copy { font: 500 12px var(--font-b); color: var(--ink3); }
.v5-footer-copy a { color: var(--ink3); }
/* ===== FAQ (JS-аккордеон) ===== */
.faq-body { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item.open .faq-body { max-height: 320px; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .25s ease; display: inline-block; }
/* ===== КАЛЬКУЛЯТОР — активные кнопки ===== */
#calc-tanks button.active, #calc-hours button.active {
background: var(--green) !important; color: #0b0d09 !important;
}
#calc-day button.active {
background: var(--green) !important; color: #0b0d09 !important;
}
/* ===== МОДАЛКА ЗАПИСИ ===== */
.v5-modal-overlay {
display: none; position: fixed; inset: 0; z-index: 300;
background: rgba(6,7,5,.8); backdrop-filter: blur(4px);
align-items: center; justify-content: center; padding: 20px;
}
.v5-modal-overlay.open { display: flex; }
.v5-modal {
position: relative; width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
background: var(--bg2); border: 1px solid rgba(154,214,0,0.35); border-radius: 18px;
padding: 34px 30px; animation: v5ModalIn .2s ease;
}
@keyframes v5ModalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.v5-modal-close {
position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%;
border: 1px solid var(--border); background: var(--card); color: var(--ink2); font-size: 15px;
cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color .2s, border-color .2s;
}
.v5-modal-close:hover { color: #fff; border-color: var(--green); }
.v5-modal-title { font-family: var(--font-h); font-weight: 700; text-transform: uppercase; font-size: 28px; color: #fff; margin-bottom: 6px; }
.v5-modal-sub { font: 500 14px/1.5 var(--font-b); color: var(--ink2); margin-bottom: 24px; }
.v5-modal-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.v5-modal-field label { font: 600 12px var(--font-b); letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.v5-modal-field input, .v5-modal-field select, .v5-modal-field textarea {
background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px;
color: #fff; font: 500 14px var(--font-b); outline: none; resize: vertical;
}
.v5-modal-field input:focus, .v5-modal-field select:focus, .v5-modal-field textarea:focus { border-color: var(--green); }
.v5-modal-checkbox { display: flex; align-items: flex-start; gap: 10px; font: 500 12px/1.5 var(--font-b); color: var(--ink2); margin-bottom: 22px; cursor: pointer; }
.v5-modal-checkbox input { margin-top: 3px; accent-color: var(--green); flex-shrink: 0; }
.v5-modal-checkbox a { color: var(--green); }
.v5-modal-submit {
width: 100%; text-align: center; justify-content: center; font: 700 15px var(--font-h);
letter-spacing: .06em; text-transform: uppercase; padding: 16px; border-radius: 8px; border: none;
background: var(--green); color: #0b0d09; cursor: pointer; transition: transform .15s;
}
.v5-modal-submit:hover { transform: translateY(-2px); }
.v5-modal-thanks { text-align: center; padding: 20px 0; }
.v5-modal-thanks-icon { font-size: 42px; margin-bottom: 14px; }
.v5-modal-thanks h3 { font-family: var(--font-h); font-weight: 700; text-transform: uppercase; color: #fff; font-size: 22px; margin-bottom: 8px; }
.v5-modal-thanks p { font: 500 14px/1.5 var(--font-b); color: var(--ink2); }
/* ==========================================================================
РЕЕСТР КНОПОК v5 — единая шаблонная система
==========================================================================
Разметка (одинаковая для любой кнопки, меняется только текст/иконка/классы):
Текст кнопки
ТИПЫ (класс на .v5-btn, обязателен один из трёх):
- .v5-btn--outline тёмная плашка (#0d0f0b) + цветной бордер + клякса на углу.
Для вторичных/акцентных CTA на тёмном фоне.
- .v5-btn--solid заливка акцентным цветом, тёмный/белый текст, без кляксы.
Для главных CTA (самое сильное действие в секции).
- .v5-btn--simple прозрачный фон, только тонкий бордер, без кляксы.
Для второстепенных ссылок-кнопок ("Узнать о франшизе").
ЦВЕТ (класс на .v5-btn, обязателен один из двух):
- .v5-btn--green акцент #9AD600 (зелёная клякса splatter-left/right.png)
- .v5-btn--pink акцент #E6007E (розовая клякса splatter-magenta.png)
РАЗМЕР (необязательный класс на .v5-btn):
- (по умолчанию) — обычная кнопка в теле секции
- .v5-btn--lg — крупная кнопка для hero/финальных CTA
КЛЯКСА (только для --outline, класс на .v5-btn__splash):
- .v5-btn__splash--right пятно сидит НА правом бордере, капли летят вправо
- .v5-btn__splash--left пятно сидит НА левом бордере, капли летят влево
(для --solid и --simple .v5-btn__splash в разметке не нужен)
ПРАВИЛО СЕТКИ (важно): по сетке макета выравнивается КРАЙ БОРДЕРА кнопки,
а не край изображения кляксы. Клякса намеренно вылетает за пределы сетки —
это ожидаемое поведение, не баг. Габарит кнопки в layout = только плашка.
ИКОНКА: всегда svg с stroke="currentColor" (наследует цвет текста),
обёрнута в