/* ============================================
AGENCY — Стили для Tilda (вставка в Custom CSS блока T123 или в настройки страницы)
Версия: Tilda-adapted (без сброса стилей, совместимость с Zero Block)
============================================ */
/* --- ПЕРЕМЕННЫЕ (в Tilda — продублированы в классах для надёжности) --- */
.agency-root {
--ag-bg: #0d0d0d;
--ag-bg-card: #141414;
--ag-border: #262626;
--ag-border-light: #333;
--ag-text: #e5e5e5;
--ag-text-muted: #a3a3a3;
--ag-text-dim: #737373;
--ag-accent: #c8a66e;
--ag-accent-dark: #a8884e;
--ag-white: #f5f5f5;
--ag-font-heading: 'Cormorant Garamond', 'Georgia', serif;
--ag-font-body: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
}
/* Каждый блок лендинга — это отдельный Zero Block в Tilda.
Оборачиваем содержимое Zero Block в div.agency-block.
В настройках Zero Block: bg = #0d0d0d или #141414 (по схеме ниже). */
.agency-block {
position: relative;
font-family: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
color: #e5e5e5;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* --- ТИПОГРАФИКА (переопределяем внутри блоков) --- */
.agency-block h1,
.agency-block h2,
.agency-block h3,
.agency-block h4 {
font-family: 'Cormorant Garamond', 'Georgia', serif;
font-weight: 500;
color: #f5f5f5;
line-height: 1.2;
margin: 0 0 16px 0;
padding: 0;
}
.agency-block h1 { font-size: 48px; }
.agency-block h2 { font-size: 36px; }
.agency-block h3 { font-size: 24px; }
.agency-block h4 { font-size: 20px; }
.agency-block p { margin: 0 0 12px 0; color: #e5e5e5; }
/* --- АКЦЕНТНЫЙ ЦВЕТ --- */
.agency-block .accent { color: #c8a66e; }
/* --- ВНУТРЕННИЙ КОНТЕЙНЕР (использовать внутри Zero Block) --- */
.agency-container {
max-width: 1160px;
margin: 0 auto;
padding: 0 24px;
}
@media screen and (max-width: 640px) {
.agency-container { padding: 0 16px; }
}
/* --- ОТСТУПЫ СЕКЦИЙ (в Tilda задаются в настройках Zero Block, здесь — fallback) --- */
.agency-section {
padding: 90px 0;
}
@media screen and (max-width: 640px) {
.agency-section { padding: 56px 0; }
}
/* ==========================================
КНОПКИ
========================================== */
.agency-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 34px;
border-radius: 8px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
text-decoration: none !important;
border: none;
white-space: nowrap;
font-family: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
letter-spacing: 0.3px;
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.agency-btn:hover {
text-decoration: none !important;
color: inherit;
}
/* Основная кнопка */
.agency-btn-primary {
background: #c8a66e;
color: #0d0d0d !important;
}
.agency-btn-primary:hover {
background: #a8884e;
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(200, 166, 110, 0.18);
}
/* Контурная кнопка */
.agency-btn-outline {
background: transparent;
color: #f5f5f5 !important;
border: 1px solid #333;
}
.agency-btn-outline:hover {
border-color: #c8a66e;
color: #c8a66e !important;
}
/* Широкая кнопка */
.agency-btn-block { width: 100%; }
/* ==========================================
ХЕДЕР (Zero Block, приклеенный к верху)
В Tilda: отдельный Zero Block с фиксацией "при скролле"
========================================== */
.agency-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 0;
background: rgba(13, 13, 13, 0.88);
}
.agency-logo {
font-family: 'Cormorant Garamond', 'Georgia', serif;
font-size: 22px;
color: #f5f5f5;
letter-spacing: 1px;
}
.agency-header-phone {
font-size: 15px;
color: #a3a3a3;
text-decoration: none;
}
.agency-header-phone:hover { color: #f5f5f5; }
.agency-header-right {
display: flex;
align-items: center;
gap: 20px;
}
/* ==========================================
HERO (Блок 1) — фон #0d0d0d
========================================== */
.agency-hero-grid {
display: flex;
gap: 56px;
align-items: center;
}
.agency-hero-text {
flex: 1 1 50%;
}
.agency-hero-visual {
flex: 1 1 50%;
position: relative;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 4 / 3;
background: #141414;
}
.agency-hero-visual img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.85);
}
.agency-hero-badge {
position: absolute;
bottom: 20px;
left: 20px;
z-index: 2;
background: rgba(13, 13, 13, 0.8);
padding: 10px 18px;
border-radius: 6px;
font-size: 13px;
color: #a3a3a3;
border: 1px solid #262626;
}
.agency-hero-trust {
margin-top: 14px;
font-size: 13px;
color: #737373;
border-left: 2px solid #262626;
padding-left: 14px;
}
.agency-hero-actions {
display: flex;
gap: 14px;
margin-top: 32px;
flex-wrap: wrap;
}
@media screen and (max-width: 900px) {
.agency-hero-grid {
flex-direction: column;
gap: 36px;
}
.agency-hero-visual { aspect-ratio: 16 / 9; }
}
@media screen and (max-width: 640px) {
.agency-hero-actions { flex-direction: column; align-items: flex-start; }
}
/* ==========================================
БЛОК 2: СРАВНЕНИЕ — фон #141414
========================================== */
.agency-section-label {
display: inline-block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 4px;
color: #c8a66e;
margin-bottom: 20px;
font-weight: 500;
}
.agency-comparison-grid {
display: flex;
gap: 20px;
margin-top: 44px;
}
.agency-comp-card {
flex: 1 1 33%;
background: #0d0d0d;
border: 1px solid #262626;
border-radius: 12px;
padding: 32px 24px;
}
.agency-comp-card:hover {
border-color: #333;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}
.agency-comp-card h3 {
font-size: 18px;
margin-bottom: 18px;
}
.agency-comp-problem {
color: #d4a5a5;
font-size: 14px;
margin-bottom: 10px;
}
.agency-comp-solution {
color: #a5d4a5;
font-size: 14px;
}
.agency-comp-cta {
text-align: center;
margin-top: 44px;
}
@media screen and (max-width: 900px) {
.agency-comparison-grid { flex-direction: column; }
}
/* ==========================================
БЛОК 3: ФОРМА ЗАХВАТА — фон градиент: #0d0d0d → #141414
========================================== */
.agency-form-wrap {
max-width: 600px;
margin: 0 auto;
background: #141414;
border: 1px solid #262626;
border-radius: 12px;
padding: 44px 40px;
}
.agency-form-wrap h3 {
text-align: center;
margin-bottom: 28px;
}
.agency-form-row {
margin-bottom: 18px;
}
.agency-form-row label {
display: block;
font-size: 13px;
color: #a3a3a3;
margin-bottom: 7px;
letter-spacing: 0.5px;
}
.agency-form-row select,
.agency-form-row input {
width: 100%;
padding: 13px 14px;
background: #0d0d0d;
border: 1px solid #262626;
border-radius: 8px;
color: #f5f5f5;
font-size: 15px;
font-family: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
outline: none;
transition: border-color 0.3s ease;
box-sizing: border-box;
}
.agency-form-row select:focus,
.agency-form-row input:focus {
border-color: #c8a66e;
}
.agency-form-radio-group {
display: flex;
gap: 20px;
margin-bottom: 10px;
}
.agency-form-radio-group label {
display: flex;
align-items: center;
gap: 7px;
color: #a3a3a3;
font-size: 14px;
cursor: pointer;
}
.agency-form-note {
text-align: center;
font-size: 12px;
color: #737373;
margin-top: 14px;
}
.agency-form-alt {
text-align: center;
margin-top: 14px;
font-size: 13px;
color: #737373;
}
.agency-form-alt a {
color: #a3a3a3;
}
.agency-form-alt a:hover {
color: #f5f5f5;
}
@media screen and (max-width: 640px) {
.agency-form-wrap { padding: 28px 18px; }
}
/* ==========================================
БЛОК 4: КАЛЬКУЛЯТОР — фон #0d0d0d
========================================== */
.agency-calc-step {
background: #141414;
border: 1px solid #262626;
border-radius: 12px;
padding: 30px 28px;
margin-bottom: 18px;
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
.agency-calc-step-num {
display: inline-flex;
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
background: #c8a66e;
color: #0d0d0d;
border-radius: 50%;
font-size: 14px;
font-weight: 600;
margin-bottom: 14px;
}
.agency-calc-options {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.agency-calc-chip {
padding: 10px 17px;
border: 1px solid #262626;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
background: transparent;
color: #a3a3a3;
font-family: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
transition: all 0.25s ease;
display: inline-block;
}
.agency-calc-chip:hover {
border-color: #333;
color: #f5f5f5;
}
.agency-calc-chip.active-calc {
border-color: #c8a66e;
background: rgba(200, 166, 110, 0.1);
color: #c8a66e;
}
.agency-calc-result {
text-align: center;
padding: 36px 20px;
margin-top: 18px;
background: #141414;
border: 1px solid #262626;
border-radius: 12px;
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
.agency-calc-price {
font-family: 'Cormorant Garamond', 'Georgia', serif;
font-size: 40px;
color: #c8a66e;
margin: 14px 0;
}
@media screen and (max-width: 640px) {
.agency-calc-price { font-size: 32px; }
}
/* ==========================================
БЛОК 5: ПРОЦЕСС — фон #141414
========================================== */
.agency-timeline {
max-width: 760px;
margin: 44px auto 0;
}
.agency-timeline-item {
display: flex;
gap: 26px;
padding: 30px 0;
border-bottom: 1px solid #262626;
}
.agency-timeline-item:last-child {
border-bottom: none;
}
.agency-timeline-num {
flex-shrink: 0;
width: 46px;
height: 46px;
border-radius: 50%;
border: 2px solid #c8a66e;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
color: #c8a66e;
font-weight: 600;
}
.agency-timeline-content h4 {
margin-bottom: 5px;
}
.agency-timeline-content p {
color: #a3a3a3;
font-size: 15px;
}
.agency-timeline-meta {
font-size: 13px;
color: #c8a66e;
margin-top: 4px;
}
/* ==========================================
БЛОК 6: КЕЙСЫ — фон #0d0d0d
========================================== */
.agency-cases-grid {
display: flex;
gap: 20px;
margin-top: 44px;
}
.agency-case-card {
flex: 1 1 50%;
background: #141414;
border: 1px solid #262626;
border-radius: 12px;
overflow: hidden;
transition: border-color 0.3s ease;
}
.agency-case-card:hover {
border-color: #333;
}
.agency-case-img {
height: 220px;
overflow: hidden;
}
.agency-case-img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.8);
}
.agency-case-body {
padding: 24px;
}
.agency-case-metrics {
display: flex;
gap: 22px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.agency-case-metric-val {
font-size: 20px;
font-weight: 600;
color: #c8a66e;
}
.agency-case-metric-label {
font-size: 12px;
color: #737373;
}
.agency-case-quote {
font-size: 14px;
color: #a3a3a3;
font-style: italic;
border-left: 2px solid #262626;
padding-left: 14px;
margin-top: 10px;
}
.agency-cases-cta {
text-align: center;
margin-top: 44px;
}
@media screen and (max-width: 900px) {
.agency-cases-grid { flex-direction: column; }
}
/* ==========================================
БЛОК 7: КОМАНДА — фон #141414
========================================== */
.agency-team-grid {
display: flex;
gap: 20px;
margin-top: 44px;
}
.agency-team-card {
flex: 1 1 25%;
text-align: center;
}
.agency-team-photo {
width: 110px;
height: 110px;
border-radius: 50%;
margin: 0 auto 18px;
overflow: hidden;
background: #0d0d0d;
border: 2px solid #262626;
}
.agency-team-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.9);
}
.agency-team-role {
font-size: 14px;
color: #737373;
margin-bottom: 7px;
}
.agency-team-stat {
font-size: 13px;
color: #c8a66e;
}
.agency-team-partners {
margin-top: 56px;
text-align: center;
padding-top: 36px;
border-top: 1px solid #262626;
}
.agency-partners-label {
font-size: 12px;
color: #737373;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 22px;
}
.agency-partners-logos {
display: flex;
justify-content: center;
gap: 44px;
flex-wrap: wrap;
}
.agency-partners-logos span {
font-size: 14px;
color: #a3a3a3;
font-weight: 500;
letter-spacing: 0.5px;
}
.agency-team-cta {
text-align: center;
margin-top: 44px;
}
@media screen and (max-width: 900px) {
.agency-team-grid { flex-wrap: wrap; }
.agency-team-card { flex: 1 1 45%; margin-bottom: 24px; }
}
@media screen and (max-width: 640px) {
.agency-team-card { flex: 1 1 100%; }
}
/* ==========================================
БЛОК 8: FAQ — фон #0d0d0d
========================================== */
.agency-faq-list {
max-width: 720px;
margin: 44px auto 0;
}
.agency-faq-item {
border-bottom: 1px solid #262626;
padding: 22px 0;
cursor: pointer;
}
.agency-faq-item:first-child {
border-top: 1px solid #262626;
}
.agency-faq-q {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 17px;
font-weight: 500;
color: #f5f5f5;
}
.agency-faq-toggle {
flex-shrink: 0;
margin-left: 16px;
font-size: 22px;
color: #a3a3a3;
transition: transform 0.35s ease;
}
.agency-faq-item.open-faq .agency-faq-toggle {
transform: rotate(45deg);
}
.agency-faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, margin 0.4s ease;
color: #a3a3a3;
font-size: 15px;
padding-right: 30px;
}
.agency-faq-item.open-faq .agency-faq-a {
max-height: 200px;
margin-top: 12px;
}
.agency-faq-alt {
text-align: center;
margin-top: 36px;
font-size: 14px;
color: #737373;
}
.agency-faq-alt a {
color: #a3a3a3;
text-decoration: underline;
}
.agency-faq-alt a:hover {
color: #f5f5f5;
}
/* ==========================================
БЛОК 9: ФИНАЛЬНЫЙ CTA — фон #141414
========================================== */
.agency-final-inner {
text-align: center;
max-width: 600px;
margin: 0 auto;
}
.agency-final-stats {
display: flex;
justify-content: center;
gap: 44px;
margin: 30px 0;
flex-wrap: wrap;
}
.agency-final-stat-val {
font-family: 'Cormorant Garamond', 'Georgia', serif;
font-size: 38px;
color: #c8a66e;
}
.agency-final-stat-label {
font-size: 13px;
color: #737373;
margin-top: 4px;
}
.agency-final-form {
display: flex;
gap: 12px;
margin-top: 30px;
justify-content: center;
flex-wrap: wrap;
}
.agency-final-form input {
padding: 15px 18px;
background: #0d0d0d;
border: 1px solid #262626;
border-radius: 8px;
color: #f5f5f5;
font-size: 15px;
width: 260px;
font-family: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
outline: none;
transition: border-color 0.3s ease;
box-sizing: border-box;
}
.agency-final-form input:focus {
border-color: #c8a66e;
}
.agency-final-note {
font-size: 13px;
color: #737373;
margin-top: 18px;
}
@media screen and (max-width: 640px) {
.agency-final-form { flex-direction: column; align-items: center; }
.agency-final-form input { width: 100%; }
.agency-final-stats { gap: 22px; }
.agency-final-stat-val { font-size: 30px; }
}
/* ==========================================
ФУТЕР — фон #0d0d0d
========================================== */
.agency-footer {
padding: 56px 0;
border-top: 1px solid #262626;
text-align: center;
color: #737373;
font-size: 14px;
}
.agency-footer-logo {
font-family: 'Cormorant Garamond', 'Georgia', serif;
font-size: 20px;
color: #f5f5f5;
margin-bottom: 18px;
}
.agency-footer-contact {
display: flex;
gap: 30px;
justify-content: center;
margin-bottom: 22px;
flex-wrap: wrap;
}
.agency-footer-contact a {
color: #a3a3a3;
text-decoration: none;
}
.agency-footer-contact a:hover {
color: #f5f5f5;
}
.agency-footer-links {
display: flex;
gap: 22px;
justify-content: center;
margin-bottom: 18px;
flex-wrap: wrap;
}
.agency-footer-links a {
color: #737373;
font-size: 13px;
}
.agency-footer-links a:hover {
color: #a3a3a3;
}
.agency-footer-copy {
font-size: 12px;
color: #737373;
}
/* ==========================================
ВСПОМОГАТЕЛЬНЫЕ КЛАССЫ
========================================== */
.agency-text-center { text-align: center; }
.agency-mt-12 { margin-top: 12px; }
.agency-mt-20 { margin-top: 20px; }
.agency-mt-32 { margin-top: 32px; }
.agency-mt-44 { margin-top: 44px; }
.agency-mb-20 { margin-bottom: 20px; }