Как сменить цвет гамбургера на белый, если ему задано свойство mix-blend-mode: difference?

Question

[Norum]

Как задать цвет гамбургеру, чтобы он на первой странице был белым? Он у меня отображается бирюзовым цветом. Я его делал c помощью hamburgers.css и блоку hamburger_wrapper я задал свойство mix-blend-mode: difference, далее я задал белый цвет для самих составляющих гамбургера, но выдал он мне не то, что надо.

<div class="hamburger_wrapper">
	<div class="hamburger hamburger--spin">
	 <div class="hamburger-box">
	<div class="hamburger-inner"></div>
	</div>
       </div>
</div>

.hamburger_wrapper {
  display: none;
  mix-blend-mode: difference;
}

.hamburger-inner,
.hamburger-inner:after,
.hamburger-inner:before {
  background-color: #fff !important;
}

Сам сайт c96180og.beget.tech
код https://jsfiddle.net/1hg407ca/

Comments

[Ankhena]

Убирать или переопределять или приводить к значению по умолчанию свойство mix-blend-mode, когда бургер в нужной секции.
На js.

[Norum]

Ankhena, и как это реализовать на js?

[Ankhena]

Norum, https://learn.javascript.ru/coordinates#document-c... и далее по мере возникновения вопросов.

Умнее будет зайти с другой стороны.
Когда бургер не в этой зоне, то тогда добавлять класс у которого задан mix-blend-mode

Answer 1

[SagePtr]

Ну так он просчитал разницу с фоном и отрисовал бирюзовым. А каким цветом должен ещё отображаться белый цвет при смешении с красным методом difference?