/* ===== HERO SECTION =====
AICODE-NOTE: Pixel-perfect под magicfitness.pro.
Главные принципы:
1. Секция компактна по вертикали (не «полотно»). На десктопе ~620–680px.
2. Слева плотно: unicorn → title → subtitle → CTA (единый «стек» без больших дыр).
3. Справа: speech bubble по центру по вертикали, фото ПРИЖАТО к низу розовой секции
(align-self: flex-end + padding-bottom:0 у .hero на tablet+).
4. Хвостик bubble — слева сверху, указывает на title/единорога.
5. Облака — лёгкая декорация по углам сверху. */
.hero {
position: relative;
overflow: hidden;
background: var(--color-bg-hero);
/* AICODE-NOTE: На мобиле делаем hero компактным (было 100px 0 50px с огромным
min-height у .hero__left). Теперь секция занимает ~1.2 экрана и содержит
стек: unicorn+title+subtitle → bubble → photo → CTA. Bottom padding=0,
чтобы фото Ксении прижималось к нижнему ряду облаков. */
padding: 80px 0 0;
}
/* AICODE-NOTE: На мобиле hero__left и hero__middle «растворяются» через
display: contents — их дети становятся прямыми потомками hero__inner
и встают в нужный нам порядок (см. свойство order ниже):
1) hero__top (единорог + заголовок + подзаголовок)
2) hero__speech-bubble (фраза Ксении)
3) hero__photo (фото Ксении, на которое «смотрит» хвостик баббла)
4) hero__cta-wrap (кнопка)
На tablet+ этот layout переопределяется обратно в два столбца (см. ниже). */
.hero__left,
.hero__middle {
display: contents;
}
/* AICODE-NOTE: Облака по нижнему краю hero — ИСПОЛЬЗУЕМ РОДНЫЕ SVG
с magicfitness.pro (1:1 pixel-perfect). Секрет их «воздушности»:
это НЕ пинк-на-пинке, а БЕЛЫЕ пиксельные силуэты при opacity=0.2
с градиентом «белый → прозрачный» сверху вниз. Поверх розового фона
hero это даёт именно тот подсвеченный «обескровленный» пинк, который
виден на оригинале. Два слоя:
- BACK (clouds_bottom_back.svg, viewBox 1440×302) — высокий силуэт,
пуфы торчат выше.
- FRONT (clouds_bottom_front.svg, viewBox 1440×213) — поменьше,
сидит в нижнем ряду.
Оба слоя привязаны по bottom:0 и растягиваются по ширине hero.
aspect-ratio сохраняет пропорции (высота растёт пропорционально
ширине viewport), так что облака выглядят одинаково на любом экране. */
/* AICODE-NOTE: Нижние слои облаков плывут в ПРОТИВОПОЛОЖНЫЕ стороны и
сами возвращаются обратно благодаря animation-direction: alternate.
Задний слой уезжает влево, передний — вправо; разные длительности
(32s / 24s) дают эффект «параллакса» и визуальной глубины. */
.hero::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
aspect-ratio: 1440 / 302;
background: url('../assets/images/hero/clouds_bottom_back.svg') no-repeat center bottom;
background-size: 100% 100%;
pointer-events: none;
z-index: 1;
will-change: transform;
animation: hero-clouds-back-drift 32s ease-in-out infinite alternate;
}
.hero::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
aspect-ratio: 1440 / 213;
background: url('../assets/images/hero/clouds_bottom_front.svg') no-repeat center bottom;
background-size: 100% 100%;
pointer-events: none;
z-index: 2;
will-change: transform;
animation: hero-clouds-front-drift 24s ease-in-out infinite alternate;
}
@keyframes hero-clouds-back-drift {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-40px, 0, 0); }
}
@keyframes hero-clouds-front-drift {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(40px, 0, 0); }
}
/* --- Pixel cloud decorations (TOP) ---
AICODE-NOTE: hero__cloud--left СКРЫТО на десктопе, потому что облако уже
отрисовано внутри unicorn.webp (единорог сидит на облаке). На мобилках
единорог отдельно — там левое облако оставляем как декор. */
.hero__cloud {
position: absolute;
pointer-events: none;
z-index: 1;
image-rendering: pixelated;
}
/* AICODE-NOTE: Верхние три облачка медленно плывут вправо, потом влево
(animation-direction: alternate). Разные длительности (26s / 30s / 22s)
и разные animation-delay гарантируют, что облачка двигаются
НЕСИНХРОННО — так создаётся ощущение живого неба, а не парада.
У --center уже есть transform: translateX(-50%) для центрирования,
поэтому его keyframes учитывают этот сдвиг (calc(-50% ± 30px)). */
.hero__cloud--left {
top: 70px;
left: 4%;
width: 130px;
will-change: transform;
animation: hero-cloud-side-drift 26s ease-in-out -3s infinite alternate;
}
.hero__cloud--center {
top: 30px;
left: 50%;
transform: translateX(-50%);
width: 70px;
will-change: transform;
animation: hero-cloud-center-drift 30s ease-in-out -8s infinite alternate;
}
.hero__cloud--small {
top: 80px;
right: 6%;
width: 130px;
will-change: transform;
animation: hero-cloud-side-drift 22s ease-in-out -12s infinite alternate;
}
@keyframes hero-cloud-side-drift {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(30px, 0, 0); }
}
@keyframes hero-cloud-center-drift {
from { transform: translate3d(calc(-50% - 20px), 0, 0); }
to { transform: translate3d(calc(-50% + 20px), 0, 0); }
}
/* AICODE-NOTE: Уважаем настройку ОС «уменьшить движение» — отключаем
дрейф облаков для пользователей с prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
.hero::before,
.hero::after,
.hero__cloud--left,
.hero__cloud--center,
.hero__cloud--small {
animation: none;
}
}
/* --- Hero inner wrapper ---
AICODE-NOTE: На мобиле это flex-column с явным порядком детей
(order 1..4), см. пояснения выше у .hero__left/.hero__middle. */
.hero__inner {
position: relative;
z-index: 3;
max-width: 1100px;
margin: 0 auto;
padding: 0 var(--container-padding);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-md);
}
/* Порядок мобильного стека — именно в этой последовательности
мы хотим видеть hero на телефоне, независимо от DOM-позиции. */
.hero__top { order: 1; }
.hero__speech-bubble{ order: 2; }
.hero__photo { order: 3; }
.hero__cta-wrap { order: 4; }
/* --- LEFT block (mobile-first stack): unicorn + title + subtitle --- */
.hero__top {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 0;
}
/* AICODE-NOTE: unicorn-wrap — inline-block обёртка над заголовком.
По запросу заказчика единорог «сидит» прямо на слове «Ксения» с
минимальным отступом, поэтому:
- margin-bottom: 0 и небольшой отрицательный отступ у ::before
убирают зазор между единорогом и title,
- облако-подставка (::before) отключено на всех брейкпоинтах —
единорог приземляется прямо на букву, а не на облачко. */
.hero__unicorn-wrap {
position: relative;
display: inline-block;
isolation: isolate;
margin-bottom: -4px;
padding-bottom: 0;
line-height: 0;
}
.hero__unicorn-wrap::before {
display: none;
}
.hero__unicorn {
position: relative;
display: block;
width: 170px;
height: auto;
image-rendering: pixelated;
z-index: 2;
}
.hero__title {
font-family: var(--font-pixel);
font-size: clamp(2rem, 8vw, 3.4rem);
line-height: 1.05;
color: #ffffff;
margin-top: 0;
margin-bottom: 10px;
letter-spacing: 1px;
}
/* AICODE-NOTE: На мобиле сильно ужимаем размер и убираем letter-spacing,
чтобы строка «бесконечных диет» не упиралась в края экрана. */
.hero__subtitle {
font-family: var(--font-pixel);
font-size: clamp(0.75rem, 2.8vw, 1.05rem);
color: var(--color-text);
line-height: 1.5;
letter-spacing: 0;
margin: 0;
}
/* AICODE-NOTE: .hero__middle в мобильной раскладке display:contents
(см. верх файла). Все стили flex-row для него уезжают в @media ≥768px. */
/* AICODE-NOTE: .hero__top — position:relative для абсолютного позиционирования
sparkles и прочего декора относительно самого top-блока. */
.hero__top {
position: relative;
}
/* AICODE-NOTE: Sparkles (пиксельные «искры» вокруг единорога) отключены
по просьбе заказчика — они визуально конфликтовали с бабблом справа
и читались как «грязь» над текстом. Оставляем display:none на всех
брейкпоинтах (заодно убирает соответствующую декорацию в оригинале). */
.hero__sparkles {
display: none !important;
}
/* Speech bubble — pixel-art диалоговый бокс в стиле 8-битных игр.
AICODE-NOTE: Используем CSS border-image (9-slice scaling) с SVG 18x18.
Магия 9-slice в том, что 4 УГЛА остаются фиксированного размера (пиксели
остаются квадратными!), а 4 СТОРОНЫ растягиваются только вдоль своей оси
(но они однородные чёрные полоски, поэтому растяжение незаметно).
Центр заливается через `fill` — берётся белый блок из центра SVG.
Хвостик сверху — отдельный ::after с фиксированным размером, чтобы
его пиксели тоже остались квадратными. */
/* AICODE-NOTE: На мобиле максимум 320px и более компактные паддинги.
На планшете+ переопределяется в @media ниже. */
.hero__speech-bubble {
position: relative;
z-index: 4;
max-width: 320px;
width: 100%;
padding: 14px 14px;
border-style: solid;
border-width: 12px;
border-color: transparent;
border-image-source: url("data:image/svg+xml;utf8,");
border-image-slice: 6 fill;
border-image-repeat: stretch;
}
/* Хвостик — пиксель-арт треугольник, указывающий на фото Ксении.
AICODE-NOTE: На МОБИЛЕ фото ниже bubble → хвост смотрит ВНИЗ.
На ДЕСКТОПЕ (≥1024px) фото СПРАВА от bubble → хвост смотрит ВПРАВО.
Два разных SVG, позиционируются через bottom/right.
Первая строка SVG (белая «заглушка») покрывает чёрный бордер bubble
именно в том месте, где «открывается рот» облачка — это и убирает
паразитную чёрточку между хвостом и bubble. */
.hero__speech-bubble::after {
content: '';
position: absolute;
bottom: -30px;
right: 22%;
top: auto;
width: 30px;
height: 24px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.hero__speech-bubble-body {
font-family: var(--font-body);
}
.hero__speech-bubble-text {
font-size: var(--fs-sm);
line-height: 1.6;
text-align: center;
color: var(--color-text);
margin-bottom: 0;
}
.hero__speech-bubble-author {
display: none;
}
/* Photo of Ksenia
AICODE-NOTE: На мобиле фото ужато до 220px (высокое портретное — иначе
съедает пол-экрана). margin-bottom:-10px позволяет ногам слегка заходить
под нижний ряд облаков (тот же эффект, что и прижатие photo к flex-end
на десктопе). */
.hero__photo {
width: 100%;
max-width: 220px;
height: auto;
display: block;
margin: 0 auto;
}
/* CTA — белая пилюля с лавандовой пиксельной рамкой */
/* AICODE-NOTE: margin-top добавляет «воздух» между 3-строчным подзаголовком
и кнопкой, чтобы CTA не прилипал к тексту и визуально сдвигался ниже. */
/* AICODE-NOTE: На мобиле CTA «прилипает» к фото Ксении через отрицательный
margin-top, компенсирующий gap у .hero__inner (var(--sp-md)=16px).
А снизу — воздух var(--sp-2xl)=48px, чтобы кнопка не упиралась в
следующую секцию «Варианты удалённой работы». На планшете+ оба маргина
сбрасываются в @media ниже. */
.hero__cta-wrap {
width: 100%;
display: flex;
justify-content: center;
position: relative;
z-index: 4;
margin-top: calc(-1 * var(--sp-md));
margin-bottom: var(--sp-2xl);
}
/* AICODE-NOTE: Кнопка двухэтажная — основной текст «Записаться на
консультацию» + мелкая подпись «*без оплаты на первом этапе».
Используем inline-flex column, чтобы строки шли одна под другой
и обе оставались внутри пиксель-рамки (clip-path). */
.hero__cta {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 6px;
font-family: var(--font-pixel);
font-size: var(--fs-sm);
line-height: 1.2;
padding: 12px 28px;
color: var(--color-text);
background: var(--color-primary);
text-decoration: none;
cursor: pointer;
transition: background var(--transition-fast), color var(--transition-fast);
position: relative;
isolation: isolate;
text-align: center;
--frame-w: 3px;
--frame-step: 8px;
clip-path: polygon(
var(--frame-step) 0, calc(100% - var(--frame-step)) 0,
calc(100% - var(--frame-step)) var(--frame-step), 100% var(--frame-step),
100% calc(100% - var(--frame-step)), calc(100% - var(--frame-step)) calc(100% - var(--frame-step)),
calc(100% - var(--frame-step)) 100%, var(--frame-step) 100%,
var(--frame-step) calc(100% - var(--frame-step)), 0 calc(100% - var(--frame-step)),
0 var(--frame-step), var(--frame-step) var(--frame-step)
);
}
.hero__cta-main {
font-size: inherit;
line-height: 1.2;
}
/* AICODE-NOTE: Мелкая подпись ~55% от основного кегля, слегка
приглушённая по цвету, но остаётся читаемой. Пиксельный шрифт
в очень маленьком размере выглядит плохо, поэтому переключаем
её на body-шрифт (Montserrat) — это компромисс между читаемостью
и пиксельной эстетикой кнопки. */
.hero__cta-note {
font-family: var(--font-body);
font-size: 0.68em;
font-weight: 500;
color: var(--color-text-muted);
line-height: 1.2;
}
.hero__cta::before {
content: '';
position: absolute;
inset: var(--frame-w);
background: #ffffff;
z-index: -1;
clip-path: inherit;
}
.hero__cta:hover {
background: var(--color-primary-dark);
color: #ffffff;
}
.hero__cta:hover .hero__cta-note {
color: rgba(255, 255, 255, 0.85);
}
.hero__cta:hover::before {
background: var(--color-primary);
}
/* ====================================================
TABLET+ (≥768px): two flex columns, compact
==================================================== */
@media (min-width: 768px) {
.hero {
/* AICODE-NOTE: Целевая высота hero — ~75vh на типичных десктопах
и планшетах. Поднята с 70 → 75vh, чтобы фото Ксении выглядело
крупнее (фото масштабируется по доступной высоте, поэтому чем
больше --hero-max-h, тем больше фото). Всё остальное (единорог,
тексты, отступы) скейлится по vh — ничего не клиппится. */
--hero-max-h: 75vh;
--hero-pad-top: min(90px, 11vh);
padding: var(--hero-pad-top) 0 0;
}
/* AICODE-NOTE: Маленькое отдельное облачко в левом-верхнем углу (сверх
облака-подставки за единорогом). В оригинале таких декор-облачков три. */
.hero__cloud--left { width: 90px; top: 80px; left: 3%; }
.hero__cloud--center { width: 80px; top: 70px; }
.hero__cloud--small { width: 120px; top: 70px; right: 4%; }
/* AICODE-NOTE: hero__inner = flex-row с ДВУМЯ колонками:
.hero__left (unicorn-stack+CTA) и .hero__middle (bubble+photo в ряд).
На мобиле был flex-column c reordered детьми — здесь возвращаем обычный
двухколоночный лейаут. */
.hero__inner {
display: flex;
flex-direction: row;
align-items: stretch;
gap: var(--sp-lg);
}
/* AICODE-NOTE: На мобиле hero__left / hero__middle были display:contents
для «расплющивания» в единый стек. Здесь восстанавливаем как flex-колонки,
и снимаем order у детей. */
.hero__left {
flex: 0 0 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: var(--sp-md);
padding-top: 20px;
min-width: 260px;
min-height: 0;
}
.hero__top,
.hero__speech-bubble,
.hero__photo,
.hero__cta-wrap {
order: 0;
}
/* AICODE-NOTE: На планшете (768–1023px) единорог/тексты/CTA оставляем
центрированными по горизонтали — чтобы они были выровнены
относительно друг друга и кнопки. Лево-ориентированная раскладка
включается только на настоящем десктопе (≥1024px). */
.hero__top {
align-items: center;
text-align: center;
margin-bottom: 0;
}
.hero__cta-wrap {
justify-content: center;
margin-top: 0;
margin-bottom: 0;
}
/* Bubble + Photo в ряд. align-items:stretch, чтобы фото могло уехать
вниз (flex-end), а баббл — по центру (align-self:center). */
.hero__middle {
flex: 1 1 auto;
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: flex-end;
gap: var(--sp-md);
margin-top: 0;
padding-top: 0;
}
.hero__unicorn { width: min(180px, 22vh); }
.hero__title { font-size: min(clamp(2.4rem, 5.5vw, 3.6rem), 7vh); margin-bottom: 8px; }
.hero__subtitle{ font-size: min(clamp(1rem, 2vw, 1.3rem), 2.6vh); }
.hero__speech-bubble {
max-width: 320px;
padding: 16px 14px;
align-self: center;
}
/* AICODE-NOTE: Управляем фото через height (а не max-height),
width:auto — браузер сам посчитает ширину по естественным пропорциям
текущей картинки ksenia_photo (571×1024). min() гарантирует, что фото
не станет выше доступного места в hero (--hero-max-h минус верхний
отступ) и одновременно не растянется больше опорной высоты 627px
(значение сохранено со старого фото 844×1322, чтобы не менять общий
лейаут; при новом аспекте ширина авто-подстроится и будет меньше,
≈ 350px, оставаясь в пределах max-width). */
.hero__photo {
height: min(calc(var(--hero-max-h) - var(--hero-pad-top)), 627px);
width: auto;
max-width: 400px;
align-self: flex-end;
margin-top: 0;
margin-bottom: 0;
z-index: 5;
}
}
/* ====================================================
DESKTOP (≥1024px)
==================================================== */
@media (min-width: 1024px) {
.hero { --hero-pad-top: min(90px, 11vh); }
.hero__inner { max-width: 1200px; }
.hero__cloud--left { width: 100px; top: 100px; left: 4%; }
.hero__cloud--center { width: 80px; top: 70px; }
.hero__cloud--small { width: 150px; top: 80px; right: 4%; }
/* AICODE-NOTE: На десктопе единорог тоже «сидит» прямо на слове
«Ксения» — облако-подставка отключено глобально (см. базовый
стиль .hero__unicorn-wrap::before выше). */
.hero__unicorn { width: min(170px, 20vh); }
.hero__title { font-size: min(2.6rem, 5.2vh); letter-spacing: 2px; margin-bottom: 6px; }
.hero__subtitle{ font-size: min(1rem, 2.2vh); letter-spacing: 1px; }
/* AICODE-NOTE: align-self:center выравнивает левую колонку по вертикали
как баббл — её высота не растягивается на весь ряд, а определяется
содержимым и центрируется. padding-left сдвигает блок правее.
Скейл единорога/шрифтов уменьшен, чтобы общая высота стека
(unicorn + title + subtitle + CTA) примерно совпадала с высотой
баббла → визуально они одной высоты. */
.hero__left {
flex: 0 0 auto;
align-self: center;
min-width: 240px;
padding-top: 0;
padding-left: clamp(24px, 4vw, 64px);
gap: min(14px, 1.6vh);
}
/* AICODE-NOTE: Содержимое левой колонки (единорог, заголовок,
подзаголовок, CTA) центрируется по горизонтали относительно
самой колонки. */
.hero__top {
align-items: center;
text-align: center;
}
.hero__cta-wrap {
justify-content: center;
}
/* Bubble по центру, фото — прижато к низу hero. */
.hero__middle { align-items: stretch; gap: var(--sp-md); }
/* AICODE-NOTE: flex-shrink:0 у bubble/photo — чтобы они не сжимались
и bubble не превращался в узкую колонку в 13 строк. */
.hero__speech-bubble {
width: 320px;
max-width: 320px;
flex-shrink: 0;
padding: min(22px, 2.2vh) min(18px, 2vw);
align-self: center;
}
/* AICODE-NOTE: На низких окнах слегка уменьшаем шрифт в баббле,
чтобы его высота не превышала высоту левой колонки и фото. */
.hero__speech-bubble-text {
font-size: min(var(--fs-base), 1.9vh);
line-height: 1.5;
}
/* Десктоп: хвост смотрит ВПРАВО — туда, где стоит фото Ксении.
SVG повёрнут: tip теперь в правом столбце, extension в левом. */
.hero__speech-bubble::after {
bottom: auto;
right: -30px;
top: calc(50% - 15px);
width: 24px;
height: 30px;
background-image: url("data:image/svg+xml;utf8,");
}
.hero__photo {
/* AICODE-NOTE: опорное 752px — высота старого фото (844×1322) при ширине 480.
Значение сохранено, чтобы не менять общий лейаут хиро при смене картинки. */
height: min(calc(var(--hero-max-h) - var(--hero-pad-top)), 752px);
width: auto;
max-width: 480px;
flex-shrink: 0;
align-self: flex-end;
}
.hero__cta { font-size: var(--fs-base); padding: 12px 36px; }
}
/* ====================================================
LARGE DESKTOP (≥1440px) — 16" / 1920×1080 zoom typical
Это основной целевой брейкпоинт под пользовательский монитор.
==================================================== */
@media (min-width: 1440px) {
.hero {
--hero-pad-top: min(100px, 12vh);
}
.hero__inner { max-width: 1280px; }
.hero__cloud--left { width: 120px; top: 110px; left: 4%; }
.hero__cloud--center { width: 100px; top: 80px; }
.hero__cloud--small { width: 170px; top: 90px; right: 4%; }
.hero__unicorn { width: min(210px, 24vh); }
.hero__title { font-size: min(3rem, 6vh); letter-spacing: 4px; margin-bottom: 8px; }
.hero__subtitle{ font-size: min(1.15rem, 2.4vh); letter-spacing: 2px; }
/* AICODE-NOTE: align-self наследуется с 1024+ (center). Сдвиг правее
и больший padding-left для большого десктопа, чтобы блок
визуально «дышал» от левого края. Размеры остаются компактными,
чтобы стек совпадал по высоте с бабблом (~400px). */
.hero__left {
min-width: 280px;
padding-top: 0;
padding-left: clamp(32px, 5vw, 96px);
gap: min(18px, 2vh);
}
.hero__speech-bubble {
max-width: 400px;
padding: min(22px, 2.4vh) min(20px, 1.5vw);
}
.hero__speech-bubble-text {
font-size: min(var(--fs-md), 2.1vh);
line-height: 1.55;
}
.hero__photo {
/* AICODE-NOTE: опорное 877px — высота старого фото при ширине 560. */
height: min(calc(var(--hero-max-h) - var(--hero-pad-top)), 877px);
max-width: 560px;
}
.hero__cta { font-size: var(--fs-md); padding: 14px 44px; }
}
/* ====================================================
XL DESKTOP (≥1700px)
==================================================== */
@media (min-width: 1700px) {
.hero__inner { max-width: 1380px; }
.hero__title { font-size: 4.4rem; }
.hero__speech-bubble { max-width: 380px; }
.hero__photo {
/* AICODE-NOTE: опорное 971px — высота старого фото при ширине 620. */
height: min(calc(var(--hero-max-h) - var(--hero-pad-top)), 971px);
max-width: 620px;
}
}