.vb-block, .vb-block * { box-sizing: border-box; } .vb-block input, .vb-block textarea, .vb-block select { font: inherit; } .vb-block { color: var(--v-text); padding: 100px 24px; overflow: hidden; position: relative; } .vb-block__inner { position: relative; max-width: 1180px; margin: 0 auto; } /* eyebrow в стиле «пульсирующая точка» */ .vb-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: var(--v-r-tag); background: rgba(232, 119, 90, 0.12); color: var(--v-coral-dark); font-family: var(--t-headline-font); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .vb-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--v-coral); box-shadow: 0 0 0 4px rgba(232, 119, 90, 0.2); } /* заголовок с градиенным акцентом */ .vb-title { font-family: var(--t-headline-font); font-size: clamp(34px, 5vw, 56px); line-height: 1.08; font-weight: 700; margin: 0 0 18px; letter-spacing: -0.01em; } .vb-title em { font-style: normal; background: linear-gradient(120deg, var(--v-coral) 0%, #d94c7a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .vb-lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--v-muted); margin: 0; }

Метка блока

Заголовок с акцентом

Подзаголовок-описание блока.

.vb-hero { padding: 120px 24px 100px; } .vb-hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; } .vb-hero h1 { font-family: var(--t-headline-font); font-size: clamp(40px, 6vw, 72px); line-height: 1.05; font-weight: 700; margin: 0 0 22px; } .vb-hero h1 em { font-style: normal; background: linear-gradient(120deg, var(--v-coral), #d94c7a); -webkit-background-clip: text; background-clip: text; color: transparent; } .vb-hero p { font-size: 18px; line-height: 1.55; color: var(--v-muted); margin: 0 0 32px; max-width: 540px; } .vb-hero__cta { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border-radius: var(--v-r-btn); background: var(--v-coral); color: #fff; font-family: var(--t-headline-font); font-weight: 600; text-decoration: none; box-shadow: 0 8px 22px -8px var(--v-coral); transition: transform .2s; } .vb-hero__cta:hover { transform: translateY(-2px); } .vb-hero__art { background: var(--v-bg-card); border-radius: 32px; padding: 32px; box-shadow: var(--v-shadow-card); position: relative; aspect-ratio: 4/5; background-image: linear-gradient(135deg, var(--v-coral-soft), var(--v-green-soft)); } @media (max-width: 960px) { .vb-hero__grid { grid-template-columns: 1fr; gap: 32px; } }

Благотворительный фонд Помогаем детям услышать мир Выездная диагостика, слуховые аппараты и занятия с детьми по всей России.

Поддержать фонд →

.vb-stats { padding: 80px 24px; } .vb-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .vb-stat { background: var(--v-bg-card); border-radius: 24px; padding: 32px 26px; box-shadow: var(--v-shadow-card); position: relative; overflow: hidden; } .vb-stat::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--v-coral); } .vb-stat--green::after { background: var(--v-green); } .vb-stat--blue::after { background: var(--v-blue); } .vb-stat--coral::after { background: var(--v-coral); } .vb-stat__num { font-family: var(--t-headline-font); font-size: 48px; line-height: 1; font-weight: 700; color: var(--v-text); margin: 0 0 10px; } .vb-stat__label { font-size: 15px; line-height: 1.45; color: var(--v-muted); margin: 0; } @media (max-width: 960px) { .vb-stats__grid { grid-template-columns: repeat(2, 1fr); } }

1 240

детей прошли диагностику

380

слуховых аппаратов выдано

региона охвачено

9 лет

помогаем детям

.vb-grid-cards { padding: 100px 24px; } .vb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .vb-mini-card { background: var(--v-bg-card); border-radius: var(--v-r-card); padding: 32px 28px; box-shadow: var(--v-shadow-card); transition: transform .3s, box-shadow .3s; position: relative; overflow: hidden; } .vb-mini-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--v-coral); } .vb-mini-card--green::after { background: var(--v-green); } .vb-mini-card--blue::after { background: var(--v-blue); } .vb-mini-card:hover { transform: translateY(-4px); box-shadow: var(--v-shadow-hover); } .vb-mini-card__icon { width: 56px; height: 56px; border-radius: 18px; background: var(--v-coral-soft); display: grid; place-items: center; margin-bottom: 20px; } .vb-mini-card--green .vb-mini-card__icon { background: var(--v-green-soft); } .vb-mini-card--blue .vb-mini-card__icon { background: var(--v-blue-soft); } .vb-mini-card h3 { font-family: var(--t-headline-font); font-size: 20px; margin: 0 0 8px; } .vb-mini-card p { font-size: 15px; line-height: 1.55; color: var(--v-muted); margin: 0; } @media (max-width: 960px) { .vb-grid { grid-template-columns: 1fr; } }

Почему мы

Прозрачность, опыт и забота

🎯

Адресная помощь Видите, на что пошёл каждый рубль — отчёты публикуем ежеквартально.

🤝

9 лет опыа Работаем с 2016 года, обследовали более 1 200 детей в 62 регионах.

💛

Тёплая команда Сурдологи, логопеды и психологи, которые горят своей работой.

.vb-cta-dark { background: var(--v-bg-dark); color: var(--v-on-dark); border-radius: 32px; margin: 24px auto; max-width: 1180px; padding: 64px 48px; position: relative; overflow: hidden; } .vb-cta-dark::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 100% 0%, rgba(232, 119, 90, 0.25), transparent 60%); } .vb-cta-dark__inner { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; } .vb-cta-dark h2 { font-family: var(--t-headline-font); font-size: clamp(28px, 3.5vw, 40px); line-height: 1.15; font-weight: 700; margin: 0 0 14px; color: #fff; } .vb-cta-dark p { color: #b9c4be; font-size: 16px; line-height: 1.55; margin: 0; } .vb-cta-dark__btn { justify-self: end; display: inline-flex; align-items: center; gap: 10px; padding: 16px 24px; border-radius: var(--v-r-btn); background: var(--v-coral); color: #fff; font-family: var(--t-headline-font); font-weight: 600; text-decoration: none; box-shadow: 0 8px 24px -8px var(--v-coral); transition: transform .2s; } .vb-cta-dark__btn:hover { transform: translateY(-2px); } @media (max-width: 760px) { .vb-cta-dark { padding: 40px 28px; } .vb-cta-dark__inner { grid-template-columns: 1fr; } .vb-cta-dark__btn { justify-self: start; } }

Готовы помочь? Напишите или позвоните — расскажем, как именно вы можете поддержать детей.

Связаться →

:root { /* ——————— ФОНЫ ——————— */ --v-bg-page: #fdf7f1; /* основной бежевый */ --v-bg-soft: #f6efe7; /* нижняя часть градиента */ --v-bg-card: #ffffff; /* карточки */ --v-bg-muted: #faf8f5; /* подложки внутри карточек */ --v-bg-dark: #1f2a24; /* тёмная плашка */ /* ——————— АКЦЕНТЫ ——————— */ --v-coral: #e8775a; --v-coral-dark: #c25a3b; --v-coral-soft: #fbe8e0; --v-green: #488a64; --v-green-soft: #e1efe6; --v-blue: #4a6fa5; --v-blue-soft: #e3ebf5; /* ——————— ТЕКСТ ——————— */ --v-text: #1f2a24; --v-muted: #4a5751; --v-subtle: #6b7772; --v-on-dark: #f6efe7; /* ——————— ФОРМЫ ——————— */ --v-r-card: 28px; --v-r-btn: 14px; --v-r-tag: 999px; /* ——————— ТЕНИ ——————— */ --v-shadow-card: 0 10px 30px -12px rgba(31, 42, 36, 0.12), 0 2px 6px rgba(31, 42, 36, 0.04); --v-shadow-hover: 0 24px 50px -16px rgba(31, 42, 36, 0.18), 0 6px 12px rgba(31, 42, 36, 0.06); } /* общий паттерн фона секции — копипастим в любой vibe-блок */ .vibe-section { font-family: var(--t-text-font); background: radial-gradient(1200px 600px at 80% -10%, rgba(255, 196, 158, 0.35), transparent 60%), radial-gradient(900px 500px at 0% 100%, rgba(168, 218, 181, 0.35), transparent 60%), linear-gradient(180deg, var(--v-bg-page) 0%, var(--v-bg-soft) 100%); }