Navbar

components/_navbar.scss

Wariant Positive (domyślny)

Białe tło, niebieski tekst/ikony (#1C51A0). Używany na większości stron.

Wariant Negative

Przezroczyste tło, biały tekst/ikony. Używany na stronach z ciemnym hero background. Po przeskrolowaniu 30% viewportu przełącza się automatycznie na positive.

Użycie w HTML

<!-- Positive (domyślny) -->
@@include('navbar.html', { "active": "nagrody", "variant": "positive" })

<!-- Negative (na ciemnych hero) -->
@@include('navbar.html', { "active": "historia-winston", "variant": "negative" })

Mobile Nav Overlay

Pełnoekranowy overlay nawigacji mobilnej (poniżej breakpointu 1100px). Otwierany przyciskiem burger, zamykany przyciskiem X. Elementy animują się kaskadowo przy otwieraniu.

<nav class="mobile-nav">
  <button class="mobile-nav__close">✕</button>
  <ul class="mobile-nav__list">
    <li class="mobile-nav__item">
      <a href="#" class="mobile-nav__link">Nagrody</a>
    </li>
    <li class="mobile-nav__item mobile-nav__item--has-dropdown">
      <button class="mobile-nav__link" aria-expanded="false">
        Win Club
        <svg class="icon icon-plus">...</svg>
      </button>
      <div class="mobile-dropdown">...</div>
    </li>
  </ul>
  <div class="mobile-nav__logo">
    <img src="logo-winston-full.svg" alt="Winston">
  </div>
</nav>

Mobile Dropdown — Karty z obrazem

Karta z tłem obrazka, gradientem overlay i białym tekstem. Wysokość 56px.

Dodaj kod

<a href="#" class="mobile-dropdown__card">
  <img class="mobile-dropdown__card-bg" src="image.jpg" alt="">
  <div class="mobile-dropdown__card-overlay"></div>
  <span class="mobile-dropdown__card-text">Dodaj kod</span>
</a>

Mobile Dropdown — Karty białe (ze strzałką)

Biała karta z etykietą i strzałką lub miniaturką produktu. Wysokość 54px.

O programie

<!-- Wariant ze strzałką -->
<a href="#" class="mobile-dropdown__card mobile-dropdown__card--white">
  <span class="mobile-dropdown__card-label">O programie</span>
  <img class="mobile-dropdown__card-arrow" src="arrow.svg" width="32" height="32">
</a>

<!-- Wariant z miniaturką produktu -->
<a href="#" class="mobile-dropdown__card mobile-dropdown__card--white">
  <span class="mobile-dropdown__card-label">Linia Original</span>
  <img class="mobile-dropdown__card-thumb" src="product.png" width="30" height="30">
</a>

Animacje

Element	Animacja	Opis
`.mobile-nav`	`mobileNavOverlayIn`	Overlay wjeżdża z góry (0.4s)
`.mobile-nav__item`	`mobileNavSlideIn`	Pozycje menu kaskadowo (stagger 0.08s, delay od `--i`)
`.mobile-dropdown`	`max-height` transition	Płynne otwieranie/zamykanie (0.3s). JS ustawia `max-height`
`.mobile-dropdown__card`	`dropdownCardSlideIn`	Karty wjeżdżają kaskadowo (stagger 0.06s, delay od `--card-i`)

Klasy CSS

Klasa	Opis
`.navbar`	Kontener główny, sticky top
`.navbar--negative`	Wariant z przezroczystym tłem, biały tekst
`.navbar--scrolled`	Dodawane JS po 30vh — wymusza positive
`.navbar__mobile`	Header mobilny
`.navbar__desktop`	Header desktopowy
`.navbar__logo`	Logo kontener
`.navbar__toggle`	Burger button mobile
`.navbar__nav`	Nawigacja desktop
`.navbar__points`	Badge z punktami
`.navbar__icon-btn`	Przycisk ikonowy (konto)
`.mobile-nav`	Overlay nawigacji mobilnej (fixed, fullscreen)
`.mobile-nav__close`	Przycisk zamknięcia overlaya
`.mobile-nav__list`	Lista pozycji menu
`.mobile-nav__item`	Pozycja menu
`.mobile-nav__item--has-dropdown`	Pozycja z rozwijanym submenu
`.mobile-nav__link`	Link/button pozycji menu (26px)
`.mobile-nav__logo`	Logo na dole overlaya
`.mobile-dropdown`	Kontener kart submenu (max-height animated)
`.mobile-dropdown__card`	Karta z obrazem (56px), gradient overlay
`.mobile-dropdown__card--white`	Biała karta (54px), strzałka lub miniaturka
`.mobile-dropdown__card-bg`	Obrazek tła karty (absolute, cover)
`.mobile-dropdown__card-overlay`	Gradient overlay na obrazku
`.mobile-dropdown__card-text`	Tekst na karcie z obrazem (biały)
`.mobile-dropdown__card-label`	Etykieta na białej karcie
`.mobile-dropdown__card-arrow`	Ikona strzałki na białej karcie
`.mobile-dropdown__card-thumb`	Miniaturka produktu na białej karcie

Pliki JS

Plik	Odpowiada za
`modules/navbar-scroll.js`	Przełączanie negative → positive po 30vh
`modules/mobile-nav.js`	Otwieranie/zamykanie overlaya, stagger indices
`modules/dropdown.js`	Toggle dropdownów, max-height animation, stagger kart