window.addEventListener('scroll', function () {
const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
document.body.classList.toggle('scrolled', currentScrollTop > 0)
});body.scrolled.topbar__bottom-consult {
opacity: 0;
transition: 0.3s ease;
}
body.scrolled .topbar__bottom-consult {
opacity: 1;
}position:sticky.topbar__bottom {
position: sticky;
top: 0;
}pointer-events: none; - блок с таким стилем "невидим" для указателя (мышки), и никак на нее не реагирует
grid-template-columns: 100px repeat(3, 1fr);grid-template-columns: repeat(3, 1fr);
@media screen and (hover: none) and (orientation: portrait){
body::after {
content: 'Поверните телефон в горизонтальное положение';
z-index: 999999;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
}
Имеем выражение: (100vh - 656px) / 2 + 330px =
Раскроем скобки: 100vh / 2 - 656px / 2 + 330px =
Выполним деление: 50vh - 328px + 330px
Сложим коэффициенты: -328px + 330px = 2px
собираем воедино: 50vh + 2px<!-- лэйаут -->
<div @class(['about-content' => request()->is('About')])>
@yield('content')
</div>
<!--Дочерний-->
<div class="pb-5 management-content">
<div class="container">
<h2>MANAGEMENT PHILOSOPHY</h2>
...
</div>
</div>