,
.bp-hero * { box-sizing: border-box; }
.bp-hero input,
.bp-hero textarea,
.bp-hero select { font: inherit; }
.bp-hero {
--bp-font-head: var(--t-headline-font, "Georgia", serif);
--bp-font-body: var(--t-text-font, "Helvetica Neue", Arial, sans-serif);
--bp-accent: #e8c4a0;
--bp-accent-dark: #c9a47d;
--bp-text: #1a1a1a;
--bp-text-light: #ffffff;
--bp-ease: cubic-bezier(0.22, 1, 0.36, 1);
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: #0a0a0a;
font-family: var(--bp-font-body);
color: var(--bp-text-light);
isolation: isolate;
}
/* Decorative background pattern */
.bp-hero__bg-glow {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 20% 30%, rgba(232, 196, 160, 0.18), transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(232, 196, 160, 0.12), transparent 55%),
linear-gradient(180deg, #0a0a0a 0%, #1a1410 100%);
z-index: 0;
pointer-events: none;
}
/* Eyebrow badge */
.bp-hero__eyebrow {
position: absolute;
top: 32px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 18px;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 100px;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-family: var(--bp-font-body);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
z-index: 5;
animation: bpFadeDown 0.9s var(--bp-ease) both;
}
.bp-hero__eyebrow-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--bp-accent);
box-shadow: 0 0 12px var(--bp-accent);
animation: bpPulse 2s ease-in-out infinite;
}
/* Main centered content */
.bp-hero__inner {
position: relative;
width: 100%;
max-width: 1320px;
padding: 120px 40px 60px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
z-index: 4;
}
/* Text block */
.bp-hero__text {
animation: bpFadeUp 1s var(--bp-ease) 0.2s both;
}
.bp-hero__title {
font-family: var(--bp-font-head);
font-size: clamp(36px, 5.4vw, 76px);
line-height: 1.02;
font-weight: 600;
letter-spacing: -0.02em;
margin: 0 0 24px;
color: var(--bp-text-light);
}
.bp-hero__title em {
font-style: italic;
color: var(--bp-accent);
font-weight: 400;
position: relative;
}
.bp-hero__title em::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0.05em;
height: 2px;
background: var(--bp-accent);
opacity: 0.4;
transform: scaleX(0);
transform-origin: left;
animation: bpReveal 1.2s var(--bp-ease) 1s forwards;
}
.bp-hero__subtitle {
font-family: var(--bp-font-body);
font-size: clamp(15px, 1.3vw, 18px);
line-height: 1.6;
color: rgba(255, 255, 255, 0.7);
max-width: 480px;
margin: 0 0 36px;
}
.bp-hero__cta {
display: inline-flex;
align-items: center;
gap: 14px;
text-decoration: none;
pointer-events: auto;
}
.bp-hero__cta .t-btnflex__text {
color: var(--bp-text-light);
}
.bp-hero__cta .t-btnflex__icon {
color: var(--bp-accent);
}
.bp-hero__meta {
margin-top: 56px;
display: flex;
gap: 36px;
flex-wrap: wrap;
}
.bp-hero__meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.bp-hero__meta-num {
font-family: var(--bp-font-head);
font-size: 28px;
font-weight: 600;
color: var(--bp-accent);
line-height: 1;
}
.bp-hero__meta-label {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
}
/* Slider frame */
.bp-hero__slider {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
border-radius: 24px;
overflow: hidden;
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(255, 255, 255, 0.08);
cursor: ew-resize;
user-select: none;
-webkit-user-select: none;
animation: bpFadeUp 1.1s var(--bp-ease) 0.4s both;
touch-action: none;
}
.bp-hero__pane {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
}
.bp-hero__pane--before {
background-image: url("https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=1200&q=85&auto=format&fit=crop");
filter: saturate(0.85) brightness(0.92);
}
.bp-hero__pane--after {
background-image: url("https://images.unsplash.com/photo-1506863530036-7a1f64bdf57f?w=1200&q=85&auto=format&fit=crop");
clip-path: inset(0 0 0 var(--bp-pos, 50%));
}
/* Subtle vignette on each pane */
.bp-hero__pane::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.5) 100%);
pointer-events: none;
}
/* Labels */
.bp-hero__label {
position: absolute;
top: 20px;
padding: 8px 16px;
border-radius: 100px;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #fff;
z-index: 2;
pointer-events: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
.bp-hero__label::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--bp-accent);
}
.bp-hero__label--before { left: 20px; }
.bp-hero__label--after { right: 20px; }
/* Divider */
.bp-hero__divider {
position: absolute;
top: 0;
bottom: 0;
left: var(--bp-pos, 50%);
width: 3px;
background: #fff;
transform: translateX(-50%);
z-index: 3;
pointer-events: none;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
/* Handle */
.bp-hero__handle {
position: absolute;
top: 50%;
left: var(--bp-pos, 50%);
width: 64px;
height: 64px;
border-radius: 50%;
background: #fff;
transform: translate(-50%, -50%);
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
cursor: ew-resize;
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.35),
0 0 0 6px rgba(255, 255, 255, 0.15);
transition: transform 0.3s var(--bp-ease), box-shadow 0.3s var(--bp-ease);
pointer-events: auto;
}
.bp-hero__handle:hover,
.bp-hero__handle.is-active {
transform: translate(-50%, -50%) scale(1.08);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.45),
0 0 0 10px rgba(255, 255, 255, 0.2);
}
.bp-hero__handle::before,
.bp-hero__handle::after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 7px 10px 7px 0;
border-color: transparent var(--bp-text) transparent transparent;
}
.bp-hero__handle::after {
border-width: 7px 0 7px 10px;
border-color: transparent transparent transparent var(--bp-text);
}
.bp-hero__handle::before { margin-right: 2px; }
.bp-hero__handle::after { margin-left: 2px; }
.bp-hero__handle-wrap {
display: flex;
align-items: center;
gap: 2px;
}
/* Hint */
.bp-hero__hint {
position: absolute;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
border-radius: 100px;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
z-index: 2;
pointer-events: none;
opacity: 0;
animation: bpFadeIn 0.6s ease 1.5s forwards;
}
.bp-hero__hint svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 2;
}
/* Scroll indicator */
.bp-hero__scroll {
position: absolute;
bottom: 24px;
left: 40px;
display: flex;
align-items: center;
gap: 12px;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
z-index: 5;
writing-mode: vertical-rl;
transform: rotate(180deg);
animation: bpFadeIn 1s ease 1.8s both;
}
.bp-hero__scroll-line {
width: 1px;
height: 40px;
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.5));
animation: bpScrollLine 2s ease-in-out infinite;
}
/* Responsive */
@media (max-width: 960px) {
.bp-hero__inner {
grid-template-columns: 1fr;
gap: 40px;
padding: 110px 24px 80px;
text-align: center;
}
.bp-hero__subtitle { margin-left: auto; margin-right: auto; }
.bp-hero__cta { justify-content: center; }
.bp-hero__meta { justify-content: center; }
.bp-hero__slider { max-width: 480px; margin: 0 auto; }
.bp-hero__scroll { display: none; }
.bp-hero__eyebrow { top: 20px; }
}
@media (max-width: 480px) {
.bp-hero__slider { aspect-ratio: 3 / 4; }
.bp-hero__handle { width: 52px; height: 52px; }
.bp-hero__label { padding: 6px 12px; font-size: 10px; }
.bp-hero__meta { gap: 24px; }
.bp-hero__meta-num { font-size: 22px; }
}
/* Animations */
@keyframes bpFadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes bpFadeDown {
from { opacity: 0; transform: translate(-50%, -20px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes bpFadeIn {
to { opacity: 1; }
}
@keyframes bpReveal {
to { transform: scaleX(1); }
}
@keyframes bpPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.3); }
}
@keyframes bpScrollLine {
0% { transform: translateY(-100%); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateY(100%); opacity: 0; }
}
Real results · No filters
Перевоплощение,видно
Потяните разделитель, чтобы увидеть реальные результаты наших клиентов.
Никаких фильтров — только профессиональная работа и забота о вашей
естественной красоте.
Записаться на консультацию
Before After
Перетащите, чтобы сравнить
Scroll
```
### Что готово
Готова полноэкранная hero-обложка с интерактивным слайдером «до/после»:
**Сцена состоит из двух частей:**
- **Левая колонка** — заголовок, подзаголовок, CTA-кнопка `t-btnflex_lg` и блок с ключевыми цифрами (12K+ клиентов, 98% возвращаются, 8 лет опыта).
- **Правая колонка** — слайдер с двумя изображениями, разделителем и круглой ручкой-перетягивалкой.
**Поведение слайдера:**
- Перетаскивание мышью и касанием на мобильных.
- Управление с клавиатуры (стрелки, Home/End).
- Плавная авто-демонстрация в диапазоне 38–62% с паузой при наведении, фокусе и уходе вкладки.
- Уважает `prefers-reduced-motion` — для пользователей с настройкой «уменьшить анимацию» автоанимация отключается.
- Использует `requestAnimationFrame` для плавности и `clip-path: inset()` для аппаратно ускоренного разделения.
**Декоративные элементы:**
- Стеклянный «бейдж-eyebrow» сверху с пульсирующей точкой.
- Glow-фон с радиальными градиентами.
- Метки `Before` / `After` на панелях.
- Подсказка «Перетащите, чтобы сравнить» появляется через 1.5 сек.
- Вертикальный scroll-индикатор слева внизу.
**Доступность:** ARIA-роль `slider`, атрибуты `aria-valuemin/max/now`, `aria-grabbed`, фокус-кольцо, контрастные подписи.
**Адаптивность:** На 960px и ниже колонки складываются в одну, текст центрируется, скролл-индикатор прячется. На 480px слайдер меняет пропорции и уменьшается ручка.