/* ALLMEBLO 2026-08-06: naglowek + menu glowne + dropdown. Wlascicielem tego pliku
jest zadanie "header/menu". NIE dopisywac tu stylow promo-kafli menu. */
/* ==========================================================================
ZALOZENIA I POMIARY (zmierzone na zywo, Chromium 1440x900 i 390x844)
Arkusz laduje sie w layouts/layout-both-columns.tpl jako jeden z ostatnich,
zaraz po a11y-fixes.css, wiec przy ROWNEJ specyficznosci wygrywa z
custom.css i z theme.css. Tam gdzie trzeba podbic specyficznosc, robimy to
selektorem (#header, #navbar). !important jest uzyte w CZTERECH miejscach,
kazde udokumentowane w miejscu uzycia:
1. display calego bloku .support-box - walka z klasa .hidden-lg-down
z HTML (theme.css: @media (max-width:1199px){.hidden-lg-down{
display:none!important}}), przez ktora numery telefonu w ogole nie
istnialy na tablecie i telefonie,
2. display przy numerach telefonu - walka ze stylem inline
style="display: block" (HTML siedzi w appagebuilder w bazie),
3. kolor hover linkow paska gornego - theme.css ma
`.tc a:hover { color: inherit !important; }`,
4. obwodka fokusu przycisku lupy - theme.css ma
`.btn:focus { outline: none !important; }`.
Punkty 3 i 4 to odpowiedz na !important juz obecne w motywie; bez tego
hover paska byl szary, a fokus klawiaturowy lupy w ogole niewidoczny.
Paleta: zielen marki #2a7c00, braz #521a06, pasek gorny #f4f4f4, tlo biale,
tlo kafla kontaktowego #fbf9f7, linia kafla #e6ded4.
KONTRASTY (obliczone, WCAG 2.1):
#666666 na #f4f4f4 = 5,22:1 (tekst paska gornego, bez zmian)
#2a7c00 na #ffffff = 5,27:1 (hover paska gornego - biala pigulka)
#521a06 na #ffffff = 13,92:1 (linki menu, naglowki grup)
#521a06 na #fbf9f7 = 13,44:1 (numery telefonu na tle kafla)
#6a6058 na #fbf9f7 = 5,72:1 (etykieta "Masz pytania?")
#2a7c00 na #eef5eb = 4,75:1 (hover menu: zielen na 8% tincie zieleni)
#2a7c00 na #f0f5ed = 4,80:1 (hover numeru: tint 8% na tle kafla)
#2a7c00 na #f2f7f0 = 4,86:1 (hover linkow dropdownu: tint 6%)
#ffffff na #63200a = 12,06:1 (hover przycisku lupy)
#a1937f na #ffffff = 3,00:1 (pierscien kolka, element nietekstowy)
PULAPKI, ktorych tu NIE lamiemy:
- #tc1/#tc2/#tc3 maja celowo zablokowana animacje opacity (a11y-fixes.css,
audyt kontrastu lapal je w polowie przenikania). Ponizej ani jedna
regula nie dotyka opacity tych elementow, a hover paska gornego jest
ograniczony do >=768px, czyli poza zakresem slidera z custom.js.
- .megamenu .dropdown-item NIE dostaje wlasciwosci display. custom.js
ustawia ja inline (none/block) przy rozwijaniu poziomu 3 na mobile.
- Kafle promocyjne w dropdownie (a.menu-promo, .menu-promo__cta) sa
wlasnoscia menu-promo.css. Ponizej nie ma ani jednego selektora,
ktory by w nie celowal.
========================================================================== */
:root {
--alm-hm-zielen: #2a7c00;
--alm-hm-braz: #521a06;
--alm-hm-braz-hover: #63200a;
--alm-hm-tint: rgba(42, 124, 0, .08); /* #eef5eb na bieli, 4,75:1 */
--alm-hm-tint-l: rgba(42, 124, 0, .06); /* #f2f7f0 na bieli, 4,86:1 */
--alm-hm-linia: #ece4dc;
--alm-hm-kafel-tlo: #fbf9f7;
--alm-hm-kafel-linia: #e6ded4;
--alm-hm-etykieta: #6a6058;
--alm-hm-czas: .2s;
--alm-hm-krzywa: cubic-bezier(.2, .7, .3, 1);
}
/* ==========================================================================
1. PROPORCJE NAGLOWKA NA DUZYCH EKRANACH
Zmierzone PRZED: wiersz naglowka to trzy plywajace kolumny bootstrapowe
16,667% / 50% / 33,333%. Przy 1440 px daje to 220 / 660 / 440 px, czyli
samo pole wyszukiwania mialo 630 px (polowa naglowka), a prawa kolumna
miala 410 px tresci przy 356,7 px zajetych.
Wiersz NIE jest flexem (display:block, kolumny plywaja), wiec samo
zwezenie #leo_search_block_top nie przesunieloby prawej kolumny w lewo.
Dlatego zmieniamy proporcje kolumn. Suma zawsze zostaje 100%, wiec uklad
nie skacze i nic sie nie zawija.
>=1200 px: 16,667% / 40% / 43,333%
1200 px: 195 / 468 / 507 -> pole szukania 450 px
1440 px: 215 / 516 / 559 -> pole szukania 498 px
1600 px: 228 / 548 / 594 -> pole szukania 530 px
Zakres 480-560 px z wytycznych trafiony na typowym 1440 i 1600 px,
a max-width 560 px trzyma pole w ryzach na monitorach szerszych.
992-1199 px: 25% / 37% / 38% (kontener ma tam stale 930 px)
Prawa kolumna rosnie z 232 na 353 px. Bez tego kafel kontaktowy
(179 px) razem z ikona konta (44) i koszykiem (60) nie miescil sie
w 232 px i wychodzil na wyszukiwarke. Pole szukania ma tam 325 px,
co jest swiadomym ustepstwem: przy 992 px szerokosci ekranu nie ma
miejsca i na 480 px pole, i na widoczny numer telefonu.
========================================================================== */
@media (min-width: 1200px) {
/* Selektor przez :has() celuje w kolumne wyszukiwarki bez zgadywania
nth-child (w naglowku jest wiecej ApRow o tych samych klasach).
:has() jest juz uzywane w custom.css na produkcji, wiec nie wnosi
nowego wymagania wobec przegladarek. */
#header .ApRow > .ApColumn:has(> #leo_search_block_top) {
width: 40%;
max-width: 40%;
flex: 0 0 40%;
}
#header .ApRow > .top-right-header.icon-box-header {
width: 43.3333%;
max-width: 43.3333%;
flex: 0 0 43.3333%;
}
#leo_search_block_top {
max-width: 560px;
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
#header .ApRow > .ApColumn:has(> #leo_search_block_top) {
width: 37%;
max-width: 37%;
flex: 0 0 37%;
}
#header .ApRow > .top-right-header.icon-box-header {
width: 38%;
max-width: 38%;
flex: 0 0 38%;
}
}
/* Prawa kolumna: rowny oddech miedzy telefonami, kontem i koszykiem.
Elementy sa wyrownane do prawej krawedzi, a nie rozstrzelone, zeby
koszyk stal dokladnie nad ostatnia pozycja menu. */
@media (min-width: 992px) {
#header .top-right-header.icon-box-header {
align-items: center;
justify-content: flex-end;
gap: 10px;
}
}
/* ==========================================================================
2. BLOK "MASZ PYTANIA?" - kafel kontaktowy
HTML (appagebuilder, baza danych, NIE do ruszania):
Zmierzone PRZED (stan zastany): ikona 34 px, etykieta 13 px, dwa numery
15 px/700 OBOK SIEBIE w pigulkach 101,5 x 26,8 px, bez ramki, a caly blok
ZNIKAL ponizej 1200 px przez klase .hidden-lg-down.
PO (wytyczne wlasciciela z 2026-08-06):
- rozmiar ikony bez zmian (34 px, na wezszych ekranach 30-32 px),
- numery JEDEN POD DRUGIM, 17 px/700, wysokosc klikalna 36 px na
desktopie i 44 px na telefonie,
- delikatna ramka 1 px #e6ded4, zaokraglenie 14 px, tlo #fbf9f7,
- "Masz pytania?" jako etykieta 12 px, stonowana, NAD numerami,
- blok widoczny takze ponizej 1200 px (punkt 2c).
========================================================================== */
/* --- 2a. Postac kafla, wspolna dla wszystkich szerokosci ----------------- */
/* !important nr 1: theme.css gasi caly blok regula
@media (max-width:1199px){.hidden-lg-down{display:none!important}}.
Bez tego numer telefonu nie istnial na zadnym telefonie ani tablecie. */
#header .top-right-header .support-box {
display: flex !important;
align-items: center;
gap: 10px;
padding: 5px 12px 5px 7px;
margin: 0;
border: 1px solid var(--alm-hm-kafel-linia);
border-radius: 14px;
background-color: var(--alm-hm-kafel-tlo);
line-height: 1.2;
}
#header .top-right-header .support-box > i.icomoon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background-color: rgba(82, 26, 6, .07);
color: var(--alm-hm-braz);
font-size: 20px;
line-height: 1;
transition: background-color var(--alm-hm-czas) var(--alm-hm-krzywa),
color var(--alm-hm-czas) var(--alm-hm-krzywa);
}
/* theme.css daje klasie .right padding-left: 15px, przez co odstep miedzy
ikona a tekstem robil sie 23 px zamiast 10 px. Zerujemy, odstep robi gap. */
#header .top-right-header .support-box > .right {
display: flex;
flex-flow: column nowrap;
align-items: stretch;
flex: 1 1 auto;
min-width: 0;
padding: 0;
}
#header .top-right-header .support-box .call {
display: block;
flex: 0 0 auto;
font-size: 12px;
font-weight: 500;
color: var(--alm-hm-etykieta); /* 5,72:1 na #fbf9f7 */
letter-spacing: .02em;
margin: 0 0 1px 8px;
}
/* !important nr 2: numery maja w HTML style="display: block" wpisany
inline, a inline bije kazdy selektor bez !important. */
#header .top-right-header .support-box a.number {
display: flex !important;
align-items: center;
min-height: 36px;
padding: 2px 8px;
margin: 0;
border-radius: 9px;
font-size: 17px;
font-weight: 700;
color: var(--alm-hm-braz); /* 13,44:1 na #fbf9f7 */
white-space: nowrap;
transition: background-color var(--alm-hm-czas) var(--alm-hm-krzywa),
color var(--alm-hm-czas) var(--alm-hm-krzywa);
}
/* Poprzednia wersja stawiala numery obok siebie i rozdzielala je pionowa
kreska w ::before. Numery stoja teraz pod soba, wiec kreska znika. */
#header .top-right-header .support-box a.number + a.number::before {
content: none;
}
#header .top-right-header .support-box a.number:hover,
#header .top-right-header .support-box a.number:focus {
background-color: var(--alm-hm-tint);
color: var(--alm-hm-zielen); /* 4,80:1 na tincie nad #fbf9f7 */
}
#header .top-right-header .support-box:hover {
border-color: #d8ccbe;
}
#header .top-right-header .support-box:hover > i.icomoon {
background-color: var(--alm-hm-tint);
color: var(--alm-hm-zielen);
}
/* --- 2b. 992-1199 px: kafel o stopien mniejszy --------------------------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
#header .top-right-header .support-box {
gap: 8px;
padding-right: 10px;
}
#header .top-right-header .support-box > i.icomoon {
width: 30px;
height: 30px;
font-size: 18px;
}
#header .top-right-header .support-box a.number {
font-size: 16px;
min-height: 34px;
}
}
/* --- 2c. Ponizej 992 px: pasek kontaktowy pod ikonami --------------------
Zmierzone: ponizej 992 px kolumna .top-right-header jest wyjeta z ukladu
(position:absolute, top:20px wzgledem .inner) i ma tylko 165-180 px
szerokosci na telefonie, a siedza w niej juz ikona lupy (44 px), konto
(44 px) i koszyk (60 px). Kafel w wersji desktopowej nie ma sie tam jak
zmiescic ani w poziomie, ani w pionie.
Rozwiazanie: kafel wychodzi z rzedu ikon jako pasek POD nimi, przyklejony
do prawej krawedzi kontenera i szeroki na cala szerokosc tresci
(calc(100vw - 30px), .inner ma 15 px paddingu z kazdej strony), z gorna
granica 460 px, zeby na tablecie nie ciagnal sie przez caly ekran.
Numery ida wtedy OBOK SIEBIE w siatce 1fr 1fr - to jest ta "kompaktowa
wersja" z wytycznych. Na wezszych ekranach dwa numery jeden pod drugim
przy wymaganej wysokosci 44 px kosztowalyby kolejne 44 px naglowka.
Siatka (grid), a nie flex-wrap, jest tu celowa: dwie kolumny 1fr nigdy
nie zawijaja sie na trzeci wiersz, wiec wysokosc paska jest STALA
(68 px) niezaleznie od szerokosci ekranu i dlugosci numerow. Dzieki temu
miejsce zarezerwowane pod pasek (min-height kolumny z logo) zawsze sie
zgadza i pasek nie wchodzi na wyszukiwarke ani na przycisk menu.
Pomiar rezerwacji: .top-right-header zaczyna sie 20 px ponizej gory
.inner, ma 44 px wysokosci, pasek startuje 8 px nizej i ma 68 px, czyli
konczy sie 140 px ponizej gory .inner. min-height: 148px zostawia
8 px oddechu do nastepnego wiersza naglowka.
========================================================================== */
@media (max-width: 991.98px) {
/* Kolumna z logo jest jedynym elementem, ktory trzyma wysokosc
pierwszego wiersza naglowka (pozostale dwie sa wyjete z ukladu albo
zwiniete), wiec to ona rezerwuje miejsce na pasek. */
#header .bottomnav .ApRow > .ApColumn:has(.header_logo) {
min-height: 148px;
}
#header .top-right-header .support-box {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 3;
width: calc(100vw - 30px);
max-width: 460px;
gap: 8px;
padding: 4px 10px 4px 6px;
}
#header .top-right-header .support-box > i.icomoon {
width: 32px;
height: 32px;
font-size: 19px;
}
#header .top-right-header .support-box > .right {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 6px;
align-items: center;
}
#header .top-right-header .support-box .call {
grid-column: 1 / -1;
font-size: 11px;
margin: 0 0 0 6px;
}
#header .top-right-header .support-box a.number {
min-height: 44px; /* cel dotykowy WCAG 2.5.5 */
font-size: 16px;
padding: 2px 8px;
justify-content: flex-start;
}
}
/* --- 2d. Strona zamowienia (thecheckout, body#checkout) ------------------
Zmierzone: kasa renderuje ten sam naglowek, ale bez menu, bez
wyszukiwarki i - ponizej 992 px - takze bez ikony konta i koszyka.
Kolumna .top-right-header jest tam praktycznie pusta (1 px wysokosci),
wiec pasek moze stanac OBOK logo, a nie pod nim: kafel dostaje szerokosc
z tresci i wraca do ukladu z numerami jeden pod drugim, zgodnie z
wytyczna wlasciciela. Rezerwacja jest mniejsza, bo nie ma rzedu ikon.
========================================================================== */
@media (max-width: 991.98px) {
#checkout #header .bottomnav .ApRow > .ApColumn:has(.header_logo) {
min-height: 140px;
}
#checkout #header .top-right-header .support-box {
top: 0;
width: auto;
max-width: none;
padding: 5px 10px 5px 6px;
}
/* align-items wraca z siatki (1fr 1fr, wysrodkowane) na wyrownanie do
lewej - inaczej numery wisza na srodku kafla. */
#checkout #header .top-right-header .support-box > .right {
display: flex;
flex-flow: column nowrap;
align-items: flex-start;
}
#checkout #header .top-right-header .support-box .call {
margin-left: 8px;
}
}
/* ==========================================================================
3. HOVERY W NAGLOWKU: logo, lupa, konto, koszyk, pasek gorny
========================================================================== */
/* --- 3a. Logo ------------------------------------------------------------ */
.header_logo > a {
display: inline-block;
transition: transform var(--alm-hm-czas) var(--alm-hm-krzywa),
filter var(--alm-hm-czas) var(--alm-hm-krzywa);
}
.header_logo > a:hover {
transform: translateY(-1px) scale(1.02);
filter: saturate(1.15);
}
/* --- 3b. Przycisk lupy ---------------------------------------------------
Bialy tekst na #63200a = 12,06:1 (ten sam odcien hover, ktory ma juz
glowne CTA karty produktu, wiec sklep zostaje spojny). */
#leo_search_top_button {
transition: background-color var(--alm-hm-czas) var(--alm-hm-krzywa),
transform var(--alm-hm-czas) var(--alm-hm-krzywa),
box-shadow var(--alm-hm-czas) var(--alm-hm-krzywa);
}
#leo_search_top_button:hover {
background-color: var(--alm-hm-braz-hover);
transform: scale(1.06);
box-shadow: 0 3px 10px rgba(82, 26, 6, .28);
}
#leo_search_top_button:active {
transform: scale(.98);
}
/* Widoczna obwodka calego pola przy pisaniu. Ograniczone do desktopu, zeby
nie wchodzic w mechanizm rozwijania lupy z custom.css (<=575 px). */
@media (min-width: 992px) {
#leo_search_block_top {
border-radius: 22px;
transition: box-shadow var(--alm-hm-czas) var(--alm-hm-krzywa);
}
#leo_search_block_top:focus-within {
box-shadow: 0 0 0 3px rgba(42, 124, 0, .18);
}
}
/* --- 3c. Ikona konta ----------------------------------------------------- */
.top-right-header .leo-quicklogin-nav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
color: var(--alm-hm-braz);
line-height: 1;
transition: background-color var(--alm-hm-czas) var(--alm-hm-krzywa),
color var(--alm-hm-czas) var(--alm-hm-krzywa),
transform var(--alm-hm-czas) var(--alm-hm-krzywa);
}
.top-right-header .leo-quicklogin-nav:hover {
background-color: var(--alm-hm-tint);
color: var(--alm-hm-zielen);
transform: translateY(-1px);
}
/* --- 3d. Koszyk ----------------------------------------------------------
Padding jest kompensowany ujemnym marginesem, zeby pigulka pojawila sie
BEZ poszerzania kolumny (prawa kolumna jest najciasniejszym miejscem
naglowka i kazde 20 px ma tam znaczenie). */
#_desktop_cart .blockcart > .header {
padding: 6px 10px;
margin: -6px -10px;
border-radius: 999px;
transition: background-color var(--alm-hm-czas) var(--alm-hm-krzywa),
transform var(--alm-hm-czas) var(--alm-hm-krzywa);
}
#_desktop_cart .blockcart:hover > .header {
background-color: var(--alm-hm-tint);
transform: translateY(-1px);
}
/* --- 3e. Pasek gorny #tc1/#tc2/#tc3 --------------------------------------
UWAGA: ani jedna z tych regul nie dotyka opacity. Hover jest zrobiony
kolorem, bialym tlem i przesunieciem. Zakres od 768 px, czyli powyzej
progu, na ktorym custom.js przelacza te trzy elementy w karuzeli i
a11y-fixes.css blokuje im animacje przezroczystosci.
Ujemny margines w pionie kasuje przyrost wysokosci paska (0 px roznicy). */
@media (min-width: 768px) {
#tc1 > a,
#tc2 > a,
#tc3 > a {
display: inline-block;
padding: 3px 12px;
margin: -3px 0;
border-radius: 999px;
transition: background-color var(--alm-hm-czas) var(--alm-hm-krzywa),
color var(--alm-hm-czas) var(--alm-hm-krzywa),
transform var(--alm-hm-czas) var(--alm-hm-krzywa);
}
/* theme.css ma `.tc a:hover{color:inherit!important}` (potwierdzone przez
CSS.getMatchedStylesForNode), wiec sam kolor wymaga !important - inaczej
link zostaje szary mimo poprawnie zadzialanego tla i przesuniecia.
Reszta wlasciwosci !important NIE potrzebuje. */
#header #tc1 > a:hover,
#header #tc2 > a:hover,
#header #tc3 > a:hover {
background-color: #fff; /* zielen na bieli = 5,27:1 */
color: var(--alm-hm-zielen) !important;
transform: translateY(-1px);
}
#header #tc1 > a:hover .icomoon,
#header #tc2 > a:hover .icomoon,
#header #tc3 > a:hover .icomoon {
color: var(--alm-hm-zielen) !important;
}
}
/* ==========================================================================
4. MENU GLOWNE: pigulka hover, stan aktywny, focus
Zmierzone PRZED: ul.navbar-nav ma display:table, a a.nav-link jest blokiem
wypelniajacym cala komorke (np. "Meble" 106 px przy tekscie ~60 px).
Tlo hover na takim bloku wyszloby nierowne i szersze od napisu, dlatego
linki przechodza na inline-block i pigulka oblewa sam tekst. Komorki sa
wyrownane do srodka (theme.css), wiec pozycje pozostaja te same.
Marginesy 16 px sa zerowane - odstep robi teraz szerokosc komorki tabeli.
========================================================================== */
@media (min-width: 992px) {
#header #navbar .navbar-nav > .nav-item > .nav-link {
display: inline-block;
width: auto;
padding: 7px 16px;
margin: 0;
border-radius: 999px;
transition: background-color var(--alm-hm-czas) var(--alm-hm-krzywa),
color var(--alm-hm-czas) var(--alm-hm-krzywa);
}
#header #navbar .navbar-nav > .nav-item > .nav-link:hover,
#header #navbar .navbar-nav > .nav-item > .nav-link:focus {
background-color: var(--alm-hm-tint); /* #eef5eb */
color: var(--alm-hm-zielen); /* 4,75:1 */
}
/* Stan aktywny: pozycja biezaca ORAZ pozycja z otwartym megamenu.
Pelna zielen na bardzo jasnym tincie plus kreska pod spodem, zeby
stan byl czytelny takze bez rozroznienia koloru. */
#header #navbar .navbar-nav > .nav-item.active > .nav-link,
#header #navbar .navbar-nav > .nav-item > .nav-link.active,
#header #navbar .navbar-nav > .nav-item.open > .nav-link {
position: relative;
background-color: var(--alm-hm-tint);
color: var(--alm-hm-zielen);
}
#header #navbar .navbar-nav > .nav-item.active > .nav-link::before,
#header #navbar .navbar-nav > .nav-item > .nav-link.active::before,
#header #navbar .navbar-nav > .nav-item.open > .nav-link::before {
content: "";
position: absolute;
left: 16px;
right: 16px;
bottom: 2px;
height: 2px;
border-radius: 2px;
background-color: var(--alm-hm-zielen);
}
/* Strzalka rozwijania obraca sie razem ze stanem otwartym. */
#header #navbar .navbar-nav > .nav-item > .nav-link.dropdown-toggle::after {
transition: transform var(--alm-hm-czas) var(--alm-hm-krzywa);
}
#header #navbar .navbar-nav > .nav-item.open > .nav-link.dropdown-toggle::after {
transform: rotate(180deg);
}
}
/* --- 4b. Fokus z klawiatury (obowiazkowo, sklep ma 100/100 w a11y) -------
:focus-visible nie zapala sie przy kliknieciu myszka, wiec nie psuje
wygladu, a Tab daje wyrazna zielona obwodke na kazdym elemencie naglowka. */
#header .header_logo > a:focus-visible,
#header #leo_search_top_button:focus-visible,
#header #leo_search_query_top:focus-visible,
#header .top-right-header .leo-quicklogin-nav:focus-visible,
#header .top-right-header .support-box a.number:focus-visible,
#header #_desktop_cart a:focus-visible,
#header #_desktop_cart .blockcart:focus-visible,
#header #tc1 > a:focus-visible,
#header #tc2 > a:focus-visible,
#header #tc3 > a:focus-visible,
#header .navbar .navbar-toggler:focus-visible,
#header #navbar .navbar-nav > .nav-item > .nav-link:focus-visible,
#header .megamenu .col-md-4 > b > a:focus-visible,
#header .megamenu a.dropdown-item:focus-visible {
outline: 3px solid var(--alm-hm-zielen);
outline-offset: 2px;
}
/* Przycisk lupy to , a theme.css gasi mu obwodke regula
`.btn:active, .btn:focus, ... { outline: none !important; }`. Bez !important
fokus klawiaturowy na tym jednym elemencie bylby niewidoczny, co jest
naruszeniem WCAG 2.4.7. Zakres reguly to wylacznie ten przycisk. */
#header #leo_search_top_button:focus-visible {
outline: 3px solid var(--alm-hm-zielen) !important;
outline-offset: 2px;
}
#header #navbar .navbar-nav > .nav-item > .nav-link:focus-visible,
#header #tc1 > a:focus-visible,
#header #tc2 > a:focus-visible,
#header #tc3 > a:focus-visible {
outline-offset: 1px;
}
#header .top-right-header .support-box a.number:focus-visible {
outline-offset: -1px;
}
#header .megamenu a.dropdown-item:focus-visible,
#header .megamenu .col-md-4 > b > a:focus-visible {
outline-offset: -1px;
border-radius: 8px;
}
/* ==========================================================================
5. DROPDOWN MEGAMENU: ksztalt, cien, wejscie
Zmierzone PRZED: border-radius 4 px, box-shadow none, ramka
rgba(0,0,0,.15), padding 8px 0. Panel wygladal jak surowy dropdown
Bootstrapa, a nie jak panel kategorii sklepu meblowego.
Menu otwiera sie KLIKNIECIEM (data-toggle="dropdown", klasa .open na ),
a Bootstrap przelacza display none/block. Przejscia CSS nie animuja zmiany
display, wiec pojawianie sie robimy animacja keyframes - ta odpala sie
dokladnie w momencie, gdy element staje sie widoczny.
========================================================================== */
@media (min-width: 992px) {
#header #navbar .dropdown-menu.megamenu {
padding: 24px 12px 18px;
margin-top: 10px;
border: 1px solid var(--alm-hm-linia);
border-radius: 16px;
box-shadow: 0 18px 44px rgba(82, 26, 6, .13),
0 2px 6px rgba(82, 26, 6, .06);
overflow: hidden;
}
#header #navbar .nav-item.open > .dropdown-menu.megamenu {
animation: alm-hm-dropdown var(--alm-hm-czas) var(--alm-hm-krzywa) both;
}
/* Kafel promocyjny odciety od kolumn z linkami cienka linia.
Celujemy w KOLUMNE, nie w sam kafel - style kafla naleza do
menu-promo.css i nie sa tu ruszane. */
#header .megamenu .cnav > .col-md-3 {
border-left: 1px solid #f2ece5;
padding-left: 26px;
}
/* Delikatne pionowe linie miedzy trzema kolumnami grup.
Grupy plywaja (float) i przy roznych wysokosciach nie trzymaja sie
kolejnosci nth-child, wiec linie rysujemy tlem samego wiersza na
33,33% i 66,66% jego szerokosci - wtedy zawsze trafiaja dokladnie
w granice kolumn, niezaleznie od tego, jak grupy sie ulozyly. */
#header .megamenu .cnav > .col-md-9 > .row {
background-image:
linear-gradient(to right, transparent calc(33.3333% - 1px), #f2ece5 calc(33.3333% - 1px), #f2ece5 33.3333%, transparent 33.3333%),
linear-gradient(to right, transparent calc(66.6666% - 1px), #f2ece5 calc(66.6666% - 1px), #f2ece5 66.6666%, transparent 66.6666%);
background-repeat: no-repeat;
}
}
@keyframes alm-hm-dropdown {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: none; }
}
/* ==========================================================================
6. LINKI W DROPDOWNIE: kolka zamiast strzalek
Sprawdzone na zywo: .megamenu a.dropdown-item NIE ma dzis ani ::before,
ani ::after (obie maja content:none), a kopia zapasowa custom.css z
nazwa "strzalki" dotyczy strzalek karuzeli MagicScroll na karcie
produktu, nie menu. Mimo to zostawiamy jawna neutralizacje ::after -
gdyby ktos dopisal strzalke do custom.css, ten plik ja zgasi, a kolko
zostanie.
Efekt: pusty pierscien przy kazdym linku, ktory na hover wypelnia sie
zielenia marki, lekko rosnie i dostaje miekka poswiate, a tekst
przesuwa sie o 6 px w prawo. Pierscien #a1937f na bieli = 3,00:1,
czyli spelnia prog 1.4.11 dla elementow nietekstowych.
========================================================================== */
/* Neutralizacja ewentualnej strzalki (obronnie - dzis nie ma zadnej). */
#header .megamenu a.dropdown-item::after {
content: none;
}
#header .megamenu a.dropdown-item {
position: relative;
border-bottom-color: #f4efe9;
transition: color var(--alm-hm-czas) var(--alm-hm-krzywa),
padding-left var(--alm-hm-czas) var(--alm-hm-krzywa);
}
#header .megamenu a.dropdown-item::before {
content: "";
position: absolute;
left: 3px;
top: 50%;
width: 9px;
height: 9px;
margin-top: -4.5px;
border: 1.5px solid #a1937f;
border-radius: 50%;
background-color: transparent;
box-shadow: 0 0 0 0 rgba(42, 124, 0, 0);
transition: background-color var(--alm-hm-czas) var(--alm-hm-krzywa),
border-color var(--alm-hm-czas) var(--alm-hm-krzywa),
transform var(--alm-hm-czas) var(--alm-hm-krzywa),
box-shadow var(--alm-hm-czas) var(--alm-hm-krzywa);
}
#header .megamenu a.dropdown-item:hover::before,
#header .megamenu a.dropdown-item:focus::before {
background-color: var(--alm-hm-zielen);
border-color: var(--alm-hm-zielen);
transform: scale(1.35);
box-shadow: 0 0 0 4px rgba(42, 124, 0, .14);
}
#header .megamenu a.dropdown-item:hover,
#header .megamenu a.dropdown-item:focus {
color: var(--alm-hm-zielen); /* #2a7c00 na bieli = 5,27:1 */
background-color: transparent;
}
/* Miejsce na kolko i przesuniecie tekstu robimy TYLKO od 768 px.
Ponizej obowiazuje padding z custom.css (12px 0 12px 22px, cel dotykowy
44 px) i kolko miesci sie w nim bez zmian - patrz sekcja M5 custom.css.
Wlasciwosci display tu NIE ustawiamy (custom.js steruje nia inline). */
@media (min-width: 768px) {
#header .megamenu a.dropdown-item {
padding: 7px 0 7px 24px;
}
#header .megamenu a.dropdown-item:hover,
#header .megamenu a.dropdown-item:focus {
padding-left: 30px;
}
}
/* ==========================================================================
7. RYTM PIONOWY I NAGLOWKI GRUP W DROPDOWNIE
Zmierzone PRZED: naglowek grupy to 19 px/700 #521a06 z paddingiem
5px 0 10px, bez zadnej linii - wizualnie nie odroznial sie od linkow
ponizej poza grubosca. Kolumny mialy padding-bottom 10 px.
Uwaga na grupy BEZ podkategorii (Pufy, Krzesla, Stoly, Lawy, Biurka) -
tam naglowek jest w istocie zwyklym linkiem, wiec nie dostaje linii ani
akcentu, tylko hover taki jak pozostale linki.
========================================================================== */
@media (min-width: 768px) {
#header .megamenu .cnav > .col-md-9 > .row > .col-md-4 {
padding-bottom: 22px;
}
#header .megamenu .col-md-4 > b > a {
position: relative;
display: block;
padding: 0 0 9px;
margin-bottom: 9px;
font-size: 18px;
font-weight: 700;
letter-spacing: .01em;
color: var(--alm-hm-braz); /* 13,92:1 na bieli */
transition: color var(--alm-hm-czas) var(--alm-hm-krzywa);
}
/* Cienka linia pod naglowkiem + krotki zielony akcent, ktory rosnie
na hover. Tylko tam, gdzie grupa naprawde ma podkategorie. */
#header .megamenu .col-md-4:has(.dropdown-item) > b > a {
border-bottom: 1px solid var(--alm-hm-linia);
}
#header .megamenu .col-md-4:has(.dropdown-item) > b > a::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 26px;
height: 2px;
border-radius: 2px;
background-color: var(--alm-hm-zielen);
transition: width var(--alm-hm-czas) var(--alm-hm-krzywa);
}
#header .megamenu .col-md-4:has(.dropdown-item) > b > a:hover::after {
width: 54px;
}
#header .megamenu .col-md-4 > b > a:hover {
color: var(--alm-hm-zielen); /* 5,27:1 na bieli */
}
/* Grupa bez podkategorii to samodzielny link - dostaje kolko takie samo
jak pozycje listy, zeby cala kolumna czytala sie jednolicie. */
#header .megamenu .col-md-4:not(:has(.dropdown-item)) > b > a {
padding: 4px 0 4px 24px;
margin-bottom: 4px;
transition: color var(--alm-hm-czas) var(--alm-hm-krzywa),
padding-left var(--alm-hm-czas) var(--alm-hm-krzywa);
}
#header .megamenu .col-md-4:not(:has(.dropdown-item)) > b > a::before {
content: "";
position: absolute;
left: 3px;
top: 50%;
width: 9px;
height: 9px;
margin-top: -4.5px;
border: 1.5px solid #a1937f;
border-radius: 50%;
transition: background-color var(--alm-hm-czas) var(--alm-hm-krzywa),
border-color var(--alm-hm-czas) var(--alm-hm-krzywa),
transform var(--alm-hm-czas) var(--alm-hm-krzywa),
box-shadow var(--alm-hm-czas) var(--alm-hm-krzywa);
}
#header .megamenu .col-md-4:not(:has(.dropdown-item)) > b > a:hover {
padding-left: 30px;
}
#header .megamenu .col-md-4:not(:has(.dropdown-item)) > b > a:hover::before {
background-color: var(--alm-hm-zielen);
border-color: var(--alm-hm-zielen);
transform: scale(1.35);
box-shadow: 0 0 0 4px rgba(42, 124, 0, .14);
}
}
/* ==========================================================================
8. MOBILE (< 992 px): poza kafelem kontaktowym nic nie ruszamy
Wszystkie reguly powyzej sa zamkniete w media queries od 768 lub 992 px,
poza:
- hoverami logo/lupy/konta/koszyka (bezpieczne, na dotyku hover i tak
nie wystepuje, a wlasciwosci nie zmieniaja rozmiarow),
- kolkiem przy .dropdown-item (miesci sie w istniejacym paddingu),
- fokusem klawiaturowym,
- kafelem kontaktowym z sekcji 2c.
Ponizej jedyna korekta specyficznie mobilna: kolko przy pozycjach menu
ma byc troche mniej kontrastowe, bo na waskiej kolumnie kropki ustawiaja
sie w pionowa linie i przy pelnym #a1937f robily sie halasliwe.
========================================================================== */
@media (max-width: 767.98px) {
/* Zmierzone na zywo: na mobile obowiazuje NIE `padding:12px 0 12px 22px`
z custom.css (sekcja M5, specyficznosc 0,2,0), tylko
`#header .dropdown-item{padding:10px 0 10px 10px}` z theme.css
(specyficznosc 1,1,0) - selektor po #id wygrywa. Realne wciecie to
wiec 10 px, a nie 22 px, i kolko nachodzilo na pierwsza litere.
Ustawiamy TYLKO wciecie z lewej (1,2,1 wygrywa z obiema regulami),
zostawiajac odstepy w pionie i min-height 44 px bez zmian, zeby nie
ruszyc dostrojonego celu dotykowego. */
#header .megamenu a.dropdown-item {
padding-left: 26px;
}
#header .megamenu a.dropdown-item::before {
left: 5px;
border-color: #b3a79b;
}
/* Cel dotykowy burgera i pozycji menu zostaje taki, jak ustawil go
custom.css - tutaj tylko plynne tlo przy tapnieciu. */
#header .navbar .navbar-toggler {
transition: background-color var(--alm-hm-czas) var(--alm-hm-krzywa);
}
}
/* ==========================================================================
9. prefers-reduced-motion: wszystko bez ruchu
========================================================================== */
@media (prefers-reduced-motion: reduce) {
#header .header_logo > a,
#header #leo_search_top_button,
#header #leo_search_block_top,
#header .top-right-header .leo-quicklogin-nav,
#header .top-right-header .support-box,
#header .top-right-header .support-box > i.icomoon,
#header .top-right-header .support-box a.number,
#header #_desktop_cart .blockcart > .header,
#header #tc1 > a,
#header #tc2 > a,
#header #tc3 > a,
#header #navbar .navbar-nav > .nav-item > .nav-link,
#header #navbar .navbar-nav > .nav-item > .nav-link.dropdown-toggle::after,
#header .megamenu a.dropdown-item,
#header .megamenu a.dropdown-item::before,
#header .megamenu .col-md-4 > b > a,
#header .megamenu .col-md-4 > b > a::before,
#header .megamenu .col-md-4 > b > a::after,
#header .navbar .navbar-toggler {
transition: none !important;
}
#header .header_logo > a:hover,
#header #leo_search_top_button:hover,
#header .top-right-header .leo-quicklogin-nav:hover,
#header #_desktop_cart .blockcart:hover > .header,
#header #tc1 > a:hover,
#header #tc2 > a:hover,
#header #tc3 > a:hover {
transform: none;
}
#header .megamenu a.dropdown-item:hover::before,
#header .megamenu a.dropdown-item:focus::before,
#header .megamenu .col-md-4 > b > a:hover::before {
transform: none;
}
#header #navbar .nav-item.open > .dropdown-menu.megamenu {
animation: none !important;
}
}