/* ==========================================================================
ea-hero.css — СТАТИЧНЫЙ ПЕРВЫЙ ЭКРАН ГЛАВНОЙ (Elements/hero.ctp).
Заменил swiper-слайдер: разметка, элемент `slider.ctp`, `clear_slider.ctp`
и `TmMainSliderHelper` удалены, а не спрятаны — на главной больше нет ни
одного `.swiper-*` узла, поэтому слайдерная инициализация из script.min.js
на этой странице просто не находит цели.
Отдельный файл по той же причине, что и ea-filter.css: hero и панель фильтра
стоят вплотную и дорабатываются порознь — `git revert` одного файла должен
откатывать только hero.
Значения не изобретаются: токены --brand-…, --ink…, --ease берутся из
custom.css:779-803 (звёздочку в конце имени токена в комментарии НЕ писать:
пара `*` + `/` закрывает блок раньше времени и парсер съедает следующее
правило целиком — на этом уже потерялось первое правило ea-filter.css),
шрифт — Montserrat темы (custom.css задаёт его секциям главной), тёмный тон
градиента #0F081E — из ТЗ заказчика.
========================================================================== */
.ea-hero{
/* Высота, а не aspect-ratio: первый экран обязан вмещать hero + панель
фильтра БЕЗ прокрутки. Замер живого стенда 1440x900: шапка 163px,
панель фильтра 241px, её собственный подъём -60px (ea-filter.css) =>
на hero остаётся ~556px. 380px — этот бюджет с запасом на строку-другую
в панели при других ширинах. Потолок 560px: выше панорама начинает
выталкивать фильтр за фолд на ноутбуках 16:10.
svh, а не vh: на мобильных vh считается по РАЗВЁРНУТОМУ адресному бару
и первый экран уезжает вниз ровно на его высоту. */
--ea-hero-h:clamp(340px, calc(100vh - 380px), 560px);
--ea-hero-h:clamp(340px, calc(100svh - 380px), 560px);
/* Тёмный тон затемнения. Не нейтральный чёрный: у фото холодное синее небо,
на нём чистый чёрный даёт грязный серый ореол вокруг букв. */
--ea-hero-ink:15,8,30;
position:relative;
height:var(--ea-hero-h);
overflow:hidden;
background:#0F081E;
/* Тема кладёт на .page text-align:center, а копия hero выровнена слева. */
text-align:left;
isolation:isolate;
}
/* ---------- фото ----------
LQIP-заглушка лежит фоном ПОД ![]()
: пока грузится 150-220 КБ панорамы,
первый экран уже окрашен в цвета кадра, а не в глухую заливку. Отдельного
JS для blur-up нет — ![]()
просто дорисовывается поверх. */
.ea-hero__media{
position:absolute;
inset:0;
display:block;
background:#0F081E center/cover no-repeat
url("data:image/webp;base64,UklGRnIAAABXRUJQVlA4IGYAAABQBACdASoYAAkAPt1ap0yopSOiMAgBEBuJagCdLoAyv8B75ShLX5qX6AMAAP6RKqjeClxFhptGFxjlreR5Y9ZV+Hr2dtNybPEFFlyWl+bn35BBEx4B95qVQfIYkBV9564aOryAAAA=");
}
.ea-hero__media img{
display:block;
width:100%;
height:100%;
/* width/height в разметке нужны против дёрганья вёрстки, но реальную
геометрию задаёт контейнер — отсюда cover. */
object-fit:cover;
object-position:center;
}
/* ---------- затемнение под текст ----------
Градиент кладётся ПОВЕРХ фото, а не в фильтр на само фото: темнеет только
зона под буквами, вода и небо остаются такими, какими их снимали.
Десктоп и планшет — слева направо, текст стоит в тёмной трети. */
.ea-hero::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(100deg,
rgba(var(--ea-hero-ink),.62) 0%,
rgba(var(--ea-hero-ink),.34) 42%,
rgba(var(--ea-hero-ink),0) 72%);
}
/* ---------- копия ----------
.container — тот же контейнер, что несёт панель фильтра ниже, поэтому левый
край надзаголовка совпадает с левым краем первого поля формы. */
.ea-hero__inner{
position:relative;
z-index:1;
height:100%;
display:flex;
align-items:center;
}
.ea-hero__copy{
max-width:min(620px, 62%);
color:#fff;
font-family:"Montserrat",Helvetica,Arial,sans-serif;
/* Тень — не декоративная: облако или блик воды могут попасть под строку
даже сквозь градиент, и тогда белый теряет контраст. */
text-shadow:0 2px 18px rgba(var(--ea-hero-ink),.45);
}
.ea-hero__overline{
margin:0 0 14px;
/* Тёплый песок из палитры ТЗ: на синей воде даёт ~7:1 и рифмуется с
--brand-yellow бренда, тогда как --brand-red на этом фоне ~2.3:1. */
color:#FFD7A8;
font-size:12px;
font-weight:700;
letter-spacing:.2em;
text-transform:uppercase;
line-height:1.2;
}
.ea-hero__title{
margin:0 0 16px;
color:#fff;
font-family:inherit;
font-size:clamp(28px, 3.2vw, 52px);
font-weight:800;
line-height:1.08;
letter-spacing:-.02em;
/* Тема капитализирует каждое слово в h1 (style.css). Для «Bay of Vlorë»
это ломает топоним: заголовок — предложение, а не название колонки. */
text-transform:none;
}
.ea-hero__lead{
margin:0;
color:rgba(255,255,255,.92);
font-size:clamp(15px, 1.15vw, 19px);
font-weight:400;
line-height:1.5;
max-width:34em;
}
/* ---------- планшет ---------- */
@media (max-width:1023px){
.ea-hero{--ea-hero-h:clamp(320px, 52vh, 480px);--ea-hero-h:clamp(320px, 52svh, 480px)}
.ea-hero__copy{max-width:min(560px, 78%)}
}
/* ---------- телефон ----------
Кадр портретный: небо сверху, зелень снизу. Заголовок садится на небо,
низ уходит в тень — на неё внахлёст (-60px) приезжает панель фильтра, и стык
фото с формой читается как одна секция, а не как две склеенные.
Середина кадра чистая: залив ради него и снимали. */
@media (max-width:767px){
.ea-hero{
--ea-hero-h:clamp(300px, 46vh, 460px);
--ea-hero-h:clamp(300px, 46svh, 460px);
}
.ea-hero__media{
background-image:url("data:image/webp;base64,UklGRroAAABXRUJQVlA4IK4AAAAwBgCdASoYACAAPt1eo00opSMiMBgMARAbiWwAnTM0OYrYv7e7cBsrjxZz4aoldvQ8IPGv8Bd+EaAAAP3eQfzuaWCagGH0pLDeC2IeH/Fy63/SWw1OcWhxkP+tfKBQbbzBUpgYMaLpffablNJeZH249pXfxK0i+60ECAvZpvLAiVtOOzTIL7zCjswVi2pjDB69hFrYOTfpB8bQpCxkG8+P88/OAhPjA6RaZZUuAAA=");
}
.ea-hero::after{
background:linear-gradient(180deg,
rgba(var(--ea-hero-ink),.55) 0%,
rgba(var(--ea-hero-ink),.12) 40%,
rgba(var(--ea-hero-ink),.10) 58%,
rgba(var(--ea-hero-ink),.72) 100%);
}
.ea-hero__inner{
align-items:flex-start;
/* Нижние 60px съедает наложенная панель фильтра — копию туда не пускаем. */
padding-top:22px;
padding-bottom:70px;
}
.ea-hero__copy{max-width:100%}
.ea-hero__overline{margin-bottom:10px;font-size:11px;letter-spacing:.18em}
.ea-hero__title{font-size:clamp(24px, 6.4vw, 32px);margin-bottom:10px}
.ea-hero__lead{font-size:15px}
}
/* Очень узкие экраны: подзаголовок из двух предложений съедает весь кадр. */
@media (max-width:400px){
.ea-hero__lead{font-size:14px}
}