/* Базовая шапка (непрозрачная) */
.navbar{
  position: relative;
  z-index: 1000;
  background: #fff; /* ваш базовый фон */
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}

/* Внутренности: корректная поверхностность */
.navbar .header-inner{ position: relative; z-index: 2; }

/* === Прозрачная версия, перекрывает контент === */
.navbar.is-transparent{
  position: absolute; /* «ложится» поверх первого блока */
  top: 0; left: 0; right: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
}

/* Градиентная вуаль наверху (как у Porsche).
   Важно: элемент выходит выше и ниже шапки, чтобы плавно заходить на hero. */
.navbar.is-transparent::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: calc(-1 * var(--hh-grad-extend, 80px));
  height: calc(100% + var(--hh-grad-extend, 80px));
  z-index: 1;
  pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, .100) 0, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Белые цвета для текста/иконок в прозрачной шапке */
.has-transparent-header .navbar.is-transparent .navbar-address a,
.has-transparent-header .navbar.is-transparent .social-list a,
.has-transparent-header .navbar.is-transparent .brand,
.has-transparent-header .navbar.is-transparent .brand *{
  color:#fff !important;
  fill:#fff;
}

/* Бургер-иконка полоски */
.has-transparent-header .navbar.is-transparent .navbar-toggle .icon-bar{
  background:#fff;
}

/* Разделитель и прочее */
.has-transparent-header .navbar.is-transparent .navbar-divider{
  background: rgba(255,255,255,.45);
}

/* Подпорки на случай тёмного бэкграунда логотипа (если нужен инверт) */
/* Если у вас только «тёмный» логотип, временно можно подсветить: */
/*
.has-transparent-header .navbar.is-transparent .brand img{
  filter: brightness(1000%) invert(1);
}
*/

/* Состояние «обычной» шапки — ничего особенного, но на всякий случай: */
.has-solid-header .navbar{
  background: #0e0e12;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  color:#111;
}

/* Адаптив: чтобы градиент не был слишком высоким на мобильных */
@media (max-width: 767.98px){
  .navbar.is-transparent::before{
    top: calc(-1 * var(--hh-grad-extend-mobile, 56px));
    height: calc(100% + var(--hh-grad-extend-mobile, 56px));
  }
}